/* TruSauce — "night market ticket".
   Night ground for the site chrome; cream paper for anything that is a record
   (the result ticket, legal documents); sauce red for stamps and actions. */

@font-face {
  font-family: 'Big Shoulders Display';
  src: url('/assets/fonts/big-shoulders-display.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/newsreader.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/newsreader-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/plex-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/plex-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/plex-mono-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  color-scheme: dark;

  --night: #15110e;
  --night-raised: #1e1915;
  --night-line: #342c25;
  --cream: #f2e6d2;
  --dim: #a89a88;

  --paper: #f4ead8;
  --paper-shade: #e8dbc3;
  --ink: #1c1510;
  --ink-dim: #65574a;
  --rule: #d3c2a6;

  --sauce: #e5573a;
  --sauce-ink: #a9321b;
  --sauce-button: #cc462b; /* white text on it: 4.7:1 (the brighter --sauce gives 3.6:1) */
  --sauce-glow: rgba(229, 87, 58, 0.14);
  --ok: #72b894;
  --warn: #dfa95b;

  --display: 'Big Shoulders Display', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 40rem;
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font: 400 1.0625rem/1.6 var(--serif);
  text-rendering: optimizeLegibility;
  /* film grain on the night ground */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .8 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--sauce); }
:focus-visible { outline: 2px solid var(--sauce); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

.skip {
  position: absolute; left: var(--gutter); top: -3rem; z-index: 10;
  background: var(--sauce-button); color: #fff; padding: 0.5rem 0.8rem;
  font: 500 0.85rem var(--mono); text-decoration: none;
}
.skip:focus { top: 0.75rem; }

/* ---- shared type utilities ---------------------------------------------- */

.eyebrow {
  font: 500 0.72rem/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 1rem;
}
.display {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.01em;
  margin: 0;
}
.mono { font-family: var(--mono); }

/* ---- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.2rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: 600 0.82rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sauce { background: var(--sauce-button); color: #fff; }
.btn-sauce:hover { background: var(--sauce-ink); color: #fff; }
.btn-line { border-color: var(--night-line); color: var(--cream); background: transparent; }
.btn-line:hover { border-color: var(--cream); color: var(--cream); }
.btn[disabled] { opacity: 0.55; cursor: default; transform: none; }
.arrow { font-family: var(--serif); font-size: 1.1em; line-height: 0; }

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

.masthead { border-bottom: 1px solid var(--night-line); }
.masthead-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.1rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none;
  font: 800 1.5rem/1 var(--display);
  text-transform: uppercase; letter-spacing: 0.02em;
}
.brand:hover { color: var(--cream); }
.brand img { width: 30px; height: 30px; display: block; }
.masthead nav { display: flex; align-items: center; gap: clamp(0.75rem, 2.5vw, 1.75rem); }
.masthead nav a {
  font: 500 0.78rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; color: var(--dim);
}
.masthead nav a:hover { color: var(--cream); }
body[data-page="start"] [data-nav="start"],
body[data-page="app"] [data-nav="app"] { color: var(--cream); }
.masthead nav .nav-cta {
  color: var(--cream); border: 1px solid var(--night-line);
  padding: 0.6rem 0.8rem; border-radius: var(--radius);
}
.masthead nav .nav-cta:hover { border-color: var(--sauce); }
body[data-page="app"] .masthead nav .nav-cta { border-color: var(--sauce); }
@media (max-width: 34rem) {
  .masthead nav .nav-hide-sm { display: none; }
}
/* phones: sign-in lives on the list page and in the footer instead */
@media (max-width: 30rem) {
  .masthead nav .nav-hide-xs { display: none; }
}
body[data-page="login"] [data-nav="account"],
body[data-page="account"] [data-nav="account"] { color: var(--cream); }

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

.colophon {
  margin-top: clamp(4rem, 10vw, 7rem);
  border-top: 1px solid var(--night-line);
  padding-block: 3rem 2rem;
  font: 400 0.85rem/1.6 var(--mono);
  color: var(--dim);
}
.colophon-grid {
  display: grid;
  grid-template-columns: minmax(14rem, 1.6fr) repeat(4, minmax(8rem, 1fr));
  gap: 2rem;
}
@media (max-width: 52rem) {
  .colophon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
  .colophon-grid > :first-child { grid-column: 1 / -1; }
}
.colophon h2 {
  font: 500 0.7rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream); margin: 0 0 0.9rem;
}
.colophon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.colophon a { text-decoration: none; }
.colophon a:hover { color: var(--cream); text-decoration: underline; }
.colophon-lede { font: italic 400 1.15rem/1.4 var(--serif); color: var(--cream); margin: 0.9rem 0 0; max-width: 22rem; }
.colophon-fine {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px dashed var(--night-line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem;
  font-size: 0.75rem;
}
.colophon-fine p { margin: 0; max-width: 46rem; }
/* phones: two tight columns of links, and the fine print only */
@media (max-width: 34rem) {
  .colophon { padding-block: 2rem 1.5rem; font-size: 0.8rem; }
  .colophon-lede, .colophon-fine p + p { display: none; }
  .colophon ul { gap: 0.3rem; }
  .colophon-fine { margin-top: 1.75rem; font-size: 0.7rem; }
}

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

.wrap { max-width: 76rem; margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.band + .band { border-top: 1px solid var(--night-line); }
@media (max-width: 34rem) { .band { padding-block: 2.75rem; } }

/* ---- the ticket (a printed kitchen order ticket) ----------------------- */

.ticket {
  --perf: 10px;
  position: relative;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 0.8rem/1.45 var(--mono);
  padding: 1.6rem 1.4rem 1.3rem;
  /* torn/perforated top and bottom edges */
  -webkit-mask:
    radial-gradient(circle at 50% 0, transparent 4px, #000 4.5px) top / var(--perf) 51% repeat-x,
    radial-gradient(circle at 50% 100%, transparent 4px, #000 4.5px) bottom / var(--perf) 51% repeat-x;
  mask:
    radial-gradient(circle at 50% 0, transparent 4px, #000 4.5px) top / var(--perf) 51% repeat-x,
    radial-gradient(circle at 50% 100%, transparent 4px, #000 4.5px) bottom / var(--perf) 51% repeat-x;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45));
}
.ticket-head, .ticket-foot {
  display: flex; justify-content: space-between; gap: 1rem;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.7rem;
}
.ticket-head { padding-bottom: 0.8rem; border-bottom: 2px dashed var(--rule); }
.ticket-foot { padding-top: 0.9rem; margin-top: 0.3rem; border-top: 2px dashed var(--rule); color: var(--ink-dim); }
.ticket dl { margin: 0; }
.ticket dl > div {
  display: grid; grid-template-columns: 6.2rem 1fr; gap: 0.75rem;
  padding-block: 0.65rem;
  border-bottom: 1px dotted var(--rule);
}
.ticket dl > div:last-child { border-bottom: 0; }
.ticket dt {
  font-weight: 500; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-dim); padding-top: 0.12rem;
}
.ticket dd { margin: 0; }
.ticket-place strong {
  display: block; font: 800 1.7rem/0.95 var(--display); text-transform: uppercase; letter-spacing: 0.01em;
}
.ticket-place span { display: block; margin-top: 0.3rem; color: var(--ink-dim); }
.ticket-items, .ticket-reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.ticket-items li::before { content: '— '; color: var(--sauce-ink); }
.ticket-reviews li { display: flex; justify-content: space-between; gap: 0.75rem; }
.ticket-reviews li span:last-child { color: var(--ink-dim); white-space: nowrap; }
.ticket-said { font: italic 400 1rem/1.35 var(--serif); }
.ticket-match { display: inline-flex; align-items: center; gap: 0.45rem; }
.ticket-match b { font-weight: 600; color: var(--sauce-ink); }

.stamp {
  /* sits in the empty middle of the ticket header, clear of the data rows */
  position: absolute; left: 50%; top: 0.55rem;
  text-transform: uppercase;
  font: 900 1.9rem/1 var(--display);
  letter-spacing: 0.06em;
  color: var(--sauce-ink);
  border: 3px solid currentColor;
  border-radius: 4px;
  padding: 0.25rem 0.55rem 0.15rem;
  transform: translateX(-50%) rotate(-11deg);
  opacity: 0.85;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ---- home: hero --------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(3.5rem, 9vw, 6.5rem);
}
@media (max-width: 58rem) { .hero { grid-template-columns: 1fr; } }
.hero h1 { font-size: clamp(3.4rem, 10.5vw, 8.4rem); }
.hero h1 em { font-style: normal; color: var(--sauce); display: block; }
.hero-lede { font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.55; max-width: 34rem; margin: 1.8rem 0 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero-note { margin: 1.25rem 0 0; font: 400 0.75rem/1.4 var(--mono); color: var(--dim); letter-spacing: 0.04em; }
@media (max-width: 34rem) {
  .hero { padding-block: 2rem 2.75rem; gap: 2.25rem; }
  .hero-lede { margin: 1.25rem 0 1.5rem; }
  .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
}

.hero-slip { position: relative; justify-self: center; width: min(100%, 24rem); }
/* the slot the ticket prints out of */
.hero-slip::before {
  content: ''; position: absolute; left: max(-6%, calc(-1 * var(--gutter))); right: max(-6%, calc(-1 * var(--gutter))); top: -0.9rem; height: 0.9rem; z-index: 2;
  background: #0c0907; border-radius: 3px;
  box-shadow: inset 0 -2px 0 var(--night-line), 0 1px 0 rgba(255, 255, 255, 0.04);
}
.hero-slip-clip { overflow: hidden; padding: 0 min(1.5rem, var(--gutter)) 3rem; margin: 0 calc(-1 * min(1.5rem, var(--gutter))) -3rem; }

@media (prefers-reduced-motion: no-preference) {
  .hero-slip .ticket { animation: print 1.25s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
  .hero-slip .stamp { animation: stamp 0.28s cubic-bezier(0.3, 1.6, 0.5, 1) 1.45s both; }
}
@keyframes print { from { transform: translateY(-104%); } to { transform: translateY(0); } }
@keyframes stamp {
  from { opacity: 0; transform: translateX(-50%) rotate(-11deg) scale(1.8); }
  to { opacity: 0.85; transform: translateX(-50%) rotate(-11deg) scale(1); }
}

/* ---- home: caption strip ------------------------------------------------ */

.captions { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: end; }
@media (max-width: 52rem) { .captions { grid-template-columns: 1fr; } }
.captions h2 { font-size: clamp(2.8rem, 7vw, 5.4rem); }
.captions h2 span { color: var(--sauce); }
.caption-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.caption-list li {
  font: 400 0.95rem/1 var(--mono);
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--night-line);
  border-radius: 999px;
  color: var(--dim);
  text-decoration: line-through;
  text-decoration-color: var(--sauce);
  text-decoration-thickness: 2px;
}
.captions-body { max-width: 34rem; margin: 1.5rem 0 0; }

/* ---- home: steps (a real sequence, so numbered) ------------------------ */

.steps-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 3rem; margin-bottom: 3rem; }
.steps-head h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.steps-head p { max-width: 26rem; margin: 0; color: var(--dim); }
@media (max-width: 34rem) { .steps-head { margin-bottom: 1.5rem; } }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: step; }
@media (max-width: 52rem) { .steps { grid-template-columns: 1fr; } }
.steps li {
  counter-increment: step;
  padding: 1.5rem clamp(1rem, 2.5vw, 2rem) 0 0;
  border-top: 2px solid var(--cream);
  margin-right: clamp(1rem, 2.5vw, 2rem);
}
@media (max-width: 52rem) { .steps li { margin-right: 0; padding-bottom: 2rem; } }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block; font: 800 3.6rem/1 var(--display); color: var(--sauce); margin-bottom: 1rem;
}
.steps h3 { font: 700 1.6rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 0.75rem; }
.steps p { margin: 0; color: var(--cream); }
/* phones: the number sits beside the step instead of above it */
@media (max-width: 52rem) {
  .steps li { display: grid; grid-template-columns: 3rem 1fr; column-gap: 0.75rem; padding: 1.1rem 0 1.25rem; border-top-width: 1px; }
  .steps li::before { grid-row: span 2; font-size: 2.2rem; margin: 0; }
  .steps h3 { font-size: 1.35rem; margin-bottom: 0.4rem; }
}

/* ---- home: TruScore in three lines ------------------------------------- */

.score-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 2rem; }
@media (max-width: 52rem) { .score-facts { grid-template-columns: 1fr; } }
.score-facts li { padding-top: 0.9rem; border-top: 1px solid var(--night-line); }
.more-link { margin: 1.75rem 0 0; font: 500 0.82rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.more-link a { color: var(--sauce); text-decoration: none; }
.more-link a:hover { color: var(--cream); }

/* ---- channels (home + start) ------------------------------------------- */

.channels { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1rem; }
@media (max-width: 58rem) { .channels { grid-template-columns: 1fr; } }
.channel {
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.8rem;
  background: var(--night-raised);
}
.channel-kicker { font: 500 0.7rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin: 0; }
.channel h3 { font: 800 2rem/0.95 var(--display); text-transform: uppercase; margin: 0; }
.channel p { margin: 0; }
.channel .btn { align-self: flex-start; margin-top: auto; }
/* phones: once we know the platform, only its own card (and WhatsApp/Instagram, which work on both) */
@media (max-width: 58rem) {
  .channel { padding: 1.25rem; }
  body[data-platform="android"] .channel[data-for="ios"],
  body[data-platform="ios"] .channel[data-for="android"] { display: none; }
}
.pill {
  display: inline-block; align-self: flex-start;
  font: 600 0.66rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.35rem 0.5rem; border-radius: 3px;
  border: 1px solid currentColor;
}
body[data-platform="android"] .channel[data-for="android"],
body[data-platform="ios"] .channel[data-for="ios"] { border-color: var(--sauce); box-shadow: 0 0 0 4px var(--sauce-glow); }
.for-you { display: none; color: var(--sauce); }
body[data-platform="android"] [data-for="android"] .for-you,
body[data-platform="ios"] [data-for="ios"] .for-you { display: inline; }

.closer { text-align: left; }
.closer h2 { font-size: clamp(2.8rem, 8vw, 6.5rem); max-width: 16ch; }
.closer h2 span { color: var(--sauce); }
.closer .btn { margin-top: 2rem; }

/* ---- page heads (inner pages) ------------------------------------------ */

.page-head { padding-block: clamp(3rem, 8vw, 5rem) clamp(2rem, 5vw, 3rem); }
.page-head h1 { font-size: clamp(3rem, 8vw, 6rem); }
.page-head p:not(.eyebrow) { max-width: 38rem; margin: 1.25rem 0 0; font-size: 1.15rem; }
@media (max-width: 34rem) {
  .page-head { padding-block: 2rem 1.5rem; }
  .page-head p:not(.eyebrow) { margin-top: 0.9rem; font-size: 1.05rem; }
}

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

.setup { display: grid; gap: 1rem; }
.setup-card {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--night-line); border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--night-raised);
}
@media (max-width: 52rem) { .setup-card { grid-template-columns: 1fr; } }
body[data-platform="android"] .setup-card[data-for="android"],
body[data-platform="ios"] .setup-card[data-for="ios"] { border-color: var(--sauce); }
/* phones: only the visitor's own platform, until they ask for every option */
@media (max-width: 58rem) {
  body[data-platform="android"]:not([data-show-all]) .setup-card[data-for="ios"],
  body[data-platform="ios"]:not([data-show-all]) .setup-card[data-for="android"] { display: none; }
}
.setup-all { margin: 0.5rem 0 0; font: 400 0.8rem/1.6 var(--mono); color: var(--dim); display: none; }
@media (max-width: 58rem) { body[data-platform="android"] .setup-all, body[data-platform="ios"] .setup-all { display: block; } }
body[data-show-all] .setup-all { display: none !important; }
.setup-card h2 { font: 800 clamp(2.2rem, 5vw, 3.2rem)/0.92 var(--display); text-transform: uppercase; margin: 0.5rem 0 1rem; }
.setup-card-intro p { margin: 0 0 1rem; }
.setup-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
.recipe { margin: 0; padding: 0; list-style: none; counter-reset: r; display: grid; gap: 0.85rem; }
.recipe li { counter-increment: r; display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.5rem; }
.recipe li::before {
  content: counter(r); font: 600 0.8rem/1 var(--mono);
  width: 1.7rem; height: 1.7rem; display: grid; place-items: center;
  border: 1px solid var(--night-line); border-radius: 50%; color: var(--sauce);
}
.recipe b { font-weight: 600; }
code, .code {
  font: 500 0.82em/1.4 var(--mono);
  background: var(--night); border: 1px solid var(--night-line);
  padding: 0.1rem 0.35rem; border-radius: 4px;
  overflow-wrap: anywhere;
}
.note {
  font: 400 0.82rem/1.5 var(--mono); color: var(--dim);
  border-left: 2px solid var(--night-line); padding-left: 0.9rem; margin: 1.25rem 0 0;
}
body[data-shortcut-url=""] [data-shortcut-link] { display: none; }
body:not([data-shortcut-url=""]) [data-shortcut-manual] { display: none; }

/* ---- documents (legal pages): cream paper on the night ground --------- */

.doc-layout {
  display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 58rem) { .doc-layout { grid-template-columns: minmax(0, 1fr); } } /* minmax: wide tables scroll inside, not the page */
.doc-toc { position: sticky; top: 1.5rem; font: 400 0.8rem/1.5 var(--mono); }
@media (max-width: 58rem) { .doc-toc { position: static; } }
.doc-toc h2 { font: 500 0.7rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin: 0 0 0.9rem; }
.doc-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
.doc-toc a { text-decoration: none; color: var(--dim); }
.doc-toc a:hover { color: var(--cream); }
.doc-related { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px dashed var(--night-line); }
/* phones: the contents become one swipeable row of chips; the related links are in the footer already */
@media (max-width: 58rem) {
  .doc-layout { gap: 1.25rem; }
  .doc-toc h2, .doc-related { display: none; }
  .doc-toc ol {
    display: flex; gap: 0.45rem; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 0.2rem;
  }
  .doc-toc ol::-webkit-scrollbar { display: none; }
  .doc-toc li { flex: none; }
  .doc-toc a { display: block; padding: 0.5rem 0.75rem; border: 1px solid var(--night-line); border-radius: 999px; white-space: nowrap; }
}

.paper {
  background: var(--paper);
  color: var(--ink);
  border-radius: 2px;
  padding: clamp(1.5rem, 5vw, 3.75rem) clamp(1.25rem, 5vw, 4rem);
  box-shadow: 0 1px 0 var(--paper-shade), 0 40px 60px -30px rgba(0, 0, 0, 0.6);
  max-width: 50rem;
}
.paper a { color: var(--sauce-ink); }
.paper a:hover { color: var(--ink); }
.paper :focus-visible { outline-color: var(--sauce-ink); }
.paper code { background: var(--paper-shade); border-color: var(--rule); color: var(--ink); }
.doc-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  font: 500 0.72rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim);
  padding-bottom: 1rem; margin-bottom: 2rem; border-bottom: 2px dashed var(--rule);
}
.paper h2 {
  font: 800 1.9rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em;
  margin: 2.75rem 0 0.9rem; scroll-margin-top: 1.5rem;
}
.paper h2:first-of-type { margin-top: 0; }
.paper h3 { font: 600 0.8rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; margin: 1.75rem 0 0.5rem; }
.paper p, .paper li { max-width: var(--measure); }
.paper ul, .paper ol { padding-left: 1.2rem; }
.paper li + li { margin-top: 0.35rem; }
.paper strong { font-weight: 600; }
.summary-box {
  border: 2px solid var(--ink); border-radius: 2px; padding: 1.25rem 1.4rem; margin: 0 0 2rem;
  background: var(--paper-shade);
}
.summary-box h2 { margin-top: 0 !important; font-size: 1.4rem; }
.summary-box ul { margin: 0; }

