/* Influencer Finder. Uses tokens.css only. Phone first; desktop from 1000px (search column + results). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--fs-base)/var(--lh-body) var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3 { margin: 0; line-height: var(--lh-snug); text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-1); }
.vh, .vh-input { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--paper); padding: var(--s-3) var(--s-4); }
.skip:focus { left: 8px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: var(--s-3); padding: 0 var(--gutter); padding-top: env(safe-area-inset-top); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; color: var(--navy); text-decoration: none; }
.brand:hover { color: var(--navy); }
.mark { width: 28px; height: 28px; color: var(--blue); flex: none; }
.brand-name { font-weight: 800; font-size: 1.125rem; letter-spacing: -0.01em; }
.demo-badge { justify-self: start; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); border: 1px solid var(--slate); border-radius: var(--r-1); padding: 1px 7px; line-height: 1.5; }
.flow { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 calc(-1 * var(--gutter)); border-top: 1px solid var(--slate-100); }
.flow a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); border-bottom: 3px solid transparent; }
.flow a:hover { color: var(--navy); background: var(--blue-50); }
.flow a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--blue); }
.count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-full); background: var(--navy); color: #fff; font-size: var(--fs-xs); line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- layout and views ---------- */
.layout { max-width: var(--max); margin: 0 auto; }
.search { padding: var(--s-6) var(--gutter) var(--s-7); }
main { padding: var(--s-5) var(--gutter) 120px; outline: none; min-width: 0; }
main:focus-visible { outline: none; }
body[data-view="search"] main { display: none; }
body:not([data-view="search"]) .search { display: none; }

@media (min-width: 1000px) {
  .top { grid-template-columns: auto auto 1fr auto; }
  .flow { grid-column: 4; margin: 0; border-top: 0; grid-template-columns: repeat(3, auto); gap: var(--s-1); }
  .flow a { padding: 0 var(--s-4); min-height: 64px; font-size: var(--fs-base); }
  .brand { min-height: 64px; }
  .layout { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); gap: var(--s-7); padding: 0 var(--gutter); }
  .search { position: sticky; top: 65px; align-self: start; max-height: calc(100vh - 65px); overflow-y: auto; padding: var(--s-6) var(--s-2) var(--s-7) 0; scrollbar-width: thin; }
  main { padding: var(--s-6) 0 120px; }
  body[data-view="search"] main { display: block; }
  body:not([data-view="search"]) .search { display: block; }
  body[data-view="shortlist"] .search { display: none; }
  body[data-view="shortlist"] .layout { grid-template-columns: minmax(0, 1fr); }
  body[data-view="shortlist"] main { max-width: 760px; }
  .show-btn, .summary-bar { display: none !important; }
}

