/* zuvor.io. teka's system as the app wears it (docs/site.md section 2). The tokens are boards/tools/gen.py's, never
   re-invented here. One look: no dark mode, no gradients, no off-white, no cards. */

@font-face { font-family: "Apfel Grotezk"; font-weight: 400; font-display: swap; src: url("/fonts/ApfelGrotezk-Regular.woff2") format("woff2"); }
@font-face { font-family: "Apfel Grotezk"; font-weight: 500; font-display: swap; src: url("/fonts/ApfelGrotezk-Mittel.woff2") format("woff2"); }
@font-face { font-family: "Apfel Grotezk"; font-weight: 700; font-display: swap; src: url("/fonts/ApfelGrotezk-Fett.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #171717;
  --ink-2: #666666;
  --ink-3: #737373;
  --hair: #e6e6e6;
  --raised: #f2f2f2;
  --link: #0068d6; /* not used for links, which are ink and underlined. Kept so the token set matches the app */
  --glass-shadow: 0 0 0 .5px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.8), 0 2px 10px rgba(0,0,0,.06);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  /* 17, not the boards' 16: iOS's reading size, and the site is read on a phone first */
  font: 400 17px/24px "Apfel Grotezk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
a:active { background: var(--raised); }
p { margin: 0; }
p + p, p + .rows, .rows + p { margin-top: 12px; }

/* one column, 16px gutters on a phone and 24px from 600px up */
.top, main, footer { max-width: 40rem; margin: 0 auto; padding: 0 16px; }
@media (min-width: 600px) { .top, main, footer { padding: 0 24px; } }

.top { height: 56px; display: flex; align-items: center; justify-content: space-between; }
.mark { font-size: 24px; line-height: 24px; font-weight: 700; letter-spacing: -0.03em; text-decoration: none; }
.top nav a, footer a { min-height: 44px; display: inline-flex; align-items: center; }
.top nav { display: flex; gap: 16px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-3); }

/* sections are separated by a hairline with 32px either side */
main > section { padding: 32px 0; }
main > section + section { border-top: 1px solid var(--hair); }

/* the index headline: subject in 40 Fett, the count beside it in 40 Regular grey, never wrapping alone */
.index { margin: 0; font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.03em; }
.index + .index { margin-top: 4px; }
.index .n { font-weight: 400; color: var(--ink-3); }
.nw { white-space: nowrap; }
.nw .n { margin-left: 12px; }
h1.index { margin-bottom: 16px; }
h2 { margin: 32px 0 12px; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
section > h2:first-child { margin-top: 0; }

.lead { color: var(--ink-2); }
.sub, .reason { font-size: 15px; line-height: 20px; color: var(--ink-2); }
.label, .date, footer { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-3); }
.index + .sub { margin-top: 12px; }

/* an example of what the app says, set apart by a hairline so it never reads as a status about the visitor */
.example { margin: 16px 0; padding: 0 0 0 16px; border-left: 2px solid var(--hair); color: var(--ink-2); }

/* a line led by the zuvor square, as on the app's home */
.checked { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
.checked img { width: 20px; height: 20px; flex: none; }

/* the app's list rows: a 32px circle, the name in 15/20 Fett, the reason under it. No borders, no columns */
.rows { list-style: none; margin: 16px 0 0; padding: 0; }
.rows li { display: flex; gap: 12px; padding: 10px 0; align-items: flex-start; }
.rows svg { flex: none; display: block; width: 32px; height: 32px; }
.rows .name { display: block; font-size: 15px; line-height: 20px; font-weight: 700; }
.rows .reason { display: block; }

/* the one control. In the flow it is the App Store badge or, before launch, gen.py's PRIMARY pill */
.cta { margin-top: 16px; }
.badge { display: inline-block; line-height: 0; }
.badge img { height: 40px; width: auto; }
.pill {
  display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 24px;
  border-radius: 999px; background: var(--ink); color: #fff; font-size: 17px; font-weight: 700; text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.14);
}
.pill:active { background: var(--ink); opacity: .85; }

/* On a phone the same link floats in a glass bar, the way the app's tab bar floats over its content. CSS only */
.bar { display: none; }
@media (max-width: 599px) {
  .bar {
    display: flex; position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); justify-content: center;
    margin: 0 auto; width: max-content; padding: 3px 18px; height: 44px; align-items: center; border-radius: 999px;
    background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: var(--glass-shadow); font-weight: 700; text-decoration: none;
  }
}

ul.plain { margin: 12px 0 0; padding-left: 20px; }
ul.plain li + li { margin-top: 6px; }
dl { margin: 12px 0 0; }
dt { font-weight: 700; margin-top: 16px; }
dt:first-child { margin-top: 0; }
dd { margin: 0; }
dd .en { color: var(--ink-2); }

footer { padding-top: 24px; padding-bottom: calc(32px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); }
footer p { display: flex; flex-wrap: wrap; column-gap: 16px; align-items: center; }

