/* ADMIN-FRAMEWORK / UNICORP Procurement: one local design system for every
   module. The owner-requested redesign is independent of the accounting
   app: slate navigation, indigo links, teal actions and soft workspace
   surfaces. The UNICORP mark, semantic warning/error states and report
   palettes remain intact. Dark mode stays a per-browser choice (frame.js).

   No external fonts, images or styles; no inline script/style exceptions.
   Typography uses the device's own system font. Shared component names and
   DOM hooks are retained for existing navigation, forms and permission
   checks. tests/look.test.js verifies light/dark text contrast, field and
   focus visibility, the frame contracts and accessible theme behavior.
   Reports keep their existing data-series colors, with low-contrast dark
   series lifted near the end of this file. */

:root {
  color-scheme:light;
  --bg:#f4f6fc; --side:#edf1fa; --topbar:#ffffff; --card:#ffffff; --raised:#ffffff; --raised-2:#eef2fb; --hover:#e8edf8;
  --ink:#223047; --label:#34435c; --soft:#52617a; --placeholder:#64718a;
  --line:#dce3ef; --line-2:#bbc7da; --field:#79879d; --faint:#f4f7fd;
  --accent:#147d6f; --accent-text:#11695f; --accent-fill:#147d6f; --accent-fill-hover:#106457; --accent-soft:#e2f4ef;
  --mark:#e11d48; --on-side:#e3e5e9;
  --nav-active:#4f46e5; --nav-active-hover:#4338ca; --nav-active-ink:#ffffff;
  --link:#4338ca; --link-hover:#3730a3; --link-soft:#eef0ff; --link-line:rgba(67,56,202,.35);
  --nav-surface:#17243d; --nav-ink:#eef2ff; --nav-soft:#bbc9e3; --nav-line:#35435e; --nav-hover:#293956;
  --hero-start:#eef0ff; --hero-end:#e1f3ef; --hero-line:#c6d3ed; --chart-grid:#e6ecf6;
  --green:#1d7a12; --green-soft:#e6f4e3; --amber:#8a4b05; --amber-soft:#fdf0d5;
  --blue:#005a96; --blue-soft:#e4f0fa; --red:#c4162a; --red-soft:#fde8ea;
  --grey:#4b4d53; --grey-soft:#eceef1;
  --err-ink:#8f1424; --err-bg:#fdecee; --err-line:#e8a3ab;
  --done-ink:#14531a; --done-bg:#eaf6e8; --done-line:#a9d7a1;
  --warn-ink:#713f12; --warn-bg:#fff6e0; --warn-line:#e7c675;
  --info-ink:#393a3d; --info-bg:#f4f9fd; --info-line:#0077c5; --info-mark:#0077c5;
  --bulk:#2b2f38; --bulk-ink:#ffffff; --bulk-line:rgba(255,255,255,.55);
  --shadow:0 3px 14px rgba(27,45,87,.045); --shadow-lg:0 14px 40px rgba(16,24,40,.16);
  --backdrop:rgba(16,19,28,.38);
  --font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --r-card:14px; --r-field:8px; --side-w:256px; --max:1280px; --gutter:32px; --bar-h:64px; --panel-w:480px;
  /* This site's own: the bars and grids of its figures. */
  --track:#eef1fa; --bar-fill:#4f46e5; --bar-grey:#9aa1ad; --series-1:#fc0108; --grid-line:#eceef1; --tip:#2b2f38; --tip-ink:#ffffff;
  --r-max:1320px;
}

