:root{--ink:#1c1c1c;--ink-2:#555;--ink-3:#8a8a8a;--paper:#F3EFE6;--card:#fff;--cream:#FBF7EE;--line:#DDD5C8;--black:#000;--gold:#ECAA00;--gold-2:#FFC72C;--gold-ink:#8a6200;--blue:#0070C0;--navy:#1F4E79;--red:#C00000;--green:#2E7D32;--blue-tint:#DEEDFA;--red-tint:#FBE3E3;--green-tint:#E3F1E4;--gold-tint:#FFF1D6;--disp:'Archivo',system-ui,sans-serif;--body:'Source Sans 3',system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45}
a{color:var(--blue)}
button,input,select,textarea{font-family:inherit;font-size:inherit}
button{cursor:pointer}
.wrap{max-width:1180px;margin:0 auto;padding:20px 16px 60px}
.narrow{max-width:440px;margin:0 auto;padding:0 0 40px}
.masthead{background:var(--black);color:#fff;border-bottom:6px solid var(--gold);padding:16px 20px}
.masthead .eyebrow{font:800 11px var(--disp);letter-spacing:.14em;color:var(--gold-2)}
.masthead .wm{display:block;height:40px;width:auto;margin:2px 0 6px}
.masthead.hero{background:#000 url(img/banner.jpg) right center/cover no-repeat}
.masthead .h2{font:800 13px var(--disp);letter-spacing:.12em;color:#fff;text-transform:uppercase}
.masthead h1{margin:3px 0 0;font:800 22px/1.1 var(--disp);letter-spacing:-.01em}
.masthead .sub{color:var(--gold);font-size:13.5px;margin-top:3px}
.masthead.round{border-radius:10px;margin-bottom:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.body{padding:14px;display:flex;flex-direction:column;gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.card h3{margin:0 0 8px;font:800 11px var(--disp);letter-spacing:.12em;color:var(--ink-3)}
.note{background:var(--cream);border:1px solid var(--line);border-left:6px solid var(--black);border-radius:8px;padding:10px 16px;font-size:14px;color:var(--ink-2)}
.note b{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--black);color:#fff;border:0;border-radius:10px;padding:13px 18px;font:800 15px var(--disp);text-decoration:none}
.btn.wide{width:100%}
.btn.gold{background:var(--gold);color:#000}
.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.btn.sm{padding:7px 12px;font-size:12.5px;border-radius:8px}
.btn.ghost.sm{border-color:var(--line);color:var(--ink-2)}
.btn.ghost.sm:hover{border-color:var(--ink);color:var(--ink)}
.btn.red{background:var(--red)}
.btn.green{background:var(--green)}
.btn:disabled{opacity:.5;cursor:default}
.field{display:flex;flex-direction:column;gap:5px;margin:10px 0}
.field label{font:800 11px var(--disp);letter-spacing:.1em;color:var(--ink-3)}
.field input,.field select,.field textarea{border:1.5px solid var(--line);border-radius:9px;padding:11px 12px;font-size:16px;background:#fff}
.field input:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.field input.code{font:800 22px var(--disp);letter-spacing:.12em;text-align:center;text-transform:uppercase}
.field input.pin{font:800 28px var(--disp);letter-spacing:.5em;text-align:center}
.err{background:var(--red-tint);border:1px solid var(--red);color:var(--red);border-radius:8px;padding:9px 12px;font-weight:700;font-size:14px}
.ok{background:var(--green-tint);border:1px solid var(--green);color:var(--green);border-radius:8px;padding:9px 12px;font-weight:700;font-size:14px}

/* tonight */
.tonight{border:2px solid var(--navy);position:relative}
.tonight.open{border-color:var(--green);background:var(--green-tint)}
.tonight.done{border-color:var(--green)}
.tonight.tardy{border-color:var(--gold)}
.tonight .big{font:800 20px/1.15 var(--disp);margin:0 0 4px}
.tonight p{margin:0;font-size:14px;color:var(--ink-2)}

/* tiles + pips (option B) */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{background:var(--card);border:2px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center}
.tile .ico{height:34px;width:34px;display:block;margin:0 auto 4px}
.tile .n{font:900 30px/1 var(--disp);font-variant-numeric:tabular-nums}
.tile .n.word{font-size:19px;padding:6px 0 5px}
.tile .rules{display:block;margin-top:5px;font:700 11px var(--disp);color:var(--blue);background:none;border:0;padding:0;text-decoration:underline}
.pop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:flex-end;justify-content:center;padding:14px;z-index:60}
.pop.on{display:flex}
.pop .sheet{background:#fff;border-radius:16px;padding:18px;width:min(440px,100%);max-height:85vh;overflow:auto;border-bottom:6px solid var(--gold)}
.pop h2{margin:0 0 4px;font:800 19px var(--disp)}
.pop .k{font:800 11px var(--disp);letter-spacing:.12em;color:var(--ink-3);margin:12px 0 4px}
.pop ol,.pop ul{margin:0;padding-left:20px;font-size:14px}
.pop li{margin:4px 0}
.pop .late{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:6px}
.pop .late div{text-align:center;border:1px solid var(--line);border-radius:8px;padding:6px 2px}
.pop .late b{display:block;font:900 14px var(--disp)}
.pop .late small{font-size:10px;color:var(--ink-2)}
.goal{font-size:12px;color:var(--ink-2);text-align:center;margin:-4px 0 0;line-height:1.35}
.goal b{color:var(--ink)}
.tile .of{font:700 12px var(--disp);color:var(--ink-3)}
.tile .lbl{font:800 12px var(--disp);margin-top:4px}
.tile .cost{font-size:11px;color:var(--ink-2);margin-top:3px;line-height:1.25}
.tile.navy{border-color:var(--navy)}.tile.navy .n{color:var(--navy)}
.tile.gold{border-color:var(--gold)}.tile.gold .n{color:#b07e00}
.tile.green{border-color:var(--green)}.tile.green .n{color:var(--green)}
.tile.red{border-color:var(--red)}.tile.red .n{color:var(--red)}
.pips{display:flex;gap:4px;justify-content:center;margin-top:6px;align-items:center}
.bp{display:inline-flex;align-items:center;gap:9px}
.bp .grp{display:inline-flex;align-items:center;gap:4px}
.bp .k{font:800 9.5px var(--disp);letter-spacing:.08em;color:var(--ink-3);margin-right:2px}
.ldp{width:14px;height:18px;border-radius:3px;border:2px solid var(--green);background:var(--green-tint);position:relative;display:inline-block}
.ldp.used{border-color:var(--red);background:var(--red-tint)}
.ldp.used::after{content:'';position:absolute;inset:2px;background:linear-gradient(45deg,transparent 43%,var(--red) 43%,var(--red) 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,var(--red) 43%,var(--red) 57%,transparent 57%)}
.tdp{width:9px;height:9px;border-radius:50%;border:2px solid var(--line);background:#fff;display:inline-block}
.tdp.on{border-color:var(--gold);background:var(--gold)}
.tkp{display:inline-block;font:800 9.5px var(--disp);letter-spacing:.06em;padding:2px 7px;border-radius:4px;border:2px solid var(--green);color:var(--green);background:var(--green-tint)}
.tkp.used{border-color:var(--line);color:var(--ink-3);background:#f3f3f3;font-size:0}.tkp.used::after{content:'USED';font-size:9.5px}
.bp.big .ldp{width:22px;height:28px;border-radius:5px}.bp.big .tdp{width:14px;height:14px}.bp.big .tkp{font-size:12px;padding:4px 10px}.bp.big .tkp.used::after{font-size:12px}
.pips .ldp{width:18px;height:22px}.pips .tdp{width:11px;height:11px}.pips .tkp{font-size:11px;padding:3px 9px}.pips .tkp.used::after{font-size:11px}

/* items */
.items{display:flex;flex-direction:column;gap:8px}
.item{display:flex;gap:10px;align-items:flex-start;border-radius:9px;padding:10px 12px;border:1px solid var(--line);background:var(--cream)}
.item.warn{background:var(--gold-tint);border-color:var(--gold)}
.item.ok{background:var(--green-tint);border-color:#9fcaa3}
.item .t{font:700 14px var(--body)}
.item .d{font-size:12.5px;color:var(--ink-2)}
.item .d a{font-weight:700}
.item .ico{font-size:18px;line-height:1.1;min-width:22px;text-align:center}
.due{display:flex;flex-direction:column;gap:1px;margin-top:7px;font:800 11px var(--disp);letter-spacing:.03em;padding:5px 10px;border-radius:8px;background:var(--gold-tint);color:var(--gold-ink);border:1px solid var(--gold)}
.due.urgent{background:var(--red-tint);color:var(--red);border-color:var(--red)}
.due .cd{font-variant-numeric:tabular-nums;font-weight:900;font-size:13px}
.canvasnote{font-size:11.5px;color:var(--ink-2);margin:-2px 0 8px;line-height:1.35}
.canvasnote b{color:var(--ink)}

/* timeline */
.timeline{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:60px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}
.row:first-child{border-top:0}
.row .date{font:700 12.5px var(--disp);color:var(--ink-2);font-variant-numeric:tabular-nums}
.row .what small{display:block;color:var(--ink-3);font-size:12px}
.chip{display:inline-block;font:800 10.5px var(--disp);letter-spacing:.06em;padding:3px 8px;border-radius:20px;white-space:nowrap}
.chip.p{background:var(--green-tint);color:var(--green)}
.chip.t{background:var(--gold-tint);color:var(--gold-ink)}
.chip.x{background:var(--red-tint);color:var(--red)}
.chip.e{background:var(--blue-tint);color:var(--navy)}
.chip.q{background:var(--navy);color:#fff}
.chip.n{background:#eee;color:var(--ink-2)}
.chip.f{background:#eee;color:var(--ink-3)}
.foot{padding:12px 16px 22px;font-size:11.5px;color:var(--ink-3);text-align:center}
.stripe{display:flex;flex-direction:column;gap:2px;border-left:6px solid var(--green);padding:6px 12px;border-radius:4px;background:var(--green-tint);margin:10px 0}
.stripe.y{border-left-color:var(--gold);background:var(--gold-tint)}
.stripe.r{border-left-color:var(--red);background:var(--red-tint)}
.stripe .w{font:800 15px var(--disp)}
.stripe .d{font-size:12.5px;color:var(--ink-2)}
.qrbox{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.qrbox canvas,.qrbox img,.qrbox svg{max-width:220px;width:100%;height:auto}
.doorhero{display:block;height:170px;width:auto;margin:4px auto 0}
.drawer .ico{height:14px;width:14px;vertical-align:-2px;margin-right:4px}
.codeline{font:800 20px var(--disp);letter-spacing:.12em;margin-top:8px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--black);color:#fff;padding:10px 18px;border-radius:30px;font:700 13px var(--disp);opacity:0;transition:opacity .25s;pointer-events:none;z-index:50}
.toast.on{opacity:1}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}