/* Design tokens (DESIGN.md §2). */
:root {
  --paper: #F4F0E6;
  --card: #FFFDF7;
  --ink: #1C1A15;
  --ink-2: #4A443A;
  --muted: #625B4E;
  --line: #E2DBCB;
  --line-soft: #EFE9DC;
  --line-strong: #CFC6B2;
  --sand: #E8E1D1;
  --dot-empty: #A79D88;
  --dash: #BDB4A1;
  --track: #D8D0BE;

  --yes: #15603E;
  --yes-deep: #0F4A2F;
  --yes-tint: #E6F2E8;
  --yes-halo: #DCEEDF;
  --yes-fill: #CFE5D4;
  --yes-line: #B9D6C3;

  --no: #B5461B;
  --no-text: #9A3A14;
  --no-deep: #7A2E0E;
  --no-tint: #FBEBDD;
  --no-fill: #F7E1D5;
  --no-line: #EBC4B0;
  --no-hatch: #E9A987;
  --ink-raised: #3A362E;

  --accent: #F2C14E;
  --accent-halo: #FBEFC9;
  --set-b: #2F55B8;
  --overlay: rgba(28, 26, 21, .6);

  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --shadow-bar: 0 8px 24px rgba(28, 26, 21, .18);
}

*, *::before, *::after { box-sizing: border-box; }

/* Keep room for the scrollbar so pages don't shift sideways when it appears. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: var(--ink); }
a:hover { color: var(--yes); }
svg { flex-shrink: 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.disp { font-family: var(--font-display); }
.caps { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.muted { color: var(--muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Single-column screens (Home, Join, New activity, …). */
.screen {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 12px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* The main action of a long step stays in reach at the bottom of the screen.
   Must be a direct child of .screen so it can stick along the whole page. */
.sticky-cta {
  position: sticky;
  bottom: 12px;
  z-index: 4;
  box-shadow: var(--shadow-bar);
}

/* Sign-in and account screens: a 420 px column. */
.screen.narrow { max-width: 420px; }

.page-title {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.02em;
}

.section-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; }

/* Buttons */
.btn {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  color: var(--ink);
}
.btn:hover { color: inherit; }
.btn-lg { min-height: 56px; border-radius: 16px; font-size: 17px; width: 100%; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { color: var(--paper); }
.btn-save { background: var(--yes); color: var(--card); }
.btn-save:hover { color: var(--card); }
.btn-ink:disabled, .btn-save:disabled { background: var(--dot-empty); color: var(--card); }
.btn-outline { background: var(--card); border: 1px solid var(--line-strong); }
.btn-dashed {
  min-height: 52px;
  border-radius: 16px;
  border: 1.5px dashed var(--dash);
  background: transparent;
  width: 100%;
}
.btn-text { padding: 0 4px; font-weight: 400; color: var(--ink-2); }
.btn-text:hover { color: var(--ink); }
.btn-underline { text-decoration: underline; }

.icon-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  padding: 0;
}

/* Surfaces */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.list-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.list-card > * + * { border-top: 1px solid var(--line-soft); }

/* Inputs */
.field { display: flex; flex-direction: column; gap: 8px; }
.field > label { font-size: 15px; font-weight: 600; }
.input {
  min-height: 52px;
  width: 100%;
  padding: 0 16px;
  border-radius: 14px;
  border: 1.5px solid var(--line-strong);
  background: var(--card);
  font-size: 16px;
  color: var(--ink);
}
.input:focus { outline: none; border: 2px solid var(--ink); }

/* Toggle pills (duration presets, required people) */
.pill {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.pill[aria-pressed="true"] { background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink); }

.tag-required {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  letter-spacing: .02em;
  white-space: nowrap;
}

/* Account maken (CHANGE-6). Copied as-is from the COMPONENTS block of
   new-design/reference.html; only the tokens below are added. They differ
   from app.css (a translucent halo, the reference's font names), so they
   apply inside the signup sheet and the Join card only. */
.su-sheet, .su-nudge, .su-page {
  --accent-halo: #F2C14E55;
  --no-border: #EBC4B0;
  --avatar-soft: #E8E1D1;
  --f-display: var(--font-display);
  --f-body: var(--font-body);
}

/* =========================== COMPONENTS ================================ */

