/*
 * KG Business Suite design system.
 *
 * Direction: a warm, tactile workspace. A cream-to-blush canvas carries
 * soft paper panels; work items are bold, fully coloured tiles whose colour
 * says where they stand (sun, forest, ember, night). Navigation is a row of
 * pill tabs with a floating dark tool rail for personal shortcuts. Manrope
 * carries the interface and its figures (tabular numerals); IBM Plex Mono is
 * kept only for codes and identifiers. Headings are large and set on two
 * lines where they fit, so each page opens with one clear statement.
 *
 * Scales (use the tokens, never ad hoc values):
 *   type    --fs-xs 12 · --fs-sm 13 · --fs-md 14 · --fs-lg 16 · --fs-xl 20 · --fs-2xl 28 · --fs-3xl 40
 *   space   --s-1 4 · --s-2 8 · --s-3 12 · --s-4 16 · --s-5 24 · --s-6 32 · --s-7 48 · --s-8 64
 *   radius  --r-1 10 (controls) · --r-2 18 (tiles) · --r-3 26 (panels) · --r-pill
 *
 * Tile colours and the text on them (all pairs meet WCAG AA for body text):
 *   sun     --sun / --on-sun       pending, early stages
 *   forest  --forest / --on-forest in progress, healthy
 *   ember   --ember / --on-ember   late stages, attention
 *   night   --night / --on-night   neutral emphasis, done
 */

@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/display/manrope-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/display/manrope-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/display/manrope-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/display/manrope-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/mono/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/mono/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-md: 0.875rem; --fs-lg: 1rem; --fs-xl: 1.25rem; --fs-2xl: 1.75rem; --fs-3xl: 2.5rem;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --r-1: 10px; --r-2: 18px; --r-3: 26px; --r-pill: 999px;
  --rail: 64px;
  --content-max: 1440px;

  --canvas: #f6efe6;
  --canvas-glow-1: #f4dfd3;
  --canvas-glow-2: #efe9d9;
  --surface: #fffcf8;
  --surface-2: #f4ece2;
  --glass: rgba(255, 252, 248, 0.72);
  --ink: #1b1a19;
  --ink-2: #4a4541;
  --ink-3: #6a635c;
  --rule: #ebe2d7;
  --rule-strong: #d6cbbd;
  --primary: #1b1a19;
  --primary-ink: #fffcf8;
  --focus: #2f6fdd;

  --sun: #f2c94c; --on-sun: #1b1a19; --on-sun-2: #4f4115;
  --forest: #2c5b4d; --on-forest: #ffffff; --on-forest-2: #c9ddd5;
  --ember: #c1441d; --on-ember: #ffffff; --on-ember-2: #fff4f0;
  --night: #1d1c1b; --on-night: #ffffff; --on-night-2: #bdb6ae;

  --good: #2c6a4e; --good-soft: #e0efe6;
  --warn: #85560a; --warn-soft: #f8ecd2;
  --bad: #b2381c; --bad-soft: #f9e1d9;
  --neutral-soft: #efe7dc;
  --accent: #2c5b4d; --accent-soft: #e0ece6;

  --shadow-1: 0 1px 2px rgba(41, 30, 18, 0.05), 0 4px 14px rgba(41, 30, 18, 0.05);
  --shadow-2: 0 18px 40px rgba(41, 30, 18, 0.18);
  --panel-bg: #1d1c1b; --panel-ink: #f6efe6; --panel-accent: #f2c94c;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --canvas: #141311; --canvas-glow-1: #2a1d17; --canvas-glow-2: #1d1f19;
    --surface: #1f1d1a; --surface-2: #29261f; --glass: rgba(31, 29, 26, 0.78);
    --ink: #f3eee7; --ink-2: #cbc3b9; --ink-3: #a19990; --rule: #302c27; --rule-strong: #443e37;
    --primary: #f3eee7; --primary-ink: #1b1a19; --focus: #7aa7ff;
    --sun: #e8bf45; --on-sun: #1b1a19; --on-sun-2: #4f4115;
    --forest: #2f6a58; --on-forest: #ffffff; --on-forest-2: #cfe3db;
    --ember: #b94320; --on-ember: #ffffff; --on-ember-2: #fff4f0;
    --night: #34312c; --on-night: #ffffff; --on-night-2: #cfc8bf;
    --good: #7fcaa4; --good-soft: #18302a; --warn: #e6b45c; --warn-soft: #33270f; --bad: #f08a6c; --bad-soft: #3a1d14;
    --neutral-soft: #2b2823; --accent: #7fcaa4; --accent-soft: #1b322b;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 18px 40px rgba(0, 0, 0, 0.55);
    --panel-bg: #0f0e0d; --panel-ink: #f3eee7; --panel-accent: #e8bf45;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --canvas: #141311; --canvas-glow-1: #2a1d17; --canvas-glow-2: #1d1f19;
  --surface: #1f1d1a; --surface-2: #29261f; --glass: rgba(31, 29, 26, 0.78);
  --ink: #f3eee7; --ink-2: #cbc3b9; --ink-3: #a19990; --rule: #302c27; --rule-strong: #443e37;
  --primary: #f3eee7; --primary-ink: #1b1a19; --focus: #7aa7ff;
  --sun: #e8bf45; --on-sun: #1b1a19; --on-sun-2: #4f4115;
  --forest: #2f6a58; --on-forest: #ffffff; --on-forest-2: #cfe3db;
  --ember: #b94320; --on-ember: #ffffff; --on-ember-2: #fff4f0;
  --night: #34312c; --on-night: #ffffff; --on-night-2: #cfc8bf;
  --good: #7fcaa4; --good-soft: #18302a; --warn: #e6b45c; --warn-soft: #33270f; --bad: #f08a6c; --bad-soft: #3a1d14;
  --neutral-soft: #2b2823; --accent: #7fcaa4; --accent-soft: #1b322b;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 18px 40px rgba(0, 0, 0, 0.55);
  --panel-bg: #0f0e0d; --panel-ink: #f3eee7; --panel-accent: #e8bf45;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font: 400 var(--fs-md)/1.55 var(--font-sans);
  background-color: var(--canvas);
  background-image: radial-gradient(1100px 620px at 85% -10%, var(--canvas-glow-1), transparent 70%), radial-gradient(900px 600px at -10% 30%, var(--canvas-glow-2), transparent 70%);
  background-attachment: fixed;
  font-variant-numeric: tabular-nums;
}
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: var(--fs-3xl); line-height: 1.05; }
h2 { font-size: var(--fs-xl); line-height: 1.3; }
h3 { font-size: var(--fs-lg); font-weight: 600; }
p { margin: 0 0 var(--s-3); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mono { font-family: var(--font-mono); font-size: 0.95em; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s-4); top: -40px; background: var(--ink); color: var(--canvas); padding: var(--s-2) var(--s-3); border-radius: var(--r-1); z-index: 50; }
.skip:focus { top: var(--s-2); }
svg { flex: none; }

