/* =========================================================================
   NEXION Integrated Systems Inc.
   Invoice & Business Records Management System - interface styles
   ========================================================================= */

:root {
  --navy-900: #0c182f;
  --navy-800: #14224a;
  --navy-700: #1b2a4a;
  --navy-600: #2a3a5a;
  --slate-600: #45506b;
  --slate-500: #55617f;
  --slate-400: #6a7690;
  --slate-300: #97a0b5;
  --blue-500: #3a60ac;
  --blue-600: #1b3a6b;
  --panel: #eef1f7;
  --border: #e3e7ef;
  --rule: #d7deea;
  --bg: #f6f8fc;
  --white: #fff;

  --ok: #0f6b45;
  --ok-bg: #e7f4ee;
  --warn: #8a5a00;
  --warn-bg: #fdf3e2;
  --danger: #9b1c1c;
  --danger-bg: #fcedec;
  --info: #1b3a6b;
  --info-bg: #e9eff8;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow-sm: 0 1px 2px rgba(12, 24, 47, .05);
  --shadow: 0 2px 10px rgba(12, 24, 47, .06), 0 1px 2px rgba(12, 24, 47, .04);
  --shadow-lg: 0 12px 32px rgba(12, 24, 47, .14);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy-700);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }

/* An uploaded image must never be able to widen the page. */
img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { margin: 0; color: var(--navy-800); font-weight: 700; letter-spacing: -.01em; }

.icon { flex: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy-800); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- shell -- */

.shell { display: grid; grid-template-columns: auto 1fr; min-height: 100vh; }

.sidebar {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0c182f 0%, #12203f 55%, #16264a 100%);
  color: #cfd8e8;
  position: sticky; top: 0; height: 100vh;
}

.sidebar__brand { padding: 20px 20px 14px; }
.sidebar__brand img { width: 132px; display: block; }

.nav { display: flex; flex-direction: column; gap: 1px; padding: 4px 12px 10px; flex: 1; overflow-y: auto; }

.nav__item {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 11px; border-radius: var(--radius-sm);
  color: #b9c4d8; font-size: 13.2px; font-weight: 500;
  text-decoration: none; position: relative;
  transition: background .14s ease, color .14s ease;
}
.nav__item:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.nav__item.is-active { background: rgba(58, 96, 172, .26); color: #fff; font-weight: 600; }
.nav__item.is-active::before {
  content: ""; position: absolute; left: -12px; top: 5px; bottom: 5px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--blue-500);
}
.nav__item .icon { color: #8fa0bd; }
.nav__item.is-active .icon, .nav__item:hover .icon { color: #fff; }

.nav__group {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .16em;
  color: #6c7b96; font-weight: 700;
  padding: 13px 12px 4px;
}
.nav__rule { height: 1px; background: rgba(255, 255, 255, .07); margin: 8px 12px; }

.nav__item--sub { padding-left: 12px; font-size: 13px; }
.nav__dot {
  flex: none; width: 18px; display: inline-flex; justify-content: center;
}
.nav__dot::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: .45;
}

.nav__item--soon { color: #6a7794; cursor: default; }
.nav__item--soon:hover { background: none; color: #6a7794; }
.nav__soon {
  margin-left: auto; font-size: 9px; text-transform: uppercase; letter-spacing: .1em;
  color: #5a6782; border: 1px solid rgba(255, 255, 255, .12);
  padding: 1px 5px; border-radius: 4px;
}

.sidebar__foot { padding: 13px 20px 16px; border-top: 1px solid rgba(255, 255, 255, .08); }
.sidebar__meta { font-size: 10.5px; color: #7e8bA5; letter-spacing: .04em; text-transform: uppercase; }
.sidebar__meta + .sidebar__meta { margin-top: 3px; }

.main { display: flex; flex-direction: column; min-width: 0; }

/* --------------------------------------------------------------- topbar -- */

.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 0 26px; height: 62px;
  background: var(--white); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}

.nav-toggle { display: none; cursor: pointer; color: var(--slate-500); padding: 6px; }
.nav-toggle-input { display: none; }

.search { display: flex; align-items: center; gap: 9px; flex: 1; max-width: 520px; color: var(--slate-400); }
.search input {
  flex: 1; border: 1px solid var(--border); background: #fbfcfe;
  border-radius: 8px; padding: 8px 12px; font: inherit; font-size: 13px; color: var(--navy-700);
}
.search input:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(58, 96, 172, .12); background: #fff; }

.topbar__user { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar__identity { text-align: right; line-height: 1.25; }
.topbar__name { display: block; font-size: 13px; font-weight: 600; color: var(--navy-800); }
.topbar__role { display: block; font-size: 11px; color: var(--slate-400); }

.menu { position: relative; }
.menu summary {
  list-style: none; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy-800); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
}
.menu summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: absolute; right: 0; top: 42px; z-index: 40;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); min-width: 216px; padding: 6px; display: grid; gap: 2px;
}
.menu__panel a, .menu__signout {
  display: block; width: 100%; text-align: left;
  padding: 8px 11px; border-radius: 6px; font-size: 13px; color: var(--navy-700);
  background: none; border: 0; font: inherit; cursor: pointer;
}
.menu__panel a:hover, .menu__signout:hover { background: var(--panel); text-decoration: none; }
.menu__signout { color: var(--danger); border-top: 1px solid var(--border); margin-top: 4px; border-radius: 0 0 6px 6px; }

/* -------------------------------------------------------------- content -- */

.content { padding: 26px; flex: 1; max-width: 1480px; width: 100%; }

.appfoot {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 26px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--slate-400); background: #fff;
}

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 20px;
}
.page-head__eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--slate-400); font-weight: 700; margin-bottom: 5px;
}
.page-head h1 { font-size: 24px; }
.page-head__sub { color: var(--slate-500); font-size: 13.5px; margin-top: 5px; max-width: 70ch; }
.page-head__actions { display: flex; gap: 9px; flex-wrap: wrap; }

