/* ==========================================================================
   Unspun — design system v2 ("Modern fashion-tech")
   Cool near-white ground, cobalt-indigo brand accent, coral for the
   contribute path, a 4-step semantic verdict spectrum (green→amber→orange→
   red), Space Grotesk for display, Inter for body, IBM Plex Mono reserved
   strictly for data (prices, verdicts, eyebrows, citations).
   ========================================================================== */

:root {
  /* Ground */
  --bg: #FAFAF9;
  --surface: #FFFFFF;
  --surface-sunken: #F1F2F4;
  --ink: #14161A;
  --ink-soft: #5B616B;
  --ink-faint: #8B909A;

  /* Hairlines */
  --line: rgba(20, 22, 26, 0.11);
  --line-soft: rgba(20, 22, 26, 0.065);

  /* Brand accents — deliberately not green; cobalt for lookup/navigation,
     coral reserved for the "contribute" path so it's never confused with
     search (see Rate My Piece styling below). */
  --cobalt: #3A4DE0;
  --cobalt-bg: rgba(58, 77, 224, 0.09);
  --cobalt-ring: rgba(58, 77, 224, 0.22);
  --coral: #E85A3B;
  --coral-bg: rgba(232, 90, 59, 0.10);
  --coral-dark: #C7451F;

  /* 4-step semantic verdict spectrum */
  --good: #178A5C;
  --good-bg: rgba(23, 138, 92, 0.12);
  --mixed: #C4870C;
  --mixed-bg: rgba(196, 135, 12, 0.13);
  --caution: #C1531E;
  --caution-bg: rgba(193, 83, 30, 0.13);
  --skip: #D6392A;
  --skip-bg: rgba(214, 57, 42, 0.12);

  /* Material rating reuses the same three hues (green/yellow/red map onto
     good/mixed/skip) so the fiber guide and the verdict spectrum agree. */
  --green: var(--good);
  --green-bg: var(--good-bg);
  --yellow: var(--mixed);
  --yellow-bg: var(--mixed-bg);
  --red: var(--skip);
  --red-bg: var(--skip-bg);

  --denim: var(--cobalt);
  --rust: var(--coral-dark);

  /* Type
     --display  Fraunces, the editorial serif: headlines, piece names,
                verdicts. It carries the voice.
     --figures  Space Grotesk: prices and scores, where a geometric sans
                keeps numerals unambiguous next to all that serif.
     --body     Inter.  --mono  IBM Plex Mono, strictly for data labels. */
  /* One friendly family throughout. The old mix — an editorial serif for
     headings and a monospace for every label — is what made the app read
     like a forum post rather than something you'd shop in. Labels keep their
     letter-spacing so they still read as labels without the typewriter. */
  --display: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --figures: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --shell: 1160px;
  --radius: 8px;
  --radius-sm: 5px;
}

*, *::before, *::after { box-sizing: border-box; }
/* Any component that sets its own `display` (cards, grids, rows) would
   otherwise beat the browser's default rule for [hidden], leaving filtered
   items on screen. Filtering sets the attribute; this makes it stick. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 600; line-height: 1.12; margin: 0;
  letter-spacing: -0.005em; font-variation-settings: "opsz" 40;
}
p { margin: 0; }
a { color: inherit; }
button { font-family: inherit; }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 1.5rem; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--ink); color: var(--bg);
  padding: 0.6rem 1rem; font-family: var(--mono); font-size: 0.75rem;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
#main:focus { outline: none; }

/* --------------------------------------------------------------- masthead */

.masthead {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky; top: 0; z-index: 20;
  /* Installed to the home screen there is no browser chrome, so the app owns
     the space under the status bar and has to pad for it itself. In a normal
     tab the inset is 0 and this changes nothing. The variable exists so the
     inset can be simulated on a desktop, which always reports zero. */
  padding-top: var(--inset-top, env(safe-area-inset-top));
}

.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  /* Block padding only — the side gutter comes from .shell, and a
     `padding: 1.1rem 0` shorthand here would zero it out below 1160px. */
  padding-block: 1.1rem;
}

.wordmark { text-decoration: none; display: flex; align-items: baseline; gap: 0.6rem; }
.wordmark__name {
  font-family: var(--display); font-weight: 700; font-size: 1.35rem;
  letter-spacing: -0.02em; color: var(--ink);
}
.wordmark__tagline {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 500;
  color: var(--ink-faint); letter-spacing: 0.03em;
}

.tabs { display: flex; align-items: center; gap: 0.15rem; flex-wrap: wrap; }

.tab {
  font-family: var(--body); font-size: 0.86rem; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
  padding: 0.5rem 0.7rem; border-radius: var(--radius-sm);
}
.tab:hover { color: var(--ink); background: var(--surface-sunken); }
.tab[aria-current="page"] { color: var(--cobalt); background: var(--cobalt-bg); }
.tab__dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 0.4rem; vertical-align: 1px;
}
.tab__dot--green { background: var(--good); }
.tab__dot--yellow { background: var(--mixed); }
.tab__dot--red { background: var(--skip); }

.tab--rate {
  color: var(--coral-dark); background: var(--coral-bg);
  font-weight: 600; margin-left: 0.3rem;
}
.tab--rate:hover { color: #fff; background: var(--coral); }

/* ------------------------------------------------------------------- page */

#main { flex: 1 0 auto; padding-top: 2.25rem; padding-bottom: 4rem; }

.page-head { max-width: 60ch; margin-bottom: 2.25rem; }
.eyebrow {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral-dark);
  margin-bottom: 0.7rem;
}
.page-head h1 { font-size: clamp(1.9rem, 4.6vw, 2.6rem); }
.page-head__lede {
  margin-top: 0.85rem; font-size: 1.05rem; color: var(--ink-soft); line-height: 1.6;
}

.rule { height: 1px; background: var(--line); border: 0; margin: 2.25rem 0; }

/* ---------------------------------------------------------------- search */

.search-hero { max-width: 44rem; margin: 0 auto; text-align: center; }
.search-hero__kicker {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral-dark);
  margin-bottom: 1rem;
}
.search-hero h1 {
  font-size: clamp(1.9rem, 5.2vw, 2.75rem);
  letter-spacing: -0.02em;
}
.search-hero__lede {
  margin: 0.85rem auto 0; max-width: 40ch;
  font-size: 1.05rem; color: var(--ink-soft); line-height: 1.55;
}

.search-box {
  position: relative;
  margin: 1.75rem auto 0;
  max-width: 38rem;
  text-align: left;
}
.search-box__field {
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0.2rem 0.4rem 0.2rem 1.15rem;
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-box__field:focus-within {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 4px var(--cobalt-ring);
}
.search-box__icon { flex: none; color: var(--ink-faint); display: flex; }
.search-box__input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  padding: 0.85rem 0;
}
.search-box__input::placeholder { color: var(--ink-faint); }
.search-box__clear {
  flex: none; border: 0; background: none; color: var(--ink-faint);
  cursor: pointer; padding: 0.5rem; border-radius: 50%; display: none;
  font-size: 1rem; line-height: 1;
}
.search-box__clear:hover { background: var(--surface-sunken); color: var(--ink); }
.search-box__clear--visible { display: block; }

.search-box__results {
  position: absolute; left: 0; right: 0; top: calc(100% + 0.6rem);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 12px 28px rgba(20, 22, 26, 0.10);
  overflow: hidden; z-index: 30; text-align: left;
}
.search-result {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.75rem 1.1rem; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--line-soft);
}
.search-result:last-child { border-bottom: 0; }
.search-result:hover, .search-result--active { background: var(--surface-sunken); }
.search-result__name { font-weight: 600; font-size: 0.92rem; }
.search-result__brand { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.1rem; }
.search-result__verdict {
  margin-left: auto; flex: none;
  font-family: var(--mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.28rem 0.55rem; border-radius: 999px;
}
.search-result__verdict--good { color: var(--good); background: var(--good-bg); }
.search-result__verdict--mixed { color: var(--mixed); background: var(--mixed-bg); }
.search-result__verdict--caution { color: var(--caution); background: var(--caution-bg); }
.search-result__verdict--skip { color: var(--skip); background: var(--skip-bg); }
.search-empty {
  padding: 1.4rem 1.1rem; text-align: left;
}
.search-empty__text { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.55; }
.search-empty__cta {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.85rem;
  font-family: var(--body); font-weight: 600; font-size: 0.88rem;
  color: #fff; background: var(--coral);
  padding: 0.55rem 1rem; border-radius: 999px; text-decoration: none;
}
.search-empty__cta:hover { background: var(--coral-dark); }
.search-results__label {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
  padding: 0.85rem 1.1rem 0.45rem; border-top: 1px solid var(--line-soft);
}

.search-examples {
  margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
}
.search-examples__label {
  font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint);
  align-self: center; margin-right: 0.15rem;
}
.search-chip {
  font-family: var(--body); font-size: 0.82rem; color: var(--ink-soft);
  background: var(--surface-sunken); border: 1px solid var(--line);
  padding: 0.35rem 0.8rem; border-radius: 999px; cursor: pointer;
}
.search-chip:hover { border-color: var(--cobalt); color: var(--cobalt); }

/* ----------------------------------------------------------- home layout */

