/* ============================================================
   CREATORLAB — 100-Point Digital Presence Review
   Brand: warm off-white, near-black type, pink→purple→blue
   gradient used sparingly. Editorial, not a neon dashboard.
   ============================================================ */
:root{
  --ink:#090A0F; --paper:#F8F7F3; --card:#FFFFFF; --rail:#EFEDE8;
  --pink:#E82AAE; --purple:#8B38F5; --blue:#24AEEF; --cyan:#25C7DF;
  --body:#55555C; --body2:#6E6E76; --hair:#DEDCD6; --rule:#C9C7C1;
  --ok:#1FA97A; --warn:#E07A1F; --err:#C8263C;
  --grad:linear-gradient(96deg,#E82AAE 0%,#8B38F5 44%,#24AEEF 84%,#25C7DF 100%);
  --shadow:0 1px 2px rgba(9,10,15,.05),0 8px 24px rgba(9,10,15,.06);
  --d:'Archivo',"Helvetica Neue",Helvetica,Arial,sans-serif;
  --t:'IBM Plex Sans',"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--t);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
[hidden]{display:none!important}

/* ---------------- gate ---------------- */
#gate{
  position:fixed;inset:0;z-index:999;background:var(--paper);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
#gate::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--grad)}
.gatebox{width:100%;max-width:380px}
.gatebox .mark{font-family:var(--d);font-weight:900;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--purple)}
.gatebox h1{font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:30px;line-height:1.05;
  letter-spacing:-.022em;margin:10px 0 6px}
.gatebox p{color:var(--body);margin:0 0 22px;font-size:14.5px}
.gatebox label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--body2);margin:14px 0 5px}
.gatebox input{width:100%;background:var(--card);border:1.5px solid var(--rule);border-radius:9px;padding:12px 14px;font-size:16px}
.gatebox input:focus{border-color:var(--purple);outline:none;box-shadow:0 0 0 3px rgba(139,56,245,.13)}
.gatebox button{width:100%;margin-top:20px;border:none;border-radius:10px;background:var(--grad);
  color:#fff;font-weight:700;padding:14px;cursor:pointer;font-size:16px}
#gateErr{color:var(--err);font-weight:600;font-size:14px;margin-top:12px;min-height:20px}
.gatenote{margin-top:22px;padding-top:16px;border-top:1px solid var(--hair);font-size:12.5px;line-height:1.5;color:var(--body2)}

/* ---------------- chrome ---------------- */
.top{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px 20px;background:var(--card);border-bottom:1px solid var(--hair);
}
.top::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.top .ttl{font-family:var(--d);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:13px}
.top .ttl small{display:block;font-family:var(--t);font-weight:600;text-transform:none;letter-spacing:0;
  font-size:11px;color:var(--body2)}
.top .sp{flex:1}
#saveState{font-size:12px;font-weight:600;color:var(--body2);white-space:nowrap}
#saveState.saving{color:var(--purple)}

.btn{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule);background:var(--card);
  border-radius:8px;padding:8px 13px;cursor:pointer;font-weight:600;font-size:13px;white-space:nowrap;
}
.btn:hover{border-color:var(--purple)}
.btn.primary{border:none;background:var(--grad);color:#fff;font-weight:700}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent}
.btn.sm{padding:5px 10px;font-size:12px}
.btn:disabled{opacity:.5;cursor:default;filter:none}

.wrap{max-width:1180px;margin:0 auto;padding:26px 20px 80px}
h2.sec{font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:22px;letter-spacing:-.018em;margin:0 0 4px}
.lede{color:var(--body);margin:0 0 22px;max-width:70ch}

/* ---------------- dashboard ---------------- */
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.bar input[type=search]{flex:1;min-width:200px;background:var(--card);border:1.5px solid var(--rule);
  border-radius:9px;padding:9px 13px;font-size:15px}
.bar input:focus{border-color:var(--purple);outline:none}

table.list{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--hair);
  border-radius:11px;overflow:hidden;box-shadow:var(--shadow)}