/* --------------------------------------------------------------- cards --- */

.card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 18px; }
.card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.card__head h2 { font-size: 14.5px; }
.card__head .muted { font-size: 12.5px; }
.card__body { padding: 18px; }
.card__body--flush { padding: 0; }
.card__foot { padding: 12px 18px; border-top: 1px solid var(--border); background: #fbfcfe; border-radius: 0 0 var(--radius) var(--radius); }

.grid { display: grid; gap: 18px; }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.stat {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 17px; box-shadow: var(--shadow-sm); display: block; color: inherit;
}
a.stat:hover { border-color: var(--blue-500); text-decoration: none; box-shadow: var(--shadow); }
.stat__label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--slate-400); font-weight: 700;
}
.stat__value { font-size: 25px; font-weight: 700; color: var(--navy-800); margin-top: 7px; letter-spacing: -.02em; }
.stat__value--sm { font-size: 20px; }
.stat__meta { font-size: 12px; color: var(--slate-500); margin-top: 4px; }
.stat--ok .stat__value { color: var(--ok); }
.stat--danger .stat__value { color: var(--danger); }
.stat--warn .stat__value { color: var(--warn); }

/* -------------------------------------------------------------- tables --- */

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.2px; }
table.data th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--slate-400); font-weight: 700; padding: 11px 14px;
  border-bottom: 1px solid var(--rule); background: #fbfcfe; white-space: nowrap;
}
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: #fafbfe; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data .strong { font-weight: 600; color: var(--navy-800); }
table.data .nowrap { white-space: nowrap; }
table.data tfoot td { padding: 12px 14px; border-top: 1px solid var(--rule); font-weight: 600; color: var(--navy-800); }

.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--slate-400); }
.small { font-size: 12px; }
.strong { font-weight: 600; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

.empty { padding: 40px 20px; text-align: center; color: var(--slate-400); }
.empty strong { display: block; color: var(--navy-700); margin-bottom: 4px; font-size: 14px; }

/* -------------------------------------------------------------- badges --- */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--panel); color: var(--slate-500); white-space: nowrap;
}
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--danger { background: var(--danger-bg); color: var(--danger); }
.badge--info { background: var(--info-bg); color: var(--info); }
.badge--muted { background: var(--panel); color: var(--slate-500); }
.badge--void { background: #f1f2f6; color: var(--slate-400); text-decoration: line-through; }

.pill {
  display: inline-block; padding: 2px 8px; border-radius: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.pill--required { background: var(--danger-bg); color: var(--danger); }
.pill--upcoming { background: var(--warn-bg); color: var(--warn); }
.pill--optional { background: var(--info-bg); color: var(--info); }

/* ------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  padding: 8px 15px; border-radius: 8px; border: 1px solid transparent;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--navy-800); color: #fff; text-decoration: none;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--navy-900); text-decoration: none; color: #fff; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn--ghost { background: #fff; border-color: var(--border); color: var(--navy-700); }
.btn--ghost:hover { background: var(--panel); border-color: var(--rule); color: var(--navy-800); }
.btn--danger { background: #fff; border-color: #e9c6c6; color: var(--danger); }
.btn--danger:hover { background: var(--danger-bg); color: var(--danger); }
.btn--accent { background: var(--blue-500); }
.btn--accent:hover { background: var(--blue-600); }
.btn--sm { padding: 5px 11px; font-size: 12px; border-radius: 7px; }
.btn--block { width: 100%; }

.btn-row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------- forms --- */

.form { display: grid; gap: 16px; }
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.form-grid--3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.field { display: grid; gap: 5px; min-width: 0; }
.field > label, .field__label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--slate-400);
}
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="date"], .field input[type="number"], .field input[type="search"],
.field select, .field textarea, .input {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 13.5px; color: var(--navy-800); background: #fff;
}
.field textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus {
  outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(58, 96, 172, .12);
}
.field input:disabled, .field select:disabled, .field textarea:disabled { background: #f7f8fb; color: var(--slate-400); }
.field__hint { font-size: 11.5px; color: var(--slate-400); }
.field--check { display: flex; align-items: flex-start; gap: 9px; }
.field--check input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--blue-500); }
.field--check label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--navy-700); }

fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 16px; }
legend {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 700; color: var(--slate-400); padding: 0; margin-bottom: 2px;
}

.filters { display: flex; gap: 11px; flex-wrap: wrap; align-items: flex-end; }
.filters .field { min-width: 150px; }

/* --------------------------------------------------------------- flash --- */

