/* The site in DESIGN.md's clothes: one column, lines and hairlines, plain
   accent words as actions. No boxes, no radius, no shadows, no icons. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ground); }
body {
  margin: 0; min-height: 100dvh; background: var(--ground); color: var(--ink);
  font: 400 var(--t-body)/1.4 var(--font); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
a { color: var(--accent); text-decoration: none; }
h1, h2, p { margin: 0; }
button, input { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

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

.page {
  max-width: var(--measure); margin: 0 auto;
  padding: env(safe-area-inset-top) calc(var(--gutter) + env(safe-area-inset-right)) calc(var(--s7) + env(safe-area-inset-bottom)) calc(var(--gutter) + env(safe-area-inset-left));
}
/* Phase 2: the wide two-column trip layout (DESIGN.md section 2). */
.page.wide { max-width: var(--measure); }
@media (min-width: 1024px) { .page.wide { max-width: var(--wide); } }

.top { display: flex; align-items: center; justify-content: space-between; min-height: var(--line); gap: var(--s4); }
.brand { color: var(--ink); font-weight: 600; min-height: 48px; display: inline-flex; align-items: center; }
.top-nav { display: flex; gap: var(--s5); }
.top-nav a { min-height: 48px; display: inline-flex; align-items: center; }
.top-nav a[aria-current="page"], a.brand[aria-current="page"] { color: var(--ink); }
.top a:hover { text-decoration: underline; text-underline-offset: 4px; }

.title { font-size: var(--t-title); font-weight: 600; line-height: 1.25; margin: var(--s5) 0 var(--s2); }
.sub { color: var(--ink-2); font-size: var(--t-body); margin-bottom: var(--s5); }
.backline { display: inline-flex; align-items: center; min-height: 48px; margin-top: var(--s2); }
.hint { color: var(--ink-2); font-size: var(--t-small); margin: var(--s2) 0 var(--s3); }
.err { color: var(--warn); font-size: var(--t-small); margin: var(--s2) 0; }
.err[hidden] { display: none; }
.empty { color: var(--ink-2); padding: var(--s3) 0; }
.quiet { color: var(--ink-3); font-size: var(--t-small); }
.warn { color: var(--warn); }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- groups and lines (DESIGN.md section 3) ---------- */

.group { margin-top: var(--s6); }
.group-h {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
  font-size: var(--t-small); font-weight: 600; color: var(--ink);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--ink);
}

.line {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: var(--line); padding: var(--s3) 0; border-bottom: 1px solid var(--hair);
  width: 100%; text-align: left;
}
.line-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.line-text { overflow-wrap: anywhere; }
.line-sub { font-size: var(--t-small); color: var(--ink-2); }
.line-aside { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--s4); flex-shrink: 0; }
.line.past .line-text { color: var(--ink-2); }
.line.current .line-text { font-weight: 600; }

/* Plain accent words that act. Buttons look like links; 48 px to tap. */
.act {
  appearance: none; background: none; border: 0; border-radius: 0; padding: 0; margin: 0;
  color: var(--accent); font-size: var(--t-body); cursor: pointer; min-height: 48px;
  display: inline-flex; align-items: center;
}
.act.primary { font-weight: 600; }
.act.warn { color: var(--warn); }
.act:disabled { color: var(--ink-3); cursor: default; }
button.line {
  appearance: none; background: none; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0;
  font-size: var(--t-body); cursor: pointer; margin: 0;
}
button.line, a.line { color: var(--accent); padding-left: 0; padding-right: 0; }
.line.add { color: var(--accent); }
.line.back { color: var(--ink-2); }
form.inline { display: inline; }
.line-form { margin: 0; }

/* Pressed and hovered look the same (DESIGN.md section 8). */
a.line:active, button.line:active, .act:active { background: var(--press); }
@media (hover: hover) {
  a.line:hover, button.line:hover, .act:not(:disabled):hover { background: var(--press); }
}

/* ---------- forms ---------- */

.form { margin: 0; }
.field { display: flex; flex-direction: column; padding: var(--s3) 0; border-bottom: 1px solid var(--hair); }
.field > span { font-size: var(--t-small); color: var(--ink-2); }
.field input, .form-line input {
  background: none; border: 0; border-radius: 0; padding: var(--s2) 0; min-height: 48px;
  font-size: var(--t-body); color: var(--ink); width: 100%;
  border-bottom: 2px solid transparent;
}
.field input:focus, .form-line input:focus { outline: none; border-bottom-color: var(--accent); }
.field input:focus-visible, .form-line input:focus-visible { outline: none; }
/* The one-question form: the question at title size, the answer large. */
.field.q > span { font-size: var(--t-title); color: var(--ink); font-weight: 500; margin-top: var(--s3); }
.field.q input { font-size: var(--t-input); }
.form-line input { flex: 1; }
.check { display: flex; align-items: center; gap: var(--s3); min-height: var(--line); border-bottom: 1px solid var(--hair); cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
input[type="number"] { -moz-appearance: textfield; }

/* ---------- auth details ---------- */

.passkey-door { margin-top: var(--s3); }
.passkey-door[hidden], [data-passkey][hidden], [data-copy][hidden] { display: none; }
.qr { width: 240px; height: 240px; margin: var(--s4) 0; background: #ffffff; image-rendering: pixelated; }
.secret, .link-out { font-size: var(--t-body); overflow-wrap: anywhere; user-select: all; padding: var(--s3) 0; border-bottom: 1px solid var(--hair); }
.secret { letter-spacing: .06em; }
.langs { display: flex; gap: var(--s5); margin-top: var(--s6); }
.langs .act { color: var(--accent); }
.langs .act[aria-current="true"] { color: var(--ink); font-weight: 600; }

/* ---------- section tabs (Phase 2; DESIGN.md section 2) ----------
   Underline tabs: text only, a hairline under the row, the current one in
   the accent with a 2 px underline on that rule. Sticky on phones, scrolls
   sideways if it overflows, never wraps. */
.tabs {
  display: flex; gap: var(--s5); overflow-x: auto; scrollbar-width: none; white-space: nowrap;
  border-bottom: 1px solid var(--hair); background: var(--ground);
  position: sticky; top: env(safe-area-inset-top); z-index: 1;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a { display: inline-flex; align-items: center; min-height: 48px; color: var(--ink-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a[aria-current="page"] { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
.tabs a .count { color: var(--warn); margin-left: var(--s1); }
@media (hover: hover) { .tabs a:hover { color: var(--ink); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: var(--d-fast) !important; animation: none !important; }
}