/* ---------- Shell: header, tabs, floating rail ---------- */
.shell { min-height: 100vh; padding: var(--s-5) var(--s-6) var(--s-8) calc(var(--rail) + var(--s-7)); }
.shell-inner { max-width: var(--content-max); margin: 0 auto; }
.topnav { display: flex; align-items: center; gap: var(--s-5); margin-bottom: var(--s-3); }
.brand { display: flex; gap: var(--s-3); align-items: center; text-decoration: none; color: var(--ink); flex: none; }
.brand-mark { width: 40px; height: 40px; border-radius: 12px; background: var(--night); color: var(--on-night); display: grid; place-items: center; }
.brand-mark svg { width: 22px; height: 22px; }
.brand-name { font-weight: 700; font-size: var(--fs-xl); letter-spacing: -0.02em; line-height: 1.1; }
.brand-sub { display: block; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; letter-spacing: 0; }
.topnav-actions { margin-left: auto; display: flex; gap: var(--s-2); align-items: center; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); border: 1px solid var(--rule); box-shadow: var(--shadow-1); cursor: pointer; text-decoration: none; padding: 0; font: inherit; }
.icon-btn:hover { border-color: var(--rule-strong); }
.icon-btn svg { width: 18px; height: 18px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--forest); color: var(--on-forest); display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700; flex: none; text-decoration: none; border: 2px solid var(--surface); box-shadow: var(--shadow-1); }
.avatar-sm { width: 26px; height: 26px; font-size: 10px; border-width: 2px; box-shadow: none; }
.avatars { display: inline-flex; }
.avatars .avatar + .avatar { margin-left: -8px; }

