/* Dayproof design tokens and the pieces every page shares (/app/, /account/, /help/, /privacy/).
   Same system as the iPhone app (Theme.swift) and the home page: paper 60 · ink 30 · pen 10.
   Green and red live only inside stamps. Borders, not shadows. Two fonts, few weights.
   Load /fonts/fonts.css before this file; page layout goes in each page's own stylesheet.

   Shared classes:
     .card               white box with a hairline border
     .fields             a .card of stacked <label><span>Caption</span><input></label> rows
     .btn.primary        the one main action on a view    .btn.secondary  other actions
     .link               a text action (button or a)       .danger-link    a destructive text action
     .msg / .msg.ok      the outcome line next to a button (ring icon, or a check when it worked)
     .confirm            an inline "are you sure?" box     .note           an icon followed by text
     .stamp.ok/.no/.pen  the rubber stamp; add .pressed to play the press once
     .chip               a small pick button (aria-pressed="true" or .on when chosen)
     .mark               the Dayproof mark in a top bar    .mono           numbers that line up
     .muted, .small      quieter text */

:root{
  --paper:#F6F7F9; --card:#FFFFFF; --ink:#1C2333; --muted:#5B6474; --line:#DCE0E7;
  --pen:#2340A8; --on-pen:#FFFFFF; --pen-wash:#E8ECF8;
  --ok:#1E7A4C; --no:#B3261E;
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0D1220; --card:#151C2D; --ink:#E9ECF2; --muted:#9BA4B5; --line:#283044;
  --pen:#8EA6FF; --on-pen:#0D1220; --pen-wash:#1A2340;
  --ok:#6ED29D; --no:#FF9D93; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0D1220; --card:#151C2D; --ink:#E9ECF2; --muted:#9BA4B5; --line:#283044;
  --pen:#8EA6FF; --on-pen:#0D1220; --pen-wash:#1A2340;
  --ok:#6ED29D; --no:#FF9D93; color-scheme:dark}

/* Base type */
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--sans)}
h1,h2,h3{font-weight:600;line-height:1.15;letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:clamp(1.8rem,6vw,2.3rem)}
p{margin:0}
a{color:var(--pen)}
:focus-visible{outline:3px solid var(--pen);outline-offset:3px;border-radius:6px}
.muted{color:var(--muted)}
.small{font-size:.92rem}
.mono{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}

/* The Dayproof mark: a small pen stamp and the name */
.mark{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1.15rem;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.mark .stamp{font-size:.62rem;padding:2px 6px}

/* Card and grouped fields (one caption above each value, hairlines between rows) */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.fields > label{display:grid;gap:0;padding:10px 16px 8px;border-top:1px solid var(--line)}
.fields > label:first-child{border-top:0}
.fields > label > span{font-size:.82rem;color:var(--muted)}
.fields input,.fields select,.fields textarea{border:0;background:transparent;color:var(--ink);font:17px var(--sans);padding:4px 0 6px;min-height:32px;width:100%}
.fields textarea{line-height:1.5;resize:vertical}
.fields input::placeholder,.fields textarea::placeholder{color:var(--muted);opacity:.7}
.fields input[readonly]{color:var(--muted)}
.fields > label:focus-within{background:var(--pen-wash)}

/* Buttons: one primary per view. 44px is the smallest target anywhere. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:14px;font:600 1rem var(--sans);cursor:pointer;border:1px solid transparent;text-decoration:none}
.btn.primary{background:var(--pen);color:var(--on-pen)}
.btn.secondary{background:var(--card);color:var(--pen);border-color:var(--line)}
.btn[disabled],.link[disabled]{opacity:.45;cursor:default}
.link{background:none;border:0;color:var(--pen);font:600 .95rem var(--sans);cursor:pointer;min-height:44px;padding:0}
a.link{display:inline-flex;align-items:center;justify-self:start;text-decoration:none}
a.link:hover{text-decoration:underline}
/* Red stays inside stamps, so a destructive link looks like any other link;
   the words and the confirm step that follows carry the warning. */
.danger-link{color:var(--pen)}

/* Outcome line: a ring when something needs doing, a check when it worked. Never red. */
.msg{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.msg::before{content:"";flex:0 0 18px;height:18px;margin-top:3px;border-radius:50%;border:2px solid currentColor}
.msg.ok{font-weight:400}
.msg.ok::before{content:"\2713";border:0;color:var(--pen);font-weight:600;line-height:18px;text-align:center}

/* Inline "are you sure?" box */
.confirm{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--card)}

/* An icon, then text */
.note{display:flex;gap:10px;align-items:flex-start}
.note svg{flex:0 0 20px;width:20px;height:20px;margin-top:3px;stroke:var(--pen);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Stamp: the one decorative element. Green and red appear only here. */
.stamp{display:inline-block;font:500 .78rem var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border:2px solid currentColor;border-radius:5px;outline:1px solid color-mix(in srgb,currentColor 45%,transparent);outline-offset:-6px;transform:rotate(-2deg);white-space:nowrap}
.stamp.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.stamp.no{color:var(--no);background:color-mix(in srgb,var(--no) 10%,transparent)}
.stamp.pen{color:var(--pen);background:color-mix(in srgb,var(--pen) 10%,transparent)}
@keyframes press{0%{transform:rotate(-2deg) scale(1.5);opacity:0}60%{transform:rotate(-2deg) scale(.94);opacity:1}100%{transform:rotate(-2deg) scale(1)}}
@media (prefers-reduced-motion:no-preference){.stamp.pressed{animation:press .5s cubic-bezier(.3,1.4,.5,1) both}}

/* Chip: a small pick, like "Doctor's note" */
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:600 .95rem var(--sans);cursor:pointer;text-decoration:none}
.chip[aria-pressed="true"],.chip[aria-checked="true"],.chip.on{background:var(--pen-wash);border-color:var(--pen);color:var(--pen)}