.flash {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 15px; border-radius: var(--radius); margin-bottom: 18px;
  font-size: 13.5px; border: 1px solid;
}
.flash--success { background: var(--ok-bg); border-color: #bfe0d0; color: var(--ok); }
.flash--info { background: var(--info-bg); border-color: #cbd9ee; color: var(--info); }
.flash--error { background: var(--danger-bg); border-color: #edc7c5; color: var(--danger); }
.flash--warn { background: var(--warn-bg); border-color: #ecd7ac; color: var(--warn); }

.notice {
  border: 1px solid var(--rule); background: #fbfcfe;
  border-radius: var(--radius); padding: 14px 16px; font-size: 13px; color: var(--slate-600);
}
.notice--warn { background: var(--warn-bg); border-color: #ecd7ac; color: var(--warn); }
.notice--danger { background: var(--danger-bg); border-color: #edc7c5; color: var(--danger); }
.notice strong { color: inherit; }

/* -------------------------------------------------------------- detail --- */

.split { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
/* The invoice form's lines-and-totals split. It used to carry its columns as an
   inline style, which no media query can reach — the form stayed two-column on
   a phone however narrow the phone was. A class can be collapsed; an attribute
   cannot. */
.split--totals { grid-template-columns: minmax(0, 1fr) 300px; }

.deflist { display: grid; gap: 0; }
.deflist > div {
  display: grid; grid-template-columns: 44% 1fr; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.deflist > div:last-child { border-bottom: 0; }
.deflist dt { color: var(--slate-400); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.deflist dd { margin: 0; color: var(--navy-800); font-weight: 500; word-break: break-word; }

.totals { display: grid; gap: 9px; }
.totals__row { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; }
.totals__row--total {
  border-top: 1px solid var(--rule); padding-top: 11px; margin-top: 3px;
  font-size: 17px; font-weight: 700; color: var(--navy-800);
}

.timeline { display: grid; gap: 0; font-size: 12.5px; }
.timeline > li { list-style: none; padding: 9px 0 9px 18px; border-bottom: 1px solid var(--border); position: relative; }
.timeline > li:last-child { border-bottom: 0; }
.timeline > li::before {
  content: ""; position: absolute; left: 2px; top: 15px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--rule);
}
.timeline time { display: block; color: var(--slate-400); font-size: 11px; margin-top: 2px; }

/* -------------------------------------------------------------- charts --- */

.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font-family: var(--sans); }
.chart__legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--slate-500); margin-top: 10px; }
.chart__key { display: inline-flex; align-items: center; gap: 6px; }
.chart__swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.meter { height: 8px; border-radius: 999px; background: var(--panel); overflow: hidden; }
.meter__fill { height: 100%; border-radius: 999px; background: var(--blue-500); }
.meter__fill--warn { background: #d6941f; }
.meter__fill--danger { background: #b5322d; }

/* -------------------------------------------------------------- brand --- */

.brand-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.brand-row > * { min-width: 0; }

.brand-preview {
  display: flex; align-items: center; justify-content: center;
  height: 104px; padding: 14px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff;
}
.brand-preview--dark {
  background: linear-gradient(160deg, #0c182f 0%, #16264a 100%);
  border-color: #16264a;
}
/* Constrain on both axes: an uploaded logo can be any size or aspect ratio. */
.brand-preview img {
  display: block;
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}

.brand-slot__title { font-size: 14px; margin-bottom: 4px; }
.brand-slot__hint { max-width: 70ch; }

@media (max-width: 760px) {
  .brand-row { grid-template-columns: 1fr; gap: 16px; }
}

/* ------------------------------------------------------------- dialog --- */

.dialog {
  border: 0; padding: 0; max-width: 480px; width: calc(100% - 32px);
  border-radius: 14px; background: #fff; color: var(--navy-700);
  box-shadow: 0 24px 64px rgba(12, 24, 47, .28), 0 2px 8px rgba(12, 24, 47, .12);
}
.dialog::backdrop { background: rgba(12, 24, 47, .55); }
.dialog[open] { animation: dialog-in .16s ease-out; }
.dialog[open]::backdrop { animation: backdrop-in .16s ease-out; }

@keyframes dialog-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes backdrop-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .dialog[open], .dialog[open]::backdrop { animation: none; }
}

.dialog__body { display: flex; gap: 15px; padding: 24px 24px 4px; }

.dialog__icon {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--info-bg); color: var(--info);
}
.dialog__icon--danger { background: var(--danger-bg); color: var(--danger); }

.dialog__content { min-width: 0; }
.dialog__title { font-size: 16.5px; font-weight: 700; color: var(--navy-800); margin: 2px 0 6px; }
.dialog__message { font-size: 13.5px; line-height: 1.6; color: var(--slate-600); margin: 0; }

.dialog__foot {
  display: flex; justify-content: flex-end; gap: 9px;
  padding: 20px 24px 22px;
}

@media (max-width: 460px) {
  .dialog__body { padding: 20px 18px 4px; }
  .dialog__foot { padding: 18px; flex-direction: column-reverse; }
  .dialog__foot .btn { width: 100%; }
}

/* ----------------------------------------------------------- compliance --- */

.provenance {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 20px;
  padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--radius);
  background: #fbfcfe;
}
.provenance__item { display: grid; gap: 3px; min-width: 0; }
.provenance__label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--slate-400); font-weight: 700;
}
.provenance__value { font-size: 12.5px; color: var(--navy-800); word-break: break-word; }

.rule-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
.rule-status--ok { background: var(--ok-bg); color: var(--ok); }
.rule-status--info { background: var(--info-bg); color: var(--info); }
.rule-status--warn { background: var(--warn-bg); color: var(--warn); }
.rule-status--danger { background: var(--danger-bg); color: var(--danger); }
.rule-status--muted { background: var(--panel); color: var(--slate-500); }

.rule-card { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; padding: 16px 17px; }
.rule-card + .rule-card { margin-top: 12px; }
.rule-card__head { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.rule-card__title { font-size: 14.5px; font-weight: 700; color: var(--navy-800); }
.rule-card__meta { font-size: 11.5px; color: var(--slate-400); margin-top: 2px; }
.rule-card__reason { font-size: 13px; color: var(--slate-600); margin-top: 8px; max-width: 85ch; }

.missing-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.missing-list span {
  font-size: 11.5px; padding: 3px 9px; border-radius: 6px;
  background: var(--warn-bg); color: var(--warn); font-weight: 600;
}

.json-editor {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
  min-height: 130px; white-space: pre;
}

.fact-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  gap: 16px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.fact-row:last-child { border-bottom: 0; }
.fact-row__choice { display: flex; gap: 14px; flex-wrap: wrap; }
.fact-row__choice label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.fact-row__choice input { accent-color: var(--blue-500); }

@media (max-width: 760px) {
  .fact-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- tree --- */

.tree { font-family: var(--mono); font-size: 12.5px; line-height: 1.8; }
.tree ul { list-style: none; margin: 0; padding-left: 18px; border-left: 1px solid var(--border); }
.tree > ul { padding-left: 2px; border-left: 0; }
.tree li { position: relative; }
.tree .tree__folder { color: var(--navy-800); font-weight: 600; }
.tree .tree__file { color: var(--slate-500); }
.tree .tree__size { color: var(--slate-300); font-size: 11px; margin-left: 6px; }

/* --------------------------------------------------------------- items --- */

.line-items { width: 100%; border-collapse: collapse; }
.line-items th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--slate-400);
  font-weight: 700; text-align: left; padding: 0 8px 7px;
}
.line-items td { padding: 5px 8px 5px 0; vertical-align: top; }
.line-items input, .line-items textarea, .line-items select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px;
  font: inherit; font-size: 13px; color: var(--navy-800);
}
.line-items textarea { min-height: 40px; resize: vertical; }
.line-items input:focus, .line-items textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(58, 96, 172, .12); }
.line-items .col-amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--navy-800); padding-top: 16px; }
.line-items .col-remove { width: 34px; }
.line-item__remove {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  width: 28px; height: 28px; cursor: pointer; color: var(--slate-400); margin-top: 5px;
}
.line-item__remove:hover { color: var(--danger); border-color: #e9c6c6; background: var(--danger-bg); }

/* ---------------------------------------------------------------- auth --- */

.auth {
  min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--bg);
}
.auth__aside {
  background: linear-gradient(160deg, #0c182f 0%, #16264a 60%, #23375f 100%);
  color: #cfd8e8; padding: 56px; display: flex; flex-direction: column; justify-content: space-between;
}
.auth__aside img { width: 210px; }
.auth__aside h2 { color: #fff; font-size: 26px; line-height: 1.3; max-width: 20ch; }
.auth__aside p { color: #9fb0cd; font-size: 13.5px; max-width: 44ch; }
.auth__main { display: flex; align-items: center; justify-content: center; padding: 40px 26px; }
.auth__card { width: 100%; max-width: 390px; }
.auth__card h1 { font-size: 22px; margin-bottom: 6px; }
.auth__card .muted { font-size: 13.5px; margin-bottom: 24px; display: block; }
/* The sign-in card carries no subtitle: the notice it would repeat is stated
   on the panel beside it, so the heading needs that spacing itself. */
.auth__card--bare h1 { margin-bottom: 24px; }
.auth__legal { font-size: 11.5px; color: var(--slate-400); margin-top: 24px; line-height: 1.6; }

.code-input {
  font-family: var(--mono); font-size: 22px; letter-spacing: .5em; text-align: center;
}

.qr { display: block; width: 190px; height: 190px; border: 1px solid var(--border); border-radius: var(--radius); padding: 9px; background: #fff; }

.secret {
  font-family: var(--mono); font-size: 13px; background: var(--panel);
  padding: 10px 12px; border-radius: 7px; word-break: break-all; color: var(--navy-800);
}

/* ----------------------------------------------------------- utilities --- */

.stack { display: grid; gap: 18px; }
.stack--sm { gap: 10px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.hidden { display: none !important; }

.tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; }
.tabs a {
  padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--slate-500);
  border-bottom: 2px solid transparent; text-decoration: none; margin-bottom: -1px;
}
.tabs a:hover { color: var(--navy-800); text-decoration: none; }
.tabs a.is-active { color: var(--navy-800); border-bottom-color: var(--blue-500); }

/* --------------------------------------------------------- responsive --- */

@media (max-width: 1080px) {
  .split, .split--totals { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 60;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: var(--shadow-lg);
  }
  .nav-toggle-input:checked ~ .shell .sidebar { transform: translateX(0); }
  .nav-toggle { display: inline-flex; }
  .content { padding: 18px; }
  .topbar { padding: 0 16px; }
  .topbar__identity { display: none; }
  .auth { grid-template-columns: 1fr; }
  .auth__aside { display: none; }
}

@media (max-width: 560px) {
  .page-head { align-items: flex-start; }
  .page-head h1 { font-size: 20px; }
  .deflist > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ------------------------------------------------------------- printing -- */

@media print {
  .sidebar, .topbar, .appfoot, .page-head__actions, .btn, .flash { display: none !important; }
  .shell { grid-template-columns: 1fr; }
  .content { padding: 0; max-width: none; }
  .card { border: 0; box-shadow: none; }
  body { background: #fff; font-size: 11px; }
}

/* ------------------------------------------------------- document type --- */

.type-card {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 14px 15px; border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease;
}
.type-card:hover { border-color: var(--blue-500); box-shadow: var(--shadow-sm); }
.type-card input { margin-top: 3px; accent-color: var(--blue-500); }
.type-card > span { display: grid; gap: 3px; min-width: 0; }
.type-card__name { font-size: 13.5px; font-weight: 600; color: var(--navy-800); }
.type-card__meta { font-size: 11px; color: var(--slate-400); font-family: var(--mono); }
.type-card__desc { font-size: 12px; color: var(--slate-500); }
.type-card--disabled { opacity: .55; cursor: not-allowed; }
.type-card--disabled:hover { border-color: var(--border); box-shadow: none; }

/* Completion checklist — each row is a real yes/no answer, not decoration. */
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.checklist__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
}
.checklist__item:nth-child(odd) { background: var(--bg); }
.checklist__item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--blue-500);
}
.checklist__item label { margin: 0; font-weight: 400; cursor: pointer; }
.checklist__item input[type="text"] { flex: 1 1 auto; }

/* Records health — the verdict first, then what to do about it. */
.health-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-left-width: 5px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
}
.health-banner--ok { border-left-color: var(--ok); }
.health-banner--warn { border-left-color: var(--warn); }
.health-banner--danger { border-left-color: var(--danger); }
.health-banner__badge {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
}
.health-banner--ok .health-banner__badge { background: var(--ok-bg); color: var(--ok); }
.health-banner--warn .health-banner__badge { background: var(--warn-bg); color: var(--warn); }
.health-banner--danger .health-banner__badge { background: var(--danger-bg); color: var(--danger); }
.health-banner__summary { margin: 0; font-weight: 600; color: var(--navy-700); }
.health-banner__meta { margin: 4px 0 0; font-size: 12.5px; color: var(--slate-400); }

.health-item {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
}
.health-item:last-child { border-bottom: 0; }
.health-item--warn { border-left-color: var(--warn); }
.health-item--danger { border-left-color: var(--danger); }
.health-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.health-item__title { margin-left: 10px; font-weight: 600; color: var(--navy-700); }
.health-item__summary { margin: 8px 0 0; font-size: 13.5px; color: var(--slate-600); }
.health-item__list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
  font-size: 13px;
}
.health-item__list li { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   CRM
   --------------------------------------------------------------------------- */

/* Switching between clients / prospects / partners: the same register, filtered. */
.kind-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.kind-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--slate-500);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.kind-tab:hover { color: var(--navy-700); background: var(--panel); }
.kind-tab--on { color: var(--navy-800); border-bottom-color: var(--blue-500); background: var(--white); }
.kind-tab__count {
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--slate-500);
}
.kind-tab--on .kind-tab__count { background: var(--info-bg); color: var(--blue-600); }

