:root{
--paper:#f6f7f9; --surface:#fff; --surface-2:#f0f2f5; --rule:#dfe3e8;
--ink:#1b1f24; --ink-2:#4a525c; --ink-3:#79828d;
--accent:#0b6bcb; --accent-ink:#fff;
--green:#1a7f47; --green-bg:#e4f4ea;
--yellow:#9a6700; --yellow-bg:#fdf3d7;
--red:#b3261e; --red-bg:#fbe6e4;
--grey:#6b7280; --grey-bg:#eceef1;
--row-h:34px;
--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
--sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
:root[data-theme="dark"]{
--paper:#14171a; --surface:#1b1f23; --surface-2:#22272c; --rule:#2f353c;
--ink:#e6e9ed; --ink-2:#b3bcc6; --ink-3:#8b95a1;
--accent:#4c9be8; --accent-ink:#0b1116;
--green:#5fd08a; --green-bg:#14301f;
--yellow:#e5b03d; --yellow-bg:#332a12;
--red:#f0837c; --red-bg:#3a1c1a;
--grey:#9aa3ad; --grey-bg:#262b31;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--paper:#14171a; --surface:#1b1f23; --surface-2:#22272c; --rule:#2f353c;
--ink:#e6e9ed; --ink-2:#b3bcc6; --ink-3:#8b95a1;
--accent:#4c9be8; --accent-ink:#0b1116;
--green:#5fd08a; --green-bg:#14301f;
--yellow:#e5b03d; --yellow-bg:#332a12;
--red:#f0837c; --red-bg:#3a1c1a;
--grey:#9aa3ad; --grey-bg:#262b31;
}
}
*{box-sizing:border-box}
[hidden]{display:none !important} /* beats display set on .btn/.brand */
body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.45 var(--sans)}
.grow{flex:1}
.btn{
font:500 13px/1 var(--sans);color:var(--ink);background:var(--surface);
border:1px solid var(--rule);border-radius:6px;padding:8px 12px;cursor:pointer;
display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.5;cursor:default}
.ico{font-size:14px;line-height:1}
/* ---------- top bar ---------- */
.topbar{
position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;
padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--rule);
}
.brand{display:flex;align-items:center;gap:10px}
/* Inline rather than ![]()
, so the mark can follow the in-app theme. An
external SVG cannot inherit currentColor or a custom property; the standalone
copy at /img/nramp-mark.svg carries its own colors for the tab icon. */
.brand-mark{height:30px;width:30px;flex:none;display:block}
.brand-mark .m-n{fill:var(--ink-2)}
.brand-mark .m-a{fill:var(--accent)}
.mark{font:700 18px/1 var(--sans);letter-spacing:-.02em}
.tag{font-size:11.5px;color:var(--ink-3)}
.snapmeta{font:12px/1.3 var(--mono);color:var(--ink-3);flex:1}
.snapmeta b{color:var(--ink-2);font-weight:600}
/* Pinned right in its own right, rather than relying on the snapshot line to
push it there: that line is hidden outside Ingest Management, which otherwise
leaves the account badge stranded mid-bar. */
.actions{display:flex;gap:8px;margin-left:auto;align-items:center}
.banner{padding:9px 20px;font-size:13px;border-bottom:1px solid var(--rule)}
.banner.info{background:var(--surface-2);color:var(--ink-2)}
.banner.err{background:var(--red-bg);color:var(--red)}
.banner.ok{background:var(--green-bg);color:var(--green)}
/* ---------- panels ---------- */
.view{padding:18px 20px 40px;max-width:1600px;margin:0 auto}
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:8px;margin-bottom:18px;overflow:hidden}
.panel-head{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.panel-head h2{margin:0;font-size:15px;font-weight:600}
.detail-for{font-weight:400;color:var(--ink-3);font-size:13px}
.thresh{font:12px var(--mono);color:var(--ink-3)}
.legend{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid transparent}
.chip.green{background:var(--green-bg);color:var(--green);border-color:var(--green)}
.chip.yellow{background:var(--yellow-bg);color:var(--yellow);border-color:var(--yellow)}
.chip.red{background:var(--red-bg);color:var(--red);border-color:var(--red)}
.chip.grey{background:var(--grey-bg);color:var(--grey);border-color:var(--grey)}
.filter{font:13px var(--sans);padding:7px 10px;border:1px solid var(--rule);border-radius:6px;background:var(--surface-2);color:var(--ink);min-width:200px}
.onlyalerts{font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:5px}
/* ---------- tables: 15 rows then scroll ---------- */
.tablewrap{overflow:auto;max-height:calc(var(--row-h) * 15 + 62px)}
.tablewrap.short{max-height:calc(var(--row-h) * 9 + 62px)}
table.grid{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
table.grid thead th{
position:sticky;background:var(--surface-2);z-index:2;
text-align:left;font-weight:600;font-size:11.5px;letter-spacing:.02em;
color:var(--ink-2);padding:7px 10px;border-bottom:1px solid var(--rule);white-space:nowrap;
}
table.grid thead tr th{top:0}
/* Only the second row of a two-row header offsets; a single-row header must
stay at top:0 or it slides down and hides the first data row. */
table.grid thead tr.group + tr th{top:31px}
table.grid thead th.grouphead{text-align:center;border-left:1px solid var(--rule);color:var(--ink-3);text-transform:uppercase;font-size:10.5px}
table.grid thead th.alt{background:color-mix(in srgb,var(--surface-2) 82%,var(--accent))}
table.grid thead th.var{background:color-mix(in srgb,var(--surface-2) 86%,var(--ochre,var(--yellow)))}
td.mvar{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px}
td.mvar.pos{color:var(--red)} td.mvar.neg{color:var(--green)} td.mvar.none{color:var(--ink-3)}
td.var.held{background:transparent;color:var(--ink-3);font-weight:400;box-shadow:none}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--ink)}
th.sortable.on::after{content:" ▾";color:var(--accent)}
th.sortable.on.asc::after{content:" ▴"}
.num{text-align:right !important}
table.grid tbody td{padding:0 10px;height:var(--row-h);border-bottom:1px solid var(--rule);white-space:nowrap}
table.grid tbody td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px}
table.grid tbody tr{cursor:pointer}
table.grid tbody tr:hover{background:var(--surface-2)}
table.grid tbody tr.sel{background:color-mix(in srgb,var(--surface-2) 60%,var(--accent) 22%)}
table.grid tbody tr.empty td{color:var(--ink-3);text-align:center;cursor:default;font-style:italic}
table.grid tbody tr.empty:hover{background:none}
td.name{max-width:340px;overflow:hidden;text-overflow:ellipsis}
.rowcount{padding:8px 16px;font:11.5px var(--mono);color:var(--ink-3);border-top:1px solid var(--rule)}
/* Counts on the left, the key that explains them on the right, on one line
under the table rather than competing with the controls above it. */
.tablefoot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
padding:8px 16px;border-top:1px solid var(--rule)}
.tablefoot .rowcount{padding:0;border-top:0}
.tablefoot .legend{margin-left:auto}
/* status pill on the account id cell */
.st{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px}
.dot{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--surface) 70%,transparent)}
.dot.green{background:var(--green)} .dot.yellow{background:var(--yellow)}
.dot.red{background:var(--red)} .dot.grey{background:var(--grey)}
td.var{
font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;
font-weight:600;padding:0 12px;
border-bottom:1px solid var(--rule);
box-shadow:inset 3px 0 0 var(--vc,transparent);
background:var(--vbg,transparent);color:var(--vfg,var(--ink-3));
}
td.var.red {--vbg:var(--red-bg); --vfg:var(--red); --vc:var(--red)}
td.var.yellow{--vbg:var(--yellow-bg);--vfg:var(--yellow);--vc:var(--yellow)}
td.var.green {--vbg:var(--green-bg); --vfg:var(--green); --vc:var(--green)}
td.var.grey {--vbg:var(--grey-bg); --vfg:var(--grey); --vc:var(--grey)}
/* keep the fill legible when the row is hovered or selected */
table.grid tbody tr:hover td.var,
table.grid tbody tr.sel td.var{filter:brightness(1.06) saturate(1.1)}
/* ---------- setup form ---------- */
.form{padding:16px}
/* New Relic and Variance thresholds sit side by side at the top of Admin. They
stretch to a shared height so the two boxes line up, and stack below 1000px
where two columns would squeeze the labelled inputs. */
.form-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
/* The grid's default stretch already equalizes the two boxes. Forcing height
here instead would swallow the margin and leave them touching once stacked. */
.form-top > fieldset{margin-bottom:18px}
@media (max-width:1000px){ .form-top{grid-template-columns:1fr} }
fieldset{border:1px solid var(--rule);border-radius:8px;padding:14px 16px 18px;margin:0 0 18px}
legend{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);padding:0 6px}
.field{display:block;margin-bottom:14px;max-width:640px}
.field.narrow{max-width:340px}
.field>span{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px}
.field em{font-weight:400;color:var(--ink-3);font-style:normal}
input[type=text],input[type=password],input[type=number],select{
width:100%;font:13px var(--sans);padding:8px 10px;border:1px solid var(--rule);
border-radius:6px;background:var(--surface-2);color:var(--ink);
}
input.sm{width:130px}
.suffixed{display:flex;align-items:center;gap:8px}
.suffixed span{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.hint{display:block;color:var(--ink-3);font-size:11.5px;margin-top:5px;line-height:1.4}
.row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
/* A row that sits between fields rather than at the end of a fieldset needs the
same gap under it that the fields have. */
.row-sep{margin-bottom:16px}
.check{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px}
.check .hint{display:inline;margin:0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 18px;margin-top:6px}
.colorkey{display:grid;gap:7px;margin:12px 0 4px;font-size:12.5px;color:var(--ink-2)}
.colorkey div{display:flex;align-items:center;gap:9px}
h4{margin:18px 0 4px;font-size:13px}
.savebar{display:flex;align-items:center;gap:12px;padding-top:4px}
.verify{font-size:12.5px}
.verify.ok{color:var(--green)} .verify.err{color:var(--red)} .verify.busy{color:var(--ink-3)}
dialog{border:1px solid var(--rule);border-radius:10px;background:var(--surface);color:var(--ink);max-width:640px;padding:22px 24px}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog h3{margin:0 0 12px;font-size:16px}
dialog p{font-size:13px;color:var(--ink-2);margin:0 0 11px}
dialog code{font:12px var(--mono);background:var(--surface-2);padding:1px 5px;border-radius:4px}
dialog form{margin-top:16px;text-align:right}
@media (max-width:900px){ .tag,.snapmeta{display:none} }
/* ---------- expandable panels ---------- */
.panel{display:flex;flex-direction:column}
.panel .tablewrap{flex:1 1 auto}
.btn.icon{padding:6px 9px;font-size:13px;line-height:1}
.panel.expanded{
position:fixed;inset:0;z-index:60;margin:0;border-radius:0;
max-width:none;height:100vh;
}
.panel.expanded .tablewrap,
.panel.expanded .tablewrap.short{max-height:none}
body.has-expanded{overflow:hidden}
body.has-expanded .topbar{filter:blur(1px);pointer-events:none}
/* ---------- theme buttons ---------- */
.themeset{display:inline-flex;border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.themeset .btn{border:0;border-radius:0;padding:8px 11px}
.themeset .btn + .btn{border-left:1px solid var(--rule)}
.themeset .btn.on{background:var(--accent);color:var(--accent-ink)}
.mlab{font:9.5px var(--mono);color:var(--ink-3);font-weight:400;letter-spacing:0}
/* ---------- module launcher ---------- */
button.brand{
background:none;border:0;padding:0;cursor:pointer;color:inherit;text-align:left;
display:flex;align-items:center;gap:10px;font:inherit;
}
button.brand:hover .mark{color:var(--accent)}
.hero{max-width:760px;margin:26px auto 4px;text-align:center}
.hero h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-.02em}
.hero p{margin:8px 0 0;color:var(--ink-3);font-size:14px}
.modules{
display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
gap:16px;max-width:1180px;margin:28px auto 0;
}
.mod{
position:relative;text-align:left;cursor:pointer;font:inherit;color:inherit;
background:var(--surface);border:1px solid var(--rule);border-radius:10px;
padding:22px 22px 20px;display:flex;flex-direction:column;gap:8px;
transition:border-color .12s,transform .12s,box-shadow .12s;
}
.mod:hover:not([aria-disabled="true"]){
border-color:var(--accent);transform:translateY(-2px);
box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 16%,transparent);
}
.mod[aria-disabled="true"]{opacity:.62}
.mod[aria-disabled="true"]:hover{border-color:var(--ink-3)}
.mod-ic{font-size:19px;color:var(--accent);line-height:1}
.mod[aria-disabled="true"] .mod-ic{color:var(--ink-3)}
.mod h2{margin:2px 0 0;font-size:17px;font-weight:600;letter-spacing:-.01em}
.mod p{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.mod-s{
position:absolute;top:18px;right:18px;font:10px/1 var(--mono);text-transform:uppercase;
letter-spacing:.07em;padding:5px 8px;border-radius:3px;
background:var(--grey-bg);color:var(--grey);border:1px solid var(--grey);
}
.mod-s.ready{background:var(--green-bg);color:var(--green);border-color:var(--green)}
.home-note{
transition:opacity .15s;
max-width:1100px;margin:18px auto 0;text-align:center;font-size:13px;
color:var(--ink-3);min-height:20px;
}
/* ---------- alert analysis report ---------- */
.rep-hd{padding:2px 0 18px}
.rep-eyebrow{font:11px var(--mono);color:var(--accent);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.rep-title{font-size:24px;font-weight:650;letter-spacing:-.4px;margin:0 0 8px}
.rep-sub{color:var(--ink-3);font-size:13.5px;margin:0}
.crit{
display:flex;gap:16px;align-items:flex-start;background:var(--red-bg);
border:1px solid var(--red);border-radius:8px;padding:17px 19px;margin-bottom:20px;
}
.crit.ok{background:var(--green-bg);border-color:var(--green)}
.crit-i{font-size:18px;color:var(--red);line-height:1.3}
.crit.ok .crit-i{color:var(--green)}
.crit-h{font-weight:650;font-size:15px;color:var(--red);margin-bottom:5px}
.crit.ok .crit-h{color:var(--green)}
.crit-b{font-size:13.5px;line-height:1.65;color:var(--ink)}
.crit-n{text-align:center;padding-left:18px;border-left:1px solid var(--red);min-width:106px}
.crit.ok .crit-n{border-left-color:var(--green)}
.crit-n b{font:650 28px/1 var(--mono);color:var(--red);display:block}
.crit.ok .crit-n b{color:var(--green)}
.crit-n span{font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;display:block;margin-top:5px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:10px;margin-bottom:30px}
.tile{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:13px 14px}
.tile b{font:650 21px/1 var(--mono);letter-spacing:-.4px;display:block}
.tile b.bad{color:var(--red)} .tile b.warn{color:var(--yellow)} .tile b.ok{color:var(--green)}
/* Direct child only. This styles the tile's label, but as a descendant
selector it also caught spans nested inside the value: the as-built trend
arrow and the .unit suffix both lost to it on specificity and rendered at
11px instead of their own sizes. */
.tile > span{font-size:11px;color:var(--ink-3);margin-top:5px;display:block;line-height:1.35}
.sec{margin-bottom:34px}
.sec-h{display:flex;align-items:baseline;gap:12px;margin-bottom:13px;padding-bottom:9px;border-bottom:1px solid var(--rule)}
.sec-n{font:600 12px var(--mono);color:var(--accent)}
.sec-t{font-size:17px;font-weight:650;letter-spacing:-.2px}
.sec-b{font-size:14px;color:var(--ink-2);line-height:1.7;max-width:880px;margin-bottom:14px}
.sec-b strong{color:var(--ink)}
.subs{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:10px}
.sub{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:12px 14px}
.sub-n{font-weight:600;font-size:13.5px;margin-bottom:3px}
.sub-m{font:12px var(--mono);color:var(--ink-3);margin-bottom:8px}
.sub-bar{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.sub-bar i{display:block;height:100%;background:var(--red)}
.sub-bar i.ok{background:var(--green)}
.lives{display:flex;flex-direction:column;gap:8px}
.live{display:flex;gap:11px;align-items:flex-start;background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:11px 14px}
.live-d{width:7px;height:7px;border-radius:50%;background:var(--green);margin-top:7px;flex:none}
.live-p{font:600 12.5px var(--mono)}
.live-c{font-size:12.5px;color:var(--ink-3);margin-top:3px;line-height:1.5}
@media print{
/* Force the light palette whatever the screen theme is. Without this a dark
session prints its own dark surfaces, which is what print-color-adjust:exact
was telling the browser to do faithfully. */
:root,
:root[data-theme="dark"],
:root:not([data-theme="light"]){
--paper:#fff; --surface:#fff; --surface-2:#f7f7f8; --rule:#c9ccd1;
--ink:#111; --ink-2:#333; --ink-3:#666;
--accent:#0b5cad; --accent-dim:#eaf1fa; --accent-ink:#fff;
--green:#1a7f37; --green-bg:#eaf6ee;
--yellow:#8a6100; --yellow-bg:#fdf5e0;
--red:#b32318; --red-bg:#fdeceb;
--grey:#5a5f66; --grey-bg:#f0f1f2;
}
body{background:#fff !important;color:#111 !important}
.panel,.tile,.sub,.rem,.crit,.grp,details.tk,tr.tk-detail > td,.ua-id,.rem-total,.dlg-src{
background:#fff !important;box-shadow:none !important;
}
/* Chrome that means nothing on paper. */
.mod,.hero,#al-run,#al-print,#al-account,.panel-head .btn,.expander,
.actions,.filter,.onlyalerts,#ab-filter,#ab-nonempty,#ws-filter,#ws-new,
.mk-task,.tk-print,.tk-del,.ws-del,#wsd-print,#wsd-addtask,.tk-note-wrap{display:none !important}
.topbar{position:static;border-bottom:1px solid #ccc;padding:10px 0 12px;background:none}
.tag,.snapmeta{display:none !important}
.brand-mark{height:40px !important;width:40px !important}
.brand-mark .m-n{fill:#555 !important} .brand-mark .m-a{fill:#111 !important}
.mark{font-size:22px !important;color:#111 !important}
/* Only the small tinted badges keep their fill; a blanket rule here is what
dragged every dark surface onto the page. */
.pri,.st-pill,.risk,.chip,.pill,.dlg-tag,.mod-s,.tracked,.rpt-badge,
.dot,.st-dot,.ab-tr,.subsystem-bar-fill,.sub-bar i,.pbar i,.bar i{
-webkit-print-color-adjust:exact;print-color-adjust:exact;
}
/* Wide tables have to shrink to the sheet rather than run off it. */
.tablewrap,.tw{max-height:none !important;overflow:visible !important;border:0}
/* auto layout, not fixed: 20 columns of very different natural widths need
sizing to content, and a fixed grid squeezes identifiers into two lines or
pushes them over their neighbour. */
table.grid{width:100% !important;table-layout:auto;font-size:7pt}
table.grid th,table.grid td{
padding:3px 4px !important;white-space:normal !important;
word-break:normal;overflow-wrap:break-word; /* break long words, not every word */
}
/* Identifiers, figures and dates must never be split — a wrapped account id
reads as two different numbers. */
table.grid td.num,table.grid td.mono,table.grid .mono,
table.grid td.var,table.grid td.mvar,table.grid td.trend{
white-space:nowrap !important;word-break:keep-all;overflow-wrap:normal;
}
table.grid thead th{position:static}
td.name,.tk-name-in,td.tk-desc-cell .clamp2{max-width:none !important}
td.tk-desc-cell .clamp2{-webkit-line-clamp:unset;display:block}
.tk-name-t{overflow:visible;text-overflow:clip;white-space:normal}
.unit{font-size:6pt}
.sec,.rem,.crit,.tiles,.sub,.live,.note,tr{break-inside:avoid;page-break-inside:avoid}
.tk-details,.rpt-block pre{max-height:none !important;overflow:visible !important;white-space:pre-wrap}
}
/* table wrapper used by the alert report */
.tw{border:1px solid var(--rule);border-radius:6px;overflow-x:auto;background:var(--surface)}
.tw table.grid{font-size:13px}
.tw table.grid thead th{position:static}
.mono{font-family:var(--mono);font-size:12px}
/* ---------- user audit ---------- */
.ua-id{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:15px 17px;margin-bottom:14px}
.ua-id-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:3px}
.ua-name{font-size:17px;font-weight:650;letter-spacing:-.2px}
.ua-mail{font:12.5px var(--mono);color:var(--ink-3)}
.ua-meta{font:12px var(--mono);color:var(--ink-3);margin-bottom:12px}
.grp{border:1px solid var(--rule);border-radius:6px;margin-bottom:9px;overflow:hidden;background:var(--surface-2)}
.grp-h{display:flex;align-items:center;gap:11px;padding:10px 13px;flex-wrap:wrap}
.grp-n{font-weight:600;font-size:13.5px}
.grp-c{font:11.5px var(--mono);color:var(--ink-3)}
.grp-b{padding:0 13px 11px;display:flex;flex-wrap:wrap;gap:5px}
.gr{font:11px var(--mono);background:var(--surface);border:1px solid var(--rule);
border-radius:3px;padding:3px 7px;color:var(--ink-2)}
.gr.org{border-color:var(--yellow);color:var(--yellow);background:var(--yellow-bg)}
.gr.noacc{opacity:.6;font-style:italic}
.ua-empty{padding:16px;color:var(--ink-3);font-size:13.5px;font-style:italic}
details.grp > summary{cursor:pointer;list-style:none;user-select:none}
details.grp > summary::-webkit-details-marker{display:none}
details.grp > summary::before{content:"\25B8";color:var(--ink-3);font-size:10px;margin-right:2px;transition:transform .12s;display:inline-block}
details.grp[open] > summary::before{transform:rotate(90deg)}
details.grp > summary:hover{background:var(--surface)}
/* ---------- denser tables: fit six months without horizontal scroll ---------- */
table.grid thead th{padding:5px 7px;font-size:10.5px}
table.grid thead th.grouphead{font-size:9.5px;letter-spacing:.04em}
table.grid tbody td{padding:0 7px;height:30px}
table.grid tbody td.num{font-size:11.5px}
td.var,td.mvar{padding:0 8px;font-size:11.5px}
td.name{max-width:210px}
.mlab{font-size:9px;opacity:.75}
:root{--row-h:30px}
/* unit suffix rides alongside the figure without competing with it */
.unit{font-size:9px;color:var(--ink-3);margin-left:2px;letter-spacing:.02em}
.zero{color:var(--ink-3)}
/* ---------- trend indicators ---------- */
th.trendhead{
text-align:center !important;font-size:9.5px;letter-spacing:.03em;
border-left:1px solid var(--rule);color:var(--ink-3);
}
td.trend{
text-align:center;font-size:15px;line-height:1;font-weight:700;
border-left:1px solid var(--rule);cursor:default;width:34px;
}
td.trend.up{color:var(--red)}
td.trend.down{color:var(--green)}
td.trend.flat{color:var(--ink-3);font-size:13px}
td.trend.none{color:var(--ink-3);font-weight:400}
/* ---------- always-visible horizontal scrollbar on the account tables ---------- */
/* macOS hides overlay scrollbars until you scroll, which makes it easy to miss
that there are more columns. Styling them explicitly keeps them on screen. */
.tablewrap{overflow-x:auto;overflow-y:auto;scrollbar-width:thin;
scrollbar-color:var(--ink-3) var(--surface-2)}
.tablewrap::-webkit-scrollbar{height:11px;width:11px}
.tablewrap::-webkit-scrollbar-track{background:var(--surface-2);border-top:1px solid var(--rule)}
.tablewrap::-webkit-scrollbar-thumb{
background:color-mix(in srgb,var(--ink-3) 65%,transparent);
border-radius:6px;border:2px solid var(--surface-2);
}
.tablewrap::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}
.tablewrap::-webkit-scrollbar-corner{background:var(--surface-2)}
/* ---------- dialogs ---------- */
dialog.dlg{
border:1px solid var(--rule);border-radius:10px;background:var(--surface);color:var(--ink);
width:min(720px,92vw);padding:22px 24px;
}
dialog.dlg::backdrop{background:rgba(0,0,0,.5)}
dialog.dlg h3{margin:0 0 14px;font-size:17px;font-weight:650;letter-spacing:-.2px}
.dlg-src{
display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px;padding:9px 12px;
background:var(--surface-2);border:1px solid var(--rule);border-radius:6px;font-size:12.5px;
}
.dlg-tag{font:10px var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:3px 7px;
border-radius:3px;background:var(--accent);color:var(--accent-ink)}
.dlg-impact{margin-left:auto;font:12px var(--mono);color:var(--red);font-weight:600}
.dlg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 16px}
.dlg-row{display:flex;gap:8px;align-items:center}
.dlg-row select{flex:1}
dialog.dlg .field{margin-bottom:12px;max-width:none}
dialog.dlg textarea{
width:100%;font:12.5px/1.55 var(--mono);padding:9px 11px;border:1px solid var(--rule);
border-radius:6px;background:var(--surface-2);color:var(--ink);resize:vertical;
}
.dlg-err{color:var(--red);font-size:13px;margin:4px 0 0}
.dlg-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
/* ---------- workstreams ---------- */
.pri{font:10px var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:3px 7px;
border-radius:3px;border:1px solid;white-space:nowrap}
.pri.high{background:var(--red-bg);color:var(--red);border-color:var(--red)}
.pri.medium{background:var(--yellow-bg);color:var(--yellow);border-color:var(--yellow)}
.pri.low{background:var(--green-bg);color:var(--green);border-color:var(--green)}
.pri.backlog{background:var(--grey-bg);color:var(--grey);border-color:var(--grey)}
.st-pill{font:10px var(--mono);text-transform:uppercase;letter-spacing:.05em;padding:3px 7px;
border-radius:3px;background:var(--surface-2);border:1px solid var(--rule);color:var(--ink-2);white-space:nowrap}
.st-pill.complete{background:var(--green-bg);color:var(--green);border-color:var(--green)}
.st-pill.in-progress{background:var(--accent-dim,var(--surface-2));color:var(--accent);border-color:var(--accent)}
.st-pill.backlog{color:var(--ink-3)}
.st-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none}
.st-dot.complete{background:var(--green)} .st-dot.in-progress{background:var(--accent)}
.st-dot.started{background:var(--yellow)} .st-dot.backlog{background:var(--grey)}
.pbar{height:8px;background:var(--surface-2);border:1px solid var(--rule);border-radius:4px;overflow:hidden;min-width:90px}
.pbar i{display:block;height:100%;background:var(--green)}
tr.ws-row{cursor:pointer}
details.tk{border:1px solid var(--rule);border-radius:7px;margin-bottom:9px;background:var(--surface-2);overflow:hidden}
details.tk > summary{list-style:none;cursor:pointer;user-select:none}
details.tk > summary::-webkit-details-marker{display:none}
.tk-h{display:flex;align-items:center;gap:10px;padding:11px 14px;flex-wrap:wrap}
details.tk[open] .tk-h{border-bottom:1px solid var(--rule);background:var(--surface)}
.tk-n{font-weight:600;font-size:13.5px}
.tk-b{padding:13px 15px}
.tk-src{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px;font-size:12.5px}
.tk-desc{margin:0 0 10px;font-size:13.5px;color:var(--ink-2)}
.tk-details{margin:0 0 12px;padding:11px 13px;background:var(--surface);border:1px solid var(--rule);
border-radius:5px;font:12px/1.6 var(--mono);white-space:pre-wrap;color:var(--ink-2);max-height:260px;overflow:auto}
.tk-edit{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;padding-bottom:12px;
border-bottom:1px solid var(--rule);margin-bottom:12px}
.tk-edit .field{margin:0}
.tk-log-h{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
color:var(--ink-3);margin-bottom:8px;display:flex;gap:8px;align-items:baseline}
.note{border-left:2px solid var(--rule);padding:7px 0 7px 11px;margin-top:9px}
.note-m{font-size:11px;color:var(--ink-3)}
.note-b{font-size:13px;color:var(--ink);white-space:pre-wrap;margin-top:2px}
.tracked{font:11px var(--mono);color:var(--green);background:var(--green-bg);
border:1px solid var(--green);border-radius:3px;padding:4px 8px;white-space:nowrap}
button.mktask{padding:5px 10px;font-size:12px}
/* The Help dialog right-aligns its single close button; these forms must not inherit that. */
dialog.dlg form{text-align:left}
dialog.dlg .dlg-actions{text-align:right}
/* Work-log entry box spans the same width as the edit row above it, which ends
at the Delete task button. */
.tk-note-wrap{margin-bottom:4px}
textarea.tk-note{
display:block;width:100%;box-sizing:border-box;
font:12.5px/1.55 var(--sans);padding:9px 11px;
border:1px solid var(--rule);border-radius:6px;
background:var(--surface);color:var(--ink);
resize:vertical;overflow:auto;min-height:calc(4 * 1.55em + 20px);
}
textarea.tk-note:focus{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:-1px}
.tk-note-actions{display:flex;justify-content:flex-end;margin-top:7px}
/* ---------- task table ---------- */
table.tk-table tbody tr.tk-row{cursor:pointer}
table.tk-table tbody tr.tk-row.open{background:var(--surface-2)}
table.tk-table td{vertical-align:top}
/* display:flex on a takes it out of table layout, so the flex box goes
on an inner span and the cell stays a cell. */
td.tk-name{font-weight:600}
.tk-name-in{display:flex;align-items:center;gap:8px;max-width:260px;min-width:0}
/* A flex child will not shrink below its content unless min-width is cleared,
which is what lets the ellipsis actually engage. */
.tk-name-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* max-width on a | is advisory; constraining an inner block is what holds. */
td.tk-desc-cell{color:var(--ink-2);font-size:12.5px}
td.tk-desc-cell .clamp2{
max-width:340px;line-height:1.45;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tk-impact{color:var(--red);font-weight:600}
.tk-value{color:var(--green);font-weight:600}
tr.tk-detail > td{background:var(--surface-2);padding:14px 16px;border-bottom:2px solid var(--rule)}
tr.tk-detail .tk-edit{border-bottom:1px solid var(--rule)}
.ws-save{color:var(--red);font-weight:600}
.ws-value{color:var(--green);font-weight:600}
.partial{color:var(--ink-3);font-weight:400;margin-left:2px}
/* ---------- printed report ---------- */
td.nowrap{white-space:nowrap}
button.tk-print{padding:5px 8px;font-size:12px;margin-right:6px}
#print-doc{display:none}
@page{ margin:14mm 13mm; }
@media print{
/* Only the generated report prints; the app itself is not on paper. */
body[data-print="doc"] > *:not(#print-doc){display:none !important}
body[data-print="doc"] #print-doc{display:block !important}
#print-doc{
color:#111;background:#fff;
font:11pt/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
#print-doc *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.rpt-head{display:flex;align-items:flex-start;gap:16px;padding-bottom:12px;
border-bottom:2px solid #111;margin-bottom:16px}
.rpt-logo{display:flex;align-items:center;gap:10px;flex:none}
.rpt-logo .brand-mark{height:42px !important;width:42px !important}
.rpt-logo b{font:700 20px/1 var(--sans);letter-spacing:-.3px;color:#111}
.rpt-head-t{flex:1}
.rpt-kicker{font:8.5pt/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;
text-transform:uppercase;color:#666;margin-bottom:5px}
.rpt-head h1{font-size:20pt;line-height:1.15;margin:0 0 7px;letter-spacing:-.4px}
.rpt-badges{display:flex;gap:6px;flex-wrap:wrap}
.rpt-badge{font:8pt ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:.06em;
border:1px solid #999;border-radius:3px;padding:2px 7px;color:#333}
.rpt-stamp{font:8pt/1.5 ui-monospace,Menlo,monospace;color:#666;text-align:right;flex:none}
.rpt-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
border:1px solid #bbb;border-radius:4px;overflow:hidden;margin:0 0 18px}
.rpt-figs > div{padding:9px 12px;border-right:1px solid #ddd}
.rpt-figs > div:last-child{border-right:0}
.rpt-figs .k{display:block;font:7.5pt ui-monospace,Menlo,monospace;text-transform:uppercase;
letter-spacing:.09em;color:#777;margin-bottom:3px}
.rpt-figs .v{display:block;font:600 15pt/1 ui-monospace,Menlo,monospace}
.rpt-figs .v2{display:block;font:600 10.5pt/1.2 ui-monospace,Menlo,monospace}
.rpt-figs .v small{font-size:9pt;font-weight:400;color:#666}
.rpt-figs .s{display:block;font-size:8pt;color:#666;margin-top:4px}
.rpt-h2{font-size:12pt;margin:20px 0 9px;padding-bottom:5px;border-bottom:1px solid #111;
text-transform:uppercase;letter-spacing:.08em}
.rpt-block{margin:0 0 13px}
.rpt-block h4{font:8.5pt ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:.09em;
color:#666;margin:0 0 4px}
.rpt-block p{margin:0;font-size:10.5pt}
.rpt-block pre{margin:0;padding:9px 11px;background:#f5f5f5;border:1px solid #ddd;border-radius:3px;
font:8.5pt/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-word}
.rpt-table{width:100%;border-collapse:collapse;font-size:9pt;margin-bottom:4px}
.rpt-table th{text-align:left;font:8pt ui-monospace,Menlo,monospace;text-transform:uppercase;
letter-spacing:.06em;color:#555;border-bottom:1.5px solid #111;padding:6px 7px}
.rpt-table td{padding:5px 7px;border-bottom:1px solid #ddd;vertical-align:top}
.rpt-table .rn{width:22px;color:#777}
.rpt-table .r{text-align:right;font-family:ui-monospace,Menlo,monospace;white-space:nowrap}
.rpt-table tr{break-inside:avoid}
.rpt-task{break-inside:avoid;page-break-inside:avoid;margin:0 0 16px;padding:11px 13px;
border:1px solid #ccc;border-radius:4px}
.rpt-task h3{font-size:11.5pt;margin:0 0 8px}
.rpt-facts{display:grid;grid-template-columns:repeat(2,auto 1fr);gap:2px 10px;margin:0 0 11px;
font-size:9pt}
.rpt-facts dt{font:8pt ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:.05em;
color:#777;white-space:nowrap}
.rpt-facts dd{margin:0;font-family:ui-monospace,Menlo,monospace}
.rpt-note{border-left:2px solid #ccc;padding:4px 0 4px 9px;margin-top:7px;break-inside:avoid}
.rpt-note-m{font:8pt ui-monospace,Menlo,monospace;color:#777;display:block}
.rpt-none{font-size:9.5pt;color:#777;font-style:italic;margin:0}
}
/* movement against the previous as-built inventory */
/* Sized to match td.trend in the ingest tables: 15px, and 13px for the flat
arrow, which is a lighter mark and reads too heavy at full size. */
.ab-tr{font-size:15px;margin-left:5px;font-weight:700;vertical-align:1px;cursor:default}
.ab-tr.up{color:var(--red)} .ab-tr.down{color:var(--green)} .ab-tr.flat{color:var(--ink-3);font-size:13px}
/* ---------- per-screen help ----------
Help bodies run long enough to need their own scroll; without it a dialog
sized to the content pushes its Close button off the bottom of the viewport. */
#help{width:min(660px,92vw)}
.helpbody{max-height:min(62vh,540px);overflow-y:auto;padding-right:6px}
.helpbody p{font-size:13px;color:var(--ink-2);margin:0 0 11px;line-height:1.55}
.helpbody h4{margin:18px 0 7px;font-size:12px;font-weight:650;letter-spacing:.04em;
text-transform:uppercase;color:var(--ink)}
.helpbody h4:first-child{margin-top:0}
.helpbody ul{margin:0 0 11px;padding-left:20px}
.helpbody li{font-size:13px;color:var(--ink-2);margin-bottom:5px;line-height:1.5}
.helpbody b{color:var(--ink);font-weight:620}
.helpbody code{font:12px var(--mono);background:var(--surface-2);padding:1px 5px;border-radius:4px}
/* ---------- app accounts (Admin > Users) ---------- */
.chip.neutral{background:var(--surface-2);color:var(--ink-2);border-color:var(--rule)}
.btn.danger{border-color:var(--red);color:var(--red)}
.btn.danger:hover:not(:disabled){background:var(--red-bg)}
.btn:disabled{opacity:.5;cursor:not-allowed}
/* Create on the left, roster on the right. The form keeps a fixed column so the
table takes the slack; below 900px they stack rather than crush. */
.usr-split{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;padding:16px 18px 18px}
@media (max-width:900px){ .usr-split{grid-template-columns:1fr} }
.usr-new{border:1px solid var(--rule);border-radius:8px;padding:16px;background:var(--surface-2);
align-self:start}
.usr-new h3{margin:0 0 14px;font-size:13px;font-weight:650;letter-spacing:.04em;text-transform:uppercase}
.usr-new .field{display:block;margin-bottom:12px}
.usr-new .field > span{display:block;font-size:12px;font-weight:600;margin-bottom:4px}
.usr-new input,.usr-new select{width:100%}
.usr-mods{border:1px solid var(--rule);border-radius:6px;padding:10px 12px 6px;margin:4px 0 14px}
.usr-mods legend{font-size:11px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;
color:var(--ink-2);padding:0 5px}
.usr-mods .check{display:flex;align-items:center;gap:7px;font-size:12.5px;margin-bottom:6px}
.usr-mods .check input{width:auto;margin:0}
.usr-list .tablewrap{max-height:none}
#tbl-users tbody tr{cursor:pointer}
#tbl-users td.usr-access{font-size:12px;color:var(--ink-2);max-width:260px}
#tbl-users tr.row-off td{opacity:.55}
.whoami{font-size:12.5px;color:var(--ink-2);margin-left:4px;white-space:nowrap}
.whoami b{color:var(--ink);font-weight:600}
@media print{ #panel-users,.whoami,#btn-signout{display:none !important} }
/* ---------- API keys ---------- */
.dlg-wide{width:min(920px,94vw)}
/* The account badge sits last in the bar, so it lands in the top right corner.
The rule to its left separates identity from the action buttons. */
button.whoami{
display:flex;align-items:center;gap:9px;background:none;border:0;font:inherit;cursor:pointer;
padding:4px 4px 4px 12px;margin-left:4px;border-radius:8px;border-left:1px solid var(--rule);
text-align:left;
}
button.whoami:hover{background:var(--surface-2)}
button.whoami:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Initials rather than a silhouette: it reads as a profile icon and says who
is signed in, which matters on a shared machine. */
.avatar{
flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
background:var(--accent);color:var(--accent-ink);font:600 11.5px/1 var(--sans);
letter-spacing:.03em;
}
.whoami-text{display:flex;flex-direction:column;gap:1px;line-height:1.25}
.whoami-text b{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap}
#whoami-role{font-size:11px;color:var(--ink-3)}
/* Below 900px the tagline and snapshot line already drop out; the name goes too,
leaving the avatar as the whole badge. */
@media (max-width:900px){ .whoami-text{display:none} button.whoami{padding-left:8px} }
.ak-form-row{display:grid;grid-template-columns:1fr 200px;gap:0 16px}
.ak-form .field{display:block;margin-bottom:12px}
.ak-form .field>span{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px}
#ak-scopes .check{align-items:flex-start}
#ak-scopes code{font:11.5px var(--mono);background:var(--surface-2);padding:1px 5px;border-radius:4px;margin-right:6px}
#tbl-keys td.ak-scopelist{font-size:11.5px;line-height:1.5;color:var(--ink-2)}
#tbl-keys tr.row-off td{opacity:.55}
#tbl-keys td.empty{text-align:center;color:var(--ink-3);padding:18px;font-style:italic}
/* The secret is shown once and never again, so it gets a loud, deliberate box. */
.ak-reveal{border:1px solid var(--yellow);background:var(--yellow-bg);border-radius:8px;
padding:12px 14px;margin-bottom:16px}
.ak-reveal b{display:block;font-size:12.5px;margin-bottom:8px;color:var(--ink)}
.ak-secret-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ak-secret-row code{flex:1 1 320px;font:12px var(--mono);background:var(--surface);border:1px solid var(--rule);
border-radius:6px;padding:8px 10px;word-break:break-all;user-select:all}
.ak-docs{margin-top:16px;border-top:1px solid var(--rule);padding-top:12px}
.ak-docs summary{font-size:12.5px;font-weight:600;cursor:pointer;color:var(--ink-2)}
.ak-docs pre{margin:12px 0 0;padding:12px;background:var(--surface-2);border:1px solid var(--rule);
border-radius:6px;overflow-x:auto;font:11.5px/1.6 var(--mono)}
@media (max-width:640px){ .ak-form-row{grid-template-columns:1fr} }
/* ---------- CCU Management ---------- */
.ccu-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;padding:14px 18px 4px}
.ccu-tiles .tile{background:var(--surface-2);border:1px solid var(--rule);border-radius:8px;padding:11px 13px;
display:flex;flex-direction:column;gap:3px}
.ccu-tiles .tile b{font:600 18px/1 var(--mono);letter-spacing:-.3px}
.ccu-tiles .tile span{font-size:11px;color:var(--ink-3)}
/* Three across on a wide screen, two then one as it narrows: below that the
account and name columns stop being readable side by side. */
.ccu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:14px 18px 18px}
@media (max-width:1500px){ .ccu-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:1000px){ .ccu-grid{grid-template-columns:1fr} }
.ccu-col{border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--surface)}
.ccu-col > header{padding:10px 12px;border-bottom:1px solid var(--rule);background:var(--surface-2)}
.ccu-col h3{margin:0 0 2px;font-size:13px;font-weight:650}
.ccu-col header .hint{margin:0;font-size:10.5px}
/* Twenty rows deep, then it scrolls; the other thirty are a flick away. */
.ccu-scroll{max-height:calc(20 * 30px + 34px);overflow:auto}
.ccu-scroll table.grid{font-size:12px}
.ccu-scroll td,.ccu-scroll th{padding:6px 9px;white-space:nowrap}
.ccu-scroll td:not(.num){overflow:hidden;text-overflow:ellipsis;max-width:190px}
.ccu-acct{max-width:120px !important;color:var(--ink-2)}
.ccu-email{max-width:170px !important}
.ccu-scroll td.empty{text-align:center;color:var(--ink-3);font-style:italic;padding:18px}
.ccu-tr{font:11.5px var(--mono);font-weight:600}
.ccu-tr.up{color:var(--red)} /* more compute is more cost, so up is the bad direction */
.ccu-tr.down{color:var(--green)}
.ccu-tr.flat{color:var(--ink-3)}
.ccu-new{font:10px var(--mono);text-transform:uppercase;letter-spacing:.06em;
background:var(--yellow-bg);color:var(--yellow);border:1px solid var(--yellow);padding:2px 5px;border-radius:3px}
@media print{
#ccu-refresh,#ccu-print{display:none !important}
.ccu-grid{grid-template-columns:1fr;gap:10px}
.ccu-scroll{max-height:none !important;overflow:visible !important}
.ccu-col{break-inside:avoid}
}
/* Condition over policy, so the alerts table keeps the same four columns as its
neighbours and the trend stays visible without a sideways scroll. */
.ccu-cond{white-space:normal !important;line-height:1.3}
.ccu-cond-n{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccu-cond-p{display:block;font-size:10.5px;color:var(--ink-3);overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
/* The GB / $ switch reuses the segmented look of the theme control. */
.unitset .btn{min-width:38px;justify-content:center;font-weight:600}
.unitset .btn:disabled{opacity:.45;cursor:not-allowed}
.unitset .btn:disabled.on{background:none;color:var(--ink-2)}
@media print{ .unitset{display:none !important} }
/* ---------- Chargeback ---------- */
.cb-bar{display:flex;align-items:center;gap:10px;padding:10px 18px;font-size:12.5px;
background:var(--yellow-bg);border-bottom:1px solid var(--yellow);color:var(--ink)}
.cb-bar .hint{display:inline;margin:0}
#tbl-chargeback td,#tbl-chargeback th{padding:6px 9px;font-size:12.5px;vertical-align:top}
#tbl-chargeback td:not(.cb-cell){max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-notes{max-width:340px !important;color:var(--ink-2)}
.cb-accountId{font-family:var(--mono)}
.cb-gbl{font-family:var(--mono)}
.cb-opt{font:9.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:400}
.cb-flags{white-space:normal;min-width:130px;max-width:170px;line-height:1.9}
.cb-flags .chip{font-size:9.5px;padding:2px 5px;display:inline-block;white-space:nowrap}
.cb-cell{padding:3px 4px !important}
.cb-cell input{width:100%;min-width:110px;font:12px var(--sans);padding:5px 7px;
border:1px solid var(--rule);border-radius:4px;background:var(--surface);color:var(--ink)}
/* A required field left blank is shown as you type, not only on save. */
.cb-cell input.bad{border-color:var(--red);background:var(--red-bg)}
#tbl-chargeback td.empty{text-align:center;color:var(--ink-3);font-style:italic;padding:18px}
#cb-new .field{display:block;margin-bottom:11px}
#cb-new .field>span{display:block;font-size:12px;font-weight:600;margin-bottom:4px}
#cb-new .field input{width:100%}
@media print{ .cb-bar,#cb-filter,.onlyalerts{display:none !important} }
/* ---------- Chargeback: ten rows, then scroll ---------- */
/* Ten data rows plus the sticky header. Expand lifts the cap. */
.tablewrap.cb-ten{max-height:calc(10 * 31px + 38px);overflow:auto}
.panel.expanded .tablewrap.cb-ten{max-height:none}
/* ---------- Create invoice ---------- */
.inv-form{display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px;padding:16px 18px 18px}
@media (max-width:1100px){ .inv-form{grid-template-columns:1fr} }
.inv-controls .field{display:block;margin-bottom:14px}
.inv-controls .field > span{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px}
.inv-controls .field > span em{font-weight:400;font-style:normal;color:var(--ink-3)}
.inv-controls input,.inv-controls select{width:100%}
.inv-accounts{border:1px solid var(--rule);border-radius:6px;max-height:260px;overflow:auto;
background:var(--surface-2);margin-top:7px}
.inv-acct{display:grid;grid-template-columns:auto 1fr auto;gap:3px 9px;align-items:center;
padding:7px 10px;border-bottom:1px solid var(--rule);cursor:pointer;font-size:12.5px}
.inv-acct:last-child{border-bottom:0}
.inv-acct:hover{background:var(--surface)}
.inv-acct.on{background:var(--accent);color:var(--accent-ink)}
.inv-acct.on .inv-acct-m,.inv-acct.on .inv-acct-gb{color:inherit;opacity:.85}
.inv-acct input{width:auto;margin:0;grid-row:span 2}
.inv-acct-n{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-acct-gb{font:11px var(--mono);color:var(--ink-3);grid-row:span 2;white-space:nowrap}
.inv-acct-m{grid-column:2;font-size:10.5px;color:var(--ink-3);overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.inv-warn{color:var(--yellow)}
.inv-preview{border:1px solid var(--rule);border-radius:8px;padding:18px 20px;background:var(--surface);
min-height:180px;overflow:auto}
/* The invoice header owns its styling rather than borrowing the workstream
report's classes, which are defined only inside the print block and so left
this unstyled and misaligned on screen. */
.inv-head{padding-bottom:14px;border-bottom:1px solid var(--rule)}
/* The header text lines up with the "Accounts" label in the totals box below,
which sits one box-padding in from the invoice's content edge. Both read that
inset from the same place so they cannot drift apart. */
.invoice{--inv-inset:16px;--inv-border:1px}
/* The header has no border of its own, so it has to add the totals box's border
width to land on the same pixel as the text inside it. */
.inv-head{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
text-align:left;min-height:92px;padding-left:calc(var(--inv-inset) + var(--inv-border))}
.inv-kicker{font:10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-3);margin-bottom:8px}
.invoice h1{margin:0 0 6px;font-size:21px;line-height:1.2;letter-spacing:-.3px}
.inv-untitled{color:var(--ink-3);font-weight:400;font-style:italic}
.inv-sub{font-size:12px;color:var(--ink-3)}
/* Each table scrolls on its own. Letting the whole invoice scroll dragged the
header off the left edge whenever a wide table was read. */
.inv-preview{overflow:visible}
.inv-tw{overflow-x:auto;max-width:100%}
.inv-tw table.grid{min-width:100%}
.invoice h3{margin:20px 0 8px;font-size:13px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;
color:var(--ink-2)}
.inv-flag{font-size:12px;background:var(--yellow-bg);border:1px solid var(--yellow);color:var(--ink);
border-radius:6px;padding:8px 11px;margin:12px 0 0}
.inv-total{display:flex;gap:28px;flex-wrap:wrap;margin:16px 0 4px;padding:13px var(--inv-inset);
background:var(--surface-2);border:var(--inv-border) solid var(--rule);border-radius:8px}
.inv-total div{display:flex;flex-direction:column;gap:2px}
.inv-total span{font-size:11px;color:var(--ink-3)}
.inv-total b{font:600 17px/1 var(--mono)}
.inv-total .inv-amt{color:var(--accent)}
.inv-actions{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:14px;
border-top:1px solid var(--rule)}
#tbl-invoices td.empty{text-align:center;color:var(--ink-3);font-style:italic;padding:18px}
/* Printing an invoice prints the invoice, not the page it happens to sit on. */
/* Printing an invoice prints the invoice alone: no other panel, none of the
controls that made it, and none of the app chrome around it. What is left is
the document itself, sitting on the page margins rather than inside a box. */
body.printing-invoice .view > .panel{display:none !important}
body.printing-invoice #view-chargeback > .panel:nth-child(2){
border:0 !important;background:none !important;box-shadow:none !important;
padding:0 !important;margin:0 !important;
}
/* The panel head is the app talking about the invoice, not part of the bill.
The top bar goes too: its mark and wordmark are the last of the NRAMP
branding on the page, and a bill carries the biller's identity, not the
tool's. */
body.printing-invoice .panel-head,
body.printing-invoice .topbar,
body.printing-invoice #banner{display:none !important}
body.printing-invoice #inv-preview{border:0;padding:0;overflow:visible}
body.printing-invoice .inv-form{display:block;padding:0;gap:0}
body.printing-invoice .inv-controls,body.printing-invoice .inv-actions{display:none !important}
/* The header keeps its inset so it still lines up with the totals box, which
keeps its own. Zeroing the page padding is what made the text hug the edge. */
body.printing-invoice .invoice{padding:0}
@media print{
body.printing-invoice #view-chargeback > .panel:nth-child(2){display:block !important}
/* Room around the bill, independent of whatever margins the printer applies. */
@page{margin:16mm}
/* A bill goes out on the recipient's terms, not the tool's, so the invoice
header carries no mark at all. */
.inv-kicker{color:#666}
.invoice h1{font-size:19pt}
.inv-tw{overflow:visible !important}
.invoice table.grid{width:100%;font-size:9pt}
.inv-total{break-inside:avoid}
}
/* ---------- ingest against budget, in the Accounts header ---------- */
.hdr-stats{display:flex;align-items:center;gap:8px;margin-left:14px}
/* Sized to the buttons alongside them, so the row reads as one band. */
/* One width for all three, so the row reads as a set rather than as three
differently sized labels. */
.hdr-box{display:flex;flex-direction:column;justify-content:center;gap:1px;
padding:3px 11px;border:1px solid var(--rule);border-radius:6px;background:var(--surface-2);
height:32px;width:104px;white-space:nowrap;overflow:hidden}
.hdr-box small{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);line-height:1}
.hdr-box b{font:600 13px/1 var(--mono)}
.hdr-box b .unit{font-size:10px;color:var(--ink-3);margin-left:1px}
/* Over budget is the state worth noticing, so it is the one that is tinted. */
.hdr-box.over{border-color:var(--red);background:var(--red-bg)}
.hdr-box.over b{color:var(--red)}
.hdr-box.under{border-color:var(--green);background:var(--green-bg)}
.hdr-box.under b{color:var(--green)}
/* The glyph is scaled to stand as tall as the boxes beside it, rather than
sitting as a small mark against them. */
.hdr-trend{display:flex;align-items:center;justify-content:center;min-width:30px;height:32px;
font-size:26px;font-weight:700;line-height:1}
.hdr-trend.up{color:var(--red)}
.hdr-trend.down{color:var(--green)}
.hdr-trend.flat,.hdr-trend.none{color:var(--ink-3);font-size:22px}
@media (max-width:1100px){ .hdr-stats{display:none} }
@media print{ .hdr-stats{display:none !important} }
/* ---------- edit a workstream in place ---------- */
/* The affordance is deliberately quiet: a hover tint rather than a permanent
border, so the header still reads as a header and not as a form. */
.ws-edit{cursor:pointer;border-radius:6px;transition:background .12s}
.ws-edit:hover{background:var(--surface-2);outline:1px solid var(--rule)}
#ws-pri-slot{display:inline-flex;align-items:center;padding:2px 4px;margin:-2px -4px}
.ws-desc{display:block;margin:8px 0 14px;padding:6px 8px;margin-left:-8px;margin-right:-8px}
.ws-desc p{margin:0}
.ws-inline-pri{width:auto;font-size:12.5px;padding:4px 8px}
.ws-inline-desc{width:100%;font:13px/1.5 var(--sans);padding:9px 11px;border:1px solid var(--accent);
border-radius:6px;background:var(--surface);color:var(--ink);resize:vertical}
.ws-desc:has(textarea){background:none;outline:0;cursor:default}
@media print{ .ws-edit:hover{background:none;outline:0} }
/* ---------- email template ---------- */
#dlg-mail .mail-to{font-size:13px;padding:9px 12px;background:var(--surface-2);
border:1px solid var(--rule);border-radius:6px;margin-bottom:10px}
#dlg-mail #mail-note{margin:0 0 10px;color:var(--yellow)}
/* Monospace so the indented blocks in the template line up as written. */
#dlg-mail textarea{width:100%;font:12px/1.55 var(--mono);padding:12px 14px;
border:1px solid var(--rule);border-radius:6px;background:var(--surface);color:var(--ink);resize:vertical}
/* ---------- flat action icons ----------
Drawn rather than typed. U+1F5A8 and U+2709 sit in the emoji block and render
in the platform's own colors, which put a full-color printer next to the
monochrome glyph set on the launcher. These inherit the button's text color
like every other icon in the app. */
.ico-svg{
width:14px;height:14px;flex:none;
fill:none;stroke:currentColor;stroke-width:1.4;
stroke-linecap:round;stroke-linejoin:round;
vertical-align:-2px;
}
.btn .ico-svg + *{margin-left:2px}
/* Icon-only buttons in a table row want the glyph a touch larger. */
.tk-mail .ico-svg,.tk-print .ico-svg{width:15px;height:15px;vertical-align:-3px}
|