/**
 * Base: reset, typography, helpers, buttons, form controls.
 */

*{box-sizing:border-box}
/* The claude.ai viewer adds this rule; other hosts don't, and .field / .controls would otherwise override it. */
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.4;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;letter-spacing:-.01em}
.wrap{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));max-width:640px;margin:0 auto}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:14px}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

/* Buttons: 48 px tall by default; .sm is 40 px for secondary actions */
.btn{min-height:48px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-md);padding:10px 16px;font-weight:700;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:var(--ink);text-align:center}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.soft{background:var(--accent-soft);color:var(--accent-strong);border-color:transparent}
.btn.danger{color:var(--red);border-color:var(--red-line)}
.btn.ghost{background:none;border-color:transparent;color:var(--accent);padding-inline:6px}
.btn.sm{min-height:40px;padding:6px 12px;font-size:15px;border-radius:var(--r-sm)}
.btn.lg{min-height:60px;font-size:19px;font-weight:800;border-radius:18px}
.btn:disabled{opacity:.45;cursor:default}
.btn.block{width:100%}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.btnrow>.btn{flex:1}

/* Form controls */
.field{display:flex;flex-direction:column;gap:6px}
.field>label{font-size:14px;font-weight:700;color:var(--muted)}
.inp,select.inp{width:100%;min-height:48px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:10px 14px;font-size:17px;min-width:0}
input[type="date"].inp{min-height:48px}
textarea.inp{min-height:140px;font-family:var(--f-mono);font-size:13px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2>*{min-width:0}
.kv{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:48px}
.kv label,.kv>span:first-child{font-size:16px;color:var(--muted)}
.note{font-size:14px;color:var(--muted)}
.spin{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spin{animation-duration:3s}}