/* Count badge on a record tab; the tabs themselves reuse .tabs above. */
.tab__count {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--slate-500);
}
.tabs a.is-active .tab__count { background: var(--info-bg); color: var(--blue-600); }

/* The pipeline board: one column per stage. Scrolls sideways on a narrow screen
   rather than squeezing the columns into unreadable slivers. */
.pipeline {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.pipeline__column {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.pipeline__head { padding: 12px 14px 10px; border-bottom: 1px solid var(--rule); }
.pipeline__title { font-weight: 700; font-size: 13px; color: var(--navy-800); }
.pipeline__meta { font-size: 12px; color: var(--slate-500); margin-top: 2px; }
.pipeline__blurb { font-size: 11.5px; color: var(--slate-400); margin: 6px 0 0; line-height: 1.4; }
.pipeline__body { padding: 10px; display: grid; gap: 8px; align-content: start; }
.pipeline__empty { font-size: 12px; color: var(--slate-400); margin: 4px 2px; }

.opp {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue-500);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.opp:hover { border-color: var(--blue-500); box-shadow: var(--shadow); }
.opp--stale { border-left-color: var(--warn); }
.opp__title { font-weight: 600; font-size: 13px; color: var(--navy-800); line-height: 1.35; }
.opp__client { font-size: 12px; color: var(--slate-500); margin-top: 2px; }
.opp__foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; }
.opp__value { font-weight: 700; font-size: 13px; color: var(--navy-700); }
.opp__prob { font-size: 11.5px; color: var(--slate-400); }
.opp__date { font-size: 11.5px; color: var(--slate-400); margin-top: 3px; }
.opp__stale { font-size: 11.5px; color: var(--warn); margin-top: 4px; font-weight: 600; }

/* Stage track: each step is a button, so moving forward is one click. */
.stage-track { display: flex; flex-wrap: wrap; gap: 6px; }
.stage-step__form { display: contents; }
.stage-step {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--slate-500);
  cursor: pointer;
}
button.stage-step:hover { border-color: var(--blue-500); color: var(--navy-700); }
.stage-step--done { background: var(--info-bg); color: var(--blue-600); border-color: transparent; }
.stage-step--on {
  background: var(--navy-800);
  color: var(--white);
  border-color: var(--navy-800);
  cursor: default;
}