.tabs { display: flex; gap: var(--s-1); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: var(--s-1) 0; margin-bottom: var(--s-2); }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; padding: 9px var(--s-4); border-radius: var(--r-pill); color: var(--ink); text-decoration: none; font-weight: 500; }
.tabs a:hover { background: var(--glass); }
.tabs a[aria-current='page'] { background: var(--primary); color: var(--primary-ink); font-weight: 600; }
.subtabs { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: 0 0 var(--s-5); }
.subtabs a { padding: 5px var(--s-3); border-radius: var(--r-pill); border: 1px solid var(--rule-strong); color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; background: var(--glass); }
.subtabs a:hover { color: var(--ink); border-color: var(--ink-3); }
.subtabs a[aria-current='page'] { background: var(--surface); color: var(--ink); border-color: var(--ink); }

.rail { position: fixed; left: var(--s-5); top: 50%; transform: translateY(-50%); z-index: 30; width: var(--rail); padding: var(--s-3) 0; background: var(--night); border-radius: var(--r-pill); display: flex; flex-direction: column; align-items: center; gap: var(--s-1); box-shadow: var(--shadow-2); }
.rail a, .rail button { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--on-night-2); background: transparent; border: 0; cursor: pointer; text-decoration: none; padding: 0; }
.rail a:hover, .rail button:hover, .rail a[aria-current='page'] { color: var(--on-night); background: rgba(255, 255, 255, 0.1); }
.rail svg { width: 18px; height: 18px; }
.rail hr { width: 24px; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); margin: var(--s-2) 0; }
.rail .tip { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--night); color: var(--on-night); font-size: var(--fs-xs); font-weight: 600; padding: 5px 10px; border-radius: var(--r-pill); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s ease; }
.rail a:hover .tip, .rail a:focus-visible .tip, .rail button:hover .tip, .rail button:focus-visible .tip { opacity: 1; }
.rail form { margin: 0; }
.main { min-width: 0; }

@media (max-width: 900px) {
  .shell { padding: var(--s-4) var(--s-4) calc(var(--s-8) + var(--s-6)); }
  .topnav { gap: var(--s-3); flex-wrap: wrap; }
  .topnav .tabs { order: 3; flex: 1 0 100%; margin: 0 calc(-1 * var(--s-4)); padding: var(--s-1) var(--s-4); }
  .brand-name { font-size: var(--fs-lg); }
  .rail { top: auto; bottom: var(--s-3); left: 50%; transform: translateX(-50%); width: auto; max-width: calc(100% - var(--s-5)); flex-direction: row; padding: var(--s-1) var(--s-3); overflow-x: auto; }
  .rail hr { width: 1px; height: 24px; border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.16); margin: 0 var(--s-1); }
  .rail .tip { display: none; }
}