table.list th{
  text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--body2);padding:11px 13px;border-bottom:1px solid var(--hair);background:var(--rail);white-space:nowrap;
}
table.list td{padding:12px 13px;border-bottom:1px solid var(--hair);vertical-align:middle;font-size:14px}
table.list tr:last-child td{border-bottom:none}
table.list tr:hover td{background:#FCFBF8}
table.list .biz{font-weight:700}
table.list .dom{color:var(--body2);font-size:12.5px}
table.list .num{font-family:var(--d);font-weight:900;font-size:18px;font-variant-numeric:tabular-nums}
table.list .acts{display:flex;gap:6px;justify-content:flex-end}
.empty{padding:44px 20px;text-align:center;color:var(--body2);background:var(--card);
  border:1px dashed var(--rule);border-radius:11px}

.pill{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 9px;border-radius:99px;border:1px solid var(--rule);color:var(--body2);white-space:nowrap}
.pill.band{color:#fff;border:none}
.pill.draft{border-color:var(--rule)}
.pill.review{border-color:var(--warn);color:var(--warn)}
.pill.ready{border-color:var(--ok);color:var(--ok)}
.pill.published{background:var(--ink);color:#fff;border:none}
.pill.archived{opacity:.55}

/* ---------------- editor ---------------- */
.cols{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start}
@media (max-width:900px){.cols{grid-template-columns:1fr}}

.side{position:sticky;top:64px;display:flex;flex-direction:column;gap:16px}
@media (max-width:900px){.side{position:static}}
.panel{background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:15px;box-shadow:var(--shadow)}
.panel h3{font-family:var(--d);font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--purple);margin:0 0 11px}

.score{display:flex;align-items:baseline;gap:8px}
.score .n{font-family:var(--d);font-size:46px;font-weight:900;line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.score .o{font-family:var(--d);font-size:17px;font-weight:800;color:var(--body2)}
.bandtag{display:inline-block;margin-top:9px;font-family:var(--d);font-size:12px;font-weight:900;
  text-transform:uppercase;letter-spacing:.05em;color:#fff;padding:3px 10px;border-radius:99px}
.pend{margin-top:9px;font-size:12.5px;color:var(--warn);font-weight:600;line-height:1.4}
.prog{height:5px;border-radius:99px;background:var(--hair);overflow:hidden;margin-top:12px}
.prog span{display:block;height:100%;width:0;background:var(--grad);border-radius:99px}
.progtxt{font-size:12px;color:var(--body2);margin-top:6px}

.navsec{display:flex;flex-direction:column;gap:2px}
.navsec button{
  display:grid;grid-template-columns:20px 1fr auto;gap:8px;align-items:baseline;text-align:left;
  border:none;background:transparent;cursor:pointer;padding:7px 8px;border-radius:7px;font-size:13px;
}
.navsec button:hover{background:var(--rail)}
.navsec button.on{background:var(--rail);font-weight:700}
.navsec .id{font-family:var(--d);font-weight:900;font-size:11px;color:var(--purple)}
.navsec .v{font-family:var(--d);font-weight:900;font-size:12.5px;font-variant-numeric:tabular-nums}
.navsec .v.lost{color:var(--pink)}

.fld{display:flex;flex-direction:column;gap:4px;margin-bottom:11px}
.fld label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--body2)}
.fld input,.fld select,.fld textarea{background:var(--card);border:1.5px solid var(--rule);border-radius:8px;
  padding:8px 10px;font-size:14px;width:100%}
.fld textarea{resize:vertical;min-height:54px;line-height:1.45}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--purple);outline:none}
.fld.req label::after{content:" *";color:var(--pink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:11px}

/* item cards */
.sechd{display:flex;align-items:baseline;gap:12px;margin:26px 0 12px;flex-wrap:wrap}
.sechd h3{font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:17px;letter-spacing:-.01em;margin:0}
.sechd .tot{font-family:var(--d);font-weight:900;font-size:15px;font-variant-numeric:tabular-nums}
.sechd .purpose{flex:1 0 100%;font-size:13px;color:var(--body2)}
.bulk{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}

.item{background:var(--card);border:1px solid var(--hair);border-radius:11px;padding:14px;margin-bottom:10px}
.item.lost{border-left:3px solid var(--pink)}
.item.unv{border-left:3px solid var(--warn)}
.item.full{border-left:3px solid var(--ok)}
.ihd{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.ihd .rid{font-family:var(--d);font-weight:900;font-size:11px;letter-spacing:.08em;color:#fff;
  background:var(--ink);border-radius:5px;padding:2px 7px}
.item.lost .ihd .rid{background:var(--pink)}
.item.full .ihd .rid{background:var(--ok)}
.ihd .t{font-weight:700;font-size:15px;flex:1;min-width:160px}
.ihd .pts{font-family:var(--d);font-weight:900;font-size:14px;font-variant-numeric:tabular-nums;color:var(--body2)}
.rule{font-size:12.5px;line-height:1.45;color:var(--body2);margin:8px 0 0}
.rule b{color:var(--ink);font-weight:700}
.scorebtns{display:flex;gap:6px;margin:11px 0 0;flex-wrap:wrap}
.scorebtns button{
  min-width:38px;border:1.5px solid var(--rule);background:var(--card);border-radius:8px;
  padding:7px 11px;cursor:pointer;font-family:var(--d);font-weight:900;font-size:14px;
}
.scorebtns button:hover{border-color:var(--purple)}
.scorebtns button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.scorebtns button.on.zero{background:var(--pink);border-color:var(--pink)}
.scorebtns button.on.full{background:var(--ok);border-color:var(--ok)}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px}
@media (max-width:640px){.meta{grid-template-columns:1fr}}
.more{margin-top:10px}
.more summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--purple);list-style:none}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"▸ ";font-size:10px}
.more[open] summary::before{content:"▾ "}
.more .inner{margin-top:10px;padding-top:10px;border-top:1px solid var(--hair)}
.kv{font-size:12.5px;line-height:1.5;color:var(--body2);margin-bottom:8px}
.kv b{color:var(--ink);font-weight:700;display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;margin-bottom:2px}

