/* ==========================================================================
   Public pages (milestone 3): home, context hubs, sightings, watches, people,
   titles, events, rankings. Builds on the components in app.css and uses the
   same cascade layers (declared in tokens.css). Colours come from tokens only.
   ========================================================================== */

/* Case metal of the hero watch, registered so steel can turn to gold smoothly. */
@property --hw-m1 { syntax: "<color>"; inherits: true; initial-value: #f7f9fb; }
@property --hw-m2 { syntax: "<color>"; inherits: true; initial-value: #c5cbd2; }
@property --hw-m3 { syntax: "<color>"; inherits: true; initial-value: #7c8591; }
@property --hw-m4 { syntax: "<color>"; inherits: true; initial-value: #e4e8ec; }
@property --hw-m5 { syntax: "<color>"; inherits: true; initial-value: #9ba3ad; }

@layer layout {
  .section--tight { padding-block: var(--space-l); }

  /* Like .grid, but items stretch to fill the row instead of leaving empty columns. */
  .grid--fit { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr)); }

  /* A heading with a "see all" link on the right. */
  .section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-m);
    & > a { font-family: var(--font-ui); font-size: var(--step--1); display: inline-flex; gap: .3em; align-items: center; }
    & > a .icon { width: 1em; height: 1em; }
  }

  /* Two (or three) columns that stack on narrow screens. */
  .split {
    display: grid;
    gap: var(--space-xl) var(--space-2xl);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    align-items: start;
  }
  .split--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

  /* Page heading with a facts box beside it. */
  .page-head--split {
    display: grid;
    gap: var(--space-l) var(--space-2xl);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    align-items: start;
    & > :first-child { min-width: 0; }
  }
  @media (width >= 60rem) {
    .page-head--split { grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 1fr); }
  }
  .fact-box {
    padding: var(--space-s) var(--space-m) var(--space-m);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius-m);
    & dl.specs > :nth-last-child(-n + 2) { border-bottom: 0; }
  }

  /* ---- Sightings browser: filters beside results ---- */
  .browse {
    display: grid;
    gap: var(--space-l) var(--space-xl);
    align-items: start;
  }
  @media (width >= 64rem) {
    .browse { grid-template-columns: 15rem minmax(0, 1fr); }
  }
  .browse__main { min-width: 0; }
  .toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    padding-bottom: var(--space-xs);
    border-bottom: var(--hairline) solid var(--border);
  }
  .sort-form {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-inline-start: auto;
    font-family: var(--font-ui);
    font-size: var(--step--1);
    & label { color: var(--text-muted); }
  }
}

