/* Walkthru — field-tool design system.
   Native type (system font: instant, offline, readable in sun), true black on white,
   grouped lists instead of floating cards, one accent: chalk-line blue. */
:root{
  --ground:#F2F2F4; --paper:#FFFFFF; --fill:rgba(118,118,128,.12); --fill2:rgba(118,118,128,.2);
  --ink:#000; --ink2:#5C5F66; --ink3:#8E9097; --line:rgba(60,60,67,.18);
  --chalk:#1D5BD8; --chalk-ink:#fff; --chalk-soft:rgba(29,91,216,.1);
  --done:#13863F; --flag:#D2281E; --fixed:#9A5B00; --fixed-soft:rgba(178,107,0,.12);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-d:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:12px; --r-l:16px; --ease:cubic-bezier(.25,.9,.3,1);
  /* legacy aliases used by older markup */
  --bg:var(--ground); --bg2:var(--fill); --card:var(--paper); --line2:var(--fill2); --accent:var(--chalk); --accent2:var(--chalk); --ok:var(--done); --danger:var(--flag); --warn:var(--fixed);
}
@media (prefers-color-scheme:dark){
  .toast{background:rgba(242,242,247,.96);color:#000}
  :root{ --ground:#000; --paper:#1C1C1E; --fill:rgba(118,118,128,.24); --fill2:rgba(118,118,128,.36); --ink:#fff; --ink2:#AEAEB2; --ink3:#7C7C80; --line:rgba(84,84,88,.6); --chalk:#4C8DFF; --chalk-soft:rgba(76,141,255,.16); --done:#30C163; --flag:#FF5A4E; --fixed:#F0A830; --fixed-soft:rgba(240,168,48,.16); }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.35;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:var(--chalk);text-decoration:none}
h1,h2,h3{font-family:var(--font-d);margin:0;letter-spacing:-.02em}
h1{font-size:34px;line-height:1.1;font-weight:700}
h2{font-size:22px;line-height:1.2;font-weight:700}
h3{font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1em}
.lbl{font-size:13px;color:var(--ink2);font-weight:400}
.mono{font-size:15px}
.muted{color:var(--ink2)} .faint{color:var(--ink3)}
.wrap{max-width:680px;margin:0 auto;padding:0 16px}
:focus-visible{outline:2px solid var(--chalk);outline-offset:2px}

/* surfaces: a card is a plain grouped container — no shadow */
.card{background:var(--paper);border-radius:var(--r)}

/* buttons */
.b{appearance:none;border:0;background:var(--fill);color:var(--chalk);font:inherit;font-size:17px;font-weight:600;padding:12px 18px;border-radius:var(--r);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;white-space:nowrap;transition:opacity .12s,transform .12s;text-decoration:none}
.b:active{opacity:.6}
.b.p,.b.a{background:var(--chalk);color:var(--chalk-ink)}
.b.g{background:transparent;padding-left:8px;padding-right:8px}
.b.d{color:var(--flag)}
.b.sm{min-height:36px;padding:7px 14px;font-size:15px;border-radius:10px}
.b.full{width:100%}
.b[disabled]{opacity:.4;pointer-events:none}
.b svg{width:20px;height:20px;flex:none}

/* fields */
.in{appearance:none;width:100%;border:0;background:var(--fill);color:var(--ink);font:inherit;font-size:17px;padding:13px 14px;border-radius:10px;outline:none;min-height:48px}
.in::placeholder{color:var(--ink3)}
.in:focus{box-shadow:0 0 0 2px var(--chalk)}
textarea.in{min-height:96px;resize:vertical;line-height:1.4}
select.in{background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),linear-gradient(135deg,var(--ink3) 50%,transparent 50%);background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
.fl{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.fl .lbl{padding-left:4px}
.row{display:flex;align-items:center;gap:10px}
.sb{display:flex;justify-content:space-between;align-items:center;gap:10px}

/* segmented control */
.seg{display:inline-flex;background:var(--fill);border-radius:9px;padding:2px;gap:0}
.seg button{appearance:none;border:0;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:500;padding:7px 14px;border-radius:7px;cursor:pointer;min-height:32px}
.seg button.on{background:var(--paper);box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04);font-weight:600}

/* small status text, not pills */
.chip{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--ink2);font-weight:500}
.chip.hi{color:var(--flag)}
.chip.ok{color:var(--fixed)}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);background:rgba(28,28,30,.94);color:#fff;padding:11px 16px;border-radius:12px;font-size:15px;font-weight:500;opacity:0;transition:all .22s var(--ease);z-index:70;pointer-events:none;max-width:88vw;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* sheets */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.32);opacity:0;transition:opacity .2s;z-index:42}
.sheet-bg.on{opacity:1}
.sheet{position:fixed;left:0;right:0;bottom:0;max-height:92vh;overflow:auto;background:var(--ground);border-radius:14px 14px 0 0;padding:8px 16px calc(24px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .32s var(--ease);z-index:43}
.sheet.on{transform:translateY(0)}
.sheet .grab{width:36px;height:5px;border-radius:3px;background:var(--fill2);margin:0 auto 14px}
.sheet h3{font-size:20px;font-weight:700}
@media(min-width:720px){.sheet{left:50%;right:auto;width:540px;transform:translate(-50%,100%);border-radius:14px;bottom:24px}.sheet.on{transform:translate(-50%,0)}}

.spinner{width:22px;height:22px;border:2.5px solid var(--fill2);border-top-color:var(--ink2);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.hr{height:1px;background:var(--line);margin:18px 0}
.empty{text-align:center;padding:56px 24px;color:var(--ink2)}
.empty h3{color:var(--ink);font-size:20px;margin-bottom:6px}
@media(hover:hover){.b:hover{opacity:.85}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}