/* ── the friend link (site/friends.mjs, docs/friends.md). Forms post, so their buttons wear the link or the pill ── */
button { font: inherit; color: inherit; }
button.link, button.door { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
button.link { min-height: 44px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
button.pill { border: 0; cursor: pointer; }
form { margin: 0; }
.back { margin-bottom: 16px; font-size: 15px; line-height: 20px; font-weight: 500; }
.back a { min-height: 44px; display: inline-flex; align-items: center; }
.big { margin-top: 24px; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.big + .lead { margin-top: 8px; }
.foot { margin-top: 24px; font-size: 15px; line-height: 20px; }
.error { margin-top: 12px; font-weight: 500; }

/* the doors and setting rows: a label with its count, a line under it, a chevron. No borders (docs/site.md 2.3) */
.doors { display: flex; flex-direction: column; margin-top: 16px; }
.door { min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 8px 0; width: 100%; text-decoration: none; }
.door > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.door::after { content: "›"; color: var(--ink-3); font-size: 22px; line-height: 22px; }
.door-label { font-size: 17px; line-height: 22px; font-weight: 700; }
.door-label .n { margin-left: 4px; font-weight: 400; color: var(--ink-3); }

/* M1's best fit, large: the circle, the label, the title, the reason as a sentence */
.best { margin-top: 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; text-decoration: none; }
.best svg { width: 56px; height: 56px; margin-bottom: 4px; }
.best .company { font-size: 15px; line-height: 20px; font-weight: 700; }
.best-title { font-size: 17px; line-height: 22px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* the live element: the square, a label, a count, the hairline that fills in tenths, a sentence. The square breathes
   only while something runs, and never for someone who asked for less motion */
.live-head { display: flex; align-items: center; gap: 10px; }
.live-head img, .checked img { width: 20px; height: 20px; flex: none; }
.live-label { font-size: 15px; line-height: 20px; font-weight: 500; }
.live-count { flex: 1; text-align: right; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.hair { display: block; height: 1px; margin: 10px 0; background: var(--hair); position: relative; }
.hair::after { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--ink); }
.read-1::after { width: 10%; } .read-2::after { width: 20%; } .read-3::after { width: 30%; } .read-4::after { width: 40%; } .read-5::after { width: 50%; }
.read-6::after { width: 60%; } .read-7::after { width: 70%; } .read-8::after { width: 80%; } .read-9::after { width: 90%; } .read-10::after { width: 100%; }
.checked.live { font-size: 13px; line-height: 18px; color: var(--ink-3); align-items: flex-start; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.live.running img { animation: breathe 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .live.running img { animation: none; } }

/* the walk: one idea a screen, the picture, the headline, two lines, the dots, Next */
.walk { min-height: calc(100svh - 56px); display: flex; flex-direction: column; }
main > section.walk { padding: 0 0 16px; } /* inside the min-height, so Next stands above the fold */
.hero { padding: 24px 0; }
.hero-head { font-size: 34px; line-height: 38px; font-weight: 700; letter-spacing: -0.03em; }
.hero-head .n { font-weight: 400; color: var(--ink-3); }
.walk-title { margin: 8px 0 8px; font-size: 30px; line-height: 34px; font-weight: 700; letter-spacing: -0.02em; }
.dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.dots span { width: 7px; height: 7px; border-radius: 999px; background: #d4d4d4; }
.dots span.on { background: var(--ink); }
.walk-nav { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 15px; }
.walk-nav .pill, .walk-nav form, .walk-nav form .pill { width: 100%; }
.walk-nav a:not(.pill) { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink-3); }
.walk-nav button.link { color: var(--ink-3); }

/* the posting and the floating pair: Pass in glass, Shortlist the pill. On a phone it floats like .bar */
.who { display: flex; align-items: center; gap: 12px; }
.who svg { width: 40px; height: 40px; flex: none; }
.who > span { display: flex; flex-direction: column; }
.who .name { font-size: 15px; line-height: 20px; font-weight: 700; }
h1.title { margin: 16px 0 0; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
h1.title + .label { margin-top: 8px; }
.posting > p:not(.back):not(.who):not(.label) { font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
/* a white ground and a hairline, so the label and the glass Pass never sit on the text scrolling under them */
.pair { margin-top: 32px; padding: 12px 0 8px; border-top: 1px solid var(--hair); background: var(--paper); display: flex; flex-direction: column; gap: 10px; }
.pair .label { text-align: center; }
.pair > div { display: flex; gap: 10px; }
.pair form { flex: 1; }
.pair button { width: 100%; height: 50px; border-radius: 999px; font-size: 17px; font-weight: 700; }
button.glass { border: 0; cursor: pointer; background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: var(--glass-shadow); }
@media (max-width: 599px) { .pair { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); } }

/* the toast after Pass or Shortlist (decision 44): flat, one line, Undo as a link */
.toast { margin-top: 16px; display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 20px; }
.toast > span { flex: 1; }

/* the filters: a field on raised grey, the chips as labels around a checkbox or a radio */
.field { min-height: 56px; padding: 9px 14px; border-radius: 10px; background: var(--raised); display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.field .label { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--ink-2); }
.field input, .field select { margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 16px; line-height: 22px; color: var(--ink); width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { display: inline-flex; position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span, span.chip { height: 36px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 500; cursor: pointer;
  background: var(--raised); }
.chip input:checked + span, span.chip.on { background: var(--ink); color: #fff; }
span.chip.static { cursor: default; } /* walk 3's settings, a list and not toggles */
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.actions { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 15px; font-weight: 500; }
.actions .pill { align-self: stretch; }