/*
 * Throne & Brew (repo: pitstop) -- gold.css
 *
 * Everything that is GOLD: the medallions (Golden Throne / Brew / Bite), the
 * Royal Flush crown, the badge strip on a list row, the gold block on the
 * station sheet, the gold map pin, the Top pick mark and the wordmark. Loaded after the component sheets it decorates.
 *
 * One rule runs through all of it: a gold MEDALLION or gold bar only ever
 * means a badge. A "great" score that is not a badge stays green; the brand
 * accent is a deep gold used for controls, never for a medallion.
 *
 * The metal is the same in both themes (tokens in base.css). On a light
 * surface the fill alone is 1.74:1, so every medallion carries a --gold-edge
 * outline and --gold-ink glyph (6.71:1 on the fill) -- the shape never rests
 * on the fill's contrast.
 */

/* ---------- glyph + medallion ---------- */
.gold-glyph { display: block; flex: none; }

.gold-medal {
  --medal: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--medal);
  height: var(--medal);
  border-radius: 50%;
  background: var(--gold, #f2bd1d);
  background-image: linear-gradient(145deg, var(--gold-hi, #ffe58a) 0%, var(--gold, #f2bd1d) 46%, var(--gold-lo, #c8930a) 100%);
  border: 1px solid var(--gold-edge, #8a6200);
  color: var(--gold-ink, #4a3500);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(0, 0, 0, 0.18);
  vertical-align: middle;
}

/* The crown stands alone (no disc): gold fill, dark-gold outline. */
.gold-crown {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--gold, #f2bd1d);
  line-height: 1;
}
.gold-crown .gold-glyph {
  stroke: var(--gold-edge, #8a6200);
  stroke-width: 1.4;
  stroke-linejoin: round;
  paint-order: stroke fill;
  overflow: visible;
}

/* ---------- top bar: logo tile + wordmark ---------- */
.tb-logo {
  background: var(--gold, #f2bd1d);
  background-image: linear-gradient(145deg, var(--gold-hi, #ffe58a) 0%, var(--gold, #f2bd1d) 46%, var(--gold-lo, #c8930a) 100%);
  border: 1px solid var(--gold-edge, #8a6200);
  color: var(--gold-ink, #4a3500);
  width: 32px;
  height: 32px;
  flex: none;
}
.tb-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.08;
}
.tb-name-main {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
/* the ampersand is the one gold letter in the wordmark */
.tb-amp { color: var(--gold-text, #6b4c00); }

/* filter chips: the badge chips lead with a medallion instead of a font icon */
.tb-chip .gold-medal { margin-left: -6px; }
.tb-chip.is-active .gold-medal { border-color: var(--gold-ink, #4a3500); }

/* ---------- list rows ---------- */
.ps-crown.gold-crown { font-size: inherit; }

/* Top pick: the best-rated stop. Words, not the crown -- the crown is Royal
   Flush only. */
.ps-top {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid var(--gold-border, rgba(138, 98, 0, 0.35));
  background: var(--gold-soft, #fbf0cc);
  color: var(--gold-text, #6b4c00);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* the badge strip: medallion + the number of reviews it rests on */
.gold-set {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 8px;
}
.gold-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.gold-badge-n {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-dim, #5b6470);
  font-variant-numeric: tabular-nums;
}
.gold-royal {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--gold, #f2bd1d);
  background-image: linear-gradient(145deg, var(--gold-hi, #ffe58a) 0%, var(--gold, #f2bd1d) 46%, var(--gold-lo, #c8930a) 100%);
  border: 1px solid var(--gold-edge, #8a6200);
  color: var(--gold-ink, #4a3500);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* a badge dimension at gold fills gold on every meter and bar */
.ps-meter-fill[data-gold],
.ps-dt-dim-fill[data-gold] {
  background: var(--gold, #f2bd1d);
  background-image: linear-gradient(90deg, var(--gold-lo, #c8930a), var(--gold, #f2bd1d));
  box-shadow: inset 0 0 0 1px var(--gold-edge, #8a6200);
}

/* Royal Flush empty state */
.ps-empty-crown { justify-content: center; margin-bottom: 6px; }

/* ---------- station sheet: the gold block ---------- */
.ps-dt-gold {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: var(--radius-md, 14px);
  border: 1px solid var(--gold-border, rgba(138, 98, 0, 0.35));
  background: var(--gold-soft, #fbf0cc);
  color: var(--gold-text, #6b4c00);
}
.ps-dt-gold.is-royal { border-width: 2px; border-color: var(--gold-edge, #8a6200); }
.ps-dt-gold-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.ps-dt-gold-line {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}
.ps-dt-gold-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ps-dt-gold-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.ps-dt-gold-name { font-weight: 800; font-size: 0.92rem; }
.ps-dt-gold-meta {
  font-size: 0.82rem;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- rating sheet ---------- */
.rating-dim-gold { flex: none; }
.rating-confirm-gold {
  margin-top: 2px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 800;
  text-align: center;
}
.rating-confirm-gold.is-won {
  border: 1px solid var(--gold-border, rgba(138, 98, 0, 0.35));
  background: var(--gold-soft, #fbf0cc);
  color: var(--gold-text, #6b4c00);
}
.rating-confirm-gold.is-lost {
  background: var(--tier-none-soft, #eef0f3);
  color: var(--text-dim, #5b6470);
}

/* ---------- priorities sheet ---------- */
.pf-ico--gold { color: var(--gold-ink, #4a3500); }

/* ---------- map pins ---------- */
/* The gold disc replaces the white dot; the tier colour still shows as the
   ring around it and the tail below, so quality and badge both read. */
.map-pin-gold {
  fill: var(--gold, #f2bd1d);
  stroke: var(--gold-edge, #8a6200);
  stroke-width: 0.9;
}
.map-pin-glyph--gold {
  /* ink on the gold disc, the same in both themes: 7.75:1 */
  color: #3d2c00;
  height: 29.5px; /* the disc's centre sits at 11.8/34 of the 42px pin */
}
/* second badge: a small gold bubble on the pin's shoulder */
.map-pin-extra {
  position: absolute;
  top: -5px;
  right: -7px;
  line-height: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
/* Royal Flush: the crown above the pin. */
.map-pin-crown.gold-crown { top: -15px; }

/* ---------- narrow phones ---------- */
/* The wordmark is wider than the old one-word name. With the cards
   button showing, the brand row is full at 375px; below that, tighten before
   anything is allowed to truncate, and at the narrowest widths the Trip button
   goes icon-only (it keeps its aria-label). */
.tb-name-main { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 370px) {
  .tb-logo { width: 28px; height: 28px; }
  .tb-name-main { font-size: 15px; }
  .tb-brand-actions { gap: 6px; }
  .tb-trip-btn { padding: 0 12px; }
}
@media (max-width: 340px) {
  .tb-trip-btn span { display: none; }
}