.home-actions {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  margin: 1.5rem 0 0; flex-wrap: wrap;
}
.home-actions__label { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); }
.rate-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--body); font-weight: 600; font-size: 0.92rem;
  color: var(--coral-dark); text-decoration: none;
  border: 1.5px solid var(--coral); border-radius: 999px;
  padding: 0.6rem 1.15rem;
}
.rate-cta:hover { background: var(--coral); color: #fff; }
.rate-cta__plus {
  display: grid; place-items: center; width: 1.1rem; height: 1.1rem;
  border-radius: 50%; background: var(--coral); color: #fff;
  font-size: 0.8rem; line-height: 1;
}
.rate-cta:hover .rate-cta__plus { background: #fff; color: var(--coral-dark); }

.trust-strip {
  margin: 3rem auto 0; max-width: 44rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  text-align: center;
}
.trust-stats { display: flex; gap: 2.25rem; flex-wrap: wrap; justify-content: center; }
.trust-stat__num {
  font-family: var(--figures); font-weight: 700; font-size: 1.5rem; color: var(--ink);
}
.trust-stat__label {
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 0.25rem;
}
.trust-strip__note {
  font-size: 0.92rem; color: var(--ink-soft); max-width: 46ch; line-height: 1.55;
}
.trust-strip__link {
  font-family: var(--body); font-weight: 600; font-size: 0.88rem;
  color: var(--cobalt); text-decoration: none;
  border-bottom: 1px solid var(--cobalt-ring);
}
.trust-strip__link:hover { border-color: var(--cobalt); }

.directory-note {
  margin: 2.5rem auto 0; max-width: 48ch; text-align: center;
  font-family: var(--mono); font-size: 0.75rem; color: var(--ink-faint); line-height: 1.6;
}

/* ------------------------------------------------------------------ cards */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
}

.grid-materials { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
/* Deep links (#/materials/linen) scroll a card to the top — clear the sticky
   masthead the same way .brand does. */
.material { scroll-margin-top: 6rem; }

.material__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.material__name { font-size: 1.35rem; }
.material__subtitle { margin-top: 0.6rem; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.5; }

.scores {
  display: grid; gap: 0.5rem; margin-top: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
.score {
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--surface-sunken); padding: 0.6rem 0.7rem;
}
.score__label {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-faint); line-height: 1.3;
}
.score__value { font-family: var(--figures); font-weight: 600; font-size: 1rem; margin-top: 0.28rem; }
.score__value--green { color: var(--good); }
.score__value--yellow { color: var(--mixed); }
.score__value--red { color: var(--skip); }

.material__body { margin-top: 1.3rem; }
.material__why { margin-top: 0.65rem; font-size: 0.92rem; color: var(--ink-soft); }
.material__why:first-of-type { margin-top: 0; }
.material__why-lead { color: var(--ink); font-weight: 600; }

.fit { margin-top: 1.2rem; display: grid; gap: 0.55rem; }
.fit__row { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.75rem; align-items: baseline; }
.fit__key {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.fit__val { font-size: 0.88rem; }
.fit__val li { margin-bottom: 0.15rem; }
.fit__val ul { margin: 0; padding-left: 1.05rem; }

.bias {
  margin-top: 1.25rem;
  border-left: 3px solid var(--coral);
  background: var(--coral-bg);
  padding: 0.85rem 1.05rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.bias__label {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral-dark);
  margin-bottom: 0.35rem;
}
.bias__text { font-size: 0.88rem; line-height: 1.55; }

/* ------------------------------------------------------------------- tags */

.rating-tag {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--mono); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.35rem 0.65rem; border-radius: 999px; white-space: nowrap;
}
.rating-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rating-tag--green { color: var(--good); background: var(--good-bg); }
.rating-tag--yellow { color: var(--mixed); background: var(--mixed-bg); }
.rating-tag--red { color: var(--skip); background: var(--skip-bg); }

.verdict-line { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); margin-top: 0.3rem; }

.chip {
  display: inline-block;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.01em;
  padding: 0.24rem 0.55rem; margin: 0 0.28rem 0.28rem 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink-soft); background: var(--surface-sunken);
}
.chip--green { color: var(--good); border-color: rgba(23,138,92,0.35); background: var(--good-bg); }
.chip--yellow { color: var(--mixed); border-color: rgba(196,135,12,0.35); background: var(--mixed-bg); }
.chip--red { color: var(--skip); border-color: rgba(214,57,42,0.35); background: var(--skip-bg); }

.value-tag {
  display: inline-block;
  font-family: var(--mono); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.28rem 0.58rem; border-radius: 999px; white-space: nowrap;
}
.value-tag--worth { color: var(--good); background: var(--good-bg); }
.value-tag--fair { color: var(--mixed); background: var(--mixed-bg); }
.value-tag--over { color: var(--skip); background: var(--skip-bg); }

.item__value {
  margin-top: 0.4rem; font-size: 0.85rem; line-height: 1.5;
  max-width: 60ch; padding-left: 0.65rem; border-left: 2px solid var(--line);
}
.item__value--worth { color: var(--good); border-color: rgba(23,138,92,0.4); }
.item__value--fair { color: var(--mixed); border-color: rgba(196,135,12,0.4); }
.item__value--over { color: var(--skip); border-color: rgba(214,57,42,0.4); }

.subtier {
  display: inline-block;
  font-family: var(--display); font-weight: 700; font-size: 0.88rem;
  color: #fff; padding: 0.32rem 0.9rem; border-radius: 999px;
}
.subtier--green { background: var(--good); }
.subtier--yellow { background: var(--mixed); }
.subtier--red { background: var(--skip); }

