/* Layout: job-site signboard header, sticky tab rail, single readable column with card lists. */
:root{
  --bg:#F4F6F2; --surface:#FFFFFF; --ink:#18212B; --muted:#5A6670; --line:#D7DDD6;
  --accent:#0E6B68; --accent-ink:#FFFFFF; --gold:#C9921A; --gold-soft:#FBF1D9;
  --ok:#2F7D3A; --warn:#A6620B;
  --wool:#FFFFFF; --wool-edge:#DCD6CC; --lamb-face:#3B302C; --horn:#C8A26E; --horn-edge:#8E6B3E;
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#11161B; --surface:#1A2129; --ink:#E7ECE9; --muted:#9AA7AF; --line:#2C3540;
  --accent:#4FBDB5; --accent-ink:#0C1A1A; --gold:#E5B54A; --gold-soft:#2B2414;
  --ok:#6FCB7C; --warn:#E3A24A; --wool:#F4F1EC; --wool-edge:#B9B2A8; --lamb-face:#3B302C; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#11161B; --surface:#1A2129; --ink:#E7ECE9; --muted:#9AA7AF; --line:#2C3540;
  --accent:#4FBDB5; --accent-ink:#0C1A1A; --gold:#E5B54A; --gold-soft:#2B2414;
  --ok:#6FCB7C; --warn:#E3A24A; --wool:#F4F1EC; --wool-edge:#B9B2A8; --lamb-face:#3B302C; color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font:16px/1.55 var(--body);margin:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--ink)}
.wrap{max-width:760px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header.board{background:var(--ink);color:var(--bg)}
header.board .wrap{padding-block:22px 18px;display:grid;gap:10px}
.eyebrow{font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
h1{font:800 clamp(40px,10vw,64px)/.92 var(--display);margin:0;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}
h1 span{color:var(--gold)}
.lede{margin:0;max-width:52ch;opacity:.85}
.side{display:inline-flex;border:1px solid color-mix(in srgb,var(--bg) 35%,transparent);border-radius:999px;padding:3px;gap:3px;width:max-content;max-width:100%}
.side button{all:unset;cursor:pointer;padding:7px 14px;border-radius:999px;font-weight:600;font-size:14px}
.side button[aria-pressed="true"]{background:var(--gold);color:#18212B}
.side button:focus-visible,.tabs a:focus-visible,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
nav.tabs{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
nav.tabs .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tabs a{flex:none;padding:13px 12px 11px;color:var(--muted);text-decoration:none;font-weight:600;font-size:15px;border-bottom:3px solid transparent}
.tabs a[aria-current="page"]{color:var(--ink);border-color:var(--accent)}
main .wrap{padding-block:22px 60px}
section{display:grid;gap:16px}
h2{font:800 32px/1 var(--display);text-transform:uppercase;margin:0;letter-spacing:.01em}
h3{font:700 18px/1.25 var(--body);margin:0}
p{margin:0}
.muted{color:var(--muted)}
.small{font-size:14px}
.list{display:grid;gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;display:grid;gap:8px;min-width:0}
.card .meta{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.chip.gold{background:var(--gold-soft);color:var(--warn)}
.btn{appearance:none;border:0;cursor:pointer;font:600 15px var(--body);padding:11px 16px;border-radius:8px;background:var(--accent);color:var(--accent-ink);justify-self:start}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.btn:disabled{opacity:.55;cursor:default}
a{color:var(--accent)}
form{display:grid;gap:12px}
label{display:grid;gap:5px;font-weight:600;font-size:14px}
input,select,textarea{font:16px var(--body);padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);width:100%}
textarea{min-height:84px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
.note{padding:12px 14px;border-radius:8px;background:var(--gold-soft);font-size:14px}
.status{font-size:14px;font-weight:600}
.status.ok{color:var(--ok)} .status.err{color:var(--warn)}
.fact{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:15px}
.fact dt{color:var(--muted)} .fact dd{margin:0;font-variant-numeric:tabular-nums}
@media (max-width:520px){.fact.stack{grid-template-columns:1fr;gap:2px}.fact.stack dt{margin-top:10px;font-weight:700;color:var(--ink)}}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:15px}
.check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--accent)}
.meter{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent);width:0;transition:width .3s}
.verse{border-left:4px solid var(--gold);padding:4px 0 4px 14px;font-size:17px}
.verse cite{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:4px}
.chat{display:grid;gap:10px}
.msg{padding:11px 14px;border-radius:12px;max-width:88%;white-space:pre-wrap;min-width:0;overflow-wrap:anywhere}
.msg.me{justify-self:end;background:var(--accent);color:var(--accent-ink)}
.msg.them{background:var(--surface);border:1px solid var(--line)}
.prompts{display:flex;flex-wrap:wrap;gap:8px}
.prompts button{all:unset;cursor:pointer;font-size:14px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.prompts button:focus-visible{outline:2px solid var(--accent)}
hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.lamb-stage{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
@media (max-width:420px){.lamb-stage{grid-template-columns:1fr;justify-items:center;text-align:center}}
.lamb{all:unset;cursor:pointer;width:132px;max-width:100%;display:block;border-radius:16px;position:relative}
.hope-fig{display:block;animation:bob 3.2s ease-in-out infinite}
.hope-img{display:block;width:100%;height:auto;transform-origin:50% 90%;transition:transform .3s}
.lamb .fx{position:absolute;inset:-10% -14% auto auto;width:70%;pointer-events:none}
.lamb[data-state="listening"] .hope-img{transform:rotate(-6deg)}
.lamb[data-state="thinking"] .hope-img{transform:rotate(4deg) scale(.98)}
.lamb[data-state="talking"] .hope-img{animation:sway .45s ease-in-out infinite alternate}
.lamb[data-state="happy"] .hope-fig{animation:hop .5s ease-out 2}
@keyframes sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.lamb:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.lamb svg{width:100%;height:auto;display:block;overflow:visible}
.lamb *{transform-box:fill-box;transform-origin:center}
.lamb .wool{fill:var(--wool);stroke:var(--wool-edge);stroke-width:1.5}
.lamb .face{fill:var(--lamb-face)}
.lamb .leg{fill:var(--lamb-face)}
.lamb .hat{fill:var(--gold)}
.lamb .horn{fill:none;stroke:var(--horn);stroke-width:9;stroke-linecap:round}
.lamb .horn-ridge{fill:none;stroke:var(--horn-edge);stroke-width:1.6;stroke-linecap:round}
.lamb[data-state="listening"] .ear-l,.lamb[data-state="listening"] .ear-r{transform:none}
.lamb .eye-w{fill:#FFFFFF}
.lamb .pupil{fill:#1A1414}
.lamb .mouth{fill:none;stroke:#FFFFFF;stroke-width:2.2;stroke-linecap:round}
.lamb .cheek{fill:#E98A8A;opacity:.7}
.lamb .shadow{fill:var(--line)}
.lamb .heart{fill:#E05A6A;opacity:0}
.lamb .dots circle{fill:var(--muted);opacity:0}
.lamb .body{animation:bob 3.2s ease-in-out infinite}
.lamb .eyes{animation:blink 4.5s infinite}
.lamb[data-state="listening"] .head{transform:rotate(-7deg);transition:transform .3s}
.lamb[data-state="listening"] .ear-l{transform:rotate(-14deg);transition:transform .3s}
.lamb[data-state="listening"] .ear-r{transform:rotate(14deg);transition:transform .3s}
.lamb[data-state="thinking"] .dots circle{animation:dot 1.2s infinite}
.lamb[data-state="thinking"] .dots circle:nth-child(2){animation-delay:.2s}
.lamb[data-state="thinking"] .dots circle:nth-child(3){animation-delay:.4s}
.lamb[data-state="thinking"] .pupil{transform:translateY(-1.5px)}
.lamb[data-state="talking"] .mouth{animation:talk .32s ease-in-out infinite alternate}
.lamb[data-state="happy"] .body{animation:hop .5s ease-out 2}
.lamb[data-state="happy"] .heart{animation:heart 1.1s ease-out forwards}
@keyframes bob{50%{transform:translateY(-3px)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes dot{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes talk{to{transform:scaleY(1.9)}}
@keyframes hop{40%{transform:translateY(-10px)}}
@keyframes heart{0%{opacity:0;transform:translateY(6px) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translateY(-18px) scale(1.15)}}
.say{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:15px;min-width:0}
.pcts{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.pcts button{all:unset;cursor:pointer;padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:600}
.pcts button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.pcts button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pct-custom{width:110px}
.tipout{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-variant-numeric:tabular-nums;font-size:19px;padding:12px 14px;border-radius:8px;background:var(--bg)}
.tipout dt{color:var(--muted)} .tipout dd{margin:0;font-weight:700;text-align:right}
.tipout .contents{display:contents}
.near-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.near{display:block;padding:12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;min-width:0}
.near::after{content:" \2197";color:var(--muted)}
.near:focus-visible{outline:2px solid var(--accent)}
.steps{margin:0;padding-left:22px;display:grid;gap:8px;font-size:15px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}