.table-scroll { overflow-x: auto; margin: 1rem 0; }
.paper table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.95rem; }
.paper th, .paper td { text-align: left; vertical-align: top; padding: 0.65rem 0.75rem 0.65rem 0; border-bottom: 1px solid var(--rule); }
.paper th {
  font: 600 0.68rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim);
  border-bottom: 2px solid var(--ink);
}
.paper td:first-child { font-weight: 600; }
/* phones: tables wrap to the screen; only one too wide to wrap (many columns) still scrolls */
@media (max-width: 34rem) {
  .paper table { min-width: 0; font-size: 0.86rem; }
  .paper th, .paper td { padding-right: 0.5rem; overflow-wrap: break-word; }
}

.status-code {
  display: inline-block; font: 600 1.05rem/1.2 var(--mono); letter-spacing: 0.04em;
  background: var(--paper-shade); padding: 0.4rem 0.6rem; border: 1px dashed var(--ink-dim);
  overflow-wrap: anywhere;
}

/* ---- contact ------------------------------------------------------------ */

.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 60rem; }
@media (max-width: 44rem) { .contact-grid { grid-template-columns: 1fr; } }
.contact-big { font: 800 clamp(1.6rem, 4vw, 2.4rem)/1 var(--display); text-transform: uppercase; overflow-wrap: anywhere; text-decoration: none; }