/* One logged call, email or meeting. */
.activity { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.activity:last-child { border-bottom: 0; }
.activity__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.activity__by { margin-left: auto; color: var(--slate-400); font-size: 11.5px; }
.activity__summary { margin: 8px 0 4px; font-size: 13.5px; color: var(--slate-600); line-height: 1.5; }

.check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--blue-500); }

ul.plain { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 5px; }

/* ---------------------------------------------------------------------------
   Document builder and catalogues
   --------------------------------------------------------------------------- */

/* Side-by-side: the form keeps its normal width, the preview takes the rest and
   stays put while the form scrolls. Stacks below 1180px, where two columns
   would leave neither readable. */
.builder--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 46%);
  gap: 20px;
  align-items: start;
}
.builder__form { min-width: 0; }
.builder__preview { position: sticky; top: 16px; }

.preview-pane {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 48px);
  min-height: 520px;
}
.preview-pane__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
}
.preview-pane__frame { flex: 1 1 auto; width: 100%; border: 0; background: var(--bg); }

@media (max-width: 1180px) {
  .builder--split { grid-template-columns: minmax(0, 1fr); }
  .builder__preview { position: static; }
  .preview-pane { height: 70vh; }
}

/* A clause, shown in full: wording is the thing being judged, so it is never
   truncated behind a "show more". */
.clause { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.clause:last-child { border-bottom: 0; }
.clause__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.clause__title { margin-left: 8px; font-weight: 600; color: var(--navy-800); }
.clause__body {
  margin: 10px 0 6px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--slate-600);
  white-space: pre-wrap;
}

/* Banking — direction is the first thing to read on a bank line. */
.amount-in { color: var(--ok); }
.amount-out { color: var(--danger); }

.candidate { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.candidate:last-child { border-bottom: 0; }
.candidate--exact { border-left: 3px solid var(--ok); }
.candidate__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.candidate__detail { margin: 5px 0 9px; }

/* One day on the weekly timesheet with nothing in it. */
.day-empty { padding: 14px 20px; font-size: 13px; color: var(--slate-400); }

/* An invoice line built from hours lists the days behind it. */
.line-detail { white-space: pre-wrap; }

/* ---------------------------------------------------------------------------
   Executive dashboard
   --------------------------------------------------------------------------- */

/* One action, from whichever part of the business it came. The area label is
   what makes a mixed list readable at a glance. */
.action-group { border-bottom: 1px solid var(--rule); }
.action-group:last-child { border-bottom: 0; }
.action-group__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px 8px;
  background: var(--panel);
}

.action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  text-decoration: none;
  color: inherit;
}
.action:last-child { border-bottom: 0; }
.action:hover { background: var(--bg); text-decoration: none; }
.action--danger { border-left-color: var(--danger); }
.action--warn { border-left-color: var(--warn); }
.action--info { border-left-color: var(--blue-500); }
.action--more { display: block; font-size: 12.5px; padding: 10px 20px 12px; }

.action__area {
  flex: 0 0 84px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--slate-400);
}
.action__body { flex: 1 1 auto; min-width: 0; }
.action__title {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy-800);
}
.action__detail { display: block; font-size: 12.5px; color: var(--slate-500); margin-top: 1px; }
.action__amount { flex: 0 0 auto; font-weight: 700; font-size: 13.5px; color: var(--navy-700); }

/* Pipeline shown as proportions rather than a second copy of the board. */
.stage-bars { display: grid; gap: 10px; }
.stage-bar__label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  margin-bottom: 4px;
}
.stage-bar__track {
  height: 7px;
  border-radius: 999px;
  background: var(--panel);
  overflow: hidden;
}
.stage-bar__fill { height: 100%; background: var(--blue-500); border-radius: 999px; }

/* How much of a project's contract has been invoiced. */
.progress {
  height: 6px;
  border-radius: 999px;
  background: var(--panel);
  overflow: hidden;
}
.progress__fill { height: 100%; background: var(--blue-500); border-radius: 999px; }

/* A stat inside a card, where the card already supplies the frame. */
.stat--flat { border: 0; box-shadow: none; background: transparent; padding: 0; }
.grid--stats--tight { gap: 16px; }

/* ------------------------------------------------------- reminders bell --- */

.topbar__bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; color: var(--slate-400);
  border: 1px solid transparent;
}
.topbar__bell:hover { background: var(--panel); color: var(--slate-600); text-decoration: none; }
.topbar__bell--on { color: var(--warn); }
.topbar__count {
  position: absolute; top: -3px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
  border: 2px solid var(--white); box-sizing: content-box;
}

/* ------------------------------------------------------------ reminders --- */

.reminders { list-style: none; margin: 0; padding: 0; }
.reminder {
  display: flex; gap: 16px; align-items: flex-start; justify-content: space-between;
  padding: 14px 18px; border-top: 1px solid var(--rule);
}
.reminder:first-child { border-top: 0; }
.reminder--now { border-left: 3px solid var(--danger); }
.reminder--soon { border-left: 3px solid var(--warn); }
.reminder--waiting { border-left: 3px solid var(--blue-500); }
.reminder--new { background: #fcfdff; }
.reminder__main { min-width: 0; }
.reminder__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.reminder__area {
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 700; color: var(--slate-400);
}
.reminder__title { font-size: 14px; font-weight: 650; color: var(--navy-600); }
.reminder__detail { font-size: 13px; color: var(--slate-500); margin-top: 3px; }
.reminder__meta { margin-top: 5px; }
.reminder__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.reminder__actions select { padding: 4px 6px; font-size: 12px; }

/* -------------------------------------------------------- close / notes --- */

.notice--ok { background: var(--ok-bg); border-color: #c6e2cd; color: var(--ok); }

.issue { padding: 12px 0; border-top: 1px solid var(--rule); }
.issue:first-child { border-top: 0; padding-top: 0; }
.issue__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.issue__head strong { font-size: 13.6px; color: var(--navy-600); }
.issue ul.plain { margin: 8px 0 0; }
.issue ul.plain li { padding: 2px 0; }

/* ----------------------------------------------------------- block editor --- */

.editor-row {
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 14px; background: #fff; overflow: hidden;
}
.editor-row__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: #f7f9fc; border-bottom: 1px solid var(--rule);
}
.editor-row__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--navy-600); color: #fff; font-size: 11px; font-weight: 800;
}
.editor-row__kind {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--slate-500);
}
.editor-row__spacer { flex: 1; }
.editor-row__body { padding: 14px 16px; }
.editor-row__body .field { margin-bottom: 12px; }
.editor-row__body .field:last-child { margin-bottom: 0; }
.editor-row__bar .btn[disabled] { opacity: .35; pointer-events: none; }

.editor-add { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.editor-add select { min-width: 220px; }

.inline-field { display: flex; align-items: center; gap: 6px; }

/* ============================================================ sidebar rail ===
   The sidebar collapses to a 68px rail of icons. The state is a cookie the
   server reads before rendering, so a collapsed sidebar arrives collapsed
   rather than snapping shut a frame later.
   ========================================================================= */

.sidebar { width: 252px; transition: width .22s cubic-bezier(.4, 0, .2, 1); }
.shell--rail .sidebar { width: 68px; }

/* --- the brand row and its toggle ---------------------------------------- */

.sidebar__brand {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.sidebar__brand .sidebar__mark { width: 32px; display: none; }
.shell--rail .sidebar__brand .sidebar__logo { display: none; }
.shell--rail .sidebar__brand .sidebar__mark { display: block; }

.sidebar__collapse { display: flex; }
.sidebar__collapse-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 9px;
  background: rgba(255, 255, 255, .05); color: #93a3bf; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sidebar__collapse-btn:hover {
  background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .2);
}
.sidebar__collapse-btn:focus-visible {
  outline: none; color: #fff;
  border-color: rgba(120, 165, 255, .7);
  box-shadow: 0 0 0 3px rgba(58, 96, 172, .35);
}
.sidebar__collapse-btn .icon { width: 15px; height: 15px; transition: transform .22s ease; }
.shell--rail .sidebar__collapse-btn .icon { transform: rotate(180deg); }