/* ---------- Page header & stats ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-5); }
.page-head h1 { max-width: 14ch; }
.page-head h1.wide { max-width: none; }
.eyebrow { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); margin-bottom: var(--s-2); font-weight: 600; }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { color: var(--ink); }
.head-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.lede { color: var(--ink-2); max-width: 68ch; margin-top: var(--s-3); font-size: var(--fs-lg); }
.stat-row { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-6); align-items: center; }
.stat { display: flex; gap: var(--s-3); align-items: center; text-decoration: none; color: var(--ink); }
.stat-chip { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); border: 1px solid var(--rule); display: grid; place-items: center; box-shadow: var(--shadow-1); }
.stat-chip svg { width: 18px; height: 18px; }
.stat-value { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; display: flex; gap: var(--s-2); align-items: center; }
.stat-label { font-size: var(--fs-sm); color: var(--ink-3); }
.pill-tag { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); background: var(--sun); color: var(--on-sun); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0; }
.pill-tag.forest { background: var(--forest); color: var(--on-forest); }
.steps-list { margin: 0 0 var(--s-5); padding-left: var(--s-5); max-width: 68ch; }
.steps-list li { margin-bottom: var(--s-3); }
.steps-list .code { word-break: break-all; }
.key-reveal { margin: 0 0 var(--s-5); padding: var(--s-4); border: 1px solid var(--rule); background: var(--surface); border-radius: var(--r-2); }
.key-reveal code { flex: 1; font-size: var(--fs-lg); word-break: break-all; color: var(--ink); }

/* ---------- Panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-3); padding: var(--s-5); box-shadow: var(--shadow-1); }
.panel + .panel { margin-top: var(--s-5); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.panel-head h2 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: var(--s-2); height: 40px; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); font: 600 var(--fs-md) var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--ink-3); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { border-color: var(--primary); filter: brightness(1.15); }
.btn-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--rule)); }
.btn-danger:hover { background: var(--bad-soft); border-color: var(--bad); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--glass); border-color: transparent; }
.btn-sm { height: 32px; padding: 0 var(--s-3); font-size: var(--fs-sm); }
.btn-block { width: 100%; justify-content: center; height: 46px; }
.btn svg { width: 16px; height: 16px; }
.segmented { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--rule); }
.segmented a { padding: 6px var(--s-4); border-radius: var(--r-pill); color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; }
.segmented a[aria-current='page'] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
form.inline { display: inline; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Flash & toast ---------- */
.flash { border-radius: var(--r-2); background: var(--accent-soft); color: var(--ink); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.flash-error { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.flash-success { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.flash-info { background: var(--neutral-soft); border-color: var(--rule); }
.toast-host { position: fixed; left: 50%; bottom: var(--s-6); transform: translateX(-50%); z-index: 60; display: grid; gap: var(--s-2); justify-items: center; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: var(--s-4); background: var(--night); color: var(--on-night); padding: 10px 10px 10px var(--s-5); border-radius: var(--r-pill); box-shadow: var(--shadow-2); font-weight: 600; font-size: var(--fs-sm); }
.toast[data-tone='error'] { background: var(--bad); }
.toast button { height: 32px; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 0; background: var(--sun); color: var(--on-sun); font: 700 var(--fs-sm) var(--font-sans); cursor: pointer; }
@media (max-width: 900px) { .toast-host { bottom: calc(var(--s-8) + var(--s-3)); } }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--s-2); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; background: var(--neutral-soft); color: var(--ink-2); white-space: nowrap; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.tone-good { background: var(--good-soft); color: var(--good); }
.tone-warn { background: var(--warn-soft); color: var(--warn); }
.tone-bad { background: var(--bad-soft); color: var(--bad); }
.tone-accent { background: var(--accent-soft); color: var(--accent); }

/* ---------- Toolbar & tables ---------- */
.toolbar { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--s-4); }
.toolbar .grow { flex: 1 1 240px; }
.toolbar input, .toolbar select { height: 40px; }
.toolbar input[type='search'] { border-radius: var(--r-pill); padding-left: var(--s-4); }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-3); box-shadow: var(--shadow-1); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
table.data th { text-align: left; font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--rule); white-space: nowrap; background: var(--surface); position: sticky; top: 0; }
table.data th.num { text-align: right; }
table.data th a { color: inherit; text-decoration: none; }
table.data th a[aria-sort]::after { content: ' ↓'; }
table.data th a[aria-sort='ascending']::after { content: ' ↑'; }
table.data td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--rule); vertical-align: top; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
table.data td.primary a { font-weight: 600; color: var(--ink); text-decoration: none; }
table.data td.primary a:hover { text-decoration: underline; }
table.data tfoot td { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--rule-strong); }
.empty { padding: var(--s-6) 0; color: var(--ink-3); }
.empty strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: var(--s-1); }
.pager { display: flex; gap: var(--s-3); align-items: center; justify-content: space-between; padding-top: var(--s-4); color: var(--ink-3); font-size: var(--fs-sm); }