/* ---------- search form ---------- */
.search-title { font-size: var(--fs-xl); line-height: var(--lh-tight); font-weight: 800; letter-spacing: -0.02em; color: var(--navy); max-width: 14ch; }
.search-lede { margin: var(--s-3) 0 var(--s-6); color: var(--text-2); max-width: 36ch; }
.field { border: 0; padding: 0; margin: 0 0 var(--s-5); min-width: 0; }
.field > label, .field > legend { display: block; padding: 0; font-weight: 700; font-size: var(--fs-sm); color: var(--navy); margin-bottom: var(--s-2); }
.hint { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--s-2); }
.input { width: 100%; min-height: var(--tap); padding: 0 var(--s-3); background: var(--paper); border: 1px solid #7D8CA3; border-radius: var(--r-1); }
.input:hover { border-color: var(--navy); }
.input:focus-visible { outline-offset: 0; }
.input::placeholder { color: #6B7A90; }
.select { position: relative; }
.select select { appearance: none; width: 100%; min-height: var(--tap); padding: 0 40px 0 var(--s-3); background: var(--paper); border: 1px solid #7D8CA3; border-radius: var(--r-1); cursor: pointer; }
.select select:hover { border-color: var(--navy); }
.select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border: solid var(--navy); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; border: 1px solid #7D8CA3; border-radius: var(--r-1); overflow: hidden; background: var(--paper); }
.seg label { display: flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 var(--s-2); font-weight: 600; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; text-align: center; line-height: 1.2; border-left: 1px solid var(--slate-200); }
.seg label:first-of-type { border-left: 0; }
.seg label:hover { background: var(--blue-50); color: var(--navy); }
.seg input:checked + label { background: var(--navy); color: #fff; border-color: var(--navy); }
.seg input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: -3px; }
.seg.wrap { display: flex; flex-wrap: wrap; border: 0; gap: var(--s-2); background: none; overflow: visible; }
.seg.wrap label { border: 1px solid #7D8CA3; border-radius: var(--r-1); padding: 0 var(--s-4); }

.map { margin: 0 0 var(--s-2); border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--paper); overflow: hidden; aspect-ratio: 360 / 250; }
.map svg { display: block; width: 100%; height: 100%; }
.m-bay { fill: #E4EDF8; }
.m-ring { fill: rgb(11 94 215 / .06); stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 5 4; }
.m-in { fill: var(--navy); }
.m-out { fill: var(--slate); }
.m-you { fill: var(--blue); stroke: #fff; stroke-width: 2.5; }
.m-label { font: 500 14px var(--font-body); fill: var(--ink-2); }
.m-label, .m-venue { paint-order: stroke; stroke: rgb(255 255 255 / .9); stroke-width: 4px; stroke-linejoin: round; }
.m-venue { font: 800 15px var(--font-body); fill: var(--navy); }
.map-note { font-size: var(--fs-xs); color: var(--text-3); margin-bottom: var(--s-5); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.chip { min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--slate-200); border-radius: var(--r-full); background: var(--paper); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.chip:hover { border-color: var(--navy); color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

.money { position: relative; display: block; width: 160px; margin-top: var(--s-3); }
.money > span[aria-hidden] { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--navy); pointer-events: none; }
.money .input { padding-left: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-5); border: 1px solid #7D8CA3; border-radius: var(--r-2); background: var(--paper); color: var(--navy); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.btn:hover { border-color: var(--navy); background: var(--blue-50); color: var(--navy); }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.btn.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.on:hover { background: #1B3A63; color: #fff; }
.btn.quiet { border-color: transparent; background: none; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; padding: 0 var(--s-3); }
.btn.quiet:hover { background: var(--blue-50); color: var(--accent-hover); }
.btn.big { width: 100%; min-height: 56px; font-size: var(--fs-base); }
.btn.small { min-height: 44px; padding: 0 var(--s-4); }
.link { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; min-height: 44px; }

/* ---------- results ---------- */
.summary-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0 var(--s-4); margin-bottom: var(--s-4); border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); color: var(--text-2); }
.summary-bar b { color: var(--navy); }
.summary-bar .btn { white-space: nowrap; flex: none; }
.list-note { margin: 0 0 var(--s-4); max-width: 72ch; }
.results-title { scroll-margin-top: 130px; font-size: 1.375rem; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; max-width: 30ch; }
.controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); margin: var(--s-5) 0 var(--s-4); }
.sort { max-width: 100%; overflow-x: auto; display: flex; border: 1px solid #7D8CA3; border-radius: var(--r-1); overflow: hidden; background: var(--paper); }
.seg-btn { white-space: nowrap; min-height: 44px; padding: 0 var(--s-4); border: 0; border-left: 1px solid var(--slate-200); background: none; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }
.seg-btn:first-child { border-left: 0; }
.seg-btn:hover { background: var(--blue-50); color: var(--navy); }
.seg-btn[aria-pressed="true"] { background: var(--navy); color: #fff; }
.seg-btn:focus-visible { outline-offset: -3px; }
.check { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--navy); margin: 0; }
.proven-note .link { display: inline-block; min-height: 0; padding: 12px 2px; margin: -12px 0; }
.proven-note { font-size: var(--fs-sm); color: var(--good); background: var(--good-100); border: 1px solid #BFDCCB; border-radius: var(--r-2); padding: var(--s-2) var(--s-4); margin-bottom: var(--s-4); }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s-5) var(--s-4) var(--s-4); }
.card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; }
.rank { font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 1.4em; padding-top: 3px; }
.handle { font-weight: 800; font-size: 1.125rem; color: var(--navy); text-decoration: none; overflow-wrap: anywhere; line-height: 1.3; }
.handle:hover { color: var(--blue); text-decoration: underline; }
.meta { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.fit { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; color: var(--navy); }
.fit b { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.02em; }
.fit span { font-size: var(--fs-xs); color: var(--text-3); margin-top: 4px; }
.is-group .fit { color: var(--ink-3); }
.why { margin: var(--s-3) 0 var(--s-4); color: var(--text); line-height: 1.45; }

.reach-line { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-2); }
.reach-n { font-size: var(--fs-lg); font-weight: 800; color: var(--blue); letter-spacing: -0.01em; }
.reach-line span { color: var(--text-2); font-size: var(--fs-sm); }
.bar { height: 10px; margin: var(--s-2) 0 var(--s-1); background: var(--slate-100); border-radius: 2px; overflow: hidden; }
.bar span { display: block; height: 100%; min-width: 3px; background: var(--blue); }
.reach-of { font-size: var(--fs-xs); color: var(--text-3); }

.flag { margin-top: var(--s-4); background: var(--ochre-100); border: 1px solid var(--ochre-300); border-radius: var(--r-2); padding: var(--s-3) var(--s-4); }
.flag-title { font-weight: 700; color: var(--ochre); font-size: var(--fs-sm); }
.flag-list { margin: var(--s-2) 0 0; padding: 0 0 0 1.1em; color: #4A3A12; font-size: var(--fs-sm); }
.flag-list li + li { margin-top: 2px; }
.flag-list li::marker { color: var(--ochre); }
.flag-detail { display: block; color: #5E4A1A; font-size: var(--fs-xs); margin-top: 2px; }
p.flag-detail { margin-top: var(--s-1); }
.proven { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--good); font-weight: 600; }

.facts { margin: var(--s-4) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); border-top: 1px solid var(--slate-100); padding-top: var(--s-4); }
.facts div { min-width: 0; }
.facts .wide { grid-column: 1 / -1; }
.facts dt { font-size: var(--fs-xs); color: var(--text-3); }
.facts dd { margin: 2px 0 0; font-weight: 600; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.facts small { font-weight: 400; color: var(--text-3); font-size: var(--fs-xs); }
.src { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--s-3); line-height: 1.45; }
.card .src { margin-top: var(--s-4); }
.card-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.card-actions .btn:first-child { min-width: 132px; }

@media (min-width: 1200px) {
  .card { padding: var(--s-5) var(--s-5) var(--s-5) var(--s-4); }
  .card-body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; column-gap: var(--s-6); padding-left: calc(1.4em + var(--s-3)); }
  .card-head { margin-bottom: 0; }
  .card-side { border-left: 1px solid var(--slate-100); padding-left: var(--s-5); margin-top: var(--s-3); display: flex; flex-direction: column; }
  .card-side .facts { border-top: 0; padding-top: 0; margin-top: 0; }
  .card-side .card-actions { margin-top: auto; padding-top: var(--s-4); }
  .results-title { font-size: var(--fs-lg); }
}

.learn { margin-top: var(--s-6); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s-5) var(--s-4); }
.learn h2 { font-size: var(--fs-md); color: var(--navy); }
.learn p { color: var(--text-2); margin: var(--s-2) 0 var(--s-4); max-width: 60ch; }

/* ---------- one creator ---------- */
.back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--s-3); }
.back::before { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(45deg); margin-right: 10px; }
.d-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); }
.d-handle { font-size: var(--fs-lg); font-weight: 800; color: var(--navy); overflow-wrap: anywhere; letter-spacing: -0.015em; }
.fit.big b { font-size: var(--fs-2xl); }
.d-why { font-size: var(--fs-md); line-height: 1.4; margin: var(--s-4) 0; max-width: 40ch; }
.d-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.d-actions .btn:first-child { min-width: 132px; }
.d-sec { border-top: 1px solid var(--rule); margin-top: var(--s-6); padding-top: var(--s-5); max-width: 720px; }
.d-sec h3 { font-size: var(--fs-md); color: var(--navy); margin-bottom: var(--s-4); }
.d-sec h3 small { font-weight: 400; color: var(--text-3); font-size: var(--fs-sm); }
.d-intro { color: var(--text-2); margin-bottom: var(--s-3); }
.d-stats { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--s-4); }