/* findings & gates */
.finding{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--hair)}
.finding:last-child{border-bottom:none}
.finding .p{font-family:var(--d);font-weight:900;font-size:19px;text-align:right;font-variant-numeric:tabular-nums;color:var(--purple)}
.finding .p small{display:block;font-family:var(--t);font-size:9.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--body2)}
.finding .o{font-weight:700}
.finding .c{font-size:13px;color:var(--body2);line-height:1.45;margin-top:2px}
.finding .tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.tag{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:2px 7px;
  border-radius:99px;border:1px solid var(--rule);color:var(--body2)}
.tag.broken{border-color:var(--err);color:var(--err)}
.tag.missing{border-color:var(--warn);color:var(--warn)}
.tag.improve{border-color:var(--blue);color:var(--blue)}
.tag.onslide{background:var(--ink);color:#fff;border-color:var(--ink)}
.tag.unconf{border-color:var(--warn);color:var(--warn)}

.gate{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--hair);font-size:13.5px}
.gate:last-child{border-bottom:none}
.gate .m{font-weight:900;font-size:14px}
.gate.ok .m{color:var(--ok)}
.gate.no .m{color:var(--err)}
.gate .d{color:var(--body2);font-size:12.5px;line-height:1.45;margin-top:2px}

.note{padding:12px 14px;border-left:3px solid var(--purple);background:rgba(139,56,245,.055);
  border-radius:0 8px 8px 0;font-size:13.5px;line-height:1.5;color:var(--body);margin:14px 0}
.note b{color:var(--ink)}
.note.warn{border-left-color:var(--warn);background:rgba(224,122,31,.07)}

/* ---------------- report (Letter, printable) ---------------- */
#report .sheetwrap{display:flex;flex-direction:column;gap:18px;align-items:center}
.sheet{
  width:8.5in;min-height:11in;background:#fff;color:var(--ink);padding:.62in .7in .7in;
  box-shadow:var(--shadow);position:relative;font-size:10.5pt;line-height:1.5;
}
.sheet::before{content:"";position:absolute;top:0;left:0;right:0;height:.07in;background:var(--grad)}
.sheet h1{font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:27pt;line-height:1.03;
  letter-spacing:-.022em;margin:0 0 8pt}
.sheet h2{font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:11pt;letter-spacing:.08em;
  color:var(--purple);margin:20pt 0 7pt;padding-bottom:4pt;border-bottom:.5pt solid var(--hair)}
.sheet h3{font-family:var(--d);font-weight:800;font-size:12pt;margin:12pt 0 3pt}
.sheet p{margin:0 0 7pt}
.sheet .eyebrow{font-size:8pt;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--purple);margin-bottom:7pt}
.sheet .big{display:flex;align-items:baseline;gap:10pt;margin:10pt 0}
.sheet .big .n{font-family:var(--d);font-size:58pt;font-weight:900;line-height:.85;letter-spacing:-.04em}
.sheet .big .o{font-family:var(--d);font-size:18pt;font-weight:800;color:var(--body2)}
.sheet .bandtag{font-size:11pt;padding:3pt 11pt}
.sheet table{width:100%;border-collapse:collapse;font-size:9.5pt;margin-top:5pt}
.sheet table th{text-align:left;background:var(--ink);color:#fff;font-size:8pt;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;padding:5pt 7pt}
.sheet table td{padding:5pt 7pt;border-bottom:.5pt solid var(--hair);vertical-align:top}
.sheet table td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.sheet .bar{height:7pt;border-radius:99pt;background:var(--hair);overflow:hidden;min-width:70pt}
.sheet .bar span{display:block;height:100%;background:var(--grad)}
.sheet .foot{position:absolute;left:.7in;right:.7in;bottom:.38in;padding-top:6pt;border-top:.5pt solid var(--hair);
  display:flex;justify-content:space-between;font-size:7.5pt;font-weight:700;color:var(--body2);letter-spacing:.03em}
.sheet .find{padding:9pt 0;border-bottom:.5pt solid var(--hair);break-inside:avoid}
.sheet .find:last-child{border-bottom:none}
.sheet .find .o{font-family:var(--d);font-weight:800;font-size:12pt}
.sheet .find .lost{color:var(--pink);font-weight:800}
.sheet .find .lbl{font-size:7.5pt;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--body2);margin-top:5pt}