.subtier-head { display: flex; align-items: center; gap: 1rem; margin: 2.75rem 0 1.25rem; }
.subtier-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.subtier-head__count {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.subtier-note {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.02em;
  color: var(--ink-faint); margin: -0.65rem 0 1.1rem;
}

/* --------------------------------------------------------------- brand card */

.brands { display: grid; gap: 1.1rem; }
.brand { scroll-margin-top: 6rem; }
.brand__head { display: flex; gap: 1.1rem; align-items: flex-start; }

.badge {
  flex: none;
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 1.25rem;
  color: #fff; background: var(--cobalt);
  overflow: hidden;
}
.badge--green { background: var(--good); }
.badge--yellow { background: var(--mixed); }
.badge--red { background: var(--skip); }

.brand__title { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.brand__name { font-size: 1.35rem; }
.brand__pop {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.5rem;
}
.brand__verdict { font-family: var(--mono); font-size: 0.75rem; color: var(--coral-dark); margin-top: 0.3rem; }
.brand__intro { margin-top: 1.05rem; font-size: 0.95rem; color: var(--ink-soft); max-width: 68ch; }

.category { margin-top: 1.6rem; }
.category__name {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
  padding-bottom: 0.55rem; border-bottom: 1px solid var(--line);
}

.item {
  display: grid; grid-template-columns: 60px 1fr auto;
  gap: 1.05rem; align-items: start; padding: 1.05rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.item:last-child { border-bottom: 0; padding-bottom: 0.2rem; }
.item__thumb {
  width: 60px; height: 60px; border-radius: var(--radius-sm);
  object-fit: cover; background: var(--surface-sunken);
  border: 1px solid var(--line-soft); display: block;
}
.item__thumb-badge { width: 60px; height: 60px; font-size: 1.35rem; }
.item__name { font-family: var(--display); font-size: 1.02rem; font-weight: 600; }
.item__name a { text-decoration: none; }
.item__name a:hover { color: var(--cobalt); }
.item__materials { margin-top: 0.45rem; }
.item__note { margin-top: 0.4rem; font-size: 0.87rem; color: var(--ink-soft); max-width: 60ch; }
.item__meta { text-align: right; display: grid; gap: 0.45rem; justify-items: end; }
.item__price { font-family: var(--mono); font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.item__shop {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--cobalt); text-decoration: none;
  border-bottom: 1px solid var(--cobalt-ring); padding-bottom: 1px; white-space: nowrap;
}
.item__shop:hover { color: var(--ink); border-color: var(--ink); }
.item__shop::after { content: " ↗"; letter-spacing: 0; }
.item__verdict-link {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  padding: 0.2rem 0.55rem; border-radius: 999px; font-weight: 600;
}

.block-label {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 0.7rem;
}

.evidence { margin-top: 1.75rem; }
.evidence__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.evidence__list li { position: relative; padding-left: 1.35rem; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.55; }
.evidence__list li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 6px; height: 6px; border-radius: 50%; background: var(--skip); }
.evidence--positive .evidence__list li::before { background: var(--good); }
.evidence__title { display: block; color: var(--ink); font-weight: 600; font-size: 0.92rem; margin-bottom: 0.2rem; }
.evidence__body { display: block; }

.why-tier { margin-top: 1.75rem; }
.why-tier__text { font-size: 0.92rem; color: var(--ink-soft); max-width: 68ch; }

.no-items {
  margin-top: 1.6rem; border-left: 3px solid var(--skip); background: var(--skip-bg);
  padding: 0.95rem 1.1rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.no-items__label {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--skip); margin-bottom: 0.35rem;
}
.no-items__text { font-size: 0.9rem; line-height: 1.55; }

.example-note { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-faint); margin-top: 1.6rem; }

.sources { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.sources__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.sources__list li { font-family: var(--mono); font-size: 0.7rem; line-height: 1.5; color: var(--ink-soft); word-break: break-word; }
.sources__list a { color: var(--cobalt); text-decoration: none; border-bottom: 1px solid var(--cobalt-ring); }
.sources__list a:hover { color: var(--ink); border-color: var(--ink); }

/* -------------------------------------------------------------- jump nav */

.jump {
  display: flex; align-items: baseline; gap: 0.7rem 1.05rem; flex-wrap: wrap;
  padding: 0.85rem 0; margin-bottom: 0.4rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.jump__label {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
}
.jump__link { font-family: var(--mono); font-size: 0.7rem; color: var(--cobalt); text-decoration: none; border-bottom: 1px solid transparent; }
.jump__link:hover { color: var(--ink); border-color: var(--ink); }

/* ----------------------------------------------------------- product page */

.product-head { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 2rem; }
.product-head__media { flex: none; }
.product-head__body { flex: 1; min-width: 240px; }
.product-head__brand {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft); text-decoration: none;
}
.product-head__brand:hover { color: var(--cobalt); }
.product-head__name { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-top: 0.4rem; }
.product-head__price { font-family: var(--mono); font-size: 1rem; font-weight: 600; margin-top: 0.6rem; }

/* the segmented-bar headline verdict — a 4-step spectrum, current step
   emphasized, the rest muted. Deliberately not a flat pill and not a bare
   number: nobody examined in competitive research visualizes it this way. */
.verdict {
  margin-top: 1.4rem;
}
.verdict__label {
  font-family: var(--display); font-weight: 700; font-size: 1.5rem;
}
.verdict__label--good { color: var(--good); }
.verdict__label--mixed { color: var(--mixed); }
.verdict__label--caution { color: var(--caution); }
.verdict__label--skip { color: var(--skip); }

.verdict__spectrum { display: flex; gap: 0.3rem; margin-top: 0.7rem; max-width: 22rem; }
.verdict__seg {
  flex: 1; height: 8px; border-radius: 999px;
  background: var(--surface-sunken); opacity: 0.55; transition: all 0.15s;
}
.verdict__seg--active { opacity: 1; height: 12px; margin-top: -2px; box-shadow: 0 1px 4px rgba(20,22,26,0.18); }
.verdict__seg--good { background: var(--good); }
.verdict__seg--mixed { background: var(--mixed); }
.verdict__seg--caution { background: var(--caution); }
.verdict__seg--skip { background: var(--skip); }

.verdict__why { margin-top: 1rem; font-size: 1.05rem; line-height: 1.55; max-width: 54ch; }
.verdict__why strong { font-weight: 600; }

.breakdown { margin-top: 2.5rem; display: grid; gap: 1.1rem; }
.breakdown__row {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.breakdown__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 1.3rem;
}
.breakdown__label { font-family: var(--display); font-weight: 600; font-size: 1.02rem; }
.breakdown__detail { padding: 0 1.3rem 1.3rem; border-top: 1px solid var(--line-soft); margin-top: 0; padding-top: 1.1rem; }

.product-not-found { text-align: center; padding: 3rem 0; }
.product-not-found__cta {
  display: inline-flex; margin-top: 1.25rem; align-items: center; gap: 0.5rem;
  font-family: var(--body); font-weight: 600; font-size: 0.95rem;
  color: #fff; background: var(--coral); padding: 0.7rem 1.3rem; border-radius: 999px;
  text-decoration: none;
}
.product-not-found__cta:hover { background: var(--coral-dark); }

/* -------------------------------------------------------------- rate form */

.rate-form { max-width: 40rem; }
.rate-form__field { margin-bottom: 1.4rem; }
.rate-form__field label {
  display: block; font-family: var(--body); font-weight: 600; font-size: 0.9rem;
  margin-bottom: 0.4rem;
}
.rate-form__hint { display: block; font-size: 0.8rem; color: var(--ink-faint); margin-top: 0.3rem; }
.rate-form__field input[type="text"],
.rate-form__field input[type="url"],
.rate-form__field textarea,
.rate-form__field input[type="file"] {
  width: 100%; font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
}
.rate-form__field textarea { resize: vertical; min-height: 4.5rem; }
.rate-form__field input:focus, .rate-form__field textarea:focus {
  outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px var(--coral-bg);
}
.rate-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.rate-form__submit {
  font-family: var(--body); font-weight: 600; font-size: 0.95rem;
  color: #fff; background: var(--coral); border: 0; border-radius: 999px;
  padding: 0.8rem 1.6rem; cursor: pointer;
}
.rate-form__submit:hover { background: var(--coral-dark); }
.rate-form__submit:disabled { opacity: 0.6; cursor: not-allowed; }
.rate-form__status { margin-top: 1rem; font-size: 0.9rem; }
.rate-form__status--error { color: var(--skip); }
.rate-form__success {
  padding: 2.5rem 0; text-align: center; max-width: 34rem; margin: 0 auto;
}
.rate-form__success h2 { font-size: 1.5rem; }
.rate-form__success p { margin-top: 0.85rem; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55; }

/* --------------------------------------------------------------- prose */

.prose { max-width: 68ch; }
.prose h2 { font-size: 1.35rem; margin-top: 2.5rem; margin-bottom: 0.8rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 1rem; color: var(--ink-soft); }
.prose p strong { color: var(--ink); font-weight: 600; }
.scale { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.scale li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: baseline;
  padding: 0.85rem 1.05rem; background: var(--surface-sunken); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.scale li p { margin: 0; font-size: 0.92rem; }

/* ----------------------------------------------------------------- footer */

.footer { flex: none; border-top: 1px solid var(--line); padding: 2rem 0 2.75rem; background: var(--surface); }
.footer__disclaimer { font-family: var(--mono); font-size: 0.7rem; line-height: 1.65; color: var(--ink-faint); max-width: 90ch; }
.footer__note { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-faint); margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--line-soft); max-width: 90ch; }

/* ----------------------------------------------------------------- states */

.state { padding: 3.5rem 0; max-width: 60ch; }
.state h1 { font-size: 1.6rem; margin-bottom: 0.7rem; }
.state p { color: var(--ink-soft); }
.state code { font-family: var(--mono); font-size: 0.85rem; background: var(--surface-sunken); border: 1px solid var(--line); padding: 0.15rem 0.4rem; border-radius: var(--radius-sm); }

/* --------------------------------------------------------------- responsive */

@media (max-width: 860px) {
  .masthead { position: static; }
  /* The bottom nav covers Search/Closet/Rate/Profile on mobile, and the
     Profile page's Browse section covers the rest (Material Guide, tiers,
     How We Rate) — showing the full top bar too was redundant, wrapping
     eight items across two cramped lines. */
  .tabs { display: none; }
}

@media (max-width: 620px) {
  .card { padding: 1.2rem; }
  .grid-materials { grid-template-columns: 1fr; }
  .item { grid-template-columns: 48px 1fr; }
  .item__thumb, .item__thumb-badge { width: 48px; height: 48px; }
  .item__meta {
    grid-column: 1 / -1; justify-items: start; text-align: left;
    grid-auto-flow: column; align-items: center; gap: 0.8rem;
    justify-content: start; margin-top: 0.2rem; flex-wrap: wrap;
  }
  .trust-stats { gap: 1.5rem; }
  .fit__row { grid-template-columns: 1fr; gap: 0.15rem; }
  .rate-form__row { grid-template-columns: 1fr; }
  .product-head { flex-direction: column; }
}

/* ----------------------------------------------------------- bottom nav */

.bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom));
  justify-content: space-around;
  box-shadow: 0 -2px 12px rgba(20, 22, 26, 0.06);
}
.bottom-nav__item {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  flex: 1; text-decoration: none; color: var(--ink-faint);
  padding: 0.4rem 0.25rem; border-radius: var(--radius-sm);
}
.bottom-nav__label { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.02em; }
.bottom-nav__item--active { color: var(--cobalt); }

@media (max-width: 860px) {
  .bottom-nav { display: flex; }
  #main { padding-bottom: 5.5rem; }
  .footer { padding-bottom: calc(2.75rem + 4.25rem); }
}

/* ---------------------------------------------------------- save button */

.save-btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--body); font-weight: 600; font-size: 0.92rem;
  color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: 0.6rem 1.1rem; cursor: pointer; margin-top: 1.1rem;
}
.save-btn:hover { border-color: var(--coral); }
.save-btn--saved {
  color: var(--coral-dark); border-color: var(--coral); background: var(--coral-bg);
}
.save-btn__icon { display: flex; }

.owned-chip {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin-top: 0.65rem; font-size: 0.85rem; color: var(--ink-soft);
}
.owned-chip__btn {
  font-family: var(--body); font-weight: 600; font-size: 0.82rem;
  color: var(--cobalt); background: var(--cobalt-bg); border: 0;
  border-radius: 999px; padding: 0.35rem 0.75rem; cursor: pointer;
}
.owned-chip__dismiss {
  border: 0; background: none; color: var(--ink-faint); cursor: pointer; font-size: 1rem; line-height: 1;
}

/* ------------------------------------------------------- modal & toast */

.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(20, 22, 26, 0.45); }
.modal__panel {
  position: relative; z-index: 1; width: 100%; max-width: 26rem;
  background: var(--surface); border-radius: var(--radius) var(--radius) 0 0;
  padding: 1.75rem 1.5rem calc(1.75rem + env(safe-area-inset-bottom));
  max-height: 88vh; overflow-y: auto;
}
.modal__close {
  position: absolute; top: 0.9rem; right: 1rem; border: 0; background: none;
  font-size: 1.4rem; line-height: 1; color: var(--ink-faint); cursor: pointer;
}
@media (min-width: 640px) {
  .modal { align-items: center; }
  .modal__panel { border-radius: var(--radius); }
}

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  z-index: 70; display: flex; align-items: center; gap: 1rem;
  background: var(--ink); color: var(--bg);
  font-size: 0.88rem; padding: 0.75rem 1.15rem; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(20, 22, 26, 0.25); max-width: calc(100vw - 2rem);
}
.toast__action { border: 0; background: none; color: var(--coral); font-weight: 600; cursor: pointer; white-space: nowrap; }
@media (max-width: 860px) { .toast { bottom: 6rem; } }

/* ------------------------------------------------------------ auth form */

.auth-form { max-width: 26rem; }
.auth-form__heading { font-size: 1.3rem; margin-bottom: 1.1rem; }
.auth-form__stub-note {
  font-size: 0.82rem; color: var(--ink-soft); background: var(--surface-sunken);
  border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; margin-bottom: 1.1rem; line-height: 1.5;
}
.auth-form__switch { margin-top: 1.1rem; font-size: 0.88rem; color: var(--ink-soft); }
.auth-form__switch-btn {
  border: 0; background: none; color: var(--cobalt); font-weight: 600; cursor: pointer;
  font-size: 0.88rem; margin-left: 0.3rem;
}

/* ---------------------------------------------------------------- closet */

.closet-signin { max-width: 30rem; }
.closet-empty {
  text-align: center; padding: 3rem 1rem; color: var(--ink-soft);
  border: 1px dashed var(--line); border-radius: var(--radius);
}
.closet-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.closet-filters { display: flex; gap: 0.35rem; }
.closet-filter {
  font-family: var(--body); font-size: 0.85rem; font-weight: 600; color: var(--ink-soft);
  background: var(--surface-sunken); border: 1px solid transparent; border-radius: 999px;
  padding: 0.4rem 0.9rem; cursor: pointer;
}
.closet-filter--active { color: var(--cobalt); background: var(--cobalt-bg); border-color: var(--cobalt-ring); }

