/* Yampah Host layout and components. Every color comes from tokens.css; square corners; 52 px targets. */
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{background:var(--white);color:var(--ink);font-family:var(--body);font-size:var(--fs-body);line-height:1.55;min-height:100vh;padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 40px)}
a{color:var(--ochre-text);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.15;letter-spacing:-.01em}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3);margin:1.4em 0 .5em}
.hero{font-size:var(--fs-hero);color:var(--ochre)}
.kicker{font-family:var(--body);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:var(--fs-xs);color:var(--ochre-text)}
.muted{color:var(--ink-3)} .small{font-size:var(--fs-sm)} .xs{font-size:var(--fs-xs)}
.rule{width:48px;height:2px;background:var(--ochre);margin:.9rem 0 1rem}
.center{text-align:center}
.mast{position:sticky;top:0;z-index:20;height:var(--mast-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);background:var(--white);border-bottom:1px solid var(--hair)}
.mast-brand{display:flex;align-items:baseline;gap:.5rem;color:var(--ink)}
.wordmark{font-family:var(--display);font-weight:700;letter-spacing:.22em;font-size:18px}
.mast-sub{font-size:var(--fs-sm);color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.mast-right{display:flex;align-items:center;gap:8px}
.icon-btn{min-width:var(--tap-sm);min-height:var(--tap-sm);border:1px solid var(--hair);background:var(--white);color:var(--ink);font-size:18px;cursor:pointer}
.pos-chip{font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--ochre);color:var(--ochre-text);padding:6px 10px;min-height:var(--tap-sm);display:inline-flex;align-items:center}
.app{max-width:var(--maxw);margin:0 auto;padding:var(--pad) var(--gutter)}
.foot{max-width:var(--maxw);margin:24px auto 0;padding:12px var(--gutter);font-size:var(--fs-xs);color:var(--ink-3);border-top:1px solid var(--hair-soft);display:flex;gap:10px}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(5,1fr);background:var(--white);border-top:1px solid var(--hair)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink-3);font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;position:relative;min-height:var(--tap)}
.tabbar a.active{color:var(--ochre-text);box-shadow:inset 0 3px 0 var(--ochre)}
.tabbar a:hover{text-decoration:none}
.tab-ic{font-size:18px;line-height:1}
.badge{position:absolute;top:8px;right:calc(50% - 26px);background:var(--late);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center}
/* buttons and fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--tap);padding:0 20px;border:1px solid var(--ochre);background:var(--ochre);color:#fff;font:inherit;font-weight:600;letter-spacing:.02em;cursor:pointer;text-decoration:none;width:100%}
.btn:hover{background:var(--ochre-dk);text-decoration:none}
.btn:disabled{opacity:.5;cursor:default}
.btn-sec{background:var(--white);color:var(--ink);border-color:var(--ink)}
.btn-sec:hover{background:var(--press)}
.btn-ghost{background:transparent;border-color:var(--hair);color:var(--ink)}
.btn-row{display:flex;gap:var(--gap);margin:12px 0}
.btn-row .btn{width:auto;flex:1}
html[data-theme="dark"] .btn{color:#0E100F}
html[data-theme="dark"] .btn-sec,html[data-theme="dark"] .btn-ghost{color:var(--ink)}
.field{margin:12px 0}
.field label{display:block;font-weight:600;font-size:var(--fs-sm);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;min-height:var(--tap);padding:10px 12px;border:1px solid var(--ink);background:var(--field);color:var(--ink);font:inherit;font-size:var(--fs-body)}
.field textarea{min-height:88px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--ochre);outline-offset:-1px}
.pin{letter-spacing:.6em;font-size:28px;text-align:center;font-weight:600}
.help{font-size:var(--fs-sm);color:var(--ink-3);margin-top:6px}
.err{border:1px solid var(--late);border-left:4px solid var(--late);padding:10px 12px;margin:12px 0;background:var(--late-wash)}
.note{border-left:4px solid var(--ochre);padding:10px 14px;margin:14px 0;background:var(--panel)}
/* panels and lists */
.panel{border:1px solid var(--hair);padding:var(--pad);margin:var(--gap) 0;background:var(--white)}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
@media (min-width:600px){.tile-grid{grid-template-columns:1fr 1fr 1fr}}
.tile{display:flex;flex-direction:column;justify-content:space-between;min-height:104px;border:1px solid var(--hair);padding:14px;color:var(--ink);background:var(--white)}
.tile:hover{text-decoration:none;background:var(--press)}
.tile .t-k{font-family:var(--display);font-size:var(--fs-h3);font-weight:600}
.tile .t-s{font-size:var(--fs-xs);color:var(--ink-3);margin-top:6px}
.tile.is-done{border-color:var(--now)} .tile.is-now{border-color:var(--ochre);border-width:2px}
.list{list-style:none}
.list li{display:flex;align-items:center;gap:12px;min-height:var(--tap);padding:10px 0;border-bottom:1px solid var(--hair-soft)}
.list li a{color:var(--ink);flex:1}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pill{display:inline-flex;align-items:center;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--hair)}
.pill.now{color:var(--now);border-color:var(--now);background:var(--now-wash)} .pill.next{color:var(--ochre-text);border-color:var(--ochre);background:var(--next-wash)} .pill.late{color:var(--late);border-color:var(--late);background:var(--late-wash)}
.bar{height:10px;background:var(--panel);border:1px solid var(--hair);margin:8px 0}
.bar > i{display:block;height:100%;background:var(--ochre)}
.day-row{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--hair-soft)}
.day-n{font-family:var(--display);font-size:var(--fs-h2);color:var(--ochre);line-height:1}
.day-row.is-today .day-n{text-decoration:underline}
.day-row.is-future{opacity:.65}
/* lesson reader */
.lesson h2{margin:.6em 0 .3em} .lesson h3{margin:1.2em 0 .4em;font-family:var(--body);font-weight:700;font-size:var(--fs-lead);text-transform:none}
.lesson p{margin:.7em 0} .lesson ul,.lesson ol{margin:.7em 0 .7em 1.3em} .lesson li{margin:.35em 0}
.lesson table{width:100%;border-collapse:collapse;margin:1em 0;font-size:var(--fs-sm)} .lesson th,.lesson td{border:1px solid var(--hair);padding:8px 10px;vertical-align:top;text-align:left} .lesson th{background:var(--panel);font-weight:700}
.lesson blockquote{border-left:4px solid var(--ochre);padding:8px 14px;margin:.9em 0;background:var(--panel);font-style:italic}
.lesson code{font-family:ui-monospace,Menlo,monospace;font-size:.92em;background:var(--panel);padding:1px 4px}
.lesson hr{border:0;border-top:1px solid var(--hair);margin:1.4em 0}
.fig{margin:1.2em 0} .fig img{display:block;width:100%;height:auto;border:1px solid var(--hair);background:#fff} .fig figcaption{font-size:var(--fs-xs);color:var(--ink-3);margin-top:6px}
.fig-placeholder .ph{border:2px dashed var(--hair);padding:22px 16px;background:var(--panel);display:flex;flex-direction:column;gap:4px}
.ph-k{font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ochre-text)} .ph-t{font-family:var(--display);font-size:var(--fs-h3)} .ph-n{font-size:var(--fs-xs);color:var(--ink-3)}
.lesson-nav{display:flex;justify-content:space-between;gap:12px;margin:24px 0}
.lesson-nav .btn{width:auto;flex:1}
.xref{border-bottom:1px dotted var(--ochre)}
/* quiz */
.q{border:1px solid var(--hair);padding:var(--pad);margin:var(--gap) 0}
.q-n{font-size:var(--fs-xs);color:var(--ink-3);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.q-stem{font-size:var(--fs-lead);margin:8px 0 12px}
.opts{display:grid;gap:8px}
.opt{display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:10px 14px;border:1px solid var(--ink);background:var(--white);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.opt:hover{background:var(--press)}
.opt.is-right{border-color:var(--now);background:var(--now-wash)} .opt.is-wrong{border-color:var(--late);background:var(--late-wash)}
.opt:disabled{cursor:default;opacity:.9}
.why{margin-top:12px;padding:10px 14px;border-left:4px solid var(--ochre);background:var(--panel);font-size:var(--fs-sm)}
.why.ok{border-color:var(--now)} .why.bad{border-color:var(--late)}
.score{font-family:var(--display);font-size:var(--fs-hero);color:var(--ochre);line-height:1}
/* checklists */
.chk{list-style:none}
.chk li{display:grid;grid-template-columns:var(--tap) 1fr;gap:10px;align-items:start;padding:8px 0;border-bottom:1px solid var(--hair-soft)}
.chk .sec{display:block;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:var(--fs-xs);color:var(--ochre-text);margin:14px 0 2px}
.chk button{width:var(--tap);height:var(--tap);border:2px solid var(--ink);background:var(--white);color:var(--ink);font-size:22px;cursor:pointer}
.chk button.on{background:var(--ochre);border-color:var(--ochre);color:#fff}
.chk .t{padding-top:12px} .chk .by{display:block;font-size:var(--fs-xs);color:var(--ink-3)}
.hours{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin:10px 0}
.hours span{display:flex;align-items:center;justify-content:center;height:36px;font-size:var(--fs-xs);font-weight:700;border:1px solid var(--hair)}
.hours .run{background:var(--now-wash);color:var(--now);border-color:var(--now)} .hours .skipped{background:var(--late-wash);color:var(--late);border-color:var(--late)} .hours .now{border-color:var(--ochre);border-width:2px;color:var(--ochre-text)}
.nudge{border:2px solid var(--ochre);padding:12px 14px;margin:12px 0;display:flex;justify-content:space-between;align-items:center;gap:12px}
/* drawer */
.denoms{display:grid;grid-template-columns:1fr;gap:8px}
.denom{display:grid;grid-template-columns:64px 1fr 100px;gap:10px;align-items:center}
.denom input{min-height:var(--tap);text-align:center;font-size:20px;font-weight:600;border:1px solid var(--ink);background:var(--field);color:var(--ink);width:100%}
.denom .d{font-family:var(--display);font-size:var(--fs-h3)} .denom .sub{text-align:right;color:var(--ink-3)}
.total{font-family:var(--display);font-size:var(--fs-hero);color:var(--ochre);text-align:right;line-height:1;margin:12px 0}
.slip{border:1px solid var(--ink);padding:14px;font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-sm);margin:12px 0}
/* floor map */
.map-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--hair)}
.map-wrap{position:relative;background:#fff;min-width:1000px}
.map-wrap svg{display:block;width:100%;height:auto}
.map-hot{position:absolute;transform:translate(-50%,-50%);min-width:44px;min-height:36px;padding:4px 8px;border:1px solid var(--ochre);background:rgba(255,255,255,.92);color:#7A5706;font:700 11px/1.1 var(--body);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;text-align:center}
.map-hot:hover{background:#B07E09;color:#fff}
/* card */
.card-values{display:grid;gap:8px;margin:12px 0}
.card-values div{border-left:4px solid var(--ochre);padding:8px 12px;background:var(--panel)}
.card-values b{display:block;font-family:var(--display);font-size:var(--fs-lead)}
.steps{display:grid;gap:10px;margin:12px 0} @media (min-width:600px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{border:1px solid var(--hair);padding:14px} .step b{display:block;font-family:var(--display);font-size:var(--fs-h3);color:var(--ochre)} .step .w{font-size:var(--fs-xs);color:var(--ink-3);margin-top:8px}
/* manager */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)} .tbl th,.tbl td{border-bottom:1px solid var(--hair-soft);padding:8px 6px;text-align:left;vertical-align:top} .tbl th{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.obs{display:flex;flex-wrap:wrap;gap:6px} .obs button{min-height:var(--tap-sm);padding:4px 10px;border:1px solid var(--hair);background:var(--white);color:var(--ink);font:inherit;font-size:var(--fs-xs);cursor:pointer} .obs button.on{border-color:var(--now);background:var(--now-wash);color:var(--now)}
.tabs{display:flex;gap:4px;overflow-x:auto;margin:8px 0 12px;border-bottom:1px solid var(--hair)}
.tabs button{min-height:var(--tap-sm);padding:6px 12px;border:0;border-bottom:3px solid transparent;background:none;color:var(--ink-3);font:inherit;font-weight:600;white-space:nowrap;cursor:pointer}
.tabs button.on{color:var(--ochre-text);border-bottom-color:var(--ochre)}
/* misc */
.toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 20px);transform:translateX(-50%);background:var(--ink);color:var(--white);padding:12px 18px;z-index:40;max-width:90vw;font-weight:600}
.signin{max-width:440px;margin:24px auto}
.people{display:grid;gap:8px;grid-template-columns:1fr 1fr}
.people button{min-height:var(--tap);border:1px solid var(--ink);background:var(--white);color:var(--ink);font:inherit;font-weight:600;cursor:pointer;padding:8px}
.positions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:12px 0}
.positions button{min-height:72px;border:2px solid var(--ink);background:var(--white);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:4px}
.positions button.on{border-color:var(--ochre);background:var(--next-wash)}
.positions small{font-weight:400;color:var(--ink-3);font-size:var(--fs-xs)}
@media print{.mast,.tabbar,.foot,.btn,.toast,.no-print{display:none !important}body{padding:0;background:#fff;color:#000}.slip{border:1px solid #000}}

/* welcome tour (V0.1.3) */
.tour{position:fixed;inset:0;z-index:60}
.tour.tour-dim{background:rgba(0,0,0,.55)}
.tour-hole{position:absolute;border:2px solid var(--ochre);box-shadow:0 0 0 9999px rgba(0,0,0,.55);pointer-events:none;transition:all .2s}
.tour-card{position:absolute;left:50%;transform:translateX(-50%);width:min(92vw,440px);background:var(--white);color:var(--ink);border:1px solid var(--ochre);padding:18px 18px 14px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.tour-card.tour-center{top:50%;transform:translate(-50%,-50%)}
.tour-card h2{margin:4px 0 8px;font-size:var(--fs-h2)}
.tour-card p{font-size:var(--fs-body)}
.tour-btns{display:flex;gap:8px;margin-top:14px}
.tour-btns .btn{width:auto;flex:1;min-height:var(--tap-sm)}