/* ---------- Sheet (mobile; desktop = 420 px centred modal, radius 28 all round) ---------- */
.su-sheet{background:var(--card);border-radius:28px 28px 0 0;padding:10px 20px 24px;display:flex;flex-direction:column;gap:18px;font-family:var(--f-body);color:var(--ink)}
.su-handle{align-self:center;width:40px;height:5px;border-radius:3px;background:var(--line-strong)}
.su-head{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin-top:-6px}
.su-step{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.su-iconbtn{width:44px;height:44px;border:0;background:transparent;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:12px}
.su-iconbtn--left{margin-left:-10px}.su-iconbtn--right{margin-right:-10px}
.su-verified{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--yes)}
.su-titleblock{display:flex;flex-direction:column;gap:8px;margin-top:-8px}
.su-title{margin:0;font-family:var(--f-display);font-size:30px;line-height:1.05;font-weight:800;letter-spacing:-.02em}
.su-sub{margin:0;font-size:16px;line-height:1.45;color:var(--ink-2)}
.su-sub strong{color:var(--ink)}
.su-sub a{color:var(--ink);font-weight:600}

/* ---------- Field ---------- */
.su-form{display:flex;flex-direction:column;gap:14px;margin:0}
.su-field{display:flex;flex-direction:column;gap:6px}
.su-label{font-size:15px;font-weight:600}
.su-input{min-height:52px;width:100%;box-sizing:border-box;padding:0 16px;border-radius:14px;background:var(--card);border:1.5px solid var(--line-strong);font:inherit;font-size:17px;color:var(--ink);outline:none}
.su-input:focus{border:2px solid var(--ink);padding:0 15.5px}
.su-input[aria-invalid="true"]{border:2px solid var(--no);padding:0 15.5px}
.su-input--pw{padding-right:52px}.su-input--pw:focus{padding-right:51.5px}
.su-inputwrap{position:relative}
.su-eye{position:absolute;right:4px;top:4px;width:44px;height:44px;border:0;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.su-hint{font-size:13px;line-height:1.4;color:var(--muted)}
.su-hint--error{color:var(--no-text);font-weight:600}
.su-hint--ok{color:var(--yes);font-weight:600}

/* ---------- Buttons ---------- */
.su-btn{min-height:56px;width:100%;border:0;border-radius:16px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-size:17px;font-weight:600;text-decoration:none;cursor:pointer}
.su-btn[aria-busy="true"]{opacity:.85}
.su-btn--soft{opacity:.45}                           /* code step: < 6 digits, still clickable */
.su-btn--outline{min-height:52px;border-radius:14px;border:1.5px solid var(--ink);background:var(--card);color:var(--ink);font-size:16px;font-weight:700}
.su-btn--small{min-height:44px;width:auto;padding:0 16px;border-radius:12px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-size:15px;font-weight:700}
.su-textbtn{align-self:center;min-height:44px;padding:0 8px;border:0;background:transparent;display:flex;align-items:center;font:inherit;font-size:16px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.su-textbtn--plain{text-decoration:none;color:var(--ink-2);font-size:15px}
.su-spinner{width:18px;height:18px;box-sizing:border-box;border-radius:50%;border:2.5px solid rgba(244,240,230,.35);border-top-color:var(--paper);animation:su-spin .8s linear infinite}
.su-spinner--dark{width:14px;height:14px;border:2px solid var(--line-strong);border-top-color:var(--ink);display:inline-block;vertical-align:-3px;margin-right:6px}
@keyframes su-spin{to{transform:rotate(360deg)}}

/* ---------- Error box (same as passkeys CHANGE §3) ---------- */
.su-alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--no-tint);border:1px solid var(--no-border);color:var(--no-deep);font-size:15px;line-height:1.4}
.su-alert svg{flex-shrink:0;margin-top:1px}

/* ---------- Captcha (only when the service asks) ---------- */
.su-captcha{display:flex;flex-direction:column;gap:8px}
.su-captcha__slot{min-height:65px;border-radius:10px}   /* the vendor widget renders in here */

/* ---------- Context action + bottom block ---------- */
.su-ctx{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:-6px}
.su-ctx__caption{font-size:13px;color:var(--muted);text-align:center}
.su-bottom{margin-top:auto;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.su-benefits{list-style:none;margin:0;padding:0;align-self:stretch;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.4;color:var(--ink-2)}
.su-benefits li{display:flex;gap:8px;align-items:flex-start;text-align:left}
.su-benefits svg{flex-shrink:0;margin-top:1px}
.su-foot{font-size:14px;line-height:1.45;color:var(--muted)}
.su-foot a{color:var(--ink);font-weight:600}

/* ---------- Code (one real input, drawn as 6 boxes) ---------- */
.su-code{position:relative}
.su-code__input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;border:0;padding:0;cursor:text}
.su-code__boxes{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;pointer-events:none}
.su-box{height:60px;box-sizing:border-box;border-radius:12px;background:var(--card);border:1.5px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:28px;font-weight:800;color:var(--ink)}
.su-box--filled{border-color:var(--ink)}
.su-box--active{border:2px solid var(--ink);box-shadow:0 0 0 4px var(--accent-halo)}
.su-box--active::after{content:"";width:2px;height:26px;background:var(--ink);animation:su-caret 1s steps(1) infinite}
.su-box--active:not(:empty)::after{display:none}
.su-code--error .su-box{border:2px solid var(--no);color:var(--no-deep)}
.su-code--checking .su-box{opacity:.6}
.su-code--dead .su-box{opacity:.45}
@keyframes su-caret{50%{opacity:0}}
.su-status{font-size:14px;line-height:1.4;color:var(--muted)}
.su-status--error{color:var(--no-text);font-weight:600}
.su-status--ok{color:var(--yes);font-weight:600}
.su-help{padding:12px 14px;border-radius:14px;background:var(--paper);font-size:14px;line-height:1.45;color:var(--ink-2);display:flex;flex-direction:column;gap:6px}
.su-help a,.su-help button{font:inherit;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer}
.su-center-note{text-align:center;font-size:13px;color:var(--muted)}