/* ---------- Forms ---------- */
input:not([type]), input[type='text'], input[type='email'], input[type='password'], input[type='url'], input[type='tel'], input[type='number'], input[type='date'], input[type='datetime-local'], input[type='search'], select, textarea {
  width: 100%; height: 42px; padding: 0 var(--s-3); border: 1px solid var(--rule-strong); border-radius: var(--r-1); background: var(--surface); color: var(--ink); font: 500 var(--fs-md) var(--font-sans);
}
textarea { height: auto; min-height: 104px; padding: var(--s-2) var(--s-3); line-height: 1.5; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: 3px solid color-mix(in srgb, var(--focus) 25%, transparent); outline-offset: 0; }
input[aria-invalid='true'], select[aria-invalid='true'], textarea[aria-invalid='true'] { border-color: var(--bad); }
.form-grid { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 520px); gap: var(--s-4) var(--s-5); align-items: start; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-3); padding: var(--s-6); box-shadow: var(--shadow-1); }
.form-grid > label, .form-grid > .label { padding-top: 10px; font-weight: 600; color: var(--ink-2); }
.form-grid .req::after { content: ' *'; color: var(--bad); }
.hint { display: block; color: var(--ink-3); font-size: var(--fs-sm); margin-top: var(--s-1); }
.field-error { display: block; color: var(--bad); font-size: var(--fs-sm); margin-top: var(--s-1); font-weight: 600; }
.check { display: flex; gap: var(--s-2); align-items: flex-start; padding-top: 9px; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--forest); flex: none; }
.form-actions { display: flex; gap: var(--s-2); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--rule); grid-column: 1 / -1; }
.stack > * + * { margin-top: var(--s-4); }
.field label { display: block; font-weight: 600; color: var(--ink-2); margin-bottom: var(--s-1); }
.form-error { background: var(--bad-soft); border-radius: var(--r-2); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.form-error ul { margin: var(--s-1) 0 0; padding-left: var(--s-5); }
@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr; gap: var(--s-1); padding: var(--s-4); }
  .form-grid > label { padding-top: var(--s-3); }
}
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 700; font-size: var(--fs-lg); margin-bottom: var(--s-3); padding: 0; }

/* ---------- Detail view ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-6); align-items: start; }
.facts { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-3); padding: var(--s-2) var(--s-5); box-shadow: var(--shadow-1); }
.facts dt { color: var(--ink-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); font-weight: 500; }
.facts dd { margin: 0; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); white-space: pre-line; overflow-wrap: anywhere; font-weight: 500; }
.facts dt:nth-last-of-type(1), .facts dd:last-of-type { border-bottom: 0; }
.aside { background: var(--glass); border: 1px solid var(--rule); border-radius: var(--r-3); padding: var(--s-5); }
.aside h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 700; margin-bottom: var(--s-2); }
.timeline { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.timeline li { padding: var(--s-2) 0 var(--s-2) var(--s-4); border-left: 2px solid var(--rule-strong); position: relative; }
.timeline li::before { content: ''; position: absolute; left: -5px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); }
.section { margin-top: var(--s-7); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s-3); gap: var(--s-3); }
@media (max-width: 1100px) { .detail { grid-template-columns: 1fr; gap: var(--s-5); } }

/* ---------- Overview ---------- */
.greeting { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; max-width: 16ch; }
.widgets { display: grid; gap: var(--s-5); }
.widget { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-3); padding: var(--s-5); box-shadow: var(--shadow-1); }
.widget-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-4); }
.widget-head h2 { font-size: var(--fs-lg); font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s-3); }
.kpi { display: flex; flex-direction: column; min-height: 150px; padding: var(--s-4) var(--s-5); border-radius: var(--r-2); text-decoration: none; background: var(--night); color: var(--on-night); }
.kpi:nth-child(4n+2) { background: var(--forest); color: var(--on-forest); }
.kpi:nth-child(4n+3) { background: var(--ember); color: var(--on-ember); }
.kpi:nth-child(4n+4) { background: var(--sun); color: var(--on-sun); }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.kpi-label { font-size: var(--fs-lg); font-weight: 600; }
.kpi-value { margin-top: auto; white-space: nowrap; font: 700 var(--fs-2xl)/1.15 var(--font-sans); letter-spacing: -0.02em; }
.kpi-value.alert::after { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-left: var(--s-2); vertical-align: middle; }
.kpi-cur { font-size: var(--fs-sm); opacity: 0.8; letter-spacing: 0; margin-right: var(--s-1); font-weight: 600; }
.kpi-sub { font-size: var(--fs-xs); opacity: 0.8; margin-top: var(--s-1); font-weight: 500; }
.kpi-band { margin-bottom: var(--s-6); }
.kpi-band > h2 { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--s-3); }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--s-6); align-items: start; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; } }

