/* The platform's look: plan step 4's approved mockup (docs/steps/04-mockup.html), with the phone's own fonts. */
:root { --bg:#090d14; --card:#121925; --card2:#182131; --ink:#f2f5fa; --mute:#8d98ab; --line:#232d3e; --soft:#1b2433;
        --head:#05080e; --headink:#fff; --blue:#3b82f6; --blue2:#1d4ed8; --bluesoft:#16264a; --red:#ff5a5f; --redsoft:#3a1519;
        --green:#2fd27c; --greensoft:#0f2e20; --amber:#ffc23d; --ambersoft:#33270a; --gold:#ffb81c;
        --cond:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; background:var(--bg); color:var(--ink); }
body { font:15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; max-width:480px; margin:0 auto; min-height:100vh;
       background:radial-gradient(120% 40% at 50% 0%, #13213d 0%, var(--bg) 60%) no-repeat, var(--bg); }
button { font:inherit; color:inherit; cursor:pointer; }
.top { position:sticky; top:0; z-index:5; background:rgba(5,8,14,.92); backdrop-filter:blur(10px); color:var(--headink); border-bottom:1px solid var(--line); }
.top .t { display:flex; align-items:center; gap:10px; padding:12px 14px; min-height:54px; }
.top .t b { font-family:var(--cond); font-size:19px; font-weight:800; letter-spacing:-.01em; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top .back { background:none; border:0; color:var(--headink); font-size:15px; padding:4px 8px 4px 0; opacity:.85; }
.top .back.hm { border:1px solid var(--line); border-radius:20px; padding:5px 12px; font-size:13px; }
.clock { color:var(--mute); font-size:12.5px; padding:7px 14px; display:flex; align-items:center; gap:7px; }
.clock::before { content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 0 3px rgba(255,90,95,.2); }
.wrap { padding:10px 14px 40px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:12px 14px; margin-bottom:12px; }
.hero { position:relative; overflow:hidden; display:block; border-radius:20px; padding:16px; margin:4px 0 14px; border:1px solid #2a3a5c;
        background:linear-gradient(135deg, #1b3a7a 0%, #142542 45%, #2a1430 100%); width:100%; text-align:left; color:var(--ink); }
.hero::after { content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:rgba(255,184,28,.10); }
.hero .lbl { font-family:var(--cond); letter-spacing:0; font-size:12.5px; color:#b9c6e0; font-weight:700; display:flex; justify-content:space-between; }
.hero .sides { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin:12px 0 10px; }
.hero .side { display:flex; align-items:center; gap:10px; min-width:0; } .hero .side.r { flex-direction:row-reverse; text-align:right; }
.hero .av { width:34px; height:34px; font-size:11.5px; } .hero .side { gap:8px; }
.hero .pts { font-family:var(--cond); font-size:24px; letter-spacing:-.02em; font-weight:800; line-height:1; }
.hero .tn { font-size:12px; color:#c9d4ea; }
.hero .vs2 { font-family:var(--cond); color:#9fb0d0; font-weight:700; }
.winbar { height:8px; border-radius:6px; background:rgba(255,90,95,.45); overflow:hidden; } .winbar i { display:block; height:100%; background:linear-gradient(90deg, var(--gold), #ffd76a); }
.hero .foot2 { display:flex; justify-content:space-between; font-size:12px; color:#c9d4ea; margin-top:6px; }
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tile { background:linear-gradient(180deg, var(--card2), var(--card)); border:1px solid var(--line); border-radius:16px; padding:12px; text-align:left; min-height:112px; position:relative; }
.tile .ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--bluesoft); color:#8db8ff; margin-bottom:8px; }
.tile .ic svg { width:19px; height:19px; }
.tile b { display:block; font-family:var(--cond); font-size:15.5px; font-weight:700; letter-spacing:-.01em; margin-bottom:1px; }
.tile small { display:block; color:var(--mute); font-size:12.5px; }
.tile.alert { border-color:var(--red); box-shadow:0 0 0 1px var(--red) inset; } .tile.alert .ic { background:var(--redsoft); color:var(--red); }
.tile.alert small.p { color:#ff8a8e; font-weight:700; }
.tile .badge { position:absolute; top:10px; right:10px; background:var(--red); color:#fff; font-weight:800; font-size:12px; border-radius:10px; min-width:20px; height:20px; display:grid; place-items:center; padding:0 6px; }
.row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); width:100%; background:none; border-left:0; border-right:0; border-top:0; text-align:left; }
.row:last-child { border-bottom:0; }
.av { flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-family:var(--cond); font-weight:700; font-size:13.5px;
      color:#fff; box-shadow:inset 0 -3px 0 rgba(0,0,0,.25); position:relative; letter-spacing:.02em; }
.av.lg { width:64px; height:64px; font-size:20px; }
.av .nt { position:absolute; bottom:-4px; right:-7px; background:#0b1018; color:#fff; border:1px solid var(--line); border-radius:6px; font-size:9px; padding:0 3px; font-family:system-ui, sans-serif; font-weight:700; line-height:1.4; }
.slot { flex:none; width:44px; text-align:center; font-family:var(--cond); font-size:12.5px; font-weight:800; border:1.5px solid var(--blue); color:#8db8ff; border-radius:10px; padding:3px 0; background:rgba(59,130,246,.08); }
.slot.lk { border-color:var(--line); color:var(--mute); background:transparent; }
.who { flex:1; min-width:0; }
.who .n { font-weight:700; font-size:15px; }
.who small { display:block; color:var(--mute); font-size:12.5px; }
.num { flex:none; text-align:right; font-variant-numeric:tabular-nums; font-family:var(--cond); font-weight:700; font-size:17px; line-height:1.05; }
.num small { display:block; color:var(--mute); font-size:11px; font-weight:500; font-family:system-ui, sans-serif; }
.why { display:block; color:var(--amber); font-size:12.5px; }
.tag { font-size:10.5px; font-weight:800; border-radius:5px; padding:1px 5px; margin-left:6px; vertical-align:2px; letter-spacing:.03em; }
.OUT { background:#c8333a; color:#fff; } .DTD { background:var(--amber); color:#1a1200; }
.btn { display:block; width:100%; border:0; border-radius:14px; padding:13px; font-weight:800; background:linear-gradient(180deg, #2b66dc, var(--blue2)); color:#fff;
       margin-top:10px; font-size:15px; box-shadow:0 6px 18px rgba(37,99,235,.35); }
.btn.ghost { background:transparent; color:#8db8ff; border:1.5px solid #2f4f8f; box-shadow:none; }
.btn.red { background:linear-gradient(180deg, #cc2f35, #a8242a); box-shadow:0 6px 18px rgba(217,58,64,.35); }
.btn:disabled { background:var(--soft); color:var(--mute); border-color:var(--line); box-shadow:none; }
.sm { display:inline-block; width:auto; margin:0; padding:7px 13px; font-size:13px; border-radius:10px; flex:none; box-shadow:none; }
.warn { border:1px solid var(--red); background:linear-gradient(180deg, #3d151a, #2a1013); border-radius:14px; padding:11px 13px; margin-bottom:10px; }
.warn b { color:#ff8a8e; }
.info { background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:10px 12px; font-size:13.5px; margin:10px 0; color:#d5dcea; }
.ok { background:var(--greensoft); border-color:#1d5a3c; }
.h { font-family:var(--cond); font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--mute); margin:16px 0 6px; text-transform:uppercase; }
.pick { background:var(--bluesoft); border-radius:12px; padding-left:8px; padding-right:8px; box-shadow:inset 0 0 0 1px #2f4f8f; }
.grey { opacity:.55; }
label { font-size:13px; color:var(--mute); font-weight:600; }
input, textarea { font:inherit; width:100%; border:1.5px solid var(--line); border-radius:12px; padding:12px; background:var(--card); color:var(--ink); margin:6px 0 10px; }
input:focus, textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,130,246,.25); }
.up { color:var(--green); font-weight:700; } .down { color:var(--red); font-weight:700; }
.chips { display:flex; gap:8px; margin:8px 0; flex-wrap:wrap; }
.chip { border:1.5px solid var(--line); background:var(--card); border-radius:20px; padding:6px 12px; font-size:13px; font-weight:600; color:#c9d2e2; }
.chip.on { border-color:var(--gold); color:#1a1200; background:var(--gold); }
.strip { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; margin:8px 0; }
.strip > * { border:1.5px solid var(--line); border-radius:10px; padding:6px 0; text-align:center; font-size:11.5px; background:var(--card); color:var(--mute); }
.strip .g { border-color:#2f6b4c; background:var(--greensoft); color:var(--green); font-weight:700; }
.strip .on { border-color:var(--gold); background:var(--gold); color:#1a1200; font-weight:800; }
.vs { display:grid; grid-template-columns:1fr 38px 1fr; gap:6px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.vs .m { text-align:center; font-family:var(--cond); font-size:11.5px; font-weight:800; color:var(--mute); }
.vs .r { text-align:right; }
.vs button { background:none; border:0; padding:0; text-align:inherit; width:100%; }
.vs b { font-family:var(--cond); font-size:15px; }
.vs small { display:block; color:var(--mute); font-size:11.5px; }
.score { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; margin-bottom:6px; }
.score .big { font-family:var(--cond); font-size:31px; letter-spacing:-.02em; font-weight:800; line-height:1; } .score .r { text-align:right; }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
td, th { padding:8px 4px; border-bottom:1px solid var(--line); text-align:left; }
th { color:var(--mute); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; }
.me td { font-weight:800; color:var(--gold); }
.shade { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:20; display:flex; align-items:flex-end; justify-content:center; }
.sheet { background:var(--card); width:100%; max-width:480px; border-radius:22px 22px 0 0; padding:10px 16px 24px; max-height:85vh; overflow:auto; border-top:1px solid var(--line); }
.sheet::before { content:""; display:block; width:40px; height:5px; border-radius:3px; background:var(--line); margin:0 auto 12px; }
.sheet h3 { margin:2px 0 8px; font-family:var(--cond); font-size:18px; letter-spacing:-.01em; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#f2f5fa; color:#0b1018; font-weight:700; padding:11px 16px; border-radius:14px; z-index:30; font-size:14px; max-width:90%; box-shadow:0 10px 30px rgba(0,0,0,.5); }
.clockbig { font-family:var(--cond); font-size:36px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--gold); }
.linkbtn { background:none; border:0; color:#8db8ff; padding:0; font-size:13px; text-decoration:underline; }
.sec { background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-top:14px; }
.sec .sh { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 14px; font-family:var(--cond); font-size:13.5px; font-weight:700; letter-spacing:0; }
.sec .sh span:last-child { font-size:12px; border-radius:8px; padding:1px 8px; background:rgba(255,255,255,.12); white-space:nowrap; }
.sec.st .sh { background:linear-gradient(90deg, #1d4ed8, #153a96); color:#fff; }
.sec.be .sh { background:var(--card2); color:#c9d2e2; }
.sec.ir .sh { background:linear-gradient(90deg, #7a1f26, #4a1419); color:#ffd0d2; }
.sec .row { padding:10px 12px 10px 8px; border-left:5px solid transparent; }
.sec .row.prob { border-left-color:var(--red); background:linear-gradient(90deg, rgba(255,90,95,.16), rgba(255,90,95,.04)); }
.sec .row.good { border-left-color:var(--green); }
.probtxt { display:block; color:#ff8a8e; font-size:12.5px; font-weight:800; }
.oktxt { display:block; color:var(--green); font-size:12.5px; font-weight:800; }
.empty { display:block; width:calc(100% - 16px); margin:8px; padding:11px 12px; border:2px dashed var(--red); border-radius:12px;
         background:rgba(255,90,95,.08); color:#ff8a8e; font-weight:800; text-align:left; font-size:14px; }
.empty small { display:block; font-weight:500; font-size:12.5px; }
.empty.n { border-color:#3a4659; background:transparent; color:var(--mute); font-weight:700; }
.gt { display:inline-block; font-size:11.5px; font-weight:800; border-radius:6px; padding:1px 7px; margin:3px 0 1px; }
.gt.yes { background:var(--greensoft); color:var(--green); } .gt.late { background:var(--ambersoft); color:var(--amber); } .gt.on { background:var(--bluesoft); color:#8db8ff; } .gt.no { background:var(--soft); color:var(--mute); }
.n.today { color:var(--green); }
.n.today::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green); margin-right:6px; vertical-align:1px; box-shadow:0 0 0 3px rgba(47,210,124,.2); }
.legend { font-size:12.5px; color:var(--mute); margin:6px 0 0; }
.legend .n.today { font-weight:700; }
.todo .row { gap:10px; } .todo .btn.sm { pointer-events:none; }
.dot { flex:none; width:10px; height:10px; border-radius:50%; }
.dot.red { background:var(--red); box-shadow:0 0 0 4px rgba(255,90,95,.18); } .dot.amber { background:var(--amber); box-shadow:0 0 0 4px rgba(255,194,61,.15); }
.dot.green { background:var(--green); box-shadow:0 0 0 4px rgba(47,210,124,.18); }
.seg { display:grid; grid-template-columns:1fr 1fr; gap:6px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:4px; margin:4px 0 8px; }
.seg .chip { border:0; border-radius:10px; padding:8px; text-align:center; }
.fl { display:flex; align-items:center; gap:8px; } .fl > span { flex:none; width:58px; font-size:11.5px; color:var(--mute); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.fl .chips { margin:5px 0; gap:6px; } .fl .chip { padding:5px 10px; font-size:12.5px; }
.filt { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:2px 12px 8px; margin:2px 0 4px; }
.filt summary { list-style:none; cursor:pointer; padding:9px 0 3px; } .filt summary::-webkit-details-marker { display:none; }
.filt summary b { font-family:var(--cond); font-size:14px; } .filt summary b::after { content:" ▾"; color:var(--mute); }
.filt[open] summary b::after { content:" ▴"; } .filt summary small { display:block; color:var(--gold); font-size:12.5px; font-weight:600; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; }
select { font:inherit; font-size:14px; width:100%; margin:4px 0 0; padding:10px; border-radius:12px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); }
.stab { overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:16px; -webkit-overflow-scrolling:touch; }
.stab table { min-width:680px; font-size:13px; } .stab tr { cursor:pointer; }
.stab th:first-child, .stab td:first-child { position:sticky; left:0; background:var(--card); z-index:1; min-width:132px; box-shadow:1px 0 0 var(--line); padding-left:12px; }
.stab td small { display:block; color:var(--mute); font-size:11.5px; }
.statgrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; } .statgrid > div { background:var(--soft); border-radius:10px; padding:7px 4px; text-align:center; font-size:11px; color:var(--mute); }
.statgrid b { display:block; color:var(--ink); font-family:var(--cond); font-size:16px; }
.foot { color:var(--mute); font-size:12px; text-align:center; margin-top:18px; }

/* step 11: what the mockup did with inline styles, as classes (the security policy allows no inline styles) */
.av.tm-none { background:linear-gradient(160deg, #334, #0b1018 130%); }
.tm-ATL { background:linear-gradient(160deg, #e03a3e, #0b1018 130%); }
.tm-BOS { background:linear-gradient(160deg, #007a33, #0b1018 130%); }
.tm-BKN { background:linear-gradient(160deg, #555555, #0b1018 130%); }
.tm-CHA { background:linear-gradient(160deg, #1d1160, #0b1018 130%); }
.tm-CHI { background:linear-gradient(160deg, #ce1141, #0b1018 130%); }
.tm-CLE { background:linear-gradient(160deg, #860038, #0b1018 130%); }
.tm-DAL { background:linear-gradient(160deg, #00538c, #0b1018 130%); }
.tm-DEN { background:linear-gradient(160deg, #0e2240, #0b1018 130%); }
.tm-DET { background:linear-gradient(160deg, #c8102e, #0b1018 130%); }
.tm-GSW { background:linear-gradient(160deg, #1d428a, #0b1018 130%); }
.tm-HOU { background:linear-gradient(160deg, #ce1141, #0b1018 130%); }
.tm-IND { background:linear-gradient(160deg, #002d62, #0b1018 130%); }
.tm-LAC { background:linear-gradient(160deg, #c8102e, #0b1018 130%); }
.tm-LAL { background:linear-gradient(160deg, #552583, #0b1018 130%); }
.tm-MEM { background:linear-gradient(160deg, #5d76a9, #0b1018 130%); }
.tm-MIA { background:linear-gradient(160deg, #98002e, #0b1018 130%); }
.tm-MIL { background:linear-gradient(160deg, #00471b, #0b1018 130%); }
.tm-MIN { background:linear-gradient(160deg, #236192, #0b1018 130%); }
.tm-NOP { background:linear-gradient(160deg, #0c2340, #0b1018 130%); }
.tm-NYK { background:linear-gradient(160deg, #f58426, #0b1018 130%); }
.tm-OKC { background:linear-gradient(160deg, #007ac1, #0b1018 130%); }
.tm-ORL { background:linear-gradient(160deg, #0077c0, #0b1018 130%); }
.tm-PHI { background:linear-gradient(160deg, #006bb6, #0b1018 130%); }
.tm-PHX { background:linear-gradient(160deg, #1d1160, #0b1018 130%); }
.tm-POR { background:linear-gradient(160deg, #e03a3e, #0b1018 130%); }
.tm-SAC { background:linear-gradient(160deg, #5a2d81, #0b1018 130%); }
.tm-SAS { background:linear-gradient(160deg, #5b6670, #0b1018 130%); }
.tm-TOR { background:linear-gradient(160deg, #ce1141, #0b1018 130%); }
.tm-UTA { background:linear-gradient(160deg, #3e2680, #0b1018 130%); }
.tm-WAS { background:linear-gradient(160deg, #002b5c, #0b1018 130%); }
.ft-1 { background:linear-gradient(160deg, #2563eb, #0b1018 140%); }
.ft-2 { background:linear-gradient(160deg, #b4232b, #0b1018 140%); }
.ft-3 { background:linear-gradient(160deg, #0f766e, #0b1018 140%); }
.ft-4 { background:linear-gradient(160deg, #a16207, #0b1018 140%); }
.ft-5 { background:linear-gradient(160deg, #7c3aed, #0b1018 140%); }
.ft-6 { background:linear-gradient(160deg, #be185d, #0b1018 140%); }
.ft-7 { background:linear-gradient(160deg, #15803d, #0b1018 140%); }
.ft-8 { background:linear-gradient(160deg, #c2410c, #0b1018 140%); }
.ft-9 { background:linear-gradient(160deg, #0369a1, #0b1018 140%); }
.ft-10 { background:linear-gradient(160deg, #4d7c0f, #0b1018 140%); }
.ft-11 { background:linear-gradient(160deg, #9333ea, #0b1018 140%); }
.ft-12 { background:linear-gradient(160deg, #b91c1c, #0b1018 140%); }
.ft-13 { background:linear-gradient(160deg, #0e7490, #0b1018 140%); }
.ft-14 { background:linear-gradient(160deg, #854d0e, #0b1018 140%); }
.ft-15 { background:linear-gradient(160deg, #6d28d9, #0b1018 140%); }
.ft-16 { background:linear-gradient(160deg, #9d174d, #0b1018 140%); }
.ft-17 { background:linear-gradient(160deg, #166534, #0b1018 140%); }
.ft-18 { background:linear-gradient(160deg, #9a3412, #0b1018 140%); }
.ft-19 { background:linear-gradient(160deg, #075985, #0b1018 140%); }
.ft-20 { background:linear-gradient(160deg, #3f6212, #0b1018 140%); }
.muted { color:var(--mute); } .big19 { font-size:19px; } .flex8 { display:flex; gap:8px; } .flex8 > * { flex:1; }
.cardrow { display:flex; align-items:center; gap:12px; }
.tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:10px 0; }
.err { color:#ff8a8e; font-weight:700; font-size:13.5px; min-height:1em; margin:2px 0 8px; }
.center { text-align:center; } .mt { margin-top:14px; }
.strip button { font:inherit; font-size:11.5px; }
.strip .x { opacity:.4; }
.livedot { color:#ff8a8e; font-weight:800; } .livedot::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--red); margin-right:5px; vertical-align:1px; box-shadow:0 0 0 3px rgba(255,90,95,.25); }
.strip .room { border-color:#7a5a12; background:var(--ambersoft); color:var(--amber); }
.strip .over { border-color:#2f4f8f; background:var(--bluesoft); color:#8db8ff; }
.strip b { font-size:13px; } .tagroom { color:var(--amber); font-weight:700; } .tagover { color:#8db8ff; font-weight:700; }
.strip.hd { margin-bottom:0; } .strip.hd > * { border:0; background:none; padding:0; font-size:11px; font-weight:700; }
.loading { color:var(--mute); padding:40px 14px; text-align:center; }
a { color:#8db8ff; }

/* contrast (WCAG AA, 4.5:1) measured Oct 29: the blue button 5.2 at its lightest, the red one 5.2, the OUT tag 5.3 */

/* suggested moves (step 15) */
.opt .otop { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.opt .oday { font-weight:700; }
.pill { font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--bluesoft); color:#8db8ff; }
.pill.amber { background:var(--ambersoft); color:var(--amber); }
.owin { margin-left:auto; font-weight:800; font-size:20px; text-align:right; line-height:1; }
.owin small { display:block; font-size:11px; font-weight:500; color:var(--mute); margin-top:2px; }
.oline { margin-top:6px; }
.onums { margin-top:6px; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:13.5px; }
.whys { margin:8px 0 0; padding-left:18px; font-size:12.5px; color:var(--mute); }
.whys li { margin:2px 0; }
.oact { margin-top:10px; display:flex; justify-content:flex-end; }
.oact .when { font-size:13px; color:var(--mute); }
.wins { display:flex; align-items:center; justify-content:space-around; text-align:center; }
.wins b { font-size:28px; display:block; }
.wins small { font-size:12px; color:var(--mute); }
.wins .arrow { font-size:22px; color:var(--mute); }
.plan summary { cursor:pointer; font-weight:600; padding:4px 0; }
.wcline { margin:8px 0 2px; font-size:13.5px; } .wcline b { font-size:16px; }

/* the Sports Desk (step 16) */
.desk .dhead { margin-bottom:4px; } .desk .dhead b { display:block; font-family:var(--cond); font-size:16px; }
.desk .dhead small { color:var(--mute); font-size:12.5px; }
.dscore { display:flex; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.dscore span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dscore span:last-child { text-align:right; } .dscore .dash { flex:none; color:var(--mute); }
.dscore .w { color:var(--green); font-weight:700; }
.dstory { padding:10px 0 2px; font-size:14px; line-height:1.45; }
.dstory .dlab { display:block; font-family:var(--cond); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin-bottom:2px; }

/* the quiz (step 16) */
.qh { display:block; font-family:var(--cond); font-size:17px; margin-bottom:2px; }
.qline { display:flex; justify-content:space-between; gap:10px; font-size:13.5px; margin:8px 0 2px; }
.ladder { display:grid; grid-template-columns:repeat(12, 1fr); gap:3px; margin:6px 0; }
.ladder span { height:8px; border-radius:4px; background:var(--soft); border:1px solid var(--line); }
.ladder span.up { background:var(--gold); border-color:var(--gold); }
.qtext { font-size:16.5px; font-weight:700; line-height:1.35; margin:2px 0 10px; }
.qopt { display:flex; flex-wrap:wrap; align-items:center; gap:10px; width:100%; text-align:left; padding:11px 12px; margin:8px 0 0;
        border:1.5px solid #2f4f8f; border-radius:12px; background:var(--card2); color:var(--ink); font-size:15px; }
.qopt .ql { flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:12.5px;
            background:var(--bluesoft); color:#8db8ff; }
.qopt small { flex-basis:100%; padding-left:34px; font-size:12px; color:var(--mute); }
.qopt.right { border-color:var(--green); background:var(--greensoft); } .qopt.right small { color:var(--green); }
.qopt.wrong { border-color:var(--red); background:var(--redsoft); } .qopt.wrong small { color:#ff9a9d; }
.qopt.gone { opacity:.55; border-style:dashed; }
.qclue { margin-top:10px; font-size:13.5px; color:var(--amber); }
.touts { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; } .touts .btn { margin-top:0; padding:10px 6px; font-size:13px; }
.tout { border:1.5px dashed var(--line); border-radius:12px; padding:8px 6px; text-align:center; font-size:13px; color:var(--mute); }
.tout small { display:block; font-size:11.5px; }
.qend b { display:block; font-family:var(--cond); font-size:17px; } .qend small { color:var(--mute); }

/* step 17's alpha */
.card.alpha { border-color:#7a5a12; background:linear-gradient(180deg, var(--ambersoft), var(--card)); }
.card.alpha b { display:block; font-family:var(--cond); font-size:15.5px; color:var(--amber); }
.card.alpha small { display:block; color:var(--ink); font-size:13px; margin-top:2px; }

/* Moves: Plans, What-if, What-if trades (docs/steps/15-plans-and-whatif.md) */
button, [data-act] { touch-action:manipulation; }
.mvtabs { position:sticky; top:54px; z-index:4; display:grid; grid-template-columns:repeat(3, 1fr); background:rgba(5,8,14,.94); border-bottom:1px solid var(--line); }
.mvtab { min-height:48px; background:none; border:0; border-bottom:3px solid transparent; color:var(--mute); font-weight:700; font-size:14px; padding:0 4px; }
.mvtab.on { color:var(--ink); border-bottom-color:var(--blue); }
.plan2 .otop { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.plan2 .otop .muted { flex:1; font-size:12.5px; }
.pmove { display:grid; grid-template-columns:78px 1fr auto; gap:8px; align-items:start; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; }
.pmove small { display:block; font-size:12.5px; }
.pday { color:var(--mute); font-size:12.5px; padding-top:1px; }
.pgain { font-weight:800; color:var(--green); font-variant-numeric:tabular-nums; }
.pact { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.pact .btn.sm { min-height:44px; padding:10px 14px; }
.wgrid { display:grid; grid-template-columns:repeat(5, 1fr); gap:6px 4px; }
.wcell { display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 0 4px; border-radius:12px; border:2px solid transparent; background:none; color:inherit;
         touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; min-height:72px; }
.wcell .av { width:40px; height:40px; font-size:12.5px; }
.wcell small { font-size:11px; color:var(--mute); max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wcell .sl { font-size:10.5px; font-weight:800; color:#8db8ff; line-height:1.2; }
.wcell .sl.red { color:#ff8a8e; } .wcell .sl.amber { color:var(--amber); }
.wcell.new .sl { color:var(--green); }
.wcell.empty .av { background:transparent; border:2px dashed #3a4a66; box-shadow:none; color:var(--mute); font-size:11px; }
.wcell.sel { border-color:var(--amber); background:var(--ambersoft); }
.wcell.gone .av { opacity:.45; }
.wcal { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
.wday { min-height:72px; border:2px solid var(--line); border-radius:10px; text-align:center; padding:4px 1px; background:var(--card); color:var(--ink); font-size:11.5px; touch-action:manipulation; }
.wday small { display:block; color:var(--mute); font-size:11px; }
.wday b { display:block; font-size:17px; line-height:1.2; }
.wday .mk i { display:block; font-style:normal; font-size:9.5px; line-height:1.3; color:#d5dcea; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.wday.past { opacity:.35; }
.wday.game { background:#4a3c06; border-color:var(--amber); }
.wday.game small { color:#ffe08a; }
.wday.ok, .wcell.ok { border-color:var(--green); box-shadow:0 0 0 1px var(--green) inset; }
.wday.no, .wcell.no { border-color:var(--red); }
.wghost { position:fixed; z-index:50; pointer-events:none; transform:translate(-50%, -75%) scale(1.2); opacity:.92; }
.wsay { min-height:38px; font-size:13px; margin:8px 0 4px; color:#ffe08a; }
/* Taps (the user, Oct 30: "some tabs don't register taps well"): every control at least 44 px tall, measured at 375 px */
.top .back { min-height:44px; min-width:44px; }
.chip { min-height:44px; }
.sm { min-height:44px; }
[data-act="statSheet"] { min-height:44px; }
select { min-height:44px; }
.wday.trade { border-color:var(--blue); background:var(--bluesoft); }
.wins.two { display:grid; grid-template-columns:1fr 1fr; gap:10px; text-align:left; }
.wins.two small { display:block; color:var(--mute); font-size:12.5px; margin-top:3px; }
.wins.two small b { color:var(--ink); }
.wins.two > div > b { font-size:17px; display:block; }
.wins.two small b { font-size:inherit; display:inline; color:var(--ink); }