.closet-list { display: grid; gap: 0.75rem; }
.closet-row {
  display: grid; grid-template-columns: 52px 1fr auto auto auto;
  gap: 0.9rem; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
}
.closet-row__media { flex: none; display: block; }
.closet-row__body { min-width: 0; }
.closet-row__status { display: flex; gap: 0.3rem; }
.closet-status {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-faint); background: var(--surface-sunken); border: 0; border-radius: 999px;
  padding: 0.3rem 0.6rem; cursor: pointer;
}
.closet-status--active.closet-status--want { color: var(--mixed); background: var(--mixed-bg); }
.closet-status--active.closet-status--own { color: var(--good); background: var(--good-bg); }
.closet-row__remove {
  border: 0; background: none; color: var(--ink-faint); cursor: pointer;
  font-size: 1.2rem; line-height: 1; padding: 0.2rem 0.4rem;
}
.closet-row__remove:hover { color: var(--skip); }

@media (max-width: 620px) {
  .closet-row { grid-template-columns: 44px 1fr; grid-template-areas: "media body" "status status" "remove remove"; }
  .closet-row__media { grid-area: media; }
  .closet-row__body { grid-area: body; }
  .search-result__verdict { grid-column: 2; }
  .closet-row__status { grid-area: status; margin-top: 0.4rem; }
  .closet-row__remove { grid-area: remove; justify-self: end; margin-top: -2.2rem; }
  .closet-controls { flex-direction: column; align-items: stretch; }
}

/* ---------------------------------------------------------------- profile */

.profile-account__email { font-family: var(--display); font-weight: 600; font-size: 1.15rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ======================================================================
   v2 — dupe catalog: fiber bar, result layout, dupe comparison, browse
   Reuses the existing tokens and the green/amber/orange/red verdict scale;
   no new typefaces, no new accent colors.
   ====================================================================== */

/* ------------------------------------------------------------ verdicts */

.verdict-pill {
  display: inline-block; flex: none;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.28rem 0.5rem; border-radius: 999px; white-space: nowrap;
}
.verdict-pill--good { color: var(--good); background: var(--good-bg); }
.verdict-pill--mixed { color: var(--mixed); background: var(--mixed-bg); }
.verdict-pill--caution { color: var(--caution); background: var(--caution-bg); }
.verdict-pill--skip { color: var(--skip); background: var(--skip-bg); }

/* ----------------------------------------------------------- fiber bar */

.fiber-block { margin-top: 0.7rem; }
.fiber-bar {
  display: flex; width: 100%; height: 14px; border-radius: 999px;
  overflow: hidden; background: var(--surface-sunken);
}
.fiber-bar__seg { display: block; height: 100%; }
.fiber-bar__seg--green { background: var(--good); }
.fiber-bar__seg--yellow { background: var(--mixed); }
.fiber-bar__seg--red { background: var(--skip); }
.fiber-keys { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin-top: 0.55rem; }
.fiber-key {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--mono); font-size: 0.7rem; color: var(--ink-soft); text-decoration: none;
}
a.fiber-key:hover { color: var(--cobalt); }
.fiber-key__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.fiber-key__dot--green { background: var(--good); }
.fiber-key__dot--yellow { background: var(--mixed); }
.fiber-key__dot--red { background: var(--skip); }
.fiber-key__pct { font-weight: 600; color: var(--ink); }

/* -------------------------------------------------------- result page */

.result { max-width: 56rem; }
.result__head { margin-bottom: 1.25rem; }
.result__brand {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.result__name { font-size: clamp(1.4rem, 4.5vw, 1.9rem); margin-top: 0.35rem; color: var(--ink-soft); font-weight: 500; }
.result__verdict {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 8vw, 3.1rem); line-height: 1.05; letter-spacing: -0.02em;
  margin-top: 1rem;
}
.result__verdict--good { color: var(--good); }
.result__verdict--mixed { color: var(--mixed); }
.result__verdict--caution { color: var(--caution); }
.result__verdict--skip { color: var(--skip); }
.result__why {
  margin-top: 0.6rem; font-size: 1.05rem; line-height: 1.5;
  color: var(--ink-soft); font-weight: 400; max-width: 46ch;
}

.glance { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.5rem; }
.glance__chip {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  font-family: var(--mono); font-size: 0.75rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  padding: 0.4rem 0.7rem; border-radius: 999px;
}
.glance__key { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }

.result__section {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; margin-bottom: 1rem;
}
.result__fibers { font-family: var(--mono); font-size: 0.85rem; color: var(--ink); }
.result__para { font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); margin-top: 0.6rem; max-width: 64ch; }
.result__para:first-of-type { margin-top: 0; }
.result__links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 1.25rem 0; }
.result__save { margin-bottom: 1.25rem; }
.result__checked {
  font-family: var(--mono); font-size: 0.68rem; line-height: 1.6; color: var(--ink-faint);
  border-top: 1px solid var(--line-soft); padding-top: 0.9rem; max-width: 80ch;
}

/* --------------------------------------------------------- dupe card */

.dupe-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; margin-bottom: 1rem;
}
.dupe-head, .dupe-row {
  display: grid; grid-template-columns: 4.5rem 1fr 1fr; gap: 0.75rem; align-items: start;
}
.dupe-head { padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); }
.dupe-head__label {
  grid-column: 2; font-family: var(--mono); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
}
.dupe-head__label--dupe { grid-column: 3; color: var(--good); }
.dupe-row { padding: 0.8rem 0; border-bottom: 1px solid var(--line-soft); }
.dupe-row:last-of-type { border-bottom: 0; }
.dupe-row__label {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-faint); padding-top: 0.15rem;
}
.dupe-row__cell { font-size: 0.9rem; color: var(--ink); min-width: 0; }
.dupe__item-link { color: inherit; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--cobalt-ring); }
.dupe__item-link:hover { color: var(--cobalt); }
.dupe__price { font-family: var(--mono); font-weight: 600; }
.dupe__price-note { display: block; font-size: 0.7rem; color: var(--ink-faint); }
.dupe__delta {
  display: inline-block; margin-left: 0.4rem; font-family: var(--mono); font-size: 0.7rem;
  font-weight: 600; color: var(--good); background: var(--good-bg);
  padding: 0.1rem 0.4rem; border-radius: 999px;
}
.dupe__fibers { font-family: var(--mono); font-size: 0.76rem; color: var(--ink-soft); display: block; }
.dupe__why { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.5; }
.dupe-gap { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.dupe-gap__label {
  display: block; font-family: var(--mono); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--coral-dark); margin-bottom: 0.4rem;
}
.dupe-gap__text { font-size: 1rem; line-height: 1.55; color: var(--ink); font-weight: 500; }
.dupe-card--none .dupe-none__text { font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); margin-top: 0.5rem; }

/* ------------------------------------------------------------- browse */

.browse-search { margin-bottom: 1rem; }
.browse-search__input {
  width: 100%; background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 999px; padding: 0.75rem 1.15rem;
  /* 16px exactly: Safari zooms the whole page when a focused field is
     smaller, which makes the app lurch on every tap into search. */
  font-size: 1rem;
}
.browse-search__input:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 4px var(--cobalt-ring); }

.filters { display: grid; gap: 0.7rem; margin-bottom: 1.25rem; }
.filter-group { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.filter-group__label {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint); width: 4.5rem; flex: none;
}
.filter-group__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.filter-chip {
  font-family: var(--body); font-size: 0.8rem; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line);
  padding: 0.3rem 0.7rem; border-radius: 999px; cursor: pointer;
}
.filter-chip:hover { border-color: var(--cobalt); color: var(--cobalt); }
.filter-chip--active { color: #fff; background: var(--cobalt); border-color: var(--cobalt); }
.browse-count { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-faint); margin-bottom: 0.7rem; }
.browse-empty { padding: 2rem 0; color: var(--ink-soft); display: grid; gap: 0.8rem; justify-items: start; }

.piece-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.piece-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem; transition: border-color 0.15s, transform 0.15s;
}
.piece-card:hover { border-color: var(--cobalt); transform: translateY(-1px); }
.piece-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.piece-card__brand {
  font-family: var(--mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink);
}
.piece-card__name {
  font-family: var(--card-title, var(--display)); font-weight: 600; font-size: 1.05rem;
  line-height: 1.25; margin-top: 0.45rem; color: var(--ink-soft);
}
.piece-card__fibers { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.6rem; }

/* Fiber chip: the percentage in bold, the fiber colored by its rating. */
.fchip {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.01em;
  padding: 0.2rem 0.45rem; border-radius: var(--radius-sm); border: 1px solid transparent;
}
.fchip b { font-weight: 700; }
.fchip--green { color: var(--good); background: var(--good-bg); border-color: rgba(23,138,92,0.25); }
.fchip--yellow { color: var(--mixed); background: var(--mixed-bg); border-color: rgba(196,135,12,0.25); }
.fchip--red { color: var(--skip); background: var(--skip-bg); border-color: rgba(214,57,42,0.25); }

.piece-card__foot {
  display: flex; align-items: baseline; gap: 0.7rem; margin-top: 0.9rem; flex-wrap: wrap;
  padding-top: 0.7rem; border-top: 1px solid var(--line-soft);
}
.piece-card__price { font-family: var(--figures); font-weight: 700; font-size: 1.1rem; }
.piece-card__save {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600; color: var(--good);
  margin-left: auto;
}
.piece-card__save--none { color: var(--ink-faint); font-weight: 500; }