@layer components {

  /* An icon at the end of a text link ("All rankings →") stays on the line with the text. */
  a:not(.btn, .chip) > .icon:last-child { display: inline-block; width: 1em; height: 1em; vertical-align: -.12em; margin-inline-start: .15em; }

  /* ---- Home hero: the name set large on the sunburst dial ---- */
  .hero__inner {
    padding-block: clamp(4rem, 3rem + 6vw, 8rem) clamp(3rem, 2.5rem + 3vw, 5rem);
  }
  .hero__title {
    font-size: var(--step-6);
    max-width: 14ch;
    line-height: 1;
    margin-top: var(--space-xs);
  }
  .hero__tagline { max-width: 34ch; margin-top: var(--space-s); }
  .hero__search { display: block; margin-top: var(--space-l); }
  .hero__meta, .context-band__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s) var(--space-l);
    margin-top: var(--space-l);
    max-width: 44rem;
  }
  .hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs) var(--space-m);
    font-family: var(--font-ui);
    font-size: var(--step--1);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--on-dial-muted);
    & strong { font-family: var(--font-display); font-size: var(--step-2); font-weight: var(--display-weight); letter-spacing: 0; color: var(--on-dial); margin-inline-end: .2em; text-transform: none; }
  }

  /* ---- Home hero watch (partials/hero-watch, js/hero-watch.js) ----
     The dial changes with the menu item under the pointer. Case metal and dial colours are the
     illustration's own; the house dial and the construction lines follow the theme. */
  .hero__inner { display: grid; gap: var(--space-xl) var(--space-2xl); align-items: center; }
  .hero__copy { min-width: 0; }
  @media (width >= 60rem) {
    .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(18rem, 27rem); }
  }
  .hw-figure {
    justify-self: center;
    width: min(100%, 27rem);
  }
  @media (width < 60rem) { .hw-figure { width: min(84vw, 22rem); } }
  .hw {
    /* Case metal: steel, or gold for the dress watch. Registered below so the metal can morph. */
    --hw-m1: #f7f9fb; --hw-m2: #c5cbd2; --hw-m3: #7c8591; --hw-m4: #e4e8ec; --hw-m5: #9ba3ad;
    position: relative;
    aspect-ratio: 400 / 450;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: --hw-m1 var(--dur-slow) var(--ease-out), --hw-m2 var(--dur-slow) var(--ease-out), --hw-m3 var(--dur-slow) var(--ease-out), --hw-m4 var(--dur-slow) var(--ease-out), --hw-m5 var(--dur-slow) var(--ease-out);
    &[data-metal="gold"] { --hw-m1: #fff3cc; --hw-m2: #e4c275; --hw-m3: #9a7128; --hw-m4: #f6dc92; --hw-m5: #b78d3b; }
  }
  .hw__case, .hw__glass, .hw__face, .hw__face > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .hw__case { filter: drop-shadow(0 1.2rem 1.4rem oklch(0% 0 0 / .5)); }
  .hw__face, .hw__glass, .hw__glint { pointer-events: none; }
  .hw text { text-anchor: middle; dominant-baseline: central; font-family: "Helvetica Neue", Arial, system-ui, sans-serif; }
  .hw .hw-serif { font-family: var(--font-display); font-weight: 600; }
  .hw__lines { stroke: var(--metal-on-dial); stroke-opacity: .32; stroke-width: .6; stroke-dasharray: 14 4 2 4; }

  /* Bezels and pushers come and go with the dial. */
  .hw__bezel { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
  .hw[data-bezel="plain"] .hw__bezel[data-bezel="plain"],
  .hw[data-bezel="dive"] .hw__bezel[data-bezel="dive"],
  .hw[data-bezel="tachy"] .hw__bezel[data-bezel="tachy"],
  .hw[data-bezel="gmt"] .hw__bezel[data-bezel="gmt"] { opacity: 1; }
  .hw__pusher { transform: translateX(-30px); transition: transform var(--dur-slow) var(--ease-out); }
  .hw[data-pushers="1"] .hw__pusher { transform: none; }

  /* Dials cross-fade; hands are separate layers so only transforms change while they turn. */
  .hw__face {
    opacity: 0;
    visibility: hidden;
    scale: .97;
    transition: opacity var(--dur-slow) var(--ease-out), scale var(--dur-slow) var(--ease-out), visibility 0s var(--dur-slow);
    &.is-on { opacity: 1; visibility: visible; scale: 1; transition-delay: 0s; }
  }
  .hw__hand {
    position: absolute;
    filter: drop-shadow(0 0 1.2px oklch(0% 0 0 / .6));
    & > svg { display: block; width: 100%; height: 100%; overflow: visible; }
  }
  .hw__face.is-on .hw__hand { will-change: transform; }
  .hw.is-setting .hw__hand { transition: transform 1.4s var(--ease-in-out); }

  /* Sunburst dials: fine rays and a bow-tie of light that turns towards the pointer. */
  .hw__sheen {
    position: absolute;
    border-radius: 50%;
    background:
      conic-gradient(from -45deg, oklch(100% 0 0 / 0) 0deg, oklch(100% 0 0 / .2) 45deg, oklch(100% 0 0 / 0) 90deg 180deg, oklch(100% 0 0 / .2) 225deg, oklch(100% 0 0 / 0) 270deg),
      repeating-conic-gradient(oklch(100% 0 0 / .045) 0deg .5deg, oklch(100% 0 0 / 0) .5deg 1.5deg);
    mask: radial-gradient(closest-side, transparent 3%, #000 12%);
    rotate: var(--tilt, 0deg);
    transition: rotate .8s var(--ease-out);
  }
  .hw__glint {
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    &::before {
      content: "";
      position: absolute;
      inset: -10%;
      background: radial-gradient(closest-side at 32% 26%, oklch(100% 0 0 / .13), oklch(100% 0 0 / 0));
      translate: var(--gx, 0) var(--gy, 0);
      transition: translate .8s var(--ease-out);
    }
  }

  /* ---- Context hub band: the dial, tinted with the context's colour ---- */
  .context-band__inner { padding-block: var(--space-2xl) var(--space-xl); }
  .context-band h1 { font-size: var(--step-6); line-height: 1; margin-top: var(--space-2xs); }
  .context-band .lead { max-width: 52ch; }
  .context-band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(70% 120% at 100% 0%, color-mix(in oklch, var(--band-tint) 45%, transparent), transparent 70%);
    pointer-events: none;
  }
  .context-band--on_screen   { --band-tint: oklch(58% .1 250); }
  .context-band--red_carpet  { --band-tint: oklch(55% .17 25); }
  .context-band--in_the_wild { --band-tint: oklch(58% .1 135); }

  .context-tile__count {
    margin-top: var(--space-s) !important;
    font-family: var(--font-ui);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--metal-on-dial) !important;
  }

  /* ---- Featured sighting ---- */
  .card--feature {
    & .card__body { gap: var(--space-2xs); }
    & .featured__title { font-size: var(--step-3); }
    & .featured__desc { color: var(--text-muted); max-width: 52ch; }
  }
  @container (min-width: 34rem) {
    .card--feature .card__media { flex-basis: min(55%, 36rem) !important; }
  }

  /* ---- Ranked lists ---- */
  .rank-list {
    list-style: none;
    padding: 0;
    counter-reset: rank;
    & li {
      counter-increment: rank;
      display: grid;
      grid-template-columns: 2rem 1fr auto;
      gap: var(--space-2xs);
      align-items: baseline;
      padding-block: var(--space-2xs);
      border-bottom: var(--hairline) solid var(--border);
      max-width: none;
    }
    & li::before {
      content: counter(rank);
      font-family: var(--font-display);
      font-size: var(--step-1);
      color: var(--metal);
      font-variant-numeric: lining-nums tabular-nums;
    }
  }
  .rank-list__main { display: flex; flex-wrap: wrap; gap: .1em .5em; align-items: baseline; min-width: 0; }
  .rank-list__main .ref, .rank-list__main .muted { font-size: var(--step--1); }
  .rank-list__count { font-family: var(--font-ui); font-size: var(--step--1); color: var(--text-muted); white-space: nowrap; }

  .rank-grid {
    display: grid;
    gap: var(--space-xl) var(--space-2xl);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  }
  .rank-panel h2 { font-size: var(--step-2); margin-bottom: var(--space-xs); }

  /* ---- Compact lists (red carpet this week, recent events) ---- */
  .mini-list {
    list-style: none;
    padding: 0;
    & li { display: grid; gap: .1em; padding-block: var(--space-2xs); border-bottom: var(--hairline) solid var(--border); max-width: none; }
  }
  .mini-list__title { font-family: var(--font-display); font-size: var(--step-1); font-weight: var(--display-weight); line-height: 1.25; }
  .mini-list__meta { font-size: var(--step--1); color: var(--text-muted); }

  .link-list { list-style: none; padding: 0; display: grid; gap: var(--space-3xs); }

  /* ---- Brand index on the home page: a catalogue-style column list ---- */
  .brand-index {
    list-style: none;
    padding: 0;
    columns: 13rem auto;
    column-gap: var(--space-l);
    & li { break-inside: avoid; padding-block: .2em; }
    & a { text-decoration: none; color: var(--text); &:hover { color: var(--accent); text-decoration: underline; } }
  }
  .brand-index__n { font-family: var(--font-ui); font-size: var(--step--2); color: var(--metal); vertical-align: .15em; }

  /* ---- Directory teaser ---- */
  .teaser {
    display: grid;
    gap: var(--space-l) var(--space-2xl);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    align-items: center;
    padding: var(--space-xl) var(--space-l);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius-m);
  }
  .teaser__side { display: grid; justify-items: start; }

  /* ---- A–Z listing pages ---- */
  .az-group {
    display: grid;
    gap: var(--space-s) var(--space-l);
    padding-block: var(--space-m);
    border-bottom: var(--hairline) solid var(--border);
    scroll-margin-top: 5rem;
  }
  @media (width >= 40rem) {
    .az-group { grid-template-columns: 4rem 1fr; }
  }
  .az-group__letter { font-size: var(--step-4); line-height: 1; color: var(--metal); }
  .entry-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-2xs) var(--space-l);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    & li { display: grid; gap: .05em; align-content: start; max-width: none; }
  }
  .entry-list__name { font-family: var(--font-display); font-size: var(--step-1); font-weight: var(--display-weight); line-height: 1.2; text-decoration: none; color: var(--text); &:hover { color: var(--accent); text-decoration: underline; } }
  .entry-list__meta { font-size: var(--step--1); color: var(--text-muted); }

  /* ---- Tables of sightings ---- */
  .sighting-group + .sighting-group { margin-top: var(--space-l); }
  .sighting-group__head {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--step-0);
    margin-bottom: var(--space-2xs);
    & .muted { font-family: var(--font-ui); font-size: var(--step--1); font-weight: 400; }
  }
  .table-badges { display: inline-flex; flex-wrap: wrap; gap: var(--space-3xs); margin-top: .2em; vertical-align: middle; }
  .data-table .badge { font-size: .66rem; }
  .data-table .ref--plain { font-size: var(--step--2); color: var(--text-muted); }

  /* ---- Filters (sidebar on wide screens, a sliding panel on narrow ones) ---- */
  .filters__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }
  .filters__head h2 { font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
  .facet {
    padding-block: var(--space-xs);
    border-bottom: var(--hairline) solid var(--border);
    & h3 { font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600; margin-bottom: var(--space-3xs); }
    & ul { list-style: none; padding: 0; }
    & a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-2xs);
      padding: .3em .45em;
      margin-inline: -.45em;
      border-radius: var(--radius-s);
      font-family: var(--font-ui);
      font-size: var(--step--1);
      color: var(--text);
      text-decoration: none;
      &:hover { background: var(--surface-2); }
      &[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
    }
    & .count { color: var(--text-muted); font-size: var(--step--2); }
    & .count .icon { width: 1em; height: 1em; color: var(--accent); }
  }
  .facet__more summary { cursor: pointer; font-family: var(--font-ui); font-size: var(--step--2); color: var(--text-muted); padding-block: .3em; }

  .filters-toggle { display: none; }
  @media (width < 64rem) {
    .filters-toggle { display: inline-flex; }
    .filters[popover] {
      inset: 0 auto 0 0;
      margin: 0;
      width: min(22rem, 90vw);
      height: 100dvh;
      max-height: none;
      overflow: auto;
      padding: var(--space-s) var(--space-m) var(--space-l);
      background: var(--bg);
      color: var(--text);
      border: 0;
      border-inline-end: var(--hairline) solid var(--border);
      box-shadow: var(--shadow-m);
      translate: 0 0;
      transition: translate var(--dur-med) var(--ease-out), display var(--dur-med) allow-discrete, overlay var(--dur-med) allow-discrete;
      @starting-style { translate: -100% 0; }
      &:not(:popover-open) { translate: -100% 0; }
      &::backdrop { background: var(--scrim); }
    }
  }
  @media (width >= 64rem) {
    /* Show the popover as an ordinary sidebar (as the header nav does). */
    .filters[popover] {
      display: block;
      position: sticky;
      top: 5rem;
      inset: auto;
      margin: 0;
      padding: 0;
      border: 0;
      background: none;
      color: inherit;
      overflow: visible;
      max-height: none;
    }
    .filters__close { display: none; }
  }

  .active-filters { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
  .chip--remove { gap: .5em; & .icon { width: .9em; height: .9em; } &:hover { border-color: var(--danger); } }
  .clear-filters { font-family: var(--font-ui); font-size: var(--step--1); }
  .select--inline { width: auto; min-height: 2.25rem; padding-block: .3em; font-size: var(--step--1); }

  /* ---- Sighting page ---- */
  .sighting__head {
    display: grid;
    gap: var(--space-l) var(--space-2xl);
    padding-block: var(--space-l) var(--space-xl);
    border-bottom: var(--hairline) solid var(--border);
  }
  @media (width >= 60rem) {
    .sighting__head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
    .sighting__media { position: sticky; top: 5rem; }
  }
  .sighting__media > .frame { display: block; }
  .sighting__title {
    font-size: var(--step-3);
    margin-top: var(--space-xs);
    & a { color: var(--text); text-decoration: none; }
    & a:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; }
  }
  .sighting__wearing { display: block; font-family: var(--font-ui); font-size: var(--step--1); font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); margin-block: .35em; }
  .media-credit { margin-top: var(--space-2xs); font-size: var(--step--2); color: var(--text-muted); }
  .thumbs { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-xs); & li { width: 8rem; } & .frame { --frame-pad: .2rem; display: block; } }
  .gallery {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-xs);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    margin-bottom: var(--space-l);
    & .frame { --frame-pad: .25rem; display: block; }
  }
  .ref-link { text-decoration: none; }

  /* ---- Person page ---- */
  .signature {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-s) var(--space-l);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  }
  .signature__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-s);
    align-items: start;
    padding: var(--space-s) var(--space-m);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    border-top: 2px solid var(--metal);
    border-radius: var(--radius-m);
    max-width: none;
    & > span:last-child { display: grid; gap: var(--space-3xs); justify-items: start; }
  }
  .signature__count {
    font-family: var(--font-display);
    font-size: var(--step-5);
    line-height: .9;
    color: var(--metal);
    & span { font-size: .5em; margin-inline-start: .05em; }
  }
  .signature__name { font-family: var(--font-display); font-size: var(--step-1); font-weight: var(--display-weight); line-height: 1.2; color: var(--text); }
  .signature__ctx { display: flex; flex-wrap: wrap; gap: var(--space-3xs); }
  .context-filter ul { list-style: none; padding: 0; }

  .timeline {
    display: grid;
    gap: var(--space-s) var(--space-l);
    padding-block: var(--space-m);
    border-bottom: var(--hairline) solid var(--border);
  }
  @media (width >= 40rem) {
    .timeline { grid-template-columns: 5rem 1fr; }
  }
  .timeline__year { font-size: var(--step-3); color: var(--metal); line-height: 1; }
  .timeline__list { list-style: none; padding: 0; display: grid; gap: var(--space-s); }
  .timeline__item {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: var(--space-s);
    align-items: start;
    max-width: none;
  }
  @media (width < 30rem) { .timeline__item { grid-template-columns: 5rem 1fr; } }
  .timeline__thumb { --frame-pad: .15rem; display: block; & .frame--none { padding: var(--space-2xs); } }
  .timeline__meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; font-size: var(--step--1); color: var(--text-muted); }
  .timeline__title { font-size: var(--step-1); margin-top: .2em; & a { color: var(--text); } & .ref { font-size: var(--step--2); vertical-align: .15em; } }

  /* ---- Titles and events ---- */
  .title-parent { display: block; font-size: var(--step-1); font-family: var(--font-ui); font-weight: 400; letter-spacing: .04em; margin-bottom: .2em; & a { color: var(--text-muted); } }
  .character-group { margin-top: var(--space-l); }
  .character-group__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2em .6em;
    font-size: var(--step-2);
    margin-bottom: var(--space-2xs);
    & > a { color: var(--text); }
  }
  .character-group__by { font-family: var(--font-ui); font-size: var(--step--1); font-weight: 400; letter-spacing: 0; }
  .edition-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--space-s);
    font-family: var(--font-ui);
    font-size: var(--step--1);
    & a { display: inline-flex; align-items: center; gap: .2em; }
    & a[rel="next"] { margin-inline-start: auto; }
    & .icon { width: 1em; height: 1em; }
  }
  .city-list {
    list-style: none;
    padding: 0;
    columns: 14rem auto;
    column-gap: var(--space-l);
    & li { break-inside: avoid; padding-block: .25em; }
    & a { font-family: var(--font-display); font-size: var(--step-1); font-weight: var(--display-weight); }
    & .muted { font-size: var(--step--1); }
  }
}

