/* Three Statement, app styles. One theme, light, written out. There is no dark
   mode and no theme switch: every colour in this file resolves from the tokens
   below, and color-scheme pins the browser's own widgets to light with them. */
:root{
  color-scheme:light;
  --bg:#e4e6e8; --panel:#f4f5f6; --panel-2:#eaecee; --sheet:#ffffff;
  --ink:#141618; --ink-2:#51565b; --ink-3:#868b91; --line:#cfd3d7; --line-2:#e2e5e8;
  --band:#0e1012; --band-ink:#ffffff; --shade:#c9cdd1; --shade-ink:#141618;
  --accent:#1b2a4a; --accent-ink:#ffffff; --accent-soft:#dfe5f0;
  --ok:#2f7d4f; --warn:#a8690f; --bad:#c03a2b; --focus:#1f5fa8;
  --sans:"IBM Plex Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:"Bebas Neue","Oswald","Arial Narrow",Impact,sans-serif;
}
*{box-sizing:border-box}
html{font-size:14px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
a{color:inherit}
.muted{color:var(--ink-3)}
.sp{flex:1}

/* ---------- frame ---------- */
.topbar{display:flex;align-items:center;gap:14px;padding:8px 18px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--accent)}
.brand .name{font-family:var(--display);font-size:24px;letter-spacing:.03em;line-height:1;color:var(--ink)}
.brand .name em{font-style:normal;color:var(--accent)}
.planbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.planbar select{max-width:min(260px,40vw);min-width:0;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--sheet);font-weight:600}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:var(--panel-2);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.chip b{font-weight:600}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.chip.warn .dot{background:var(--warn)} .chip.bad .dot{background:var(--bad)}
.actions{display:flex;gap:6px}
.btn{padding:6px 12px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);cursor:pointer;font-size:12.5px;font-weight:500;color:var(--ink)}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.small{padding:3px 8px;font-size:12px}
.btn.ghost{background:transparent}
.btn.danger:hover{border-color:var(--bad);color:var(--bad)}
.btn[disabled]{opacity:.45;cursor:default}
/* A link drawn as a button. An anchor is inline, which ignores the 44px floor in
   the phone block below, so it becomes a flex box the same as a real button. */
a.btn{display:inline-flex;align-items:center;text-decoration:none}