/* ---------------- deck (1080x1920) ---------------- */
#deck .slides{display:flex;gap:20px;overflow-x:auto;padding:4px 0 14px}
.slide{
  width:1080px;height:1920px;flex:none;position:relative;overflow:hidden;
  transform-origin:top left;background:#F8F7F3;
}
.slide.dark{background:
  repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 3px,transparent 3px 12px),#0A0B10;color:#fff}
.slide::before{content:"";position:absolute;top:0;left:0;right:0;height:14px;background:var(--grad);z-index:3}
.slide .pad{position:absolute;inset:0;padding:120px 86px 96px;display:flex;flex-direction:column}
.slide .eyebrow{font-size:26px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--purple)}
.slide.dark .eyebrow{color:#B98CFA}
.slide h2{font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:88px;line-height:1.02;
  letter-spacing:-.025em;margin:26px 0 0}
.slide .sub{font-size:40px;line-height:1.42;color:var(--body);margin-top:30px}
.slide.dark .sub{color:#C6C6D2}
.slide .sub b{color:var(--ink);font-weight:800}
.slide.dark .sub b{color:#fff}
.slide .body{font-size:40px;line-height:1.45;color:var(--body);margin-top:24px}
.slide.dark .body{color:#C6C6D2}
.slide .num{display:flex;align-items:baseline;gap:22px;margin-top:40px}
.slide .num .v{font-family:var(--d);font-size:300px;font-weight:900;line-height:.82;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.slide .num .o{font-family:var(--d);font-size:72px;font-weight:800;color:var(--body2)}
.slide .bandbig{display:inline-block;margin-top:26px;font-family:var(--d);font-size:54px;font-weight:900;
  text-transform:uppercase;letter-spacing:.02em;color:#fff;padding:10px 30px;border-radius:99px}
.slide .bars{display:flex;flex-direction:column;gap:22px;margin-top:52px}
.slide .brow{display:grid;grid-template-columns:420px 1fr 150px;gap:20px;align-items:center}
.slide .brow .n{font-size:34px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slide .brow .track{height:26px;border-radius:99px;background:var(--hair);overflow:hidden}
.slide .brow .fill{display:block;height:100%;background:var(--grad);border-radius:99px;min-width:4px}
.slide .brow .v{font-size:34px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.slide .kicker{margin-top:auto;padding-top:34px;border-top:2px solid var(--hair);font-size:30px;
  font-weight:700;color:var(--body2);letter-spacing:.03em;display:flex;justify-content:space-between;gap:20px}
.slide.dark .kicker{border-top-color:rgba(255,255,255,.18);color:#9B9BA8}
.slide .lostbig{font-family:var(--d);font-size:150px;font-weight:900;line-height:.9;color:var(--pink);letter-spacing:-.03em}
.slide .lostbig small{font-family:var(--t);display:block;font-size:30px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--body2);margin-top:12px}
.slide.dark .lostbig small{color:#9B9BA8}
.slide .block{margin-top:40px}
.slide .block .lbl{font-size:26px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--purple);margin-bottom:12px}
.slide.dark .block .lbl{color:#B98CFA}

.zoomrow{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.slideframe{overflow:hidden;border:1px solid var(--hair);border-radius:10px;background:#fff;box-shadow:var(--shadow);flex:none}

/* ---------------- print ---------------- */
@media print{
  @page{size:8.5in 11in;margin:0}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  body{background:#fff}
  .top,.side,#gate,.noprint,.bar,.zoomrow{display:none!important}
  .wrap{max-width:none;padding:0}
  .cols{display:block}
  #report .sheetwrap{gap:0}
  .sheet{width:8.5in;min-height:11in;box-shadow:none;break-after:page;page-break-after:always}
  .sheet:last-child{break-after:auto;page-break-after:auto}
}
@media print{
  body.printdeck .sheet{display:none}
  body.printdeck .slide{transform:none!important;box-shadow:none;border:none;break-after:page;page-break-after:always}
  body.printdeck #deck .slides{display:block;overflow:visible}
  body.printdeck .slideframe{overflow:visible;border:none;border-radius:0;box-shadow:none;width:auto!important;height:auto!important}
}

/* ============================================================
   iPAD / TOUCH
   Everything below exists because this runs as an installed app
   on an iPad, not because it looks nicer on a desktop.
   ============================================================ */

/* Respect the notch and the home indicator in standalone mode. */
:root{
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}
.top{padding-top:calc(11px + var(--safe-t));padding-left:calc(20px + var(--safe-l));padding-right:calc(20px + var(--safe-r))}
.wrap{padding-bottom:calc(80px + var(--safe-b));padding-left:calc(20px + var(--safe-l));padding-right:calc(20px + var(--safe-r))}
#gate{padding-top:calc(24px + var(--safe-t));padding-bottom:calc(24px + var(--safe-b))}

/* iOS zooms the whole page when a focused field is under 16px.
   Every input in this app is therefore at least 16px. */
.fld input,.fld select,.fld textarea,
.bar input[type=search],#q{font-size:16px}

/* Apple's minimum comfortable target is 44pt. */
@media (pointer:coarse){
  .btn{padding:11px 16px;font-size:14px;min-height:44px}
  .btn.sm{padding:9px 13px;font-size:13px;min-height:40px}
  .scorebtns button{min-width:56px;min-height:52px;font-size:18px;padding:0 14px}
  .navsec button{padding:11px 9px;min-height:44px}
  .more summary{padding:10px 0;min-height:44px;display:flex;align-items:center}
  table.list td{padding:15px 13px}
  .top{gap:10px}
  /* no hover states on a finger — they stick after a tap */
  .btn:hover{border-color:var(--rule)}
  .btn.primary:hover{filter:none}
  table.list tr:hover td{background:transparent}
  .navsec button:hover{background:transparent}
  .navsec button.on{background:var(--rail)}
}

/* Stop iOS springing the whole page while you drag a slide sideways. */
#deck .slides,#report .sheetwrap{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
#report .sheetwrap{overflow-x:auto}

/* The report sheet is a fixed 8.5in — let it scale down on a narrow screen
   rather than forcing a sideways scroll on every page. */
@media (max-width:960px){
  .sheet{transform-origin:top left}
  #report .sheetwrap{align-items:flex-start}
}

/* install hint on the sign-in screen */
#installHint{
  margin-top:20px;padding:13px 15px;border-radius:10px;
  background:rgba(139,56,245,.08);border-left:3px solid var(--purple);
  font-size:13.5px;line-height:1.5;color:var(--body);
}
#installHint b{color:var(--ink);display:block;margin-bottom:3px}

/* offline badge */
#netState{
  font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:var(--warn);padding:3px 9px;border-radius:99px;white-space:nowrap;
}

/* toast */
#toast{
  position:fixed;left:50%;bottom:calc(22px + var(--safe-b));transform:translateX(-50%);
  z-index:500;background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;
  font-size:14px;font-weight:600;box-shadow:0 8px 30px rgba(9,10,15,.3);max-width:90vw;text-align:center;
}

/* In standalone mode there is no browser chrome, so the app owns the whole screen. */
@media (display-mode:standalone){
  body{overscroll-behavior-y:none}
  .gatenote{display:none}
}

/* ---- tablet: keep the score rail beside the items, not stacked above ---- */
@media (max-width:1000px) and (min-width:761px){
  .cols{grid-template-columns:232px 1fr;gap:16px}
  .side{top:calc(58px + var(--safe-t))}
  .panel{padding:13px}
  .score .n{font-size:38px}
  .meta{grid-template-columns:1fr}
}
@media (max-width:760px){.cols{grid-template-columns:1fr}}

/* ---- tablet header: one row, not two ---- */
@media (max-width:1180px){
  .top{gap:7px;padding-left:calc(14px + var(--safe-l));padding-right:calc(14px + var(--safe-r))}
  .top .ttl{font-size:12px;max-width:140px;line-height:1.15}
  .top .ttl small{display:none}
  .top .btn{padding:11px 11px;font-size:13px}
  #saveState{font-size:11px;max-width:84px;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:1180px) and (pointer:coarse){
  .top .btn{min-height:42px}
}