/* In the rail the mark and the toggle stack, centred, with a hairline under
   them so the top of the strip reads as a header rather than two things that
   happen to be near each other.

   The toggle stays in normal flow and stays visible. Floating it at a fixed
   offset left it sitting at no particular distance from anything, and fading it
   in on hover meant the one control that gets you out of the strip was the one
   control you could not see. */
.shell--rail .sidebar__brand {
  flex-direction: column; gap: 11px;
  padding: 16px 0 13px; justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  margin-bottom: 4px;
}
.shell--rail .sidebar__collapse { position: static; opacity: 1; }
.shell--rail .sidebar__collapse-btn { width: 34px; height: 34px; border-radius: 10px; }
.shell--rail .sidebar__collapse-btn .icon { width: 16px; height: 16px; }

/* --- items in the rail ---------------------------------------------------- */

.nav__label { transition: opacity .12s ease; }
.shell--rail .nav { padding-left: 10px; padding-right: 10px; align-items: stretch; }
.shell--rail .nav__item { justify-content: center; padding: 9px 0; }
.shell--rail .nav__label {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.shell--rail .nav__group { height: 1px; padding: 0; margin: 9px 10px; overflow: hidden;
  background: rgba(255, 255, 255, .08); color: transparent; }
.shell--rail .nav__rule { margin: 9px 10px; }
.shell--rail .nav__item.is-active::before { left: -10px; }
.shell--rail .sidebar__foot { display: none; }

/* The label, shown beside the rail on hover.
   It is a separate element parked on the body rather than a pseudo-element on
   the item, because the nav scrolls and anything drawn inside a scrolling box
   is clipped at its edge — the label would be cut off exactly where it starts.
   Without JavaScript the items carry a title instead, so the rail is never a
   row of unexplained icons. */
.nav-flyout {
  position: fixed; z-index: 80; pointer-events: none;
  padding: 6px 11px; border-radius: 7px; white-space: nowrap;
  background: #0d1b33; color: #fff; font-size: 12.5px; font-weight: 600;
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: 0 8px 24px rgba(6, 12, 26, .5);
  opacity: 0; transform: translateY(-50%) translateX(-6px);
  transition: opacity .12s ease, transform .12s ease;
}
.nav-flyout.is-shown { opacity: 1; transform: translateY(-50%) translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .sidebar, .nav__item::after, .sidebar__collapse-btn .icon { transition: none; }
}

/* ======================================================= the scroll thumb ===
   A thin rail that stays out of the way until the sidebar is under the
   pointer, then lights up in the NEXION blue. The track is drawn as part of
   the sidebar rather than as a grey gutter cut out of it.
   ========================================================================= */

.nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .14) transparent;
  scroll-behavior: smooth;
}
.sidebar:hover .nav { scrollbar-color: rgba(110, 160, 255, .55) transparent; }