.frame{display:grid;grid-template-columns:172px minmax(0,1fr);min-height:calc(100vh - 50px)}
.nav{border-right:1px solid var(--line);padding:14px 10px;position:sticky;top:50px;align-self:start;height:calc(100vh - 50px);overflow:auto}
.nav h4{margin:10px 8px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.nav button{display:block;width:100%;text-align:left;padding:7px 10px;border:0;background:transparent;border-radius:6px;cursor:pointer;font-size:13px;color:var(--ink-2);border-left:3px solid transparent}
.nav button:hover{background:var(--panel)}
.nav button.active{color:var(--ink);background:var(--panel);border-left-color:var(--accent);font-weight:600}
.main{padding:14px 16px 80px;min-width:0}
.view{display:none}.view.active{display:block}
/* The disclosure, under whatever view is open. In the flow, so it never covers
   anything, and it stays put on a phone. The print pack carries its own copy on
   every sheet and at the end of the narrative, so this one is not printed. */
.appfoot{margin:26px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:11.5px;line-height:1.5;color:var(--ink-3)}
/* Every statement tab already carries the disclosure on the sheet itself, which
   is the copy that prints and exports. Two of them a few lines apart reads as a
   mistake, so this one steps aside while the Statements area is open and is
   back on Start, Assumptions and Compare plans. */
#view-statements.active ~ .appfoot{display:none}
@media (max-width:900px){
  .frame{grid-template-columns:1fr}
  .nav{position:static;height:auto;display:flex;gap:4px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px 10px}
  .nav h4{display:none}
  .nav button{width:auto;white-space:nowrap;border-left:0;border-bottom:3px solid transparent;border-radius:6px 6px 0 0}
  .nav button.active{border-bottom-color:var(--accent)}
  .main{padding:12px 12px 80px}
  .chips{margin-left:0}
}

/* ---------- statement tabs ---------- */
.stmtbar{display:flex;align-items:flex-end;gap:10px;margin:0 0 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabstrip{display:flex;gap:2px;overflow-x:auto;flex:1 1 340px;min-width:0;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tabstrip button{white-space:nowrap;border:0;background:transparent;color:var(--ink-2);padding:9px 12px;font-size:13px;font-weight:500;cursor:pointer;border-bottom:3px solid transparent;border-radius:6px 6px 0 0}
.tabstrip button:hover{background:var(--panel);color:var(--ink)}
.tabstrip button.active{color:var(--ink);font-weight:700;background:var(--panel);border-bottom-color:var(--accent)}
.startdone{display:block;margin:0 0 14px;padding:10px 13px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:6px;font-size:13.5px;max-width:92ch}
.startdone[hidden]{display:none}

/* ---------- what this page tells you, and what the numbers say ---------- */
.pagehelp{margin:0 0 12px;max-width:82ch}
.pagehelp h3{margin:0 0 2px;font-size:13px;font-weight:700}
.pagehelp p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.insights{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:6px;padding:13px 16px 11px;margin:0 0 14px;max-width:1000px}
.insights h3{margin:0 0 6px;font-size:15px;font-weight:600}
.insights ul{margin:0;padding-left:18px}
.insights li{font-size:13.5px;line-height:1.55;margin:5px 0;max-width:90ch}
.insights .hint{margin:9px 0 0;font-size:11.5px;color:var(--ink-3)}

/* ---------- definitions ---------- */
/* Always on. Every statement label with a line in js/glossary.js is underlined
   and answers to hover, tap and keyboard focus. */
[data-def]{cursor:help;text-decoration:underline dotted var(--ink-3);text-underline-offset:2px;text-decoration-thickness:1px}
[data-def]:hover,[data-def]:focus-visible{text-decoration-color:var(--accent)}
.defpop{position:absolute;z-index:30;max-width:min(340px,88vw);padding:8px 11px;border-radius:6px;background:var(--band);color:var(--band-ink);font-size:12.5px;line-height:1.45;box-shadow:0 6px 20px rgba(0,0,0,.3);pointer-events:none}
.defpop[hidden]{display:none}

/* ---------- statement sheet ---------- */
.sheet-wrap{overflow-x:auto;background:var(--sheet);border:1px solid var(--line);border-radius:4px}
.sheet{--plan:var(--accent);min-width:0;padding:22px 24px 26px;color:var(--ink)}   /* main.js sets zoom so the table fits the pane */
.sheet .eyebrow{font-size:14px;color:var(--ink-2);margin:0 0 10px 6px}
.sheet .head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:8px}
.sheet .head .id{font-size:12.5px;font-weight:700;line-height:1.35}
.sheet .head .id .rule{width:60px;height:4px;background:var(--plan);margin-top:6px}
.sheet .head .meta{font-size:11px;color:var(--ink-3);text-align:right}
.sheet .unitnote{font-size:11.5px;color:var(--ink-2);margin:0 0 4px 6px}
.fs{border-collapse:collapse;width:100%;font-size:11px;font-variant-numeric:tabular-nums}
.fs th,.fs td{padding:2px 4px;white-space:nowrap;vertical-align:bottom}
.fs td.num{text-align:right;min-width:64px}
.fs td.lbl{text-align:left;min-width:170px;max-width:240px;overflow:hidden;text-overflow:ellipsis;position:sticky;left:0;background:var(--sheet);z-index:1}
.fs tr.band td,.fs tr.band th{background:var(--band);color:var(--band-ink);font-weight:700;text-align:center;padding:3px 6px}
.fs tr.band td.lbl{background:var(--band);color:var(--band-ink)}
.fs tr.grp th{font-weight:700;text-align:center;font-size:11.5px;padding-top:4px}
.fs tr.sub th{text-align:center;font-weight:600;font-size:11.5px;padding:2px 6px}
.fs tr.sub th.q{background:var(--shade);color:var(--shade-ink)}
.fs tr.sub th.ye{background:var(--band);color:var(--band-ink)}
.fs td.ye{background:var(--shade);color:var(--shade-ink)}
.fs tr.section td{font-weight:700;padding-top:10px}
.fs tr.section td.lbl{text-transform:uppercase}
.fs tr.bold td{font-weight:700}
.fs tr.total td.num{border-top:1px solid var(--ink)}
.fs tr.grand td.num{border-top:1px solid var(--ink);border-bottom:3px double var(--ink)}
.fs tr.pct td{color:var(--ink-2)}
.fs tr.pct td.ye{color:var(--shade-ink)}
.fs tr.gap td{height:12px;padding:0}
.fs td.i1{padding-left:22px}.fs td.i2{padding-left:38px}
.fs .cur{display:inline-block;width:10px;text-align:left;margin-right:3px}
.fs tr.flag td.num.flagged{color:var(--bad);font-weight:600}
.sheet .foot{margin-top:14px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--ink-3)}
/* The company, where the source deck printed a page number. A long name is cut
   rather than allowed to squeeze the bar that carries "Confidential Information". */
.sheet .foot .who{max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet .foot .bar{height:16px;flex:1;margin-left:14px;background:var(--band);position:relative}
.sheet .foot .bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:22%;background:var(--plan)}
.sheet .foot .bar span{position:absolute;right:8px;top:0;color:#fff;font-size:11px;line-height:16px;font-weight:600}
/* Rides on the sheet itself, so it prints and exports with the page. .notes
   above it is a screen-only aid and is dropped from the print pack; this is not. */
.sheetnote{margin:10px 0 0;font-size:10px;line-height:1.45;color:var(--ink-3);max-width:92ch}
.mdna .sheetnote{margin-top:26px;padding-top:10px;border-top:1px solid var(--line)}
.notes{margin:12px 2px 0;font-size:12px;color:var(--ink-2);max-width:76ch;padding-left:18px}
.notes li{margin:3px 0}
.viewbar{display:flex;gap:10px;align-items:center;margin:0 0 10px;font-size:12.5px;color:var(--ink-2);flex-wrap:wrap}
.viewbar select{padding:3px 6px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink)}

/* ---------- MD&A ---------- */
.mdna{max-width:900px;padding:28px 34px 40px;background:var(--sheet);border:1px solid var(--line);border-radius:4px}
.mdna .eyebrow{font-size:13px;color:var(--ink-2);margin-bottom:22px}
.mdna h2{font-family:var(--display);font-size:34px;letter-spacing:.01em;margin:26px 0 6px;line-height:1;text-wrap:balance;position:relative;padding-top:10px}
.mdna h2::before{content:"";position:absolute;left:0;top:0;width:60px;height:4px;background:var(--accent)}
.mdna h3{font-size:14px;font-style:italic;font-weight:600;margin:16px 0 4px}
.mdna p,.mdna li{font-size:13.5px;line-height:1.5;max-width:78ch}
.mdna ul{padding-left:20px;margin:6px 0}
.mdna .calc{background:var(--accent-soft);border-radius:2px;padding:0 3px}
.mdna textarea{width:100%;min-height:120px;border:1px dashed var(--line);border-radius:4px;background:var(--panel);padding:8px;font-size:13px;line-height:1.45;resize:vertical;color:var(--ink)}
.mdna .hint{font-size:11.5px;color:var(--ink-3);margin:4px 0 0}

/* ---------- assumptions (the drivers page) ---------- */
.drvlead{margin:0 0 2px;font-size:13.5px;color:var(--ink-2);max-width:88ch}
.drv{display:grid;gap:16px;max-width:1260px;min-width:0}
.drv>*{min-width:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px 16px 16px;min-width:0}
.card h3{margin:0 0 2px;font-size:15px;font-weight:600}
.card h4{margin:14px 0 4px;font-size:13px;font-weight:600}
.card .sub{margin:0 0 10px;font-size:12.5px;color:var(--ink-2);max-width:88ch}
/* The Compare lead. Inside the card when the view is open, on its own above the
   upgrade panel when it is locked, and the same size and colour either way. */
.cmplead{margin:0 0 10px;font-size:12.5px;color:var(--ink-2);max-width:88ch}
#view-compare>.cmplead{margin:0 0 12px}
.card.mod{border-left:4px solid var(--accent)}
.modhead{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.badge{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:2px 6px;white-space:nowrap}
.modlabel{font-size:15px;font-weight:600;border:1px solid transparent;border-radius:4px;padding:3px 6px;background:transparent;flex:1 1 200px;min-width:120px}
.modlabel:hover,.modlabel:focus{border-color:var(--line);background:var(--sheet)}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 14px;min-width:0}
.field{min-width:0}
.field label{display:block;font-size:11.5px;color:var(--ink-2);margin-bottom:3px}
.field input,.field select{width:100%;min-width:0;max-width:100%;padding:5px 8px;border:1px solid var(--line);border-radius:4px;background:var(--sheet);font-variant-numeric:tabular-nums;color:var(--ink)}
.field input[type=number]{text-align:right}
.field input[type=color]{height:32px;padding:2px}
.field.check{display:flex;gap:8px;align-items:center;padding-top:16px}
.field.check label{margin:0;order:2}
.field.check input{width:auto}
.field .unit{font-size:11px;color:var(--ink-3);margin-left:4px}
.field small{display:block;color:var(--ink-3);font-size:11px;margin-top:2px}
.field .ro{padding:5px 8px;border:1px dashed var(--line);border-radius:4px;text-align:right;font-variant-numeric:tabular-nums;background:var(--panel-2)}
.yearctl{display:flex;align-items:center;gap:8px}
.yearctl b{font-size:16px;min-width:1.2em;text-align:center}
.gridwrap{overflow-x:auto}
table.grid{border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
table.grid th,table.grid td{padding:3px 4px;text-align:right;white-space:nowrap}
table.grid th{font-weight:600;color:var(--ink-2);font-size:11.5px}
table.grid th.yr{background:var(--band);color:var(--band-ink);font-weight:700}
table.grid td.lbl,table.grid th.lbl{text-align:left;position:sticky;left:0;background:var(--panel);min-width:180px;font-weight:500;z-index:1}
table.grid td.lbl small{display:block;color:var(--ink-3);font-weight:400;font-size:11px}
table.grid input{width:76px;padding:3px 5px;border:1px solid var(--line);border-radius:3px;background:var(--sheet);text-align:right;font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink)}
table.grid select{padding:3px 5px;border:1px solid var(--line);border-radius:3px;background:var(--sheet);font-size:12px;color:var(--ink)}
table.grid input.wide{width:94px}
table.grid input.text{text-align:left;width:170px}
table.grid input.mon{width:82px;text-align:center}
table.grid tr.calc td{color:var(--ink-2);font-style:italic}
table.grid tr.calc td.lbl{font-style:normal}
table.grid td.act{text-align:center}
.xbtn{border:0;background:transparent;color:var(--ink-3);cursor:pointer;font-size:14px;padding:0 4px}
.xbtn:hover{color:var(--bad)}
.addrow{margin-top:8px}
.drv .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.drv .two>*{min-width:0}
@media (max-width:1000px){.drv .two{grid-template-columns:1fr}}
.tplgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.tpl{text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--sheet);cursor:pointer;display:grid;gap:4px}
.tpl:hover{border-color:var(--accent)}
.tpl b{font-size:13.5px}
.tpl span{font-size:12px;color:var(--ink-2)}
.err{color:var(--bad);font-size:12px;align-self:center}