/* The dark look: chosen with the switch, never on paper. */
html[data-theme="dark"] {
  color-scheme:dark;
  --bg:#14171c; --side:#1b1f27; --topbar:#1b1f27; --card:#1b1f27; --raised:#20252e; --raised-2:#252a34; --hover:#2c323d;
  --ink:#e8eaed; --label:#d5d8de; --soft:#a5abb6; --placeholder:#8f96a3;
  --line:#313744; --line-2:#444b59; --field:#7c8494; --faint:#1f232b;
  --accent:#5fc94f; --accent-text:#7bd96c; --accent-fill:#1d8213; --accent-fill-hover:#156310; --accent-soft:rgba(95,201,79,.14);
  --mark:#ff6b86; --on-side:#2c323d;
  --nav-active:#1769aa; --nav-active-hover:#12578e; --nav-active-ink:#ffffff;
  --nav-surface:#111c31; --nav-ink:#eef2ff; --nav-soft:#bbc9e3; --nav-line:#35435e; --nav-hover:#293956;
  --hero-start:#252743; --hero-end:#163630; --hero-line:#485373; --chart-grid:#313e52;
  --link:#6cb4ee; --link-hover:#9acdf5; --link-soft:rgba(108,180,238,.14); --link-line:rgba(108,180,238,.4);
  --green:#6fd35f; --green-soft:rgba(95,201,79,.14); --amber:#fbbf24; --amber-soft:rgba(251,191,36,.14);
  --blue:#7cb8f0; --blue-soft:rgba(108,180,238,.15); --red:#ff8a8a; --red-soft:rgba(248,113,113,.15);
  --grey:#b9c0cd; --grey-soft:rgba(255,255,255,.08);
  --err-ink:#ffc2c2; --err-bg:rgba(248,113,113,.10); --err-line:rgba(248,113,113,.45);
  --done-ink:#b8eeb0; --done-bg:rgba(95,201,79,.10); --done-line:rgba(95,201,79,.45);
  --warn-ink:#fde3a0; --warn-bg:rgba(251,191,36,.10); --warn-line:rgba(251,191,36,.45);
  --info-ink:#dfe3ea; --info-bg:rgba(108,180,238,.08); --info-line:#4a98d8; --info-mark:#6cb4ee;
  --bulk:#000000; --bulk-ink:#ffffff; --bulk-line:rgba(255,255,255,.5);
  --shadow:0 3px 14px rgba(0,0,0,.12); --shadow-lg:0 12px 36px rgba(0,0,0,.55);
  --backdrop:rgba(0,0,0,.55);
  --track:rgba(255,255,255,.09); --bar-fill:#6cb4ee; --bar-grey:#7c8494; --series-1:#ff4d55; --grid-line:#2c323d; --tip:#000000; --tip-ink:#ffffff;
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; padding:0; min-height:100vh; background:var(--bg); color:var(--ink); font:15px/1.6 var(--font);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a { color:var(--link); text-decoration:none; }
a:hover { color:var(--link-hover); text-decoration:underline; text-underline-offset:3px; }
main a:not(.btn):not(.linkbtn):not(.cancel) { text-decoration:underline; text-decoration-color:var(--link-line); text-underline-offset:3px; }
main a:not(.btn):not(.linkbtn):not(.cancel):hover { text-decoration-color:currentColor; }
/* A link a script answers (Data's kept tables, its versions): a pointer, like any link. */
a[data-open], a[data-at] { cursor:pointer; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
::selection { background:var(--accent-soft); }
.vh { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.grow { flex:1; }
/* The owner's links, laid out as if the wrapper were not there; .hide below still wins. */
.ownernav { display:contents; }
.hide { display:none !important; }
/* A place this role may not open (frame.js, by the role the page was told). */
.role-off { display:none !important; }

/* ------------------------------------------------ the page: room for the bar across the top and the sidebar */

#app { padding-top:var(--bar-h); padding-left:var(--side-w); }
/* The sidebar folded away on a laptop (frame.js marks <html> with the choice). */
@media (min-width:768px) {
  html[data-side="closed"] #app { padding-left:0; }
  html[data-side="closed"] .side-panel { display:none; }
}

main { display:block; max-width:var(--max); margin:0 auto; padding:24px var(--gutter) 72px; overflow-wrap:break-word; }

/* ------------------------------------------------ words */

h1 { font-size:28px; line-height:1.25; margin:0 0 8px; font-weight:650; letter-spacing:-.025em; }
h2 { font-size:17px; line-height:1.35; font-weight:650; margin:28px 0 12px; }
h3 { font-size:15px; font-weight:650; margin:18px 0 8px; }
main > h1:first-child { margin-top:0; }
.sub { color:var(--soft); margin:0 0 22px; max-width:80ch; }
p { margin:0 0 12px; }
hr { border:0; border-top:1px solid var(--line); margin:20px 0; }
.ok, .up { color:var(--green); }
.bad, .down, .negv { color:var(--red); }
.warn { color:var(--amber); }
.soft, .muted { color:var(--soft); }
.note, .hint, small.hint { color:var(--soft); font-size:13px; line-height:1.5; }
.note.block { display:block; }
small { color:var(--soft); font-size:12.5px; }
code { font:13px var(--mono); background:var(--raised-2); color:var(--ink); padding:2px 6px; border-radius:4px; word-break:break-all; }
main ul:not(.checks):not(.aklist):not(.plain), main ol { margin:0 0 16px; padding-left:22px; }
main li { margin:5px 0; }
main li::marker { color:var(--soft); }

/* ------------------------------------------------ cards and tiles */

.card { display:block; min-width:0; margin:0 0 18px; padding:20px 22px; background:var(--card); color:inherit; border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow); }
.card h2 { margin:0 0 14px; font-size:16px; }
.card h3 { margin:16px 0 8px; font-size:14px; }
.card > :last-child { margin-bottom:0; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr)); gap:16px; margin:0 0 20px; }
.tiles .card { margin:0; }
.tile { display:flex; flex-direction:column; gap:4px; padding:18px 20px; }
.tile .k { color:var(--soft); font-size:13px; font-weight:600; }
.tile .v { margin:4px 0; color:var(--ink); font-size:30px; font-weight:650; line-height:1.2; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.tile .n { color:var(--soft); font-size:12.5px; }
.tile .n.up { color:var(--green); } .tile .n.down { color:var(--red); }

/* Facts about one thing: a label, then its value (inside a card). */
dl { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 18px; margin:0; font-size:14px; }
dt { color:var(--soft); }
dd { margin:0; min-width:0; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }

/* ------------------------------------------------ tables: clean rows; wide ones scroll inside their box, never the page */

.tscroll { overflow:auto; max-width:100%; position:relative; -webkit-overflow-scrolling:touch; }
.tscroll.tall { max-height:420px; border:1px solid var(--line); border-radius:var(--r-card); }
table { width:100%; border-collapse:collapse; border-spacing:0; margin:0; font-size:14px; }
th { padding:10px 10px; border-bottom:1px solid var(--line-2); background:none; color:var(--ink); text-align:left; vertical-align:bottom; white-space:nowrap;
  font-size:13px; font-weight:650; }
td { padding:10px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
tbody tr:last-child > td { border-bottom:0; }
:where(tr > th, tr > td):first-child { padding-left:4px; }
:where(tr > th, tr > td):last-child { padding-right:4px; }
tbody tr { transition:background-color .12s; }
tbody tr:hover > td { background:var(--faint); }
td.num, th.num, .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tscroll.tall th { position:sticky; top:0; z-index:1; background:var(--card); }

/* The brand worksheet scrolls within its own surface, never the document. */
.sheet-scroll { max-width:100%; max-height:65vh; overflow:auto; border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); }
.brand-sheet { min-width:1500px; border-collapse:separate; border-spacing:0; font-variant-numeric:tabular-nums; }
.brand-sheet caption { text-align:left; padding:14px; color:var(--ink); font-weight:600; }
.brand-sheet td, .brand-sheet th { border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.brand-sheet thead th { position:sticky; top:0; z-index:2; background:var(--raised-2); text-align:right; min-width:100px; }
.brand-sheet tr > :first-child { position:sticky; left:0; z-index:1; min-width:240px; max-width:300px; overflow-wrap:anywhere; text-align:left; background:var(--card); }
.brand-sheet thead tr > :first-child { z-index:3; background:var(--raised-2); }
.brand-sheet thead small { display:block; font-size:11px; white-space:normal; font-weight:400; }
.brand-sheet tfoot th, .brand-sheet tfoot td { font-weight:600; background:var(--raised-2); }
.sheet-cell, .sheet-month { padding:2px; margin:0; border:0; background:transparent; box-shadow:none; color:var(--link); font:inherit; }
.sheet-cell:hover, .sheet-month:hover { background:var(--hover); text-decoration:underline; }
.brand-sheet-tabs { display:flex; gap:4px; overflow-x:auto; max-width:100%; margin:14px 0 24px; padding:8px 0; border-top:1px solid var(--line); }
.brand-sheet-tabs .tab { flex:0 0 auto; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:8px 14px; }
.brand-sheet-tabs .tab.on { color:var(--link); border-color:var(--link); background:var(--raised-2); font-weight:600; }
@media(max-width:600px) { .brand-sheet tr > :first-child { min-width:150px; max-width:180px; } }

/* A column a person may sort by (frame.js, on a table marked data-sort or
   inside a box marked data-sort): the heading is a button; the order it
   shows is in aria-sort, the arrow says so. */
th > button.sort { display:inline-flex; align-items:center; gap:4px; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:inherit;
  font:inherit; font-weight:inherit; white-space:nowrap; cursor:pointer; }
th > button.sort:hover { background:none; color:var(--link); }
th > button.sort::after { content:""; width:7px; height:7px; margin-left:2px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; opacity:.35; transform:rotate(45deg) translate(-2px,-2px); }
th[aria-sort="ascending"] > button.sort::after { opacity:1; transform:rotate(-135deg) translate(-2px,-2px); }
th[aria-sort="descending"] > button.sort::after { opacity:1; }
th.num > button.sort { flex-direction:row-reverse; }

/* ------------------------------------------------ how it went, and what to know: one way, on every page
   A callout: a light box with a coloured border and a round mark at its
   left: "i" for something to know (.callout, .msg.info), a tick for done
   (.done, .msg.ok, .msg.good), "!" for a warning (.msg.warn, .flag, a plain
   .msg) or an error (.err, .msg.err). Its first <b> is its title. */

.err, .done, .callout, .flag, .msg:not(:empty) { position:relative; display:block; margin:0 0 16px; padding:12px 16px 12px 44px; border:1px solid transparent; border-radius:var(--r-field);
  font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.err::before, .done::before, .callout::before, .flag::before, .msg:not(:empty)::before { position:absolute; left:14px; top:13px; display:grid; place-items:center; width:18px; height:18px;
  border-radius:50%; color:var(--bg); font:700 12px/1 var(--font); }
.msg:not(:empty), .flag { background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn-ink); }
.msg:not(:empty)::before, .flag::before { content:"!"; background:var(--amber); }
.err, .msg.err { background:var(--err-bg); border-color:var(--err-line); color:var(--err-ink); }
.err::before, .msg.err::before { content:"!"; background:var(--red); }
.done, .msg.ok, .msg.good { background:var(--done-bg); border-color:var(--done-line); color:var(--done-ink); }
.done::before, .msg.ok::before, .msg.good::before { content:"\2713"; background:var(--green); }
.msg.warn { background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn-ink); }
.msg.warn::before { content:"!"; background:var(--amber); }
.callout, .msg.info { background:var(--info-bg); border-color:var(--info-line); color:var(--info-ink); }
.callout::before, .msg.info::before { content:"i"; background:var(--info-mark); font-family:Georgia, "Times New Roman", serif; font-style:italic; }
.err b, .msg b, .flag b, .callout > b:first-child { display:block; margin-bottom:2px; color:inherit; font-weight:650; }
.err p, .flag p, .msg p { margin:0; }
.err a, .done a, .msg a, .flag a { color:inherit; text-decoration:underline; text-decoration-color:currentColor; }
.callout a, .msg.info a { color:var(--link); }
.msg .note { display:block; color:inherit; opacity:.9; }
.msg:empty { display:none; }
.card > .err:last-child, .card > .msg:last-child { margin-bottom:0; }
/* A card that is only its error (the Dashboard's, when nothing could be read). */
.card.err { padding:12px 16px 12px 44px; }

/* A one-time thing to copy (a new API key, an invite link): amber, it is shown once. */
.keybox, .linkbox { margin:14px 0 0; padding:14px 16px; border:1px solid var(--warn-line); border-radius:var(--r-field); background:var(--warn-bg); color:var(--warn-ink); font-size:14px; }
.keybox ol { margin:6px 0 8px; padding-left:22px; } .keybox li { margin:3px 0; }
.keyrow, .linkrow { display:flex; gap:8px; margin:10px 0 4px; }
.keyrow input { flex:1; min-width:0; font:13px/1.4 var(--mono); }
.linkrow input { flex:1; min-width:0; font:13px/1.4 var(--mono); }

/* ------------------------------------------------ buttons: the main one green, the second ones blue words on white, undoing ones red */

button, .btn, input[type=submit], input[type=button] { display:inline-flex; align-items:center; justify-content:center; gap:8px; margin:0; padding:9px 18px;
  border:1px solid transparent; border-radius:999px; background:var(--accent-fill); color:#ffffff; font:inherit; font-size:14px; font-weight:650; line-height:1.25;
  text-align:center; text-decoration:none; cursor:pointer; box-shadow:none; transition:background-color .15s, border-color .15s, color .15s; }
button:hover, .btn:hover, input[type=submit]:hover { background:var(--accent-fill-hover); color:#ffffff; text-decoration:none; }
button svg, .btn svg { width:16px; height:16px; flex:none; }
/* Second actions: blue words on white (the Data page's .b.g, the Upload and Download pages' .light). */
.btn.quiet, .btn.light, button.quiet, button.g, button[type=reset]:not(.link), input[type=button] { background:var(--card); color:var(--link); border-color:var(--line-2); font-weight:650; }
.btn.quiet:hover, .btn.light:hover, button.quiet:hover, button.g:hover, button[type=reset]:not(.link):hover, input[type=button]:hover { background:var(--link-soft); color:var(--link-hover); border-color:var(--link); }
/* What undoes or deletes: red words, a red line (the Data page's .b.d). */
.btn.danger, button.danger, button.d { background:transparent; color:var(--red); border-color:var(--red); font-weight:650; }
.btn.danger:hover, button.danger:hover, button.d:hover { background:var(--red-soft); color:var(--red); border-color:var(--red); }
.btn.small, button.small { padding:5px 12px; font-size:13px; }
button.link, a.cancel { display:inline; padding:4px 0; background:none; border:0; border-radius:0; color:var(--link); font-weight:650; text-decoration:none; }
button.link:hover, a.cancel:hover { background:none; color:var(--link-hover); text-decoration:underline; }
button:disabled, .btn:disabled, button:disabled:hover { opacity:.45; cursor:not-allowed; }

/* A form's footer: Cancel as a blue link on the left, the green main button on the right. */
.form-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; flex:1 1 100%; margin:8px 0 0; padding-top:16px; border-top:1px solid var(--line); }
.form-foot > :last-child { margin-left:auto; }
.acts { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px; }

/* ------------------------------------------------ forms, laid out the same everywhere */

form { margin:0; }
label { display:flex; flex-direction:column; gap:6px; margin:0; min-width:0; color:var(--label); font-size:13px; font-weight:600; line-height:1.35; }
label.tick, label.choice, label.check { flex-direction:row; align-items:center; gap:9px; color:var(--ink); font-weight:500; }
label > small, label > .hint { display:block; margin:0; font-size:12.5px; font-weight:400; line-height:1.45; color:var(--soft); }
input, select, textarea { margin:0; padding:9px 11px; min-width:0; max-width:100%; border:1px solid var(--field); border-radius:var(--r-field);
  background:var(--raised); color:var(--ink); font:inherit; font-size:14px; font-weight:400; line-height:1.4; box-shadow:none;
  transition:border-color .15s, box-shadow .15s, background-color .15s; }
input::placeholder, textarea::placeholder { color:var(--placeholder); opacity:1; }
input:hover, select:hover, textarea:hover { border-color:var(--soft); }
input:focus, select:focus, textarea:focus { border-color:var(--accent); outline:1px solid var(--accent); outline-offset:0; box-shadow:0 0 0 3px var(--accent-soft); }
select:not([multiple]):not([size]) { -webkit-appearance:none; appearance:none; padding-right:36px; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--soft) 50%), linear-gradient(135deg, var(--soft) 50%, transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
select option { background:var(--card); color:var(--ink); }
input[type=checkbox], input[type=radio] { width:18px; height:18px; flex:none; margin:0; padding:0; accent-color:var(--accent-fill); box-shadow:none; cursor:pointer; }
input[type=checkbox]:focus, input[type=radio]:focus { box-shadow:none; outline:2px solid var(--accent); outline-offset:2px; }
input[type=date]::-webkit-calendar-picker-indicator { cursor:pointer; opacity:.85; }
input[type=file] { padding:7px; cursor:pointer; }
input[type=file]::file-selector-button { margin-right:12px; padding:7px 14px; border:1px solid var(--line-2); border-radius:999px; background:var(--card); color:var(--link); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
input[readonly] { background-color:var(--raised-2); }
input:disabled, select:disabled { opacity:.6; cursor:not-allowed; }

/* A row of fields that wraps (the Data page's), and the date or model rows of Upload and Download. */
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.row + .row { margin-top:12px; }
.row > input[type=text] { flex:1 1 240px; }
.row > input.mid { flex:1 1 210px; }
.row > input.narrow { flex:0 1 160px; }
.row > select { flex:0 1 280px; }
.row > .note { margin:0; }
.range { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-top:10px; }
.range label { min-width:0; }
.range label.wide { flex:1 1 220px; }
.range label.wide input { width:100%; }

/* A form of a few fields side by side that wrap (the People page's). */
form.grid { display:flex; flex-wrap:wrap; gap:14px 14px; align-items:flex-start; }
form.grid > label, .field { flex:1 1 200px; }
form.grid > label > input, form.grid > label > select, .field > input { width:100%; }
.permissions { flex:1 1 100%; min-width:0; margin:0; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-control); }
.permissions legend { padding:0 7px; color:var(--ink); font-size:13px; font-weight:650; }
.permission-list { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 18px; }
.permission-list h3 { grid-column:1 / -1; margin:10px 0 0; color:var(--soft); font-size:12px; font-weight:650; letter-spacing:.02em; text-transform:uppercase; }
.permission-list h3:first-child { margin-top:0; }
.permission-list .tick { margin:0; align-items:flex-start; font-weight:450; line-height:1.35; }

/* Choices as big tick boxes (a division, a kind of file). */
.choices { display:flex; gap:10px; flex-wrap:wrap; margin:4px 0 6px; }
.choice { padding:9px 14px; border:1px solid var(--line-2); border-radius:var(--r-card); background:var(--card); cursor:pointer; font-size:14px; font-weight:600; }
.choice:hover { border-color:var(--soft); }
.choice:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
.tick { display:flex; gap:10px; align-items:flex-start; margin:10px 0; font-size:14px; font-weight:500; color:var(--ink); }
.tick input { margin-top:1px; }

/* ------------------------------------------------ statuses: a rounded chip, a colour each */

.pill { display:inline-flex; align-items:center; gap:6px; padding:2px 10px 2px 8px; border-radius:999px; background:var(--grey-soft); color:var(--grey);
  font-size:12px; font-weight:600; line-height:1.5; white-space:nowrap; vertical-align:middle; }
.pill::before { content:""; width:6px; height:6px; flex:none; border-radius:50%; background:currentColor; }
.pill.new, .pill.held { background:var(--blue-soft); color:var(--blue); }
.pill.changed, .pill.wait { background:var(--amber-soft); color:var(--amber); }
.pill.shrink, .pill.off { background:var(--red-soft); color:var(--red); }
.pill.done { background:var(--green-soft); color:var(--green); }
.pill.same { background:var(--grey-soft); color:var(--grey); }
.counts { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 0; }

/* ------------------------------------------------ the bar across the top: the menu button and the name, where you are, today, the person's menu */

.top { position:fixed; z-index:40; top:0; left:0; right:0; height:var(--bar-h); display:flex; align-items:center; gap:14px; padding:0 16px 0 0;
  background:var(--topbar); color:var(--ink); border-bottom:1px solid var(--line); }
.top button { box-shadow:none; }
.side-head { display:flex; align-items:center; gap:6px; flex:none; width:var(--side-w); height:100%; padding:0 10px; }
.top .menu-btn { display:inline-grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:50%; background:none; color:var(--ink); }
.top .menu-btn:hover { background:var(--hover); color:var(--ink); }
.top .menu-btn svg { width:22px; height:22px; }
.logo { position:relative; display:inline-block; padding-left:36px; color:var(--ink); font-size:16px; font-weight:800; letter-spacing:.3px; line-height:1.1; text-decoration:none; white-space:nowrap; }
.logo::before { content:""; position:absolute; left:0; top:50%; width:26px; height:26px; margin-top:-13px; border-radius:8px;
  background:linear-gradient(135deg, #ff4d6d 0%, #ff8a5c 100%); }
.logo span { color:var(--mark); }
.logo small { display:block; margin-top:1px; color:var(--soft); font-size:11.5px; font-weight:500; letter-spacing:.2px; }
.logo:hover { color:var(--ink); text-decoration:none; }
.top .where { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:15px; font-weight:650; }
.top .meta { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--soft); font-size:12.5px; }
.top .meta:empty { display:none; }
.today { color:var(--soft); font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* The bar's note copied by frame.js, for a bar with no room for it (below). */
.fresh-line { display:none; }
.today:empty { display:none; }

/* The person's own menu: who is signed in, the dark look, Sign out. */
.person { position:relative; flex:none; }
.top .person-btn { display:inline-flex; align-items:center; gap:8px; padding:3px 10px 3px 3px; border:1px solid transparent; border-radius:999px; background:none; color:var(--ink); font-size:14px; font-weight:600; }
.top .person-btn:hover, .top .person-btn[aria-expanded="true"] { background:var(--hover); color:var(--ink); }
.top .person-btn .first { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatar { display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:50%; background:var(--accent-soft); color:var(--accent-text); font-size:12.5px; font-weight:700; letter-spacing:.4px; }
.person-menu { position:absolute; z-index:45; right:0; top:calc(100% + 8px); width:290px; max-width:calc(100vw - 24px); padding:14px; display:flex; flex-direction:column; gap:12px;
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-card); box-shadow:var(--shadow-lg); }
.me { display:flex; align-items:center; gap:11px; min-width:0; }
.top .who { min-width:0; color:var(--ink); font-size:13.5px; font-weight:600; line-height:1.35; overflow-wrap:anywhere; }
.person-menu .today { padding-top:10px; border-top:1px solid var(--line); }
.side-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 4px; }
.top .switch { padding:8px 2px 8px 0; background:none; border:0; border-radius:0; color:var(--ink); font-size:13.5px; font-weight:500; gap:8px; white-space:nowrap; }
.top .switch:hover { background:none; color:var(--ink); }
.switch .track { position:relative; display:block; width:34px; height:20px; flex:none; margin:0; border-radius:999px; background:var(--raised-2); border:1px solid var(--field); transition:background-color .2s, border-color .2s; }
.switch .track::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--soft); transition:transform .2s, background-color .2s; }
.switch[aria-checked="true"] .track { background:var(--accent-fill); border-color:var(--accent-fill); }
.switch[aria-checked="true"] .track::after { transform:translateX(14px); background:#ffffff; }
.top .signout { padding:6px 12px; gap:6px; white-space:nowrap; background:var(--card); border:1px solid var(--line-2); color:var(--link); font-size:13px; font-weight:650; }
.top .signout:hover { background:var(--link-soft); color:var(--link-hover); border-color:var(--link); }

/* ------------------------------------------------ the sidebar: + New, then the places in sections */

.side-panel { position:fixed; z-index:39; top:var(--bar-h); bottom:0; left:0; width:var(--side-w); display:flex; flex-direction:column; min-height:0; gap:10px;
  padding:18px 8px 12px; background:var(--nav-surface); color:var(--nav-ink); border-right:1px solid var(--nav-line); overflow:hidden; }
.new { flex:none; padding:0 12px; }
.top .new-btn { width:100%; padding:10px 14px; border:1px solid transparent; border-radius:10px; background:var(--nav-active); color:#ffffff; font-size:14px; font-weight:650; }
.top .new-btn:hover, .top .new-btn[aria-expanded="true"] { background:var(--nav-active-hover); color:#ffffff; border-color:transparent; }
.top .menu { display:flex; flex-direction:column; gap:0; flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 0 12px; }
.sec { display:flex; flex-direction:column; gap:0; border-bottom:1px solid var(--nav-line); padding:4px 0; }
.sec-body { display:flex; flex-direction:column; gap:1px; padding:3px 8px 8px; }
.top .sec-head { position:relative; justify-content:flex-start; gap:10px; width:100%; min-height:48px; margin:0; padding:10px 32px 10px 12px; border:0; border-radius:10px; background:none; color:var(--nav-ink);
  font-size:14px; font-weight:650; letter-spacing:0; text-transform:none; text-align:left; }
.top .sec-head:hover { background:var(--nav-hover); color:var(--nav-ink); }
.top .sec-head .module-icon { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border-radius:8px; background:var(--nav-hover); color:var(--nav-soft); font-size:16px; font-weight:500; }
.sec-head::after { content:""; position:absolute; right:16px; width:7px; height:7px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(-45deg); transition:transform .15s; opacity:.7; }
.sec-head[aria-expanded="true"]::after { transform:rotate(45deg) translate(-1px,-1px); }
.sec.active > .sec-head { background:var(--nav-active); color:var(--nav-active-ink); }
.sec.active > .sec-head:hover { background:var(--nav-active-hover); color:var(--nav-active-ink); }
.sec.active > .sec-head .module-icon { color:inherit; }
.top a.nav { display:flex; align-items:center; gap:10px; width:100%; min-height:40px; padding:8px 12px; border:0; border-radius:var(--r-field); background:none; color:var(--nav-ink);
  font-size:14px; font-weight:500; line-height:1.35; text-align:left; text-decoration:none; white-space:normal; overflow-wrap:anywhere; transition:background-color .12s; }
.top a.nav:hover { background:var(--nav-hover); color:var(--nav-ink); text-decoration:none; }
.top .menu > a.nav { min-height:48px; padding:10px 14px; margin-bottom:8px; border-bottom:0; border-radius:10px; font-weight:650; }
.top .menu > a.nav.on { background:var(--nav-active); color:var(--nav-active-ink); box-shadow:none; }
.top .sec-body a.nav { padding-left:36px; color:var(--nav-soft); font-size:13.5px; }
.top .sec-body a.nav:hover { color:var(--nav-ink); }
.top .sec-body a.nav.on { background:var(--nav-hover); color:var(--nav-ink); font-weight:650; box-shadow:inset 3px 0 0 #a5b4fc; }
.top a.nav:focus-visible, .top .sec-head:focus-visible { outline-offset:-2px; }
.top .bm-add { justify-content:flex-start; gap:8px; width:100%; padding:7px 12px; border:0; border-radius:var(--r-field); background:none; color:var(--nav-ink); font-size:13.5px; font-weight:500; }
.top .bm-add:hover { background:var(--nav-hover); color:var(--nav-ink); }
.top .bm-add:disabled { opacity:.6; }
.bm { position:relative; display:flex; align-items:center; }
.bm a.nav { padding-right:34px; overflow:hidden; text-overflow:ellipsis; }
.top .bm-remove { position:absolute; right:4px; display:grid; place-items:center; width:26px; height:26px; padding:0; border:0; border-radius:50%; background:none; color:var(--nav-soft); font-size:16px; line-height:1; }
.top .bm-remove:hover { background:var(--hover); color:var(--red); }

/* The "+ New" menu: what this person may start, in groups. */
.new-menu { position:fixed; z-index:46; top:calc(var(--bar-h) + 58px); left:12px; width:min(420px, calc(100vw - 24px)); max-height:calc(100vh - var(--bar-h) - 80px); overflow-y:auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:4px 18px; padding:16px 18px; background:var(--card); border:1px solid var(--line-2);
  border-radius:var(--r-card); box-shadow:var(--shadow-lg); }
.new-grp { display:flex; flex-direction:column; min-width:0; }
.new-grp-name { margin:2px 0 6px; padding:0 8px; color:var(--soft); font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.new-menu a { display:block; padding:7px 8px; border-radius:var(--r-field); color:var(--ink); font-size:14px; text-decoration:none; }
.new-menu a:hover, .new-menu a:focus-visible { background:var(--raised-2); color:var(--ink); text-decoration:none; outline-offset:-2px; }
.top .new-bar { display:none; place-items:center; width:36px; height:36px; flex:none; padding:0; border:1.5px solid var(--ink); border-radius:50%; background:var(--card); color:var(--ink); }
.top .new-bar:hover, .top .new-bar[aria-expanded="true"] { background:var(--hover); color:var(--ink); }
.top .new-bar svg { width:18px; height:18px; }

/* ------------------------------------------------ signing in: a calm card on the sidebar's grey */

body:has(> #gate:not(.hide)), body:has(> #staffonly:not(.hide)), body:has(> main.gate) { background:var(--side); }
.gate { width:100%; max-width:440px; min-height:100vh; min-height:100dvh; margin:0 auto; padding:24px 16px;
  display:flex; flex-direction:column; justify-content:center; }
.gate > .card { width:100%; margin:0; flex-shrink:0; }
.gate .card { padding:30px 28px; box-shadow:var(--shadow-lg); }
.gate h1, .gate h2 { margin:0 0 6px; font-size:20px; }
.gate .brand { margin-bottom:22px; text-align:center; }
.gate .brand .logo { text-align:left; font-size:18px; }
.gate .sub, .gate > .card > p { color:var(--soft); margin:0 0 6px; }
.gate label { margin-top:14px; }
.gate input:not([type=checkbox]):not([type=radio]) { width:100%; margin-top:6px; }
.gate label > input:not([type=checkbox]):not([type=radio]) { margin-top:0; }
.gate button:not(.link) { width:100%; margin-top:20px; padding:12px; }
.gate .form-foot button:not(.link) { width:auto; margin-top:0; }
.gate .bad, .gate .badpw { margin:14px 0 0; padding:10px 14px; border:1px solid var(--err-line); border-radius:var(--r-field); background:var(--err-bg); color:var(--err-ink); font-size:14px; }
.gate .note { margin-top:18px; }
.gate .account-links { margin:16px 0 0; text-align:center; font-size:13.5px; }
.gate form .note, .gate .msg { margin-top:12px; }

/* Secret entry is an accessible, centered modal, never a browser-native prompt. */
.secret-dialog { width:calc(100% - 32px); max-width:440px; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px);
  margin:auto; padding:28px; overflow:auto; border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--card); color:var(--ink); box-shadow:var(--shadow-lg); }
.secret-dialog::backdrop { background:var(--backdrop); }
.secret-dialog h2 { margin:0 0 10px; font-size:20px; }
.secret-dialog p { color:var(--soft); white-space:pre-line; }
.secret-dialog input { width:100%; margin-top:6px; font-size:16px; }
.secret-dialog .form-foot { margin-top:24px; }

/* Bulk category comparison keeps readable columns; phones scroll the table,
   never squeeze seven columns into one screen or stretch each row vertically. */
#bulk-review { scroll-margin-top:calc(var(--bar-h) + 16px); }
#bulk-review .tools { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
#bulk-review table { min-width:1080px; table-layout:fixed; }
#bulk-review th:nth-child(1) { width:72px; }
#bulk-review th:nth-child(2) { width:220px; }
#bulk-review th:nth-child(3) { width:96px; }
#bulk-review th:nth-child(4), #bulk-review th:nth-child(5) { width:140px; }
#bulk-review th:nth-child(6) { width:115px; }
#bulk-review tbody th, #bulk-review td { vertical-align:top; overflow-wrap:anywhere; }
#transaction-code-review { scroll-margin-top:calc(var(--bar-h) + 16px); }
#transaction-code-review .tools { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
#transaction-code-review table { min-width:1140px; table-layout:fixed; }
#transaction-code-review thead th:nth-child(1) { width:72px; }
#transaction-code-review thead th:nth-child(2) { width:220px; }
#transaction-code-review thead th:nth-child(3) { width:112px; }
#transaction-code-review thead th:nth-child(4) { width:120px; }
#transaction-code-review thead th:nth-child(5) { width:180px; }
#transaction-code-review tbody th, #transaction-code-review td { vertical-align:top; white-space:normal; overflow-wrap:anywhere; }
#transaction-code-review tbody th { position:static; }

/* ------------------------------------------------ the Dashboard: the month in tiles and bars */

.dash section.card { margin-top:0; }
.dash table { table-layout:auto; }
.dash td { padding:7px 0; border:0; vertical-align:middle; font-size:14px; }
.dash tbody tr:hover > td, .dash tr:hover > td { background:none; }
.dash td.name { width:170px; color:var(--ink); padding-right:10px; }
.dash td.val { width:120px; text-align:right; color:var(--soft); font-variant-numeric:tabular-nums; padding-left:8px; }
.dash .track { background:var(--track); height:12px; border-radius:999px; }
.dash .fill { background:var(--bar-fill); height:12px; border-radius:999px; }
.dash .fill.grey { background:var(--bar-grey); }
.dash .fill.negative { background:var(--red); }
.dash svg path[stroke] { stroke:var(--bar-fill); }
.dash svg path[fill="#3355dd"], .dash svg circle { fill:var(--bar-fill); }
.dash svg text { fill:var(--soft); }

/* ADMIN-FRAMEWORK workspace: shared surfaces, independent of other apps. */
.top { box-shadow:0 2px 12px rgba(27,45,87,.04); }
.top .sec-head[data-sec="reports"] .module-icon { color:#c5bdff; }
.top .sec-head[data-sec="inventory"] .module-icon { color:#8ee4d1; }
.top .sec-head[data-sec="promotions"] .module-icon { color:#ffb6ca; }
.top .sec-head[data-sec="data"] .module-icon { color:#f7d496; }
.top .sec.active > .sec-head .module-icon { color:#ffffff; background:rgba(255,255,255,.16); }
.top a.nav:focus-visible, .top .sec-head:focus-visible, .top .bm-add:focus-visible, .top .new-btn:focus-visible { outline-color:#ffffff; }
.dashboard-home { padding-top:28px; }
.workspace-hero { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:28px 30px; margin-bottom:24px; border:1px solid var(--hero-line); border-radius:18px; background:linear-gradient(110deg,var(--hero-start),var(--hero-end)); }
.eyebrow { margin:0 0 7px; color:var(--link); font-size:11px; font-weight:700; letter-spacing:.1em; line-height:1.4; }
.workspace-hero h1 { max-width:22ch; font-size:32px; letter-spacing:-.035em; }
.hero-copy { max-width:58ch; margin:8px 0 14px; color:var(--soft); }
.hero-source { margin:0; color:var(--soft); font-size:12px; }
.hero-mark { display:grid; place-items:center; width:118px; height:118px; flex:none; border-radius:24px; background:var(--card); border:1px solid var(--hero-line); box-shadow:var(--shadow); transform:rotate(6deg); color:var(--link); }
.hero-mark svg { width:96px; height:96px; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.dashboard-home .tiles { grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); gap:16px; margin-bottom:30px; }
.dashboard-metric { border-top:3px solid var(--tone-ink); padding-top:16px; }
.metric-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.metric-icon, .module-badge { display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:10px; background:var(--tone-bg); color:var(--tone-ink); }
.metric-icon svg, .module-badge svg { width:20px; height:20px; }
.metric-heading .k { color:var(--soft); }
[data-tone="violet"] { --tone-ink:var(--link); --tone-bg:var(--link-soft); }
[data-tone="teal"] { --tone-ink:var(--accent-text); --tone-bg:var(--accent-soft); }
[data-tone="blue"] { --tone-ink:var(--blue); --tone-bg:var(--blue-soft); }
[data-tone="rose"] { --tone-ink:var(--red); --tone-bg:var(--red-soft); }
[data-tone="amber"] { --tone-ink:var(--amber); --tone-bg:var(--amber-soft); }
.workspace-modules { margin-bottom:28px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
.section-heading h2 { margin:0; font-size:20px; letter-spacing:-.015em; }
.section-heading > p { margin:0; font-size:12px; color:var(--soft); }
.module-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.module-card { min-width:0; padding:18px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); box-shadow:var(--shadow); }
.module-card-heading { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.module-card h3 { margin:0; font-size:15px; font-weight:650; }
.module-card > p { margin:0 0 14px; font-size:12.5px; color:var(--soft); }
.module-links { display:flex; align-items:flex-start; flex-direction:column; gap:5px; }
.module-links a { display:inline-flex; align-items:center; gap:8px; min-height:32px; color:var(--link); font-size:12.5px; font-weight:600; }
.module-links a span { margin-left:auto; }
.dashboard-charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.dashboard-charts .card { margin:0; }
.dashboard-trend { grid-column:1/-1; }
.chart-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.chart-heading h2 { margin:0; font-size:16px; }
.dashboard-charts .note { margin-top:16px; }
.dashboard-charts td.name { width:34%; font-size:13px; }
.dashboard-charts td.val { width:76px; font-size:13px; }
.dashboard-metric .v { font-size:30px; }
.chart-baseline { stroke:var(--chart-grid); stroke-width:1; }
.dashboard-home #waiting:empty, .dashboard-home #advice:empty { display:none; }
@media (min-width:768px) and (max-width:1199px) { .module-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-charts { grid-template-columns:minmax(0,1fr); } }
.flag { margin-top:0; }

/* ------------------------------------------------ the Reports page: filters in one row, the report's pages as tabs, its charts in a grid */

/* The filters, the tabs and the chips sit across the work area, their words lined up with the cards below. */
#app > .bar, #tabs, #controls, #chips, #foot { padding-left:max(var(--gutter), calc((100% - var(--r-max)) / 2 + var(--gutter))); padding-right:max(var(--gutter), calc((100% - var(--r-max)) / 2 + var(--gutter))); }
#app > .bar { position:sticky; top:var(--bar-h); z-index:5; display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding-top:10px; padding-bottom:10px; background:var(--bg); border-bottom:1px solid var(--line); }
#app > .bar select, #app > .bar input[type=date] { padding:6px 34px 6px 12px; border-radius:999px; font-size:13.5px; }
#app > .bar input[type=date] { padding-right:10px; }
.seg { display:inline-flex; border:1px solid var(--line-2); border-radius:999px; overflow:hidden; background:var(--card); }
.seg button { padding:6px 14px; border:0; border-radius:0; background:none; color:var(--ink); font-size:13.5px; font-weight:600; }
.seg button:hover { background:var(--hover); color:var(--ink); }
.seg button.on, .seg button.on:hover { background:var(--accent-fill); color:#ffffff; }
.tabs { display:flex; flex-wrap:wrap; gap:0 26px; margin:0 0 18px; border-bottom:1px solid var(--line); }
#tabs { margin:0; padding-top:4px; background:var(--bg); }
.tabs button, .tabs .tab { padding:10px 0 9px; border:0; border-bottom:3px solid transparent; border-radius:0; background:none; color:var(--soft); font-size:14px; font-weight:500;
  line-height:1.3; white-space:nowrap; transition:color .15s, border-color .15s; }
.tabs button:hover, .tabs .tab:hover { background:none; color:var(--ink); border-bottom-color:var(--line-2); }
.tabs button.on, .tabs .tab.on { color:var(--ink); font-weight:650; border-bottom-color:var(--accent); }
#controls { display:flex; gap:6px; flex-wrap:wrap; padding-top:12px; }
#controls:empty { display:none; }
.fbtn { padding:5px 12px; border:1px solid var(--line-2); border-radius:999px; background:var(--card); color:var(--ink); font-size:13px; font-weight:500; }
.fbtn:hover { background:var(--hover); color:var(--ink); }
.fbtn.set, .fbtn.set:hover { border-color:var(--link); color:var(--link); background:var(--link-soft); }
.fbtn b { font-weight:650; }
#chips { display:flex; gap:6px; flex-wrap:wrap; padding-top:8px; }
#chips:empty { display:none; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:3px 6px 3px 11px; border-radius:999px; background:var(--link-soft); color:var(--link); font-size:12.5px; font-weight:600; }
.chip button { padding:0 4px; border:0; background:none; color:inherit; font-size:15px; line-height:1; }
.chip button:hover { background:none; color:var(--link-hover); }
.chip.clear { background:none; color:var(--link); padding-left:4px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
#app > .bar ~ main { max-width:var(--r-max); padding-top:16px; }
#range { color:var(--soft); font-size:13px; margin:0 0 12px; }
#range .warn { color:var(--red); font-weight:650; }
div.grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
div.grid > .card { margin:0; padding:16px 18px; position:relative; }
.s1 { grid-column:span 1; } .s2 { grid-column:span 2; } .s3 { grid-column:span 3; } .s4 { grid-column:span 4; }
div.grid .card h3 { display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; margin:0 0 10px; font-size:14px; font-weight:650; }
.card h3 .sub { margin:0; color:var(--soft); font-weight:400; font-size:12.5px; }
.card h3 .tools { margin-left:auto; display:flex; gap:4px; }
.card h3 .tools button, .crumbs button, .pager button { padding:3px 10px; border:1px solid var(--line-2); border-radius:999px; background:var(--card); color:var(--link); font-size:12px; font-weight:600; }
.card h3 .tools button:hover, .crumbs button:hover, .pager button:hover { background:var(--link-soft); color:var(--link-hover); border-color:var(--link); }
.crumbs { margin:-4px 0 8px; color:var(--soft); font-size:12.5px; }
.crumbs button { margin-right:6px; }
.card.loading { opacity:.55; }
div.grid > .card.sc { padding:14px 22px; border-radius:var(--r-card); }
.sc h3 { color:var(--soft); font-weight:600; margin-bottom:2px; }
.sc-v { font-size:24px; font-weight:650; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.sc-n { font-size:12.5px; margin-top:2px; }
svg.chart { display:block; width:100%; height:auto; }
svg .grid { stroke:var(--grid-line); stroke-width:1; }
svg .grid.zero { stroke:var(--line-2); }
svg .axis { fill:var(--soft); font-size:12px; }
svg .line { fill:none; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
svg .line.cmp { stroke:var(--field); stroke-dasharray:6 5; stroke-width:1.8; }
svg .hit { fill:transparent; }
svg .hit:hover { fill:var(--hover); fill-opacity:.5; }
svg .hit[data-range], svg [data-filter] { cursor:pointer; }
svg rect[data-tip]:hover, svg path[data-tip]:hover { opacity:.82; }
.legend { display:flex; flex-wrap:wrap; gap:4px 12px; margin:0 0 6px; color:var(--soft); font-size:12px; }
.legend span { display:inline-flex; gap:5px; align-items:center; }
.legend span[data-filter] { cursor:pointer; }
.legend i { display:inline-block; width:10px; height:10px; border-radius:2px; }
.legend i.dash { width:16px; height:0; border-top:2px dashed var(--field); border-radius:0; }
table.bars { width:100%; border-collapse:collapse; }
table.bars td { padding:4px 0; border:0; vertical-align:middle; font-size:13px; }
table.bars tr:hover > td { background:none; }
table.bars tr[data-filter] { cursor:pointer; }
table.bars tr[data-filter]:hover td.name { color:var(--link); }
table.bars td.name { width:30%; max-width:0; padding-right:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
table.bars td.val { width:92px; padding-left:8px; text-align:right; color:var(--soft); font-variant-numeric:tabular-nums; }
table.bars td.val.negv { color:var(--red); }
table.bars .dl { font-size:11px; }
table.bars.grouped td { padding:5px 0; }
.track { position:relative; height:16px; border-radius:3px; background:var(--track); }
.track .zero { position:absolute; top:-3px; bottom:-3px; width:1px; background:var(--soft); }
.track.stack { display:flex; overflow:hidden; }
.track.stack .sg { flex:none; height:16px; }
.fill { height:16px; border-radius:3px; background:var(--series-1); }
.fill.grey { background:var(--bar-grey); }
/* A loss: striped red, drawn left of the zero line. */
.fill.neg { background:repeating-linear-gradient(135deg, var(--red) 0 3px, var(--red-soft) 3px 6px); }
.gbar { display:flex; align-items:center; gap:6px; height:12px; margin:2px 0; color:var(--soft); font-size:11px; }
.gbar .fill { height:10px; border-radius:2px; }
.donut-wrap { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
svg.donut { flex:none; width:170px; height:170px; }
.donut-t { fill:var(--ink); font-size:16px; font-weight:650; }
.dlegend { flex:1; min-width:170px; max-height:220px; overflow:auto; font-size:12.5px; }
.dlegend div { display:flex; gap:7px; align-items:center; padding:2px 0; }
.dlegend div[data-filter] { cursor:pointer; }
.dlegend i { flex:none; width:10px; height:10px; border-radius:2px; }
.dlegend .dn { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dlegend .dv { color:var(--soft); font-variant-numeric:tabular-nums; white-space:nowrap; }
.funnel .frow { display:grid; grid-template-columns:30% 1fr 80px; gap:8px; align-items:center; padding:3px 0; font-size:13px; }
.funnel .frow[data-filter] { cursor:pointer; }
.funnel .fname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.funnel .fbar { display:flex; justify-content:center; }
.funnel .fbar div { height:18px; border-radius:3px; }
.funnel .fval { text-align:right; color:var(--soft); font-variant-numeric:tabular-nums; }
.linkbtn { display:block; padding:12px; border-radius:999px; background:var(--accent-fill); color:#ffffff; font-weight:650; text-align:center; text-decoration:none; }
.linkbtn:hover { background:var(--accent-fill-hover); color:#ffffff; text-decoration:none; }
div.grid .tscroll { max-height:560px; }
table.grid-t { width:100%; border-collapse:collapse; font-size:12.5px; }
table.grid-t th { position:sticky; top:0; z-index:1; padding:8px 8px; background:var(--raised-2); border-bottom:1px solid var(--line-2); font-size:12.5px; font-weight:650; text-align:left; white-space:nowrap; cursor:pointer; user-select:none; }
table.grid-t th.on { color:var(--link); }
table.grid-t td { padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.grid-t td[data-filter], table.grid-t th[data-filter] { cursor:pointer; }
table.grid-t td[data-filter]:hover { color:var(--link); }
table.grid-t .num { text-align:right; font-variant-numeric:tabular-nums; }
table.grid-t .rn { width:1%; color:var(--soft); text-align:right; }
table.grid-t tfoot td { position:sticky; bottom:0; font-weight:650; background:var(--faint); border-top:1px solid var(--line-2); }
table.pivot td.tot { font-weight:650; }
.pager { display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:10px; color:var(--soft); font-size:12.5px; }
.pager button:disabled { opacity:.4; cursor:default; }
.empty { padding:22px 0; color:var(--soft); font-size:13px; text-align:center; }
div.grid .note { margin:8px 0 0; font-size:12.5px; }
div.grid .note.asof { margin:0 0 6px; }
#foot { padding-top:10px; padding-bottom:30px; color:var(--soft); font-size:12.5px; text-align:center; }
#foot:empty { display:none; }
#tip { position:fixed; z-index:50; right:12px; bottom:12px; max-width:360px; padding:7px 10px; border-radius:6px; background:var(--tip); color:var(--tip-ink); font-size:12px; white-space:pre; pointer-events:none; box-shadow:var(--shadow-lg); }
.pop { position:fixed; z-index:30; top:calc(var(--bar-h) + 12px); right:12px; width:300px; max-width:calc(100vw - 24px); max-height:calc(100vh - var(--bar-h) - 24px); max-height:calc(100dvh - var(--bar-h) - 24px); display:flex; flex-direction:column; padding:12px; background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-card); box-shadow:var(--shadow-lg); }
.pop > input[type=search], .pop > .note, .pop > .acts { flex-shrink:0; }
.pop input[type=search] { width:100%; margin-bottom:8px; padding:7px 10px; }
.pop .opts { min-height:0; flex:0 1 auto; max-height:300px; overflow:auto; }
.pop label { flex-direction:row; align-items:center; gap:8px; padding:4px 2px; color:var(--ink); font-size:13px; font-weight:500; cursor:pointer; }
.pop label span.v { margin-left:auto; color:var(--soft); font-size:11.5px; font-variant-numeric:tabular-nums; }
.pop .acts { justify-content:flex-end; margin-top:10px; }
.pop .acts button { padding:6px 14px; background:var(--card); color:var(--link); border-color:var(--line-2); font-size:13px; }
.pop .acts button:hover { background:var(--link-soft); color:var(--link-hover); border-color:var(--link); }
.pop .acts button.go, .pop .acts button.go:hover { background:var(--accent-fill); color:#ffffff; border-color:transparent; }
.pop .acts button.go:hover { background:var(--accent-fill-hover); }

/* ------------------------------------------------ the Data page: what is kept, and a table to change */

table.sets th, table.sets td { padding:10px 8px; }
/* Kept here and What this did: wider than a phone once a table is kept, so each scrolls inside its own card and the page never sideways. */
#sets, #activity { overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
.gridwrap { overflow:auto; max-height:62vh; border:1px solid var(--line); border-radius:var(--r-card); }
table.grid { width:auto; border-collapse:separate; border-spacing:0; font-size:13.5px; }
table.grid th, table.grid td { padding:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
table.grid tbody tr:hover > td { background:none; }
table.grid thead th { position:sticky; top:0; z-index:2; background:var(--raised-2); }
table.grid th input { width:100%; min-width:120px; padding:8px 9px; border:0; border-radius:0; background:none; font-weight:650; font-size:13px; }
table.grid td input { width:100%; min-width:120px; padding:7px 9px; border:0; border-radius:0; background:none; font-size:13.5px; }
table.grid td input:focus, table.grid th input:focus { box-shadow:none; outline:2px solid var(--accent); outline-offset:-2px; }
table.grid td.num input { text-align:right; font-variant-numeric:tabular-nums; }
table.grid td.rownum, table.grid th.rownum { position:sticky; left:0; z-index:1; min-width:54px; padding:7px 9px; background:var(--raised-2); color:var(--soft); font-size:11.5px; text-align:right; }
table.grid thead th.rownum { z-index:3; }
.edhead { margin-bottom:14px; }
.edhead h2 { margin:0; }
#editor .pager { justify-content:flex-start; margin-top:12px; font-size:13.5px; }
#versWrap { margin-top:18px; }
.vers { font-size:13.5px; }
.vers li { margin-bottom:7px; color:var(--soft); }

/* ------------------------------------------------ the Cloud page: the setup checklist, the free plan, the keys */

#setup section { margin-top:0; }
/* The two divisions side by side, each wide enough for its facts. */
#body .tiles { grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); }
/* Sign everyone out ends every sign-in but this one: red, like everything that undoes. */
#signoutall { background:transparent; color:var(--red); border-color:var(--red); }
#signoutall:hover { background:var(--red-soft); color:var(--red); border-color:var(--red); }
.checks { list-style:none; margin:0; padding:0; }
.checks li { display:grid; grid-template-columns:22px 150px minmax(0, 1fr); gap:2px 10px; margin:0; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; }
.checks li:last-child { border-bottom:0; }
.checks .mark { font-weight:700; text-align:center; }
.checks .mark.ok { color:var(--green); } .checks .mark.bad { color:var(--red); } .checks .mark.warn { color:var(--amber); }
@media (max-width:560px) { .checks li { grid-template-columns:22px minmax(0, 1fr); } .checks li .say { grid-column:2; } }
.keyacts { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px; font-size:13px; }
.aklist { list-style:none; margin:0; padding:0; }
.aklist li { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:4px 12px; align-items:center; margin:0; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }
.aklist li:last-child { border-bottom:0; }
.akactions { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.akname { font-weight:650; overflow-wrap:anywhere; }
.akkind { color:var(--soft); font-size:13px; white-space:nowrap; }
/* Cancel key ends a key for good: red, like everything that undoes. */
.aklist .btn.quiet { color:var(--red); border-color:var(--red); }
.aklist .btn.quiet:hover { background:var(--red-soft); color:var(--red); border-color:var(--red); }
.akform { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-top:14px; font-size:13px; }
.akform label { min-width:0; }
.akform .akwide { flex:1 1 200px; }
.akform select, .akform input { min-width:0; max-width:100%; }
@media (max-width:560px) { .akform label, .akform .btn { flex:1 1 100%; } }
.retired { margin-top:16px; padding-top:10px; border-top:1px solid var(--line); font-size:14px; }
.retired summary { cursor:pointer; color:var(--link); font-weight:650; }

/* ------------------------------------------------ the Upload and Download pages: steps, a file to drop, progress */

.card h2.next { margin-top:20px; }
.drop { display:block; margin-top:8px; padding:26px 18px; border:2px dashed var(--line-2); border-radius:var(--r-card); background:var(--faint); color:var(--ink); text-align:center; cursor:pointer; font-weight:500; }
.drop.over { border-color:var(--link); background:var(--link-soft); }
.drop input { display:block; margin:10px auto 0; max-width:100%; }
.drop b { font-size:16px; font-weight:650; }
#progress progress { display:block; width:100%; height:8px; margin:14px 0 6px; overflow:hidden; border:0; border-radius:99px; background:var(--track); accent-color:var(--link); }
#progress progress::-webkit-progress-bar { background:var(--track); }
#progress progress::-webkit-progress-value { background:var(--link); }
#progress progress::-moz-progress-bar { background:var(--link); }

.flush { margin:0 !important; }
.mt8 { margin:8px 0 0 !important; }
.small-note { font-size:13.5px; }
.state-failed { color:var(--red); }
.state-started { color:var(--amber); }
.state-done { color:var(--green); }
.responsive-chart { width:100%; height:auto; }
.cgrey { background:#aab2c0 !important; }
.c0 { background:#FC0108 !important; } .c1 { background:#010101 !important; } .c2 { background:#F7A8AA !important; }
.c3 { background:#EB6D70 !important; } .c4 { background:#393939 !important; } .c5 { background:#FC0185 !important; }
.c6 { background:#FC7801 !important; } .c7 { background:#01FCF6 !important; } .c8 { background:#0185FC !important; }
.c9 { background:#01FC78 !important; } .c10 { background:#0108FC !important; } .c11 { background:#85FC01 !important; }
.c12 { background:#F7A8D1 !important; } .c13 { background:#A8D1F7 !important; } .c14 { background:#A8AAF7 !important; }
.c15 { background:#4294DF !important; } .c16 { background:#8E42DF !important; } .c17 { background:#EB6DAF !important; }
.c18 { background:#EBA96D !important; } .c19 { background:#6D70EB !important; }
.heat1 { background:rgba(252,1,8,.09); } .heat2 { background:rgba(252,1,8,.14); } .heat3 { background:rgba(252,1,8,.19); }
.heat4 { background:rgba(252,1,8,.24); } .heat5 { background:rgba(252,1,8,.29); } .heat6 { background:rgba(252,1,8,.34); }
.heat7 { background:rgba(252,1,8,.39); } .heat8 { background:rgba(252,1,8,.44); } .heat9 { background:rgba(252,1,8,.49); }
.heat10 { background:rgba(252,1,8,.54); }
.attr { padding:12px 0; border-top:1px solid var(--line); }
.attr .model { font-weight:650; overflow-wrap:anywhere; }
.attr .fields { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)) auto; gap:8px; margin-top:8px; align-items:end; }
.attr .fields label { font-size:12px; min-width:0; }
.attr .fields input { width:100%; }

/* ------------------------------------------------ the People page */

td .acts { display:flex; flex-wrap:wrap; gap:6px; margin:0; }
td .acts .btn, td .btn { padding:5px 12px; font-size:13px; }

/* ------------------------------------------------ a phone or a narrow window: the sidebar folds into a drawer behind the menu button */

@media (max-width:1023.98px) {
  .top .today, .top .meta, .top .person-btn .first { display:none; }
  .fresh-line:not([hidden]) { display:block; max-width:var(--max); margin:0 auto; padding:12px var(--gutter) 0; color:var(--soft); font-size:12.5px; line-height:1.4; overflow-wrap:anywhere; }
}
@media (max-width:980px) {
  div.grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .s3, .s4 { grid-column:span 2; }
}
@media (max-width:767.98px) {
  :root { --gutter:16px; }
  .workspace-hero { padding:22px; border-radius:14px; gap:14px; }
  .workspace-hero h1 { font-size:26px; }
  .hero-mark { width:74px; height:74px; border-radius:16px; }
  .hero-mark svg { width:62px; height:62px; }
  .module-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .section-heading { align-items:flex-start; flex-direction:column; gap:6px; }
  .dashboard-charts { grid-template-columns:minmax(0,1fr); }
  #app { padding-left:0; }
  .top { gap:6px; padding:0 8px 0 0; }
  .side-head { width:auto; padding:0 2px 0 6px; }
  /* On a phone the mark alone; the name stays for screen readers. */
  .logo { width:28px; height:28px; padding-left:28px; overflow:hidden; color:transparent; font-size:0; }
  .logo span { color:transparent; }
  .logo small { display:none; }
  .gate .brand .logo { width:auto; height:auto; padding-left:36px; color:var(--ink); font-size:18px; }
  .gate .brand .logo span { color:var(--mark); }
  .gate .brand .logo small { display:block; }
  .top .where { flex:1 1 auto; font-size:14.5px; }
  .top .new-bar { display:inline-grid; }
  .top .person-btn { padding:2px; }
  .side-panel { display:none; z-index:42; width:min(300px,86vw); padding:16px 10px 16px; overflow-y:auto; box-shadow:var(--shadow-lg); }
  .top.open .side-panel { display:flex; }
  .top.open::after { content:""; position:fixed; z-index:41; top:var(--bar-h); right:0; bottom:0; left:0; background:var(--backdrop); }
  .new-menu { top:calc(var(--bar-h) + 6px); left:8px; right:8px; width:auto; grid-template-columns:minmax(0,1fr); }
  main { padding:18px var(--gutter) 56px; }
  h1 { font-size:21px; }
  .tabs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:0 20px; }
  .tabs::-webkit-scrollbar { display:none; }
}
@media (max-width:560px) {
  .workspace-hero { padding:20px; }
  .hero-mark { display:none; }
  .dashboard-home .tiles, #body .tiles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .dashboard-home .dashboard-metric .v { font-size:24px; overflow-wrap:anywhere; }
  .metric-icon { width:28px; height:28px; border-radius:8px; }
  .metric-icon svg { width:17px; height:17px; }
  .module-grid { grid-template-columns:minmax(0,1fr); }
  .module-links { flex-direction:row; flex-wrap:wrap; gap:4px 14px; }
  main { padding:16px 16px 48px; }
  .card { padding:16px 14px; }
  .tile { padding:16px; }
  .tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  .tile .v { font-size:21px; }
  div.grid { grid-template-columns:minmax(0, 1fr); }
  .permission-list { grid-template-columns:minmax(0, 1fr); }
  .s1, .s2, .s3, .s4 { grid-column:span 1; }
  .dash table { table-layout:fixed; }
  .dash td.name { width:36%; padding-right:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dash td.val { width:72px; padding-left:6px; }
  .range label { flex:1 1 100%; }
  .range select { width:100%; }
  .acts .btn { width:100%; }
  form.grid > label, .field, form.grid > .btn { flex:1 1 100%; }
  /* A form's footer keeps its row: Cancel at the left, the green button at the right. */
  .form-foot .btn, .acts .form-foot .btn { width:auto; }
  .attr .fields { grid-template-columns:minmax(0, 1fr); }
  .attr .fields .btn { width:100%; }
  dl { grid-template-columns:minmax(0, 1fr); gap:0 0; }
  dd { margin-bottom:8px; }
  .checks li { grid-template-columns:22px minmax(0, 1fr); }
  .gate { padding:16px; }
  .gate .card { padding:24px 18px; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* ------------------------------------------------ paper: light, no bars, no buttons */

@media print {
  :root, html[data-theme] {
    color-scheme:light;
    --bg:#fff; --side:#fff; --topbar:#fff; --card:#fff; --raised:#fff; --raised-2:#fff; --hover:#fff; --ink:#000; --label:#000; --soft:#444; --placeholder:#444;
    --line:#ccc; --line-2:#999; --field:#999; --faint:transparent; --link:#000; --link-line:transparent; --shadow:none;
  }
  .top, #app > .bar, #tabs, #controls, #chips, .pop, #tip, button { display:none !important; }
  html, body { background:#fff !important; color:#000; }
  #app { padding:0; }
  main { max-width:none; padding:0; }
  .card { border:1px solid #ccc; box-shadow:none; break-inside:avoid; }
  .workspace-hero { background:#ffffff; border-color:#cccccc; }
  .workspace-modules, .hero-mark { display:none; }
  .dashboard-charts { display:block; }
}

/* ------------------------------------------------ the report's palette in the dark look
   charts.js draws its series in the reports' own colours, as attributes and
   as style="" on the legend's swatches. Two of them are near black and would
   vanish on the dark cards: here they are lifted to light greys. The dark
   blue (#0108FC: November, MN, Unicorp E-commerce) is lifted to a lighter
   blue, 3.8:1 on the card. The white lines between a donut's slices take
   the card's colour. */

html[data-theme="dark"] svg [fill="#010101"] { fill:#d5d8de; }
html[data-theme="dark"] svg [stroke="#010101"] { stroke:#d5d8de; }
html[data-theme="dark"] svg [fill="#393939"] { fill:#9aa1ad; }
html[data-theme="dark"] svg [stroke="#393939"] { stroke:#9aa1ad; }
html[data-theme="dark"] [style*="background:#010101"] { background:#d5d8de !important; }
html[data-theme="dark"] [style*="background:#393939"] { background:#9aa1ad !important; }
html[data-theme="dark"] svg [fill="#0108FC"] { fill:#5a66ff; }
html[data-theme="dark"] svg [stroke="#0108FC"] { stroke:#5a66ff; }
html[data-theme="dark"] [style*="background:#0108FC"] { background:#5a66ff !important; }
html[data-theme="dark"] svg [stroke="#fff"] { stroke:var(--card); }

/* ------------------------------------------------ Review imports and Sell-out by brand
   The list's open file is marked; a line left out of a brand report is
   greyed and struck through; the manual check's boxes sit inside the table
   cells; the layout's columns are one row each, with their heading box and
   Up and Down. */

tr.sel > td { background:var(--blue-soft); }
tr.out > td { color:var(--soft); text-decoration:line-through; }
tr.out > td:first-child { text-decoration:none; }
table.cells td { white-space:nowrap; }
table.cells td input[type=text] { width:100%; min-width:7em; padding:6px 8px; }
table.cells td.tight { min-width:9em; }
table.cells td.tight label.tick { margin:0 0 6px; }
.layout-cols { list-style:none; margin:10px 0 0; padding:0; }
.layout-cols li { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:8px 0; border-bottom:1px solid var(--line); }
.layout-cols li label.tick { margin:0; min-width:11em; }
.layout-cols li input[type=text] { flex:1 1 140px; }
.layout-cols li .btn { flex:none; padding:5px 12px; }
details > summary { cursor:pointer; color:var(--link); font-weight:600; margin:10px 0; }


/* Analytics: approved sales flows beside a separately scoped stock snapshot. */
.analytics-controls { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-bottom:16px; }
.analytics-controls label { display:flex; flex-direction:column; gap:5px; font-size:13px; min-width:140px; flex:1; }
.analytics-controls input, .analytics-controls select { width:100%; min-height:40px; margin:0; }
.analytics-controls button { margin:0; min-height:40px; }
.analytics-page .card { margin-bottom:18px; }
.analytics-page .tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:8px; }
.analytics-page .tile { min-width:0; }
.analytics-page .tile .v { font-size:clamp(21px,2.4vw,31px); overflow-wrap:anywhere; }
.analytics-comparison { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.analytics-comparison .tile { box-shadow:none; border:0; padding:12px 0; }
.analytics-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.analytics-columns > * { min-width:0; }
.analytics-bars { display:flex; flex-direction:column; gap:4px; }
.analytics-bar { display:grid; grid-template-columns:minmax(90px,1fr) minmax(50px,1.2fr) auto; gap:10px; align-items:center; width:100%; padding:9px 0; background:transparent; color:var(--ink); border:0; border-radius:0; text-align:left; font-size:13px; }
.analytics-bar:hover { background:var(--blue-soft); color:var(--ink); }
.analytics-name { overflow-wrap:anywhere; }
.analytics-track { height:9px; background:var(--line); border-radius:4px; overflow:hidden; }
.analytics-fill { display:block; height:100%; background:var(--blue); }
.analytics-fill.negative { background:var(--red); }
.analytics-value { white-space:nowrap; font-variant-numeric:tabular-nums; }
.analytics-trend { width:100%; height:auto; min-height:180px; }
.analytics-trend text { fill:var(--soft); font-size:12px; }
.analytics-grid { stroke:var(--line); stroke-width:1; }
.analytics-series { fill:none; stroke:var(--blue); stroke-width:2.5; stroke-linejoin:round; }
.analytics-point { fill:var(--blue); }
.analytics-table { overflow-x:auto; max-height:480px; }
.analytics-table table { width:100%; border-collapse:collapse; font-size:13px; }
.analytics-table th, .analytics-table td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
.analytics-table th { position:sticky; top:0; background:var(--card); white-space:nowrap; }
.analytics-table td:first-child { min-width:130px; }
.analytics-definitions summary, .analytics-page details summary { cursor:pointer; font-weight:600; padding:10px 0; }
.analytics-definitions p { color:var(--soft); line-height:1.6; }
.lookup-controls { box-shadow:none; border:0; padding:0; margin:14px 0 8px; }
.lookup-controls .lookup-query { flex:4 1 320px; }
.transaction-lookup .analytics-table { max-height:560px; }
.transaction-lookup td { vertical-align:top; }
@media(max-width:850px) { .analytics-page .tiles { grid-template-columns:repeat(2,minmax(0,1fr)); } .analytics-columns { grid-template-columns:1fr; } }
@media(max-width:540px) { .analytics-comparison { grid-template-columns:1fr; } .analytics-controls label { min-width:120px; } .analytics-trend { min-height:140px; } .analytics-bar { grid-template-columns:minmax(85px,1fr) minmax(30px,.7fr) auto; gap:7px; font-size:12px; } }

/* ------------------------------------------------ product bundles */

.bundle-search { flex:1 1 260px; }
.bundle-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.bundle-heading h2 { margin-bottom:4px; }
.bundle-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.bundle-form label { min-width:0; }
.bundle-form input, .bundle-form textarea { width:100%; }
.bundle-form textarea { resize:vertical; min-height:132px; line-height:1.55; }
.bundle-wide, .bundle-actions { grid-column:1 / -1; }
.bundle-check { display:flex !important; flex-direction:row !important; align-items:center; gap:9px; }
.bundle-check input { width:auto; }
.bundle-actions { display:flex; justify-content:flex-end; gap:10px; }
.bundle-parts { margin:0; padding-left:18px; min-width:220px; }
.bundle-parts li + li { margin-top:5px; }
.bundle-state { display:inline-block; padding:3px 9px; border-radius:999px; background:var(--faint); color:var(--soft); font-size:12px; font-weight:650; white-space:nowrap; }
.bundle-state.on { background:var(--green-soft); color:var(--green); }
.bundle-state.off { background:var(--red-soft); color:var(--red); }
.bundle-mark { display:flex; flex-wrap:wrap; gap:6px; min-width:230px; }
.bundle-mark .btn { padding:6px 9px; font-size:12px; }
.bundle-mark .btn:disabled { opacity:.48; cursor:default; }
.bundles-page .analytics-table td { vertical-align:top; }
@media(max-width:700px) {
  .bundle-form { grid-template-columns:1fr; }
  .bundle-form > * { grid-column:1; }
  .bundle-heading { align-items:stretch; flex-direction:column; }
}

/* People: module-first access and row-level brand assignments. */
.module-access { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.module-card { min-width:0; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--raised); }
.module-card h3 { margin:0 0 10px; font-size:14px; color:var(--ink); }
.module-card .tick { margin:7px 0; }
.access-scope { grid-column:1 / -1; padding:18px; border:1px solid var(--blue); border-radius:12px; background:var(--blue-soft); }
.access-scope h3 { margin-top:0; }
.scope-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:14px 0; }
.scope-grid fieldset { min-width:0; margin:0; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.scope-options { max-height:220px; overflow:auto; padding-right:6px; }
.scope-options .tick { margin:6px 0; }
@media(max-width:700px) {
  .module-access, .scope-grid { grid-template-columns:1fr; }
}

/* ------------------------------------------------ promotional support and claims */

.promo-controls label { min-width:135px; }
.promo-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
.promotions-page .analytics-table { max-height:520px; }
.promotions-page td { vertical-align:top; }
.promo-export { align-items:flex-end; }
.bundle-state.promo-ongoing, .bundle-state.claim-paid { background:var(--green-soft); color:var(--green); }
.bundle-state.promo-upcoming, .bundle-state.claim-submitted, .bundle-state.claim-approved { background:var(--blue-soft); color:var(--blue); }
.bundle-state.promo-ended, .bundle-state.promo-inactive, .bundle-state.claim-cancelled { background:var(--faint); color:var(--soft); }
.bundle-state.claim-partially_paid, .bundle-state.claim-disputed { background:var(--amber-soft); color:var(--amber); }
.bundle-state.claim-rejected { background:var(--red-soft); color:var(--red); }
@media(max-width:700px) {
  .promo-form { grid-template-columns:1fr; }
  .promo-form > * { grid-column:1; }
  .promo-export { align-items:stretch; }
}

/* CSP-safe quantized geometry for data-driven bars and zero markers. */
.w0 { width:0% !important; } .ml0 { margin-left:0% !important; } .left0 { left:0% !important; }
.w1 { width:1% !important; } .ml1 { margin-left:1% !important; } .left1 { left:1% !important; }
.w2 { width:2% !important; } .ml2 { margin-left:2% !important; } .left2 { left:2% !important; }
.w3 { width:3% !important; } .ml3 { margin-left:3% !important; } .left3 { left:3% !important; }
.w4 { width:4% !important; } .ml4 { margin-left:4% !important; } .left4 { left:4% !important; }
.w5 { width:5% !important; } .ml5 { margin-left:5% !important; } .left5 { left:5% !important; }
.w6 { width:6% !important; } .ml6 { margin-left:6% !important; } .left6 { left:6% !important; }
.w7 { width:7% !important; } .ml7 { margin-left:7% !important; } .left7 { left:7% !important; }
.w8 { width:8% !important; } .ml8 { margin-left:8% !important; } .left8 { left:8% !important; }
.w9 { width:9% !important; } .ml9 { margin-left:9% !important; } .left9 { left:9% !important; }
.w10 { width:10% !important; } .ml10 { margin-left:10% !important; } .left10 { left:10% !important; }
.w11 { width:11% !important; } .ml11 { margin-left:11% !important; } .left11 { left:11% !important; }
.w12 { width:12% !important; } .ml12 { margin-left:12% !important; } .left12 { left:12% !important; }
.w13 { width:13% !important; } .ml13 { margin-left:13% !important; } .left13 { left:13% !important; }
.w14 { width:14% !important; } .ml14 { margin-left:14% !important; } .left14 { left:14% !important; }
.w15 { width:15% !important; } .ml15 { margin-left:15% !important; } .left15 { left:15% !important; }
.w16 { width:16% !important; } .ml16 { margin-left:16% !important; } .left16 { left:16% !important; }
.w17 { width:17% !important; } .ml17 { margin-left:17% !important; } .left17 { left:17% !important; }
.w18 { width:18% !important; } .ml18 { margin-left:18% !important; } .left18 { left:18% !important; }
.w19 { width:19% !important; } .ml19 { margin-left:19% !important; } .left19 { left:19% !important; }
.w20 { width:20% !important; } .ml20 { margin-left:20% !important; } .left20 { left:20% !important; }
.w21 { width:21% !important; } .ml21 { margin-left:21% !important; } .left21 { left:21% !important; }
.w22 { width:22% !important; } .ml22 { margin-left:22% !important; } .left22 { left:22% !important; }
.w23 { width:23% !important; } .ml23 { margin-left:23% !important; } .left23 { left:23% !important; }
.w24 { width:24% !important; } .ml24 { margin-left:24% !important; } .left24 { left:24% !important; }
.w25 { width:25% !important; } .ml25 { margin-left:25% !important; } .left25 { left:25% !important; }
.w26 { width:26% !important; } .ml26 { margin-left:26% !important; } .left26 { left:26% !important; }
.w27 { width:27% !important; } .ml27 { margin-left:27% !important; } .left27 { left:27% !important; }
.w28 { width:28% !important; } .ml28 { margin-left:28% !important; } .left28 { left:28% !important; }
.w29 { width:29% !important; } .ml29 { margin-left:29% !important; } .left29 { left:29% !important; }
.w30 { width:30% !important; } .ml30 { margin-left:30% !important; } .left30 { left:30% !important; }
.w31 { width:31% !important; } .ml31 { margin-left:31% !important; } .left31 { left:31% !important; }
.w32 { width:32% !important; } .ml32 { margin-left:32% !important; } .left32 { left:32% !important; }
.w33 { width:33% !important; } .ml33 { margin-left:33% !important; } .left33 { left:33% !important; }
.w34 { width:34% !important; } .ml34 { margin-left:34% !important; } .left34 { left:34% !important; }
.w35 { width:35% !important; } .ml35 { margin-left:35% !important; } .left35 { left:35% !important; }
.w36 { width:36% !important; } .ml36 { margin-left:36% !important; } .left36 { left:36% !important; }
.w37 { width:37% !important; } .ml37 { margin-left:37% !important; } .left37 { left:37% !important; }
.w38 { width:38% !important; } .ml38 { margin-left:38% !important; } .left38 { left:38% !important; }
.w39 { width:39% !important; } .ml39 { margin-left:39% !important; } .left39 { left:39% !important; }
.w40 { width:40% !important; } .ml40 { margin-left:40% !important; } .left40 { left:40% !important; }
.w41 { width:41% !important; } .ml41 { margin-left:41% !important; } .left41 { left:41% !important; }
.w42 { width:42% !important; } .ml42 { margin-left:42% !important; } .left42 { left:42% !important; }
.w43 { width:43% !important; } .ml43 { margin-left:43% !important; } .left43 { left:43% !important; }
.w44 { width:44% !important; } .ml44 { margin-left:44% !important; } .left44 { left:44% !important; }
.w45 { width:45% !important; } .ml45 { margin-left:45% !important; } .left45 { left:45% !important; }
.w46 { width:46% !important; } .ml46 { margin-left:46% !important; } .left46 { left:46% !important; }
.w47 { width:47% !important; } .ml47 { margin-left:47% !important; } .left47 { left:47% !important; }
.w48 { width:48% !important; } .ml48 { margin-left:48% !important; } .left48 { left:48% !important; }
.w49 { width:49% !important; } .ml49 { margin-left:49% !important; } .left49 { left:49% !important; }
.w50 { width:50% !important; } .ml50 { margin-left:50% !important; } .left50 { left:50% !important; }
.w51 { width:51% !important; } .ml51 { margin-left:51% !important; } .left51 { left:51% !important; }
.w52 { width:52% !important; } .ml52 { margin-left:52% !important; } .left52 { left:52% !important; }
.w53 { width:53% !important; } .ml53 { margin-left:53% !important; } .left53 { left:53% !important; }
.w54 { width:54% !important; } .ml54 { margin-left:54% !important; } .left54 { left:54% !important; }
.w55 { width:55% !important; } .ml55 { margin-left:55% !important; } .left55 { left:55% !important; }
.w56 { width:56% !important; } .ml56 { margin-left:56% !important; } .left56 { left:56% !important; }
.w57 { width:57% !important; } .ml57 { margin-left:57% !important; } .left57 { left:57% !important; }
.w58 { width:58% !important; } .ml58 { margin-left:58% !important; } .left58 { left:58% !important; }
.w59 { width:59% !important; } .ml59 { margin-left:59% !important; } .left59 { left:59% !important; }
.w60 { width:60% !important; } .ml60 { margin-left:60% !important; } .left60 { left:60% !important; }
.w61 { width:61% !important; } .ml61 { margin-left:61% !important; } .left61 { left:61% !important; }
.w62 { width:62% !important; } .ml62 { margin-left:62% !important; } .left62 { left:62% !important; }
.w63 { width:63% !important; } .ml63 { margin-left:63% !important; } .left63 { left:63% !important; }
.w64 { width:64% !important; } .ml64 { margin-left:64% !important; } .left64 { left:64% !important; }
.w65 { width:65% !important; } .ml65 { margin-left:65% !important; } .left65 { left:65% !important; }
.w66 { width:66% !important; } .ml66 { margin-left:66% !important; } .left66 { left:66% !important; }
.w67 { width:67% !important; } .ml67 { margin-left:67% !important; } .left67 { left:67% !important; }
.w68 { width:68% !important; } .ml68 { margin-left:68% !important; } .left68 { left:68% !important; }
.w69 { width:69% !important; } .ml69 { margin-left:69% !important; } .left69 { left:69% !important; }
.w70 { width:70% !important; } .ml70 { margin-left:70% !important; } .left70 { left:70% !important; }
.w71 { width:71% !important; } .ml71 { margin-left:71% !important; } .left71 { left:71% !important; }
.w72 { width:72% !important; } .ml72 { margin-left:72% !important; } .left72 { left:72% !important; }
.w73 { width:73% !important; } .ml73 { margin-left:73% !important; } .left73 { left:73% !important; }
.w74 { width:74% !important; } .ml74 { margin-left:74% !important; } .left74 { left:74% !important; }
.w75 { width:75% !important; } .ml75 { margin-left:75% !important; } .left75 { left:75% !important; }
.w76 { width:76% !important; } .ml76 { margin-left:76% !important; } .left76 { left:76% !important; }
.w77 { width:77% !important; } .ml77 { margin-left:77% !important; } .left77 { left:77% !important; }
.w78 { width:78% !important; } .ml78 { margin-left:78% !important; } .left78 { left:78% !important; }
.w79 { width:79% !important; } .ml79 { margin-left:79% !important; } .left79 { left:79% !important; }
.w80 { width:80% !important; } .ml80 { margin-left:80% !important; } .left80 { left:80% !important; }
.w81 { width:81% !important; } .ml81 { margin-left:81% !important; } .left81 { left:81% !important; }
.w82 { width:82% !important; } .ml82 { margin-left:82% !important; } .left82 { left:82% !important; }
.w83 { width:83% !important; } .ml83 { margin-left:83% !important; } .left83 { left:83% !important; }
.w84 { width:84% !important; } .ml84 { margin-left:84% !important; } .left84 { left:84% !important; }
.w85 { width:85% !important; } .ml85 { margin-left:85% !important; } .left85 { left:85% !important; }
.w86 { width:86% !important; } .ml86 { margin-left:86% !important; } .left86 { left:86% !important; }
.w87 { width:87% !important; } .ml87 { margin-left:87% !important; } .left87 { left:87% !important; }
.w88 { width:88% !important; } .ml88 { margin-left:88% !important; } .left88 { left:88% !important; }
.w89 { width:89% !important; } .ml89 { margin-left:89% !important; } .left89 { left:89% !important; }
.w90 { width:90% !important; } .ml90 { margin-left:90% !important; } .left90 { left:90% !important; }
.w91 { width:91% !important; } .ml91 { margin-left:91% !important; } .left91 { left:91% !important; }
.w92 { width:92% !important; } .ml92 { margin-left:92% !important; } .left92 { left:92% !important; }
.w93 { width:93% !important; } .ml93 { margin-left:93% !important; } .left93 { left:93% !important; }
.w94 { width:94% !important; } .ml94 { margin-left:94% !important; } .left94 { left:94% !important; }
.w95 { width:95% !important; } .ml95 { margin-left:95% !important; } .left95 { left:95% !important; }
.w96 { width:96% !important; } .ml96 { margin-left:96% !important; } .left96 { left:96% !important; }
.w97 { width:97% !important; } .ml97 { margin-left:97% !important; } .left97 { left:97% !important; }
.w98 { width:98% !important; } .ml98 { margin-left:98% !important; } .left98 { left:98% !important; }
.w99 { width:99% !important; } .ml99 { margin-left:99% !important; } .left99 { left:99% !important; }
.w100 { width:100% !important; } .ml100 { margin-left:100% !important; } .left100 { left:100% !important; }

.offline-status { position:fixed; right:12px; bottom:12px; z-index:20; max-width:calc(100vw - 24px); padding:8px 12px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); color:var(--link); font-size:13px; }
body:has(.dashboard-home) .offline-status { position:static; display:block; width:fit-content; margin:0 32px 24px calc(var(--side-w) + var(--gutter)); }
@media (max-width:767.98px) { body:has(.dashboard-home) .offline-status { margin:0 16px 24px; } }
html[data-side="closed"] body:has(.dashboard-home) .offline-status { margin-left:var(--gutter); }
@media (max-width:600px) { body:has(#update-status) .offline-status { position:static; display:block; width:fit-content; margin:16px; } }
body:has(#offline-jobs) main { max-width:960px; margin:24px auto 70px; padding:0 18px; }
#offline-jobs article { overflow-wrap:anywhere; }
#offline-jobs .acts { flex-wrap:wrap; }
#offline-file { max-width:100%; }