/* The shell's styles, the shared block of demo/mockups/*.html (the layout
   of record, designs/0003): the banner, the top bar, the page frame and
   the type. A screen's own rules join it as the screen is built. */
:root{--bg:#f6f7f9;--panel:#fff;--ink:#1f2933;--muted:#5f6b7a;--line:#d9dee5;--accent:#2b5797;--red:#b23a3a;--amber:#b7791f;--green:#2f7d4f;--blue:#2b5797;--teal:#1f7a8c;--purple:#6b4c9a;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:13px/1.45 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.banner{position:fixed;top:0;left:0;right:0;height:34px;background:#fff3cd;color:#5c4400;border-bottom:1px solid #e3c874;display:flex;align-items:center;justify-content:center;font-weight:600;letter-spacing:.02em;z-index:50}
.topbar{position:fixed;top:34px;left:0;right:0;height:44px;background:#1f2933;color:#e7ebf0;display:flex;align-items:center;padding:0 24px;gap:22px;z-index:49}
.topbar.nobanner{top:0}
.page.nobanner{margin-top:62px}
.topbar .brand{font-weight:700;letter-spacing:.04em;color:#fff}
.topbar a{color:#c7d0db;text-decoration:none;padding:4px 6px;border-radius:3px;white-space:nowrap}
.topbar a.on{background:#334152;color:#fff}
.topbar .who{margin-left:auto;color:#aab4c0;font-size:12px;text-align:right;line-height:1.3}
.page{width:1280px;margin:96px auto 48px;padding:0 24px}
h1{font-size:20px;margin:0 0 4px}
h2{font-size:15px;margin:22px 0 8px;color:#2a3540}
h3{font-size:13px;margin:12px 0 6px;color:#2a3540}
.sub{color:var(--muted);margin:0 0 16px}
.crumbs{color:var(--muted);font-size:12px;margin-bottom:6px}
.crumbs b{color:var(--ink);font-weight:600}
.row{display:flex;gap:16px;align-items:flex-start}
.col{flex:1;min-width:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:12px 14px;margin-bottom:16px}
.panel h2:first-child,.panel h3:first-child{margin-top:0}
table{border-collapse:collapse;width:100%;font-size:12.5px}
th,td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-weight:600;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;background:#fafbfc}
.note{background:#f0f4fa;border-left:3px solid var(--accent);padding:8px 10px;font-size:12px;margin:8px 0}
.muted{color:var(--muted)}
.small{font-size:11.5px}
a{color:var(--accent)}

/* The Gantt, demo/mockups/02-site-gantt.html's rules. The grid and the
   chart share one scroll position: .gwrap scrolls, the header row and the
   axis stick, and .gchart is the sentinel height the window sits in. */
.mono{font-family:var(--mono);font-size:12px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tag{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);align-items:center;margin-top:8px}
.legend span{display:inline-flex;align-items:center;gap:5px}
.sw{display:inline-block;width:18px;height:9px;border-radius:1px}
label.lbl,.lbl{display:inline-block;color:var(--muted);font-size:11.5px;margin-right:4px}
.hlbar{margin-bottom:8px}
.hlbtn{display:inline-block;padding:5px 12px;border:1px solid #9aa5b1;background:#fff;color:var(--ink);font-weight:600;font-size:12px;line-height:1.45;font-family:inherit;cursor:pointer}
.hlbtn:first-of-type{border-radius:3px 0 0 3px}
.hlbtn:last-of-type{border-radius:0 3px 3px 0;margin-left:-1px}
.hlbtn:nth-of-type(2){margin-left:-1px}
.hlbtn[aria-pressed=true]{background:#1f2933;color:#fff;border-color:#1f2933}
.modenote{font-size:12px;margin:6px 0 0}
.gwrap{display:flex;align-items:flex-start;border:1px solid var(--line);background:#fff;overflow-x:hidden;overflow-y:auto;max-height:800px}
.ggrid{flex:0 0 560px;border-right:1px solid var(--line)}
.ggrid table{table-layout:fixed;width:560px}
.ggrid th{position:sticky;top:0;z-index:2;height:44px;border-bottom:0;padding:0 6px 6px;line-height:14px;white-space:normal;vertical-align:bottom}
.ggrid tr{height:22px}
/* The logic view's columns are UFGS's (0003, amended from #26): no physical % or calendar. */
.ggrid table.logic col:nth-child(5),.ggrid table.logic col:nth-child(9),.ggrid table.logic th:nth-child(5),.ggrid table.logic th:nth-child(9),.ggrid table.logic td:nth-child(5),.ggrid table.logic td:nth-child(9){display:none}
/* The width they free goes to the dates, whole there, and the name. */
.ggrid table.logic col:nth-child(2){width:214px!important}.ggrid table.logic col:nth-child(6),.ggrid table.logic col:nth-child(7){width:86px!important}
.ggrid td{height:22px;padding:0 6px;line-height:22px;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:0}
.ggrid tr.even td{background:#fafbfc}
.ggrid tr.lane td{background:#eef1f5;font-weight:600;color:#2a3540}
.ggrid tr.gspace td{padding:0;height:auto;line-height:0}
.ggrid tr.crit td{color:#b23a3a}
.ggrid tr.crit td.nm,.ggrid tr.risky td.nm{font-weight:700}
.ggrid tr.risky td{color:#b85218}
.gchart{position:relative;flex:1;min-width:0;overflow:clip}
.gchart svg{display:block}
.gchart:focus-visible{outline:2px solid #1f5fbf;outline-offset:-2px}
.gaxis{position:sticky;top:0;z-index:2;background:#fff;height:44px;cursor:grab;touch-action:none;user-select:none}
.gbody{position:absolute;left:0;right:0}
.ggrid tr:not(.lane):not(.gspace){cursor:pointer}
.ggrid tr.selected td{box-shadow:inset 0 1px 0 var(--accent),inset 0 -1px 0 var(--accent)}
.rowsel{all:unset;font:inherit;cursor:pointer}
.rowsel:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.sortbtn{all:unset;font:inherit;cursor:pointer}
.sortbtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.gtools{margin-bottom:10px;align-items:center;flex-wrap:wrap;gap:8px 16px}
.gsave{display:flex;gap:8px;align-items:center}
.gnote{font-weight:600;color:var(--ink)}
.gsaid{font-size:12px;color:var(--muted)}
.gsaid.refused{color:#a02c2c;font-weight:600}
.gselected{margin-top:16px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:10px}
.tabs button{padding:6px 12px;color:var(--muted);border:0;border-bottom:2px solid transparent;background:none;font:inherit;cursor:pointer}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.kv{display:grid;grid-template-columns:150px 1fr;gap:4px 10px;font-size:12.5px;margin:0}
.kv[hidden]{display:none}
.kv dt{color:var(--muted)}
.kv dd{margin:0}

/* The workback screen, demo/mockups/03-workback.html's rules. */
.field{display:inline-block;padding:5px 8px;border:1px solid #b9c2cc;border-radius:3px;background:#fff;min-width:120px;font-size:12.5px}
.warn{background:#fdf1e3;border-left:3px solid var(--amber);padding:8px 10px;font-size:12px;margin:8px 0}
.chart svg{width:100%;height:auto;display:block}
.startby td,.fwd td{white-space:nowrap}
.startby td.nm,.fwd td.nm{white-space:normal}
.chart.half{width:656px}
.pull-early{color:#b23a3a;font-weight:700}
.pull-late{color:#2f7d4f}
.fwd b{font-size:16px}
.fwd b.best{color:#2f7d4f}

/* The gate table, demo/mockups/01-program-dashboard.html's rules. */
tr.group td{background:#eef1f5;font-weight:600;color:#2a3540}
.gates td{white-space:nowrap}
.gates tr.sel td{background:#e3ecf8}
.gates tr.sel .rowsel{font-weight:600}
.selline{margin:6px 0 0}
.selline a{text-decoration:underline}
.gates th{white-space:normal}
.gates td,.gates th{padding:5px 6px}
.pill{display:inline-block;padding:1px 7px;border-radius:9px;font-size:11px;font-weight:600;line-height:16px;white-space:nowrap}
.pill.red{background:#f6dcdc;color:#8a2323}
.pill.amber{background:#f8ebcf;color:#7a4f0a}
.pill.green{background:#d9efe1;color:#1f5c38}
.pill.blue{background:#dce6f5;color:#1f4478}
.pill.teal{background:#d6ecef;color:#135764}
.pill.orange{background:#f8e0d0;color:#7a3610}
.hulett td{white-space:nowrap}
.hulett td,.hulett th{padding:5px 6px}
.delta-late{color:#b23a3a}
.delta-early{color:#2f7d4f}
.chance-low{color:#b23a3a}
.chance-less{color:#9a6417}
.chance-more{color:#2f7d4f}
.btn{display:inline-block;padding:6px 12px;border:1px solid #9aa5b1;border-radius:3px;background:#fff;color:var(--ink);font:inherit;font-weight:600;font-size:12.5px;cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.dwrap{position:relative;display:inline-block}
.dinput{min-width:96px;width:96px;font-family:var(--mono)}
.dnav{all:unset;cursor:pointer;padding:2px 7px;border-radius:3px;color:var(--ink)}
.dnav:focus-visible,.dday:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.dpick{position:absolute;z-index:5;top:34px;left:50px;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:8px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.dhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:12.5px}
.dpick table{border-collapse:collapse;width:auto}
.dpick th,.dpick td{padding:1px;text-align:center;border:0;background:none}
.dday{all:unset;display:block;width:26px;height:24px;line-height:24px;text-align:center;font-size:12px;cursor:pointer;border-radius:3px}
.dday[aria-current]{background:var(--accent);color:#fff}
.dday.off{color:#49555f;background:#e6e9ee}
.dday.out{color:#5a6570}
.dday.off[aria-current]{background:var(--accent);color:#fff}
.hist{font-size:12px;margin:0;padding-left:20px}
.hist li{margin:0 0 6px;padding-left:4px}
.hist .t{font-family:var(--mono);color:var(--muted);margin-right:6px}
.hist .w{font-weight:600;margin-right:4px}
/* The program screen's tiles, 01-program-dashboard.html's. */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.tile{background:#fff;border:1px solid var(--line);border-radius:4px;padding:10px 12px;border-top:3px solid var(--line)}
.tile.red{border-top-color:var(--red)}.tile.amber{border-top-color:var(--amber)}.tile.green{border-top-color:var(--green)}
.tile .v{font-size:22px;font-weight:700;line-height:1.1}
.tile .k{color:var(--muted);font-size:11.5px;margin-top:2px}
.tile .d{font-size:11.5px;color:var(--muted);margin-top:4px}
/* The change-set review (05-change-set-review.html). */
td.wrap{white-space:normal}
.changes th,.changes td{white-space:normal}
.changes td:first-child,.changes td.date{white-space:nowrap}
.btn.danger{border-color:var(--red);color:var(--red)}
.decide .btn + .btn{margin-left:6px}
.final-form{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.final-form .field{min-width:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
table.drivers td.num{white-space:nowrap}
table.drivers th.rho{text-transform:none}
.notbuilt{color:var(--ink)}
.who-set{white-space:nowrap}

/* A party's terms (0003 §7 as #516 amends it): label, then control. */
.terms-form{display:grid;grid-template-columns:190px 1fr;gap:8px 12px;align-items:center}
.terms-form textarea{width:100%;font:inherit;min-width:0}
.terms-form .field.days{min-width:0;width:80px}
.terms-versions td.date{white-space:nowrap}
.terms-versions tr.sel td{background:#eef3fb}
.btn.linkish{padding:2px 8px}
/* The template editor's step graph (08-template-editor.html). */
svg.tgraph{display:block;max-width:100%;height:auto}
svg.tgraph .tlane{font-size:10px;fill:#5f6b7a}
svg.tgraph .tnode{font-size:10px;fill:#1f2933;text-anchor:middle}
svg.tgraph .tkind{font-size:9px;fill:#5f6b7a;text-anchor:end}
tr.shown td{background:#eef4ea;font-weight:600}
td.nowrap{white-space:nowrap}

/* The register table, demo/mockups/06-register.html's rules: it is wider
   than the page, so its headers and text columns wrap. */
.items th,.items td.nm{white-space:normal}
.items td,.items th{padding:5px 6px}
.items .pill{white-space:nowrap}
/* The gate pass (07-gate-pass.html): the signers column is 480 px, the
   evidence (757 px) and signers (475 px) tables wrap their text columns,
   and a file name never breaks. */
.col.side{flex:0 0 480px}
.signers-panel{border-left:4px solid var(--accent)}
.tag.big{width:14px;height:14px}
.evidence th,.evidence td.nm,.signers th,.signers td.nm{white-space:normal}
.evidence .mono{white-space:nowrap}
.evidence td,.evidence th{padding:5px 6px}
.evidence-note{margin:8px 0 0}
.signers tr.you td{background:#eef3fb}
.ok{color:var(--green);font-weight:700}
.declarations label{display:block}
.declarations input{margin:0 5px 0 0;vertical-align:-2px}
.signers td.mono{white-space:nowrap}
.tabs.foot{margin:8px 0 0}
.final-form .censored{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.change-decide{margin-top:10px}
.change-decide textarea{font:inherit}

/* A draft's forms and data check, 08-template-editor.html's rules: a
   label column beside its fields. */
.form{display:grid;grid-template-columns:150px 1fr;gap:6px 10px;align-items:center}
.form select,.form input{justify-self:start;min-width:220px}
.findings{margin:6px 0 0;padding-left:18px}
.findings li{margin:0 0 4px}
.form .pair{display:inline-flex;gap:6px;align-items:center}
.form .pair input,.form .pair select{min-width:0}

/* The operations editor on a scenario card and the new-scenario form (0003 §7 as #516 amends it). */
.ops-edit{margin:10px 0 0}
.ops-edit ol{margin:0 0 8px;padding-left:22px}
.ops-edit li{margin:4px 0}
.crew-op input[type=number]{width:5em}
.new-scenario{margin:0 0 12px}
.new-scenario-open{white-space:nowrap}
.new-scenario dd.ops-edit{margin-top:0}
.crew-run{margin:10px 0 0}
.share-panel{margin:10px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:4px}
.share-panel h3{margin:0 0 6px;font-size:13px}
.shares{margin:0 0 8px;padding-left:18px}
.shares li{margin:3px 0}
.risk-new{margin:10px 0 0;border-left:4px solid #1f7a8c}
.risk-new textarea{font:inherit}
.promote-refused{display:block;margin:8px 0 0}

.upload,.propose{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px}
.upload .lbl,.propose .lbl{margin:0}