/* ==========================================================================
   Collections: visitors' own watches, some for sale
   ========================================================================== */
@layer components {
  /* Hub band */
  .collections-band__inner {
    display: grid;
    gap: var(--space-l) var(--space-2xl);
    align-items: end;
    padding-block: var(--space-2xl) var(--space-xl);
  }
  @media (width >= 60rem) { .collections-band__inner { grid-template-columns: minmax(0, 1.6fr) auto; } }
  .collections-band h1 { font-size: var(--step-6); line-height: 1; margin-top: var(--space-2xs); }
  .collections-band .lead { max-width: 50ch; }
  .collections-band__stats { flex-direction: column; gap: var(--space-2xs); }
  .btn--on-dial { --btn-fg: var(--on-dial); --btn-border: color-mix(in oklch, var(--on-dial) 45%, transparent);
    &:hover { --btn-bg: color-mix(in oklch, var(--on-dial) 12%, transparent); --btn-border: var(--on-dial); --btn-fg: var(--on-dial); } }

  /* Home page feature: text beside a mosaic of recent photos */
  .collections-feature {
    display: grid;
    gap: var(--space-l) var(--space-2xl);
    align-items: center;
  }
  @media (width >= 60rem) { .collections-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .collections-feature h2 { font-size: var(--step-5); line-height: 1; }
  .collections-feature__stats {
    margin-top: var(--space-m);
    color: var(--text-muted);
    & strong { color: var(--text); }
  }
  .mosaic {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
    & li { max-width: none; }
  }
  .mosaic__tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-m);
    background: var(--dial-deep);
    color: var(--on-dial);
    text-decoration: none;
    & img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: scale var(--dur-slow) var(--ease-out); }
    &:hover img { scale: 1.04; }
    &:hover .mosaic__label { text-decoration: underline; }
  }
  @media (prefers-reduced-motion: reduce) { .mosaic__tile:hover img { scale: 1; } }
  .mosaic__label {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--space-l) var(--space-xs) var(--space-2xs);
    background: linear-gradient(transparent, oklch(10% .02 var(--h) / .88));
    font-size: var(--step--1);
    line-height: 1.3;
    color: oklch(97% 0 0);
  }

  /* Cards */
  .item-card__media { --ratio: 4 / 3; position: relative; }
  .item-card__price { font-family: var(--font-display); font-size: var(--step-1); font-weight: var(--display-weight); }
  .item-card--sold .card__media img { filter: grayscale(.7); opacity: .75; }
  .sale-tag {
    position: absolute;
    top: var(--space-2xs);
    left: var(--space-2xs);
    z-index: 2;
    padding: .25em .7em;
    font-family: var(--font-ui);
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    background: var(--metal-on-dial);
    color: var(--dial-deep);
  }
  .sale-tag--pending { background: var(--on-dial); }
  .sale-tag--sold { background: var(--dial-deep); color: var(--on-dial); box-shadow: inset 0 0 0 1px var(--on-dial-muted); }
  .badge--sale-available { --badge: var(--metal); }
  .badge--sale-pending { --badge: var(--warning); }
  .badge--sale-sold { --badge: var(--text-muted); }

  /* Item page */
  .sighting__media .frame:has(.item-photo) { --ratio: 1; }
  .sale-box {
    padding: var(--space-m);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    border-top: 2px solid var(--metal);
    border-radius: var(--radius-m);
    & dl.specs > :nth-last-child(-n + 2) { border-bottom: 0; }
  }
  .sale-box__price { font-family: var(--font-display); font-size: var(--step-4); font-weight: var(--display-weight); line-height: 1; }
  .sale-box__cta { width: 100%; }

  .buyer-counter {
    display: inline-flex;
    gap: var(--space-2xs);
    align-items: center;
    margin-top: var(--space-s);
    padding: var(--space-2xs) var(--space-s);
    font-size: var(--step--1);
    background: color-mix(in oklch, var(--success) 8%, var(--bg));
    border: var(--hairline) solid color-mix(in oklch, var(--success) 35%, transparent);
    border-radius: var(--radius-pill);
    & .icon { color: var(--success); }
  }

  /* For-sale filters */
  .sale-filters {
    display: grid;
    gap: var(--space-s);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    align-items: end;
    padding: var(--space-s) var(--space-m);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius-m);
    & .field + .field { margin-top: 0; }
  }
  .sale-filters__actions { display: flex; gap: var(--space-s); align-items: center; min-height: 2.75rem; font-family: var(--font-ui); font-size: var(--step--1); }

  /* Numbered steps and rules lists */
  .steps { padding-inline-start: 1.4em; display: grid; gap: var(--space-xs); & li::marker { color: var(--metal); font-family: var(--font-display); } }
  .rules { padding-inline-start: 1.2em; display: grid; gap: var(--space-2xs); & li::marker { color: var(--metal); } }
}