.geo { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.geo li { display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "l v" "b b"; gap: 4px var(--s-3); align-items: center; }
.geo-l { grid-area: l; font-size: var(--fs-sm); }
.geo-v { grid-area: v; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.geo-bar { grid-area: b; height: 10px; background: var(--slate-100); border-radius: 2px; overflow: hidden; }
.geo-bar span { display: block; height: 100%; background: var(--slate); }
.geo .near .geo-bar span { background: var(--blue); }
.geo .near .geo-l, .geo .near .geo-v { color: var(--navy); font-weight: 700; }
@media (min-width: 600px) {
  .geo li { grid-template-columns: 200px minmax(0, 1fr) 48px; grid-template-areas: "l b v"; }
}

.signals { list-style: none; margin: 0; padding: 0; }
.signals li { padding: var(--s-3) 0; border-bottom: 1px solid var(--slate-100); }
.signals li:first-child { border-top: 1px solid var(--slate-100); }
.sig-t { display: flex; gap: var(--s-3); align-items: baseline; font-weight: 600; font-size: var(--fs-sm); }
.sig-mark { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--slate); transform: translateY(1px); }
.signals .on .sig-mark { background: var(--ochre); border-color: var(--ochre); }
.signals .on .sig-t { color: #5E3D00; }
.signals .ok .sig-t { font-weight: 500; color: var(--text-2); }
.sig-d, .sig-src { font-size: var(--fs-xs); margin-left: 22px; margin-top: 2px; }
.sig-d { color: var(--text-2); }
.sig-src { color: var(--text-3); }

.table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.posts { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.posts th { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); text-align: left; padding: 0 0 var(--s-2); border-bottom: 1px solid var(--rule); }
.posts th.num { text-align: right; }
.posts td { padding: var(--s-3) 0; border-bottom: 1px solid var(--slate-100); vertical-align: top; }
.posts td.num { padding-left: var(--s-3); white-space: nowrap; }
.p-what { display: block; font-weight: 600; }
.p-when { display: block; font-size: var(--fs-xs); color: var(--text-3); }
.p-near { color: var(--blue); font-weight: 600; margin-left: var(--s-2); }

.spark { display: block; width: 100%; max-width: 420px; height: auto; }
.spark polyline { stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.spark circle { fill: var(--paper); stroke: var(--navy); stroke-width: 2; }
.spark-l { display: flex; justify-content: space-between; max-width: 420px; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }

.parts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.parts li { display: grid; grid-template-columns: minmax(0, 1fr) 72px; grid-template-areas: "l v" "b b"; gap: 4px var(--s-3); align-items: center; font-size: var(--fs-sm); }
.parts li > span:first-child { grid-area: l; }
.parts b { grid-area: v; text-align: right; font-variant-numeric: tabular-nums; }
.parts b small { font-weight: 400; color: var(--text-3); font-size: var(--fs-xs); }
.part-bar { grid-area: b; height: 8px; background: var(--slate-100); border-radius: 2px; overflow: hidden; }
.part-bar span { display: block; height: 100%; background: var(--navy); }
@media (min-width: 600px) {
  .parts li { grid-template-columns: 200px minmax(0, 1fr) 80px; grid-template-areas: "l b v"; }
}
.d-price { margin-top: var(--s-5); font-size: var(--fs-sm); }
.src-inline { color: var(--text-3); font-size: var(--fs-xs); }
.proof-list { list-style: none; margin: 0; padding: 0; }
.proof-list li { padding: var(--s-3) 0; border-bottom: 1px solid var(--slate-100); }
.proof-list a { font-weight: 700; display: inline-flex; min-height: 44px; align-items: center; }
.proof-list p { font-size: var(--fs-sm); color: var(--text-2); }
.proof-list b { color: var(--good); }

/* ---------- shortlist and invites ---------- */
.s-title { font-size: var(--fs-xl); font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
.s-lede { color: var(--text-2); margin: var(--s-2) 0 var(--s-5); max-width: 52ch; }
.venue { display: grid; gap: 0 var(--s-4); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s-4) var(--s-4) 0; margin-bottom: var(--s-5); }
@media (min-width: 760px) { .venue { grid-template-columns: 1fr 1.4fr 1fr; } }
.invites { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.invite { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s-4); }
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-3); }
.inv-head > div { min-width: 0; }
.code { font: 600 1.25rem/1 var(--font-slip); letter-spacing: .08em; color: var(--navy); border: 1px dashed var(--slate); border-radius: var(--r-1); padding: 8px 10px; background: var(--blue-50); white-space: nowrap; }
.inv-warn { font-size: var(--fs-sm); color: #5E3D00; background: var(--ochre-100); border: 1px solid var(--ochre-300); border-radius: var(--r-1); padding: var(--s-2) var(--s-3); margin-bottom: var(--s-3); }
.slip { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 0.875rem/1.6 var(--font-slip); color: var(--ink); background: var(--off); border: 1px solid var(--rule); border-radius: var(--r-1); padding: var(--s-4); max-width: 68ch; }
.inv-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.s-foot { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--s-5); max-width: 62ch; }

/* ---------- empty, loading ---------- */
.empty { padding: var(--s-7) 0; max-width: 44ch; }
.empty h2 { font-size: var(--fs-lg); color: var(--navy); }
.empty p { color: var(--text-2); margin: var(--s-3) 0 var(--s-5); }
.loading { color: var(--text-3); padding: var(--s-6) 0; }

/* ---------- tray and toast ---------- */
.tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--gutter); padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--rule); box-shadow: 0 -8px 24px -18px rgb(15 39 71 / .5); }
.tray[hidden] { display: none; }
.tray-text { font-weight: 700; color: var(--navy); }
@media (min-width: 1000px) {
  .tray { left: auto; right: var(--gutter); bottom: var(--s-5); border: 1px solid var(--rule); border-radius: var(--r-2); box-shadow: var(--shadow); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5); gap: var(--s-5); }
}
.toast { position: fixed; left: 50%; bottom: 96px; z-index: 40; transform: translate(-50%, 12px); max-width: calc(100vw - 32px); background: var(--navy); color: #fff; padding: var(--s-3) var(--s-4); border-radius: var(--r-2); font-size: var(--fs-sm); font-weight: 600; opacity: 0; pointer-events: none; transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }