/* =====================================================================
   Niterra MPS - modern skin (Oct-26).
   A finish layer over styles.css and mps.css: softer surfaces, 32px controls with
   clear states, quieter tables, a calmer sidebar. Colours come from the tokens, so
   the dark theme keeps working; the few new tokens are given dark values below.
   ===================================================================== */

:root{
  --c-bg:#F3F5F9;
  --c-line:#E2E7EF;
  --c-line-2:#EDF0F5;
  --c-field:#D5DCE6;            /* control borders */
  --c-th:#F7F9FC;               /* table heads */
  --c-ring:rgba(0,109,106,.22); /* focus ring */
  --c-primary-top:#0C847F;      /* primary button gradient */
  --c-primary-bot:#006D6A;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --shadow-md:0 4px 12px rgba(16,24,40,.08);
  --sb-bg:#0F1B2D;
  --sb-bg-2:rgba(255,255,255,.06);
  --sb-active:rgba(63,191,182,.16);
  --sb-text:#B4BFD3;
  --sb-mute:#6F7D98;
}
:root[data-theme="dark"]{
  --c-field:#2F3A50;
  --c-th:#1A2132;
  --c-ring:rgba(63,191,182,.3);
  --c-primary-top:#2FA9A1;
  --c-primary-bot:#1F8A84;
  --shadow-xs:none;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 12px rgba(0,0,0,.35);
  --sb-bg:#0A0F1B;
}

body{font-family:"Inter",system-ui,sans-serif;font-size:13.5px;-webkit-font-smoothing:antialiased}

