:root{
  color-scheme:dark;
  --hover:#1f2430;--bg:#0f1218;--panel:#181c25;--panel-2:#1f2430;--border:#2c3342;--border-btn:#3d4558;
  --text:#e6e9ef;--muted:#8b93a5;--accent:#4fc3ad;--pos:var(--accent);--neg:#ff6b6b;
  --font:'Figtree',system-ui,sans-serif;
  --fs-title:1.25rem;--fs-name:1rem;--fs-text:.9rem;--fs-small:.85rem;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{font-family:var(--font);background:var(--bg);color:var(--text);margin:0;font-size:var(--fs-text)}
input,select,button{font-family:inherit}
main{max-width:1100px;margin:0 auto;padding:24px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:16px 20px;margin:16px 0}
h1{margin:0 0 4px;font-size:var(--fs-title)}h2{margin:0 0 12px;font-size:var(--fs-title);color:var(--accent)}
.grid{align-items:end;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
label{display:flex;flex-direction:column;font-size:var(--fs-small);gap:4px;color:var(--muted)}
input,select{padding:6px 8px;font-size:var(--fs-text);color:var(--text);background:var(--panel-2);border:1px solid var(--border);border-radius:4px}
input:focus,select:focus{outline:none;border-color:var(--accent)}
button{margin-top:12px;padding:8px 12px;font-size:var(--fs-text);font-weight:600;cursor:pointer;color:var(--muted);background:var(--panel);border:1px solid var(--border-btn);border-radius:8px;transition:background .15s,transform .1s}
button:hover{background:var(--hover)}
button:active{background:var(--border);transform:scale(.98)}
.hint{color:var(--muted);font-size:var(--fs-small)}
/* Tooltip on hover / keyboard focus: text from data-tip, same look as the section descriptions (.hint) */
.has-tip{position:relative}
.has-tip::after{content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 8px);z-index:20;width:max-content;max-width:min(300px,80vw);padding:8px 10px;box-sizing:border-box;white-space:normal;text-align:left;font-weight:400;font-size:var(--fs-small);line-height:1.4;color:var(--muted);background:var(--panel);border:1px solid var(--border-btn);border-radius:8px;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s}
.has-tip:hover::after,.has-tip:focus-visible::after{opacity:1;visibility:visible}
/* refresh button inside the price field (right edge) */
.inrow{position:relative;display:flex}
.inrow input{flex:1;min-width:0;padding-right:34px}
button.refresh{position:absolute;right:3px;top:50%;margin:0;padding:3px 7px;font-size:15px;line-height:1;background:transparent;border:0;transform:translateY(-50%)}
button.refresh:hover,button.refresh:active{background:var(--border);transform:translateY(-50%)}
.hint.ok{color:var(--pos)}
.hint.fail{color:var(--neg)}
table{width:100%;border-collapse:collapse}
td{padding:6px 4px;border-bottom:1px solid var(--border)}td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.pos{color:var(--pos);font-weight:600}.neg{color:var(--neg);font-weight:600}
#rawBox{margin-top:12px}
pre{max-height:240px;overflow:auto;background:var(--panel-2);padding:8px;font-size:var(--fs-small)}
.sub{margin:0 0 8px;font-size:var(--fs-text);font-weight:600;color:var(--text)}
.divider{border:0;border-top:1px solid var(--border);margin:16px 0}
#matHint{margin:0 0 10px}
thead th{font-size:var(--fs-small);font-weight:500;color:var(--muted);text-align:right;padding:4px 4px 6px;border-bottom:1px solid var(--border)}
thead th:first-child{text-align:left}
#matTable td{text-align:right;font-variant-numeric:tabular-nums}
#matTable td:first-child{text-align:left}
#matTable tfoot td{font-weight:600;border-bottom:0;border-top:1px solid var(--border)}
#matNote{margin:10px 0 0}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;align-items:center}
.tab{display:flex;align-items:center;background:var(--panel);border:1px solid var(--border-btn);border-radius:8px;overflow:hidden}
.tab.active{border-color:var(--accent)}
.tab.dragging{opacity:.4}
.tab.drop-before{box-shadow:inset 3px 0 0 var(--accent)}
.tab.drop-after{box-shadow:inset -3px 0 0 var(--accent)}
.tabs button{margin:0;border:0;border-radius:0;background:transparent;color:var(--muted);font-size:14px;font-weight:600;padding:8px 12px;transform:none}
.tabs button:hover{background:var(--hover)}
.tabs .tab.active .tab-btn{color:var(--accent)}
.tabs .tab-x{padding:8px 10px;font-size:16px;line-height:1;font-weight:400}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nav-btn{display:none}
.nav-menu{position:absolute;left:0;right:0;top:100%;z-index:20;max-height:calc(100vh - 56px);overflow-y:auto;background:var(--panel);border-bottom:1px solid var(--border-btn)}
.nav-menu[hidden]{display:none}
.nav-menu hr{margin:4px 0;border:0;border-top:1px solid var(--border)}
.nav-row{display:flex;align-items:center}
.nav-row.active{box-shadow:inset 3px 0 0 var(--accent)}
.nav-row.active .nav-item{color:var(--accent)}
.nav-menu button{margin:0;border:0;border-radius:0;background:transparent;color:var(--muted);text-align:left;font-size:15px;font-weight:600;transform:none}
.nav-menu button:hover{background:var(--hover)}
.nav-item{flex:1;padding:12px 24px}
.nav-x{padding:12px 20px;font-size:18px;line-height:1}
@media (max-width:700px){
  .app-top{padding-top:10px;padding-bottom:10px}
  .app-top h1{margin:0}
  .app-top .tabs,.add-menu{display:none}
  .nav-btn{display:block;margin:0;padding:4px 12px;font-size:20px;line-height:1.2}
}
.add-menu{position:absolute;z-index:20;display:flex;flex-direction:column;min-width:140px;background:var(--panel);border:1px solid var(--border-btn);border-radius:8px;overflow:hidden}
.add-menu[hidden]{display:none}
.add-menu button{margin:0;border:0;border-radius:0;background:transparent;color:var(--text,inherit);text-align:left;font-size:14px;font-weight:600;padding:10px 14px;transform:none}
.add-menu button:hover{background:var(--hover)}
.tabs .tab-add{border:1px solid var(--border-btn);border-radius:8px;padding:8px 14px;font-size:16px}
.ing{display:flex;flex-direction:column;gap:6px}
.ing select.link{font-size:var(--fs-small);padding:4px 6px}
.ing button.open-tab{margin-top:0;padding:4px 8px;font-size:var(--fs-small)}
#materials .ing label.chk{min-height:0;flex-direction:row;align-items:center;gap:6px;font-size:var(--fs-small)}
.chk input{width:auto;padding:0;margin:0;accent-color:var(--muted)}
input.linked{color:var(--text);border:1px dashed var(--muted);background:transparent;cursor:default}
.warn{color:var(--neg);font-size:var(--fs-small)}
#materials{align-items:start}
#materials .ing label{min-height:78px;justify-content:flex-end}
.pnode{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:start;padding:14px 0;border-bottom:1px solid var(--border)}
.pnode .pline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:28px}
.pnode .pcostbox{display:flex;flex-direction:column;align-items:flex-end;padding-top:4px}
.pnode{position:relative}
.pnode .pname{font-weight:600;font-size:var(--fs-name)}
.pnode button.ptoggle{margin:0;padding:0;width:20px;height:20px;line-height:1;font-size:.95rem;border-radius:4px;flex:none}
.pguides{position:absolute;top:0;bottom:0;display:flex;pointer-events:none}
.pguides i{position:relative;flex:none;width:22px}
.pguides i.g-V::before,.pguides i.g-T::before,.pguides i.g-L::before{content:'';position:absolute;left:8px;top:0;border-left:1px solid var(--line,#3d4659)}
.pguides i.g-V::before,.pguides i.g-T::before{bottom:0}
.pguides i.g-L::before{height:28px}
.pguides i.g-T::after,.pguides i.g-L::after{content:'';position:absolute;left:8px;top:28px;width:14px;border-top:1px solid var(--line,#3d4659)}
.pnode .pmeta{color:var(--muted);font-size:var(--fs-small)}
.pnode select{color:var(--muted);padding:4px 6px;font-size:var(--fs-text)}
.pnode input.pprice{width:110px;padding:4px 28px 4px 6px;font-size:var(--fs-text)}
.pnode input.pq{width:64px;padding:4px 6px;font-size:var(--fs-text)}
/* floating label: sits on the top border of the field (the notch is the card background); an empty field that is not
   focused shows it inside like a placeholder (the fields have placeholder=" " so :placeholder-shown works) */
.ilabel{position:absolute;left:6px;top:0;transform:translateY(-50%);padding:0 4px;font-size:.65rem;line-height:1;color:var(--muted);background:var(--panel);pointer-events:none;z-index:1;transition:top .12s,left .12s,font-size .12s,padding .12s}
.pfield:focus-within .ilabel{color:var(--accent)}
.pfield:has(input:placeholder-shown:not(:focus)) .ilabel{top:50%;left:7px;padding:0;font-size:var(--fs-text);background:transparent;color:var(--muted)}
.pfield:has(input:placeholder-shown:not(:focus)) input::placeholder{color:transparent}
.pnode label.chk{flex-direction:row;align-items:center;gap:6px;font-size:var(--fs-small)}
.pnode .pcost{margin-left:auto;display:flex;gap:8px;font-variant-numeric:tabular-nums;font-size:var(--fs-text)}
.pin-h h2{margin-bottom:6px}
.pin-h p{margin:0 0 4px}
.phead{display:flex;justify-content:flex-end;gap:8px;color:var(--muted);font-size:var(--fs-small);padding-bottom:4px;border-bottom:1px solid var(--border)}
.phead span{text-align:right}
.phead span:first-child{min-width:7.5rem;text-align:left}
.phead span:last-child{min-width:8.5rem}
.pnode .pcost>span{text-align:right;color:var(--muted)}
.pnode.proot .pcost>span:first-child{font-weight:600;color:var(--text)}
.pnode.proot .pcost>span.hint{font-weight:600;color:var(--text)}
.pnode .pcost>span.warn-orange{color:#e5a35f}
.pnode .pcost>span:first-child{min-width:7.5rem;text-align:left}
.pnode .pcost>span.hint{min-width:8.5rem}
.pnode .pcost>span.warn-orange:first-child{min-width:0}
#pShopping td,#pSummary td{text-align:right;font-variant-numeric:tabular-nums}
#pShopping td:first-child,#pSummary td:first-child{text-align:left}
#pShopping thead th{text-align:right}#pShopping thead th:first-child{text-align:left}
/* sortable header of the shopping list */
.sortbtn{margin:0;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;display:inline-flex;align-items:center;gap:4px;cursor:pointer;transform:none}
.sortbtn:hover,.sortbtn:active{background:transparent;color:var(--text);transform:none}
.sortmark{font-size:.65em;min-width:.7em}
#pShopping tfoot td{font-weight:600;border-bottom:0;border-top:1px solid var(--border)}
#pRawBox{margin-top:12px}
.warn-orange{color:#e5a35f;font-size:var(--fs-small)}
#pWholeWarn{margin-top:12px}
#pWholeWarn button{margin:0 2px;padding:2px 8px;font-size:var(--fs-small)}
#pApplySettings{margin:0 2px;padding:2px 8px;font-size:var(--fs-small)}
.pnode .pwarn{display:block;margin-top:4px}
.pnode .pbreak .pbline{display:block}
.pnode .pbreak .pbline+.pbline{margin-top:6px}
.pnode .pbreak{align-self:flex-start;text-align:left;margin-top:10px;font-size:var(--fs-small);font-variant-numeric:tabular-nums}
#pPriceWarn{margin:0 0 12px}
#pTimes input.plevel{width:80px;padding:4px 6px;font-size:var(--fs-text)}
#pTargetHours{width:80px;padding:4px 6px}
/* Production time card: rows with the label on the left and the value (or the field) on the right */
.trow{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:12px;padding:4px;font-size:var(--fs-text);color:var(--muted)}
.trow>:last-child{color:var(--text);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.trow-head>:first-child{color:var(--text);font-weight:600;font-size:var(--fs-name)}
.trow>.hint{color:var(--muted);font-size:var(--fs-small);font-style:italic;white-space:normal}
.trow-head>.hint{font-style:normal}
.trow-head>:last-child{font-weight:600}
/* grey lines under a building: one per product */
.trow-sub{padding-left:12px}
.trow-sub>*,.trow-sub>:last-child{color:var(--muted)}
.trow>.trow-total{color:var(--accent);font-size:var(--fs-name);font-weight:600}
#pTimesBody .divider{margin:10px 0}
#pTimesMsg{margin-top:12px}
.produce-info{margin:10px 0 0}
.produce-info span{display:block}
.pnode .pfield{position:relative;display:inline-flex}
.pnode .perr{position:absolute;top:100%;left:0;margin-top:3px;white-space:nowrap;font-size:var(--fs-small);color:#e5a35f}
.pnode .prow.has-err{padding-bottom:18px}
.pnode .prow{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pnode select.plink{font-size:var(--fs-small)}
.pnode button.open-tab{margin-top:0;padding:4px 8px;font-size:var(--fs-small)}
.pnode input.linked{color:var(--text);border:1px dashed var(--muted);background:transparent;cursor:default}
.app-top{position:sticky;top:0;z-index:10;background:var(--bg);margin:-24px -24px 0;padding:24px 24px 12px;border-bottom:1px solid var(--border)}

.btnrow{margin-bottom:16px}
.grid ~ .btnrow{margin:16px 0 0}
.app-foot{max-width:1100px;margin:0 auto;padding:8px 24px 32px;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;color:var(--muted);font-size:var(--fs-small)}
.app-foot a{color:inherit;text-decoration:underline}
.pbar{display:none;flex-wrap:wrap;gap:4px 24px;align-items:baseline;margin-top:10px;font-variant-numeric:tabular-nums;font-size:.95rem}
.pbar.has{display:flex}
.pbar-warn{flex-basis:100%;margin-top:6px;font-size:var(--fs-small)}
.pbar-warn button{margin:0 0 0 8px;padding:2px 8px;font-size:var(--fs-small)}
/* result of a price fetch started from the header or a field: in view while you are low in the tree, clears itself */
.pflash{margin-top:6px;font-size:var(--fs-small);color:var(--muted)}
.pflash.ok{color:var(--pos)}
.pflash.fail{color:var(--neg)}
.pbar-what{flex-basis:100%;color:var(--muted);font-size:var(--fs-small)}
.pbar-set{display:inline;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.pbar-set:hover{color:var(--accent)}
.pbar small{color:var(--muted);font-size:var(--fs-small)}
.dlg{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:20px 24px;min-width:300px;max-width:90vw}
.dlg::backdrop{background:rgba(0,0,0,.6)}
.dlg p{margin:0 0 4px;font-size:1rem}
.dlg-list{margin:10px 0 16px;display:grid;gap:4px}
.dlg-list>div{display:grid;grid-template-columns:110px 1fr;gap:12px}
.dlg-list>div>span:first-child{color:var(--muted)}
.dlg-list>div>span:last-child{color:var(--text)}
.dlg-btns{display:flex;justify-content:flex-end;gap:8px}
button.danger{color:var(--neg);border-color:var(--neg)}
button.danger:hover{background:rgba(255,107,107,.12)}
/* a status message that went well (class "good" next to "warn-orange"): the accent colour, for every message of this kind */
.warn-orange.good{color:var(--accent)}

/* Planner tree on a phone: one column per node. Name line, costs on one line under it, then the controls
   (mode, price, quality on the first row), so the controls get the full width instead of what the cost columns leave. */
@media (max-width:700px){
  .phead{display:none}
  .pnode{grid-template-columns:minmax(0,1fr)}
  .pnode .pmain{display:contents}
  .pnode .pline{order:1}
  .pnode .pcostbox{order:2;align-items:flex-start;padding-top:2px}
  .pnode .prow{order:3;align-items:flex-start;gap:10px 8px}
  .pnode .pmain>.pwarn{order:4}
  .pnode .pcost{margin-left:0}
  .pnode .pcost>span:first-child,.pnode .pcost>span.hint{min-width:0}
  .pnode .pcost>span.hint{margin-left:12px}
  .pnode .pfield{min-width:0}
  .pnode .prow>.pfield:has(input.pprice){flex:1 1 120px}
  .pnode .prow>.pfield:has(input.pqual){flex:0 0 84px}
  .pnode .pfield input.pprice,.pnode .pfield input.pqual{width:100%;min-width:0}
  /* the error text hangs under its field (absolute); the extra row gap keeps it clear of the next row of controls */
  .pnode .prow.has-err{row-gap:24px}
  .pnode label.chk:has(input.pq){flex:1 1 100%;white-space:nowrap}
  .pnode label.chk .pfield{flex:1}
}

/* Type scale: section titles are the largest, text in a section is smaller, descriptions the smallest.
   On a phone the whole scale shrinks; form fields stay at 16px there (iOS zooms the page into smaller fields), except the dense fields of the planner tree. */
@media (max-width:700px){
  :root{--fs-title:1.15rem;--fs-name:.95rem;--fs-text:.85rem;--fs-small:.7rem}
  .pbar{font-size:.9rem}
  input,select,#pTimes input.plevel{font-size:1rem}
}

/* Phone: smaller table headers (Shopping list, Materials cost); the result bar as an aligned 2 x 2 grid
   (Total cost | Revenue, Profit | Margin; label left, value right in each cell) */
@media (max-width:700px){
  thead th{font-size:var(--fs-text)}
  .pbar.has{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px}
  .pbar-what,.pbar-warn,.pbar>.hint{grid-column:1/-1}
  .pbar>span:not([class]){display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-width:0}
}

/* Production set tab */
.srow-add{margin-top:12px}
.tscroll{overflow-x:auto}
.tscroll table{min-width:520px}
.tscroll th,.tscroll td{text-align:left;padding:6px 8px 6px 4px;vertical-align:top;font-size:var(--fs-text)}
.tscroll thead th{font-size:var(--fs-small);text-align:left}
.tscroll td.num,.tscroll th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tscroll tfoot td{border-top:1px solid var(--border);font-weight:600}
.tscroll td .inrow{min-width:120px}
.tscroll td select{max-width:100%}
.chk{display:flex;align-items:center;gap:6px;font-size:var(--fs-small);color:var(--muted)}
.chk input{margin:0}
.srow-title{font-size:var(--fs-name);font-weight:600;margin:0 0 8px}
.tpair{display:inline-flex;gap:28px;justify-content:flex-end}
.tpair>span:first-child{min-width:64px;text-align:right}
.tpair>span:last-child{min-width:84px;text-align:right}

/* Production set bar: two lines on a desktop; on a phone the list of products is a short text until "Show details" is clicked (the settings stay visible) */
.pbar-lead{display:none}
.pbar-more{display:inline;margin:0;padding:0;border:0;background:none;font:inherit;color:var(--accent);cursor:pointer;white-space:nowrap}
.pbar-more:hover{background:none;text-decoration:underline}
.more-open{display:none}
@media (max-width:700px){
  .pbar-lead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
  .pbar-detail{display:none}
  .pbar.open .pbar-detail{display:block}
  .pbar.open .more-open{display:inline}
  .pbar.open .more-closed{display:none}
}

/* Production set: dropdowns and price fields inside the tables (and the Buildings switch) use the small text of the table, not the 16px of the other form fields */
.tscroll td select,#sBuildingsMode{font-size:var(--fs-text);padding:4px 6px}
.tscroll td select{color:var(--muted)} /* as the Buy / Produce select of the planner tree (.pnode select) */
.tscroll td input{font-size:var(--fs-text);padding:4px 30px 4px 6px}
.tscroll td .refresh{right:2px;padding:3px 6px;font-size:var(--fs-text)}
.tscroll table.fixed{table-layout:fixed;min-width:640px}
.pblock{margin:0 0 4px}
.stock{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px}
.stock .hint{grid-column:1 / -1;font-size:var(--fs-small)}
.tscroll td .stock input{padding:4px 6px}

/* "Apply plan / set settings" next to the import message: the small button of the warning bar */
#pApplySettings,#sApplySettings{margin:0 0 0 8px;padding:2px 8px;font-size:var(--fs-small);vertical-align:middle}

/* Production set tables on a phone (up to 700 px): the tables keep their columns and scroll sideways, the first column (the name,
   which wraps) stays in place. The Ingredients table keeps a minimum width so its fields stay usable; the others just lose theirs. */
@media (max-width:700px){
  .tscroll table{min-width:0}
  .tscroll table.fixed{min-width:600px}
  .tscroll td:first-child,.tscroll th:first-child{position:sticky;left:0;z-index:1;background:var(--panel)}
}
.qin{display:inline-flex;align-items:center;gap:2px}
.tscroll td .qin input{width:56px;padding:4px 4px}
.mergebar{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin:0 0 8px}
.chk{flex-direction:row;align-items:center}

/* Retail Summary tab: the instructions (collapsed once a file is loaded), the period fields and the table (the .tscroll rules above style it) */
/* the instruction opens in a dialog (button "How to get the file") */
.rdlg{max-width:min(620px,92vw);max-height:90vh;overflow:auto;color:var(--muted)}
.rdlg h2{margin:0 0 8px}
.rdlg ol{margin:8px 0 0;padding-left:20px;line-height:1.5}
.rdlg b{color:var(--text)}
.rshots{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;margin-top:12px}
.rdlg .dlg-btns{margin-top:16px}
.rshots img{max-width:100%;height:auto;border:1px solid var(--border);border-radius:8px}
.rperiod{grid-template-columns:repeat(auto-fill,minmax(160px,200px));margin-bottom:12px;position:relative}
/* Calendar of the period fields (own, src/calendar.js): days outside the file are greyed and cannot be clicked; the chosen days use the accent colour, like the active period button */
.rdate{cursor:pointer}
.rcal{position:absolute;z-index:15;width:252px;background:var(--panel);border:1px solid var(--border-btn);border-radius:8px;padding:10px}
.rcal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-weight:600;color:var(--text)}
.rcal-head button{margin:0;padding:2px 10px;font-size:var(--fs-text)}
.rcal-head button:disabled{opacity:.3;cursor:default}
.rcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.rcal-wd{padding:4px 0;font-size:var(--fs-small);color:var(--muted)}
.rcal-grid button.cd{margin:0;padding:6px 0;font-size:var(--fs-text);font-weight:400;color:var(--text);background:transparent;border:1px solid transparent;border-radius:6px}
.rcal-grid button.cd:hover:not(:disabled){background:var(--border)}
.rcal-grid button.cd:disabled{opacity:.3;cursor:default}
.rcal-grid button.cd.in{background:rgba(79,195,173,.12)}
.rcal-grid button.cd.sel{color:var(--accent);border-color:var(--accent);background:rgba(79,195,173,.25);font-weight:600}
.rpresets{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.rpresets button{margin:0}
.rpresets button.on{color:var(--accent);border-color:var(--accent)}
h2.rsub{margin:20px 0 8px}
#rTable,#rBuildings{min-width:820px}
#rTable td.hint{font-style:italic}
@media (max-width:700px){#rTable,#rBuildings{min-width:760px}}

/* Home tab: what the app is for (three facts), then one clickable row per question */
.home-facts{display:grid;grid-template-columns:130px 1fr;gap:6px 16px;line-height:1.5}
.home-facts>span:nth-child(odd){color:var(--muted)}
button.home-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;margin:0;padding:12px 4px;text-align:left;color:var(--text);background:transparent;border:0;border-top:1px solid var(--border);border-radius:0}
button.home-row:first-of-type{border-top:0}
button.home-row:hover{background:var(--hover)}
.home-arrow{color:var(--accent)}
.home-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.home-ask{font-size:var(--fs-name);font-weight:600;color:var(--text)}
.home-name{width:9.5rem;text-align:center;padding:5px 12px;font-size:var(--fs-small);font-weight:600;color:var(--accent);border:1px solid var(--accent);border-radius:8px;white-space:nowrap}
.home-note{margin:8px 0 0}
@media (max-width:700px){.home-facts{grid-template-columns:1fr;gap:0}.home-facts>span:nth-child(even){margin-bottom:8px}}

/* Hover of rows (planner tree nodes, rows of every table in the planner, the sets, the calculator and Retail Summary): the same lighter colour as the buttons */
.pnode:hover,table tbody tr:hover{background:var(--hover)}

/* Retail Summary: a product row opens to its qualities */
tr.rprod{cursor:pointer}
button.rexp{display:inline-flex;align-items:center;gap:6px;margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:inherit;text-align:left;transform:none}
button.rexp:hover,button.rexp:active{background:transparent;transform:none}
.rarrow{display:inline-block;width:1em;color:var(--accent)}
tr.rq td{color:var(--muted)}
tr.rq td.pos{color:var(--pos)}
tr.rq td.neg{color:var(--neg)}
tr.rq td.rqn{padding-left:28px}