@import url("tokens.css");

/* ---- shell ---- */
main{max-width:560px;margin:0 auto;padding:18px 20px 48px}
header.top{padding:10px 0 18px;border-bottom:1px solid var(--edge);margin:0 0 18px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
header.top .brand{display:flex;align-items:center;gap:10px}
header.top .brand img{width:14px;height:14px}
.lbl{font:400 .72rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
header.top h1{font:300 2.1rem/1.05 var(--serif);margin:6px 0 0;letter-spacing:.01em}
header.top .today{font:300 1rem/1.2 var(--serif);font-style:italic;color:var(--muted);white-space:nowrap}
header.top .hdr-r{display:flex;align-items:center;gap:10px;flex:0 0 auto}
/* the key — a lane-sized circle holding a thin line-drawn key (her call 9/14: a key mark, not a "?"). 48px hit area, 38px mark. */
.help{width:var(--tap);height:var(--tap);border:0;background:transparent;padding:0;margin:0 -5px 0 0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;-webkit-appearance:none;flex:0 0 auto;color:var(--ink)}
.help span{width:38px;height:38px;border-radius:50%;border:1px solid var(--ink);background:var(--card);font:300 1.35rem/1 var(--serif);display:inline-flex;align-items:center;justify-content:center;transition:background-color .16s ease-out}
.help span svg{display:block}
.help:active span{background:var(--ground-alt)}
/* the key sheet */
.key{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--edge)}
h2+.key{border-top:0}
.key .lane{margin-top:1px}
.key .kt{font:400 1.05rem/1.45 var(--serif);color:var(--body);min-width:0}
.key .kt b{display:block;font:400 .68rem/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 2px}
.steps{margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{display:flex;gap:14px;padding:11px 0;border-top:1px solid var(--edge);font:400 1.05rem/1.45 var(--serif);color:var(--body);counter-increment:s}
.steps li:first-child{border-top:0}
.steps li::before{content:counter(s);flex:0 0 28px;width:28px;height:28px;border-radius:50%;border:1px solid var(--edge2);display:inline-flex;align-items:center;justify-content:center;font:300 1.05rem/1 var(--serif);color:var(--muted);margin-top:1px}
.steps li b{font-weight:500;color:var(--ink)}
.sheet .btn.ghost.last{margin-top:14px}

h2{font:400 .72rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:26px 0 10px;padding-top:16px;border-top:1px solid var(--edge)}
h2:first-child,.lanebox+h2{border-top:0;padding-top:0;margin-top:0}
.lanebox+h2{margin-top:22px}
.muted{color:var(--muted)}
.hidden-x{display:none!important}   /* class, never the hidden attribute */

/* ---- buttons: primary = ink fill · secondary = hairline · ghost = text ---- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 18px;border-radius:var(--radius);border:1px solid var(--ink);background:var(--card);color:var(--ink);font:400 .74rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;width:100%;-webkit-appearance:none;text-decoration:none;margin:0 0 10px;transition:background-color .16s ease-out,color .16s ease-out,border-color .16s ease-out}
.btn:active{background:var(--ground-alt)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.btn.primary:active{background:var(--ink-soft)}
.btn.line{border-color:var(--edge2)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn.ghost.danger{color:var(--bad)}
.btn[disabled]{opacity:.4;pointer-events:none}
.row{display:flex;gap:10px}.row>*{flex:1}

/* ---- tabs ---- */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--edge);margin:0 0 14px}
.tab{flex:1;min-height:var(--tap);background:transparent;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;font:400 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);cursor:pointer;-webkit-appearance:none;display:flex;align-items:center;justify-content:center;gap:6px}
.tab.on{color:var(--ink);border-bottom-color:var(--ink)}
.tab .n{font:400 1.05rem/1 var(--serif);color:inherit}