@media (max-width: 620px) {
  .dupe-head, .dupe-row { grid-template-columns: 1fr 1fr; }
  .dupe-row__label { grid-column: 1 / -1; padding-top: 0; }
  .dupe-head__label { grid-column: 1; }
  .dupe-head__label--dupe { grid-column: 2; }
  .filter-group { align-items: flex-start; }
  .filter-group__label { width: 100%; }
  .piece-grid { grid-template-columns: 1fr; }
  .result__section, .dupe-card { padding: 1rem; }
}
.dupe-also { margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.dupe-also__label {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.dupe-also__item { font-size: 0.82rem; color: var(--ink-soft); }
a.dupe-also__item { border-bottom: 1px solid var(--cobalt-ring); text-decoration: none; }
a.dupe-also__item:hover { color: var(--cobalt); }

/* Search result rows carry their dupe underneath, as a separate link out. */
.search-result-row { border-bottom: 1px solid var(--line-soft); }
.search-result-row:last-child { border-bottom: 0; }
.search-result-row .search-result { border-bottom: 0; }
.search-dupe {
  display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap;
  padding: 0 1.1rem 0.7rem 2.1rem; text-decoration: none; color: var(--ink-soft);
  font-size: 0.8rem;
}
.search-dupe:hover { color: var(--cobalt); }
.search-dupe:hover .search-dupe__name { border-bottom-color: currentColor; }
.search-dupe__arrow { color: var(--good); font-weight: 600; margin-left: -0.9rem; }
.search-dupe__label {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--good); background: var(--good-bg);
  padding: 0.1rem 0.35rem; border-radius: 999px;
}
.search-dupe__name { border-bottom: 1px solid transparent; }
.search-dupe__price { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.search-dupe__save { font-family: var(--mono); font-size: 0.7rem; color: var(--good); font-weight: 600; }

/* ---------------------------------------------- section heads and emphasis */

.sec-head {
  display: flex; align-items: center; gap: 0.55rem;
  padding-bottom: 0.7rem; margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.sec-head__icon { display: flex; color: var(--cobalt); flex: none; }
.sec-head__label {
  font-family: var(--display); font-weight: 700; font-size: 0.95rem;
  letter-spacing: -0.005em; color: var(--ink);
}
.sec-head__right { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; }
.ico { display: block; }

/* The numbers people are scanning for */
.detail-price {
  font-family: var(--figures); font-weight: 700; font-size: 1.35rem;
  letter-spacing: -0.01em; color: var(--ink);
}
.detail-lede { font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); max-width: 68ch; }
.detail-note {
  margin-top: 0.7rem; font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); max-width: 64ch;
}
.detail-note--over { color: var(--skip); font-style: italic; }
.detail-note--fair { color: var(--mixed); font-style: italic; }
.detail-note--worth { color: var(--good); font-style: italic; }

.result__para--wear { font-style: italic; color: var(--ink); }
.dupe-save-flag {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  color: var(--good); background: var(--good-bg); padding: 0.2rem 0.5rem; border-radius: 999px;
}

/* The same flag, for a chart whose right column is a rejected look-alike
   rather than a dupe. Its colour grades how badly the cheap one misses. */
.dupe-flag {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  padding: 0.2rem 0.5rem; border-radius: 999px; white-space: nowrap;
}
.dupe-flag--mixed { color: var(--mixed); background: var(--mixed-bg); }
.dupe-flag--caution { color: var(--caution); background: var(--caution-bg); }
.dupe-flag--skip { color: var(--skip); background: var(--skip-bg); }

/* A rejected look-alike is not an offer, so its column is muted rather than
   presented like something to go and buy. */
.dupe-card--near .dupe-row__cell--dupe,
.dupe-card--none .dupe-row__cell--dupe { background: var(--wash, rgba(0, 0, 0, 0.02)); }
.dupe-card--near .dupe-head__label--dupe,
.dupe-card--none .dupe-head__label--dupe { color: var(--ink-soft); }
.dupe__delta--worse { color: var(--skip); }
.dupe__none { color: var(--ink-soft); font-style: italic; }
.dupe__price--unknown,
.dupe__fibers--unknown { color: var(--ink-soft); font-style: italic; font-weight: 400; }

/* A brand-catalog item states its fabric in words, not percentages. Say so
   rather than letting it read like a measured figure. */
.dupe__item-link-plain { font-weight: 600; }
.dupe__fibers--asstated { display: block; }
.dupe__asstated-note {
  display: block; margin-top: 0.25rem;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* The breakdown rows on a brand-catalog product page */
.breakdown__row { padding: 1.25rem; }
.breakdown__detail { padding: 0; border-top: 0; margin-top: 0; }

/* Cheaper verified alternatives on a brand-catalog product page */
.cheaper__list { display: grid; gap: 0.35rem; }
.cheaper__row {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  padding: 0.6rem 0.7rem; border-radius: var(--radius-sm);
  text-decoration: none; color: inherit; background: var(--surface-sunken);
}
.cheaper__row:hover { background: var(--cobalt-bg); }
.cheaper__name { flex: 1; min-width: 12rem; font-size: 0.9rem; }
.cheaper__price { font-family: var(--mono); font-weight: 600; font-size: 0.9rem; }

/* ------------------------------------------------- unified result layout */

.result__back { display: inline-block; margin-bottom: 1.1rem; }
.result__head { display: flex; gap: 1.25rem; align-items: flex-start; margin-bottom: 1.25rem; }
.result__head-main { flex: 1; min-width: 0; }
.result__media { flex: none; }
.result__img {
  width: 104px; height: 128px; object-fit: cover; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface-sunken);
}
.result__badge { width: 72px; height: 72px; font-size: 1.5rem; }
.result__price { font-family: var(--figures); font-weight: 700; font-size: 1.15rem; margin-top: 0.7rem; }
.result__save { margin-top: 0.9rem; }

.glance__chip--save { color: var(--good); border-color: rgba(23,138,92,0.3); }
.glance__chip--save .glance__key { color: var(--good); }

/* What it's made of */
.madeof__type {
  font-family: var(--display); font-weight: 700; font-size: 1.5rem;
  letter-spacing: -0.01em; margin-bottom: 0.5rem;
}
.madeof__note { font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); max-width: 64ch; }
.madeof__wear {
  display: flex; align-items: flex-start; gap: 0.45rem; margin-top: 0.9rem;
  font-size: 0.9rem; font-style: italic; color: var(--ink);
}
.madeof__wear-icon { color: var(--caution); flex: none; margin-top: 0.15rem; }

/* Brand record */
.record__summary { font-size: 0.98rem; line-height: 1.6; color: var(--ink); max-width: 64ch; }
.record__tag {
  font-family: var(--mono); font-size: 0.75rem; color: var(--coral-dark); margin-top: 0.4rem;
}
.tier-flag {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.22rem 0.5rem; border-radius: 999px;
}
.tier-flag--outstanding { color: var(--good); background: var(--good-bg); }
.tier-flag--middle { color: var(--mixed); background: var(--mixed-bg); }
.tier-flag--red { color: var(--skip); background: var(--skip-bg); }

/* Folded detail */
.drop { margin-top: 0.9rem; border-top: 1px solid var(--line-soft); padding-top: 0.7rem; }
.drop__summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.drop__summary::-webkit-details-marker { display: none; }
.drop__summary::before {
  content: "+"; font-size: 0.95rem; line-height: 1; color: var(--cobalt); font-weight: 700;
}
.drop[open] .drop__summary::before { content: "–"; }
.drop__summary:hover { color: var(--cobalt); }
.drop__count {
  font-size: 0.66rem; color: var(--ink-faint); background: var(--surface-sunken);
  padding: 0.05rem 0.35rem; border-radius: 999px;
}
.drop__body { padding-top: 0.5rem; }
.drop__body .evidence, .drop__body .why-tier { margin-top: 0.5rem; }

/* Worth the price */
.detail-price--lg { font-size: 1.9rem; }
.worth__summary { margin-top: 0.5rem; font-size: 0.98rem; line-height: 1.6; color: var(--ink); max-width: 62ch; }

@media (max-width: 620px) {
  .result__img { width: 84px; height: 104px; }
  .madeof__type { font-size: 1.3rem; }
  .detail-price--lg { font-size: 1.6rem; }
}

/* ------------------------------------------------------- material guide */

.material__head { align-items: center; }
.material__icon { display: flex; color: var(--cobalt); flex: none; margin-right: 0.15rem; }
.material__icon .ico { width: 19px; height: 19px; }

.fit2-pair { display: grid; gap: 0.6rem; margin-top: 1.2rem; }
.fit2 {
  border-radius: var(--radius); padding: 0.85rem 0.95rem;
  border: 1px solid transparent;
}
.fit2--good { background: var(--good-bg); border-color: rgba(23,138,92,0.22); }
.fit2--bad { background: var(--skip-bg); border-color: rgba(214,57,42,0.2); }
.fit2__title {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.fit2--good .fit2__title { color: var(--good); }
.fit2--bad .fit2__title { color: var(--skip); }
.fit2__mark { font-size: 0.85rem; line-height: 1; }
.fit2__list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.fit2__lead { font-size: 0.95rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.fit2__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.fit2__chip {
  font-family: var(--mono); font-size: 0.68rem; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line);
  padding: 0.15rem 0.45rem; border-radius: 999px;
}
.drop--bias .drop__summary { color: var(--coral-dark); }
.drop--bias .drop__summary::before { color: var(--coral-dark); }
.material .drop { margin-top: 0.7rem; }
.material__head { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.material__name { flex: 1; min-width: 8rem; }

/* ---------------------------------------------------------- how we rate */

.hwr { max-width: 68ch; }
.steps { list-style: none; margin: 0 0 2.25rem; padding: 0; display: grid; gap: 1rem; }
.step {
  display: flex; gap: 0.9rem; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem;
}
.step__num {
  flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  color: #fff; background: var(--cobalt);
}
.step__title { font-family: var(--display); font-weight: 700; font-size: 1rem; margin-bottom: 0.3rem; }
.step__text { font-size: 0.93rem; line-height: 1.6; color: var(--ink-soft); }
.step__text strong { color: var(--ink); font-weight: 600; }
.hwr__h2 { font-family: var(--display); font-size: 1.2rem; margin: 2rem 0 0.9rem; }
.verdict-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.verdict-key li {
  display: grid; grid-template-columns: 11.5rem 1fr; gap: 0.9rem; align-items: baseline;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--line-soft);
}
.verdict-key li:last-child { border-bottom: 0; }
.verdict-key p { font-size: 0.92rem; color: var(--ink-soft); }
.hwr__notes { margin-top: 1.5rem; display: grid; gap: 0.8rem; }
.hwr__notes p { font-size: 0.93rem; line-height: 1.6; color: var(--ink-soft); }
.hwr__notes strong { color: var(--ink); }
@media (max-width: 620px) {
  .verdict-key li { grid-template-columns: 1fr; gap: 0.25rem; }
}

.filters-wrap { margin-bottom: 1.1rem; }
.filters-wrap__summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.55rem 0.8rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); width: fit-content;
}
.filters-wrap__summary::-webkit-details-marker { display: none; }
.filters-wrap__label {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink);
}
.filters-wrap__label::before { content: "+ "; color: var(--cobalt); }
.filters-wrap[open] .filters-wrap__label::before { content: "– "; }
.filters-wrap__active { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-faint); }
.filters-wrap[open] .filters { margin-top: 0.9rem; }