/* ---------- modals ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:20}
.modal.open{display:flex}
.modal .box{background:var(--panel);border:1px solid var(--line);border-radius:8px;width:min(760px,92vw);padding:16px;max-height:90vh;overflow:auto}
.modal h3{margin:0 0 4px}
.modal .sub{margin:0 0 10px;font-size:12.5px;color:var(--ink-2)}
.modal textarea{width:100%;height:300px;font-family:var(--mono);font-size:11.5px;background:var(--sheet);border:1px solid var(--line);border-radius:4px;padding:8px;color:var(--ink)}
.modal .row{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;flex-wrap:wrap}

/* ---------- guided start ---------- */
.wiz{max-width:720px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:22px 26px 20px}
.wtop{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.wcount{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.wdots{display:flex;align-items:center;gap:6px;margin-left:auto}
.wdot{display:block;width:8px;height:8px;border-radius:50%;background:var(--line-2);border:1px solid var(--line)}
.wdot.done{background:var(--ink-3);border-color:var(--ink-3)}
.wdot.on{background:var(--accent);border-color:var(--accent);width:10px;height:10px}
.wiz h2{font-family:var(--display);font-size:32px;line-height:1.05;letter-spacing:.01em;margin:0 0 6px;text-wrap:balance}
.wsub{margin:0 0 18px;font-size:13.5px;color:var(--ink-2);max-width:62ch}
.wdisclose{margin:-10px 0 18px;font-size:11.5px;line-height:1.5;color:var(--ink-3);max-width:62ch}
.wbody{display:grid;gap:15px}
.wfield{min-width:0}
.wfield label{display:block;font-size:13px;color:var(--ink-2);margin-bottom:5px}
.wfield .unit{font-size:11.5px;color:var(--ink-3);margin-left:5px}
.wfield small{display:block;margin-top:5px;font-size:12px;color:var(--ink-3);max-width:62ch}
.wbig{width:100%;min-width:0;min-height:52px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--sheet);color:var(--ink);font-size:19px;font-variant-numeric:tabular-nums}
input.wbig[type=number]{text-align:right}
.wchoices{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.wchoice{text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--sheet);color:var(--ink);cursor:pointer;display:grid;gap:4px;min-height:80px}
.wchoice:hover{border-color:var(--accent)}
.wchoice.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.wchoice b{font-size:15px}
.wchoice span{font-size:12.5px;color:var(--ink-2)}
.wroster{display:grid;gap:14px}
.wrow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) minmax(0,1fr);gap:10px}
.wnote{margin:0;font-size:13px;color:var(--ink-2);background:var(--panel-2);border:1px solid var(--line-2);border-radius:6px;padding:9px 11px}
.wlive:empty{display:none}
.wor{margin:16px 0 0;font-size:13px;color:var(--ink-2)}
.linkbtn{border:0;background:transparent;padding:0;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer}
.werr{margin:14px 0 0;font-size:13px;color:var(--bad)}
.werr:empty{display:none}
.wnav{display:flex;gap:10px;justify-content:space-between;margin-top:24px}
.wbtn{min-height:50px;padding:12px 24px;font-size:15px;min-width:118px}
@media (max-width:640px){
  .wiz{padding:18px 15px 16px}
  .wiz h2{font-size:27px}
  .wrow{grid-template-columns:1fr;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
}

/* ---------- print ---------- */
@media print{
  .topbar,.nav,.viewbar,.notes,.modal,.stmtbar,.pagehelp,.insights,.startdone,.defpop,.appfoot{display:none!important}
  /* The notes explain a statement to the person who built it. On paper they
     sit under the figures and should not compete with them, and they were
     running longer than the table itself. */
  .sheetnote{color:#000}
  body{background:#fff;color:#000}
  .frame{display:block}
  .main{padding:0}
  .sheet-wrap,.mdna{border:0;box-shadow:none}
  .sheet{min-width:0;--sheet:#fff;padding:0}   /* zoom is set per sheet by fitForPrint() in main.js */
  table.grid{zoom:1!important}
  .fs td.lbl{background:#fff}
  /* Breaking rules, learned the hard way. Telling the whole sheet not to break
     is wrong: it is taller than a page, so the browser pushes the entire thing
     to the next one and leaves the heading alone on a page of its own. What is
     wanted is narrower. Never split a row. Never leave the heading behind. And
     when a table does run on, repeat its column headers, so the second page is
     readable instead of a wall of unlabelled figures. */
  .fs tr{page-break-inside:avoid;break-inside:avoid}
  .sheet .eyebrow,.sheet .head{page-break-after:avoid;break-after:avoid}
  .fs thead{display:table-header-group}
  .fs tfoot{display:table-footer-group}
  .sheet .foot,.sheetnote{page-break-before:avoid;break-before:avoid}
  [data-def]{text-decoration:none!important}   /* the printed pack is the deck, with no teaching marks on it */
  body.printpack .view{display:block!important;page-break-after:always}
  body.printpack #view-drivers,body.printpack #view-start{display:none!important}
  @page{size:landscape;margin:12mm}
}

/* ---------- compare ---------- */
table.grid.cmp th{vertical-align:bottom;text-align:right;padding:6px 10px;font-size:12.5px;color:var(--ink)}
table.grid.cmp th small{display:block;color:var(--ink-3);font-weight:400;font-size:11px}
table.grid.cmp td{padding:4px 10px;text-align:right;font-variant-numeric:tabular-nums}
table.grid.cmp td small{color:var(--ink-3)}
table.grid.cmp tr.yr td{background:var(--band);color:var(--band-ink);font-weight:700;padding-top:6px}
table.grid.cmp tr.yr td.lbl{background:var(--band);color:var(--band-ink)}
table.grid.cmp tr.bold td{font-weight:700}
table.grid.cmp th.cur,table.grid.cmp td.cur{background:var(--accent-soft)}
table.grid.cmp tr.yr td.cur{background:var(--band);color:var(--band-ink)}

/* ---------- account, sync state and upgrade ---------- */
.account{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.acctwho{font-size:12px;color:var(--ink-2);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge.tierbadge{font-size:10px;padding:1px 5px}
.syncstate{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.syncstate::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
.syncstate.ok::before{background:var(--ok)}
.syncstate[data-sync="saving"]::before{background:var(--warn)}
.acctnotice{display:flex;align-items:center;gap:10px;padding:7px 18px;background:var(--accent-soft);color:var(--ink);border-bottom:1px solid var(--line);font-size:12.5px}
.acctnotice[hidden]{display:none}   /* an author display rule beats the browser default for [hidden] */
.acctnotice .xbtn{margin-left:auto}
.btn.locked{border-style:dashed}
.nav button.locked{border-left-style:dashed;border-left-color:var(--ink-3)}
@media (max-width:900px){.nav button.locked{border-left:0;border-bottom-style:dashed;border-bottom-color:var(--ink-3)}}

/* the sign in, upgrade and upload dialogs: bigger targets than the rest of the app */
.acct-modal .box{width:min(560px,94vw)}
.acct-modal .box .btn{min-height:48px;padding:10px 16px;font-size:13.5px}
.acct-field{margin:12px 0}
.acct-field label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:4px}
.acct-field input{width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--sheet);color:var(--ink);font-size:15px}
/* "Send a new code", greyed while the sixty seconds since the last one run out. */
.acct-resend{margin:8px 0 0;font-size:12.5px}
.linkbtn[disabled]{color:var(--ink-3);text-decoration:none;cursor:default}
.acct-modal .err{display:block;min-height:1em;margin:6px 0 0;text-align:left;align-self:auto}
.acct-modal .row{justify-content:flex-end;align-items:center}

.upsell h3{margin:0 0 4px}
.upsell .sub{margin:0 0 12px;font-size:13px;color:var(--ink-2)}
.billtoggle{display:flex;gap:6px;margin-bottom:12px}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.tier{border:1px solid var(--line);border-radius:8px;background:var(--sheet);padding:14px;display:flex;flex-direction:column;gap:6px}
.tier.mine{border-color:var(--accent);background:var(--accent-soft)}
.tier h4{margin:0;font-size:14px;font-weight:600}
.tier .tierprice{font-family:var(--display);font-size:28px;line-height:1;letter-spacing:.02em}
.tier p{margin:0 0 6px;font-size:12.5px;color:var(--ink-2);flex:1}
.tier .btn{width:100%}
.upnote{margin:12px 0 0;font-size:12px;color:var(--ink-3);max-width:70ch}
.upcard .upsell{max-width:760px}

/* the top bar already wraps on a phone, so drop the sync words and keep the dot */
@media (max-width:900px){.syncstate .lbl{display:none}.acctwho{max-width:150px}}

/* ---------- phones: nothing to tap is smaller than a fingertip ---------- */
/* 44px is the floor Apple and Google both publish. Desktop sizes are untouched:
   everything here is 600px and narrower. Buttons are inline-block by default, so
   min-height alone raises them and the browser keeps the label centred; the left
   nav is the one exception because it is display:block with left-aligned text. */
@media (max-width:600px){
  .btn,.btn.small,.tabstrip button,.nav button,.planbar select,.modal .btn,
  .acct-modal .box .btn,.tpl,.wchoice,.wbtn,.xbtn,.linkbtn{min-height:44px}
  /* 8px, not 12px, so all four labels fit a 375px screen without the strip
     scrolling. Every button is still wider than 44px, so the tap target holds. */
  .nav button{display:flex;align-items:center;padding:7px 8px}
  .tabstrip button{padding:10px 12px}
  .planbar select{max-width:min(260px,52vw)}
  .btn.small{padding:6px 10px}
  /* Taller rows would make the wrapping top bar taller too, so the gaps between
     them come in. The bar ends up 18px taller than it was, not 49px. */
  .topbar{gap:8px;row-gap:6px;padding:6px 12px}
  .planbar,.chips,.actions,.account{gap:5px}
}

@media print{.acctnotice,.account{display:none!important}}

/* Phones: the top bar scrolls away instead of pinning a third of the screen */
@media (max-width:600px){ .topbar{position:static} .nav{top:0} }

/* Paper sizing. Applied by fitForPrint() in main.js before printing, and left
   on while the page prints, so what is measured and what comes out of the
   printer are the same thing. It lived inside @media print once, which meant
   the fitting code measured the screen and shrank the sheets to half size. */
.sheet.compact .fs{font-size:8.6pt}
.sheet.compact .fs th,.sheet.compact .fs td{padding:1px 3px}
.sheet.compact .fs td.num{min-width:0}
/* No ellipsis and no wrapping. Letting a squeezed label wrap turned four-word
   row names into three lines each and made the table twice as tall as the page,
   which the fitter then answered by shrinking everything to illegibility. A row
   name takes the width it needs; the fitter scales the whole sheet after. */
.sheet.compact .fs td.lbl{min-width:0;max-width:none;overflow:visible;white-space:nowrap}
.sheet.compact .fs .cur{width:8px;margin-right:2px}
/* The notes belong to the sheet on paper, so they are sized with it and, more
   to the point, measured with it. Left at screen size they ran taller than the
   table and the fitter had no idea. */
/* Full width on purpose. Capping the measure at 64ch while shrinking the type
   made the notes wrap into more lines, not fewer, and they ended up taller than
   before. Across the sheet they are three lines. */
.sheet.compact .sheetnote{font-size:7.4pt;line-height:1.3;max-width:none;margin-top:6px}
.sheet.compact .sheetnote li{margin:1px 0}
.sheet.compact .head{margin-bottom:4px}
.sheet.compact .eyebrow{margin-bottom:4px;font-size:8pt}