/* APS Automations: Genera look (same tokens as the Solar and Floor Plan tools: gold on graphite, light and dark). */
:root{
  --paper:#EEF1F4; --sheet:#FFFFFF; --ink:#1B2A41; --muted:#5B6778; --line:#D3DAE3; --field:#F7F9FB; --raised:#F1F4F7;
  --gold:#A6790C; --gold-soft:#F3E6BD; --on-gold:#FFFFFF; --ok:#2E7D4F; --warn:#B5561B; --bad:#B3261E;
  /* data colours: categorical slots 1-4 of the Genera data palette (validated, fixed order) */
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#6250d6; --s6:#e87ba4; --other:#8a94a3;
  --grid:#E4E9EF; --surface:#FFFFFF;
  --f-display:"Barlow Semi Condensed","Arial Narrow","Segoe UI",sans-serif; --f-body:"Barlow","Segoe UI",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
:root:not([data-theme="light"]){
  --paper:#14171E; --sheet:#1C2029; --ink:#EEF0F3; --muted:#A9B0BC; --line:#2F3542; --field:#14171E; --raised:#242935;
  --gold:#E2B54A; --gold-soft:#3A3120; --on-gold:#1A1406; --ok:#6FCF97; --warn:#E39A62; --bad:#F08A80;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#9085e9; --s6:#d55181; --other:#7c8594;
  --grid:#262B36; --surface:#1C2029; color-scheme:dark;
}
:root[data-theme="dark"]{
  --paper:#14171E; --sheet:#1C2029; --ink:#EEF0F3; --muted:#A9B0BC; --line:#2F3542; --field:#14171E; --raised:#242935;
  --gold:#E2B54A; --gold-soft:#3A3120; --on-gold:#1A1406; --ok:#6FCF97; --warn:#E39A62; --bad:#F08A80;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#9085e9; --s6:#d55181; --other:#7c8594;
  --grid:#262B36; --surface:#1C2029; color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:96px}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 var(--f-body)}   /* the Genera header pads the <main> below it itself */
h1,h2,h3{font-family:var(--f-display);margin:0;letter-spacing:-.01em;line-height:1.15;text-wrap:balance}
a{color:var(--gold)}
.wrap{max-width:none;margin:0;padding:4px 14px 24px}   /* a small margin all round: the page uses nearly the full width */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* tool bar: sections + connection state */
.toolbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:flex-end;margin:14px 0 6px}
.hdr-tabs{border:0;background:none;padding:0;margin-right:6px;flex-wrap:nowrap}
.hdr-tabs a{padding:8px 12px;font-size:14px}
@media (max-width:1100px){.hdr-tabs a span{display:none}.hdr-tabs a{padding:9px}}
.tabs{display:flex;gap:6px;flex-wrap:wrap;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--sheet)}
.tabs a{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:9px;color:var(--muted);text-decoration:none;font-weight:600}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{background:var(--gold);color:var(--on-gold)}
.conn{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--other)}
.dot.on{background:var(--ok)} .dot.demo{background:var(--gold)}

/* cards and controls */
.card{background:var(--sheet);border:1px solid var(--line);border-radius:12px;padding:16px}
.card h2{font-size:18px;margin-bottom:10px}
.btn{font:600 14px var(--f-body);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 16px;border-radius:9px;border:1px solid var(--line);background:var(--raised);color:var(--ink);cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--gold)}
.btn.primary{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.danger{color:var(--bad)}
.btn.small{min-height:30px;padding:0 10px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted);min-width:0}
input,select,textarea{font:inherit;font-size:14px;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:7px;padding:8px 10px;width:100%;min-width:0}
input[type=checkbox],input[type=radio]{width:auto}
.chk{flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-size:14px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;border:1px solid var(--line);color:var(--muted)}
.pill.ok{color:var(--ok);border-color:var(--ok)} .pill.bad{color:var(--bad);border-color:var(--bad)} .pill.run{color:var(--gold);border-color:var(--gold)}
.notice{border:1px solid var(--gold);background:var(--gold-soft);color:var(--ink);border-radius:10px;padding:10px 14px;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.empty{padding:36px 16px;text-align:center;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;color:var(--muted);position:sticky;top:0;background:var(--sheet);cursor:pointer;white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tablewrap{overflow:auto;max-height:420px;border:1px solid var(--line);border-radius:8px}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:10px;font-size:14px;z-index:9999;max-width:90vw}
#toast.warn{background:var(--bad);color:#fff}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:9000;padding:16px}
.modal{background:var(--sheet);border:1px solid var(--line);border-radius:14px;width:min(640px,100%);max-height:86vh;display:flex;flex-direction:column}
.modal header{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.modal .body{padding:14px 18px;overflow:auto}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;margin-bottom:10px}
.crumbs button{background:none;border:0;color:var(--gold);cursor:pointer;font:inherit;padding:0}
.list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.list button{width:100%;text-align:left;display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--raised);color:var(--ink);font:inherit;cursor:pointer}
.list button:hover{border-color:var(--gold)}

/* home */
.hero{padding:28px 0 8px}
.hero h1{font-size:clamp(30px,4.4vw,52px)} .hero h1 span{color:var(--gold)}
.hero p{max-width:120ch;color:var(--muted);font-size:17px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cards{grid-template-columns:minmax(0,1fr)}}
.fcard{display:flex;flex-direction:column;gap:10px;background:var(--sheet);border:1px solid var(--line);border-radius:14px;padding:20px;text-decoration:none;color:var(--ink);position:relative;transition:border-color .15s,transform .15s}
a.fcard:hover{border-color:var(--gold);transform:translateY(-2px)}
.fcard .icon{width:46px;height:46px;border-radius:12px;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center}
.fcard .icon .ic{width:24px;height:24px}
.fcard h3{font-size:20px} .fcard p{margin:0;color:var(--muted);font-size:14px}
.fcard .tag{position:absolute;top:16px;right:16px}
.fcard .go{margin-top:auto;color:var(--gold);font-weight:600}
.fcard.soon{opacity:.8}
.section-h{margin:34px 0 4px;font-size:24px}