/* ==========================================================================
   Installed-app behaviour
   Unspun is a real PWA: added to the home screen it runs with no browser
   chrome. These rules remove the handful of things that still read as "a
   web page in a browser" when it does. All of them are inert in a tab.
   ========================================================================== */

/* A tap should not flash a grey rectangle, and holding a nav label should
   not start selecting text. Selection stays on for actual content. */
:root {
  -webkit-tap-highlight-color: transparent;
}
.tabs, .bottom-nav, .masthead, .verdict-pill, .filter-chip,
.dupe-head, .dupe-row__label, .badge, .fchip {
  -webkit-user-select: none; user-select: none;
}

/* Overscrolling the catalog should not pull-to-refresh and throw away the
   scroll position and filters. */
html, body {
  overscroll-behavior-y: contain;
}

/* The page sits on the app background rather than browser white when the
   rubber band stretches past the end of the content. */
body { background: var(--bg, var(--surface-sunken)); }

/* Touch feedback. Native UI answers the instant a thumb lands; a card with
   only a hover state feels slow even when it is fast. */
@media (hover: none) {
  .piece-card:active, .cheaper__row:active, .search-result:active,
  .item-row:active, .dupe__item-link:active, .filter-chip:active {
    transform: scale(0.985);
    transition: transform 0.06s ease-out;
  }
  button:active, .btn:active, .item__shop:active, .bottom-nav__link:active {
    opacity: 0.72;
    transition: opacity 0.06s ease-out;
  }
}
.piece-card, .cheaper__row, .search-result, .item-row, button, .btn {
  touch-action: manipulation; /* no 300ms double-tap delay */
}

/* Screen transitions. Short and directional: forward slides in from the
   right, back from the left, so moving through the app has a sense of
   place instead of the content simply being replaced. */
@keyframes view-in-forward {
  from { opacity: 0; transform: translate3d(0.75rem, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes view-in-back {
  from { opacity: 0; transform: translate3d(-0.75rem, 0, 0); }
  to { opacity: 1; transform: none; }
}
.view--in { animation: view-in-forward 0.18s ease-out both; }
.view--in.view--back { animation-name: view-in-back; }

/* Standalone only: the app owns the full screen, so the bottom nav sits on
   the home indicator and the content needs room to clear it. */
@media (display-mode: standalone) {
  .masthead__inner { padding-block: 0.85rem; }
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* The install nudge. One line, dismissible, never shown again once actioned
   (see js/components/installPrompt.js). */
.install-bar {
  position: fixed; left: 0.75rem; right: 0.75rem;
  bottom: calc(4.6rem + env(safe-area-inset-bottom));
  z-index: 45;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.8rem 0.9rem;
  background: var(--ink); color: var(--surface);
  border-radius: var(--radius-sm, 0.75rem);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  animation: view-in-forward 0.22s ease-out both;
}
.install-bar__text { flex: 1; font-size: 0.85rem; line-height: 1.4; }
.install-bar__text strong { font-weight: 600; }
.install-bar__cta {
  flex: none; font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  background: var(--surface); color: var(--ink);
  border: 0; border-radius: 999px; padding: 0.45rem 0.8rem; cursor: pointer;
}
.install-bar__dismiss {
  flex: none; background: transparent; border: 0; cursor: pointer;
  color: var(--surface); opacity: 0.6; font-size: 1.1rem; line-height: 1;
  padding: 0.2rem 0.3rem;
}

/* ==========================================================================
   v3 — "Bento"
   Every surface is an object. A cool grey ground, white tiles with deep
   radii and soft elevation, translucent chrome top and bottom, and the
   verdict promoted from coloured text to a filled chip that carries its own
   tone. Fraunces stays on names; Inter takes the interface labels, which is
   what separates a thing you read from a thing you operate.

   Nothing structural changed for this: the markup, the sections, the copy
   and the data are the same. It is surface treatment and type roles.
   ========================================================================== */

:root {
  --bg: #EEEFF3;
  --surface: #FFFFFF;
  --surface-sunken: #E5E7EE;
  --ink: #15171C;
  --ink-soft: #595F6B;
  --ink-faint: #8A909C;
  --line: rgba(20, 22, 26, 0.07);
  --line-soft: rgba(20, 22, 26, 0.045);
  --radius: 22px;
  --tile-shadow: 0 1px 2px rgba(20, 22, 26, 0.05), 0 14px 30px -22px rgba(20, 22, 26, 0.35);
  --tile-shadow-lift: 0 1px 2px rgba(20, 22, 26, 0.06), 0 20px 38px -22px rgba(20, 22, 26, 0.42);
}

body { background: var(--bg); }

/* Chrome floats over the content rather than boxing it in. */
.masthead {
  background: rgba(238, 239, 243, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 0;
}
.bottom-nav {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 0;
  box-shadow: 0 -1px 0 rgba(20, 22, 26, 0.06);
}

/* ---- Tiles ---- */

.result__section,
.dupe-card,
.card,
.piece-card {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--tile-shadow);
  padding: 1.35rem 1.25rem;
}
.result__section + .result__section,
.dupe-card { margin-top: 0.85rem; }

.piece-card { padding: 1rem; transition: transform 0.15s, box-shadow 0.15s; }
.piece-card:hover { transform: translateY(-2px); box-shadow: var(--tile-shadow-lift); border-color: transparent; }
.piece-grid { gap: 0.7rem; }

/* The header is the hero tile. */
.result__head {
  background: var(--surface);
  border: 0;
  border-radius: 26px;
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.05), 0 18px 40px -26px rgba(20, 22, 26, 0.4);
  padding: 1.5rem 1.35rem;
  margin-bottom: 0.85rem;
}
.result__head-main > * { margin-block: 0; }
.result__brand {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint);
}
.result__name { font-size: 1.55rem; line-height: 1.16; letter-spacing: -0.018em; margin: 0.35rem 0 0.85rem; }

/* The verdict becomes an object too, tinted by its own tone. */
.result__verdict {
  display: inline-block;
  font-family: var(--body); font-weight: 600; font-size: 0.95rem;
  letter-spacing: -0.005em;
  padding: 0.5rem 0.95rem; border-radius: 14px;
  margin-bottom: 0.8rem;
}
.result__verdict--good { background: var(--good-bg); color: var(--good); }
.result__verdict--mixed { background: var(--mixed-bg); color: var(--mixed); }
.result__verdict--caution { background: var(--caution-bg); color: var(--caution); }
.result__verdict--skip { background: var(--skip-bg); color: var(--skip); }

.result__why { font-size: 0.97rem; line-height: 1.55; color: var(--ink-soft); margin-bottom: 0.7rem; }
.result__price { font-family: var(--figures); font-size: 1.6rem; font-weight: 600; }
/* The wrapper and the button inside it were each adding a top margin, so
   the price and the save control sat 32px apart for no reason. */
.result__save { margin-top: 0.9rem; margin-bottom: 0; }
.result__save > button, .result__save > a { margin-top: 0; }

/* The image carries the tile with the text, so give it enough height to
   balance one rather than sitting in the corner. */
.result__img, .result__badge { border-radius: 18px; }
.result__media { align-self: stretch; }
.result__img { width: 104px; height: 128px; object-fit: cover; }
.result__badge { width: 104px; height: 128px; }

/* ---- Pills, not outlines ---- */

.glance { gap: 0.4rem; margin-bottom: 1.1rem; }
.glance__chip {
  background: var(--surface); border: 0; border-radius: 999px;
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.06);
  padding: 0.38rem 0.7rem; font-size: 0.73rem;
}
.glance__key { font-size: 0.6rem; }
.glance__chip--save { background: var(--good-bg); color: var(--good); box-shadow: none; }

/* Section headings read as interface, not as field names. */
.sec-head__label {
  font-family: var(--body); font-size: 0.95rem; font-weight: 600;
  letter-spacing: -0.005em; text-transform: none; color: var(--ink);
}
.sec-head__icon { opacity: 0.6; }

.madeof__type { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }
.detail-price--lg { font-family: var(--figures); font-size: 1.85rem; font-weight: 600; }

/* The comparison keeps its grid. Tinting each cell separately broke the
   right-hand column into patches of different heights, so the column is
   marked with one continuous rule instead. */
.dupe-row { padding-block: 0.7rem; }
.dupe-row__cell--dupe {
  background: transparent;
  border-left: 2px solid var(--line);
  padding-left: 0.85rem;
}
/* A rejected look-alike is not an offer, so its column stays muted. */
.dupe-card--near .dupe-row__cell--dupe,
.dupe-card--none .dupe-row__cell--dupe { color: var(--ink-soft); }

/* Catalog controls are objects on the same ground as everything else. */
.browse-search__input {
  background: var(--surface); border-color: transparent;
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.06);
}
.filters-wrap__summary {
  background: var(--surface); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.06);
}

/* ---- Catalog tools: the wins filter and sorting ---- */

.browse-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  margin: 0.7rem 0 0.2rem;
}

/* The thesis of the app as a single control, so it reads as an offer rather
   than as one more filter chip. */
.wins-toggle {
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  font-family: var(--body); font-size: 0.85rem; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 0; border-radius: 999px;
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.06);
  padding: 0.5rem 0.95rem; cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.wins-toggle__mark { font-family: var(--mono); color: var(--good); }
.wins-toggle__note { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-faint); font-weight: 400; }
.wins-toggle--on { background: var(--good); color: #FFFFFF; box-shadow: none; }
.wins-toggle--on .wins-toggle__mark,
.wins-toggle--on .wins-toggle__note { color: rgba(255, 255, 255, 0.78); }

.sort { display: inline-flex; align-items: center; gap: 0.45rem; margin-left: auto; }
.sort__label {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.sort__select {
  font-family: var(--body); font-size: 0.83rem; color: var(--ink);
  background: var(--surface); border: 0; border-radius: 999px;
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.06);
  padding: 0.45rem 0.8rem; cursor: pointer;
}
.sort__select:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }

@media (max-width: 420px) {
  .sort { margin-left: 0; width: 100%; }
  .sort__select { flex: 1; }
}