/* ==========================================================================
   Directory (milestone 4)
   ========================================================================== */
@layer components {
  .directory-band__inner { padding-block: var(--space-2xl) var(--space-xl); }
  .directory-band h1 { font-size: var(--step-6); line-height: 1; margin-top: var(--space-2xs); }
  .directory-band .lead { max-width: 56ch; }

  /* Browse by type */
  .type-grid {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-xs);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    & li { max-width: none; }
  }
  .type-tile {
    display: grid;
    gap: var(--space-3xs);
    height: 100%;
    padding: var(--space-s) var(--space-m);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    border-top: 2px solid var(--metal);
    border-radius: var(--radius-m);
    text-decoration: none;
    color: var(--text);
    transition: border-color var(--dur-fast), box-shadow var(--dur-med);
    &:hover { border-color: var(--border-strong); box-shadow: var(--shadow-m); & .type-tile__name { text-decoration: underline; text-decoration-thickness: 1px; } }
  }
  .type-tile__name { font-family: var(--font-display); font-size: var(--step-2); font-weight: var(--display-weight); line-height: 1.15; }
  .type-tile__blurb { font-size: var(--step--1); color: var(--text-muted); }
  .type-tile__n { font-family: var(--font-ui); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; color: var(--metal); margin-top: var(--space-2xs); }

  /* Countries and cities */
  .place-grid {
    display: grid;
    gap: var(--space-l);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    align-items: start;
  }
  .place-card {
    & h2, & h3 { font-size: var(--step-2); padding-bottom: var(--space-2xs); border-bottom: var(--hairline) solid var(--border); margin-bottom: var(--space-2xs); }
    & h2 a, & h3 a { color: var(--text); text-decoration: none; &:hover { color: var(--accent); text-decoration: underline; } }
    & ul { list-style: none; padding: 0; columns: 2; column-gap: var(--space-s); font-size: var(--step--1); }
    & li { break-inside: avoid; padding-block: .15em; }
  }

  /* Lists of shops */
  .shop-list { list-style: none; padding: 0; display: grid; gap: 0; }
  .shop-list--cols { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); column-gap: var(--space-l); }
  .shop-row {
    display: grid;
    gap: .1em;
    align-content: start;
    padding-block: var(--space-2xs);
    border-bottom: var(--hairline) solid var(--border);
    max-width: none;
  }
  .shop-row__name { font-family: var(--font-display); font-size: var(--step-1); font-weight: var(--display-weight); line-height: 1.2; color: var(--text); text-decoration: none;
    &:hover { color: var(--accent); text-decoration: underline; } }
  .shop-row__meta { font-size: var(--step--1); color: var(--text-muted); }
  .shop-row__evidence { display: flex; flex-wrap: wrap; gap: .2em .5em; align-items: center; font-size: var(--step--2); color: var(--text-muted); }
  .featured-box {
    margin-top: var(--space-l);
    padding: var(--space-s) var(--space-m);
    border: var(--hairline) dashed var(--border-strong);
    border-radius: var(--radius-m);
  }

  /* Addresses */
  .location-grid {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-s);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  }
  .location {
    padding: var(--space-s) var(--space-m);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius-m);
    font-size: var(--step--1);
    max-width: none;
    & address { font-style: normal; line-height: 1.5; }
  }
  .location__shop { display: block; font-family: var(--font-display); font-size: var(--step-1); font-weight: var(--display-weight); line-height: 1.2; margin-bottom: var(--space-3xs); }
  .location__label { font-family: var(--font-ui); font-weight: 600; margin-bottom: .2em; }
  .location__phone { margin-top: var(--space-2xs); font-variant-numeric: tabular-nums lining-nums; }

  /* Brands on a shop page */
  .brand-evidence {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-2xs) var(--space-l);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    & li { display: grid; gap: .1em; padding-block: var(--space-2xs); border-bottom: var(--hairline) solid var(--border); max-width: none; }
    & .muted { font-size: var(--step--1); }
  }
  .brand-evidence__name { font-family: var(--font-display); font-size: var(--step-1); font-weight: var(--display-weight); }
  .link-inline a { white-space: nowrap; }

  /* Where to find one */
  .wtf-grid {
    display: grid;
    gap: var(--space-l) var(--space-xl);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    align-items: start;
  }
  .wtf-col h3 {
    font-family: var(--font-ui);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: var(--space-2xs);
    border-bottom: var(--hairline) solid var(--border-strong);
  }
  .wtf-col .shop-row__name { font-size: var(--step-0); }
}

