/* ==========================================================================
Alpha Northline Global — business platform interface
A restrained enterprise system: neutral surfaces, one accent per workspace,
dense but breathable tables, and no decoration that costs legibility.
========================================================================== */
:root{
/* neutrals */
--n-0:#FFFFFF; --n-25:#FBFCFD; --n-50:#F6F8FA; --n-100:#EDF1F5; --n-150:#E3E9EF;
--n-200:#D6DEE7; --n-300:#B6C2CE; --n-400:#8A98A8; --n-500:#66788C;
--n-600:#4A5A6B; --n-700:#334455; --n-800:#22303F; --n-900:#15202B;
/* accent is set per workspace inline; this is the fallback */
--accent:#00A896;
--accent-soft:color-mix(in srgb, var(--accent) 12%, white);
--accent-line:color-mix(in srgb, var(--accent) 34%, white);
--ok:#1E9E6A; --ok-soft:#EAF7F1;
--warn:#B7791F; --warn-soft:#FEF6E7;
--danger:#C93B3B; --danger-soft:#FDF0F0;
--info:#2B6CB0; --info-soft:#EDF4FC;
/* ------------------------------------------------------------ geometry
An accounting console is read, not admired. Radii came down from 10/14px
to 4/6px and the resting shadow went away entirely: a 14px radius with a
drop shadow reads as a floating card, and a screen of floating cards is
the look this interface was asked to stop having. Elevation is now spent
only where something genuinely sits ABOVE the page — a menu, a drawer,
a drag — and --shadow-2 is what spends it.
---------------------------------------------------------------------- */
--radius:4px; --radius-lg:6px;
--shadow-1:none;
--shadow-2:0 10px 28px rgba(21,32,43,.14), 0 2px 6px rgba(21,32,43,.06);
--sidebar-w:236px; --sidebar-w-collapsed:60px;
/* The one command bar, and the context line under it. Declared as tokens
because the sticky offset of a table header is measured from them. */
--cmd-h:44px; --ctx-h:30px;
/* ---------------------------------------------------------------- spacing
One scale, six steps. Every gap, pad and margin in this sheet is one of
these six values — nothing is "13px because it looked right there". A
mixed set of 9/11/14/15/18/22px is what made two pages built a month apart
read as two different products, and it is why the same card was 4px taller
on one screen than on another. Steps: 4 8 12 16 24 32.
------------------------------------------------------------------------ */
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px;
/* Surface padding, derived from the scale. Named by role rather than by
size so a density change is one edit here, not 172 edits in templates. */
--pad-head:6px var(--s-3); /* card headers, card footers */
--pad-body:var(--s-3); /* card bodies */
--gap-grid:var(--s-2); /* between cards in a grid */
--gap-stack:var(--s-2); /* between stacked blocks on a page */
--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--n-50);color:var(--n-800);
font:14px/1.55 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em;color:var(--n-900)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--n-900);color:#fff;padding:10px 16px;z-index:200}
.skip-link:focus{left:8px;top:8px}
.muted{color:var(--n-500)}
.mono{font-family:var(--mono);font-size:.86em}
/* ---------------------------------------------------------------- layout */
.app{display:flex;min-height:100vh}
.shell{flex:1;min-width:0;display:flex;flex-direction:column}
/* ---------------------------------------------------------------- sidebar */
/* THE z-index HERE IS LOAD BEARING. MEASURED 6 Oct 2026.
`position:sticky` creates a stacking context whether or not a z-index is
given. With none, the whole sidebar sat at the root's level 0, and the
flyout panels on the context controls inside it — which correctly ask for
z-index 90 — were resolved INSIDE that context and could never rise above
anything in .shell, which comes later in the document. The workspace menu
opened over a project page and the module tab row printed straight through
it; elementFromPoint at the middle of the open panel returned the tab, not
the panel. It looked like a transparency bug and was a stacking one.
100 sits above the command bar (60) and every panel the bar itself opens
(90, 95), which never overlap the sidebar horizontally, and below the
off-canvas state (120), the mobile bars (110, 130), modals (200) and a card
being dragged (300). */
.sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--n-900);
color:var(--n-200);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
z-index:100;transition:width .18s ease,flex-basis .18s ease}
.app.is-collapsed .sidebar{width:var(--sidebar-w-collapsed);flex-basis:var(--sidebar-w-collapsed)}
.app.is-collapsed .brand__text,.app.is-collapsed .nav__link span,
.app.is-collapsed .nav__heading,.app.is-collapsed .sidebar__foot .muted{display:none}
.app.is-collapsed .nav__link{justify-content:center}
.sidebar__brand{display:flex;align-items:center;gap:10px;padding:16px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
.brand__mark{width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center;
background:var(--accent);color:#fff;font-weight:800;font-size:12px;letter-spacing:.04em}
.brand__text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.brand__text strong{color:#fff;font-size:13.5px}
.brand__text small{color:var(--n-400);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.sidebar__toggle{margin-left:auto;background:none;border:0;color:var(--n-400);cursor:pointer;padding:4px;border-radius:6px}
.sidebar__toggle:hover{color:#fff;background:rgba(255,255,255,.07)}
.app.is-collapsed .sidebar__toggle svg{transform:rotate(180deg)}
/* Collapsed, the brand row is 68px wide less 28px of padding — the 34px mark
and the toggle cannot both fit on one line, so the toggle was pushed out of
the sidebar and clipped, leaving no way to expand again. Stack them. */
.app.is-collapsed .sidebar__brand{flex-direction:column;gap:8px;padding:14px 8px 12px}
.app.is-collapsed .sidebar__toggle{margin:0;width:32px;height:32px;display:grid;
place-items:center;background:rgba(255,255,255,.09);color:#fff}
.app.is-collapsed .sidebar__toggle:hover{background:rgba(255,255,255,.18)}
/* Always reachable by keyboard, collapsed or not. */
.sidebar__toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* ---------------------------------------------- the sidebar context block
Workspace, period and project scope, moved out of the command bar on
6 Oct 2026. The controls are the same markup — still .cmdctl inside
details.cmddrop, so the menu machinery in app.js needs no change — but the
command bar's version is a white chip built for a white bar, and dropped on
to the near-black sidebar it read as three paste-ups. `.sidectl` restates
the surface for this background and nothing else.
THE PANELS FLY OUT SIDEWAYS, not down. A .cmddrop__panel asks for 260px and
the sidebar is 230px: anchored under the control it would be cut off at the
edge, or it would force the sidebar wider for the one second a menu is open.
Hung off the right edge it opens over the page, which is what a menu should
do, and it works identically when the sidebar is collapsed to 68px. */
.sidectx{padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.07);
display:grid;gap:4px}
/* TWO LINES, AND THE CARET PINNED.
First attempt let the three parts wrap freely. A company name is longer than
a 212px control, so it took the second line and pushed the caret alone on to
a third: a 70px control for one dropdown. The label and the value now have a
line each by construction, and the caret is lifted out of the flow against
the right edge, so every control in this block is the same height whatever
is in it. */
.sidectx .sidectl{position:relative;display:flex;width:100%;height:auto;min-height:32px;
padding:6px 22px 6px 9px;gap:2px 7px;flex-wrap:wrap;align-items:center;max-width:none;
background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09);color:var(--n-300);
white-space:normal;text-align:left}
.sidectx .sidectl:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18);
color:#fff}
.sidectx .cmdctl__k{color:var(--n-500);flex:0 0 auto;line-height:1.3}
.sidectx .cmdctl__v{color:#fff;flex:1 1 100%;text-align:left;line-height:1.3;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Only the LAST one. The scope control opens with a list glyph that also
carries this class and belongs inline beside its label. */
.sidectx .sidectl > .cmdctl__chev:last-child{position:absolute;right:7px;top:50%;
transform:translateY(-50%);color:var(--n-500)}
.sidectx .sidectl > .cmdctl__chev:first-child{flex:0 0 auto;color:var(--n-500)}
.sidectx .cmdctl__dot{flex:0 0 7px}
.sidectx .sidedrop{display:block;width:100%}
.sidectx .sidedrop > summary{width:100%}
/* The warn state keeps its meaning but has to be legible on black: the amber
fill the bar used disappears into the sidebar at this size. */
.sidectx .sidectl.is-warn{background:rgba(231,201,143,.14);border-color:rgba(231,201,143,.35);
color:#F0D9A8}
.sidectx .sidectl.is-warn .cmdctl__v{color:#FFD88A}
.sidectx .sidectl.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.sidectx .sidectl.is-on .cmdctl__k{color:rgba(255,255,255,.6)}
.sidectx .sidectl.is-on .cmdctl__v{color:#fff}
.sidectx .sidectl:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.sidectx .cmddrop__panel{left:calc(100% + 6px);right:auto;top:0;
max-width:min(340px, calc(100vw - var(--sidebar-w) - 24px))}
/* Collapsed, there is no room for a label, so each control becomes its own
initial. The value is still on the title attribute and still one press away
in the panel, which opens at exactly the same place. */
.app.is-collapsed .sidectx{padding:8px 6px}
.app.is-collapsed .sidectx .cmdctl__k,
.app.is-collapsed .sidectx .cmdctl__v,
.app.is-collapsed .sidectx .cmdctl__chev{display:none}
.app.is-collapsed .sidectx .sidectl{justify-content:center;padding:7px 0;min-height:30px}
.app.is-collapsed .sidectx .sidectl::after{content:attr(data-short);font-size:10px;
font-weight:800;letter-spacing:.06em;color:var(--n-300)}
.app.is-collapsed .sidectx .sidectl.is-on::after{color:#fff}
.app.is-collapsed .sidectx .cmddrop__panel{
max-width:min(340px, calc(100vw - var(--sidebar-w-collapsed) - 24px))}
/* ON A PHONE THE PANEL DROPS, IT DOES NOT FLY OUT.
Below 860px the sidebar is an off-canvas drawer 300px wide on a 390px
screen, and `nav-open` lays a scrim over everything behind it. A panel hung
off the drawer's right edge there is 136px of usable width sitting on top of
that scrim: measured, elementFromPoint returned the scrim, not the panel.
Inside the drawer, under its control, full width, with its own scroll so a
long company list cannot run off the bottom of the screen. */
@media (max-width:860px){
.sidectx .cmddrop__panel{position:absolute;left:0;right:0;top:calc(100% + 4px);
max-width:none;min-width:0;max-height:52vh;overflow-y:auto}
}
.sidebar__nav{flex:1;overflow-y:auto;padding:10px 8px 20px;scrollbar-width:thin}
.sidebar__nav::-webkit-scrollbar{width:6px}
.sidebar__nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px}
.nav{list-style:none;margin:0;padding:0}
.nav__heading{color:var(--n-500);font-size:10px;font-weight:800;letter-spacing:.14em;
text-transform:uppercase;padding:16px 12px 6px}
.nav__link{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;
color:var(--n-300);font-size:13.2px;font-weight:500;white-space:nowrap;transition:background .12s,color .12s}
.nav__link:hover{background:rgba(255,255,255,.06);color:#fff}
.nav__link.is-active{background:rgba(255,255,255,.10);color:#fff;font-weight:600;
box-shadow:inset 3px 0 0 var(--accent)}
.nav__link svg{flex:0 0 17px;opacity:.85}
.nav__link .dot{width:8px;height:8px;border-radius:99px;flex:0 0 8px}
.nav--projects .nav__link{padding-left:14px;font-size:12.8px}
.sidebar__foot{padding:12px 14px;border-top:1px solid rgba(255,255,255,.07);
display:flex;align-items:center;gap:8px;font-size:11px;color:var(--n-500)}
.phase-chip{background:rgba(255,255,255,.10);color:#fff;border-radius:99px;padding:2px 9px;font-weight:700;font-size:10px}
/* ---------------------------------------------------------------- main */
.main{flex:1;padding:var(--s-4) var(--s-6) var(--s-8);max-width:1560px;width:100%}
.foot{display:flex;gap:var(--s-3);justify-content:space-between;flex-wrap:wrap;
padding:var(--s-3) var(--s-6);border-top:1px solid var(--n-150);color:var(--n-500);font-size:11.5px;background:var(--n-0)}
/* The page header. One shape everywhere: title, one line of context, actions
pushed right. It is the first thing on the page and the shortest thing on
the page — every pixel it takes is a pixel the work does not get. */
.page-head{display:flex;align-items:flex-start;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-3)}
.page-head h1{font-size:20px;line-height:1.25}
.page-head p{margin:2px 0 0;color:var(--n-500);font-size:12.5px;line-height:1.5;max-width:80ch}
.page-head__actions{margin-left:auto;display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center}
/* ---------------------------------------------------------------- cards */
.card{background:var(--n-0);border:1px solid var(--n-150);border-radius:var(--radius-lg);box-shadow:var(--shadow-1)}
.card__head{display:flex;align-items:center;gap:var(--s-3);padding:var(--pad-head);border-bottom:1px solid var(--n-100);min-height:46px}
.card__head h2{font-size:14px}
.card__head .muted{font-size:12px}
.card__body{padding:var(--pad-body)}
.card__foot{padding:var(--s-2) var(--s-4);border-top:1px solid var(--n-100);background:var(--n-25);
border-radius:0 0 var(--radius-lg) var(--radius-lg)}
/* A card that holds nothing but a table has no business adding its own padding
around it — the table already has cell padding of its own. */
.card__body--flush{padding:0}
.grid{display:grid;gap:var(--gap-grid)}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
/* stat tiles */
.stat{background:var(--n-0);border:1px solid var(--n-150);border-radius:var(--radius-lg);padding:var(--s-3) var(--s-4);box-shadow:var(--shadow-1)}
.stat__label{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--n-400)}
.stat__value{font-size:23px;line-height:1.15;font-weight:700;letter-spacing:-.02em;margin:var(--s-1) 0 1px;color:var(--n-900)}
.stat__sub{font-size:11.5px;color:var(--n-500);line-height:1.45}
.stat--pending .stat__value{color:var(--n-300);font-size:17px;font-weight:600}
/* ---------------------------------------------------------------- tables */
.table-wrap{overflow-x:auto;border:1px solid var(--n-150);border-radius:var(--radius-lg);background:var(--n-0)}
/* --------------------------------------------------------------- data tables
Row geometry is declared once, as four custom properties, and every variant
changes those four numbers rather than re-stating padding. `height` on a
table row is a MINIMUM, not a cap, so a two-line cell still grows — this
pins the floor so a table of one-line rows is the same height on every
screen in the application instead of drifting with whatever font-size the
page happened to set.
Standard header 40px row 46px
Compact header 32px row 36px (tables inside a card, dense registers)
------------------------------------------------------------------------- */
table.data{--th-h:40px; --row-h:46px; --cell-x:var(--s-3); --cell-y:var(--s-2);
width:100%;border-collapse:collapse;font-size:13px}
table.data th{background:var(--n-50);text-align:left;font-size:10px;letter-spacing:.11em;
text-transform:uppercase;color:var(--n-500);font-weight:800;white-space:nowrap;
height:var(--th-h);padding:0 var(--cell-x);border-bottom:1px solid var(--n-150)}
table.data tbody tr{height:var(--row-h)}
table.data td{padding:var(--cell-y) var(--cell-x);border-top:1px solid var(--n-100);vertical-align:middle}
/* Cells that stack a heading over sub-text read wrong when centred against a
neighbour that is one line — those opt back in. */
table.data td.top,table.data tr.top td{vertical-align:top}
table.data tbody tr:hover{background:var(--n-25)}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono)}
.empty{padding:var(--s-6) var(--s-4);text-align:center;color:var(--n-500)}
.empty strong{display:block;color:var(--n-700);font-size:14px;margin-bottom:var(--s-1)}
.empty span{display:block;max-width:64ch;margin:0 auto;font-size:12.5px;line-height:1.5}
/* An empty state inside a table cell must not inherit the row's minimum. */
table.data td.empty{height:auto}
/* ---------------------------------------------------------------- forms */
.field{margin-bottom:var(--s-3)}
.field > label{display:block;font-size:11px;font-weight:800;letter-spacing:.09em;
text-transform:uppercase;color:var(--n-500);margin-bottom:var(--s-1)}
.field .hint{font-size:11.5px;color:var(--n-500);margin-top:var(--s-1);line-height:1.45}
/*
| Matched by what an input ISN'T, not by listing what it is.
|
| The old selector list matched on `type`, so any written without a
| type attribute — which is most of the search boxes in this application —
| fell through it entirely and rendered at the browser default: a short,
| unstyled box sitting lower than the selects beside it. Excluding the handful
| of control types that must keep their native appearance is the version that
| cannot be defeated by a forgotten attribute.
|
| `.cell-in` opts out entirely. A spreadsheet cell is 22px tall with no
| border of its own, and this rule's eight :not() clauses give it a
| specificity no sane selector can outrank. Excluding a class that nothing
| else uses changes no existing screen and settles it once.
*/
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=range]):not([type=hidden]):not(.cell-in):not(.cmdsearch__input),
select,textarea{
width:100%;padding:9px 11px;border:1px solid var(--n-200);border-radius:9px;background:var(--n-0);
font:inherit;color:var(--n-900);transition:border-color .12s,box-shadow .12s;
/* `font: inherit` brings the body's 1.55 line-height with it, which makes a
text box ~4px taller than a select next to it. 18px of content plus 9+9
padding plus 1+1 border is 38px — exactly what a select computes. */
line-height:18px;box-sizing:border-box}
textarea{line-height:1.55}
/* Chromium gives a date/time field a taller intrinsic content box for its
calendar and spin controls, which left it 2px prouder than every text field
and select on the same row. Pinning the height settles the row. */
input[type=date],input[type=datetime-local],input[type=month],input[type=week],input[type=time]{height:38px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}
input[disabled],select[disabled]{background:var(--n-50);color:var(--n-500)}
textarea{min-height:96px;resize:vertical}
.field--error input,.field--error select,.field--error textarea{border-color:var(--danger)}
.field__err{color:var(--danger);font-size:11.5px;margin-top:5px}
.checkline{display:flex;align-items:flex-start;gap:var(--s-2);font-size:13px;margin:var(--s-1) 0}
.checkline input{width:16px;height:16px;margin-top:2px;accent-color:var(--accent)}
fieldset{border:1px solid var(--n-150);border-radius:var(--radius);padding:var(--s-3) var(--s-4);margin:0 0 var(--s-3)}
legend{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n-500);padding:0 6px}
/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:9px;border:1px solid var(--n-200);
background:var(--n-0);color:var(--n-800);font-size:13px;font-weight:600;cursor:pointer;
transition:background .12s,border-color .12s,box-shadow .12s}
.btn:hover{background:var(--n-50);border-color:var(--n-300)}
.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--primary:hover{filter:brightness(.94);background:var(--accent);border-color:var(--accent)}
.btn--danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn--danger:hover{filter:brightness(.94);background:var(--danger)}
.btn--ghost{border-color:transparent;background:transparent}
.btn--ghost:hover{background:var(--n-100)}
.btn--sm{padding:6px 11px;font-size:12px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
/* ---------------------------------------------------------------- chips */
.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:99px;
font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.chip--ok{background:var(--ok-soft);color:var(--ok)}
.chip--warn{background:var(--warn-soft);color:var(--warn)}
.chip--danger{background:var(--danger-soft);color:var(--danger)}
.chip--info{background:var(--info-soft);color:var(--info)}
.chip--muted{background:var(--n-100);color:var(--n-500)}
/* ---------------------------------------------------------------- alerts */
.alert{border-radius:var(--radius);padding:var(--s-2) var(--s-3);margin-bottom:var(--s-3);font-size:12.5px;line-height:1.5;border:1px solid}
.alert--ok{background:var(--ok-soft);border-color:#BFE6D5;color:#14653F}
.alert--err{background:var(--danger-soft);border-color:#F2CFCF;color:#8C2020}
.alert--warn{background:var(--warn-soft);border-color:#F0DFB4;color:#7A5310}
.alert--info{background:var(--info-soft);border-color:#CBE0F5;color:#1B4F86}
.alert ul{margin:6px 0 0;padding-left:20px}
/* ---------------------------------------------------------------- misc */
.pill-tabs{display:flex;gap:4px;background:var(--n-100);padding:3px;border-radius:10px;overflow-x:auto}
.pill-tabs a{padding:6px 13px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--n-600);white-space:nowrap}
.pill-tabs a.is-active{background:var(--n-0);color:var(--n-900);box-shadow:var(--shadow-1)}
.pagination{display:flex;gap:5px;list-style:none;padding:0;margin:16px 0 0;flex-wrap:wrap;font-size:13px}
.pagination li span,.pagination li a{display:grid;place-items:center;min-width:33px;height:33px;padding:0 9px;
border:1px solid var(--n-200);border-radius:8px;background:var(--n-0);color:var(--n-700)}
.pagination li a:hover{background:var(--n-50)}
.pagination .active span{background:var(--accent);border-color:var(--accent);color:#fff}
.pagination .disabled span{opacity:.45}
.filters{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:flex-end;margin-bottom:var(--s-3)}
.filters .field{margin:0;min-width:150px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;font-size:13px}
.kv dt{color:var(--n-500);font-size:11.5px;white-space:nowrap}
.kv dd{margin:0;color:var(--n-800)}
.progress{height:6px;background:var(--n-100);border-radius:99px;overflow:hidden}
.progress i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.diff{font-family:var(--mono);font-size:11.5px;background:var(--n-50);border:1px solid var(--n-150);
border-radius:8px;padding:9px 11px;white-space:pre-wrap;word-break:break-word;max-height:230px;overflow:auto}
.avatar-lg{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;
color:#fff;font-weight:750;font-size:17px}
/* ==========================================================================
AUTH
--------------------------------------------------------------------------
Two panels: the sign-in form on the left, the group's own visual on the
right. The form is first in the DOM as well as on the left, so the first
thing a keyboard or a screen reader reaches is the email field rather than a
paragraph of positioning.
The panels are `minmax(0,1fr)`, not `1.05fr .95fr` — an `fr` track has an
implicit minimum of its content's minimum, and the right panel holds an
image, so at narrow widths the old ratio pushed the form off the screen.
========================================================================== */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* ------------------------------------------------------ the form panel */
.auth__main{background:var(--n-0);display:flex;flex-direction:column;
padding:var(--s-6) var(--s-8);min-width:0}
/* The real wordmark, top left.
Sized by height only — the width follows from the file's own 2.2:1 ratio, so
the mark can be re-exported at any resolution without a number here needing
to change. `width:auto` is explicit because the carries width and
height attributes: those are there to reserve the space before the image
arrives (no layout shift on a cold cache, which is every first sign-in), and
without the override the attribute would win over the height rule. */
.auth__brand{display:inline-flex;align-items:center;margin-bottom:var(--s-8);
align-self:flex-start;border-radius:8px}
.auth__brand img{display:block;height:42px;width:auto}
.auth__brand:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
/* The form sits in the optical centre of the panel, which is not its
arithmetic centre: `margin:auto` on a flex column with a footer below
balances the remaining space above and below the form. */
/* A grid so the form is centred, and `> *` so a screen with two stacked forms
— the forced password change offers "Sign out instead" — keeps them the same
width instead of shrinking each to its own content. */
/* `padding-bottom` rather than a smaller brand margin: it lifts the form to the
optical centre — a little above the arithmetic one — which is where the eye
expects a short form in a tall panel. */
.auth__body{flex:1;display:grid;align-content:center;justify-items:center;
gap:var(--s-3);min-width:0;padding-bottom:7vh}
.auth__body > *{width:100%;max-width:394px}
.auth__form{width:100%;max-width:394px}
.auth__form h2{font-size:26px;letter-spacing:-.02em;margin-bottom:var(--s-1)}
.auth__form .field > label{font-size:11px}
.auth__form input:not([type=checkbox]){height:46px}
.auth__submit{width:100%;justify-content:center;height:50px;font-size:14.5px}
/* The remember-me line: checkbox left, the way out right, and they stack rather
than crush on a narrow phone. */
.auth__row{display:flex;justify-content:space-between;align-items:center;
gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-1)}
/* --------------------------------------------------------- the footer */
.auth__foot{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;
margin-top:var(--s-8);padding-top:var(--s-4);border-top:1px solid var(--n-100);
font-size:11.5px;color:var(--n-500)}
.auth__foot nav{margin-left:auto;display:flex;gap:var(--s-4);flex-wrap:wrap}
.auth__foot a{color:var(--n-600);font-weight:600}
.auth__foot a:hover{color:var(--accent);text-decoration:underline}
/* ---------------------------------------------------- the visual panel */
/*
| The background design.
|
| Three layers, all CSS, no image request: a diagonal navy-to-teal base, two
| soft radial blooms placed off-centre so the panel has a light source, and a
| dot grid that fades out towards the bottom right. The grid is what stops a
| large flat gradient reading as an unfinished div — it gives the eye a
| texture to land on without competing with the artwork in front of it.
*/
.auth__aside{position:relative;overflow:hidden;isolation:isolate;
grid-column:2;color:var(--n-200);
display:flex;flex-direction:column;justify-content:center;
padding:var(--s-8) clamp(32px, 5vw, 72px);
background:
radial-gradient(120% 90% at 12% 4%, rgba(0,168,150,.30), transparent 58%),
radial-gradient(90% 80% at 96% 88%, rgba(0,168,150,.16), transparent 60%),
linear-gradient(148deg, #123642 0%, #0E2732 42%, #0B1A24 100%);
}
/* the dot grid */
.auth__aside::before{content:"";position:absolute;inset:0;z-index:-1;
background-image:radial-gradient(rgba(127,227,214,.20) 1px, transparent 1px);
background-size:26px 26px;
-webkit-mask-image:linear-gradient(155deg, #000 8%, rgba(0,0,0,.35) 52%, transparent 88%);
mask-image:linear-gradient(155deg, #000 8%, rgba(0,0,0,.35) 52%, transparent 88%)}
/* one oversized ring, bled off the top-right corner, for depth */
.auth__aside::after{content:"";position:absolute;z-index:-1;
width:640px;height:640px;right:-260px;top:-240px;border-radius:50%;
border:1px solid rgba(127,227,214,.16);
box-shadow:0 0 0 90px rgba(127,227,214,.05)}
.auth__aside h1{color:#fff;font-size:clamp(30px, 3.3vw, 44px);line-height:1.1;
letter-spacing:-.03em;max-width:19ch;font-weight:700}
.auth__aside p{color:#A9CFCA;font-size:15.5px;line-height:1.55;max-width:44ch;margin:var(--s-4) 0 0}
/* The globe.
The image itself has a hard circular edge — the atmosphere is here rather
than baked in, because a soft alpha ramp is what makes a photographic PNG
large, and a radial-gradient costs nothing and scales with the element. */
.auth__orb{position:relative;margin:var(--s-6) auto 0;width:100%;max-width:500px;
aspect-ratio:1;display:grid;place-items:center}
.auth__orb::before{content:"";position:absolute;inset:-14%;border-radius:50%;
background:radial-gradient(circle at 42% 38%,
rgba(111,230,213,.26) 0%, rgba(0,168,150,.14) 42%, transparent 68%)}
.auth__visual{position:relative;display:block;width:100%;height:auto;border-radius:50%;
filter:drop-shadow(0 32px 70px rgba(0,0,0,.55))}
.auth__note{margin-top:var(--s-6);font-size:11.5px;color:#7FA8A3;max-width:44ch}
/* The one-line summary of what this is, shown ONLY when the visual panel is
not there to say it.
Declared here, above the media query that reveals it — not after it. A flat
`display:none` written below `@media(max-width:980px){display:block}` has
equal specificity and wins at every width, which is how this ended up
invisible on the phone it exists for. */
.auth__lead{display:none;margin:0 0 var(--s-4);font-size:13px;line-height:1.5;color:var(--n-500)}
/* ------------------------------------------------------- auth responsive
1024 the visual panel narrows before the form does — the form has a fixed
comfortable width and the artwork can give ground
980 one column. The visual panel goes, but not silently: its headline
moves above the form so a phone still gets the one sentence that says
what this is
480 the panel padding drops to the phone step and the footer stacks */
@media (max-width:1180px){
.auth{grid-template-columns:minmax(0,480px) minmax(0,1fr)}
.auth__main{padding:var(--s-6)}
}
@media (max-width:980px){
.auth{grid-template-columns:1fr}
.auth__aside{display:none}
.auth__main{padding:var(--s-6) var(--s-4)}
/* On one column the form no longer needs to be optically centred in a tall
panel — it starts under the brand, where the thumb is. */
/* align-content, not place-items: the base rule sets align-content and
justify-items separately, and `place-items` sets align-ITEMS — a different
property — so this override moved nothing. */
.auth__body{align-content:start;padding-top:var(--s-4);padding-bottom:var(--s-4)}
.auth__lead{display:block}
}
@media (max-width:480px){
.auth__main{padding:var(--s-4) var(--s-3) var(--s-6)}
.auth__brand{margin-bottom:var(--s-6)}
.auth__brand img{height:34px}
.auth__form h2{font-size:23px}
.auth__foot{gap:var(--s-2);font-size:11px}
.auth__foot nav{margin-left:0;width:100%;gap:var(--s-3)}
}
/* ---------------------------------------------------------------- responsive */
@media (max-width:1180px){
.cmdsearch{flex-basis:200px}
}
@media (max-width:1024px){
.workspace__label{display:none}
.usermenu__meta{display:none}
/* Scoped to the bar on 6 Oct 2026. Dropping the label is a way of buying
width in a single 44px row; in the sidebar there is width to spare and the
label is the half that carries the meaning. Unscoped, the period control
in the drawer read "open" with nothing to say open WHAT. */
.cmdbar .cmdctl__k{display:none}
}
@media (max-width:860px){
.sidebar{position:fixed;left:0;top:0;z-index:120;transform:translateX(-100%);transition:transform .2s ease}
.app.nav-open .sidebar{transform:translateX(0);box-shadow:var(--shadow-2)}
.topbar__menu,.cmdbar__menu{display:grid}
.main{padding:var(--s-3) var(--s-3) var(--s-8)}
.workspace__name{display:none}
.workspace__opt{padding:7px 10px}
.page-head__actions{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
}
@media print{
.sidebar,.topbar,.cmdbar,.ctxbar,.bottomnav,.foot,.page-head__actions,.filters{display:none!important}
body{background:#fff}
.card,.table-wrap{box-shadow:none;border-color:#ccc}
}
/* ================================================================ phases 2-5
Components introduced by the accounting, inventory, marketing, channel,
document and website modules. Appended rather than interleaved so the
Phase 1 sheet above stays diffable.
------------------------------------------------------------------------ */
/* --- stat strip ------------------------------------------------------- */
.stat-row{display:grid;gap:var(--s-3);margin-bottom:var(--s-3);
grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.stat--accent{border-color:var(--accent-line);background:linear-gradient(180deg,var(--accent-soft),var(--n-0) 62%)}
.stat--accent .stat__value{color:var(--accent)}
.stat--ok{border-color:#BFE6D5} .stat--ok .stat__value{color:var(--ok)}
.stat--warn{border-color:#F0DFB4} .stat--warn .stat__value{color:var(--warn)}
.stat--danger{border-color:#F2CFCF} .stat--danger .stat__value{color:var(--danger)}
/* --- section heading between tables ----------------------------------- */
.section-title{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
color:var(--n-500);margin:var(--s-6) 0 var(--s-2)}
.section-title:first-child{margin-top:0}
/* --- pill (same visual language as .chip, used by the newer modules) --- */
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;
font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
background:var(--n-100);color:var(--n-500);white-space:nowrap}
.pill+.pill{margin-left:5px}
.pill--ok{background:var(--ok-soft);color:var(--ok)}
.pill--warn{background:var(--warn-soft);color:var(--warn)}
.pill--danger{background:var(--danger-soft);color:var(--danger)}
.pill--info{background:var(--info-soft);color:var(--info)}
.pill--muted{background:var(--n-100);color:var(--n-500)}
/* --- inline proportion bar -------------------------------------------- */
.bar{position:relative;height:7px;border-radius:99px;background:var(--n-100);overflow:hidden;min-width:64px}
.bar__fill{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:99px}
.bar--danger .bar__fill{background:var(--danger)}
/* --- semantic value colouring inside tables --------------------------- */
.is-danger{color:var(--danger)}
.is-ok{color:var(--ok)}
table.data tr.row--muted td{opacity:.62}
.row-actions{white-space:nowrap;text-align:right}
.row-actions a,.row-actions .linkbtn{color:var(--accent);font-weight:600;font-size:12.5px}
.row-actions a+a,.row-actions a+form,.row-actions form+form{margin-left:10px}
.linkbtn{background:none;border:0;padding:0;cursor:pointer;color:var(--accent);
font-weight:600;font-size:12.5px}
.linkbtn:hover{text-decoration:underline}
/* --- compact table variant for in-card tables -------------------------
Redeclares the four geometry properties and nothing else. There used to be
two competing blocks for this modifier — one at 7px/10px here and a second,
later one at 7px/14px in the dashboard section — so the horizontal padding of
every compact table depended on which rule the cascade reached last. One
block now, and the difference from the standard table is four numbers. */
table.data--compact{--th-h:32px; --row-h:36px; --cell-x:var(--s-3); --cell-y:6px; font-size:12.5px}
/* --- card extras ------------------------------------------------------ */
.card__title{font-size:14px;font-weight:650;padding:var(--s-3) var(--s-4) 0;color:var(--n-900)}
.card__note{font-size:12.5px;color:var(--n-500);line-height:1.55;margin:var(--s-2) var(--s-4) var(--s-3)}
.card__body>.card__note:last-child{margin-left:0;margin-right:0}
.note-card{background:var(--n-0);border:1px solid var(--n-150);border-radius:var(--radius-lg);
padding:var(--s-3) var(--s-4);margin-top:var(--s-3);box-shadow:var(--shadow-1)}
.note-card h3{font-size:13px;margin-bottom:var(--s-2)}
.bullets{margin:0;padding-left:18px;font-size:12.5px;color:var(--n-600);line-height:1.6}
.bullets li+li{margin-top:var(--s-1)}
/* --- segmented control (report side switches) ------------------------- */
.segmented{display:inline-flex;background:var(--n-100);border-radius:99px;padding:3px;gap:2px}
.segmented__opt{padding:5px 13px;border-radius:99px;font-size:12.5px;font-weight:600;color:var(--n-600)}
.segmented__opt.is-active{background:var(--n-0);color:var(--n-900);box-shadow:var(--shadow-1)}
/* --- marketplace connection rows -------------------------------------- */
.conn{border:1px solid var(--n-150);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px}
.conn__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.conn__meta{font-size:12px;margin-top:5px}
.conn__body{margin-top:10px;border-top:1px solid var(--n-100);padding-top:10px}
.conn__body>summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--accent)}
.conn__body>summary::marker{color:var(--n-400)}
/* --- website content blocks ------------------------------------------- */
.block{border:1px solid var(--n-150);border-radius:var(--radius);padding:12px 14px;margin-bottom:12px;
background:var(--n-25)}
.block__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.block__head select{flex:1 1 190px}
.block__fields{display:grid;gap:10px}
.block__fields textarea{min-height:78px}
/* A hint is normally inside .field, but forms that group several controls use
it standalone too. */
.hint{font-size:11.5px;color:var(--n-500);margin-top:5px}
.hint.is-danger{color:var(--danger)}
/* ================================================================ projects
Country tabs and project cards. The card has to read as a physical object
you can pick up — that is what makes drag-and-drop discoverable at all.
------------------------------------------------------------------------ */
.ptabs__bar{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--n-150);
margin-bottom:18px}
.ptabs__tab{display:inline-flex;align-items:center;gap:8px;background:none;border:0;
border-bottom:2px solid transparent;padding:10px 14px;cursor:pointer;font-size:13.5px;
font-weight:600;color:var(--n-500);border-radius:8px 8px 0 0}
.ptabs__tab:hover{color:var(--n-800);background:var(--n-50)}
.ptabs__tab.is-active{color:var(--n-900);border-bottom-color:var(--tab-accent,var(--accent))}
.ptabs__dot{width:9px;height:9px;border-radius:99px;background:var(--tab-accent,var(--accent));flex:0 0 9px}
.ptabs__count{background:var(--n-100);color:var(--n-600);border-radius:99px;
padding:1px 8px;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.ptabs__tab.is-active .ptabs__count{background:var(--n-900);color:var(--n-0)}
.ptabs__tab.is-drop-target{background:var(--accent-soft);border-bottom-color:var(--accent);
color:var(--n-900);outline:2px dashed var(--accent-line);outline-offset:-2px}
.ptabs__panel{display:none}
.ptabs__panel.is-active{display:block}
/* --- the grid, and its empty state as a drop zone --------------------- */
.pgrid{align-items:start;min-height:150px;border-radius:var(--radius-lg);
transition:background .12s ease, box-shadow .12s ease}
.pgrid.is-drop-into{background:var(--accent-soft);
box-shadow:inset 0 0 0 2px var(--accent-line)}
.pgrid--empty{grid-template-columns:1fr}
.pcard-empty{grid-column:1/-1;border:2px dashed var(--n-200);border-radius:var(--radius-lg);
padding:38px 20px;text-align:center;color:var(--n-500);background:var(--n-25)}
.pcard-empty strong{display:block;color:var(--n-700);font-size:15px;margin-bottom:6px}
.pcard-empty span{font-size:13px}
/* --- the card --------------------------------------------------------- */
.pcard{position:relative;display:flex;flex-direction:column;background:var(--n-0);
border:1px solid var(--n-200);border-radius:var(--radius-lg);
box-shadow:0 1px 2px rgba(21,32,43,.05), 0 4px 10px rgba(21,32,43,.05);
overflow:hidden;transition:box-shadow .14s ease, transform .14s ease, border-color .14s ease}
/* A 4px accent rail along the top: it names the brand at a glance and gives the
card a defined edge no matter what the background is. */
.pcard::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
background:var(--card-accent,var(--accent))}
.pcard:hover{transform:translateY(-2px);border-color:var(--n-300);
box-shadow:0 2px 4px rgba(21,32,43,.06), 0 10px 22px rgba(21,32,43,.10)}
.pcard.is-archived{opacity:.55}
.pcard.is-dragging{opacity:.45;transform:rotate(-1.2deg) scale(.98);box-shadow:none;
border-style:dashed}
.is-dragging-active .pcard{cursor:grabbing}
.pcard__body{display:block;padding:18px 16px 4px;flex:1}
.pcard__head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pcard__name{display:block;font-size:15.5px;line-height:1.3;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.pcard__code{font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.pcard__chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pcard__kv{margin:0;padding-top:12px;border-top:1px solid var(--n-100)}
.pcard__kv dt{font-size:11px}
.pcard__kv dd{font-size:12.5px}
/* Grip and edit affordances sit in the card's top rail, out of the way of the
title, and only become prominent on hover. */
.pcard__grip{position:absolute;top:9px;right:34px;color:var(--n-300);cursor:grab;
padding:5px;line-height:0;fill:currentColor;z-index:2;border-radius:6px}
.pcard__grip:active{cursor:grabbing}
.pcard:hover .pcard__grip{color:var(--n-500);background:var(--n-50)}
.pcard__edit{position:absolute;top:9px;right:8px;color:var(--n-300);padding:5px;
line-height:0;z-index:2;border-radius:6px}
.pcard:hover .pcard__edit{color:var(--n-500);background:var(--n-50)}
.pcard__edit:hover{color:var(--accent)}
/* Drag feedback. A refusal explains a rule, so it stays on screen much longer
than a confirmation and is styled to be read, not glanced at. */
.drag-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;
max-width:min(680px,calc(100vw - 32px));background:var(--n-900);color:var(--n-0);
padding:12px 18px;border-radius:var(--radius);box-shadow:var(--shadow-2);
font-size:13px;line-height:1.55}
.drag-toast--ok{background:var(--ok)}
.drag-toast--err{background:var(--danger)}
/* Company placement panel on the project edit screen. */
.placement{display:grid;gap:10px}
.placement__row{display:flex;align-items:center;justify-content:space-between;gap:12px;
border:1px solid var(--n-150);border-radius:var(--radius);padding:11px 13px}
.placement__row.is-owner{border-color:var(--accent-line);background:var(--accent-soft)}
.placement__meta{font-size:12px;color:var(--n-500);margin-top:3px}
.grantrow{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
border-bottom:1px solid var(--n-100);padding:7px 0}
.grantrow__edit{flex:0 0 auto;margin:0}
/* Cash-flow: a two-sided bar so money in and money out read at a glance. */
.flowbar{display:flex;align-items:center;height:12px;width:100%}
.flowbar__in{background:var(--ok);height:8px;border-radius:4px 0 0 4px;margin-left:auto}
.flowbar__mid{width:1px;height:12px;background:var(--n-300);flex:0 0 1px}
.flowbar__out{background:var(--danger);height:8px;border-radius:0 4px 4px 0;margin-right:auto}
table.data tr.row--danger td{background:var(--danger-soft)}
/* ==========================================================================
Grouped sidebar
A flat list of twenty-six links is an inventory, not a menu. Groups collapse,
the group containing the current page opens itself, and the whole thing stays
legible when the sidebar is collapsed to icons.
========================================================================== */
.navgroup{margin:1px 0}
.navgroup__btn{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;
border:0;background:none;border-radius:8px;cursor:pointer;text-align:left;
color:var(--n-300);font:inherit;font-size:13.2px;font-weight:600;letter-spacing:.005em}
.navgroup__btn:hover{background:rgba(255,255,255,.06);color:#fff}
.navgroup__btn svg{flex:0 0 17px;opacity:.85}
.navgroup__btn span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navgroup__chev{flex:0 0 14px;opacity:.55;transition:transform .16s ease}
.navgroup.is-open>.navgroup__btn{color:#fff}
.navgroup.is-open .navgroup__chev{transform:rotate(180deg)}
.navgroup .nav--sub{display:none;margin:2px 0 6px;padding-left:26px;
border-left:1px solid rgba(255,255,255,.09);margin-left:19px}
.navgroup.is-open .nav--sub{display:block}
.nav--sub .nav__link{padding:6px 10px;font-size:12.7px;color:var(--n-400)}
.nav--sub .nav__link:hover{color:#fff}
.nav--sub .nav__link.is-active{background:rgba(255,255,255,.10);color:#fff;font-weight:600}
/* Collapsed to icons: labels and sub-lists go, the group icon stays clickable. */
.app.is-collapsed .navgroup__btn span,.app.is-collapsed .navgroup__chev{display:none}
.app.is-collapsed .navgroup__btn{justify-content:center;padding:9px 0}
.app.is-collapsed .navgroup .nav--sub{display:none}
/* ==========================================================================
Dashboard grid
Twelve columns, cards that declare their own span, and a drag handle on the
header. Reordering is persisted per user, so two people can arrange the same
dashboard differently without arguing about it.
========================================================================== */
.page-head--tight{margin-bottom:14px}
.dash{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap-grid);align-items:stretch}
/* Cards in the same row share a height. Ragged rows are what made the old
dashboard read as a pile of boxes rather than a grid. */
.dash__card{height:100%}
.dash__card{grid-column:span 4;background:var(--n-0);border:1px solid var(--n-150);
border-radius:var(--radius-lg,14px);box-shadow:var(--shadow-1);display:flex;flex-direction:column;
min-width:0;overflow:hidden}
.dash__card--4{grid-column:span 4}
.dash__card--6{grid-column:span 6}
.dash__card--8{grid-column:span 8}
.dash__card--12{grid-column:span 12}
.dash__head{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);
border-bottom:1px solid var(--n-100);background:var(--n-25)}
.dash__head h2{font-size:13.5px;font-weight:650;flex:1;min-width:0;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash__grip{display:none;color:var(--n-400);cursor:grab;flex:0 0 13px}
.dash__grip svg{fill:currentColor}
.dash__hide{display:none;border:0;background:none;color:var(--n-400);cursor:pointer;
font-size:17px;line-height:1;padding:0 2px;border-radius:5px}
.dash__hide:hover{color:var(--danger);background:var(--danger-soft)}
.dash__body{padding:var(--s-3);display:flex;flex-direction:column;gap:var(--s-3);flex:1;min-width:0}
/* An empty card centres its message instead of leaving it stranded at the top. */
.dash__body>.empty{margin:auto 0;padding:18px 6px}
.dash__foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--n-100);
font-size:11.5px;color:var(--n-500);display:flex;gap:10px;flex-wrap:wrap;line-height:1.5}
.dash__foot a{font-weight:600}
.dash__warn{margin:0;font-size:12px;color:var(--danger);font-weight:600}
.dash__split{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:16px;align-items:start}
.dash__chart{min-width:0}
.dash__side{display:grid;gap:10px;align-content:start}
/* Arrange mode: only then do the grip and the hide button appear, so the normal
view is not cluttered by controls nobody is using. */
.dash.is-arranging .dash__grip,.dash.is-arranging .dash__hide{display:inline-flex;align-items:center}
.dash.is-arranging .dash__head{cursor:grab;background:var(--accent-soft)}
.dash.is-arranging .dash__card{outline:1px dashed var(--accent-line)}
.dash__card.is-dragging{opacity:.45}
.dash__card.is-drop{outline:2px solid var(--accent);outline-offset:2px}
.dash-hint{background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--n-700);
border-radius:var(--radius);padding:10px 13px;font-size:12.5px;margin-bottom:12px}
.dash-add{position:relative}
.dash-add>summary{list-style:none;cursor:pointer}
.dash-add>summary::-webkit-details-marker{display:none}
.dash-add__menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:250px;
background:var(--n-0);border:1px solid var(--n-150);border-radius:12px;
box-shadow:var(--shadow-2,0 10px 30px rgba(20,32,44,.14));padding:6px;display:grid;gap:2px}
.dash-add__item{display:flex;align-items:center;justify-content:space-between;gap:10px;
width:100%;border:0;background:none;padding:8px 10px;border-radius:8px;cursor:pointer;
font:inherit;font-size:13px;text-align:left;color:var(--n-700)}
.dash-add__item:hover{background:var(--n-100)}
.dash-add__item small{color:var(--n-400);font-size:11px}
/* Numbers on cards. */
.kpi{display:grid;gap:2px}
.kpi__label{font-size:11.5px;color:var(--n-500);font-weight:600;display:flex;align-items:center;gap:6px}
.kpi__value{font-size:25px;font-weight:680;letter-spacing:-.02em;color:var(--n-900);
font-variant-numeric:tabular-nums;line-height:1.15}
.kpi__value small{font-size:12px;font-weight:600;color:var(--n-400);margin-left:6px}
.kpi__note{font-size:11.5px;color:var(--n-500)}
.kpi--sm .kpi__value{font-size:17px}
.kpi-row{display:flex;gap:22px;flex-wrap:wrap}
.kpi-split{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--n-600)}
.kpi-split i,.swatch,.kpi__label i.dot{width:9px;height:9px;border-radius:3px;display:inline-block;
margin-right:6px;flex:0 0 9px}
.kpi__label i.dot{border-radius:99px;margin-right:0}
/* Compact tables inside cards. */
table.mini{width:100%;border-collapse:collapse;font-size:12.5px}
table.mini td{padding:5px 0;border-bottom:1px solid var(--n-100);vertical-align:top}
table.mini tr:last-child td{border-bottom:0}
table.mini td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.mini tr.mini__rule td{border-top:1px solid var(--n-200);padding-top:8px}
table.mini--rows td{padding:8px 0}
.mini__label{font-size:12.5px;margin-bottom:5px}
.bar{height:6px;background:var(--n-100);border-radius:99px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--accent);border-radius:99px}
.period-strip{display:flex;gap:5px;flex-wrap:wrap}
.table-wrap--flush{border:0;border-radius:0;margin:0 calc(var(--s-3) * -1)}
/* (the second, conflicting .data--compact padding block used to live here —
the modifier is now declared once, with the other table geometry) */
.feed{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:12.3px}
.feed li{display:grid;grid-template-columns:74px 1fr auto;gap:9px;align-items:baseline}
.feed__when{color:var(--n-400);font-size:11px;white-space:nowrap}
.feed__what{color:var(--n-700);min-width:0}
.feed__who{color:var(--n-400);font-size:11px;white-space:nowrap}
/* ==========================================================================
Server-rendered SVG charts
========================================================================== */
.c-svg{display:block;width:100%;height:auto;overflow:visible}
.c-split{display:block;width:100%;height:10px;border-radius:99px;overflow:hidden}
.c-grid{stroke:var(--n-100);stroke-width:1}
.c-zero{stroke:var(--n-300);stroke-width:1.4}
.c-tick{fill:var(--n-400);font-size:12px;font-family:inherit}
.c-empty{fill:var(--n-400);font-size:14px;font-family:inherit}
.c-centre{fill:var(--n-900);font-size:18px;font-weight:700;font-family:inherit}
.c-centre-sub{fill:var(--n-400);font-size:10px;font-family:inherit}
.c-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--n-600);margin-top:2px}
.c-legend__item{display:flex;align-items:center;gap:6px}
.c-legend__item i{width:9px;height:9px;border-radius:3px;display:inline-block}
.donut-wrap{display:flex;justify-content:center;padding:2px 0}
.donut-wrap .c-svg{max-width:190px}
.is-warn{color:var(--warn)}
/* The breakpoint is set by the narrowest a card may become before its numbers
stop being readable — about 300px — not by a device size. At 1280 with the
sidebar open a third of the row is still ~320px, so three across holds. */
@media (max-width:1120px){
.dash__card--8{grid-column:span 12}
.dash__card--6{grid-column:span 6}
.dash__card--4{grid-column:span 6}
}
@media (max-width:900px){
.dash{grid-template-columns:repeat(6,1fr)}
.dash__card,.dash__card--4,.dash__card--6,.dash__card--8,.dash__card--12{grid-column:span 6}
.dash__split{grid-template-columns:1fr}
.dash__side{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
.kpi__value{font-size:21px}
.kpi-row{gap:14px}
.feed li{grid-template-columns:1fr;gap:2px}
.dash__side{grid-template-columns:1fr}
}
/* --------------------------------------------------------------------------
Narrow-screen corrections found by rendering the real page at 390px.
-------------------------------------------------------------------------- */
@media (max-width:760px){
.page-head--tight h1{font-size:15px}
.console{grid-template-columns:1fr}
.sumstrip{grid-template-columns:repeat(auto-fit,minmax(122px,1fr))}
}
/* ==========================================================================
Sheet forms
A dense, spreadsheet-like entry surface. The old product form spread twenty
fields down two tall columns, which meant scrolling past most of the page to
reach the field you wanted. This puts a whole section on one screen: a
twelve-column grid, one-line labels, and units printed inside the box rather
than spelled out beside it.
========================================================================== */
.sheet{background:var(--n-0);border:1px solid var(--n-150);border-radius:var(--radius-lg);
box-shadow:var(--shadow-1);margin-bottom:12px;overflow:hidden}
.sheet__head{display:flex;align-items:baseline;gap:12px;padding:9px 14px;
background:var(--n-25);border-bottom:1px solid var(--n-100)}
.sheet__head h2{font-size:12.5px;font-weight:700;letter-spacing:.02em;
text-transform:uppercase;color:var(--n-700);white-space:nowrap}
.sheet__note{font-size:11.5px;color:var(--n-500);line-height:1.45}
.sheet__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0;
border-top:1px solid transparent}
.sheet--actions{display:flex;align-items:center;gap:10px;padding:12px 14px;flex-wrap:wrap}
/* Each cell is a bordered box in the grid, so the whole block reads as a sheet
rather than as a stack of floating inputs. */
.cell{grid-column:span 2;display:flex;flex-direction:column;gap:3px;
padding:8px 12px;border-right:1px solid var(--n-100);border-bottom:1px solid var(--n-100);
min-width:0}
.cell--1{grid-column:span 1} .cell--2{grid-column:span 2}
.cell--3{grid-column:span 3} .cell--4{grid-column:span 4}
.cell--6{grid-column:span 6} .cell--8{grid-column:span 8}
.cell--12{grid-column:span 12;border-right:0}
.cell>span{font-size:10.5px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;
color:var(--n-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell>span b{color:var(--danger);font-weight:700}
.cell>small{font-size:10.5px;color:var(--n-400);line-height:1.4}
.cell input,.cell select,.cell textarea{width:100%;border:0;background:none;padding:2px 0;
font:inherit;font-size:13.2px;color:var(--n-900);border-bottom:1px solid transparent;
border-radius:0;min-width:0}
.cell input:focus,.cell select:focus,.cell textarea:focus{outline:0;
border-bottom-color:var(--accent);box-shadow:none}
.cell textarea{resize:vertical;line-height:1.5}
.cell select{cursor:pointer}
.cell:focus-within{background:var(--accent-soft)}
/* A unit belongs inside the field, not in the label. */
.withunit{display:flex;align-items:baseline;gap:5px;min-width:0}
.withunit input{flex:1;min-width:0}
.withunit i{font-style:normal;font-size:11px;color:var(--n-400);font-weight:600;white-space:nowrap}
.switches{flex-direction:row;flex-wrap:wrap;gap:16px;align-items:center;border-right:0}
.switches label{display:flex;align-items:center;gap:6px;font-size:12.8px;
color:var(--n-700);white-space:nowrap;cursor:pointer;text-transform:none;letter-spacing:0}
.switches input{width:auto}
.marginbox{justify-content:center;background:var(--n-25)}
.marginbox strong{font-size:17px;font-variant-numeric:tabular-nums;color:var(--n-900)}
.marginbox strong.is-thin{color:var(--warn)}
.marginbox strong.is-loss{color:var(--danger)}
/* A total row in a compact table, and a negative figure anywhere in one. */
.data--compact tr.is-total td{border-top:1px solid var(--n-300);background:var(--n-50)}
/* Statement tables: a section heading, a subtotal and the closing total. */
.data tr.is-section td{background:var(--n-100);font-size:11px;text-transform:uppercase;
letter-spacing:.09em;color:var(--n-600);padding-top:12px}
.data tr.is-total td{border-top:1px solid var(--n-300);background:var(--n-50)}
.data tr.is-grand td{border-top:2px solid var(--n-700);border-bottom:3px double var(--n-700);
background:var(--n-50);font-size:14px}
.data td.is-loss,.data td.is-loss strong{color:var(--danger)}
@media (max-width:1120px){
.cell--2{grid-column:span 3}
.cell--3{grid-column:span 4}
.cell--4{grid-column:span 6}
}
@media (max-width:820px){
.cell,.cell--1,.cell--2,.cell--3,.cell--4,.cell--6,.cell--8{grid-column:span 6}
.sheet__head{flex-direction:column;gap:2px}
}
@media (max-width:520px){
.cell,.cell--1,.cell--2,.cell--3,.cell--4,.cell--6,.cell--8,.cell--12{grid-column:span 12;border-right:0}
}
/* ==========================================================================
Brand identity and logo
========================================================================== */
.logo-preview{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo-preview img{max-height:64px;max-width:200px;border:1px solid var(--n-150);
border-radius:8px;padding:6px;background:var(--n-0)}
.logo-preview .empty-logo{width:120px;height:64px;border:1px dashed var(--n-200);
border-radius:8px;display:flex;align-items:center;justify-content:center;
color:var(--n-400);font-size:11px;text-align:center;padding:6px}
.letterhead-preview{border:1px solid var(--n-150);border-radius:var(--radius);
padding:16px 18px;background:var(--n-0)}
.letterhead-preview .lh-name{font-size:17px;font-weight:700}
.letterhead-preview .lh-meta{font-size:12px;color:var(--n-500);line-height:1.6;margin-top:4px}
.letterhead-preview .lh-rule{height:3px;border-radius:2px;margin:12px 0 10px}
.sendbox{display:grid;gap:10px}
.mailstate{display:flex;align-items:center;gap:8px;font-size:12.5px}
.pcard__edit--brand{right:38px}
/* A deactivated row is visible but obviously not live. */
tr.is-trashed td{opacity:.62;background:var(--n-25)}
tr.is-trashed td strong{text-decoration:line-through}
/* =====================================================================
Mobile platform layer: bottom navigation, capture, review, card lists.
Desktop is untouched — everything here activates under 860px except the
components that are useful at any width (capture buttons, review grid).
===================================================================== */
/* ---- generic stacked list (used by queue, capture, review log) ---- */
.stack-list{display:grid;gap:0;border-top:1px solid var(--n-150)}
.stack-item{display:flex;justify-content:space-between;align-items:center;gap:12px;
padding:12px 14px;border-bottom:1px solid var(--n-150);color:inherit;text-decoration:none}
a.stack-item:active{background:var(--n-50)}
/* ---- confidence chips on the review form ---- */
.conf{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;
font-size:10.5px;font-weight:700;vertical-align:1px}
.conf--ok{background:#DCF3EA;color:#146C43}
.conf--warn{background:#FBF0D3;color:#7A5310}
.conf--danger{background:#F9E1E0;color:#8C2020}
/* ---- capture screen ---- */
.cap-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.cap-btn{display:grid;gap:2px;justify-items:center;text-align:center;padding:18px 10px;
border:1.5px dashed var(--n-300);border-radius:14px;cursor:pointer;min-height:44px}
.cap-btn:active{background:var(--n-50)}
.cap-btn--camera{border-color:var(--accent);border-style:solid}
.cap-btn__icon{font-size:26px}
.cap-btn small{color:var(--n-500);font-size:11.5px}
.cap-drop{margin-top:10px;padding:18px;border:1.5px dashed var(--n-300);border-radius:12px;
text-align:center;color:var(--n-500);font-size:13px}
.cap-drop.is-over{border-color:var(--accent);background:var(--n-50)}
.cap-list{display:grid;gap:8px;margin-top:12px}
.cap-item{display:flex;gap:10px;align-items:center;border:1px solid var(--n-150);
border-radius:12px;padding:8px 10px}
.cap-item img{width:52px;height:52px;object-fit:cover;border-radius:8px;background:var(--n-100)}
.cap-item__meta{flex:1;min-width:0;font-size:12.5px}
.cap-item__meta strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cap-item__tools{display:flex;gap:4px}
.cap-item__tools button{min-width:34px;min-height:34px;border:1px solid var(--n-200);
border-radius:8px;background:#fff;cursor:pointer;font-size:14px}
.cap-item.is-done{border-color:#146C43;background:#F4FBF8}
.cap-item.is-error{border-color:#B3261E;background:#FDF6F6}
/* ---- review screen ---- */
.doc-preview{background:var(--n-100);display:grid;place-items:center;min-height:220px}
.doc-preview img{max-width:100%;max-height:70vh;object-fit:contain}
.doc-preview iframe{width:100%;height:70vh;border:0}
.doc-text{margin:0;padding:14px;font-size:11.5px;line-height:1.5;white-space:pre-wrap;
word-break:break-word;max-height:320px;overflow:auto;background:var(--n-25)}
details.card>summary{list-style:none}
details.card>summary::-webkit-details-marker{display:none}
/* ---- bottom navigation (mobile only) ---- */
.bottomnav{display:none}
@media (max-width:860px){
.bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:110;
display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:end;
background:#fff;border-top:1px solid var(--n-150);
padding:6px max(8px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-bottom));
box-shadow:0 -4px 18px rgba(21,32,43,.07)}
.bottomnav a,.bottomnav button{display:grid;justify-items:center;gap:2px;padding:6px 2px;
min-height:48px;color:var(--n-500);text-decoration:none;background:none;border:0;
font:inherit;font-size:10.5px;cursor:pointer}
.bottomnav a.is-active{color:var(--accent)}
.bottomnav svg circle{fill:currentColor}
.bottomnav a.bottomnav__capture{position:relative;top:-16px;width:54px;height:54px;margin:0 auto;
border-radius:50%;background:var(--accent);color:#fff!important;display:grid;place-items:center;
box-shadow:0 6px 16px rgba(0,0,0,.22);border:4px solid #fff}
/* room so content never hides behind the bar */
.main{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
.foot{display:none}
}
/* The hidden attribute must beat any class display value, or "hidden until
JS decides" quietly becomes "always visible". */
[hidden]{display:none!important}
/* ---- install banner ---- */
.pwa-banner{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));
z-index:130;display:flex;gap:12px;align-items:center;justify-content:space-between;
background:#15202B;color:#fff;border-radius:14px;padding:12px 14px;
box-shadow:0 10px 30px rgba(0,0,0,.3)}
.pwa-banner__text{font-size:12.5px;line-height:1.4}
.pwa-banner__text strong{display:block;font-size:13.5px}
.pwa-banner__text span{color:#B9C4CE}
.pwa-banner__actions{display:flex;gap:6px;flex-shrink:0}
@media (min-width:861px){.pwa-banner{max-width:420px;left:auto;bottom:18px;right:18px}}
/* ---- responsive table/card switches ---- */
.show-mobile{display:none}
@media (max-width:700px){
.hide-mobile{display:none!important}
.show-mobile{display:grid}
}
/* ---- general mobile ergonomics ---- */
@media (max-width:860px){
/* touch targets: every control at least 44px tall */
.btn{min-height:42px}
/*
| Not a checkbox and not a radio.
|
| An unqualified `input{min-height:44px}` stretched every tick box in the
| application to 44px tall while it stayed 16px wide, so on a phone the box
| sat about fifteen pixels below the label it belongs to — on the sign-in
| page's "Keep me signed in", on every permission row, on every filter. The
| touch target is not lost: these controls are always inside a
|