/* ---- Cost per wear ---- */

.cpw__lede { font-size: 0.93rem; color: var(--ink-soft); margin: 0 0 0.9rem; }

.cpw__controls { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cpw__field { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 7.5rem; }
.cpw__label {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.cpw__input {
  font-family: var(--figures); font-size: 1rem; font-weight: 600; color: var(--ink);
  background: var(--surface-sunken); border: 0; border-radius: 12px;
  padding: 0.55rem 0.7rem; width: 100%;
}
.cpw__input:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 1px; }

.cpw__out { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.cpw__cell {
  flex: 1; min-width: 8rem;
  background: var(--surface-sunken); border-radius: 16px; padding: 0.8rem 0.9rem;
  display: flex; flex-direction: column; gap: 0.1rem;
}
.cpw__cell--dupe { background: var(--good-bg); }
.cpw__cell-label {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.cpw__figure { font-family: var(--figures); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; }
.cpw__cell--dupe .cpw__figure { color: var(--good); }
.cpw__per { font-size: 0.72rem; color: var(--ink-faint); }

.cpw__read { font-size: 0.93rem; line-height: 1.55; color: var(--ink); margin: 0.9rem 0 0; }
.cpw__note {
  font-family: var(--mono); font-size: 0.66rem; line-height: 1.5;
  color: var(--ink-faint); margin: 0.55rem 0 0;
}


/* ---- The mark ---- */

/* A stroke drawing that takes currentColor, so it picks up the ink colour of
   whatever it sits in rather than carrying its own. */
.wordmark { gap: 0.5rem; align-items: center; }
.wordmark__mark { width: 30px; height: 30px; color: var(--ink); flex: none; }

@media (max-width: 480px) {
  .wordmark__mark { width: 26px; height: 26px; }
}

/* ==========================================================================
   v4 — Calmer result pages
   Each box on a piece page answers one question. Giving every box a large
   centred title turns six stacked paragraphs into six separate answers, so
   the page can be scanned instead of read. The three boxes that carry the
   decision — the piece itself, what it costs, and the cheaper version — are
   lifted above the three that support it.
   ========================================================================== */

/* Section titles: centred, larger, with the icon above rather than beside. */
.sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  padding-bottom: 0.9rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.sec-head__icon { color: var(--cobalt); opacity: 0.75; }
.sec-head__icon svg { width: 20px; height: 20px; }
.sec-head__label {
  font-family: var(--display); font-weight: 600;
  font-size: 1.22rem; line-height: 1.2; letter-spacing: -0.015em;
  text-transform: none; color: var(--ink);
}
/* The flag that used to sit on the right (a saving, a "close call") now sits
   under the title, where it reads as part of the heading. */
.sec-head__right { margin-left: 0; display: flex; justify-content: center; gap: 0.4rem; }

/* More air inside every box, so the title has something to separate. */
.result__section, .dupe-card { padding: 1.5rem 1.25rem; }
.result__section + .result__section, .dupe-card { margin-top: 1rem; }

/* The three boxes that carry the decision. A wider, whiter surface and a
   deeper lift, so the eye lands on them first. */
.result__head,
.result__section--key,
.dupe-card {
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.06), 0 22px 44px -26px rgba(20, 22, 26, 0.5);
}
.result__section--key .sec-head__label,
.dupe-card .sec-head__label { font-size: 1.35rem; }

/* The supporting boxes sit back: flatter, quieter, slightly smaller titles. */
.result__section--support {
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 8px 18px -16px rgba(20, 22, 26, 0.3);
}
.result__section--support .sec-head__label { font-size: 1.12rem; color: var(--ink-soft); }

/* The footer notice, folded. It has to be on every page, but four lines of
   it under every screen made the app read as a terms page. */
.site-note { text-align: center; padding-block: 1.6rem 2rem; }
.site-note__toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  list-style: none; cursor: pointer;
  font-size: 0.82rem; font-weight: 500; color: var(--ink-faint);
  background: var(--surface); border-radius: 999px;
  padding: 0.5rem 1rem; box-shadow: 0 1px 2px rgba(20, 22, 26, 0.05);
}
.site-note__toggle::-webkit-details-marker { display: none; }
.site-note__toggle::after { content: "＋"; font-size: 0.8em; opacity: 0.7; }
.site-note[open] .site-note__toggle::after { content: "－"; }
.site-note__toggle:hover { color: var(--ink-soft); }
.site-note__body {
  max-width: 44rem; margin: 0.9rem auto 0; text-align: left;
  font-size: 0.8rem; line-height: 1.65; color: var(--ink-faint);
}
.site-note__body p { margin: 0 0 0.6rem; }

/* Home: the two secondary routes are the main way into the app for someone
   who does not yet know what to search, so they get a real target size and
   sit on the centre line. */
.trust-strip__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  font-size: 1rem; font-weight: 600;
  padding: 0.85rem 1.5rem; border-radius: 999px;
  background: var(--surface); color: var(--cobalt);
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.06), 0 10px 24px -18px rgba(20, 22, 26, 0.4);
  text-decoration: none; border-bottom: 0;
}
.trust-strip__link:hover { color: var(--ink); }
.trust-strip { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; text-align: center; }

/* ---- Centred layout ----
   The app was set left-aligned like a document. It reads as a product when
   the content sits on the centre line, which matters most on the pages that
   are mostly one column of controls: sign in, My Closet, Profile, Rate. */

.page-head {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}
.page-head__lede { margin-inline: auto; }

/* Sign in / create account */
.auth-form { max-width: 26rem; margin-inline: auto; text-align: center; }
.auth-form__heading { text-align: center; }
.auth-form label, .auth-form .field { text-align: left; }
.auth-form__switch { text-align: center; }

/* My Closet, Profile, Rate My Piece: one column, centred. */
.closet-head, .profile-head, .rate-head { text-align: center; }
.closet-empty, .profile-shell, .rate-form__intro { margin-inline: auto; text-align: center; }
.rate-form { max-width: 34rem; margin-inline: auto; }
.rate-form__field { text-align: left; }
.closet-grid, .piece-grid { margin-inline: auto; }

/* Controls that used to hang off the left edge of a wide screen. */
.browse-search, .browse-tools { max-width: 34rem; margin-inline: auto; }
.browse-count { text-align: center; }
.filters-wrap { max-width: 34rem; margin-inline: auto; }

/* The result page keeps its left-aligned body text — centring paragraphs
   hurts reading — but everything that frames it is centred. */