/* ==========================================================================
   Search (milestone 5)
   ========================================================================== */
@layer components {
  search { display: block; position: relative; }
  .search-bar--large { max-width: 52rem; & input { min-height: 3.75rem; font-size: max(16px, var(--step-2)); } }
  .search-head { padding-top: var(--space-l); }

  /* Type-ahead list */
  .suggest__list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    width: min(100%, 44rem);
    max-height: min(70dvh, 30rem);
    overflow: auto;
    margin: 0;
    padding: var(--space-3xs) 0;
    list-style: none;
    color: var(--text);
    background: var(--bg);
    border: var(--hairline) solid var(--border-strong);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-m);
    text-align: start;
    & li { max-width: none; }
    /* :not(.btn) matches the specificity of `.dial-band a:not(.btn)`, which would otherwise win. */
    & a:not(.btn) {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0 var(--space-2xs);
      align-items: baseline;
      padding: var(--space-2xs) var(--space-s);
      color: var(--text);
      text-decoration: none;
    }
    & [aria-selected="true"] a:not(.btn), & a:not(.btn):hover { background: var(--accent-soft); }
    & [aria-selected="true"] { box-shadow: inset 3px 0 0 var(--accent); }
    & .ref { font-size: var(--step--2); color: var(--text-muted); justify-self: start; }
  }
  /* In the top layer: fixed position, placed under the search box by suggest.js. */
  .suggest__list[popover] { position: fixed; inset: auto; margin: 0; }
  .search-bar--large + .suggest .suggest__list { width: min(100%, 52rem); }
  .suggest__label { font-family: var(--font-display); font-size: var(--step-1); font-weight: var(--display-weight); line-height: 1.25; }
  .suggest__sub { grid-column: 1 / -1; font-size: var(--step--1); color: var(--text-muted); }
  .suggest__all a:not(.btn) { display: block; font-family: var(--font-ui); font-size: var(--step--1); color: var(--accent); border-top: var(--hairline) solid var(--border); }

  /* Results */
  .best-match__link {
    display: grid;
    gap: var(--space-3xs);
    justify-items: start;
    max-width: 52rem;
    margin-top: var(--space-2xs);
    padding: var(--space-m);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    border-inline-start: 3px solid var(--metal);
    border-radius: var(--radius-m);
    color: var(--text);
    text-decoration: none;
    &:hover { border-color: var(--border-strong); box-shadow: var(--shadow-m); & .best-match__label { text-decoration: underline; text-decoration-thickness: 1px; } }
  }
  .best-match__label { font-family: var(--font-display); font-size: var(--step-3); font-weight: var(--display-weight); line-height: 1.1; }
  .best-match__sub { font-size: var(--step--1); color: var(--text-muted); }

  .result-groups {
    display: grid;
    gap: var(--space-xl) var(--space-2xl);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    align-items: start;
  }
  .result-group h2 { font-size: var(--step-2); padding-bottom: var(--space-2xs); border-bottom: var(--hairline) solid var(--border-strong); }
  .result-list {
    list-style: none;
    padding: 0;
    & li { display: flex; flex-wrap: wrap; gap: .1em .5em; align-items: baseline; padding-block: var(--space-2xs); border-bottom: var(--hairline) solid var(--border); max-width: none; }
    & .ref { font-size: var(--step--2); }
  }
  .result-list__label { font-family: var(--font-display); font-size: var(--step-1); font-weight: var(--display-weight); color: var(--text); text-decoration: none;
    &:hover { color: var(--accent); text-decoration: underline; } }
  .result-list__sub { flex-basis: 100%; font-size: var(--step--1); color: var(--text-muted); }
}