/* ---------- Boards ---------- */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: var(--s-4); overflow-x: auto; padding-bottom: var(--s-3); align-items: start; scroll-snap-type: x proximity; }
.lane { min-width: 0; background: var(--glass); border: 1px solid var(--rule); border-radius: var(--r-3); padding: var(--s-3); scroll-snap-align: start; box-shadow: var(--shadow-1); }
.lane-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-2) var(--s-3); }
.lane-head strong { font-weight: 700; font-size: var(--fs-lg); letter-spacing: -0.01em; }
.lane-head .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--night); flex: none; }
.lane-head .count { min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 700; display: inline-grid; place-items: center; }
.lane-head .total { display: block; font-size: var(--fs-sm); color: var(--ink-3); font-weight: 600; }
.lane-head .lane-add { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--rule-strong); display: grid; place-items: center; color: var(--ink); text-decoration: none; background: var(--surface); }
.lane-head .lane-add svg { width: 14px; height: 14px; }
.lane-body { display: grid; gap: var(--s-3); min-height: 120px; border-radius: var(--r-2); padding: 2px; transition: background 0.12s ease; }
.lane[data-tone='warn'] .dot, .lane[data-fill='sun'] .dot { background: var(--sun); }
.lane[data-tone='accent'] .dot, .lane[data-fill='forest'] .dot { background: var(--forest); }
.lane[data-tone='bad'] .dot, .lane[data-fill='ember'] .dot { background: var(--ember); }
.ticket { position: relative; display: block; border-radius: var(--r-2); padding: var(--s-4) var(--s-4) var(--s-4); background: var(--surface); border: 1px solid var(--rule); color: var(--ink); box-shadow: var(--shadow-1); }
.ticket[data-fill] { border: 0; }
.ticket[data-fill='sun'] { background: var(--sun); color: var(--on-sun); --t2: var(--on-sun-2); }
.ticket[data-fill='forest'] { background: var(--forest); color: var(--on-forest); --t2: var(--on-forest-2); }
.ticket[data-fill='ember'] { background: var(--ember); color: var(--on-ember); --t2: var(--on-ember-2); }
.ticket[data-fill='night'] { background: var(--night); color: var(--on-night); --t2: var(--on-night-2); }
.ticket-date { font-size: var(--fs-xs); font-weight: 600; color: var(--t2, var(--ink-3)); margin-bottom: var(--s-2); }
.ticket-title { font-weight: 700; font-size: var(--fs-lg); color: inherit; text-decoration: none; display: block; letter-spacing: -0.01em; line-height: 1.3; }
.ticket-title:hover { text-decoration: underline; }
.ticket-sub { font-size: var(--fs-sm); color: var(--t2, var(--ink-3)); margin-top: 2px; }
.ticket-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-4); }
.ticket-value { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; }
.ticket-meta { font-size: var(--fs-xs); color: var(--t2, var(--ink-3)); display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; margin-top: var(--s-2); font-weight: 600; }
.ticket-meta .badge { background: rgba(255, 255, 255, 0.85); color: #1b1a19; }
.ticket .avatar-sm { border-color: currentColor; background: rgba(255, 255, 255, 0.92); color: #1b1a19; }
.ticket-menu { position: absolute; top: var(--s-3); right: var(--s-3); }
.ticket-menu summary { list-style: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); display: grid; place-items: center; cursor: pointer; }
.ticket-menu summary::-webkit-details-marker { display: none; }
.ticket-menu summary svg { width: 14px; height: 14px; }
.ticket-menu[open] .ticket-move { display: block; }
.ticket-move { display: none; position: absolute; right: 0; top: 36px; z-index: 5; width: 200px; background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s-3); box-shadow: var(--shadow-2); }
.ticket-move label { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); margin-bottom: var(--s-1); }
.ticket-move select { height: 36px; font-size: var(--fs-sm); }
.ticket-move .btn { margin-top: var(--s-2); }
.lane-empty { color: var(--ink-3); font-size: var(--fs-sm); padding: var(--s-4) var(--s-2); text-align: center; border: 1px dashed var(--rule-strong); border-radius: var(--r-2); }
.lane-body > .ticket ~ .lane-empty { display: none; }
.dropzones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-4); }
.dropzone { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-4) var(--s-5); border-radius: var(--r-3); border: 2px dashed var(--rule-strong); background: var(--glass); color: var(--ink); text-decoration: none; transition: background 0.12s ease, border-color 0.12s ease; }
.dropzone .zone-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--rule); flex: none; }
.dropzone[data-zone='won'] .zone-icon { background: var(--forest); color: var(--on-forest); border: 0; }
.dropzone .zone-icon svg { width: 18px; height: 18px; }
.dropzone strong { display: block; font-size: var(--fs-lg); }
.dropzone span { font-size: var(--fs-sm); color: var(--ink-3); }
@media (max-width: 700px) { .dropzones { grid-template-columns: 1fr; } }

