/* KromonBridge brand: palette "Sapphire" (2026-11-12, benchmarked on a calm, flat dashboard:
   cool gray page, white flat cards, one sapphire blue), fonts Geologica / Onest / JetBrains Mono.
   Colours are CSS variables, so every page switches light/dark by setting
   <html data-theme="dark">. Tailwind (configured in _head.html) reads the same variables.
   Text pairs are checked for WCAG AA (4.5:1); the accent is #2F7EDA darkened for white text. */

:root {
  --bg: #EDEFF3;            /* page: cool gray */
  --surface: #FFFFFF;       /* cards, inputs */
  --surface-2: #F5F6F9;     /* quiet fills, table heads */
  --line: #E3E6EC;          /* hairlines */
  --muted: #5F6172;         /* secondary text */
  --ink: #1B1C24;           /* main text */
  --accent: #2A70C8;        /* sapphire */
  --accent-hover: #235FAB;
  --accent-soft: #E4EEFB;
  --accent-ink: #1E5BA6;    /* text on accent-soft */
  --on-accent: #FFFFFF;
  --amber-bg: #FCF1DC;  --amber-fg: #7A5200;
  --green-bg: #DFF4EA;  --green-fg: #0E5C3D;
  --red-bg: #FCE6E6;    --red-fg: #8A1F1F;
  --sand-bg: #EEF0F4;   --sand-fg: #4A4C5A;   /* neutral badge (name kept) */
  --grid: rgba(27, 28, 36, .05);
  --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #16171D;
  --surface: #1E2028;
  --surface-2: #262933;
  --line: #30333E;
  --muted: #9FA0B5;
  --ink: #EDEFF3;
  --accent: #5B9BEA;
  --accent-hover: #78AEF0;
  --accent-soft: #1A2A42;
  --accent-ink: #A9CBF5;
  --on-accent: #0B1220;
  --amber-bg: #3A2E12;  --amber-fg: #F0C46A;
  --green-bg: #123527;  --green-fg: #6FD9A6;
  --red-bg: #3A1A1A;    --red-fg: #F29A9A;
  --sand-bg: #262933;   --sand-fg: #C3C6D2;
  --grid: rgba(237, 239, 243, .04);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

html { background: var(--bg); }
body {
  background: var(--bg); color: var(--ink);
  font-family: 'Onest', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .kb-display { font-family: 'Geologica', 'Onest', sans-serif; letter-spacing: -0.01em; }
code, .kb-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Hairline grid used behind heroes */
.kb-grid {
  background-image: linear-gradient(var(--grid) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Buttons */
.kb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: .5rem; padding: .55rem 1rem; font-weight: 500; font-size: .875rem;
  border: 1px solid transparent; transition: background-color .15s, border-color .15s, color .15s;
  cursor: pointer; white-space: nowrap;
}
.kb-btn-primary { background: var(--accent); color: var(--on-accent); }
.kb-btn-primary:hover { background: var(--accent-hover); }
.kb-btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.kb-btn-secondary:hover { border-color: var(--muted); }
.kb-btn-ghost { background: transparent; color: var(--accent); }
.kb-btn-ghost:hover { background: var(--accent-soft); }
.kb-btn-lg { padding: .75rem 1.3rem; font-size: 1rem; border-radius: .625rem; }

/* Inputs */
.kb-input {
  width: 100%; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: .5rem; padding: .6rem .8rem;
}
.kb-input::placeholder { color: var(--muted); opacity: .8; }
.kb-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Cards */
.kb-card { background: var(--surface); border: 1px solid var(--line); border-radius: .875rem; }
.kb-card-raised { box-shadow: var(--shadow); }

/* Status badges */
.kb-badge {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  border-radius: 999px; padding: .15rem .6rem; font-size: .75rem; font-weight: 500;
}
.kb-badge.is-amber { background: var(--amber-bg); color: var(--amber-fg); }   /* pickup, customs */
.kb-badge.is-sand  { background: var(--sand-bg);  color: var(--sand-fg); }    /* warehouse, scheduled */
.kb-badge.is-blue  { background: var(--accent-soft); color: var(--accent-ink); } /* in transit */
.kb-badge.is-green { background: var(--green-bg); color: var(--green-fg); }   /* delivered, paid */
.kb-badge.is-red   { background: var(--red-bg);   color: var(--red-fg); }     /* unpaid, problems */

/* Show something only in one theme */
.kb-if-dark { display: none !important; }
:root[data-theme="dark"] .kb-if-dark { display: inline-block !important; }
:root[data-theme="dark"] .kb-if-light { display: none !important; }

/* Small caps-style section label */
.kb-eyebrow { overflow-wrap: anywhere; font-size: .8125rem; font-weight: 500; color: var(--accent); }   /* sentence case, no caps */

/* ---------------------------------------------------------------------------
   Dashboard: the pages were written with Tailwind's slate / indigo / emerald /
   rose / amber classes. Inside <body class="kb-app"> those classes are mapped to
   the brand tokens here, so every page follows the palette and the dark theme.
   (".kb-app .x" beats Tailwind's ".x", whatever order the styles load in.)
   New markup should use the token colours (bg-surface, text-muted, kb-btn …).
   --------------------------------------------------------------------------- */
.kb-app *, .kb-app ::before, .kb-app ::after { border-color: var(--line); }
.kb-app h1 { font-family: 'Geologica', 'Onest', sans-serif; font-weight: 600; letter-spacing: -0.015em; }
.kb-app h2, .kb-app h3 { font-family: 'Geologica', 'Onest', sans-serif; font-weight: 600; }
.kb-app .font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Surfaces */
.kb-app .bg-white, .kb-app .bg-white\/60 { background-color: var(--surface); }
.kb-app .bg-slate-50, .kb-app .hover\:bg-slate-50:hover { background-color: var(--bg); }
.kb-app .bg-slate-100, .kb-app .bg-slate-200, .kb-app .hover\:bg-slate-200:hover { background-color: var(--surface-2); }
.kb-app .bg-slate-400, .kb-app .bg-slate-500 { background-color: var(--muted); }
.kb-app .bg-slate-800, .kb-app .bg-indigo-950, .kb-app .bg-indigo-950\/90 { background-color: var(--ink); color: var(--bg); }
.kb-app .bg-slate-800:hover, .kb-app .bg-indigo-950:hover { opacity: .9; }

/* Text */
.kb-app .text-slate-400, .kb-app .text-slate-500, .kb-app .text-slate-600 { color: var(--muted); }
.kb-app .text-slate-700, .kb-app .text-slate-800, .kb-app .hover\:text-slate-700:hover { color: var(--ink); }

/* Borders */
.kb-app .border-slate-200, .kb-app .border-slate-300, .kb-app .border-slate-800 { border-color: var(--line); }

/* Indigo = the accent */
.kb-app .bg-indigo-600, .kb-app .bg-indigo-700, .kb-app .bg-sky-600, .kb-app .bg-blue-600 { background-color: var(--accent); color: var(--on-accent); }
.kb-app .hover\:bg-indigo-800:hover, .kb-app .hover\:bg-indigo-700:hover { background-color: var(--accent-hover); }
.kb-app .bg-indigo-50, .kb-app .bg-indigo-100, .kb-app .bg-sky-100, .kb-app .hover\:bg-indigo-50:hover, .kb-app .hover\:bg-blue-50:hover { background-color: var(--accent-soft); }
.kb-app .text-indigo-600, .kb-app .text-indigo-700, .kb-app .text-blue-700, .kb-app .hover\:text-indigo-700:hover { color: var(--accent); }
.kb-app .text-indigo-800, .kb-app .text-sky-800 { color: var(--accent-ink); }
.kb-app .text-indigo-100, .kb-app .text-indigo-200, .kb-app .text-indigo-300 { color: currentColor; opacity: .75; }
.kb-app .border-indigo-100, .kb-app .border-indigo-200, .kb-app .border-indigo-300 { border-color: var(--accent-soft); }
.kb-app .border-indigo-400, .kb-app .border-indigo-500, .kb-app .border-indigo-600, .kb-app .border-indigo-700, .kb-app .border-blue-600 { border-color: var(--accent); }
.kb-app .ring-indigo-200 { --tw-ring-color: var(--accent-soft); }

/* Status colours */
.kb-app .bg-emerald-50, .kb-app .bg-emerald-100 { background-color: var(--green-bg); }
.kb-app .text-emerald-700, .kb-app .text-emerald-800 { color: var(--green-fg); }
.kb-app .border-emerald-200 { border-color: var(--green-bg); }
.kb-app .bg-emerald-500, .kb-app .bg-emerald-600 { background-color: #1F9D6B; }
.kb-app .hover\:bg-emerald-700:hover { background-color: #178257; }

.kb-app .bg-rose-50, .kb-app .bg-rose-50\/40, .kb-app .bg-rose-100, .kb-app .hover\:bg-rose-200:hover { background-color: var(--red-bg); }
.kb-app .text-rose-600, .kb-app .text-rose-700, .kb-app .text-rose-800, .kb-app .hover\:text-rose-600:hover { color: var(--red-fg); }
.kb-app .border-rose-200 { border-color: var(--red-bg); }
.kb-app .bg-rose-500, .kb-app .bg-rose-600 { background-color: #D64545; }
.kb-app .hover\:bg-rose-700:hover { background-color: #B83636; }

.kb-app .bg-amber-50, .kb-app .bg-amber-100 { background-color: var(--amber-bg); }
.kb-app .text-amber-700, .kb-app .text-amber-800, .kb-app .text-amber-900, .kb-app .text-amber-950 { color: var(--amber-fg); }
.kb-app .border-amber-200 { border-color: var(--amber-bg); }
.kb-app .bg-amber-400 { background-color: #F0B43C; }

/* Form controls follow the theme (checkboxes and radios keep the accent) */
.kb-app :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), select, textarea) {
  background-color: var(--surface); color: var(--ink); border-color: var(--line);
}
.kb-app :is(input, select, textarea):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.kb-app input[type=checkbox], .kb-app input[type=radio] { accent-color: var(--accent); }

/* Tables: quiet headers and hairline rows */
.kb-app main table thead { color: var(--muted); }
.kb-app main table tbody tr:hover { background-color: color-mix(in srgb, var(--surface-2) 45%, transparent); }

/* ---------------------------------------------------------------------------
   Dashboard page kit (every staff page, the Operational Center first):
   page head, stat strip, toolbar, then one list card of rows or a table.
   Rows that hold forms open in place (kb-row); colours come from the tokens.
   --------------------------------------------------------------------------- */
.kb-page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.kb-page-head h1 { display: flex; align-items: center; gap: .625rem; font-size: 1.5rem; line-height: 1.25; }
.kb-page-head h1 > i { color: var(--accent); }
.kb-page-lead { margin-top: .35rem; max-width: 72ch; font-size: .875rem; color: var(--muted); }
.kb-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.kb-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 2rem 0 .75rem; }
.kb-section-head h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.125rem; }
.kb-section-head h2 > i { color: var(--muted); }
.kb-count { font-family: 'Onest', sans-serif; font-size: .875rem; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.kb-section-lead { margin: -.4rem 0 .75rem; max-width: 72ch; font-size: .8125rem; color: var(--muted); }
.kb-note { margin-top: .5rem; max-width: 80ch; font-size: .75rem; color: var(--muted); }
/* A booking's History (Packages drawer): read-only timeline, newest first. */
.kb-history { border-left: 2px solid var(--line); margin-left: .35rem; }
.kb-history > li { position: relative; padding: 0 0 .75rem .9rem; font-size: .8125rem; overflow-wrap: anywhere; }
.kb-history > li::before { content: ""; position: absolute; left: -.33rem; top: .35rem; width: .55rem; height: .55rem;
  border-radius: 999px; background: var(--accent); }
.kb-history > li.is-container::before { background: var(--muted); }
.kb-history-when { font-size: .75rem; color: var(--muted); }
.kb-history-change { font-size: .75rem; }
.kb-history-change del { color: var(--muted); }

/* Stat strip: a few linked numbers in one bar, never a grid of cards. */
.kb-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line);
            border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; margin-bottom: 2rem; }
.kb-stat { display: flex; flex-direction: column; gap: .15rem; min-width: 0; padding: .9rem 1.1rem; background: var(--surface); }
a.kb-stat:hover { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
a.kb-stat:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kb-stat-num { font-family: 'Geologica', 'Onest', sans-serif; font-size: 1.375rem; line-height: 1.2; font-weight: 600;
               font-variant-numeric: tabular-nums; white-space: nowrap; }
.kb-stat-sub { font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.kb-stat-label { display: flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .2rem; font-size: .8125rem; color: var(--muted); }
@media (min-width: 1024px) { .kb-stats { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }
@media (max-width: 639px) { .kb-stat { padding: .8rem .9rem; } .kb-stat-num { font-size: 1.125rem; } }

/* Toolbar: filters and search above a list. */
.kb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem; margin-bottom: .75rem;
              font-size: .875rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; }
.kb-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: .5rem; overflow: hidden; }
.kb-seg > * { padding: .375rem .75rem; background: var(--surface); }
.kb-seg > * + * { border-left: 1px solid var(--line); }
.kb-seg > :hover { background: var(--bg); }
.kb-seg > .is-on, .kb-seg > .is-on:hover { background: var(--accent); color: var(--on-accent); }
.kb-seg .kb-seg-n { margin-left: .25rem; opacity: .7; font-variant-numeric: tabular-nums; }

/* List card: rows or a table inside one card, divided by hairlines. */
.kb-list { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; }
.kb-list.is-scroll, .is-scroll { overflow-x: auto; }       /* a wide table scrolls inside its box, never the page */
.kb-empty { padding: 1.5rem 1.25rem; color: var(--muted); }
.kb-table { width: 100%; font-size: .875rem; border-collapse: collapse; }
.kb-table th { padding: .6rem .9rem; text-align: left; font-size: .75rem; font-weight: 500; color: var(--muted);
               white-space: nowrap; border-bottom: 1px solid var(--line); }
.kb-table td { padding: .75rem .9rem; vertical-align: top; border-top: 1px solid var(--line); }
.kb-table tbody tr:first-child td { border-top: 0; }
.kb-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.kb-table .sub { font-size: .75rem; color: var(--muted); }
/* Older tables (until moved to kb-table): no all-caps headers, no filled head. */
.kb-app main thead th { text-transform: none; letter-spacing: 0; font-weight: 500; }
.kb-app main thead.bg-slate-50 { background: transparent; border-bottom: 1px solid var(--line); }

/* Expandable rows: the summary is the row, the panel holds its details and forms. */
.kb-row + .kb-row { border-top: 1px solid var(--line); }
.kb-row-sum { list-style: none; cursor: pointer; padding: 1rem 1.25rem; }
.kb-row-sum::-webkit-details-marker { display: none; }
.kb-row-sum:hover, .kb-row[open] > .kb-row-sum { background: color-mix(in srgb, var(--surface-2) 40%, transparent); }
.kb-row-sum:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kb-chev { align-self: center; font-size: 1.1rem; color: var(--muted); transition: transform .15s ease; }
.kb-row[open] > .kb-row-sum .kb-chev, details[open] > summary .kb-chev { transform: rotate(180deg); }
.kb-panel { padding: 1.25rem; background: var(--bg); border-top: 1px solid var(--line); }
.kb-panel select { max-width: 100%; }
/* A form panel opened by a page-head button (data-toggle-panel). */
.kb-form-panel { padding: 1.25rem; margin-bottom: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; }
/* Clickable table rows (open a drawer) and the pager under a list. */
.kb-table tr.is-clickable { cursor: pointer; }
.kb-table tr.is-clickable:hover td { background: color-mix(in srgb, var(--surface-2) 40%, transparent); }
.kb-table tr.is-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kb-table input[type=checkbox] { width: 1.125rem; height: 1.125rem; }
.kb-open-btn { padding: .4rem .7rem; font-size: .8125rem; }
@media (max-width: 1279px) { .kb-pkg-table th, .kb-pkg-table td { padding-left: .55rem; padding-right: .55rem; } }
/* The sender column needs room: shown from 1024 px (the drawer always has it). */
@media (max-width: 1023px) { .kb-pkg-table .c-send { display: none; } }
.kb-pkg-table .c-recv .addr { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Phones: each package row becomes a small card (tick | number, receiver, status · payment | open). */
@media (max-width: 639px) {
  .kb-pkg-table thead { display: none; }
  .kb-pkg-table tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .75rem; row-gap: .35rem;
    grid-template-areas: "check pkg open" "check recv recv" "check status pay"; padding: .85rem; border-top: 1px solid var(--line); }
  .kb-pkg-table tbody tr:first-child { border-top: 0; }
  .kb-pkg-table tbody td { padding: 0; border: 0; background: none !important; }
  .kb-pkg-table .c-check { grid-area: check; } .kb-pkg-table .c-pkg { grid-area: pkg; } .kb-pkg-table .c-open { grid-area: open; }
  .kb-pkg-table .c-recv { grid-area: recv; } .kb-pkg-table .c-status { grid-area: status; } .kb-pkg-table .c-pay { grid-area: pay; text-align: right; }
  .kb-pkg-table .c-extra { grid-column: 2 / -1; }          /* chosen extra columns: full-width lines under the card */
  .kb-pkg-table tbody tr:has(.kb-empty) { display: block; padding: 0; }
  .kb-pkg-table .kb-empty { display: block; padding: 1.5rem 1.25rem; }
}
/* Hand-out on phones: each package is a card (number · amount, receiver, delivery, status,
   hand-out dates + driver, then the pay / Delivered / Issues actions full width). */
@media (max-width: 639px) {
  .kb-ho-table thead { display: none; }
  .kb-ho-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; row-gap: .4rem;
    grid-template-areas: "pkg amt" "recv recv" "deliv deliv" "status status" "ho ho" "act act";
    padding: .85rem; border-top: 1px solid var(--line); }
  .kb-ho-table tbody tr:first-child { border-top: 0; }
  .kb-ho-table tbody td { padding: 0; border: 0; background: none !important; max-width: none; white-space: normal; }
  .kb-ho-table .c-pkg { grid-area: pkg; } .kb-ho-table .c-amt { grid-area: amt; }
  .kb-ho-table .c-recv { grid-area: recv; } .kb-ho-table .c-deliv { grid-area: deliv; }
  .kb-ho-table .c-status { grid-area: status; } .kb-ho-table .c-ho { grid-area: ho; }
  .kb-ho-table .c-act { grid-area: act; } .kb-ho-table .kb-sign { display: none; }
  .kb-ho-table .c-act > div { justify-content: flex-start; }
  .kb-ho-table .c-act details { margin-left: 0; max-width: none; }
  .kb-ho-table .c-ho select { max-width: 100%; }
}
/* Packages → Columns: a small menu of checkboxes under its button. */
.kb-col-picker { position: relative; display: inline-block; }
.kb-col-picker > summary { list-style: none; }
.kb-col-picker > summary::-webkit-details-marker { display: none; }
.kb-col-menu { position: absolute; z-index: 20; top: calc(100% + .35rem); left: 0; width: 15rem; padding: .85rem 1rem;
               background: var(--surface); border: 1px solid var(--line); border-radius: .9rem; font-size: .875rem;
               box-shadow: 0 8px 24px rgba(16, 24, 40, .12); }
.kb-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
            margin-top: .75rem; font-size: .875rem; }

/* Staff picture: round, the photo cropped to fill, else the first letter of the name or a person icon.
   Size via --s (default 2rem). */
.kb-avatar { --s: 2rem; width: var(--s); height: var(--s); flex-shrink: 0; display: inline-grid; place-items: center;
             overflow: hidden; border-radius: 9999px; background: var(--accent-soft); color: var(--accent);
             font-weight: 600; font-size: calc(var(--s) * .42); line-height: 1; }
.kb-avatar > img { width: 100%; height: 100%; object-fit: cover; }
button.kb-avatar { cursor: pointer; border: 0; padding: 0; }
button.kb-avatar:hover, button.kb-avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kb-avatar-pick { display: flex; flex-wrap: wrap; gap: .5rem; }
.kb-avatar-pick > .kb-avatar { --s: 2.75rem; }      /* 44 px: big enough for a finger */
.kb-avatar-pick > [aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Small centred dialog (<dialog class="kb-modal">), e.g. "Your picture". */
.kb-modal { width: min(24rem, calc(100vw - 2rem)); padding: 0; border: 1px solid var(--line); border-radius: 1rem;
            background: var(--surface); color: var(--ink); box-shadow: 0 8px 24px rgba(16, 24, 40, .16); }
.kb-modal::backdrop { background: rgba(16, 24, 40, .35); }

/* Side drawer (<dialog class="kb-drawer">): details and an edit form for one item; full width on phones. */
.kb-drawer { margin: 0 0 0 auto; padding: 0; width: min(30rem, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
             border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.kb-drawer[open] { display: flex; flex-direction: column; animation: kb-drawer-in .18s ease-out; }
.kb-drawer::backdrop { background: rgba(16, 24, 40, .35); }
@keyframes kb-drawer-in { from { transform: translateX(2rem); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kb-drawer[open] { animation: none; } }
.kb-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
                  padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.kb-drawer-body { flex: 1; overflow-y: auto; padding: 1.25rem; }
.kb-drawer-body .grid > * { min-width: 0; }      /* side-by-side fields shrink on phones instead of widening the drawer */
.kb-drawer-foot { display: flex; gap: .5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--line); }
.kb-drawer-foot .kb-btn { min-height: 2.75rem; }
.kb-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .55rem 1.25rem; font-size: .875rem; }
.kb-dl dt { color: var(--muted); }
.kb-dl .sub { font-size: .75rem; color: var(--muted); }
/* Form field with its label above; 44 px tall so it works with a finger on a tablet. */
.kb-field { display: block; margin-bottom: .9rem; font-size: .8125rem; color: var(--muted); }
.kb-field > input, .kb-field > select, .kb-field > textarea { display: block; width: 100%; min-height: 2.75rem; margin-top: .3rem; padding: .5rem .75rem;
  font-size: .9375rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: .5rem; }
.kb-field > input:focus, .kb-field > select:focus, .kb-field > textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Intake board (4 columns from xl). Below xl: stage tabs, one column at a time, and 44 px controls for fingers. */
.pk-tabs { display: flex; flex-wrap: nowrap; width: 100%; }
.pk-tabs > button { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
                    min-height: 2.75rem; padding-left: .4rem; padding-right: .4rem; font-size: .875rem; white-space: nowrap; }
@media (max-width: 479px) { .pk-tabs > button > i { display: none; } }
@media (min-width: 1280px) { .pk-tabs { display: none; } }
@media (max-width: 1279px) {
  .pk-board { margin-top: 1rem; }
  .pk-board[data-show] > .pk-col { display: none; }
  .pk-board[data-show="1"] > [data-col="1"], .pk-board[data-show="2"] > [data-col="2"], .pk-board[data-show="3"] > [data-col="3"],
  .pk-board[data-show="branch"] > [data-col="branch"] { display: block; }
  .pk-board .kb-card select, .pk-board .kb-card input[type=number], .pk-board .kb-card input[type=date],
  .pk-board .kb-card input:not([type]), .pk-board .kb-card .kb-btn, #load-form select, #load-form .kb-btn {
    min-height: 2.75rem; font-size: .875rem; padding-top: .4rem; padding-bottom: .4rem; }
  .pk-board input[type=checkbox] { width: 1.25rem; height: 1.25rem; }
  .pk-board .kb-card label:has(.box-check) { min-height: 2.75rem; font-size: .8125rem; }
  .pk-board .kb-disclose > summary { padding: .6rem 0; font-size: .8125rem; }
  .pk-board .kb-card form[action$="/back"] button, .pk-board .kb-card form[action$="/delete"] button { padding: .6rem 0; font-size: .8125rem; }
}

/* Settings tabs: one row, scrolls sideways on narrow phones instead of wrapping. */
.st-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; width: max-content; scrollbar-width: none; }
.st-tabs > button { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding-left: .9rem; padding-right: .9rem;
                    font-size: .875rem; white-space: nowrap; }
@media (max-width: 479px) {
  .st-tabs { width: 100%; }
  .st-tabs > button { flex: 1 1 auto; justify-content: center; padding-left: .45rem; padding-right: .45rem; font-size: .8125rem; }
  .st-tabs > button > i { display: none; }
}
@media (max-width: 639px) { #settings-body .sticky.bottom-0 > p { display: none; } #settings-body .sticky.bottom-0 .kb-btn { width: 100%; justify-content: center; } }

/* Setup checklist (Operational Center) and empty states that say what to do next. */
.kb-setup { padding: 1.25rem; }
.kb-setup-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; }
.kb-setup-bar { height: .375rem; margin: .9rem 0 .5rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.kb-setup-bar > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.kb-setup-list { display: grid; gap: .25rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.kb-setup-list a { display: flex; align-items: flex-start; gap: .6rem; min-height: 2.75rem; padding: .6rem .7rem; border-radius: .6rem; }
.kb-setup-list a:hover { background: var(--bg); }
.kb-setup-list a > i:first-child { font-size: 1.15rem; color: var(--muted); margin-top: .05rem; }
.kb-setup-list .is-done a > i:first-child { color: var(--green-fg); }
.kb-setup-label { display: block; font-size: .875rem; font-weight: 500; }
.kb-setup-list .is-done .kb-setup-label { color: var(--muted); font-weight: 400; text-decoration: line-through; }
.kb-setup-hint { display: block; font-size: .75rem; color: var(--muted); margin-top: .1rem; }
.kb-setup-go { margin-left: auto; align-self: center; color: var(--muted); }
.kb-empty-cta { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.kb-empty-cta .kb-empty-title { color: var(--ink); font-weight: 500; }
.kb-empty-cta .kb-empty-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Small disclosure link ("Edit details"). */
.kb-disclose > summary { list-style: none; cursor: pointer; color: var(--accent); }
.kb-disclose > summary::-webkit-details-marker { display: none; }

/* Route bar: a container's 9 statuses (4-12); lines up from row to row. */
.kb-route { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; align-items: center; height: .75rem; }
.kb-route > span { height: .375rem; border-radius: 999px; background: var(--surface-2); }
.kb-route > .is-done { background: color-mix(in srgb, var(--accent) 50%, var(--surface)); }
.kb-route > .is-now { height: .75rem; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.kb-route.is-delivered > span { background: var(--green-fg); box-shadow: none; height: .375rem; }
.kb-route.is-delayed > .is-now { background: var(--red-fg); box-shadow: 0 0 0 3px var(--red-bg); }

/* Container rows (Operational Center, System Overview). */
.oc-sum, .oc-cols { display: grid; gap: .75rem 2rem; }
.oc-sum { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id chev" "where where" "money money"; }
.oc-id { grid-area: id; } .oc-where { grid-area: where; } .oc-money { grid-area: money; } .oc-sum > .kb-chev { grid-area: chev; }
.oc-cols { display: none; }
@media (min-width: 1024px) {
  .oc-sum, .oc-cols { grid-template-columns: minmax(12rem, 1fr) minmax(15rem, 1.5fr) minmax(8.5rem, .6fr) 1.1rem;
                      grid-template-areas: "id where money chev"; align-items: center; }
  .oc-cols { display: grid; padding: .6rem 1.25rem; font-size: .75rem; color: var(--muted); border-bottom: 1px solid var(--line); }
  .oc-money { text-align: right; }
}

/* Vertical route (phones). */
.oc-timeline { list-style: none; margin: 0; padding: 0; }
.oc-timeline li { position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; align-items: center;
                  gap: .6rem; padding: .3rem 0; font-size: .875rem; color: var(--muted); }
.oc-timeline li:not(:last-child)::after { content: ""; position: absolute; left: calc(.875rem - .5px); top: calc(.3rem + 1.75rem);
                                          bottom: -.3rem; width: 1px; background: var(--line); }
.oc-dot { width: 1.75rem; height: 1.75rem; border-radius: 999px; display: flex; align-items: center; justify-content: center;
          border: 1px solid var(--line); background: var(--surface); }
.oc-timeline li.is-done .oc-dot { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.oc-timeline li.is-done::after { background: var(--accent); }
.oc-timeline li.is-now { color: var(--ink); font-weight: 600; }
.oc-timeline li.is-now .oc-dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
/* Route circles that choose a status (route_progress pick=…): the chosen one gets a dashed ring,
   the form's Change status button a pulse until it is pressed. */
.kb-pick.is-picked { outline: 2px dashed var(--accent); outline-offset: 3px; }
button.is-ready { box-shadow: 0 0 0 4px var(--accent-soft); }
@media (prefers-reduced-motion: reduce) { .kb-chev { transition: none; } }

/* 12-step route (a package as the customer sees it: /track, online shop orders). */
.kb-route.is-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.kb-route.is-sm { height: .625rem; gap: 2px; }
.kb-route.is-sm > span { height: .3125rem; }
.kb-route.is-sm > .is-now { height: .625rem; box-shadow: 0 0 0 2px var(--accent-soft); }
.kb-route-groups { display: grid; grid-template-columns: 4fr 3fr 5fr; gap: 3px; margin-top: .5rem; font-size: .75rem; color: var(--muted); }
.kb-route-groups > span { padding-top: .25rem; border-top: 1px solid var(--line); }

/* Online shop order rows. */
.so-sum { display: grid; gap: .5rem 1.25rem; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "code chev" "who who" "items items" "total next"; align-items: center; }
.so-code { grid-area: code; } .so-who { grid-area: who; } .so-items { grid-area: items; } .so-total { grid-area: total; } .so-next { grid-area: next; justify-self: end; } .so-sum > .kb-chev { grid-area: chev; justify-self: end; }
@media (min-width: 1024px) { .so-next { justify-self: stretch; } }
.so-cols { display: none; }
@media (min-width: 1024px) {
  .so-sum, .so-cols { grid-template-columns: 9.5rem minmax(0, 1.1fr) minmax(0, 1fr) 7.5rem 13rem 1.1rem;
                      grid-template-areas: "code who items total next chev"; }
  .so-cols { display: grid; gap: 1.25rem; padding: .6rem 1.25rem; font-size: .75rem; color: var(--muted); border-bottom: 1px solid var(--line); }
  .so-total { text-align: right; }
}

/* ---------------------------------------------------------------------------
   Finance & Pricing (finance.html, statement.html, rate_card.html)
   --------------------------------------------------------------------------- */
/* Who owes rows: name, age bar, owed, chevron. */
.fo-sum, .fo-cols { display: grid; gap: .5rem 1.5rem; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
                    grid-template-areas: "who chev" "age owed"; }
.fo-who { grid-area: who; } .fo-age { grid-area: age; } .fo-owed { grid-area: owed; } .fo-sum > .kb-chev { grid-area: chev; justify-self: end; }
.fo-cols { display: none; }
@media (min-width: 1024px) {
  .fo-sum, .fo-cols { grid-template-columns: minmax(12rem, 1.2fr) minmax(10rem, 1fr) 9rem 1.1rem; grid-template-areas: "who age owed chev"; }
  .fo-cols { display: grid; padding: .6rem 1.25rem; font-size: .75rem; color: var(--muted); border-bottom: 1px solid var(--line); }
}
.fo-bar { display: flex; gap: 2px; height: .5rem; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.fo-bar > span { min-width: .375rem; }
.fo-key { display: inline-flex; align-items: center; gap: .35rem; }
.fo-key > i { width: .75rem; height: .5rem; border-radius: 999px; display: inline-block; }
.fo-key > .is-b0, .fo-bar > .is-b0 { background: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.fo-key > .is-b1, .fo-bar > .is-b1 { background: color-mix(in srgb, var(--amber-fg) 55%, var(--surface)); }
.fo-key > .is-b2, .fo-bar > .is-b2 { background: color-mix(in srgb, var(--red-fg) 70%, var(--surface)); }
.fo-key > .is-b3, .fo-bar > .is-b3 { background: var(--red-fg); }

/* Printable sheets: statement and rate card. */
.kb-print-page { background: var(--bg); color: var(--ink); min-height: 100vh; padding: 1rem; }
.kb-print-bar, .kb-print-tools { max-width: 52rem; margin: 0 auto 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.kb-print-tools { display: block; }
.kb-sheet { max-width: 52rem; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem;
            padding: 2rem; }
.kb-sheet h1 { font-family: 'Geologica', 'Onest', sans-serif; font-size: 1.5rem; font-weight: 600; }
.kb-sheet h2 { font-weight: 600; margin-bottom: .35rem; }
.kb-sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-bottom: 1rem;
                 border-bottom: 1px solid var(--line); }
.kb-sheet-company { font-family: 'Geologica', 'Onest', sans-serif; font-size: 1.125rem; font-weight: 600; }
.kb-sheet-to { margin: 1.25rem 0; }
.kb-sheet-table { width: 100%; border-collapse: collapse; font-size: .875rem; margin-top: 1rem; }
.kb-sheet-table th { text-align: left; font-size: .75rem; font-weight: 500; color: var(--muted); padding: .5rem; border-bottom: 1px solid var(--line); }
.kb-sheet-table td { padding: .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.kb-sheet-table tfoot td { font-weight: 600; border-bottom: 0; }
.kb-sheet-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kb-sheet-totals { margin: 1rem 0 0 auto; max-width: 28rem; font-size: .9375rem; }
.kb-sheet-totals dd { white-space: nowrap; }
.kb-sheet-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; font-variant-numeric: tabular-nums; }
.kb-sheet-totals > .is-due { font-weight: 600; font-size: 1.0625rem; border-top: 1px solid var(--line); margin-top: .25rem; padding-top: .5rem; }
.kb-sheet-notes { margin-top: 1rem; padding-left: 1.1rem; list-style: disc; font-size: .875rem; color: var(--muted); }
.kb-sheet-block { margin-top: 1.25rem; font-size: .9375rem; }
.kb-sheet-foot { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .875rem; }
.kb-rate-card .kb-sheet-table { font-size: 1rem; }
@media (max-width: 639px) { .kb-sheet { padding: 1.1rem; } .kb-print-page { padding: .75rem; } }
@media print {
  .kb-print-bar, .kb-print-tools, .kb-print-hide, .fo-noprint, .kb-app aside, .kb-app .kb-page-head, .kb-app nav.kb-seg,
  .kb-app .kb-stats, .kb-app .kb-section-head button { display: none !important; }
  .kb-print-page { background: #fff; padding: 0; }
  .kb-sheet { border: 0; border-radius: 0; padding: 0; max-width: none; }
}
/* Shown only on paper (Hand-out run sheet: title, signature column). */
.kb-print-only { display: none; }
@media print {
  .kb-print-only { display: block; }
  th.kb-print-only, td.kb-print-only { display: table-cell; }
  .kb-app main { padding: 0 !important; }
  .kb-app .kb-list { break-inside: auto; border: 0; }
  .kb-app .kb-table tr { break-inside: avoid; }
  .kb-sign { min-width: 7rem; }
}

/* ---------------------------------------------------------------------------
   Today (/dashboard): one card per kind of work, linking to the tab that handles it.
   --------------------------------------------------------------------------- */
.kb-today { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.kb-today-card { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: .875rem; color: var(--ink); transition: border-color .15s; }
.kb-today-card:hover { border-color: var(--accent); }
.kb-today-card.is-quiet { opacity: .75; }
.kb-today-icon { width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: .625rem; display: grid; place-items: center;
  font-size: 1.25rem; background: var(--accent-soft); color: var(--accent-ink); }
.kb-today-icon.is-bad { background: var(--red-bg); color: var(--red-fg); }
.kb-today-icon.is-warn { background: var(--amber-bg); color: var(--amber-fg); }
.kb-today-label { display: block; font-weight: 500; font-size: .9375rem; }
.kb-today-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8125rem; color: var(--muted); }
.kb-today-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1.5rem; font-weight: 500; }

/* Live Chat: package panel beside the conversation (3 panes from 1280 px). */
.chat-pkgs { width: 20rem; flex-shrink: 0; border-left: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.chat-pkg { border: 1px solid var(--line); border-radius: .625rem; padding: .75rem; background: var(--surface); }
.chat-pkg + .chat-pkg { margin-top: .5rem; }
.chat-pkg dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .6rem; font-size: .8125rem; margin-top: .5rem; }
.chat-pkg dt { color: var(--muted); }
.chat-pkg dd { overflow-wrap: anywhere; }

/* Sidebar group labels (Daily work / Setup). */
.kb-nav-group { font-size: .75rem; color: var(--muted); padding: .9rem .75rem .3rem; }
.kb-nav-group:first-child { padding-top: .25rem; }