.result__back { display: block; text-align: center; margin-bottom: 1rem; }
.result__links { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.result__checked { text-align: center; margin-inline: auto; }

/* ---- The other verified alternatives ----
   The chart compares one dupe in full; a five-column table is unreadable on
   a phone. The rest sit underneath as cards carrying the four facts that
   actually decide between them. */

.alts { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.alts__head {
  text-align: center; margin: 0 0 0.9rem;
  font-size: 0.95rem; font-weight: 600; color: var(--ink);
}
.alts__list { display: grid; gap: 0.6rem; }

.alt {
  display: grid; gap: 0.3rem;
  background: var(--surface-sunken); border-radius: 16px;
  padding: 0.85rem 0.95rem;
  text-decoration: none; color: inherit;
  transition: transform 0.12s;
}
.alt:hover { transform: translateY(-1px); }
.alt__top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.alt__brand {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
}
.alt__name { font-weight: 600; font-size: 0.97rem; line-height: 1.3; }
.alt__fiber { font-size: 0.82rem; color: var(--ink-soft); }
.alt__foot { display: flex; align-items: baseline; gap: 0.55rem; margin-top: 0.15rem; }
.alt__price { font-family: var(--figures); font-size: 1.1rem; font-weight: 600; }
.alt__save {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  color: var(--good); background: var(--good-bg);
  padding: 0.15rem 0.45rem; border-radius: 999px;
}

/* ==========================================================================
   v5 — DM Sans
   One family across the whole app, replacing an editorial serif for headings
   and a monospace for every label, which together made the app read like a
   forum post. DM Sans is friendly without being rounded off: it has edges,
   so figures and small labels stay crisp. Headings go to 800 so the
   hierarchy holds, and labels keep the letter-spacing that used to come
   from the monospace.
   ========================================================================== */

h1, h2, h3,
.result__name,
.sec-head__label,
.madeof__type,
.piece-card__name,
.page-head h1,
.alts__head,
.auth-form__heading,
.readout__name,
.wordmark__name {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.result__verdict,
.detail-price, .detail-price--lg,
.result__price, .cpw__figure, .alt__price, .dupe__price {
  font-weight: 800;
}

/* Labels: without the typewriter they need the tracking to still read as
   labels rather than as small body text. */
.eyebrow,
.glance__key,
.sec-head__right,
.dupe-row__label,
.dupe-head__label,
.alt__brand,
.result__brand,
.piece-card__brand,
.cpw__label,
.filter-group__label,
.sort__label,
.site-note__toggle,
.result__checked {
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Nunito sits a little wide; pull running text in slightly so line length
   stays comfortable. */
body { letter-spacing: -0.003em; }

/* ---- Sign in: the fields were left-aligned inside a centred card ---- */
.auth-form form { max-width: 20rem; margin-inline: auto; text-align: left; }
.auth-form .rate-form__field { text-align: left; }
.auth-form .rate-form__field label {
  display: block; text-align: center; margin-bottom: 0.35rem;
}
.auth-form .rate-form__field input { width: 100%; text-align: center; }
.auth-form .rate-form__submit { width: 100%; }
.auth-form__stub-note, .auth-form__switch { max-width: 24rem; margin-inline: auto; }

/* ---- Home: Rate My Piece stands alone, so it centres on its own ---- */
.home-actions { display: flex; justify-content: center; align-items: center; gap: 0.7rem; }
.rate-cta { display: inline-flex; align-items: center; gap: 0.5rem; }

/* The secondary navigation at the foot of Profile, and the signed-in block,
   were the last two things still hugging the left edge. */
[data-profile-root], .profile-account { text-align: center; }
.profile-account__email { font-weight: 700; }
.page-head + [data-profile-root] + .rule { margin-inline: auto; }
.block-label { text-align: center; }
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.4rem; }

/* ==========================================================================
   v6 — One spacing scale, one heading size, centred at every width
   Measured before writing: the article had a max-width but no auto margin,
   so on a 1280px screen it sat 84px from the left and 300px from the right.
   Section headings were two different sizes (17.9px and 21.6px), and the
   vertical gaps ran 62px then 16px. All of that is now on one scale.
   ========================================================================== */

:root {
  --block-gap: 1rem;        /* between every stacked block on a result page */
  --block-pad: 1.5rem;      /* inside every block, all four sides */
  --head-size: 1.5rem;      /* every section title, no exceptions */
}

/* Centred at every width. */
.result { max-width: 46rem; margin-inline: auto; }

/* One gap everywhere, including around the chip row, so the rhythm is even
   from the top of the page to the bottom. */
.result__head { margin-bottom: var(--block-gap); }
.glance { margin: 0 0 var(--block-gap); }
.result__section,
.dupe-card {
  margin-top: var(--block-gap);
  padding: var(--block-pad);
}
.result__section + .result__section,
.result__section + .dupe-card,
.dupe-card + .result__section { margin-top: var(--block-gap); }
.result__head { padding: var(--block-pad); }

/* One heading size and weight for every box. The emphasis on the three that
   carry the decision comes from the shadow, not from the type — two heading
   sizes just read as a mistake. */
.sec-head__label,
.result__section--key .sec-head__label,
.result__section--support .sec-head__label,
.dupe-card .sec-head__label {
  font-size: var(--head-size);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
}
.sec-head {
  gap: 0.5rem;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
}
.sec-head__icon svg { width: 22px; height: 22px; }

/* The product shot is the fastest way to tell whether this is the piece you
   were looking at, so it earns real size. */
.result__img, .result__badge {
  width: 132px; height: 168px;
  object-fit: cover; border-radius: 18px;
}
.result__head { gap: 1.25rem; }

@media (min-width: 720px) {
  :root { --head-size: 1.65rem; --block-pad: 1.75rem; }
  .result__img, .result__badge { width: 168px; height: 212px; }
}

@media (max-width: 400px) {
  :root { --head-size: 1.35rem; --block-pad: 1.25rem; }
  .result__img, .result__badge { width: 112px; height: 142px; }
}

/* Home: every gap between the stacked controls is the same. */
.search-hero { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.search-hero > * { margin: 0; }
.home-actions { margin: 0; }
.trust-strip { margin-top: 1.25rem; }
.trust-strip__link, .rate-cta { min-width: 15rem; justify-content: center; }

/* The three home buttons were the same width and centred but not the same
   height: Rate My Piece came out 45px against 53px, which reads as sloppy
   even when nobody can say why. One shape for all three. */
.trust-strip__link,
.rate-cta {
  /* An explicit height, not a minimum: the "+" badge inside Rate My Piece
     is taller than a line of text, so a min-height still left it 2px
     proud of the other two. */
  height: 54px;
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 999px;
  box-sizing: border-box;
}

/* The tail of a result page ran 20px where the body runs 16px. */
.result__links { margin-top: var(--block-gap); }
.result__checked { margin-top: var(--block-gap); padding-top: 1rem; }

/* The save control was wrapping to two lines inside the hero tile, because
   the image column squeezes it. Keep it on one line and let it size to its
   own text. */
.result__save button, .result__save a { white-space: nowrap; }
.result__save { align-self: start; }

/* Centring the hero as a flex column made its children shrink to their own
   content, which quietly halved the search box: 224px inside a 704px row.
   Stretch it back to the full width of the column, capped so it stays a
   sensible reading width on a wide screen. */
.search-hero > .search-box,
.search-hero .search-box {
  width: 100%;
  max-width: 34rem;
  /* Not align-self: stretch — that fills the row but pins the box to the
     start, which left it 288px from one edge and 448px from the other. */
  align-self: center;
}
.search-hero__lede { max-width: 34rem; }

/* My Closet: the heading was centred but the content underneath ran the
   full width of the shell, so the page looked lopsided. Same column as
   every other page. */
[data-closet-root] {
  max-width: 46rem;
  margin-inline: auto;
}
[data-closet-root] .closet-empty { text-align: center; }

/* The filter groups put the label and the chips in one flex row, so a group
   with many chips wrapped its row below the label while a short group stayed
   inline. That left the four "All" chips at 368, 446, 446 and 368 instead of
   on one line. A fixed label column makes every chip row start at the same x.
   On a phone the label already sits on its own line, which is right there. */
@media (min-width: 720px) {
  .filter-group {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-items: start;
    gap: 0.5rem 0.9rem;
  }
  .filter-group__label { padding-top: 0.42rem; }
}

/* The catalog stacked two different columns: the search, tools and filters
   sat in a 544px column at left 368, while the card grid ran 1112px from
   left 84. Nothing lined up. On a wide screen the controls now share the
   grid's column, so the filter rows and the cards start on the same edge;
   the search input keeps a sensible reading width and centres inside it. */
@media (min-width: 720px) {
  .browse-search,
  .browse-tools,
  .filters-wrap { max-width: none; }

  .browse-search { display: flex; justify-content: center; }
  .browse-search__input { max-width: 34rem; }
}

/* ---- My Closet: the sign-in block sat 128px left of centre ---- */
.closet-signin {
  max-width: 30rem;
  margin-inline: auto;
  text-align: center;
}
.closet-signin > p { max-width: 44ch; margin-inline: auto; }

/* ---- How ratings work: every element sat 183px left of centre ----
   The whole page is centred on its own axis now: the numbered steps put
   their number above the text rather than beside it, and the verdict and
   colour keys centre their rows, so the page reads down one line. */
.hwr { max-width: 46rem; margin-inline: auto; text-align: center; }

.hwr .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
}
.hwr .step__num { margin: 0 auto; }
.hwr .step__text { max-width: 46ch; margin-inline: auto; }
.hwr .step__title { text-align: center; }

.hwr .hwr__h2 { text-align: center; }

.hwr .verdict-key li,
.hwr .scale li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
}

.hwr__notes p { max-width: 58ch; margin-inline: auto; }

/* ---- Garment sketch ----
   Replaces the letter badge where there is no product photo. A drawing of
   the garment says what the thing is before a word is read, and unlike a
   hotlinked retailer image it cannot turn into an advert. */
.result__sketch {
  display: grid;
  place-items: center;
  width: 132px; height: 168px;
  border-radius: 18px;
  background: var(--surface-sunken);
  color: var(--ink-soft);
}
.result__sketch svg { width: 74px; height: 74px; }
.result__sketch--green { color: var(--good); background: var(--good-bg); }
.result__sketch--yellow { color: var(--mixed); background: var(--mixed-bg); }
.result__sketch--red { color: var(--skip); background: var(--skip-bg); }

@media (min-width: 720px) {
  .result__sketch { width: 168px; height: 212px; }
  .result__sketch svg { width: 94px; height: 94px; }
}
@media (max-width: 400px) {
  .result__sketch { width: 112px; height: 142px; }
  .result__sketch svg { width: 64px; height: 64px; }
}

/* ---- Worth the price?: make the numbers findable ----
   Teal is used nowhere else in the app, so a price or a percentage can never
   be mistaken for a verdict tone. */
:root { --figure: #0E7C86; --figure-bg: rgba(14, 124, 134, 0.10); }

.worth__summary .fig {
  color: var(--figure);
  background: var(--figure-bg);
  font-weight: 700;
  padding: 0.05em 0.3em;
  border-radius: 6px;
  white-space: nowrap;
}
.worth__summary .brandname {
  font-style: italic;
  font-weight: 600;
  color: var(--ink);
}

/* The price the whole box is about. */
.result__section--key .detail-price--lg {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: var(--figure);
}

/* The dupe's brand record, shown inside the comparison. Half the catalog's
   cheaper option comes from one brand, so how that brand rates belongs at
   the point of decision, not one click away. */
.dupe__tier {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  text-decoration: none;
}
.dupe__tier--none {
  color: var(--ink-faint);
  background: var(--surface-sunken);
  font-weight: 600;
}
.alt__tier { margin-top: 0.15rem; }
.alt__tier .dupe__tier { font-size: 0.62rem; }

/* The same teal in a brand record. Scores and rankings are the findings
   there, the way prices are in the price box. */
.record__summary .fig,
.record__tag .fig,
.evidence__body .fig,
.evidence__title .fig,
.why-tier__text .fig {
  color: var(--figure);
  background: var(--figure-bg);
  font-weight: 700;
  padding: 0.05em 0.3em;
  border-radius: 6px;
  white-space: nowrap;
}
/* The tag line is already coloured by tone, so the figure keeps the teal
   but drops the pill to avoid two backgrounds fighting. */
.record__tag .fig { background: transparent; padding: 0; }

/* ---- "A new version is ready" ----
   Sits above the bottom nav, same shelf as the install nudge, and uses the
   accent rather than a warning colour: a new build is good news, not a
   problem to resolve. */
.update-bar {
  position: fixed; left: 0.75rem; right: 0.75rem;
  bottom: calc(4.6rem + env(safe-area-inset-bottom));
  z-index: 46;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  background: var(--cobalt); color: #FFFFFF;
  border-radius: var(--radius-sm, 0.75rem);
  box-shadow: 0 10px 30px rgba(20, 22, 26, 0.24);
  animation: view-in-forward 0.22s ease-out both;
}
.update-bar__text { flex: 1; font-size: 0.85rem; line-height: 1.4; }
.update-bar__text strong { font-weight: 700; }
.update-bar__cta {
  flex: none; font-family: var(--body); font-size: 0.8rem; font-weight: 700;
  background: #FFFFFF; color: var(--cobalt);
  border: 0; border-radius: 999px; padding: 0.45rem 0.9rem; cursor: pointer;
}
.update-bar__dismiss {
  flex: none; background: transparent; border: 0; cursor: pointer;
  color: #FFFFFF; opacity: 0.7; font-size: 1.1rem; line-height: 1;
  padding: 0.2rem 0.3rem;
}
/* If both could ever show, the update sits above the install nudge. */
.update-bar ~ .install-bar { bottom: calc(8.4rem + env(safe-area-inset-bottom)); }