/* Aiverix Brand Book v1.0 (2026; docs/research/2026-11-03-brand.md): Aiverix Blue #1F3BFF leads (buttons, links,
   highlights), Royal Blue #2D6BE4 for hover, Navy #001C42 for deep text, Slate #506A8D body text, Gray #718096
   captions; tints Sky #EBF6FF (badges), Mist #D6E4F0 (dividers), Cloud #F0F5FF (sections), White (surfaces).
   Montserrat is the product UI face (500 body, 600 UI, 700 headings), served by the gateway (SIL Open Font License,
   templates/fonts/OFL.txt). Small text uses Slate, not Gray: Gray #718096 is under the WCAG AA contrast of 4.5:1 on
   white and the tints (4.0:1 and less), so it is kept for nothing that must be read. */
@font-face { font-family: Montserrat; font-weight: 500; font-display: swap; src: url(/cabinet/fonts/montserrat-500.woff2) format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 600; font-display: swap; src: url(/cabinet/fonts/montserrat-600.woff2) format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 700; font-display: swap; src: url(/cabinet/fonts/montserrat-700.woff2) format("woff2"); }
:root {
  --brand: #1f3bff; --brand-bright: #2d6be4; --navy: #001c42; --tint: #f0f5ff; --tint-strong: #ebf6ff;
  --ink: #001c42; --muted: #506a8d; --slate: #506a8d; --line: #d6e4f0; --accent: #1f3bff; --bad: #c62828; --ok: #15803d;
  --wait: #b45309; --heading: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font: 500 14px/1.55 Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--tint); }
header { display: flex; align-items: center; padding: 0 24px; min-height: 64px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 1px 3px rgba(0, 28, 66, .06); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); text-decoration: none; }
.brand img { display: block; height: 33px; width: auto; }  /* the lockup is never under 120 px wide */
.brand .product { font-size: 13px; padding-left: 10px; border-left: 1px solid var(--line); }
/* The menu on the left (CLAUDE.md §10): groups by the accountant's day, the settings at the bottom. */
body.with-menu { padding-left: 236px; }
.sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 236px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px 12px 14px; background: #fff; border-right: 1px solid var(--line); z-index: 10; }
.sidebar > .brand { padding: 0 8px 6px; }
.sidebar > .brand .product { white-space: nowrap; font-size: 12px; }
.sidebar > .badge { align-self: flex-start; margin-left: 8px; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
/* Groups fold like a sidebar section in Apple's Mail: the title, a chevron that turns, a short smooth slide. */
:root { interpolate-size: allow-keywords; }
.sidebar details.group { display: block; }
.sidebar details.group.bottom { margin-top: auto; padding-top: 14px; }
.sidebar summary { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin-top: 10px; padding: 0 10px; border-radius: 8px; list-style: none; cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--muted); user-select: none; }
.sidebar summary::-webkit-details-marker { display: none; }
.sidebar details.group:first-child summary { margin-top: 0; }
.sidebar summary:hover { background: var(--tint); color: var(--navy); }
.sidebar summary:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: -2px; }
.sidebar summary .chevron { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.sidebar details[open] > summary .chevron { transform: rotate(90deg); }
.sidebar details.group::details-content { height: 0; overflow: clip; transition: height .2s ease, content-visibility .2s allow-discrete; }
.sidebar details.group[open]::details-content { height: auto; }
.sidebar .items { display: grid; gap: 2px; padding-top: 2px; }
.sidebar nav a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border-radius: 8px; color: var(--navy); text-decoration: none; font-weight: 600; transition: background-color .15s ease, color .15s ease; }
.sidebar nav a .icon { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); transition: color .15s ease; }
.sidebar nav a:hover { background: var(--tint); color: var(--brand); }
.sidebar nav a:hover .icon, .sidebar nav a.active .icon { color: var(--brand); }
.sidebar nav a.active { background: var(--tint-strong); color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .sidebar *, .sidebar details.group::details-content { transition: none !important; } }
.sidebar .who { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 10px 0; border-top: 1px solid var(--line); }
.sidebar .who .person { display: grid; line-height: 1.25; color: var(--ink); font-weight: 600; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.sidebar .who .person .hint { font-size: 12px; font-weight: 500; }
.sidebar form { display: inline; }
.sidebar .who button.link { white-space: nowrap; }
.topbar { display: none; }
input.menu-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.menu-button { padding: 6px 14px; border-radius: 8px; background: var(--tint-strong); color: var(--navy); font-weight: 700; cursor: pointer; }
input.menu-toggle:focus-visible + .topbar label.menu-button { outline: 2px solid var(--brand-bright); }
main { max-width: 1160px; margin: 0 auto; padding: 20px; }
h1 { font: 700 26px/1.25 var(--heading); color: var(--navy); margin: 8px 0 18px; }
h2 { font: 700 18px/1.3 var(--heading); color: var(--navy); margin: 26px 0 10px; }
a { color: var(--accent); }
a:hover { color: var(--brand-bright); }
table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 28, 66, .05); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--slate); font-size: 12px; letter-spacing: .02em; background: var(--tint-strong); }
tbody tr:nth-child(even) { background: #f8faff; }
tbody tr:hover { background: var(--tint); }
tbody tr:last-child td { border-bottom: 0; }
th:first-child { border-top-left-radius: 9px; }
th:last-child { border-top-right-radius: 9px; }
form.narrow { max-width: 420px; display: grid; gap: 10px; }
label { display: grid; gap: 4px; }
input, select { font: inherit; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 1px; }
button { font: inherit; font-weight: 700; padding: 8px 18px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; }
button:hover { background: var(--brand-bright); }
button.link:hover { text-decoration: underline; background: none; }
button.secondary { background: var(--tint-strong); color: var(--navy); }
a.button { display: inline-block; font-weight: 700; padding: 8px 18px; border-radius: 8px; background: var(--accent); color: #fff; text-decoration: none; }
a.button:hover { background: var(--brand-bright); }
a.button.secondary { background: var(--tint-strong); color: var(--navy); }
form.inline-form { display: flex; gap: 8px; align-items: center; }
form.inline-form select { max-width: 280px; }
div.fill { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-bottom: 6px; }
div.fill label { flex: 1 1 320px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
a.tile { display: grid; gap: 4px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 10px; color: var(--navy); text-decoration: none; }
a.tile:hover { border-color: var(--brand-bright); }
a.tile span { color: var(--slate, inherit); font-size: 0.9em; }
.attention { margin-bottom: 16px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--bad); border-radius: 10px; }
.attention h2 { margin: 0 0 6px; font-size: 1.05em; }
.attention table { margin: 0; }
.copy { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 28px 32px; }
.copy-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-bottom: 2px solid var(--navy); padding-bottom: 12px; margin-bottom: 16px; }
.copy-head { position: static; background: none; box-shadow: none; padding: 0 0 12px; height: auto; }
.copy-head h1 { margin: 0; }
.copy-number { font-size: 1.2em; font-weight: 700; margin: 4px 0 0; }
.parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-bottom: 16px; }
.parties h2 { font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 6px; }
.parties p { margin: 2px 0; }
.copy-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-top: 16px; }
.copy-foot table.vat { width: auto; flex: 0 1 420px; }
.copy-note { margin-top: 20px; font-size: 0.85em; color: var(--slate, inherit); }
@media print {
  body.printable > header, body.printable > .sidebar, body.printable > .topbar, body.printable .no-print { display: none; }
  body.printable.with-menu { padding-left: 0; }
  body.printable main { margin: 0; padding: 0; max-width: none; }
  body.printable, body.printable main { background: #fff; }
  .copy { border: 0; padding: 0; }
}
.upload-box { margin: 0 0 16px; padding: 12px 14px; background: #fff; border: 1px dashed var(--line); border-radius: 10px; }
form.upload-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
form.upload-inline label { flex: 1 1 320px; }
form.upload-inline input[type=file] { display: block; margin-top: 6px; }
.upload-box .hint { margin: 8px 0 0; }
button.default-submit { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
button.secondary:hover { background: var(--line); }
button.danger { background: var(--bad); }
button.link { background: none; color: var(--accent); padding: 0; font-weight: 600; }
td.actions form { display: inline; margin-right: 6px; }
.error { padding: 10px 14px; background: #fdecea; border: 1px solid #f5c2bd; color: var(--bad); border-radius: 8px; }
.hint { color: var(--muted); }
p, dd, td.reason { color: var(--slate); }
.badge.test { background: #fef3c7; color: #7a4a00; padding: 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.status { padding: 2px 9px; border-radius: 999px; background: var(--tint-strong); color: var(--navy); font-size: 13px; font-weight: 600; }
.status.reported, .status.delivered { background: #dcfce7; color: var(--ok); }
.status.refused, .status.rejected { background: #fdecea; color: var(--bad); }
.status.unknown { background: #fef3c7; color: var(--wait); }
code.secret { font-size: 1.1em; background: #fff; border: 1px solid var(--line); padding: 4px 8px; }
code.big { font-size: 1.5em; letter-spacing: 1px; }
.wrap { word-break: break-all; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
dt { color: var(--muted); }
dd { margin: 0; }
form.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: end; margin-bottom: 14px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
form.filters input, form.filters select { width: 100%; }
form.filters .buttons { display: flex; gap: 10px; align-items: center; }
.status { white-space: nowrap; }
.status.accepted, .status.submitted { background: #fef3c7; color: var(--wait); }
fieldset { border: 1px solid var(--line); border-radius: 10px; margin: 0 0 14px; padding: 10px 14px; background: #fff; min-width: 0; }
legend { font-weight: 700; color: var(--navy); padding: 0 4px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 8px 0; }
label.inline { display: inline-flex; gap: 6px; align-items: center; margin-right: 16px; }
form.document table input, form.document table select { width: 100%; }
.notice { padding: 10px 14px; background: #fef3c7; border: 1px solid #f5d77a; border-radius: 8px; }
.actions { display: flex; gap: 12px; margin-top: 12px; }
.num { text-align: right; }
dl.totals { max-width: 480px; margin-left: auto; }
.grid input, .grid select { width: 100%; }
td.nowrap, .nowrap { white-space: nowrap; }
td.reason { max-width: 340px; font-size: 0.92em; }
td .reason { margin-top: 4px; max-width: 320px; font-size: 0.88em; line-height: 1.4; color: var(--slate); white-space: normal; }
td .reason code { font-size: 0.95em; }

/* Phones: the menu goes under the brand, wide tables scroll sideways instead of squeezing. */
/* Tablets and phones (up to an iPad held upright): the menu goes behind the Menu button at the top, as Apple's Mail
   does on an iPad, lists of documents become cards and other tables scroll inside themselves, never the page. */
@media screen and (max-width: 1024px) {
  header { padding: 8px 12px; }
  .brand .product { display: none; }
  /* The menu folds behind the Menu button at the top. */
  body.with-menu { padding-left: 0; }
  .topbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
  .sidebar { display: none; position: static; width: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); box-shadow: 0 4px 10px rgba(0, 28, 66, .08); }
  .sidebar > .brand { display: none; }
  input.menu-toggle:checked ~ .sidebar { display: flex; }
  .sidebar details.group.bottom { margin-top: 6px; padding-top: 0; }
  .sidebar nav a, .sidebar summary { min-height: 44px; }
  main { padding: 12px; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  td.reason { white-space: normal; min-width: 220px; }
  dl { grid-template-columns: 1fr; }
  dt { margin-top: 6px; }
  /* A list of documents, and the lines of the new-document form: one card per row, each value with its label. */
  table.stack { display: block; border: 0; background: none; box-shadow: none; white-space: normal; overflow: visible; }
  table.stack thead { display: none; }
  table.stack tbody, table.stack tr, table.stack td { display: block; }
  table.stack tr { background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; padding: 8px 12px; }
  table.stack td { border: 0; padding: 3px 0; text-align: left; white-space: normal; max-width: none; }
  table.stack td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); }
  table.stack td:empty { display: none; }
  table.stack tr.empty ~ tr.empty ~ tr.empty { display: none; }  /* two empty lines to fill on a phone */
  /* A list of documents as compact rows, like a list of messages in Apple's Mail: number and amount, then who, then
     type and date in small print, then the status with its reason. */
  table.doclist tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px;
    grid-template-areas: "dir num amount" "party party party" "type type date" "status status status" "sent sent sent"; }
  table.doclist td[data-label]::before { content: none; }
  table.doclist td:nth-child(1) { grid-area: dir; }
  table.doclist td:nth-child(2) { grid-area: num; font-weight: 700; }
  table.doclist td:nth-child(3) { grid-area: type; font-size: 13px; color: var(--slate); }
  table.doclist td:nth-child(4) { grid-area: date; font-size: 13px; color: var(--slate); text-align: right; }
  table.doclist td:nth-child(5) { grid-area: party; font-weight: 600; color: var(--navy); }
  table.doclist td:nth-child(6) { grid-area: amount; font-weight: 700; color: var(--navy); text-align: right; }
  table.doclist td:nth-child(7) { grid-area: status; padding-top: 4px; }
  table.doclist td:nth-child(8) { grid-area: sent; font-size: 12px; color: var(--slate); }
  table.doclist td:nth-child(8)::before { content: "Sent or received (UAE time) "; display: inline; font-size: inherit; }
  /* What needs attention: the document, then what to do, on its own line. */
  table.todo tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; }
  table.todo td:nth-child(3) { grid-column: 1 / -1; }
  table.doclist td .reason { max-width: none; }
  /* Filters folded under one button on a phone. */
  label.filter-toggle { display: inline-block; }
  input.filter-toggle:not(:checked) ~ form.filters { display: none; }
}
@media screen and (min-width: 761px) and (max-width: 1024px) { main { padding: 20px 24px; } }
/* Tablets and phones: everything pressed by a finger at least 44 px high (Apple's guideline), fields in 16 px text so
   the phone does not zoom in when one is touched. */
@media screen and (max-width: 1024px) {
  button:not(.default-submit):not(.link), .sidebar .who button.link, a.button, label.menu-button, label.filter-toggle, nav.tabs a, .periods a,
  .type-switch label span { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select { min-height: 44px; font-size: 16px; }
  main details > summary { display: list-item; padding: 11px 0; }  /* list-item keeps its triangle */
}
/* Nothing wider than the screen: a field or a file picker shrinks with it. */
input, select, textarea { max-width: 100%; }
label { min-width: 0; }
input[type=file] { min-width: 0; }
form.narrow > *, form.upload-inline > *, div.fill > *, .grid > * { min-width: 0; }
div.fill select { width: 100%; }
@media screen and (max-width: 760px) { div.fill label, form.upload-inline label { flex-basis: 100%; } input[type=file] { width: 100%; font-size: 14px; } }
input.filter-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.filter-toggle { display: none; margin-bottom: 10px; font-weight: 700; padding: 6px 16px; border-radius: 8px; background: var(--tint-strong); color: var(--navy); cursor: pointer; }
input.filter-toggle:focus-visible + label.filter-toggle { outline: 2px solid var(--brand-bright); }
/* After the rule above, which hides the button everywhere: on phones and tablets (where the filters fold) it shows, so the folded filters can be opened. */
@media screen and (max-width: 1024px) { label.filter-toggle { display: inline-flex; } }
/* New document: the fields of the type chosen only (no script: the radio button decides). */
form.document:has(input[name=type][value=credit_note]:checked) .invoice-only,
form.document:not(:has(input[name=type][value=credit_note]:checked)) .credit-only { display: none; }
.type-switch { display: flex; gap: 8px; margin: 0 0 12px; }
.type-switch label { cursor: pointer; }
.type-switch label span { display: inline-block; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 600; }
.type-switch input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.type-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.type-switch input:focus-visible + span { outline: 2px solid var(--brand-bright); }
.periods { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.periods a { padding: 4px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); text-decoration: none; font-weight: 600; font-size: 0.92em; }
.periods a.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Sign-in and setup: one card in the middle of the page. */
body.alone main { max-width: 460px; margin: 48px auto; padding: 28px 28px 20px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 28, 66, .08); }
body.alone form.narrow input { width: 100%; }
@media screen and (max-width: 760px) { body.alone main { margin: 16px 12px; padding: 20px 16px; } }

/* Documents: the direction tabs and marks (spec §8 item 3, §12 item 5). */
nav.tabs { display: flex; gap: 6px; margin: 0 0 12px; }
nav.tabs a { padding: 6px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--slate); text-decoration: none; font-weight: 600; }
nav.tabs a:hover { color: var(--brand); }
nav.tabs a.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.direction { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.direction.sent { background: var(--tint-strong); color: var(--brand); }
.direction.received { background: var(--line); color: var(--navy); }

/* Received documents (spec §12). */
.status.received-received { background: #dcfce7; color: var(--ok); }
.status.received-waiting { background: #fef3c7; color: var(--wait); }
.status.received-failed { background: #fdecea; color: var(--bad); }

/* Reports (spec §13). */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 8px 0 4px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px 18px 10px; }
.card h2 { margin-top: 14px; }
.card strong { color: var(--navy); font-size: 1.15em; }
/* Help next to each step (decision 0012): short, one scenario per line. */
[hidden] { display: none !important; }
.help { margin-top: 24px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.help h2 { margin: 0 0 6px; font-size: 1em; }
.help ul { margin: 0; padding-left: 18px; }
.help p { margin: 6px 0; }
.help li { color: var(--slate); margin: 4px 0; }
ol.steps li { margin: 10px 0; color: var(--slate); }
svg.qr { display: block; margin: 8px 0; background: #fff; border-radius: 6px; }

/* Overview and analytics (spec §13): figures of the period, a bar chart drawn by the server. */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 16px; }
@media screen and (max-width: 1100px) { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 560px) { .figures { grid-template-columns: 1fr; } }
.figure { display: grid; gap: 2px; align-content: start; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--navy); text-decoration: none; }
a.figure:hover { border-color: var(--brand-bright); }
.figure .label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.figure .value { font: 700 22px/1.25 var(--heading); color: var(--navy); }
.figure .value.bad { color: var(--bad); }
.figure .sub { font-size: 13px; color: var(--slate); }
.stages { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--slate); }
.stages strong { color: var(--navy); }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px 18px 14px; margin-bottom: 16px; }
.panel > h2 { margin-top: 14px; }
.panel table { box-shadow: none; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.two > .panel { margin-bottom: 0; }
svg.chart { display: block; width: 100%; height: auto; max-height: 260px; }
svg.chart .bar.sales { fill: var(--brand); }
svg.chart .bar.purchases { fill: #8fb4f5; }
svg.chart .axis { stroke: var(--line); stroke-width: 1; }
svg.chart text { fill: var(--slate); font: 600 12px Montserrat, system-ui, sans-serif; }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--slate); margin: 6px 0; }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.legend .sales::before { background: var(--brand); }
.legend .purchases::before { background: #8fb4f5; }
.share { font: 700 26px/1.2 var(--heading); color: var(--navy); }
/* Item mapping: the supplier's item and your own side by side. */
table.mapping td.arrow { color: var(--muted); text-align: center; width: 24px; }
table.mapping input[list] { width: 100%; min-width: 200px; }
table.mapping .mapped { color: var(--ok); font-weight: 600; font-size: 12px; }
.roles { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; background: none; }
/* Sign-up (spec §15). */
body.alone.wide main { max-width: 620px; }
body.alone.wide form.narrow { max-width: none; }
label.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.status.application-submitted { background: #fef3c7; color: var(--wait); }
.status.application-approved { background: #dcfce7; color: var(--ok); }
.status.application-rejected { background: #fdecea; color: var(--bad); }
body.alone form.narrow label.inline { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0; }
body.alone form.narrow label.inline input { width: auto; flex: none; margin-top: 4px; min-width: 18px; min-height: 18px; }

/* Analytics filters (spec §13 item 10): segmented switches like Apple's, the filters on as removable chips. */
.switches { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
nav.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--line); }
nav.segmented a { padding: 6px 14px; border-radius: 8px; color: var(--navy); text-decoration: none; font-weight: 600; font-size: 0.92em; transition: background-color .15s ease; }
nav.segmented a:hover { background: rgba(255, 255, 255, .6); }
nav.segmented a.active { background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(0, 28, 66, .12); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 14px; }
a.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--tint-strong); color: var(--brand); text-decoration: none; font-weight: 600; font-size: 0.92em; }
a.chip:hover { background: var(--line); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media screen and (max-width: 1024px) { nav.segmented a, a.chip { min-height: 44px; display: inline-flex; align-items: center; } }
/* A field to correct (sign-up form): outlined in red, with what to fix right under it. */
label.field.invalid { color: var(--bad); }
label.field.invalid input, label.field.invalid select { border-color: var(--bad); background: #fff7f6; box-shadow: 0 0 0 1px var(--bad); }
.field-error { font-size: 13px; font-weight: 600; color: var(--bad); }
label.field .hint { font-weight: 500; font-size: 13px; }

/* The demo company (spec §16): always said, with the way to a real account. */
.demo-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; padding: 10px 14px; background: #fef3c7; border: 1px solid #f5d77a; border-radius: 10px; color: #7a4a00; }
.demo-banner .button { margin-left: auto; padding: 8px 16px; }

/* The first-visit tour (spec §17): a soft light on the place, a small card beside it; never in the way of its buttons. */
.tour-spot { position: fixed; z-index: 60; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0, 28, 66, .38); pointer-events: none; }
.tour-spot.tour-none { left: 50% !important; top: 50% !important; width: 0 !important; height: 0 !important; }
.tour-card { position: fixed; z-index: 61; max-height: calc(100vh - 24px); overflow: auto; background: #fff; border-radius: 14px; padding: 14px 18px 16px; box-shadow: 0 12px 32px rgba(0, 28, 66, .22); outline: none; animation: tour-in .15s ease-out; }
@keyframes tour-in { from { opacity: 0; } to { opacity: 1; } }
.tour-card.tour-center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.tour-card h2 { margin: 2px 0 6px; font-size: 17px; }
.tour-card p { margin: 0 0 14px; color: var(--slate); }
.tour-head { display: flex; justify-content: space-between; align-items: center; }
.tour-count { font-size: 12px; font-weight: 600; color: var(--muted); }
button.tour-close { background: none; color: var(--muted); font-size: 22px; line-height: 1; padding: 0 4px; min-width: 44px; min-height: 44px; }
button.tour-close:hover { background: none; color: var(--navy); }
.tour-actions { display: flex; justify-content: space-between; gap: 10px; }
.tour-actions button { min-height: 44px; }
.sidebar .tour-again { margin: 0 10px; font-size: 13px; font-weight: 600; color: var(--slate); text-decoration: none; }
.sidebar .tour-again:hover { color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .tour-card { animation: none; } }
@media screen and (max-width: 1024px) { .sidebar .tour-again { display: flex; align-items: center; min-height: 44px; font-size: 14px; } }