:root {
  --bg:#000; --panel:#0d0d0d; --card:#111; --border:#222;
  --amber:#f5a623; --green:#00e676; --red:#ff1744;
  --blue:#40c4ff; --accent:#40c4ff; --purple:#e040fb; --white:#fff; --dim:#555;
  --safe-top:env(safe-area-inset-top,0px); --safe-bot:env(safe-area-inset-bottom,0px);
  --acc:var(--accent); --tint:255,255,255; color-scheme:dark;
}
/* Light appearance (set by theme.js). Accents darkened so they read on white. */
:root[data-theme=light]{
  --bg:#fff; --panel:#f2f2f2; --card:#f5f5f5; --border:#d6d6d6;
  --amber:#b86e00; --green:#00873c; --red:#d50000; --blue:#0277bd; --purple:#9c27b0;
  --white:#111; --dim:#777; --tint:0,0,0; color-scheme:light;
  --acc:color-mix(in srgb,var(--accent) 65%,#000);
}
[data-theme=light] .tab.emerg,[data-theme=light] .item.warn .item-action,[data-theme=light] .item.warn .item-value{color:var(--red);}
[data-theme=light] .item-note{color:#444;}
[data-theme=light] .item.checked .item-note{color:#999;}
[data-theme=light] .modal{background:#fff;}
[data-theme=light] .modal-say{background:#fff4e0;}
[data-theme=light] .modal-say-item{color:#222;border-bottom-color:#f0dcb8;}
[data-theme=light] .modal-table th{background:#eee;color:#666;}
[data-theme=light] .modal-table td{border-bottom-color:#eee;}
[data-theme=light] .t-ht{color:#111;}
[data-theme=light] .modal-rule{background:#e8f7ee;}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;background:var(--bg);}
body{position:fixed;inset:0;}  /* pinned to the screen edges: the list fills down to the buttons and nothing shifts while the iPhone settles its screen size (100dvh did) */
html{overscroll-behavior:none;touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{color:var(--white);font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;overscroll-behavior:none;display:flex;flex-direction:column;}

.topbar{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:2px solid var(--acc);padding:calc(var(--safe-top) + 24px) 14px 10px;flex-shrink:0;}
.topbar-row1{display:flex;align-items:center;gap:10px;}
.topbar-left{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto;}
.topbar-left > div{min-width:0;overflow-wrap:anywhere;}
.back-btn{width:34px;height:34px;border:1.5px solid var(--border);border-radius:8px;background:var(--card);color:var(--white);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;text-decoration:none;}
.wb-link{margin-left:auto;width:auto;height:40px;padding:0 10px;gap:5px;font-size:15px;font-weight:800;letter-spacing:0.3px;color:var(--acc);border-color:var(--acc);border-width:2px;text-decoration:none;white-space:nowrap;}
.wb-link .wb-ic{font-size:21px;line-height:1;}
.wb-link + .reset-icon{margin-left:0;}
.reset-icon{margin-left:auto;color:var(--red);border-color:rgba(255,23,68,0.55);font-size:20px;cursor:pointer;}
.back-btn:active{background:rgba(var(--tint),0.08);}
.topbar-title{font-size:20px;font-weight:800;letter-spacing:0.5px;color:var(--white);line-height:1.15;}
.topbar-sub{font-size:11px;color:var(--acc);font-weight:600;margin-top:2px;}
.circ{margin-top:8px;padding:5px 10px;border-radius:8px;background:rgba(var(--tint),0.07);color:var(--acc);font-size:13px;font-weight:800;letter-spacing:0.5px;text-align:center;}




.tabnav{display:flex;overflow-x:auto;scrollbar-width:none;background:var(--panel);border-bottom:1.5px solid var(--border);flex-shrink:0;}
.tabnav::-webkit-scrollbar{display:none;}
.tab{flex-shrink:0;padding:14px 18px;font-size:16px;font-weight:700;color:var(--dim);cursor:pointer;border-bottom:4px solid transparent;transition:color 0.15s,border-color 0.15s;white-space:nowrap;}
.tab.active{color:var(--acc);border-bottom-color:var(--acc);}
.tab.emerg{color:#ff4444;}
.tab.emerg.active{border-bottom-color:#ff4444;}
.tab.done{color:var(--green);}
.tab.done.active{color:var(--green);border-bottom-color:var(--green);}

.sec-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;gap:10px;}
.sec-num{font-size:11px;font-weight:700;color:var(--dim);letter-spacing:1px;margin-bottom:2px;}
.sec-name{font-size:26px;font-weight:800;line-height:1;}
.acc-blue .sec-name{color:var(--blue);}
.acc-purple .sec-name{color:var(--purple);}
.acc-amber .sec-name{color:var(--amber);}
.acc-green .sec-name{color:var(--green);}
.acc-red .sec-name{color:var(--red);}
.sec-prog{font-size:28px;font-weight:800;color:var(--dim);line-height:1;flex-shrink:0;}
.sec-prog.done{color:var(--green);}
.sec-bar{height:3px;background:var(--border);margin:0 0 10px;overflow:hidden;}
.sec-bar-fill{height:100%;background:var(--green);transition:width .3s ease;width:0%;}

.scroll-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:12px;overscroll-behavior:contain;}
/* Every section is at least 1px taller than the list, so the iPhone always scrolls the list: a swipe on a short
   section (or past the top/bottom) otherwise goes to the pinned page, which bounces and swallows the next swipes. */
.section.visible{min-height:calc(100% + 1px);}
.section{display:none;}
.section.visible{display:block;}

.item{display:flex;align-items:center;min-height:66px;border-bottom:1px solid var(--border);cursor:pointer;user-select:none;}
.item:last-child{border-bottom:none;}
.item.checked{opacity:0.55;}
.cb-col{width:64px;min-width:64px;height:66px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cb-col:active .cb{border-color:var(--green);}
.cb{color:var(--bg);width:34px;height:34px;border:2px solid #9a9a9a;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all 0.15s;flex-shrink:0;}
.item.checked .cb{background:var(--green);border-color:var(--green);}
.cb-tick{display:none;}
.item.checked .cb-tick{display:block;}
.item-text{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 12px 0;min-height:66px;}
.item-action{font-size:21px;font-weight:600;color:var(--white);line-height:1.25;flex:1;min-width:0;overflow-wrap:anywhere;}
.item.warn .item-action{color:#ff6b6b;}
.item.checked .item-action{color:var(--dim);}
.item-value{font-size:20px;font-weight:800;color:var(--acc);text-align:right;flex-shrink:0;max-width:52%;overflow-wrap:anywhere;line-height:1.25;}
.item.warn .item-value{color:#ff4444;}
.item.checked .item-value{color:var(--dim);}
.grp{padding:16px 16px 8px;font-size:12px;font-weight:800;letter-spacing:1.5px;color:var(--acc);background:rgba(var(--tint),0.04);border-top:2px solid var(--acc);border-bottom:1px solid var(--border);}
.item.info{cursor:default;}
.item.info .item-text{padding-left:16px;}
.item.info .item-note{margin-left:16px;}
.item-with-note{flex-direction:column;align-items:stretch;}
.item-with-note .item-main{display:flex;align-items:center;min-height:66px;width:100%;}
.item-note{font-size:15px;color:#bbb;background:rgba(var(--tint),0.07);border-radius:8px;padding:8px 12px;margin:0 14px 10px 64px;line-height:1.5;}
.item.checked .item-note{color:#666;background:rgba(var(--tint),0.03);}

.bottomnav{flex-shrink:0;background:var(--bg);border-top:1.5px solid var(--border);padding:6px 12px max(6px, calc(var(--safe-bot) - 24px));display:flex;flex-direction:column;align-items:center;gap:8px;z-index:100;}
.nav-row{display:flex;gap:10px;width:100%;}
.nav-btn{flex:1;min-width:0;background:var(--card);border:1.5px solid var(--border);color:var(--dim);font-size:16px;font-weight:700;padding:12px 8px;border-radius:10px;cursor:pointer;transition:all 0.1s;}
.nav-btn.primary{background:rgba(0,230,118,0.12);border-color:var(--green);color:var(--green);}
.nav-btn.side{flex:0.62;font-size:14px;padding-left:4px;padding-right:4px;}
.nav-btn.emerg{background:rgba(255,23,68,0.12);border-color:var(--red);color:var(--red);}
.nav-btn:not(.emerg).side{border-color:var(--acc);color:var(--acc);}
.nav-btn.side.on{background:rgba(var(--tint),0.1);}
.nav-btn:active{opacity:0.6;}

.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--green);color:var(--bg);font-size:14px;font-weight:800;letter-spacing:1px;padding:10px 22px;border-radius:22px;opacity:0;transition:all 0.25s ease;pointer-events:none;white-space:nowrap;z-index:200;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:300;padding:calc(var(--safe-top) + 16px) 0 calc(var(--safe-bot) + 16px);overflow-y:auto;-webkit-overflow-scrolling:touch;}
.modal-overlay.open{display:block;}
.modal{background:#0f0f0f;border:1.5px solid var(--red);border-radius:14px;margin:16px;overflow:hidden;}
.modal-header{background:rgba(255,23,68,0.15);border-bottom:1.5px solid var(--red);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.modal-title{font-size:20px;font-weight:800;color:var(--red);line-height:1;}
.modal-sub{font-size:12px;color:#888;margin-top:4px;font-weight:600;}
.modal-close{width:36px;height:36px;border:1.5px solid #333;border-radius:8px;background:transparent;color:#888;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.modal-close:active{background:rgba(var(--tint),0.08);}
.modal-body{padding:18px;}
.modal-say{background:#1a0a00;border:1px solid var(--amber);border-radius:10px;padding:14px 16px;margin-bottom:16px;}
.modal-say-label{font-size:10px;font-weight:800;color:var(--amber);letter-spacing:2px;margin-bottom:10px;}
.modal-say-item{font-size:15px;color:#e0e0e0;line-height:1.6;padding:8px 0;border-bottom:1px solid #2a1a00;}
.modal-say-item:last-child{border-bottom:none;padding-bottom:0;}
.modal-table-label{font-size:10px;font-weight:800;color:#888;letter-spacing:2px;margin:16px 0 8px;}
.modal-table{width:100%;border-collapse:collapse;font-size:14px;}
.modal-table th{background:#1a1a1a;color:#555;font-size:11px;font-weight:700;letter-spacing:1px;padding:8px 10px;text-align:left;}
.modal-table td{padding:11px 10px;border-bottom:1px solid #1a1a1a;vertical-align:top;line-height:1.4;}
.modal-table tr:last-child td{border-bottom:none;}
.t-ht{color:#fff;font-weight:700;font-size:15px;white-space:nowrap;}
.t-msl{color:#888;font-size:12px;}
.t-act{color:var(--amber);font-weight:700;font-size:14px;}
.t-act.red{color:var(--red);}
.t-act.green{color:var(--green);}
.modal-rule{background:#0a1a0a;border:1px solid var(--green);border-radius:10px;padding:14px 16px;margin-top:16px;font-size:16px;font-weight:700;color:var(--green);line-height:1.5;text-align:center;}
.info-btn{width:32px;height:32px;border:1.5px solid #333;border-radius:50%;background:transparent;color:var(--red);font-size:16px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:10px;}
.info-btn:active{background:rgba(255,23,68,0.15);}

/* Narrow screens (iPhone Display Zoom "Larger Text" = 320-375px wide): put the value under the action
   so neither gets squeezed, and tighten the bottom bar so all buttons fit. */
@media (max-width:440px){
  .item-text{flex-direction:column;align-items:stretch;gap:3px;}
  .item-value{text-align:left;max-width:none;}
  .item-note{margin-right:10px;}
  .nav-row{gap:6px;}
  .nav-btn{font-size:14px;padding:12px 4px;}
  .nav-btn.side{font-size:13px;}
  .bottomnav{padding-left:8px;padding-right:8px;}
}
[hidden]{display:none!important;}
.item.src{text-decoration:none;color:inherit;cursor:pointer;}
.item.src.off{opacity:0.4;}
.opt-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:0.5px;color:var(--acc);border:1.5px solid var(--acc);border-radius:5px;padding:1px 5px;margin-right:6px;vertical-align:3px;}
.item.opt .cb{border-style:dashed;}
.pw{padding:4px 12px 16px;}
.pw-seg{display:flex;gap:6px;margin:6px 0 12px;}
.pw-btn{flex:1;padding:9px 4px;border-radius:10px;border:1.5px solid var(--border);background:var(--card);color:var(--dim);font-size:18px;font-weight:800;cursor:pointer;line-height:1.15;}
.pw-btn small{display:block;font-size:11px;font-weight:700;margin-top:2px;}
.pw-btn.on{border-color:var(--acc);color:var(--acc);background:rgba(var(--tint),0.06);}
.pw-tab{width:100%;border-collapse:collapse;font-size:17px;font-weight:700;text-align:center;}
.pw-tab th{font-size:13px;color:var(--dim);padding:6px 2px;border-bottom:1.5px solid var(--border);line-height:1.15;}
.pw-tab th small{font-size:10px;font-weight:600;}
.pw-tab td{padding:7px 2px;border-bottom:1px solid var(--border);}
.pw-tab td:first-child{color:var(--acc);font-weight:800;}
.pw-t{font-size:11px;color:var(--dim);font-weight:600;line-height:1.2;}
.pw-ft{color:var(--amber);font-weight:800;}
.pw-na{color:var(--dim);font-weight:500;}
.pw-note{font-size:13px;color:var(--dim);line-height:1.5;margin-top:12px;}
.item-value .mph{display:block;font-size:12px;font-weight:700;color:var(--dim);margin-top:2px;}
.item.checked .item-value .mph{color:var(--dim);}
/* Small phones: W&B label under the icon and a slightly smaller title, so nothing overlaps */
@media (max-width:360px){
  .wb-link{flex-direction:column;justify-content:center;gap:0;padding:0 7px;font-size:11px;}
  .wb-link .wb-ic{font-size:17px;}
  .topbar-title{font-size:17px;}
}