/* ---- chips: every choice is a short list, so nothing needs a dropdown (Rule 17) ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.chip{min-height:var(--tap);padding:0 14px;border-radius:var(--radius);border:1px solid var(--edge2);background:var(--card);color:var(--ink);font:400 1.05rem/1 var(--serif);display:inline-flex;align-items:center;cursor:pointer;-webkit-appearance:none;transition:background-color .16s ease-out,border-color .16s ease-out,color .16s ease-out}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.chip:active{background:var(--ground-alt)}.chip.on:active{background:var(--ink-soft)}
.chip.status.on.new{background:var(--warn);border-color:var(--warn)}
.chip.status.on.good{background:var(--good);border-color:var(--good)}
.chip.status.on.bad{background:var(--muted);border-color:var(--muted)}

/* ---- fields ---- */
label.f{display:block;margin:0 0 14px}
label.f>span,.f>.lbl{display:block;font:400 .72rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
input.in,textarea.in{width:100%;min-height:var(--tap);padding:10px 14px;border:1px solid var(--edge2);border-radius:var(--radius);background:var(--card);color:var(--ink);font:400 1.15rem/1.35 var(--serif);-webkit-appearance:none;transition:border-color .16s ease-out,box-shadow .16s ease-out}
textarea.in{min-height:96px;resize:vertical}
input.in:focus,textarea.in:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(43,37,31,.08)}
input.in[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 3px rgba(138,59,50,.1)}
input[type="datetime-local"].in{position:relative;display:block;min-width:0;color:var(--ink);font-family:var(--serif)}
input[type="datetime-local"].in::-webkit-date-and-time-value{text-align:left}
input[type="datetime-local"].in::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;margin:0;opacity:0;cursor:pointer}
input.in.big{font:300 2rem/1 var(--serif);letter-spacing:.3em;text-align:center}
.pre{font:400 .95rem/1.45 var(--serif);font-style:italic;color:var(--muted);margin-top:6px}

/* custom checkbox — never the OS box */
label.check{display:flex;align-items:center;gap:12px;min-height:var(--tap);cursor:pointer;margin:0 0 14px}
label.check input{position:absolute;opacity:0;width:0;height:0}
label.check .box{width:22px;height:22px;border:1px solid var(--edge2);border-radius:var(--radius);background:var(--card);flex:0 0 auto;position:relative;transition:background-color .16s,border-color .16s}
label.check input:checked+.box{background:var(--ink);border-color:var(--ink)}
label.check input:checked+.box::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid var(--ground);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
label.check input:focus-visible+.box{box-shadow:0 0 0 3px rgba(43,37,31,.12)}
label.check .t{font:400 1.1rem/1.3 var(--serif)}