/* ---------- Drag and drop ---------- */
[data-draggable] { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
[data-draggable] a, [data-draggable] button, [data-draggable] select, [data-draggable] summary { cursor: pointer; }
.is-drag-source { opacity: 0.35; }
.drag-ghost { position: fixed; z-index: 70; pointer-events: none; margin: 0; box-shadow: var(--shadow-2); transform: rotate(-2deg); cursor: grabbing; }
.drop-active { background: color-mix(in srgb, var(--sun) 18%, transparent); outline: 2px dashed var(--ink-3); outline-offset: 2px; }
.dropzone.drop-active { border-color: var(--ink); background: var(--surface); outline: 0; }
.drop-placeholder { border-radius: var(--r-2); border: 2px dashed var(--ink-3); background: color-mix(in srgb, var(--surface) 60%, transparent); }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; }
.drag-handle { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--ink-3); cursor: grab; border: 0; background: transparent; padding: 0; touch-action: none; }
.drag-handle:hover { color: var(--ink); background: var(--surface-2); }
.drag-handle svg { width: 14px; height: 14px; }

/* ---------- Auth & setup ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; }
.auth-side { background: var(--panel-bg); color: var(--panel-ink); padding: var(--s-7) var(--s-7) var(--s-6); display: flex; flex-direction: column; margin: var(--s-3); border-radius: var(--r-3); }
.auth-side .brand { padding: 0; color: var(--panel-ink); }
.auth-side .brand-mark { background: var(--panel-accent); color: #1b1a19; }
.auth-side .brand-sub { color: color-mix(in srgb, var(--panel-ink) 60%, transparent); }
.auth-statement { margin-top: auto; font-size: var(--fs-2xl); line-height: 1.25; max-width: 18ch; font-weight: 600; letter-spacing: -0.02em; }
.auth-statement em { font-style: normal; color: var(--panel-accent); }
.auth-fine { margin-top: var(--s-5); font-size: var(--fs-xs); color: color-mix(in srgb, var(--panel-ink) 60%, transparent); }
.auth-main { padding: var(--s-8) var(--s-7); display: flex; flex-direction: column; justify-content: center; max-width: 580px; }
.auth-main h1 { margin-bottom: var(--s-3); font-size: var(--fs-3xl); }
.divider { display: flex; align-items: center; gap: var(--s-3); color: var(--ink-3); font-size: var(--fs-sm); margin: var(--s-5) 0; }
.divider::before, .divider::after { content: ''; flex: 1; border-top: 1px solid var(--rule-strong); }
.ms-btn { gap: var(--s-3); }
.ms-logo { width: 18px; height: 18px; }
@media (max-width: 800px) {
  .auth { grid-template-columns: 1fr; }
  .auth-side { padding: var(--s-5) var(--s-4); }
  .auth-statement { display: none; }
  .auth-main { padding: var(--s-6) var(--s-4); }
}
.steps { list-style: none; padding: 0; margin: var(--s-6) 0 0; counter-reset: step; font-size: var(--fs-sm); }
.steps li { counter-increment: step; padding: var(--s-2) 0; color: color-mix(in srgb, var(--panel-ink) 55%, transparent); display: flex; gap: var(--s-3); }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-mono); }
.steps li[data-state='done'] { color: color-mix(in srgb, var(--panel-ink) 80%, transparent); }
.steps li[data-state='current'] { color: var(--panel-ink); font-weight: 700; }
.steps li[data-state='current']::before { color: var(--panel-accent); }
.legal { max-height: 46vh; overflow-y: auto; border: 1px solid var(--rule); background: var(--surface); padding: var(--s-4) var(--s-5); border-radius: var(--r-2); font-size: var(--fs-sm); }
.legal h1, .legal h2 { font-size: var(--fs-lg); margin: var(--s-4) 0 var(--s-2); }
.legal h3 { font-size: var(--fs-md); margin: var(--s-4) 0 var(--s-1); }
.legal ul { padding-left: var(--s-5); margin: 0 0 var(--s-3); }
.doc-meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); margin: var(--s-2) 0 var(--s-4); }
.callout { border-radius: var(--r-2); background: var(--warn-soft); padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); }
.code { font-family: var(--font-mono); font-size: var(--fs-sm); background: var(--surface-2); padding: 2px var(--s-2); border-radius: 6px; overflow-wrap: anywhere; }
pre.code { padding: var(--s-3) var(--s-4); white-space: pre-wrap; border-radius: var(--r-1); }
.copy-row { display: flex; gap: var(--s-2); align-items: center; }
.copy-row .code { flex: 1; }
.qr { width: 184px; height: 184px; background: #fff; padding: var(--s-2); border: 1px solid var(--rule); border-radius: var(--r-1); }

/* ---------- Settings ---------- */
.settings-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-3); }
.settings-index a { display: block; padding: var(--s-5); border-radius: var(--r-3); background: var(--surface); border: 1px solid var(--rule); text-decoration: none; color: var(--ink); box-shadow: var(--shadow-1); }
.settings-index a strong { display: block; font-weight: 700; font-size: var(--fs-lg); margin-bottom: var(--s-1); }
.settings-index a span { color: var(--ink-3); font-size: var(--fs-sm); }
.settings-index a:hover { border-color: var(--ink-3); }
.perm-matrix { columns: 2 340px; column-gap: var(--s-6); }
.perm-group { break-inside: avoid; margin-bottom: var(--s-5); }
.perm-group h3 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); border-bottom: 1px solid var(--rule); padding-bottom: var(--s-1); margin-bottom: var(--s-2); }
.perm-group label { display: flex; gap: var(--s-2); padding: 3px 0; font-size: var(--fs-sm); }
.perm-group input { accent-color: var(--forest); }
.perm-key { font-family: var(--font-mono); color: var(--ink-3); font-size: var(--fs-xs); margin-left: auto; }
.changes { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-2); margin: var(--s-1) 0 0; white-space: pre-wrap; }
.chain-ok { color: var(--good); }
.chain-bad { color: var(--bad); }