/* ---------- sidebar ---------- */
.side{border-right:0}
.side .logo-wrap{border-bottom:1px solid rgba(255,255,255,.06)}
.side .mod-head{border-bottom:1px solid rgba(255,255,255,.06)}
.side .mod-head b{letter-spacing:.06em;font-size:12px}
.side .sub-grp{color:var(--sb-mute);font-size:10px;font-weight:700;letter-spacing:.12em}
.side a.sub-link{border-radius:7px;color:var(--sb-text);font-weight:500;transition:background .12s,color .12s}
.side a.sub-link .dot{opacity:.6}
.side a.sub-link:hover{background:var(--sb-bg-2);color:#fff}
.side a.sub-link.active{background:var(--sb-active);color:#fff;font-weight:600}
.side a.sub-link.active .dot{background:var(--c-tittle);opacity:1}
.side a.sub-link.active::before{width:3px;border-radius:3px;background:linear-gradient(180deg,#3FBFB6,var(--c-tittle))}
.side .sb-foot{border-top:1px solid rgba(255,255,255,.06)}

/* ---------- top bar ---------- */
.topbar{border-bottom:1px solid var(--c-line);box-shadow:var(--shadow-xs)}
.hamburger,.icon-btn,.help-link{border-radius:8px;border:1px solid var(--c-field);box-shadow:var(--shadow-xs);transition:background .12s}
.hamburger:hover,.icon-btn:hover,.help-link:hover{background:var(--c-hover)}
.crumbs b{color:var(--c-ink);font-weight:600}

/* ---------- page head ---------- */
.page-head h1{font-size:20px;font-weight:700;letter-spacing:-.02em}

/* ---------- buttons ---------- */
.btn{height:32px;padding:0 14px;border-radius:8px;border:1px solid var(--c-field);background:var(--c-panel);
  color:var(--c-ink);font-weight:600;font-size:13px;line-height:1;box-shadow:var(--shadow-xs);
  justify-content:center;white-space:nowrap;transition:background .12s,border-color .12s,box-shadow .12s,transform .06s}
.btn:hover{background:var(--c-hover);border-color:var(--c-field)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--c-ring)}
.btn.primary{background:linear-gradient(180deg,var(--c-primary-top),var(--c-primary-bot));border-color:var(--c-primary-bot);
  color:#fff;box-shadow:0 1px 2px rgba(0,77,74,.25),inset 0 1px 0 rgba(255,255,255,.14)}
.btn.primary:hover{background:linear-gradient(180deg,var(--c-primary-bot),var(--c-primary-bot));filter:brightness(.97)}
.btn.accent{background:var(--c-tittle);border-color:var(--c-tittle-d);color:#2E2100;
  box-shadow:0 1px 2px rgba(120,90,0,.2),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.accent:hover{background:var(--c-tittle-d)}
.btn.danger{background:var(--c-panel);border-color:#F1C4CC;color:var(--bad)}
.btn.danger:hover{background:var(--bad-bg);border-color:var(--bad)}
.btn.ghost{box-shadow:none;border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--c-chip)}
.btn.sm{height:28px;padding:0 10px;font-size:12.5px;border-radius:7px}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* icon actions in table rows */
.act-row{gap:2px}
.act{width:28px;height:28px;border-radius:7px;border:1px solid transparent;transition:background .12s,color .12s}
.act:hover{background:var(--c-hover);border-color:var(--c-line)}
.act.act-del:hover{background:var(--bad-bg);color:var(--bad);border-color:transparent}

/* ---------- inputs ---------- */
.filters input,.filters select,.field input,.field select,.field textarea,
.report-bar .rb-field select,.report-bar .rb-field input,.bulk-bar .bulk-comment,.po-in{
  height:32px;border:1px solid var(--c-field);border-radius:8px;background:var(--c-panel);color:var(--c-ink);
  font-size:13px;box-shadow:var(--shadow-xs);transition:border-color .12s,box-shadow .12s}
.field textarea{height:auto}
.filters input:focus,.filters select:focus,.field input:focus,.field select:focus,.field textarea:focus,
.bulk-bar .bulk-comment:focus,.po-in:focus{border-color:var(--c-brand);box-shadow:0 0 0 3px var(--c-ring);outline:none}
.filters select,.field select{padding-right:28px}
input[type=checkbox],input[type=radio]{accent-color:var(--c-brand)}
.filters label,.field label{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;color:var(--c-ink-2)}

/* ---------- panels ---------- */
.filters{border:1px solid var(--c-line);border-radius:12px;box-shadow:var(--shadow-sm)}
.data-panel,.form-card{border:1px solid var(--c-line);border-radius:12px;box-shadow:var(--shadow-sm)}
.data-panel .panel-head{border-bottom:1px solid var(--c-line)}
.data-panel .panel-head h2,.form-card h2{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.data-panel .panel-head .count{background:var(--c-chip);color:var(--c-ink-2);border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:600}

/* ---------- tables ---------- */
th{background:var(--c-th);color:var(--c-mute);font-size:11px;font-weight:600;text-transform:none;letter-spacing:.01em;
  border-bottom:1px solid var(--c-line)}
td{border-bottom:1px solid var(--c-line-2)}
tbody tr{transition:background .1s}
tbody tr:hover td{background:var(--c-row-hover)}
tbody tr:last-child td{border-bottom:0}
code{font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;font-size:12px}

/* ---------- badges, flashes, chips ---------- */
.badge{border-radius:6px;font-weight:600;font-size:11px;letter-spacing:.01em}
.badge::before{font-size:6px;vertical-align:1px}
.b-mute{background:var(--c-chip);color:var(--c-ink-2)}
.flash{border-radius:10px;border:1px solid transparent;box-shadow:var(--shadow-xs)}
.flash-ok{border-color:rgba(30,158,106,.25)}
.flash-bad{border-color:rgba(220,42,66,.25)}
.chip{border-radius:999px}
.bulk-bar{background:var(--c-surface-2)}

/* list tables: a light head instead of the solid teal band */
.tbl-wrap table thead th{background:var(--c-th);color:var(--c-mute);border-bottom:1px solid var(--c-line);
  position:sticky;top:0;z-index:1}
.tbl-wrap table thead th .sort-link{color:var(--c-mute)}
.tbl-wrap table thead th .sort-link:hover,.tbl-wrap table thead th .sort-link.is-sorted{color:var(--c-brand)}
.tbl-wrap{scrollbar-width:thin}

/* ---------- logo ----------
   The logo is a link inside the sidebar, so the menu-link rules (upper case, padding,
   hover fill) caught it: "Niterra" came out as NITERRA with the tittle off its i. */
.side .logo-wrap a.niterra-logo{display:inline-flex;align-items:center;padding:0;margin:0;background:none;
  text-transform:none;letter-spacing:0;border-radius:0;font-weight:inherit}
.side .logo-wrap a.niterra-logo:hover{background:none}
.side .logo-wrap a.niterra-logo::before{display:none}
.side .logo-wrap .niterra-logo svg{display:block;height:26px;width:auto;overflow:visible}
.side .logo-wrap .niterra-logo svg text{fill:#fff;text-transform:none;letter-spacing:-2.5px}
.side .logo-wrap .niterra-logo svg circle{fill:var(--c-tittle)}
.side .logo-wrap small{color:var(--sb-mute);opacity:1;letter-spacing:.1em}

/* dark: the same quiet table head (mps.css restates a teal band for dark) */
:root[data-theme="dark"] .tbl-wrap table thead th{background:var(--c-th);color:var(--c-mute)}

/* ---------- quantity grids (meetings, budget) ----------
   Number boxes wide enough for a seven-digit quantity, figures aligned. In the enlarged
   view the grid scrolls sideways rather than squeezing every column into the window,
   which cut the figures ("75...") and the codes ("CPRCL-1..."). */
.cell-qty{width:92px;height:28px;padding:0 7px;border:1px solid var(--c-field);border-radius:6px;
  background:var(--c-panel);color:var(--c-ink);font-size:12.5px;font-variant-numeric:tabular-nums;text-align:right}
.cell-qty:focus{border-color:var(--c-brand);box-shadow:0 0 0 3px var(--c-ring);outline:none}
.mps-modal.wide .body{overflow-x:auto}
.zoomed table{table-layout:auto;width:max-content;min-width:100%;font-size:12.5px}
.zoomed th,.zoomed td{padding:5px 6px;overflow:visible;text-overflow:clip;white-space:nowrap}
.zoomed th:first-child,.zoomed td:first-child{width:auto;min-width:96px;white-space:normal}
.zoomed th:nth-child(2),.zoomed td:nth-child(2){width:auto;min-width:170px;max-width:220px;white-space:normal}
.zoomed td .cell-qty{width:92px;min-width:92px;padding:0 7px;font-size:12.5px}
.zoomed td code{white-space:nowrap}

/* text columns of a quantity grid: one line, cut with an ellipsis, the full text on hover -
   a long part description no longer makes the row several lines tall */
td.txt-cell,.zoomed td.txt-cell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;min-width:0}
.zoomed th:first-child,.zoomed td:first-child,.zoomed th:nth-child(2),.zoomed td:nth-child(2){white-space:nowrap}
.zoomed td.txt-cell{max-width:200px}

/* ---------- bell: the user's tasks ---------- */
.bell-wrap{position:relative}
.bell-btn{position:relative}
.bell-n{position:absolute;top:-5px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:var(--bad);color:#fff;font-size:10px;font-weight:700;line-height:17px;text-align:center;
  box-shadow:0 0 0 2px var(--c-panel)}
.bell-menu{display:none;position:absolute;right:0;top:40px;width:340px;background:var(--c-panel);
  border:1px solid var(--c-line);border-radius:12px;box-shadow:var(--shadow-md);z-index:60;overflow:hidden}
.bell-menu.open{display:block}
.bm-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--c-line);font-size:13px}
.bm-head a{color:var(--c-brand);font-weight:600;text-decoration:none;font-size:12.5px}
.bm-list{max-height:360px;overflow:auto}
.bm-item{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:9px 12px;border-bottom:1px solid var(--c-line-2);
  text-decoration:none;color:var(--c-ink)}
.bm-item:hover{background:var(--c-hover)}
.bm-kind{grid-column:1/2;font-size:11px;font-weight:600;color:var(--info)}
.bm-kind.back{color:var(--bad)}
.bm-title{grid-column:1/2;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-age{grid-column:2/3;grid-row:1/3;align-self:center;font-size:11.5px;color:var(--c-mute)}
.bm-empty{padding:16px 12px;color:var(--c-mute);font-size:12.5px;text-align:center}

/* My Tasks in the left menu, with the count of what waits for the user */
.side a.sub-link.task-link{margin-bottom:6px}
.side a.sub-link .nav-count{margin-left:auto;min-width:20px;height:18px;padding:0 6px;border-radius:999px;
  background:var(--bad);color:#fff;font-size:10.5px;font-weight:700;line-height:18px;text-align:center}
.app.collapsed .side a.sub-link .nav-count{position:absolute;top:2px;right:6px;margin:0}

/* tab chips on a page (My Tasks, Purchase Orders): a row of pills inside the page width */
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.chip-row a.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--c-field);
  border-radius:999px;background:var(--c-panel);color:var(--c-ink-2);font-size:12.5px;font-weight:600;text-decoration:none;
  box-shadow:var(--shadow-xs)}
.chip-row a.chip:hover{background:var(--c-hover)}
.chip-row a.chip.on{background:var(--c-brand-l);border-color:var(--c-brand);color:var(--c-brand)}
.chip-row a.chip b{font-weight:700}
.task-table td{vertical-align:middle}

/* ---------- typeface (Oct-26): Source Sans 3 throughout ----------
   Light and open, so data reads lighter and more fits on a line; a softer ink than
   near-black; figures aligned digit under digit; codes in the same face, not a typewriter one. */
:root{--font:"Source Sans 3","Segoe UI",system-ui,sans-serif;--c-ink:#243044;--c-ink-2:#465063}
:root[data-theme="dark"]{--c-ink:#DFE5EF;--c-ink-2:#B9C2D4}
html,body,button,input,select,textarea{font-family:var(--font)}
body{font-size:14.5px;letter-spacing:0}
h1,h2,h3,h4,.page-head h1,.form-card h2,.data-panel .panel-head h2,.panel-head h3,.report-head h1,
.side .mod-head b,.mps-modal .box header h3{font-family:var(--font)}
th,td{font-size:13.5px}
th{font-size:12px;font-weight:600}
td,.cell-qty,.num{font-variant-numeric:tabular-nums}
code{font-family:var(--font);font-size:13.5px;color:var(--c-ink-2);background:none;padding:0}
.btn{font-size:13.5px}
.btn.sm{font-size:13px}
.badge{font-size:11.5px}
.side a.sub-link{font-size:14px}

/* list headers: a soft brand tint with dark-teal labels - colour without the heavy band */
:root{--c-th:#E3F1EF;--c-th-ink:#0B4F4B;--c-th-line:#C9E3DF}
:root[data-theme="dark"]{--c-th:#123331;--c-th-ink:#8FE3D8;--c-th-line:#1E4744}
.tbl-wrap table thead th,:root[data-theme="dark"] .tbl-wrap table thead th{background:var(--c-th);color:var(--c-th-ink);
  border-bottom:1px solid var(--c-th-line)}
.tbl-wrap table thead th .sort-link{color:var(--c-th-ink)}
.tbl-wrap table thead th .sort-link:hover,.tbl-wrap table thead th .sort-link.is-sorted{color:var(--c-brand)}

/* the file picker keeps its own height - the 32px control height clipped its Choose File button */
.field input[type=file],.mps-modal .box input[type=file]{height:auto;min-height:40px;padding:8px 10px;line-height:1.4}
.field input[type=file]::file-selector-button{height:28px;padding:0 12px;margin-right:10px;border:1px solid var(--c-field);
  border-radius:7px;background:var(--c-panel);color:var(--c-ink);font:600 13px var(--font);cursor:pointer}
.field input[type=file]::file-selector-button:hover{background:var(--c-hover)}

/* checkboxes keep checkbox size - the 32px input height and field box were meant for text inputs */
.report-bar .rb-field input[type=checkbox],.filters input[type=checkbox],.field input[type=checkbox],
.bulk-bar input[type=checkbox]{width:16px;height:16px;min-width:0;padding:0;margin:0;border:0;box-shadow:none;
  background:none;flex:none;accent-color:var(--c-brand);cursor:pointer}
.report-bar .rb-field.rb-check{gap:8px;cursor:pointer}

/* ---------- shipping schedule report ---------- */
.ss-wrap{overflow-x:auto;max-height:none}
.ss-table th.ss-first,.ss-table td.ss-first{position:sticky;left:0;z-index:2;background:var(--c-panel);min-width:170px}
.ss-table thead th.ss-first{background:var(--c-th);z-index:3}
.ss-table tr.grand td{font-weight:700;background:var(--c-surface-2)}
.ss-table tr.grand td.ss-first{background:var(--c-surface-2)}
.sd-table td.txt-cell{max-width:240px}

/* rows that open their record */
tr[data-href]{cursor:pointer}
tbody tr[data-href]:hover td{background:var(--c-brand-l)}

/* report tables take the width their columns need, not the whole panel - no gaps between
   columns; long text wraps inside its column instead of widening it */
.sd-table{width:auto;min-width:0}
.sd-table th,.sd-table td{padding:6px 10px}
.sd-table td.wrap-cell{white-space:normal;min-width:120px;max-width:180px;line-height:1.3}
.sd-table td.wrap-cell.wide{max-width:260px}
.sd-table td.num,.sd-table th.num{min-width:72px}
.sd-table tr.group-total td{font-weight:700;background:var(--c-brand-l);color:var(--c-th-ink);border-bottom:2px solid var(--c-th-line)}

/* Left menu: every entry carries its icon; a collapsed menu shows the icons alone. */
.side a.sub-link svg{width:16px;height:16px;flex:none;opacity:.72;transition:opacity .12s,color .12s}
.side a.sub-link:hover svg{opacity:1}
.side a.sub-link.active svg{opacity:1;color:var(--c-tittle)}
.side a.sub-link .label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side a.sub-link.nested{padding-left:20px}
.app.collapsed .side a.sub-link{justify-content:center;padding-left:0;padding-right:0}
.app.collapsed .side a.sub-link .label{display:none}
.app.collapsed .side a.sub-link svg{width:18px;height:18px}

/* Sales forecast report: the views under each meeting, and the change against the meeting before. */
.view-tabs.sub-tabs{border-bottom-width:1px;margin-top:-8px}
.view-tabs.sub-tabs a{padding:7px 14px;font-weight:600;font-size:13px}
.sd-table td.chg-up{color:#137a4b}
.sd-table td.chg-down{color:#b42318}
.sd-table td.chg-flag{background:#fff1d6;font-weight:700}
.chg-missing{color:#b42318;font-weight:700}
.sd-table tr.chg-row-missing td:first-child{box-shadow:inset 3px 0 0 #e8590c}
:root[data-theme="dark"] .sd-table td.chg-up{color:#5fd39a}
:root[data-theme="dark"] .sd-table td.chg-down,:root[data-theme="dark"] .chg-missing{color:#ff8a80}
:root[data-theme="dark"] .sd-table td.chg-flag{background:#4a3a14}

/* the version a page is showing, in its list of versions */
tr.row-current td{background:var(--c-brand-l)}

/* a panel heading's count and its button, kept together on the right */
.panel-head .head-right{margin-left:auto;display:inline-flex;align-items:center;gap:8px}

/* A popup whose heading sits inside its form is laid out as one whose heading does not. */
.mps-modal .box > form > header{padding:18px 22px;border-bottom:1px solid var(--c-line)}
.mps-modal .box > form > header h3{margin:0;font-family:var(--font);font-size:16px;font-weight:700}
.mps-modal .box > form > header p{margin:5px 0 0;color:var(--c-mute);font-size:12.5px}
/* a popup with a field or two needs no more width than this */
.mps-modal .box.box-sm{max-width:min(480px,94vw)}
/* what a new run reads, under its month */
.run-hint{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:14px 0 0;padding:12px 14px;
  background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:8px;font-size:12.5px}
.run-hint dt{color:var(--c-mute);font-weight:600}
.run-hint dd{margin:0}
.mps-modal .box.box-md{max-width:min(680px,94vw)}
.mps-modal .box.box-md .body{max-height:68vh;overflow:auto}
/* the data a new run would read, section by section */
.rp-intro{margin:10px 0 4px;color:var(--c-mute);font-size:12.5px}
.rp-sec{margin-top:12px;border:1px solid var(--c-line);border-radius:8px;overflow:hidden}
.rp-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--c-surface-2);font-size:13px}
.rp-table{width:100%;border-collapse:collapse;font-size:12.5px}
.rp-table th{width:34%;text-align:left;font-weight:600;color:var(--c-mute);padding:6px 12px;vertical-align:top;background:none;text-transform:none;letter-spacing:0}
.rp-table td{padding:6px 12px;border-top:0}
.rp-table tr + tr th,.rp-table tr + tr td{border-top:1px solid var(--c-line)}
/* every section lines up, and long values wrap rather than run off the edge */
.rp-table{table-layout:fixed}
.rp-table th{width:190px;white-space:normal}
.rp-table td{white-space:normal;overflow-wrap:anywhere;line-height:1.45}

/* a remark reads on a few wide lines, not a narrow column of single words */
.remark-cell{white-space:normal !important;min-width:320px;max-width:460px;line-height:1.4}

/* a report's headline figures, side by side above its table */
.cs-cards{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.cs-card{flex:1 1 130px;background:var(--c-panel);border:1px solid var(--c-line);border-radius:10px;padding:10px 14px;display:flex;flex-direction:column;gap:2px}
.cs-card span{font-size:12px;color:var(--c-mute)}
.cs-card b{font-size:18px}
.cs-card small{font-size:11.5px;color:var(--c-mute)}
.cs-card.gap b{color:#b42318}

/* Left menu groups: the heading opens and closes its entries */
.side .nav-grp > .sub-grp{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;
  cursor:pointer;text-align:left;font:inherit;color:var(--sb-mute);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.side .nav-grp > .sub-grp:hover{color:#fff}
.side .grp-chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .15s;flex:none}
.side .nav-grp.closed .grp-chev{transform:rotate(-90deg)}
.side .nav-grp.closed .grp-items{display:none}
.side .nav-tools{display:flex;gap:6px;padding:2px 10px 4px 12px}
.side .nav-tools button{background:none;border:0;padding:2px 0;color:var(--sb-mute);font:inherit;font-size:11px;cursor:pointer}
.side .nav-tools button + button::before{content:"\00b7";margin-right:6px}
.side .nav-tools button:hover{color:#fff;text-decoration:underline}
/* a collapsed menu shows every entry's icon, groups or not */
.app.collapsed .side .nav-grp.closed .grp-items{display:block}
.app.collapsed .side .nav-tools{display:none}

.sold-as{font-size:11.5px;display:inline-block;max-width:260px;white-space:normal}

/* a GIMS code and its badges are read whole, never cut short */
.sd-table td.gims-cell{white-space:nowrap}

/* Order Planning sheet view: the month heading rows read on the tinted header, and stay white on the dark "now" cells */
.op-grid thead th.om{color:var(--c-th-ink);font-weight:600}
.op-grid thead th.now,.op-grid thead th.om.now{background:#1d6a64;color:#fff}
.op-grid thead th.now *{color:#fff}

/* New run popup: the data check's results */
.rp-head > b{flex:1}
.rp-head .badge{margin-left:6px}
.rp-check td:first-child{width:84px}
.rp-check th{width:200px}
.rp-check td.num{width:44px;text-align:right;font-variant-numeric:tabular-nums}
/* a button hidden by its "hidden" attribute stays hidden: .btn's display would otherwise show it */
.btn[hidden]{display:none !important}
/* the month before the run: what happened, set apart from the plan */
.op-grid th.prev,.op-grid td.prev{background:var(--c-surface-2);border-right:2px solid var(--c-line)}
.op-grid td.prev{color:var(--c-mute);text-align:right}
.op-grid td.prev input.op-in{color:var(--c-ink)}
.chip-sep{display:inline-block;width:1px;height:20px;background:var(--c-line);margin:0 6px;vertical-align:middle}