/* ---- inquiry rows ---- */
.inq{display:flex;gap:14px;align-items:center;padding:14px 16px 14px 13px;background:var(--card);border:1px solid var(--edge);border-left:4px solid var(--edge2);border-radius:var(--radius);margin:0 0 8px;cursor:pointer;min-height:72px;width:100%;color:var(--ink);font:inherit;text-align:left;-webkit-appearance:none;transition:background-color .16s ease-out,border-color .16s ease-out}
.inq:active{background:var(--ground-alt)}
.lane{width:38px;height:38px;border-radius:50%;border:1px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;font:300 1.35rem/1 var(--serif);color:var(--ink);flex:0 0 auto}
/* Three lanes, three solid weights: A pops (turquoise), B is dark (ink), C is pale. The card's left edge carries the same colour. */
.lane.A{background:var(--accent);border-color:var(--accent);color:var(--ink);font-weight:400}
.lane.B{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.lane.C{background:var(--ground-alt);border-color:var(--edge2);color:var(--muted)}
.inq.A{border-left-color:var(--accent)}.inq.B{border-left-color:var(--ink)}.inq.C{border-left-color:var(--edge2)}
.tick{font-style:normal;color:var(--accent-ink);margin-left:7px;font-size:.8em;vertical-align:.08em}
.inq .who{flex:1;min-width:0}
.inq .who b{display:block;font:400 1.3rem/1.2 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inq .who small{display:block;font:400 .95rem/1.4 var(--serif);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inq .st{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.pill{font:400 .62rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:6px 8px;border-radius:var(--radius);background:var(--ground-alt);color:var(--muted);white-space:nowrap}
.pill.new{background:var(--accent);color:var(--ink)}
.pill.good{color:var(--good)}
.pill.wait{background:transparent;padding:0;font-family:var(--serif);font-size:.95rem;letter-spacing:0;text-transform:none;font-style:italic}
.inq.done{opacity:.6}

/* ---- sheet ---- */
.sheet-bg{position:fixed;inset:0;background:rgba(43,37,31,.35);opacity:0;visibility:hidden;transition:opacity .2s ease-out,visibility 0s .2s;z-index:20}
.sheet-bg.open{opacity:1;visibility:visible;transition:opacity .2s ease-out,visibility 0s}
.sheet{position:fixed;left:0;right:0;bottom:0;background:var(--ground);border-top:1px solid var(--edge);padding:14px 22px calc(22px + env(safe-area-inset-bottom));max-height:94vh;max-height:94dvh;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;transform:translateY(110%);visibility:hidden;transition:transform .22s ease-out,visibility 0s .22s;z-index:21;max-width:620px;margin:0 auto}
.sheet.open{transform:none;visibility:visible;transition:transform .22s ease-out,visibility 0s}
.sheet:focus{outline:none}
.sheet-open{overflow:hidden}
.sheet .grab{width:40px;height:3px;border-radius:99px;background:var(--edge2);margin:0 auto 16px}
.sheet h3{font:300 2rem/1.1 var(--serif);margin:0 0 4px;letter-spacing:.01em}
.sheet .sub{font:400 .95rem/1.5 var(--serif);font-style:italic;color:var(--muted);margin:0 0 14px}
.sheet .lanebox{display:flex;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);margin:0 0 6px}
.sheet .lanebox .why{font:400 1.05rem/1.45 var(--serif);color:var(--body)}
.sheet .lanebox .why .lbl{display:block;margin:0 0 4px}
.kv{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--edge);font:400 1.05rem/1.4 var(--serif)}
.kv:first-of-type{border-top:0}
.kv .k{color:var(--muted);flex:0 0 auto;font:400 .68rem/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding-top:.15em}
.kv .v{color:var(--ink);min-width:0;text-align:right;overflow-wrap:anywhere}
.kv .v a{color:inherit;text-decoration:underline;text-underline-offset:.18em;text-decoration-color:var(--edge2)}
/* Email receipts — a filled turquoise dot means the system sent it; hollow means not yet. */
.receipt{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--edge);font:400 1.05rem/1.4 var(--serif);color:var(--muted)}
h2+.receipt{border-top:0}
.receipt .dot{width:11px;height:11px;border-radius:50%;border:1px solid var(--edge2);flex:0 0 auto}
.receipt .rl{flex:1;color:var(--ink)}
.receipt .rv{text-align:right;font-style:italic}
.receipt.sent .dot{background:var(--accent);border-color:var(--accent)}
.receipt.sent .rv{color:var(--accent-ink);font-style:normal}
.textbox{background:var(--card);border:1px solid var(--edge);border-radius:var(--radius);padding:14px 16px;font:400 1.1rem/1.5 var(--serif);white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 10px}
.actions{display:grid;gap:0;margin-top:6px}
.saved{font:400 .95rem/1.4 var(--serif);font-style:italic;color:var(--muted);margin:-4px 0 12px}

/* ---- notices ---- */
.note{border-radius:var(--radius);padding:12px 14px;font:400 1.05rem/1.45 var(--serif);margin:0 0 12px;display:none;border:1px solid var(--edge)}
.note.show{display:block}
.note.bad{background:color-mix(in srgb,var(--bad) 8%,var(--card));color:var(--bad);border-color:color-mix(in srgb,var(--bad) 30%,var(--edge))}
.note.good{background:color-mix(in srgb,var(--good) 8%,var(--card));color:var(--good);border-color:color-mix(in srgb,var(--good) 30%,var(--edge))}
.note.info{background:var(--ground-alt);color:var(--body)}
.note .btn{margin:10px 0 0}
.empty{text-align:center;color:var(--muted);padding:34px 14px;font:300 1.25rem/1.4 var(--serif);font-style:italic;background:var(--card);border:1px solid var(--edge);border-radius:var(--radius)}
.spin{text-align:center;color:var(--muted);padding:30px 10px;font-style:italic}
.spin::before{content:"";display:block;width:20px;height:20px;margin:0 auto 10px;border:1px solid var(--edge2);border-top-color:var(--ink);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- the code gate ---- */
#gate{position:fixed;inset:0;background:var(--ground);z-index:50;display:flex;align-items:center;justify-content:center;padding:24px}
#gate.off{display:none}
#gate .box{width:100%;max-width:340px;text-align:center}
#gate img{width:22px;height:22px;margin:0 0 18px}
#gate h1{font:300 2rem/1.1 var(--serif);margin:0 0 6px}#gate p{font:400 1.05rem/1.4 var(--serif);font-style:italic;color:var(--muted);margin:0 0 22px}
#gate input{margin:0 0 12px}
#gate .err{color:var(--bad);min-height:24px;font:400 1rem/1.4 var(--serif);margin:0 0 8px}
#gate .mock{min-height:19px;font:400 .68rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--warn);margin-top:16px}

:where(.btn,.chip,.inq,.tab,a):focus-visible{outline:2px solid rgba(43,37,31,.25);outline-offset:2px}

/* ---- footer credit ---- */
footer.credit{margin:40px 0 0;padding-top:16px;border-top:1px solid var(--edge);text-align:center;font:400 .62rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
footer.credit a{display:inline-block;vertical-align:middle;opacity:.62;transition:opacity .15s}footer.credit a:hover{opacity:1}
footer.credit img{height:16px;width:auto;vertical-align:middle;margin-left:8px;display:inline-block}

@media(min-width:600px){main{padding-top:32px}}
@media(prefers-reduced-motion:reduce){.btn,.chip,.inq,.sheet,.sheet-bg{transition:none}.spin::before{animation:none}}