.nav::-webkit-scrollbar { width: 10px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
  background-color: rgba(255, 255, 255, .13);
  transition: background-color .18s ease;
}
.sidebar:hover .nav::-webkit-scrollbar-thumb {
  background-image: linear-gradient(180deg, #5b86d8 0%, #3a60ac 100%);
  background-clip: content-box;
  background-color: transparent;
  box-shadow: 0 0 8px rgba(91, 134, 216, .5);
}
.nav::-webkit-scrollbar-thumb:hover {
  border-width: 2px;
  background-image: linear-gradient(180deg, #7ba0e8 0%, #4a72c4 100%);
}
.nav::-webkit-scrollbar-thumb:active { border-width: 2px; }

@media (prefers-reduced-motion: reduce) {
  .nav { scroll-behavior: auto; }
}

/* ------------------------------------------------- the rail on a phone --- */
/* Placed after the rail rules deliberately: a media query carries no extra
   specificity, so these only win by coming later. The rail is a desktop idea —
   on a phone the sidebar is a drawer that is either open or shut, and a 68px
   strip of icons would be neither. */

@media (max-width: 900px) {
  .shell--rail .sidebar { width: 260px; }
  .shell--rail .sidebar__foot { display: block; }
  .shell--rail .nav__label {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none;
  }
  .shell--rail .sidebar__brand .sidebar__logo { display: block; }
  .shell--rail .sidebar__brand .sidebar__mark { display: none; }
  .shell--rail .sidebar__brand {
    flex-direction: row; gap: 10px; padding: 20px 20px 14px;
    justify-content: space-between; border-bottom: 0; margin-bottom: 0;
  }
  .shell--rail .nav { padding: 4px 12px 10px; }
  .shell--rail .nav__item { justify-content: flex-start; padding: 7px 11px; }
  .shell--rail .nav__item.is-active::before { left: -12px; }
  .shell--rail .sidebar__collapse { position: static; opacity: 1; }
  .shell--rail .nav__group {
    height: auto; padding: 13px 12px 4px; margin: 0; background: none;
    color: #6c7b96; overflow: visible;
  }
  /* Nothing to collapse when the sidebar is already a drawer. */
  .sidebar__collapse { display: none; }
  .nav-flyout { display: none; }
}

/* =============================================================== responsive ===
   Phone, tablet, laptop, desktop.
   ===========================================================================

   Everything below fixes one of three things, and it is worth naming them
   because they are the only three faults an audit at 375, 414, 768, 1024, 1366
   and 1920 pixels actually found.

   1. A grid track that demands more room than the box it sits in.
      `repeat(auto-fit, minmax(230px, 1fr))` reads as "at least 230, share the
      rest" — but below 230 it keeps demanding 230, the track overflows, and
      every ancestor with an automatic width grows to match. That is how one
      date field on the tax page pushed the whole page 65px sideways. Wrapping
      the floor in `min(..., 100%)` lets the track give up and fill the box.

   2. A row of tabs with nowhere to go. The strips are a fixed set of links;
      on a phone they simply do not fit, so they scroll sideways within their
      own strip instead of taking the page with them.

   3. A two-part row that assumes there is room for both parts. A reminder with
      its actions on the right left the text column exactly zero pixels wide at
      375. Those rows stack.

   Tablet and above were already sound; the breakpoints below tighten spacing
   rather than rearrange anything. */

/* --- 1. grids that fit the box they are in -------------------------------- */

/* A single-column grid with no declared track gets an implicit `auto` one, and
   `auto` is sized to its content. So a wide child does not get asked to fit the
   column — the column grows to fit the child, and every wrapper above it grows
   too. These are all one-column wrappers; each is told to be exactly as wide as
   it is allowed to be, and no wider. */
.stack, .form, fieldset, .field, .deflist { grid-template-columns: minmax(0, 1fr); }

.grid--stats { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.form-grid { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.form-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.provenance { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }

/* A flex row of filters must be allowed to give up its minimum too. */
.filters .field { min-width: min(150px, 100%); }

/* A field that runs the full width of a two-column form.
   It cannot simply say `span 2`: once the form collapses to one column there is
   no second column to span, so the grid invents one and the row hangs off the
   side of the page. Asking for the whole row, however many columns that is,
   says the same thing and survives the collapse. */
.field--wide { grid-column: 1 / -1; }

/* A fieldset carries `min-width: min-content` from the browser's own stylesheet,
   and that floor beats anything the grid inside it is told. On the tax page it
   held a two-column layout open at a width the phone did not have, and the date
   field hung off the side. Nothing in this application relies on that floor. */
fieldset { min-width: 0; }

/* A grid or flex child refuses to shrink below its content unless told it may.
   Fields hold inputs with their own intrinsic widths — a date picker will not
   go below about 140px — so the field, not the input, is what has to give.

   `1fr` is the same trap wearing a different hat: it means `minmax(auto, 1fr)`,
   and that `auto` floor is the item's min-content. A column that collapses to
   `1fr` on a phone therefore still refuses to go below the widest thing inside
   it, which is how a line-items table dragged the whole invoice form sideways
   while sitting inside a box that was scrolling it perfectly well. */
.form-grid > *, .grid > *, .filters > *,
.split > *, .fact-row > *, .brand-row > *, .stack > * { min-width: 0; }

/* --- 2. tab strips scroll inside themselves ------------------------------- */

.kind-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  -webkit-overflow-scrolling: touch;
}
.kind-tab { flex: 0 0 auto; white-space: nowrap; }
.kind-tabs::-webkit-scrollbar { height: 4px; }
.kind-tabs::-webkit-scrollbar-track { background: transparent; }
.kind-tabs::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 999px; }

/* --- laptop: the same layout, less air ------------------------------------ */

@media (max-width: 1180px) {
  .content { padding: 20px; }
  .topbar { padding: 0 18px; }
  .appfoot { padding: 14px 20px; }
}

/* --- tablet --------------------------------------------------------------- */

@media (max-width: 900px) {
  .content { padding: 18px 16px; }
  .page-head { margin-bottom: 16px; }
  /* The search box is the only thing between the menu button and the account
     menu; it should take what is left rather than a fixed maximum — and it must
     be allowed to give that back when there is nothing left to take. */
  .search { max-width: none; min-width: 0; }
  .search input { min-width: 0; }
}

/* --- the narrowest phones still in use ------------------------------------ */

@media (max-width: 380px) {
  .topbar { gap: 10px; padding: 0 12px; }
  .topbar__user { gap: 8px; }
  .search { gap: 6px; }
  .content { padding: 12px 10px; }
}

/* --- phone ---------------------------------------------------------------- */

@media (max-width: 640px) {
  .content { padding: 14px 12px; }
  .card__head, .card__body, .card__foot { padding-left: 15px; padding-right: 15px; }

  /* A row with its actions on the right has no right on a phone. */
  .reminder { flex-direction: column; align-items: stretch; gap: 10px; }
  .reminder__actions { justify-content: flex-start; }
  .reminder__actions form { flex: 0 0 auto; }

  .action { flex-wrap: wrap; gap: 6px 12px; }
  .action__area { flex-basis: 100%; }

  .issue__head { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* The editor's Up / Down / Remove buttons wrap under the block name rather
     than squeezing it out of existence. */
  .editor-row__bar { flex-wrap: wrap; }
  .editor-row__spacer { flex-basis: 100%; height: 0; }
  .editor-row__body { padding: 12px 13px; }
  .editor-add { flex-wrap: wrap; }
  .editor-add select { min-width: 0; flex: 1 1 160px; }

  /* An action bar that wraps is fine; one that overflows is not. */
  .page-head__actions { width: 100%; }
  .filters { gap: 9px; }
  .btn-row { width: 100%; }

  .split, .split--totals, .fact-row, .brand-row { grid-template-columns: minmax(0, 1fr); }
  .deflist > div { grid-template-columns: 1fr; gap: 2px; }
}

/* --- touch ---------------------------------------------------------------- */

/* Sized by what a finger can hit, not by what the pointer happens to be doing
   right now: a laptop with a touchscreen reports coarse while still using a
   mouse, and a slightly taller row costs it nothing. */
@media (pointer: coarse) {
  .nav__item { padding-top: 10px; padding-bottom: 10px; }
  .kind-tab { padding-top: 11px; padding-bottom: 11px; }
  .btn { min-height: 38px; }
  .btn--sm { min-height: 32px; }
  .menu__panel a, .menu__signout { padding-top: 11px; padding-bottom: 11px; }
  .reminder__actions select { padding: 7px 8px; }
}