/* ---- 404 ---------------------------------------------------------------- */

.lost { padding-block: clamp(4rem, 12vw, 8rem); }
.lost h1 { font-size: clamp(5rem, 22vw, 15rem); color: var(--sauce); }
.lost p { font-size: 1.25rem; max-width: 30rem; }

/* ---- the app ------------------------------------------------------------ */

.app-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; padding-block: clamp(2rem, 5vw, 3.5rem); }
@media (max-width: 60rem) { .app-shell { grid-template-columns: 1fr; } }
.app-main { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.app-head h1 { font-size: clamp(2.8rem, 7vw, 4.6rem); }
.app-head p:not(.eyebrow) { margin: 0.9rem 0 0; max-width: 34rem; color: var(--dim); }

.lookup { display: flex; gap: 0.5rem; }
@media (max-width: 34rem) { .lookup { flex-direction: column; } }
.lookup label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lookup input {
  flex: 1; min-width: 0;
  padding: 0.95rem 1rem;
  font: 400 1rem/1.2 var(--mono);
  color: var(--cream); background: var(--night-raised);
  border: 1px solid var(--night-line); border-radius: var(--radius);
}
.lookup input::placeholder { color: #7c7061; }
.lookup input:focus { outline: 2px solid var(--sauce); outline-offset: 1px; border-color: transparent; }

.msg { padding: 0.8rem 1rem; border-radius: var(--radius); font: 400 0.88rem/1.45 var(--mono); border: 1px solid var(--night-line); background: var(--night-raised); }
.msg.err { border-color: var(--sauce); color: #ff9c85; }

/* the other ways to save, as one quiet line instead of a stack of buttons */
.save-other { margin: -0.6rem 0 0; font: 400 0.8rem/1.6 var(--mono); color: var(--dim); text-align: center; }
.save-other a, .link-inline { color: var(--cream); }
.save-other .link-inline::before { content: '· '; display: inline-block; margin-right: 0.35em; color: var(--dim); text-decoration: none; }
.link-inline { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; cursor: pointer; }
.link-inline:hover { color: var(--sauce); }

/* result panel — rendered by app.js, printed as a ticket */
#result {
  background: var(--paper); color: var(--ink);
  border-radius: 2px; padding: 1.4rem clamp(1.1rem, 3vw, 1.75rem);
  font: 400 0.98rem/1.5 var(--serif);
  box-shadow: 0 40px 60px -30px rgba(0, 0, 0, 0.6);
}
#result a { color: var(--sauce-ink); }
#result .muted { color: var(--ink-dim); }
#result .small { font-size: 0.85rem; }
.detail-head { display: flex; gap: 0.9rem; align-items: flex-start; padding-bottom: 1rem; border-bottom: 2px dashed var(--rule); }
.thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 3px; flex: none; background: var(--paper-shade); }
.detail-head-text { flex: 1; min-width: 0; }
.detail-head-text p { margin: 0; }
.detail-title { font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.detail-head-text .muted { font-family: var(--mono); font-size: 0.75rem; margin-top: 0.3rem; }

#result .section { padding-block: 1rem 0; border-top: 1px dotted var(--rule); margin-top: 1rem; }
#result .section + .section { border-top: 1px dotted var(--rule); }
#result .section h3, #result details.section summary {
  font: 500 0.68rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 0.55rem;
}
#result details.section summary { cursor: pointer; list-style: none; }
#result details.section summary::-webkit-details-marker { display: none; }
#result details.section summary::before { content: '+ '; }
#result details.section[open] summary::before { content: '− '; }
#result p { margin: 0 0 0.35rem; }
.section-head { display: flex; justify-content: space-between; align-items: center; }
.section-head h3 { margin: 0 !important; }
.summary { font-style: italic; }
.transcript { white-space: pre-wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0; }
.chip { font: 400 0.78rem/1.2 var(--mono); padding: 0.3rem 0.5rem; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper-shade); }
.chip-detail { color: var(--ink-dim); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem 1rem; margin: 0.6rem 0 0; }
.facts dt { font: 500 0.64rem/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
.facts dd { margin: 0.15rem 0 0; font-size: 0.92rem; }
.place-name { font: 800 1.9rem/0.95 var(--display) !important; text-transform: uppercase; margin: 0.2rem 0 0.35rem !important; }
.stale-note { color: #8a5a12; font-family: var(--mono); font-size: 0.78rem !important; margin-top: 0.5rem !important; }

.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font: 600 0.64rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.45rem; border-radius: 3px; border: 1.5px solid currentColor; margin-bottom: 0.4rem; flex: none;
}
.badge.ok { color: #2f7652; }
.badge.warn { color: #8a5a12; }
.badge.err { color: var(--sauce-ink); }
.badge.neutral { color: var(--ink-dim); }
.detail-head .badge { margin-bottom: 0; }

.spinner { width: 0.8em; height: 0.8em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; vertical-align: -0.1em; }
@media (prefers-reduced-motion: no-preference) { .spinner { animation: spin 0.7s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }
.pending { display: flex; align-items: center; gap: 0.5rem; font: 400 0.82rem/1.3 var(--mono); color: var(--ink-dim); }

.link-btn { all: unset; cursor: pointer; font: 500 0.72rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sauce-ink); text-decoration: underline; }
.link-btn:focus-visible { outline: 2px solid var(--sauce-ink); outline-offset: 2px; }
.reviews-grid { display: grid; gap: 0.5rem; margin-top: 0.4rem; }
.review-card { display: flex; gap: 0.7rem; align-items: center; text-decoration: none; color: var(--ink) !important; padding: 0.45rem; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper-shade); }
.review-card:hover { border-color: var(--ink); }
.review-card img, .review-thumb-fallback { width: 96px; height: 54px; object-fit: cover; border-radius: 2px; flex: none; background: var(--rule); }
.review-title { margin: 0 !important; font-size: 0.9rem; font-weight: 500; overflow-wrap: anywhere; }

/* recent list */
.recent h2 { font: 500 0.72rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin: 0 0 0.9rem; }
#list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--night-line); }
#list li { border-bottom: 1px solid var(--night-line); }
#list li.empty { padding: 1rem 0; font: 400 0.82rem/1.4 var(--mono); color: var(--dim); }
.list-item { all: unset; display: block; box-sizing: border-box; width: 100%; padding: 0.8rem 0.25rem; cursor: pointer; }
.list-item:hover .title { color: var(--sauce); }
.list-item:focus-visible { outline: 2px solid var(--sauce); outline-offset: -2px; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.title { font-size: 0.92rem; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta { display: block; margin-top: 0.3rem; font: 400 0.72rem/1.3 var(--mono); color: var(--dim); overflow-wrap: anywhere; }
.tag { flex: none; font: 600 0.6rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.28rem 0.4rem; border-radius: 3px; border: 1px solid currentColor; }
.tag.enriched { color: var(--ok); }
.tag.queued { color: var(--warn); }
.tag.failed { color: #ff9c85; }
.recent .empty { color: var(--dim); }

/* ---- the core loop: verdicts, TruScore, your list --------------------- */

.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: #000; color: var(--paper); }
#result a.btn-ink, #result a.btn-ink:hover { color: var(--paper); }
/* Link-styled buttons on paper keep their own colours; `.paper a` would paint them sauce-red on ink (2:1). */
.paper a.btn-ink, .paper a.btn-ink:hover { color: var(--paper); }
.paper a.btn-sauce, .paper a.btn-sauce:hover { color: #fff; }
.paper a.btn-line { color: var(--ink); border-color: var(--rule); }
.paper a.btn-line:hover { color: var(--ink); border-color: var(--ink); }
.link-ink, .link-quiet {
  all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em;
}
.link-ink { color: var(--sauce-ink); }
.link-quiet { color: var(--dim); font: 400 0.75rem/1.4 var(--mono); }
.link-ink:focus-visible, .link-quiet:focus-visible { outline: 2px solid var(--sauce); outline-offset: 2px; }

.detail-kicker { font: 600 0.62rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sauce-ink); margin: 0 0 0.3rem !important; }
.detail-head-text .detail-title { font: 800 1.7rem/0.95 var(--display); text-transform: uppercase; -webkit-line-clamp: 2; }
.go-there { margin: 0.8rem 0 0 !important; }

/* Verdicts carry their word as well as a colour, so meaning never rides on colour alone. */
.verdicts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; margin: 0.35rem 0 0.6rem; }
@media (min-width: 34rem) { .verdicts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.verdict {
  font: 600 0.78rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.95rem 0.3rem; border: 1.5px solid currentColor; border-radius: 4px;
  background: transparent; cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease;
}
.verdict:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.verdict-worth_it { color: #2f7652; }
.verdict-hidden_gem { color: #8a5a10; }
.verdict-overhyped { color: var(--sauce-ink); }
/* Not for me sits outside the scale (it doesn't move TruScore), so it's drawn dashed. */
.verdict-not_for_me { color: var(--ink-dim); border-style: dashed; }
.verdict:hover { background: rgba(28, 21, 16, 0.06); }
.verdict-worth_it[aria-pressed="true"] { background: #2f7652; border-color: #2f7652; color: #fff; }
.verdict-hidden_gem[aria-pressed="true"] { background: #8a5a10; border-color: #8a5a10; color: #fff; }
.verdict-overhyped[aria-pressed="true"] { background: var(--sauce-ink); border-color: var(--sauce-ink); color: #fff; }
.verdict-not_for_me[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.verdicts-compact .verdict { padding: 0.7rem 0.25rem; font-size: 0.7rem; }
.yours-meta { color: var(--ink-dim); margin: 0 !important; }
#result .yours { background: var(--paper-shade); margin-inline: calc(-1 * clamp(1.1rem, 3vw, 1.75rem)); padding-inline: clamp(1.1rem, 3vw, 1.75rem); padding-bottom: 1rem; }

.truscore { display: flex; align-items: center; gap: 1rem; }
.truscore-number { font: 900 3.6rem/0.8 var(--display) !important; color: var(--sauce-ink); margin: 0 !important; font-variant-numeric: tabular-nums; }
.truscore-caption { font-weight: 600; margin: 0 0 0.2rem !important; }
.truscore-split { font: 400 0.75rem/1.4 var(--mono); color: var(--ink-dim); margin: 0 !important; }
.truscore-pending { display: flex; gap: 0.8rem; align-items: center; color: var(--ink-dim); font-size: 0.9rem; }
.truscore-dash { font: 900 2.4rem/0.8 var(--display); color: var(--rule); }

/* Did it deliver? — printed on paper, because it's a record you complete */
.due { background: var(--paper); color: var(--ink); border-radius: 2px; padding: 1.1rem clamp(1rem, 3vw, 1.4rem); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.6); }
.due-heading { font: 800 1.7rem/0.95 var(--display); text-transform: uppercase; margin: 0; }
.due-sub { margin: 0.3rem 0 0.6rem; color: var(--ink-dim); font-size: 0.92rem; }
.due-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.due-item { padding: 0.8rem 0; border-top: 1px dashed var(--rule); }
.due-name { all: unset; cursor: pointer; font: 800 1.25rem/1 var(--display); text-transform: uppercase; }
.due-name:hover { color: var(--sauce-ink); }
.due-name:focus-visible { outline: 2px solid var(--sauce-ink); outline-offset: 2px; }
.due-meta { margin: 0.2rem 0 0; font: 400 0.72rem/1.3 var(--mono); color: var(--ink-dim); }
.due .link-quiet { color: var(--ink-dim); }

.list-tabs { display: flex; gap: 1.25rem; margin: 0 0 0.6rem; border-bottom: 1px solid var(--night-line); }
.list-tab {
  all: unset; cursor: pointer; padding: 0.5rem 0; margin-bottom: -1px;
  font: 500 0.75rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
  border-bottom: 2px solid transparent;
}
.list-tab span { color: var(--dim); margin-left: 0.25rem; }
.list-tab[aria-selected="true"] { color: var(--cream); border-bottom-color: var(--sauce); }
.list-tab:focus-visible { outline: 2px solid var(--sauce); outline-offset: 2px; }
.list-fine { margin: 1rem 0 0; font: 400 0.72rem/1.5 var(--mono); color: var(--dim); }
.tag.verdict-tag-worth_it { color: var(--ok); }
.tag.verdict-tag-hidden_gem { color: var(--warn); }
.tag.verdict-tag-overhyped { color: #ff9c85; }
.tag.verdict-tag-not_for_me { color: var(--dim); }
.tag.score-tag { color: var(--cream); }

.reminder-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding: 1rem; border: 1px dashed var(--sauce); border-radius: var(--radius); }
.reminder-title { margin: 0; font: 700 1.2rem/1 var(--display); text-transform: uppercase; }
.reminder-body { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--dim); }

.toast {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 20;
  max-width: min(28rem, calc(100% - 2rem)); padding: 0.75rem 1rem;
  background: var(--paper); color: var(--ink); border-radius: 4px;
  font: 500 0.82rem/1.4 var(--mono); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.dialog-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
dialog .muted { color: var(--dim); }

/* Google reviews: attribution per Google Maps Platform policy — author avatar,
   name and profile link on every review, a link to it on Google Maps, and the
   text "Google Maps" (sans-serif, weight 400, not re-cased, not wrapped). */
.g-attribution {
  font: 400 13px/1 Roboto, 'Helvetica Neue', Arial, sans-serif; color: #5e5e5e;
  text-transform: none; letter-spacing: 0; white-space: nowrap;
}
.g-reviews { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.g-review { background: var(--paper-shade); border: 1px solid var(--rule); border-radius: 3px; padding: 0.75rem; }
.g-review-head { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.4rem; }
.g-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; background: var(--rule); }
.g-avatar-empty { display: inline-block; }
.g-author { margin: 0 !important; font-weight: 600; }
.g-author a { color: var(--ink) !important; }
.g-mentions { font-family: var(--mono); color: #2f7652; margin: 0 0 0.3rem !important; }
.g-text { margin: 0 0 0.3rem !important; font-size: 0.93rem; }
.g-notice { color: var(--ink-dim); font-family: var(--mono); margin-top: 0.5rem !important; }

.shortcut-key { margin-top: 1.25rem; }
.shortcut-key-value { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.shortcut-key-value code { font-size: 0.95rem; padding: 0.55rem 0.7rem; user-select: all; }

/* "Paste and save": the one-tap path after Share → Copy link */
.clip-btn { width: 100%; justify-content: center; margin-top: -0.75rem; padding-block: 1rem; border-color: var(--sauce); }

/* WhatsApp and Instagram: each only shown once configured on the server; the
   home page's Instagram card makes way for WhatsApp once that's on, keeping
   three ways in rather than four. */
body[data-whatsapp="off"] [data-whatsapp-only] { display: none !important; }
body[data-whatsapp="on"] [data-whatsapp-hidden] { display: none !important; }
body[data-instagram="off"] [data-instagram-only] { display: none !important; }
.setup-featured { border-color: var(--sauce); }
.pill-easy { color: var(--ok); margin-left: 0.4rem; }
.link-form { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }

/* ---- Sign in ------------------------------------------------------------ */
body[data-signed-in="yes"] .signed-out-only, body[data-signed-in="no"] .signed-in-only { display: none !important; }

.auth-head { padding-bottom: clamp(1.25rem, 3vw, 2rem); }
.auth-wrap { display: flex; flex-direction: column; gap: 1.5rem; padding-bottom: clamp(3rem, 8vw, 5rem); }
.auth-wrap > * { max-width: 52rem; }
.auth-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.auth-form {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  border: 1px solid var(--night-line); border-radius: var(--radius); background: var(--night-raised);
}
.auth-form-single { max-width: 26rem; }
.auth-form h2 { font: 700 1.5rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 0.5rem; }
.auth-form label { font: 500 0.72rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-top: 0.4rem; }
.auth-hint { text-transform: none; letter-spacing: 0; color: #7c7061; }
.auth-form input {
  padding: 0.85rem 0.95rem; font: 400 1rem/1.2 var(--mono);
  color: var(--cream); background: var(--night); border: 1px solid var(--night-line); border-radius: var(--radius);
}
.auth-form input:focus { outline: 2px solid var(--sauce); outline-offset: 1px; border-color: transparent; }
.auth-form .btn { margin-top: 0.75rem; justify-content: center; }
.auth-small { align-self: flex-start; margin-top: 0.4rem; font: 400 0.8rem/1.4 var(--mono); color: var(--dim); }
.auth-small:hover { color: var(--cream); }

.btn-google { gap: 0.7rem; justify-content: center; background: #fff; color: #1f1f1f; border-color: #dadce0; text-transform: none; letter-spacing: 0; font-family: Roboto, Arial, sans-serif; font-weight: 500; }
.btn-google:hover { background: #f5f5f5; color: #1f1f1f; }
.auth-wrap > .btn-google { align-self: flex-start; min-width: min(100%, 19rem); }
.g-mark { flex: none; }

.auth-or { display: flex; align-items: center; gap: 0.75rem; margin: 0; font: 500 0.7rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.auth-or::before, .auth-or::after { content: ''; flex: 1; border-top: 1px solid var(--night-line); }

.auth-notice { margin: 0; padding: 0.75rem 0.95rem; border-radius: var(--radius); border: 1px solid var(--night-line); font: 400 0.85rem/1.45 var(--mono); }
.auth-notice-error { border-color: var(--sauce); color: #ff9c85; }
.auth-notice-info { color: var(--cream); background: var(--night-raised); }
.auth-fine { margin: 0; font: 400 0.78rem/1.5 var(--mono); color: var(--dim); }
.auth-fine a { color: var(--cream); }
/* On paper the night-page colours vanish (cream links on cream, 2.4:1 grey): use the paper palette. */
.paper .auth-fine { color: var(--ink-dim); }
.paper .auth-fine a { color: var(--sauce-ink); }

.auth-section { font: 600 0.75rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sauce); margin: 0 0 0.75rem; }
.auth-methods { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--night-line); }
.auth-methods li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--night-line); }
.auth-method { margin: 0; font: 700 1.2rem/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.auth-address { margin: 0.2rem 0 0; font: 400 0.85rem/1.3 var(--mono); color: var(--dim); overflow-wrap: anywhere; }
.auth-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.auth-pill { font: 600 0.66rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35rem 0.5rem; border-radius: 999px; border: 1px solid currentColor; }
.auth-pill-ok { color: var(--ok); }
.auth-pill-warn { color: var(--warn); }
.auth-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.auth-inline { display: inline; margin: 0; }
.auth-link { background: none; border: 0; padding: 0; font: 400 0.8rem/1.4 var(--mono); color: var(--cream); text-decoration: underline; cursor: pointer; }

.auth-who { display: flex; align-items: center; gap: clamp(0.9rem, 3vw, 1.5rem); }
.auth-who h1 { margin: 0; }
.auth-who p { margin: 0.6rem 0 0 !important; }
.auth-avatar { flex: none; width: clamp(3rem, 9vw, 4.5rem); height: clamp(3rem, 9vw, 4.5rem); border-radius: 50%; object-fit: cover; border: 2px solid var(--night-line); background: var(--night-raised); }
.auth-avatar-initial { display: grid; place-items: center; font: 800 clamp(1.5rem, 5vw, 2.2rem)/1 var(--display); color: var(--sauce); }
.auth-embedded p { margin: 0; }
.auth-embedded p + p { margin-top: 0.5rem; color: var(--dim); }
.auth-method .auth-pill { vertical-align: middle; margin-left: 0.4rem; }
.auth-danger { padding-top: 1.5rem; border-top: 1px dashed var(--night-line); }
.auth-danger .auth-form { margin-top: 1rem; }

/* ---- guides, FAQ, methodology --------------------------------------------- */
.page-head .eyebrow a { color: inherit; text-decoration: none; }
.page-head .eyebrow a:hover { color: var(--cream); }
.page-head .byline { font: 400 0.78rem/1.5 var(--mono); color: var(--dim); font-size: 0.78rem !important; margin-top: 1rem !important; }
.quick-answer p { margin: 0; max-width: none; }
.faq-item + .faq-item { margin-top: 0.25rem; }
.faq-item h3 { text-transform: none; letter-spacing: 0; font: 600 1.05rem/1.35 var(--serif); margin: 1.5rem 0 0.4rem; }
.faq-item p { margin: 0 0 0.6rem; }
.howto-steps { list-style: none; padding: 0 !important; counter-reset: step; }
.howto-steps > li { counter-increment: step; position: relative; padding-left: 2.6rem; margin-top: 1.4rem; }
.howto-steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0.05rem;
  width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--ink); color: var(--paper); font: 600 0.8rem/1 var(--mono);
}
.howto-steps h3 { margin: 0 0 0.35rem !important; font: 600 1.05rem/1.35 var(--serif) !important; text-transform: none !important; letter-spacing: 0 !important; }
.howto-steps p { margin: 0 0 0.5rem; }
.formula { font: 500 0.95rem/1.5 var(--mono); background: var(--paper-shade); border: 1px dashed var(--rule); padding: 0.75rem 0.9rem; border-radius: 3px; overflow-x: auto; }
.muted-note { color: var(--ink-dim); font-weight: 400; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; padding-bottom: 1.5rem; }
.guide-card h2 { font: 800 1.7rem/1 var(--display); text-transform: uppercase; margin: 0; }
.guide-card h2 a { color: var(--cream); text-decoration: none; }
.guide-card h2 a:hover { color: var(--sauce); }
.guide-card h2 a::after { content: ''; position: absolute; inset: 0; }
.guide-card { position: relative; }
.guide-card:hover { border-color: var(--sauce); }
.guide-also { padding-bottom: 2rem; font: 400 0.85rem/1.5 var(--mono); color: var(--dim); }
.guide-also a { color: var(--cream); }

/* ---- "Tonight": one pick from the list ---------------------------------- */
.tonight {
  background: var(--paper); color: var(--ink); border-radius: 2px;
  padding: 1.25rem 1.4rem; margin-bottom: 1.5rem;
  box-shadow: 0 1px 0 var(--paper-shade), 0 20px 30px -22px rgba(0, 0, 0, 0.6);
}
.tonight-eyebrow {
  margin: 0 0 0.35rem; font: 600 0.7rem/1 var(--mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sauce-ink);
}
.tonight-name {
  display: block; width: 100%; text-align: left; margin: 0 0 0.3rem;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink);
  font: 700 1.35rem/1.15 var(--display); text-transform: uppercase;
}
.tonight-name:hover { color: var(--sauce-ink); }
.tonight-reason { margin: 0 0 1rem; font: 400 0.95rem/1.5 var(--serif); color: var(--ink-dim); }
.tonight-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.tonight-actions .link-quiet { color: var(--ink-dim); }
.tonight-actions .link-quiet:hover { color: var(--ink); }

/* ---- admin console ------------------------------------------------------ */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.admin-head { padding-bottom: 1rem; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; font: 500 0.8rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
.admin-nav a { color: var(--dim); text-decoration: none; }
.admin-nav a[aria-current="page"], .admin-nav a:hover { color: var(--cream); }
.admin-wrap { display: flex; flex-direction: column; gap: 1.25rem; padding-bottom: 4rem; }
.admin-card h2 { font: 700 1.3rem/1.2 var(--display); text-transform: uppercase; margin: 0 0 0.75rem; }
.admin-facts { display: grid; gap: 0.35rem; margin: 0 0 1rem; }
.admin-facts div { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: 0.75rem; }
@media (max-width: 34rem) { .admin-facts div { grid-template-columns: 1fr; gap: 0; } }
.admin-facts dt { font: 600 0.72rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.admin-facts dd { margin: 0; overflow-wrap: anywhere; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; margin-top: 1rem; }
.admin-inline, .admin-search { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.admin-inline input, .admin-search input { font: 400 0.9rem/1.2 var(--mono); padding: 0.6rem 0.7rem; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; color: var(--ink); min-width: min(100%, 16rem); }
.admin-actions .btn { padding: 0.6rem 0.8rem; font-size: 0.72rem; }
.admin-card .btn-line { color: var(--ink); border-color: var(--rule); }
.admin-card .btn-line:hover { color: var(--ink); border-color: var(--ink); }
.admin-feedback { margin: 0.5rem 0; padding-left: 1.1rem; font-size: 0.9rem; }
.admin-results { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.admin-result .btn-line { color: var(--ink); }
.admin-section { font: 600 0.75rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sauce); margin: 1rem 0 0.5rem; }
.admin-filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; padding: 1rem 1.2rem; }
.admin-filter { display: grid; gap: 0.25rem; }
.admin-filter span { font: 600 0.68rem/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); }
.admin-filter input, .admin-filter select {
  font: 400 0.9rem/1.2 var(--mono); padding: 0.5rem 0.6rem; border: 1px solid var(--rule);
  border-radius: var(--radius); background: #fff; color: var(--ink); min-width: 9rem;
}
/* On paper, a .btn-line button needs the ink colour spelled out — only anchors get it
   from the .paper rules, so a <button> here would be cream on cream (the audit's bug). */
.admin-filters .btn { padding: 0.55rem 0.8rem; font-size: 0.72rem; }
.admin-filters .btn-line { color: var(--ink); border-color: var(--rule); }
.admin-filters .btn-line:hover { color: var(--ink); border-color: var(--ink); }
.admin-guide { margin-bottom: 0.25rem; }
.admin-guide summary { cursor: pointer; list-style: none; font: 700 1rem/1.2 var(--display); text-transform: uppercase; }
.admin-guide summary::-webkit-details-marker { display: none; }
.admin-guide summary::before { content: '+ '; }
.admin-guide[open] summary::before { content: '− '; }
.admin-guide[open] summary { margin-bottom: 1rem; }
.admin-guide h3:first-of-type { margin-top: 1.5rem; }
.admin-guide .admin-facts dd { color: var(--ink-dim); }

/* ---- place feedback and multi-place posts ------------------------------- */
.also-here { margin-top: 1rem; }
.also-here p { margin: 0; }
.also-here ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.place-feedback { margin-top: 0.75rem; }
.place-feedback summary { cursor: pointer; color: var(--ink-dim); text-decoration: underline; width: fit-content; }
.feedback-form { display: grid; gap: 0.45rem; margin-top: 0.6rem; max-width: 24rem; }
.feedback-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.feedback-form input[type="text"], .feedback-form input:not([type]) { font: 400 0.95rem/1.2 var(--mono); padding: 0.6rem 0.7rem; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; color: var(--ink); }
.feedback-form .btn { justify-self: start; }

/* ---- public Rec and area pages ------------------------------------------ */
.rec-page h2 { font: 700 1.1rem/1.2 var(--display); text-transform: uppercase; margin: 1.25rem 0 0.4rem; }
.rec-page .truscore-number { margin: 0 0 0.5rem; }
.rec-page .auth-actions .btn-line { color: var(--ink); border-color: var(--rule); }
.area-list { list-style: none; padding-left: clamp(1.1rem, 3vw, 2rem); display: grid; gap: 0.75rem; }
.area-list li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; }
.eyebrow a { color: inherit; }

/* ---- admin: at a glance (lib/admin/overview.js) ------------------------------ */
/* Every state is written as a word (OK / Check / Act) as well as coloured. */
.glance { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); gap: 0.75rem; }
.glance-tile {
  display: flex; flex-direction: column; gap: 0.3rem; padding: 0.9rem 1rem 1rem;
  background: var(--night-raised); border: 1px solid var(--night-line); border-left: 4px solid var(--state, var(--night-line));
  border-radius: var(--radius); color: var(--cream); text-decoration: none;
}
a.glance-tile:hover { border-color: var(--state); }
a.glance-tile:focus-visible { outline: 2px solid var(--sauce); outline-offset: 2px; }
.glance-tile.is-ok { --state: var(--ok); }
.glance-tile.is-warn { --state: var(--warn); }
.glance-tile.is-bad { --state: #ff7a61; }
.glance-top { display: flex; justify-content: space-between; gap: 0.5rem; font: 600 0.66rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.glance-label { color: var(--dim); }
.glance-state { color: var(--state); }
.glance-value { font: 800 1.6rem/1 var(--display); text-transform: uppercase; }
.glance-detail { font: 400 0.75rem/1.45 var(--mono); color: var(--dim); overflow-wrap: anywhere; }
.glance-detail b { color: #ff9c85; font-weight: 600; }

.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: 0.75rem; margin: 0; }
.kpi { padding: 0.8rem 0.9rem; border-top: 2px solid var(--night-line); }
.kpi dt { font: 600 0.66rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.kpi dd { margin: 0.3rem 0 0; font: 800 2rem/1 var(--display); font-variant-numeric: tabular-nums; }
.kpi dd a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.kpi-note { margin: 0.3rem 0 0; font: 400 0.72rem/1.4 var(--mono); color: var(--dim); }

.sparks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)); gap: 0.75rem; }
.spark { margin: 0; padding: 0.9rem 1rem 0.7rem; max-width: none; }
.spark-wide { margin-top: 0.75rem; }
.spark figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; font: 600 0.68rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.spark figcaption b { font: 800 1.3rem/1 var(--display); color: var(--ink); letter-spacing: 0; }
.bars { display: block; width: 100%; height: 3.5rem; }
.bar { fill: var(--sauce-ink); }
.bar-hot { fill: #d11f00; }
.bar-zero { fill: var(--rule); }
.bar:hover { fill: var(--ink); }
.spark-axis { display: flex; justify-content: space-between; margin: 0.3rem 0 0 !important; font: 400 0.64rem/1 var(--mono); color: var(--ink-dim); max-width: none !important; }

.admin-wrap .paper { max-width: none; }
.admin-wrap .table-scroll.paper { padding: 0.5rem 1rem; margin: 0; }
.admin-table { font-size: 0.85rem !important; }
.admin-table td, .admin-table th { padding: 0.5rem 0.75rem 0.5rem 0 !important; }
.admin-table td:first-child { font-weight: 400; }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table tbody th { font: 600 0.85rem/1.4 var(--mono); letter-spacing: 0; text-transform: none; color: var(--ink); border-bottom: 1px solid var(--rule); }
.admin-table-compact { min-width: 0 !important; }
.admin-wrap .admin-facts.paper { padding: 1.1rem 1.25rem; }
.admin-table code { font-size: 0.72rem; overflow-wrap: anywhere; }
.mono { font-family: var(--mono); }
.is-bad-text { color: #b3200b; font-weight: 600; }
.admin-line { padding: 0.8rem 1rem; margin: 0; font: 400 0.85rem/1.5 var(--mono); }
.admin-notice { padding: 0.7rem 1rem; margin: 0; font: 600 0.85rem/1.4 var(--mono); border-left: 4px solid var(--ok); }

.people-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 0 1.25rem; align-items: start; }
.people-funnel { list-style: none; margin: 0; padding: 1rem 1.2rem; display: grid; gap: 0.6rem; }
.people-funnel li { display: grid; grid-template-columns: 8.5rem 1fr auto; gap: 0.75rem; align-items: center; margin: 0 !important; max-width: none !important; }
.pf-label { font: 600 0.72rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-dim); }
.pf-bar { width: 100%; height: 0.75rem; }
.pf-track { fill: var(--paper-shade); }
.pf-fill { fill: var(--sauce-ink); }
.pf-n { font: 700 1rem/1 var(--mono); font-variant-numeric: tabular-nums; }
.pf-n small { font-weight: 400; color: var(--ink-dim); }

.cohort { text-align: right; font-variant-numeric: tabular-nums; }
.cohort.h0 { color: var(--ink-dim); }
.cohort.h1 { background: #f3dccf; }
.cohort.h2 { background: #eab9a3; }
.cohort.h3 { background: #dc8b6c; }
.cohort.h4 { background: var(--sauce-ink); color: #fff; font-weight: 600; }
.cohort-na { text-align: right; color: var(--rule); }

.flag { display: inline-block; font: 600 0.62rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.35rem; border-radius: 3px; border: 1px solid currentColor; }
.flag-warn { color: #8a5a10; }
.flag-bad { color: #b3200b; }
.paper .tag.verdict-tag-worth_it { color: #2f7652; }
.paper .tag.verdict-tag-hidden_gem { color: #8a5a10; }
.paper .tag.verdict-tag-not_for_me { color: var(--ink-dim); }
.paper .tag.verdict-tag-overhyped { color: var(--sauce-ink); }

.pager { display: flex; justify-content: space-between; align-items: center; font: 500 0.8rem/1 var(--mono); color: var(--dim); }
.pager a { color: var(--cream); }
.admin-danger { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--rule); }
.btn-danger { background: #b3200b; color: #fff; }
.btn-danger:hover { background: #7f1606; color: #fff; }

/* ---- About you (lib/accounts/auth-routes.js → aboutPage) ------------------- */
.about-form { max-width: 36rem; }
.auth-form select {
  padding: 0.85rem 0.95rem; font: 400 1rem/1.2 var(--mono);
  color: var(--cream); background: var(--night); border: 1px solid var(--night-line); border-radius: var(--radius);
}
.auth-form select:focus { outline: 2px solid var(--sauce); outline-offset: 1px; border-color: transparent; }
.auth-form input[aria-invalid="true"] { border-color: var(--sauce); }
.auth-field-error { margin: 0; font: 400 0.8rem/1.4 var(--mono); color: #ff9c85; }
.about-choices { border: 0; margin: 0.9rem 0 0; padding: 0; min-width: 0; }
.about-choices legend { padding: 0; font: 500 0.72rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.about-choices .auth-hint { margin: 0.25rem 0 0.5rem; font: 400 0.78rem/1.4 var(--mono); }
.about-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.auth-form .about-chip { position: relative; margin: 0; font: 400 0.85rem/1 var(--mono); letter-spacing: 0; text-transform: none; color: var(--cream); cursor: pointer; }
.about-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.about-chip span { display: inline-block; padding: 0.55rem 0.75rem; border: 1px solid var(--night-line); border-radius: 999px; }
.about-chip input:checked + span { background: var(--sauce-button); border-color: var(--sauce-button); color: #fff; }
.about-chip input:checked + span::before { content: '✓ '; }
.about-chip input:focus-visible + span { outline: 2px solid var(--sauce); outline-offset: 2px; }
.about-chip:hover span { border-color: var(--dim); }
.about-summary { display: grid; gap: 0.35rem; margin: 0 0 0.75rem; }
.about-summary div { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr; gap: 0.75rem; }
.about-summary dt { font: 500 0.72rem/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.about-summary dd { margin: 0; overflow-wrap: anywhere; }
.people-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.admin-sub { font: 600 0.7rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin: 0 0 0.4rem; }
.admin-contact { font-size: 0.8rem !important; overflow-wrap: anywhere; }
.muted-link { color: var(--ink-dim) !important; }