/* ==========================================================================
   Accounts, forms, contributions and review (milestone 6)
   ========================================================================== */
@layer layout {
  .page-pad { padding-block: var(--space-l) var(--space-2xl); }
  .auth {
    width: min(100% - 2 * var(--gutter), 30rem);
    margin-inline: auto;
    padding-block: var(--space-2xl) var(--space-3xl);
  }
  .auth__alt { margin-top: var(--space-xl); padding-top: var(--space-m); border-top: var(--hairline) solid var(--border); }
  .form-row {
    display: grid;
    gap: var(--space-s) var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    align-items: start;
  }
  .account-grid {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    align-items: start;
  }
  .review-grid {
    display: grid;
    gap: var(--space-l) var(--space-2xl);
    align-items: start;
  }
  @media (width >= 60rem) { .review-grid { grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 1fr); } }
}

@layer components {
  .account-card, .review-box {
    padding: var(--space-m);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius-m);
    & h2 { font-size: var(--step-2); margin-bottom: var(--space-2xs); }
  }
  .review-box { position: sticky; top: 5rem; }

  /* A button that looks like a link (sign out, remove photo) */
  .linklike {
    all: unset;
    cursor: pointer;
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: color-mix(in oklch, currentColor 40%, transparent);
    text-underline-offset: .2em;
    font-size: var(--step--1);
    &:hover { color: var(--accent-strong); }
    &:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  }
  .inline-form { display: contents; }

  .code-input { font-family: var(--font-ui); font-size: var(--step-2) !important; letter-spacing: .3em; font-variant-numeric: tabular-nums; max-width: 12rem; }
  .setup-key code { font-size: var(--step-1); letter-spacing: .08em; padding: .3em .6em; background: var(--surface-2); border-radius: var(--radius-s); user-select: all; }
  .recovery { padding: var(--space-m); border: 2px solid var(--warning); border-radius: var(--radius-m); background: color-mix(in oklch, var(--warning) 6%, var(--bg)); }
  .recovery__codes {
    list-style: none; padding: 0;
    display: grid; gap: var(--space-2xs); grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    & code { font-size: var(--step-0); letter-spacing: .1em; user-select: all; }
  }

  .error-summary { margin-top: var(--space-m); & ul { margin-top: var(--space-3xs); padding-inline-start: 1.1em; } & a { color: var(--danger); } }
  .error-summary:focus { outline: 2px solid var(--focus); outline-offset: 2px; }

  /* Side-by-side fields: no stacking gap (this must live in the same layer as .field + .field). */
  .form-row > .field + .field, .form-row > fieldset + .field, .form-row > .field + fieldset { margin-top: 0; }

  /* Long forms: numbered sections */
  .contribute-form { display: grid; gap: var(--space-l); }
  .form-section {
    display: grid;
    gap: var(--space-s);
    padding: var(--space-m);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius-m);
    & > legend { font-family: var(--font-display); font-size: var(--step-2); font-weight: var(--display-weight); padding-inline: .3em; color: var(--text); }
    & > .field + .field { margin-top: 0; }
  }
  .choice--card {
    padding: var(--space-xs) var(--space-s);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius-m);
    &:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
  }
  .new-record { padding: var(--space-xs) var(--space-s); background: var(--surface); border-radius: var(--radius-m);
    & > summary { cursor: pointer; font-family: var(--font-ui); font-size: var(--step--1); color: var(--accent); }
    &[open] > summary { margin-bottom: var(--space-xs); } }
  .photo-slot { display: grid; gap: var(--space-xs); padding: var(--space-s); background: var(--surface); border-radius: var(--radius-m); & .field + .field { margin-top: 0; } }
  .photo-grid {
    list-style: none; padding: 0;
    display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    & li { max-width: none; } & .frame { --ratio: 1; display: block; --frame-pad: .2rem; }
  }
  .form-actions { padding-top: var(--space-s); }

  /* Show only what applies (progressive: without :has() everything shows). */
  @supports selector(:has(*)) {
    .contribute-form .ctx-section { display: none; }
    .contribute-form:has([name="context"][value="on_screen"]:checked) .ctx-section--on_screen,
    .contribute-form:has([name="context"][value="red_carpet"]:checked) .ctx-section--red_carpet,
    .contribute-form:has([name="context"][value="in_the_wild"]:checked) .ctx-section--in_the_wild { display: grid; }
    form:not(:has([name="kind"][value="takedown"]:checked)) .takedown-fields { display: none; }
    form:has([name="display_mode"][value="anonymous"]:checked) .display-name-field { display: none; }
    .sale-section:not(:has([name="is_for_sale"]:checked)) .sale-fields { display: none; }
    form:not(:has(#f-brand option[value="_other"]:checked)) .brand-text-field { display: none; }
  }

  /* Your watches */
  .manage-list { list-style: none; padding: 0; display: grid; gap: var(--space-s); }
  .manage-item {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: var(--space-m);
    padding: var(--space-s);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius-m);
    max-width: none;
  }
  .manage-item__thumb { --ratio: 1; --frame-pad: .15rem; }
  .manage-item__title { font-size: var(--step-1); & .ref { font-size: var(--step--2); vertical-align: .2em; } }
  .manage-item__body { display: grid; gap: var(--space-2xs); align-content: start; }
  .manage-item__actions { --cluster-gap: var(--space-3xs); }

  .diff-table { & th[scope="row"] { font-family: var(--font-ui); color: var(--text-muted); white-space: nowrap; }
    & .diff-old { background: color-mix(in oklch, var(--danger) 7%, var(--bg)); }
    & .diff-new { background: color-mix(in oklch, var(--success) 8%, var(--bg)); } }

  .safety { padding: var(--space-s) var(--space-m); border-inline-start: 3px solid var(--warning); background: var(--surface); border-radius: var(--radius-s); & h2 { font-size: var(--step-1); } }

  /* Long-form text pages */
  .prose {
    & h2 { font-size: var(--step-3); margin-top: var(--space-xl); }
    & h3 { font-size: var(--step-1); margin-top: var(--space-l); }
    & h2 + h3 { margin-top: var(--space-s); }
    & p, & ul, & ol, & dl, & .table-wrap { margin-top: var(--space-s); }
    & ul, & ol { padding-inline-start: 1.3em; display: grid; gap: var(--space-2xs); }
    & li::marker { color: var(--metal); }
    & .lead { margin-top: var(--space-s); }
  }
}