/* dashboard */
.dash{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:980px){.dash{grid-template-columns:minmax(0,1fr)}}
.slicers{display:flex;flex-direction:column;gap:14px;position:sticky;top:96px;max-height:calc(100vh - 110px);overflow:auto}
@media (max-width:980px){.slicers{position:static;max-height:none}}
.slicers h3{font-size:15px;margin-bottom:6px}
.opts{display:flex;flex-direction:column;gap:2px;max-height:190px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:4px;background:var(--field)}
.opts label{flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-size:13.5px;padding:3px 6px;border-radius:5px}
.opts label:hover{background:var(--raised)}
.opts .n{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.kpi{background:var(--sheet);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.kpi small{display:block;color:var(--muted);font-size:12.5px}
.kpi b{font:700 28px var(--f-display);font-variant-numeric:tabular-nums}
.kpi .d{font-size:12.5px;font-weight:600}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(480px,1fr));gap:14px;margin-bottom:14px}
@media (max-width:480px){.charts{grid-template-columns:minmax(0,1fr)}}
.chart{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-width:0}
.chart h3{font-size:16px;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.chart h3 small{font:400 12px var(--f-body);color:var(--muted)}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .bar{cursor:pointer}
.chart .lbl{fill:var(--ink);font:12px var(--f-body)} .chart .val{fill:var(--muted);font:12px var(--f-body);font-variant-numeric:tabular-nums}
.chart .axis{stroke:var(--grid)} .chart text.tick{fill:var(--muted);font:11px var(--f-body)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:12.5px}
.legend span{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.tip{position:fixed;pointer-events:none;background:var(--ink);color:var(--paper);padding:6px 10px;border-radius:7px;font-size:12.5px;z-index:9500;max-width:260px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.chip{display:inline-flex;gap:6px;align-items:center;background:var(--gold-soft);border:1px solid var(--gold);color:var(--ink);border-radius:99px;padding:3px 6px 3px 12px;font-size:13px}
.chip button{border:0;background:none;color:inherit;cursor:pointer;font-size:16px;line-height:1}
.pf{display:grid;grid-template-columns:1fr;gap:6px}
.cmp-up{color:var(--ok)} .cmp-down{color:var(--bad)}

/* viewer */
#viewerBox{position:relative;height:calc(100vh - 230px);min-height:420px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0d0f14}
.vbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.vmsg{position:absolute;inset:0;display:grid;place-items:center;color:#c9cfd9;text-align:center;padding:24px;z-index:2}

/* scheduler */
.sched{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:980px){.sched{grid-template-columns:minmax(0,1fr)}}
.form{display:grid;gap:12px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg label{flex-direction:row;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:8px;color:var(--ink);cursor:pointer;background:var(--field)}
.seg label:has(input:checked){border-color:var(--gold);background:var(--gold-soft)}
.sheetlist{max-height:200px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:6px;background:var(--field)}
.jobs{display:grid;gap:10px}
.job{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--raised);display:grid;gap:6px}
.job .top{display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between;align-items:center}
.job .acts{display:flex;gap:6px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ACC tree (hubs, projects, folders, models) */
.tree{border:1px solid var(--line);border-radius:10px;background:var(--field);max-height:360px;overflow:auto}
.tree-bar{display:flex;gap:10px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line);font-size:13px;position:sticky;top:0;background:var(--field);z-index:1}
.tree-bar:empty{display:none}
.tree-row{display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;border-radius:6px;margin:1px 4px}
.tree-row:hover{background:var(--raised)} .tree-row.selected{background:var(--gold-soft);outline:1px solid var(--gold)}
.tree-caret{display:inline-grid;transition:transform .12s;color:var(--muted)} .tree-caret.open{transform:rotate(90deg)} .tree-caret.empty{visibility:hidden}
.tree-icon{color:var(--gold);display:inline-grid} .tree-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-select{margin-left:auto}
.tree-children{display:none;margin-left:18px;border-left:1px solid var(--line)} .tree-children.open{display:block}
.tree-err{color:var(--bad)}
.onboard{padding:14px 16px;line-height:1.5} .onboard h3{font-size:17px;margin-bottom:6px} .onboard ol{padding-left:20px}
.onboard-id{display:inline-flex;gap:8px;align-items:center;margin-top:4px;flex-wrap:wrap} .onboard-id code{background:var(--raised);padding:2px 8px;border-radius:6px;word-break:break-all}

/* export wizard */
.steps{list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px;padding:0}
.steps li{flex:1 1 140px}
.steps button{width:100%;display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:var(--raised);color:var(--muted);font:600 14px var(--f-body);cursor:pointer}
.steps button b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid currentColor;font-size:12px}
.steps button.active{border-color:var(--gold);color:var(--ink);background:var(--gold-soft)} .steps button.done{color:var(--ok)}
.step h2{font-size:22px;margin-bottom:4px}
.wizfoot{justify-content:space-between;margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.picked{margin:10px 0 0;padding:8px 12px;border:1px solid var(--gold);background:var(--gold-soft);border-radius:8px}
.bar{height:6px;background:var(--raised);border-radius:99px;overflow:hidden;border:1px solid var(--line)} .bar>div{height:100%;width:0;background:var(--gold);transition:width .3s}
.chips2{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.pchip{border:1px solid var(--line);background:var(--field);color:var(--ink);border-radius:99px;padding:4px 12px;font:13px var(--f-body);cursor:pointer}
.pchip:hover{border-color:var(--gold)} .pchip.on{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.pgroup{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:8px}
.pattern{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px;border:1px dashed var(--line);border-radius:10px;min-height:52px;background:var(--field)}
.ptok{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--gold);background:var(--gold-soft);border-radius:8px;padding:3px 4px 3px 10px;font-size:13px}
.ptok button{border:0;background:none;color:var(--muted);cursor:pointer;padding:0 4px;font-size:15px}
.psep{width:auto;padding:4px 6px;font-size:13px}
.previewlist{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-variant-numeric:tabular-nums} .previewlist li{padding:6px 10px;border:1px solid var(--line);border-radius:7px;background:var(--field);word-break:break-all}
.status-ok{color:var(--ok)} .status-bad{color:var(--bad)}
.step h2+.seg,.step h2+p+.seg{margin-top:10px}

/* model browser: folder tree on the left, files on the right, full width under the header */
.browser{position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--paper);display:flex;flex-direction:column;padding:10px 14px 14px}
.browser-head{display:flex;gap:12px;align-items:center;margin-bottom:12px} .browser-head h2{font-size:24px;margin-right:auto}
.browser-actions{display:flex;gap:8px}
.browser-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:16px}
@media (max-width:820px){.browser-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(160px,36%) minmax(0,1fr)}}
.browser-tree.tree{max-height:none;height:100%;background:var(--sheet);border-radius:12px;padding:6px 0;overflow:auto}
.browser-files{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--sheet);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.browser-table{flex:1;max-height:none}
.frow{cursor:pointer} .frow:hover td{background:var(--raised)}
.browser-table .tree-icon{vertical-align:middle;margin-right:4px}

/* the frozen bar under the header: active project and model, then the connection; stays in place on every page */
.toolbar{position:sticky;top:var(--hdr,84px);z-index:60;background:var(--paper);justify-content:space-between!important;margin:0 0 14px!important;padding:10px 0;border-bottom:1px solid var(--line)}
.ctx{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;font-size:14px}
.ctx b{max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctx-l{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em} .ctx-sep{color:var(--muted)}

/* project browser page and the overlay share one layout */
.pbrowser{height:calc(100vh - var(--hdr,84px) - 150px);min-height:460px}
.pbrowser .browser-body{height:100%}
.browser-host{flex:1;min-height:0;display:flex} .browser-host>.browser-body{flex:1;min-width:0}
.browser-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.browser-bar .crumbs{margin:0}

/* dashboard: compact cards so more fits above the fold */
.kpirow{display:flex;gap:10px;align-items:stretch;margin-bottom:10px;flex-wrap:wrap}
.kpirow .kpis{flex:1 1 560px;margin:0;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.kpi{padding:8px 12px} .kpi b{font-size:24px;line-height:1.15} .kpi small{font-size:12px} .kpi .d{font-size:11.5px;min-height:0;line-height:1.2}
.dtools{flex:0 0 270px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.dtools label{gap:2px}
.chips{margin-bottom:8px}
.charts{gap:10px;margin-bottom:10px}
.chart{padding:10px 14px}
.chart h3{font-size:15px;margin-bottom:2px}
.chscroll{max-height:250px;overflow-y:auto;overflow-x:hidden;padding-right:4px}
.dash{gap:12px} .slicers{gap:10px;padding:12px}
.opts{max-height:170px}
.opts label{padding:5px 6px;gap:10px;font-size:14px}
.opts input[type=checkbox]{width:21px;height:21px;flex:none;accent-color:var(--gold);cursor:pointer}   /* about 50% bigger than the browser default */
.card h2{margin-bottom:6px}

/* every checkbox (sheet lists, file tables, formats) is large enough to hit easily; radios a little larger too */
input[type=checkbox]{width:21px;height:21px;flex:none;accent-color:var(--gold);cursor:pointer}
input[type=radio]{width:18px;height:18px;flex:none;accent-color:var(--gold);cursor:pointer}
.tablewrap td input[type=checkbox],.tablewrap th input[type=checkbox]{vertical-align:middle}
.tablewrap td:first-child,.tablewrap th:first-child{width:44px}

/* dashboard KPI row: small cards in one line; the version card and the actions card sit at the right end in the same card style */
.kpirow{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
.kpirow .kpis{display:flex;flex-wrap:wrap;gap:10px;flex:1 1 auto;margin:0}
.kpirow .kpi{flex:0 0 auto;min-width:118px;padding:6px 12px;border-radius:10px}
.kpirow .kpi small{font-size:11.5px;line-height:1.2}
.kpirow .kpi b{font-size:20px;line-height:1.15}
.kpirow .kpi .d{font-size:11px;line-height:1.1}
.kpirow .vcard{min-width:0}
.kpirow .vcard select{width:auto;min-width:0;padding:3px 26px 3px 8px;font-size:14px;margin-top:1px}   /* as wide as its longest version label, no more */
.kpirow .acard{display:flex;align-items:center;gap:8px;min-width:0}

/* narrow side margins in the Genera header and footer too, so the logo and the profile sit near the edges and the content lines up with them */
.site-header{padding-left:14px;padding-right:14px}
.main-footer .container{padding:0 14px}

/* footer: always at the bottom of the window, even when the page is short, and with a smaller gap above it */
body{min-height:100vh;display:flex;flex-direction:column}
main.wrap{flex:1 0 auto;width:100%}
#genera-footer{margin-top:auto}
.main-footer{padding-top:1.1rem;margin-top:12px}
.main-footer .footer-container{padding-bottom:1rem;gap:1.5rem}
.main-footer .footer-brand{gap:.6rem}
.main-footer .footer-logo{height:44px}

/* footer, APS app only: tighter link columns and a slim copyright / privacy line */
.main-footer .footer-container{padding-bottom:.6rem}
.main-footer .footer-col{gap:.4rem}
.main-footer .col-title{margin-bottom:.1rem}
.main-footer .footer-links{gap:.3rem}
.main-footer .footer-bottom{padding:.5rem 0}
.main-footer .bottom-wrap{gap:.4rem}

/* horizontal bar charts: names start at the left edge, bars start right after the longest name */
.hb{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:10px;row-gap:5px;align-items:center;padding:2px 2px 2px 0}
.hb-l{font-size:13px;white-space:nowrap;max-width:28ch;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.hb-t{display:flex;align-items:center;gap:8px;min-width:0}
.hb-t i.bar{display:block;height:10px;border-radius:5px;background:var(--s1);min-width:3px;cursor:pointer;flex:none}
.hb-t .val{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.chscroll{max-height:236px}

/* category and level filter lists: tight rows (the checkboxes stay large) and one line per name */
.opts{gap:0;padding:3px}
.opts label{padding:1px 6px;gap:8px;line-height:1.2;min-height:0}
.opts .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.opts label{flex:none;min-height:26px;padding:0 6px}

/* dashboard layout: two independent columns of cards, so folding one pulls the next up */
.charts{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
.chcol{display:flex;flex-direction:column;gap:10px;min-width:0}
@media (max-width:900px){.charts{grid-template-columns:minmax(0,1fr)}}
/* fold arrow in every card header */
.fold{margin-left:8px;flex:none;width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--raised);color:var(--muted);cursor:pointer;display:inline-grid;place-items:center;padding:0}
.fold:hover{color:var(--ink);border-color:var(--gold)}
.fold .ic{width:16px;height:16px;transition:transform .15s}
.folded .fold .ic{transform:rotate(-90deg)}
.chart.folded>:not(h3){display:none}
.card.folded>:not(.row:first-child){display:none}
.chart h3{align-items:center}
.card.folded .row:first-child{margin-bottom:0}
.chart h3{justify-content:flex-start}.chart h3 small{margin-left:auto}

/* dashboard rows: category | level | version history in one line; then breakdown beside the version comparison */
.charts3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start;margin-bottom:10px}
.charts2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:10px;align-items:start;margin-bottom:10px}
@media (max-width:1250px){.charts3{grid-template-columns:repeat(2,minmax(0,1fr))}.charts2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){.charts3{grid-template-columns:minmax(0,1fr)}}
.charts3 .chscroll{max-height:300px}
.charts3 .hb-l{max-width:20ch}

/* top row: the category card keeps its own height (at most about 360px); level and version history take the same height and scroll inside */
.charts3 .chart{display:flex;flex-direction:column;min-width:0}
.charts3 [data-fold=cat] .chscroll,.charts3 [data-fold=lvl] .chscroll{max-height:360px}
.charts3 .chart[style*="height"] .chscroll{flex:1;min-height:0;max-height:none}
.charts3 [data-fold=hist] #chHist{flex:1;min-height:0;overflow:hidden}

/* breakdown: donut on the left, a list (colour, name, count, share) on the right */
.charts2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
.grpbody{display:flex;align-items:center;gap:18px;min-height:240px}
.grpdonut{flex:0 0 46%;min-width:0}
.vlegend{flex:1;min-width:0;display:grid!important;gap:2px;margin:0!important;max-height:300px;overflow-y:auto}
.lg{display:grid;grid-template-columns:12px minmax(0,1fr) auto 42px;gap:8px;align-items:center;padding:4px 6px;border-radius:7px;cursor:pointer;font-size:13.5px}
.lg:hover{background:var(--raised)}
.lg i{width:12px;height:12px;border-radius:3px;display:block}
.lg em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg b{font-variant-numeric:tabular-nums} .lg u{text-decoration:none;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:1250px){.charts2{grid-template-columns:minmax(0,1fr)!important}}
/* elements table: wide name, then the element id, then the rest */
#tbl td.nm{min-width:340px;width:36%;word-break:break-word}
#tbl td.eid,#tbl th:nth-child(2){white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted)}
#tbl th:nth-child(2){color:var(--muted)}
.lg{grid-template-columns:12px minmax(0,1fr) 48px 42px}
.lg b{text-align:right}

/* row 2: breakdown (donut with its list below) | elements table; the version comparison goes under both */
.charts2{grid-template-columns:minmax(340px,1fr) minmax(0,2.3fr)!important;align-items:stretch!important}
.grpbody{flex-direction:column;align-items:stretch;gap:10px;min-height:0}
.grpdonut{flex:none;width:100%}
.grpdonut svg{max-width:300px}
.vlegend{max-height:none;overflow:visible;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));column-gap:14px}
.tblcard{display:flex;flex-direction:column;min-width:0;height:0;min-height:max(100%,460px)}   /* its height follows the breakdown card; the table scrolls inside */
.tblcard .tablewrap{flex:1 1 0;min-height:200px;max-height:none}
.tblcard.folded{height:auto;min-height:0}
.cmpwide{margin-bottom:10px}
@media (max-width:1250px){.charts2{grid-template-columns:minmax(0,1fr)!important}.tblcard{height:auto;min-height:0}.tblcard .tablewrap{max-height:460px;flex:none}}
.chart[data-fold=grp] h3 small{display:none}

/* no spare space under the last card: the filters panel, the cards and the footer line up at the bottom */
main.wrap{padding-bottom:6px}
.main-footer{margin-top:8px}
.charts2{margin-bottom:0}
.cmpwide{margin-bottom:0;margin-top:10px}
.dash{align-items:start}
.slicers{top:calc(var(--hdr,84px) + 62px);max-height:calc(100vh - var(--hdr,84px) - 76px)}   /* sticks just under the frozen bar */

/* the cards column is at least as tall as the filters panel: the breakdown and elements cards grow to fill it, so everything ends on one line */
.dash{align-items:stretch!important}
.dash>.slicers{align-self:start}
.dash>div:last-child{display:flex;flex-direction:column;min-width:0}
.dash>div:last-child>.charts3,.dash>div:last-child>.cmpwide{flex:none}
.dash>div:last-child>.charts2{flex:1 1 auto}
.chart[data-fold=grp]{display:flex;flex-direction:column}
.chart[data-fold=grp] .grpbody{flex:1;justify-content:space-around}
@media (max-width:980px){.dash>div:last-child>.charts2{flex:none}}

/* viewer bar: View (label left, box right) | Open in dashboard ........ Version (label left, box right) */
.vbar{align-items:center}
.vbar label.inl{flex-direction:row;align-items:center;gap:10px;font-size:14px;color:var(--ink)}
.vbar label.inl select{width:auto;min-width:0}
.vbar .vright{margin-left:auto}

/* project browser: one card; the folder tree sits on the darker left side, the file list is a lighter panel with a curved edge on its left */
.browser-body{gap:0!important;background:var(--field);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.browser-body .browser-tree.tree{background:transparent;border:0;border-radius:0;padding:8px 6px}
.browser-body .browser-files{background:var(--sheet);border:0;border-left:1px solid var(--line);border-radius:22px 0 0 22px;padding:14px 16px}
@media (max-width:820px){.browser-body .browser-files{border-radius:22px 22px 0 0;border-left:0;border-top:1px solid var(--line)}}

/* project browser, like the Genera desktop app: a dark folder panel with a gold outline and curved top and bottom on its right edge; the file list keeps the lighter panel */
.browser-body{background:var(--sheet)!important;border:1px solid var(--line);border-radius:16px;overflow:hidden;gap:0!important}
.browser-body .browser-tree.tree{
  --ink:#E4EAF1;--muted:#9AA7B6;--raised:#1B2230;--line:#2F3542;--gold:#E2B54A;--gold-soft:#3A3120;--field:#0A0E16;   /* the panel is dark in both themes */
  background:#080B13;color:var(--ink);padding:14px 10px 14px 8px;
  border:1.5px solid #D4AF37;border-left:0;border-radius:0 38px 38px 0;
  box-shadow:inset -1px 0 0 rgba(212,175,55,.25);
}
.browser-body .browser-files{background:var(--sheet);border:0!important;border-radius:0!important;padding:14px 16px 14px 20px}
@media (max-width:820px){.browser-body .browser-tree.tree{border-left:1.5px solid #D4AF37;border-bottom-width:1.5px;border-radius:0 0 28px 28px}}
/* the gold edge only on the right side of the dark panel, tapering away round the curved top and bottom (as in the Genera desktop app) */
.browser-body .browser-tree.tree{border:0!important;border-right:2px solid #D4AF37!important;border-radius:0 44px 44px 0!important;box-shadow:none!important}
@media (max-width:820px){.browser-body .browser-tree.tree{border-right:0!important;border-bottom:2px solid #D4AF37!important;border-radius:0 0 32px 32px!important}}
/* the file list side uses the same dark colour as the folder panel */
.browser-body{--sheet:#080B13;--raised:#151B27;--line:#262E3D;--ink:#E4EAF1;--muted:#9AA7B6;--gold:#E2B54A;--gold-soft:#3A3120;--field:#0A0E16;--grid:#1A2130;background:#080B13!important;color:var(--ink)}
.browser-body .browser-files{background:#080B13!important}
.browser-body th{background:#0D121C}

/* project browser table: the name takes all the width the other columns leave; those columns are only as wide as their content */
.browser-table table{table-layout:auto;width:100%}
.browser-table th:not(:first-child),.browser-table td:not(:first-child){width:1%;white-space:nowrap;padding-left:22px}
.browser-table td:first-child,.browser-table th:first-child{width:auto;white-space:normal;overflow-wrap:anywhere}   /* wraps to a second line only when it is truly too long */
.browser-table td:first-child .tree-icon{margin-right:8px}

/* file preview popup: centered, small margin round it; our PDF viewer, or the Autodesk viewer */
.pv-bg{position:fixed;inset:0;z-index:2000;background:rgba(3,6,12,.72);padding:16px;display:grid}
.pv{display:flex;flex-direction:column;min-height:0;background:#080B13;color:#E4EAF1;border:1px solid #2f3542;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.55);
  --ink:#E4EAF1;--muted:#9AA7B6;--raised:#151B27;--line:#262E3D;--field:#0A0E16;--gold:#E2B54A}
.pv-head{display:flex;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid #262E3D;flex-wrap:wrap}
.pv-title{font:600 16px var(--f-body);margin-right:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-mode{margin:0}
.pv-body{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}
.pv-msg{margin:auto;color:#9AA7B6;text-align:center;padding:24px;max-width:60ch}
.pv-adsk{position:absolute;inset:0}
.pv-img{flex:1;overflow:auto;display:grid;place-items:center;padding:16px}.pv-img img{max-width:100%;max-height:100%;object-fit:contain}
.pdfv{display:flex;flex-direction:column;flex:1;min-height:0}
.pdfv-bar{display:flex;gap:8px;align-items:center;padding:8px 14px;border-bottom:1px solid #262E3D;background:#0D121C;flex-wrap:wrap}
.pdfv-pg{width:64px;padding:4px 6px;text-align:center}
.pdfv-zoom{min-width:48px;text-align:center;color:#9AA7B6;font-variant-numeric:tabular-nums}
.pdfv-sep{flex:1}
.pdfv-pages{flex:1;min-height:0;overflow:auto;background:#1a1f2b;padding:18px 0;display:flex;flex-direction:column;align-items:center;gap:14px;outline:none}
.pdfv-page{background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.5);flex:none}
.pdfv-page canvas{display:block}
a.fname{color:inherit;text-decoration:none;border-bottom:1px dotted var(--muted)} a.fname:hover{color:var(--gold);border-bottom-color:var(--gold)}

.pv-dl{display:inline-flex;align-items:center;gap:8px}
.pv-dl .ic{width:16px;height:16px}

.pv-nav{display:flex;align-items:center;gap:8px}
.pv-count{color:#9AA7B6;font-size:13px;min-width:78px;text-align:center;font-variant-numeric:tabular-nums}

/* PDF viewer: drag to pan; a page wider than the window scrolls from its left edge instead of being cut off */
.pdfv-pages{align-items:flex-start!important;cursor:grab;user-select:none}
.pdfv-pages.panning{cursor:grabbing}
.pdfv-page{margin-left:auto;margin-right:auto}

.pdfv-page canvas{width:100%;height:100%}
.pdfv-hint{color:#6f7b8c;font-size:12.5px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:1100px){.pdfv-hint{display:none}}

/* PDF markup layers: text (for select and highlight) and drawing, on top of each page */
.pdfv-page{position:relative}
.pdfv-page .pdfv-ann{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pdfv-text{position:absolute;left:0;top:0;overflow:hidden;line-height:1;pointer-events:none;transform-origin:0 0;opacity:1}
.pdfv-text span,.pdfv-text br{color:transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0 0}
.pdfv-text ::selection{background:rgba(70,130,255,.4)}
.pdfv-pages[data-tool=text] .pdfv-text,.pdfv-pages[data-tool=hl] .pdfv-text{pointer-events:auto;user-select:text}
.pdfv-pages[data-tool=text],.pdfv-pages[data-tool=hl]{cursor:text;user-select:text}
.pdfv-pages[data-tool=rect],.pdfv-pages[data-tool=ellipse],.pdfv-pages[data-tool=poly],.pdfv-pages[data-tool=cloud],.pdfv-pages[data-tool=free]{cursor:crosshair}
/* the floating tool panel: folded to one round button; opened, a vertical column of tools; tooltips above */
.pdfv{position:relative}
.pdfv-tools{position:absolute;left:14px;top:66px;z-index:8;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.pt-list{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px;background:#0D121C;border:1px solid #2c3546;border-radius:26px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.pt-list[hidden]{display:none}
.pt{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid #2c3546;background:#151B27;color:#E4EAF1;cursor:pointer;display:grid;place-items:center;padding:0}
.pt:hover{border-color:#E2B54A}
.pt.on{background:#E2B54A;border-color:#E2B54A;color:#1a1406}
.pt-main{background:#E2B54A;border-color:#E2B54A;color:#1a1406;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.pt .ic{width:20px;height:20px}
.pt-gap{height:1px;width:26px;background:#2c3546;margin:2px 0}
.sw{display:block;width:22px;height:22px;border-radius:50%;border:2px solid #E4EAF1}
.pt-color{position:relative}
.pt-pal{position:absolute;left:calc(100% + 12px);top:0;display:flex;flex-direction:column;gap:6px;padding:8px;background:#0D121C;border:1px solid #2c3546;border-radius:22px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.pt-pal[hidden]{display:none}
.pt-c{width:26px;height:26px;border-radius:50%;border:2px solid #E4EAF1;cursor:pointer;padding:0;display:block}
.pt-custom{background:conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);position:relative;overflow:hidden}
.pt-custom input{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
.pt[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:0;white-space:nowrap;background:#E4EAF1;color:#0b1018;padding:5px 10px;border-radius:7px;font:500 12.5px var(--f-body);z-index:20;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.pt[data-tip]:hover::before{content:"";position:absolute;bottom:calc(100% + 4px);left:14px;border:6px solid transparent;border-top-color:#E4EAF1;border-bottom:0;z-index:20;pointer-events:none}

/* edit tools: open by default, in the middle of the left edge; folded, one button at the top */
.pv{position:relative}
.pdfv-tools{top:66px!important}
.pdfv-tools.open{top:calc(50% + 24px)!important;transform:translateY(-50%)}
@media (max-height:820px){.pt{width:34px;height:34px}.pt .ic{width:18px;height:18px}.pt-list{gap:4px;padding:6px 5px}.pt-gap{margin:0}}
.pt-save{color:#E2B54A}
.pt-dot{position:absolute;top:3px;right:3px;width:9px;height:9px;border-radius:50%;background:#E5484D;border:1.5px solid #151B27}
.pt-dot[hidden]{display:none}
/* text selection: the block behind the words that keeps the selection from jumping to other text */
.pdfv-text .endOfContent{display:block;position:absolute;left:0;right:0;top:100%;bottom:0;z-index:-1;cursor:default;user-select:none}
.pdfv-text .endOfContent.active{top:0}
.pdfv-page canvas,.pdfv-page .pdfv-ann{user-select:none;-webkit-user-select:none}
.pdfv-note{position:absolute;z-index:6;min-width:120px;max-width:70%;resize:none;overflow:hidden;background:rgba(255,255,255,.9);border:1px dashed;border-radius:3px;padding:1px 4px;font-family:Helvetica,Arial,sans-serif;line-height:1.2;outline:none}
/* save dialog and progress */
.pv-dlg-bg{position:absolute;inset:0;z-index:30;background:rgba(3,6,12,.6);display:grid;place-items:center;padding:20px}
.pv-dlg{background:#0D121C;border:1px solid #2c3546;border-radius:14px;padding:20px 22px;max-width:480px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.pv-dlg h3{font-size:20px;margin-bottom:8px;color:#E4EAF1} .pv-dlg p{color:#b4bfcd;margin:0 0 16px;line-height:1.5}
.pv-dlg-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.pv-busy{position:absolute;inset:0;z-index:31;background:rgba(3,6,12,.7);display:grid;place-items:center;color:#E4EAF1;font-size:18px}

/* messages: in the middle of the screen, above everything (green = done, red = a problem, dark = a note) */
#toast{position:fixed;left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);z-index:9999;display:flex;align-items:center;gap:14px;max-width:min(560px,90vw);padding:18px 24px;border-radius:14px;font:600 17px/1.4 var(--f-body);cursor:pointer;box-shadow:0 18px 60px rgba(0,0,0,.55);border:1px solid transparent;color:#fff;animation:toast-in .16s ease-out}
#toast .ic{width:28px;height:28px;flex:none;stroke-width:2.4}
#toast.toast-ok{background:#1E7A46;border-color:#3FB874}
#toast.toast-warn{background:#B3261E;border-color:#F0766E}
#toast.toast-info{background:#1C2029;border-color:#3a4252;color:#E4EAF1}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}

/* viewer: the bar over the model when only filtered elements are shown */
.vfilter{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:calc(100% - 24px);padding:8px 14px;background:rgba(13,18,28,.94);color:#E4EAF1;border:1px solid #E2B54A;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.45);font-size:14px;--ink:#E4EAF1;--muted:#9AA7B6;--raised:#151B27;--line:#2c3546;--gold:#E2B54A}
.vfilter b{color:#E2B54A}
.vfilter .vf-desc{color:#b4bfcd;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vfilter .chk{color:#E4EAF1}

/* the filter card sits at the left of the model, as a vertical stack */
.vfilter{left:12px!important;top:12px!important;transform:none!important;flex-direction:column;align-items:stretch;gap:10px;width:250px;max-width:calc(100% - 24px)}
.vfilter .vf-desc{max-width:none;white-space:normal;overflow:visible;line-height:1.35}
.vfilter .btn{width:100%;justify-content:center;text-align:center}
.vfilter .chk{margin:0}

/* questions in the middle of the screen (replace the browser's own pop-ups) */
.ask-bg{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px;background:rgba(3,6,12,.6)}
.ask{width:min(460px,100%);background:#0D121C;color:#E4EAF1;border:1px solid #2c3546;border-radius:14px;padding:22px 24px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.ask p{margin:0 0 14px;font-size:16px;line-height:1.5;color:#E4EAF1}
.ask input{width:100%;margin-bottom:16px}
.ask-btns{display:flex;gap:10px;justify-content:flex-end}

/* the sheet list of a schedule or a run: a big card in the middle of the screen */
.modal.sheets-modal{width:min(1100px,96vw);height:min(760px,90vh)}
.sheets-modal .body{flex:1;min-height:0}
.sheets-modal footer{padding:12px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}
.sheets-sum{margin:0 0 12px;font-size:16px}
.bad-t{color:#F0766E}

/* step 2: selection sets and the sheet search */
.setbox{margin-top:14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--raised)}
.setrow{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.setpick{flex:1 1 320px;max-width:520px}
.setbtns{display:flex;gap:8px}
.setbox .filterrow{margin-top:12px}
.setbox .filterrow label{min-width:200px}
.setbox .filterrow .grow{flex:1 1 280px}
.setbox>small{display:block;margin-top:8px}

/* step 4: delivery choices with the destination folder beside them; the schedule form on few, aligned rows */
.delrow{display:flex;gap:16px 28px;align-items:center;flex-wrap:wrap}
.targetbox{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:1 1 360px;min-width:0}
.targetbox .picked{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.schedform{margin-top:14px;background:var(--raised);display:grid;gap:14px}
.schedgrid{display:grid;grid-template-columns:minmax(220px,300px) auto minmax(0,1fr);gap:14px 24px;align-items:end}
.s-cad .seg{margin-top:4px}
.s-when{display:flex;gap:14px;align-items:end;flex-wrap:wrap}
.s-when label{min-width:190px}
.s-when label[hidden]{display:none}
.schedfoot{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.schedfoot small{flex:1 1 280px}
@media (max-width:1100px){.schedgrid{grid-template-columns:1fr}}
.targetbox[hidden],.schedform[hidden]{display:none}
.targetbox .picked{display:inline-block;max-width:100%}
.schedgrid input,.schedgrid select{height:42px;box-sizing:border-box}
.s-cad .seg label{height:42px;box-sizing:border-box;padding-block:0;display:flex;align-items:center}
.delrow .seg label{height:42px;box-sizing:border-box;padding-block:0;display:flex;align-items:center}
.targetbox .btn{height:42px}

/* step 2: the title with the formats and "which sheets" on its right; one row for the selection set, its buttons and the search */
.s2head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 28px;flex-wrap:wrap}
.s2head h2{margin:0}
.s2opts{display:flex;gap:12px 28px;flex-wrap:wrap;align-items:flex-end}
.s2opts .seg{margin-top:4px}
.s2opts .seg label{height:42px;box-sizing:border-box;padding-block:0;display:flex;align-items:center}
.setbox{margin-top:12px}
.setbox .setrow{align-items:flex-end;flex-wrap:wrap}
.setbox .setpick{flex:1 1 260px;max-width:340px}
.setbox .setparam{flex:0 1 190px;min-width:150px}
.setbox .setrow .grow{flex:1 1 240px;min-width:200px}
.setbox select,.setbox input,.setbox .setbtns .btn{height:42px;box-sizing:border-box}
.setinfo{display:flex;justify-content:space-between;gap:12px;margin-top:8px}
.setbox>small{display:none}

/* step 2: title, status and progress bar on the left, ending where the Formats / Which sheets buttons end */
.s2head{align-items:stretch;margin-bottom:12px}
.s2left{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.s2left h2{margin:0}
.s2left #sheetStatus{margin:0}
.s2left .bar{margin:0}

/* selection set card: tighter inside */
.setbox{padding:8px 14px 6px;margin-top:8px}
.setbox .setrow{gap:8px 12px}
.setinfo{margin-top:4px}
.setbox label{gap:2px}

/* the step tabs are narrower, and "Export status" sits at the end */
.steps li{flex:1 1 120px}
.steps li.steps-status{flex:0 0 auto}
.steps button{padding:9px 12px}
.steps-status button{white-space:nowrap}
.steps-status .ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.steps-status button.active{border-color:var(--gold);color:var(--ink);background:var(--gold-soft)}
#statusTbl td:first-child{white-space:nowrap}

/* a loader in the middle of the screen */
.aps-loader{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;background:rgba(3,6,12,.55)}
.aps-loader-box{display:flex;align-items:center;gap:16px;padding:20px 28px;border-radius:14px;background:#0D121C;border:1px solid #2c3546;color:#E4EAF1;font:600 17px/1.3 var(--f-body);box-shadow:0 20px 60px rgba(0,0,0,.6)}
.aps-spin{width:26px;height:26px;border-radius:50%;border:3px solid #2c3546;border-top-color:#E2B54A;animation:aps-rot .8s linear infinite}
@keyframes aps-rot{to{transform:rotate(360deg)}}

#statusTbl td.st-right{text-align:right;white-space:nowrap;width:1%}

/* drawing register */
.reghead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 24px;flex-wrap:wrap;margin-bottom:14px}
.regactions{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.regactions .btn,.regver select{height:42px;box-sizing:border-box}
.regver{min-width:200px}
.regfilter{display:flex;gap:10px 14px;align-items:flex-end;flex-wrap:wrap;margin:6px 0 10px}
.regfilter label{min-width:170px}
.regfilter label.grow{flex:1 1 240px}
.regfilter select,.regfilter input:not([type]){height:42px;box-sizing:border-box}
.regfilter .chk{min-width:0;flex-direction:row;align-items:center;gap:8px;height:42px;display:flex}
.regfilter small{margin-left:auto;align-self:center}
.colmenu{position:relative}
.colmenu summary{list-style:none;cursor:pointer;height:42px;display:flex;align-items:center;box-sizing:border-box}
.colmenu summary::-webkit-details-marker{display:none}
.colmenu #colList{position:absolute;z-index:20;right:0;top:46px;min-width:260px;max-height:360px;overflow:auto;padding:10px 12px;background:var(--sheet);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.5);display:grid;gap:4px}
.colmenu #colList label{flex-direction:row;align-items:center;gap:8px;min-width:0;padding:3px 4px}
.regtable{max-height:min(640px,calc(100vh - 330px));min-height:240px;margin-top:8px}
#regTbl th.sortable{cursor:pointer;white-space:nowrap}
#regTbl th.sortable:hover{color:var(--gold)}
#regTbl .c-pick{width:34px}
#regTbl tr.chg td{background:rgba(226,181,74,.07)}
#cmpNote{margin:6px 0 0}

/* issues, RFIs and clash summary */
.kpi.kpi-bad{border-color:#B3261E}
.kpi.kpi-bad b{color:#F0766E}
.bad-t{color:#F0766E}
.ok-t{color:#3FB874}
#irTbl tr.late td{background:rgba(179,38,30,.08)}
#irTbl .t-title{max-width:420px}
#ckTbl tr.old td{color:var(--muted)}
.rawj{display:block;max-width:520px;white-space:pre-wrap;word-break:break-all;font-size:11.5px;color:var(--muted)}

/* auto-publish */
.apform{display:grid;gap:14px;margin-top:6px}
.ap-model .ap-modelrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:4px}
.ap-model b{font-size:17px}
.ap-opts{border:1px solid var(--line);border-radius:12px;padding:12px 16px 14px;display:grid;gap:12px;background:var(--raised)}
.ap-opts legend{padding:0 8px;color:var(--muted);font-size:13px}
.ap-schedlist{display:grid;gap:6px;margin-top:6px}
.ap-schedlist label.chk{display:flex;align-items:center;gap:8px;flex-direction:row}
.ap-row{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap}
.ap-row label{min-width:220px}
.ap-row label.chk{min-width:0;flex-direction:row;align-items:center;gap:8px;height:42px;display:flex}
.ap-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:1100px){.ap-grid{grid-template-columns:1fr}}

/* nine sections no longer fit beside the logo with their names: below 1750px only the open section keeps its name (the others keep their icon and a tooltip) */
@media (max-width:1750px){.hdr-tabs a:not([aria-current="page"]) span{display:none}.hdr-tabs a:not([aria-current="page"]){padding-inline:11px}}

/* ---- run rules, history filters, banners, notifications */
.rules{border:1px solid var(--line);border-radius:10px;padding:10px 14px 12px;margin:4px 0 12px}
.rules legend{padding:0 6px;font-size:12.5px;color:var(--muted)}
.rulegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 18px;align-items:end}
.rules input,.rules select,.rulegrid input,.rulegrid select{height:40px;box-sizing:border-box}
label.inline{flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-size:14px}
label.inline input{height:auto}
#fStampBox{margin-top:10px;display:grid;gap:8px;max-width:520px}
.filters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end;margin:0 0 12px}
.filters label{min-width:130px}
.filters input,.filters select{height:38px}
.banner{border:1px solid var(--warn);background:var(--gold-soft);border-radius:10px;padding:10px 14px;margin:0 0 10px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.banner.bad{border-color:var(--bad)}
.banner b{color:var(--ink)}
.notifybox summary{cursor:pointer}
.act-row{display:flex;gap:6px;flex-wrap:wrap}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:middle}

/* ---- notification state and larger checkboxes */
.state-pill{display:inline-block;margin-left:8px;padding:2px 12px;border-radius:99px;font-size:13px;font-weight:700;letter-spacing:.03em;border:1px solid currentColor}
.state-pill.on{color:#fff;background:var(--ok);border-color:var(--ok)}
.state-pill.off{color:#fff;background:var(--bad);border-color:var(--bad)}
:root:not([data-theme="light"]) .state-pill.on,:root:not([data-theme="light"]) .state-pill.off{color:#10151c}
.rulegrid input[type=checkbox],label.inline input[type=checkbox]{width:21px;height:21px;min-width:21px;flex:none;accent-color:var(--gold);cursor:pointer}
label.inline{gap:10px;font-size:15px;cursor:pointer}
#nEmailPick a{color:var(--gold)}
#statusTbl input[type=checkbox]{width:21px;height:21px;accent-color:var(--gold);cursor:pointer}

/* ---- notification panel: one tidy column, everything starts at the top */
.notifybody{display:grid;gap:14px;margin-top:12px;max-width:760px;align-items:start}
.nfields{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px 18px;align-items:start}
.nfields input{height:40px;box-sizing:border-box}
.nwhat{border:1px solid var(--line);border-radius:10px;margin:0;padding:10px 14px 12px;display:flex;flex-wrap:wrap;gap:8px 26px}
.nwhat legend{padding:0 6px;font-size:12.5px;color:var(--muted)}
.notifybody .notice{margin:0}
.notifybody p{margin:0}
.notifybox>summary{cursor:pointer;display:flex;align-items:center;gap:4px}

/* ---- full-width layouts: notification panel and schedule cards spread across the card */
.notifybody{max-width:none}
.nswitch{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.nswitch .state-pill{margin-left:0}
.ngrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 24px;align-items:start}
.ngrid input{height:40px;box-sizing:border-box}
.ngrid .nwhat{height:100%}
@media (max-width:1000px){.ngrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ngrid{grid-template-columns:minmax(0,1fr)}}
.job{grid-template-columns:minmax(200px,1.1fr) minmax(0,1.5fr) minmax(0,1.5fr) auto;gap:10px 28px;align-items:start}
.job .jc{display:grid;gap:4px;min-width:0;align-content:start}
.job .jl{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.job .jc4{justify-content:flex-end;align-content:start;max-width:260px}
.job .top{justify-content:flex-start;gap:12px}
@media (max-width:1250px){.job{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.job .jc4{max-width:none;justify-content:flex-start}}
@media (max-width:700px){.job{grid-template-columns:minmax(0,1fr)}}

/* ---- schedule cards: three columns of facts, the buttons in one horizontal row underneath */
.job{grid-template-columns:minmax(200px,1.1fr) minmax(0,1.3fr) minmax(0,1.3fr);gap:10px 32px}
.job .jc4{grid-column:1/-1;display:flex;flex-wrap:nowrap;gap:8px;justify-content:flex-start;max-width:none;padding-top:4px;border-top:1px solid var(--line);margin-top:4px;padding-top:10px;overflow-x:auto}
.job .jc4 .btn{flex:none}
@media (max-width:1250px){.job{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:700px){.job{grid-template-columns:minmax(0,1fr)}}
/* subfolder name buttons */
.tokrow{display:grid;gap:4px}
.tok{border:1px solid var(--gold);background:var(--gold-soft);color:var(--ink);border-radius:99px;padding:5px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.tok:hover:not(:disabled){background:var(--gold);color:var(--on-gold)}
.tok:disabled{opacity:.45;cursor:not-allowed}

/* ---- schedule cards, compact: facts on the left, the buttons in one row at the right (no separate row underneath on wide screens) */
.job{grid-template-columns:minmax(170px,1fr) minmax(0,1.7fr) minmax(0,1fr) auto;gap:6px 28px;padding:10px 14px;align-items:center}
.job .jc{gap:2px}
.job .jc2 .meta{display:flex;flex-wrap:wrap;gap:2px 22px}
.job .jc4{grid-column:auto;border-top:0;margin:0;padding:0;overflow:visible;justify-self:end;flex-wrap:nowrap}
@media (max-width:1450px){
  .job{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr)}
  .job .jc4{grid-column:1/-1;justify-self:start;border-top:1px solid var(--line);margin-top:4px;padding-top:10px;overflow-x:auto}
}
@media (max-width:900px){.job{grid-template-columns:minmax(0,1fr)}}
.ask p{white-space:pre-line}

/* ---- notifications header: the switch sits on the title line, only while the panel is open */
.notifybox>summary{flex-wrap:wrap;gap:6px 14px}
.notifybox>summary .state-pill{margin-left:0}
.notifybox:not([open])>summary .nsw{display:none}
.notifybox>summary .nsw{margin-left:8px}
.nmail{display:grid;gap:8px;align-content:start}

/* ---- notifications title line: no accidental text selection, info tooltip, open / fold button */
.notifybox>summary{user-select:none;-webkit-user-select:none}
.notifybox>summary input,.notifybox>summary .nsw{user-select:auto}
.notifybox .info{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:8px;border-radius:50%;border:1px solid var(--muted);color:var(--muted);font:700 12px/1 var(--f-body);cursor:help}
.notifybox .info:hover,.notifybox .info:focus{color:var(--gold);border-color:var(--gold);outline:0}
.notifybox .ntoggle{margin-left:auto}

/* ---- tooltip with steps (Slack / Teams link) */
.tip{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;margin-left:8px;border-radius:50%;border:1px solid var(--muted);color:var(--muted);font:700 12px/1 var(--f-body);cursor:help}
.tip:hover,.tip:focus{color:var(--gold);border-color:var(--gold);outline:0}
.tip::after{content:attr(data-tip);position:absolute;z-index:30;left:50%;top:calc(100% + 8px);transform:translateX(-30%);width:min(420px,86vw);padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--sheet);color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.35);font:400 13px/1.45 var(--f-body);text-align:left;white-space:pre-line;text-transform:none;letter-spacing:0;display:none}
.tip:hover::after,.tip:focus::after{display:block}
.nhook{display:grid;gap:4px;align-content:start}

/* ---- tooltips that appear when the text or the box itself is hovered (no icon) */
.tipbox{position:relative}
.tipbox-block{display:block}
.tipbox[data-tip]:hover,.tipbox[data-tip]:focus,.tipbox[data-tip]:focus-within{outline:0}
.tipbox::after{content:attr(data-tip);position:absolute;z-index:40;left:0;top:calc(100% + 8px);width:min(440px,86vw);padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--sheet);color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.35);font:400 13px/1.45 var(--f-body);text-align:left;white-space:pre-line;text-transform:none;letter-spacing:0;font-weight:400;display:none;pointer-events:none}
.tipbox:hover::after,.tipbox:focus::after,.tipbox:focus-within::after{display:block}
/* notify-about group: its own full-width row, one line */
.ngrid .nwhat{grid-column:1/-1;height:auto;display:flex;flex-wrap:wrap;gap:8px 34px;align-items:center}
@media (min-width:700px){.ngrid .nwhat{flex-wrap:nowrap}}
.ngrid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.ngrid{grid-template-columns:minmax(0,1fr)}}

/* ---- notification fields: Email and Slack/Teams in reduced width, "Notify about" at the right, in one line */
.ngrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:start}
.ngrid .nwhat{grid-column:auto;align-self:start;flex-wrap:nowrap;gap:8px 26px;height:auto}
@media (max-width:1250px){.ngrid{grid-template-columns:repeat(2,minmax(0,1fr))}.ngrid .nwhat{grid-column:1/-1}}
@media (max-width:700px){.ngrid{grid-template-columns:minmax(0,1fr)}.ngrid .nwhat{flex-wrap:wrap}}

/* the Export status tab inside the wizard's step bar is now a link to its own page */
.steps a.steplink{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--raised);color:var(--muted);font:600 14px var(--f-body);text-decoration:none;white-space:nowrap}
.steps a.steplink:hover{border-color:var(--gold);color:var(--ink)}
.steps a.steplink .ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.statuspage{display:block}

/* the five step buttons (four steps + Export status): one width, one height */
.steps{align-items:stretch}
.steps li,.steps li.steps-status{flex:1 1 0;min-width:140px}
.steps li>button,.steps li>a.steplink{width:100%;height:100%;min-height:62px;box-sizing:border-box;justify-content:flex-start}

/* ---- sheet table: column menu and header filters */
#sheetColMenu{position:relative}
#sheetColMenu summary{list-style:none;cursor:pointer}
#sheetColMenu summary::-webkit-details-marker{display:none}
#sheetColList{position:absolute;z-index:25;right:0;top:calc(100% + 6px);width:300px;max-height:380px;overflow:auto;padding:10px 12px;background:var(--sheet);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.35);display:grid;gap:8px}
#sheetColList .collist{display:grid;gap:2px}
#sheetColList label{flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-size:14px;padding:3px 4px;cursor:pointer}
#sheetColList input[type=search],.hfpop .hfq{height:36px;box-sizing:border-box;width:100%}
.th-in{display:inline-flex;align-items:center;gap:6px}
.hf{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--line);background:var(--raised);color:var(--muted);border-radius:7px;padding:2px 5px;cursor:pointer;line-height:1}
.hf .ic{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linejoin:round}
.hf:hover{color:var(--ink);border-color:var(--gold)}
.hf.on{color:var(--on-gold);background:var(--gold);border-color:var(--gold)}
.hf b{font-size:11px}
.hfpop{position:fixed;z-index:60;width:310px;max-width:92vw;padding:10px 12px;background:var(--sheet);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.4);display:grid;gap:8px}
.hfpop .hftitle{font-weight:700;font-size:14px}
.hfpop .hflist{max-height:260px;overflow:auto;display:grid;gap:1px;border:1px solid var(--line);border-radius:8px;padding:4px;background:var(--field)}
.hfpop .hflist label{flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-size:14px;padding:3px 4px;cursor:pointer}
.hfpop .hflist label span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hfpop .hfbtns{display:flex;gap:6px;flex-wrap:wrap}

/* Add, Save and Delete (selection sets): one height, whatever their colour */
.setbox .setbtns{align-items:stretch}
.setbox .setbtns button.btn{height:42px;min-height:42px;padding:0 18px;line-height:1;box-sizing:border-box;border-width:1px;display:inline-flex;align-items:center;justify-content:center}

/* ---- Usage and charges page */
.ucards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0 0 6px}
.ucard{border:1px solid var(--line);border-radius:12px;background:var(--raised);padding:14px 16px;display:grid;gap:2px}
.ucard b{font:700 26px var(--f-display)}
.uh{font-size:16px;margin:22px 0 8px}
.num{text-align:right;white-space:nowrap}
#uTable tfoot th{border-top:1px solid var(--line)}
.paycards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.paycard{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--raised);display:grid;gap:6px;align-content:start}
.paycard.on{border-color:var(--gold);background:var(--gold-soft)}
.paycard p{margin:0}