/* ---------- Invoice ---------- */
.lines input { height: 36px; }
.lines td { padding: var(--s-1) var(--s-2); vertical-align: middle; }
.lines .col-desc { width: 50%; }
.lines .col-handle { width: 36px; }
.totals { margin-left: auto; width: min(380px, 100%); }
.totals div { display: flex; justify-content: space-between; padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); }
.totals .grand { font-weight: 700; font-size: var(--fs-xl); border-bottom: 0; }
.paper { background: #fff; color: #1b1a19; max-width: 820px; margin: var(--s-6) auto; padding: var(--s-7); border: 1px solid #ebe2d7; border-radius: var(--r-3); }
.paper .parties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); margin: var(--s-6) 0; }
.bar-row { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); }
.bars { display: grid; gap: 3px; }
.bar { height: 10px; background: var(--forest); border-radius: 0 var(--r-pill) var(--r-pill) 0; min-width: 2px; }
.bar.exp { background: var(--ember); }
.legend { display: flex; gap: var(--s-4); font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: var(--s-1); vertical-align: -1px; background: var(--forest); }
.legend i.exp { background: var(--ember); }
.meter { height: 8px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--forest); border-radius: var(--r-pill); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } .kpi:hover { transform: none; } }
@media print {
  .rail, .topnav, .tabs, .subtabs, .no-print, .page-head .head-actions, .toast-host { display: none !important; }
  .shell { padding: 0; }
  body { background: #fff; }
  .paper { border: 0; margin: 0; padding: 0; max-width: none; }
}

/* Sortable rows and widgets while they are being moved. */
.is-sorting { position: relative; z-index: 2; opacity: 0.85; outline: 2px dashed var(--ink-3); outline-offset: 2px; box-shadow: var(--shadow-2); }
tr.is-sorting { background: var(--surface-2); }
.ticket[aria-busy='true'] { opacity: 0.7; }
.ticket[hidden] { display: none; }
/* Compact fact lists inside side panels: label left, value right. */
.aside .facts { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-4); padding: var(--s-1) var(--s-4); box-shadow: none; }
.aside .facts dd { text-align: right; }