/* ---------- Method: passkey card, disclosure, password form ---------- */
.su-pk{display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:18px;background:var(--card);border:2px solid var(--ink)}
.su-pk__row{display:flex;gap:12px;align-items:flex-start}
.su-pk__icon{width:44px;height:44px;flex-shrink:0;border-radius:22px;background:var(--accent);display:flex;align-items:center;justify-content:center}
.su-pk__text{display:flex;flex-direction:column;gap:3px;min-width:0}
.su-pk__name{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700}
.su-pk__body{font-size:14px;line-height:1.4;color:var(--ink-2)}
.su-badge{font-size:10px;font-weight:700;letter-spacing:.06em;padding:3px 6px;border-radius:5px;background:var(--ink);color:var(--paper)}
.su-pk--compact{border:1px solid var(--line)}
.su-pk--compact .su-badge,.su-pk--compact .su-pk__cta{display:none}
.su-pk__choose{display:none;margin-left:auto;flex-shrink:0}
.su-pk--compact .su-pk__choose{display:flex}
.su-disclosure{min-height:52px;width:100%;border-radius:14px;border:1px solid var(--line);background:transparent;display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 16px;font:inherit;font-size:16px;font-weight:600;color:var(--ink);cursor:pointer}
.su-pwform{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px;border-radius:18px;border:1px solid var(--line);margin:0}
.su-note{margin:0;padding:12px 14px;border-radius:14px;background:var(--paper);font-size:14px;line-height:1.45;color:var(--ink-2)}

/* ---------- Account klaar ---------- */
.su-done__top{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding-top:4px}
.su-done__who{font-size:15px;color:var(--ink-2)}.su-done__who strong{color:var(--ink)}
.su-caps{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.su-list{list-style:none;margin:0;padding:0;border-radius:16px;border:1px solid var(--line);overflow:hidden}
.su-list li{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px;box-sizing:border-box;border-bottom:1px solid var(--line-soft)}
.su-list li:last-child{border-bottom:0}
.su-list__t{font-size:16px;font-weight:600}.su-list__s{font-size:13px;color:var(--muted)}
.su-namerow{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 8px 8px 14px;border-radius:16px;background:var(--paper)}
.su-avatar{width:36px;height:36px;flex-shrink:0;border-radius:18px;background:#C3B0F0;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:15px;font-weight:800}

/* ---------- Ingang 1: card on Join ---------- */
.su-nudge{padding:14px 16px;border-radius:18px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.su-nudge__row{display:flex;gap:12px;align-items:flex-start}
.su-nudge__t{margin:0;font-size:16px;font-weight:700}
.su-nudge__b{margin:0;font-size:14px;line-height:1.4;color:var(--ink-2)}
.su-nudge__actions{display:flex;gap:8px;align-items:center}

@media (prefers-reduced-motion:reduce){.su-box--active::after{animation:none}}
[hidden]{display:none!important}

/* ---------- Additions for the app (not in the reference) ---------- */
/* The sheet fills the panel, so "margin-top: auto" puts blocks at the bottom. */
.su-sheet{min-height:100%;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
/* Bigger touch area for swiping the handle, without moving anything. */
.su-grab{align-self:stretch;display:flex;justify-content:center;margin:-10px -20px -8px;padding:10px 20px 8px;touch-action:none}
/* Desktop: a 420 px modal with radius 28 all round and no handle. */
.su-sheet--modal{border-radius:28px;padding:20px 24px 24px}
.su-sheet--modal .su-head{margin-top:-8px}
@media (prefers-reduced-motion:reduce){.su-spinner{animation-duration:2.4s}}
/* Edge draws its own eye next to ours. */
.su-input--pw::-ms-reveal{display:none}