/* ==========================================================================
   Shoring Calculator — design system
   Style: SaaS analytics dashboard, "Data-Dense Dashboard" (ui-ux-pro-max, 2026-10-05). Side navigation,
   deep-blue actions, amber highlights, semantic status colours, Cairo (Fira Sans has no
   Arabic), tabular figures. Plain CSS tokens (owner: no Tailwind).
   Light and dark themes share the same tokens. Drawings and the report stay "paper" (white).
   ========================================================================== */
:root {
  --ico-alert-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --ico-chevron-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme: light;
  --bg: #F8FAFC;            --surface: #FFFFFF;      --surface-2: #F1F5F9;   --surface-3: #E8EDF3;
  --text: #0F172A;          --text-2: #334155;       --text-3: #64748B;      --muted: #5B6779;   --border: #E2E8F0;  --border-strong: #CBD5E1;
  --chrome: #0B1736;        --chrome-2: #13224A;     --on-chrome: #E8EEFB;   --on-chrome-2: #A9B8D9;
  --accent: #1E40AF;        --accent-hover: #1E3A8A; --on-accent: #FFFFFF;   --accent-soft: #DBEAFE; --accent-line: #93C5FD;
  --highlight: #B45309;     --highlight-soft: #FEF3C7;
  --success: #15803D;       --success-soft: #DCFCE7;
  --warn: #92400E;          --warn-soft: #FEF3C7;    --warn-line: #F59E0B;
  --danger: #B91C1C;        --danger-soft: #FEE2E2;  --danger-line: #F87171;
  --sel: #DBEAFE;
  --sidebar-w: 248px; --header-h: 56px;
  /* legacy names still used by markup */
  --brand: var(--accent); --brand-ink: var(--on-accent); --ink: var(--text); --line: var(--border);
  --card: var(--surface); --ok: var(--success); --bad: var(--danger); --warn-bg: var(--warn-soft); --err-bg: var(--danger-soft);

  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-lg: 0 10px 24px -8px rgba(15, 23, 42, .18);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 26px; --fs-3xl: 40px;
  --ease: cubic-bezier(.2, .8, .2, 1); --fast: 150ms; --med: 220ms;
  /* Cairo (owner, 2026-10-05): Arabic + Latin, wide range of weights. IBM Plex Sans Arabic stays as the fallback. */
  --font: "Cairo", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B1220;          --surface: #131C2E;      --surface-2: #1B2638;   --surface-3: #243247;
    --text: #E2E8F0;        --text-2: #CBD5E1;       --text-3: #94A3B8;      --muted: #94A3B8;   --border: #26334A;  --border-strong: #334155;
    --chrome: #070E1F;      --chrome-2: #111C36;     --on-chrome: #E2E8F0;   --on-chrome-2: #8FA0C2;
    --accent: #60A5FA;      --accent-hover: #93C5FD; --on-accent: #0B1220;   --accent-soft: rgba(96, 165, 250, .15); --accent-line: #3B82F6;
    --highlight: #FBBF24;   --highlight-soft: rgba(251, 191, 36, .14);
    --success: #4ADE80;     --success-soft: rgba(74, 222, 128, .12);
    --warn: #FBBF24;        --warn-soft: rgba(251, 191, 36, .12); --warn-line: #B45309;
    --danger: #F87171;      --danger-soft: rgba(248, 113, 113, .12); --danger-line: #B91C1C;
    --sel: rgba(96, 165, 250, .18);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 1px 3px rgba(0, 0, 0, .4); --shadow-lg: 0 10px 24px -8px rgba(0, 0, 0, .6);
  }
}
/* Chosen with the top-bar button (cookie shoring.theme): the same dark tokens; keep both blocks in step. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1220;          --surface: #131C2E;      --surface-2: #1B2638;   --surface-3: #243247;
  --text: #E2E8F0;        --text-2: #CBD5E1;       --text-3: #94A3B8;      --muted: #94A3B8;   --border: #26334A;  --border-strong: #334155;
  --chrome: #070E1F;      --chrome-2: #111C36;     --on-chrome: #E2E8F0;   --on-chrome-2: #8FA0C2;
  --accent: #60A5FA;      --accent-hover: #93C5FD; --on-accent: #0B1220;   --accent-soft: rgba(96, 165, 250, .15); --accent-line: #3B82F6;
  --highlight: #FBBF24;   --highlight-soft: rgba(251, 191, 36, .14);
  --success: #4ADE80;     --success-soft: rgba(74, 222, 128, .12);
  --warn: #FBBF24;        --warn-soft: rgba(251, 191, 36, .12); --warn-line: #B45309;
  --danger: #F87171;      --danger-soft: rgba(248, 113, 113, .12); --danger-line: #B91C1C;
  --sel: rgba(96, 165, 250, .18);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 1px 3px rgba(0, 0, 0, .4); --shadow-lg: 0 10px 24px -8px rgba(0, 0, 0, .6);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-base); line-height: 1.6; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h2, h3, h4 { color: var(--text); line-height: 1.35; }
h3 { margin: 0 0 var(--s3); font-size: var(--fs-lg); font-weight: 700; display: flex; align-items: center; gap: var(--s2); }
h4 { margin: var(--s5) 0 var(--s2); font-size: var(--fs-base); font-weight: 600; }
p { margin: var(--s2) 0; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
.muted, .card.muted { color: var(--muted); }
.ok { color: var(--success); font-weight: 600; margin-top: var(--s2); }
.bad { color: var(--danger); font-weight: 600; }
b, strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- Icons (SVG masks, colour follows the text) ---------- */
.ico { display: inline-block; inline-size: 1.15em; block-size: 1.15em; flex: none; background-color: currentColor;
       -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; vertical-align: -0.2em; }
.ico-calc { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cline x1='8' x2='16' y1='6' y2='6'/%3E%3Cline x1='16' x2='16' y1='14' y2='18'/%3E%3Cpath d='M16 10h.01M12 10h.01M8 10h.01M12 14h.01M8 14h.01M12 18h.01M8 18h.01'/%3E%3C/svg%3E"); }
.ico-sliders { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' x2='14' y1='4' y2='4'/%3E%3Cline x1='10' x2='3' y1='4' y2='4'/%3E%3Cline x1='21' x2='12' y1='12' y2='12'/%3E%3Cline x1='8' x2='3' y1='12' y2='12'/%3E%3Cline x1='21' x2='16' y1='20' y2='20'/%3E%3Cline x1='12' x2='3' y1='20' y2='20'/%3E%3Cline x1='14' x2='14' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='10' y2='14'/%3E%3Cline x1='16' x2='16' y1='18' y2='22'/%3E%3C/svg%3E"); }
.ico-alert { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.ico-moon { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E"); }
.ico-sun { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2m-7.07-17.07 1.41 1.41m11.32 11.32 1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E"); }
.ico-info { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }
.ico-check { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.ico-lock { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.ico-layers { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E"); }
.ico-package { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E"); }
.ico-cart { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E"); }
.ico-bulb { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); }
.ico-chart { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E"); }
.ico-scale { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E"); }
.ico-grid { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M3 9h18M3 15h18M9 3v18M15 3v18'/%3E%3C/svg%3E"); }
.ico-ruler { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z'/%3E%3Cpath d='m14.5 12.5 2-2M11.5 9.5l2-2M8.5 6.5l2-2M17.5 15.5l2-2'/%3E%3C/svg%3E"); }
.ico-cube { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E"); }
.ico-file { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8M16 13H8M16 17H8'/%3E%3C/svg%3E"); }
.ico-search { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
.ico-list { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h.01M3 18h.01M3 6h.01M8 12h13M8 18h13M8 6h13'/%3E%3C/svg%3E"); }
.ico-chevron { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.ico-scaffold { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3v18M19 3v18M5 7h14M5 12h14M5 17h14M5 12l14-5M5 17l14-5'/%3E%3C/svg%3E"); }
.ico-database { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M3 5v14a9 3 0 0 0 18 0V5'/%3E%3Cpath d='M3 12a9 3 0 0 0 18 0'/%3E%3C/svg%3E"); }
.ico-printer { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6'/%3E%3Crect x='6' y='14' width='12' height='8' rx='1'/%3E%3C/svg%3E"); }
.ico-download { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E"); }

/* ---------- App shell: side navigation + slim header ---------- */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.app-shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100dvh; }
.sidebar { position: sticky; top: 0; block-size: 100dvh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s4);
           padding: var(--s4) var(--s3); background: var(--chrome); color: var(--on-chrome); z-index: 50; }
.sidebar .brand { display: flex; align-items: center; gap: var(--s3); padding: var(--s1) var(--s2) var(--s3); font-weight: 700; font-size: var(--fs-lg);
                  border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sidebar .brand > span:last-child { display: grid; line-height: 1.25; min-width: 0; }
.sidebar .brand small { font-size: var(--fs-xs); font-weight: 500; color: var(--on-chrome-2); }
.brand-mark { display: inline-grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 10px; flex: none;
              background: linear-gradient(135deg, #3B82F6, #1E40AF); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.brand-mark .ico { inline-size: 20px; block-size: 20px; }
.side-nav { display: flex; flex-direction: column; gap: var(--s4); }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-label { padding: 0 var(--s3) var(--s1); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--on-chrome-2); }
.side-nav a { position: relative; display: flex; align-items: center; gap: var(--s3); min-height: 40px; padding: 0 var(--s3); border-radius: 8px;
              color: var(--on-chrome-2); text-decoration: none; font-weight: 500; font-size: var(--fs-md);
              transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.side-nav a:hover { background: rgba(255, 255, 255, .06); color: var(--on-chrome); }
.side-nav a.active { background: rgba(96, 165, 250, .16); color: #fff; font-weight: 600; }
.side-nav a.active::before { content: ""; position: absolute; inset-inline-start: -12px; inset-block: 8px; inline-size: 3px; border-radius: 3px; background: #60A5FA; }
.side-nav a .ico { opacity: .9; }
.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-main > .page { inline-size: 100%; }
/* A section the user has no screen in is not shown. Signed out (sign-in page): no side menu at all. */
.nav-group:not(:has(a)) { display: none; }
.app-shell:not(:has(.sidebar)) { grid-template-columns: minmax(0, 1fr); }
.topbar { position: sticky; top: 0; z-index: 40; display: flex; gap: var(--s3); align-items: center; min-height: var(--header-h);
          padding: var(--s2) var(--s6); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(8px);
          border-bottom: 1px solid var(--border); color: var(--text); }
.topbar .title { font-weight: 600; font-size: var(--fs-md); color: var(--text-2); }
.menu-btn { display: none; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; color: var(--text-2); }
.menu-btn:hover { background: var(--surface-2); }
.lang-switch { margin-inline-start: auto; display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-3); }
.lang-switch button { min-height: 32px; padding: 0 var(--s3); border: 0; border-radius: 8px; background: transparent; color: var(--text-2);
                      font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background var(--fast) var(--ease); }
.lang-switch button:hover:not(.on) { color: var(--text); }
.lang-switch button.on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
.theme-btn { display: inline-grid; place-items: center; inline-size: 38px; block-size: 38px; border: 0; border-radius: 10px;
             background: var(--surface-3); color: var(--text-2); cursor: pointer; font-size: 1.05rem; }
.theme-btn:hover { color: var(--text); }
.theme-btn .ico-sun { display: none; }
:root[data-theme="dark"] .theme-btn .ico-sun { display: inline-block; }
:root[data-theme="dark"] .theme-btn .ico-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .ico-sun { display: inline-block; }
  :root:not([data-theme="light"]) .theme-btn .ico-moon { display: none; }
}
.nav-scrim { display: none; }
@media (max-width: 1024px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: min(84vw, var(--sidebar-w)); transform: translateX(-105%);
             transition: transform var(--med) var(--ease); box-shadow: var(--shadow-lg); }
  [dir="rtl"] .sidebar { transform: translateX(105%); }
  .nav-toggle:checked ~ .app-shell .sidebar { transform: none; }
  .nav-toggle:checked ~ .app-shell .nav-scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(2, 6, 23, .5); }
  .menu-btn { display: inline-grid; }
  .side-nav a.active::before { inset-inline-start: -8px; }
}

/* ---------- Page ---------- */
.page { max-width: 1440px; margin: 0 auto; padding: var(--s5) var(--s6) var(--s8); }
.page-h { margin: var(--s1) 0 var(--s4); font-size: var(--fs-2xl); font-weight: 700; }
.notice { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s3); padding: var(--s3) var(--s4);
          background: var(--warn-soft); color: var(--warn); border: 1px solid transparent; border-inline-start: 4px solid var(--warn-line);
          border-radius: var(--radius); font-size: var(--fs-md); }
.notice::before, .card.warn::before, .card.error::before, .warn-inline::before {
  content: ""; flex: none; inline-size: 18px; block-size: 18px; margin-top: 2px; background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.notice, .card.warn, .card.error, .warn-inline { --ico: var(--ico-alert-url); }
.mode-bar { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin: 0 0 var(--s4); font-size: var(--fs-sm); color: var(--text-2); }
.mode-bar > span { display: inline-flex; align-items: center; gap: var(--s1); padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.mode-bar .whatif-on { background: var(--danger-soft); color: var(--danger); border-color: transparent; font-weight: 600; }
.mode-bar a { font-weight: 600; }

/* ---------- Layout ---------- */
.layout { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: var(--s5); align-items: start; }
@media (max-width: 1024px) { .layout { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1025px) { .layout > .inputs { position: sticky; top: 74px; } }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s4) var(--s5);
        margin-bottom: var(--s4); box-shadow: var(--shadow-sm); overflow-x: auto; }
.card > h3 .ico, h3 > .ico { color: var(--accent); }
.card.error { display: flex; gap: var(--s3); background: var(--danger-soft); color: var(--danger); border-color: transparent;
              border-inline-start: 4px solid var(--danger-line); font-weight: 500; }
.card.warn { display: flex; gap: var(--s3); background: var(--warn-soft); color: var(--warn); border-color: transparent;
             border-inline-start: 4px solid var(--warn-line); font-weight: 500; box-shadow: none; }
.warn-inline { display: flex; gap: var(--s2); background: var(--warn-soft); color: var(--warn); padding: var(--s2) var(--s3);
               border-radius: var(--radius-sm); margin: var(--s2) 0; font-size: var(--fs-sm); }

/* ---------- Inputs panel ---------- */
.inputs { padding: var(--s5); }
.inputs h2 { display: flex; align-items: center; gap: var(--s2); margin: var(--s5) 0 var(--s3); padding-bottom: var(--s2);
             font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); letter-spacing: .2px; border-bottom: 1px solid var(--border); }
.inputs h2:first-child { margin-top: 0; font-size: var(--fs-lg); color: var(--text); border-bottom: 0; padding-bottom: 0; }
.inputs label, .tmpl-form label, .pv-controls label, .buy-form label, .report-tools label { display: block; margin-bottom: var(--s3);
             font-size: var(--fs-md); font-weight: 500; color: var(--text-2); }
.inputs label small, .tmpl-form label small { display: block; margin-top: var(--s1); color: var(--muted); font-size: var(--fs-xs); font-weight: 400; }
input:not([type]), input[type=number], input[type=text], input[type=date], select , input[type=search], input[type=tel], input[type=email], input[type=password] {
  display: block; inline-size: 100%; min-height: 40px; margin-top: var(--s1); padding: 0 var(--s3);
  font: inherit; font-size: var(--fs-md); color: var(--text); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 8px; font-variant-numeric: tabular-nums; transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
input:not([type]):hover, input[type=number]:hover, input[type=text]:hover, input[type=date]:hover, select:hover , input[type=search]:hover, input[type=tel]:hover, input[type=email]:hover, input[type=password]:hover { border-color: var(--muted); }
input:not([type]):focus, input[type=number]:focus, input[type=text]:focus, input[type=date]:focus, select:focus , input[type=search]:focus, input[type=tel]:focus, input[type=email]:focus, input[type=password]:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=checkbox] { inline-size: 18px; block-size: 18px; accent-color: var(--accent); cursor: pointer; }
input[type=range] { accent-color: var(--accent); }
.inputs label.check, label.check { display: flex; gap: var(--s2); align-items: center; cursor: pointer; }
.inputs .sub { border-inline-start: 3px solid var(--accent-soft); padding-inline-start: var(--s3); margin-bottom: var(--s3); }
.inputs .sub.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.hint { display: block; margin: calc(-1 * var(--s1)) 0 var(--s3); color: var(--muted); font-size: var(--fs-xs); line-height: 1.55; }
.source { display: flex; align-items: center; gap: var(--s1); margin: var(--s3) 0 0; color: var(--muted); font-size: var(--fs-xs); }
details.advanced { margin: var(--s4) 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
details.advanced > summary { display: flex; align-items: center; gap: var(--s2); min-height: 44px; padding: var(--s2) var(--s3); cursor: pointer;
  list-style: none; font-weight: 600; font-size: var(--fs-md); color: var(--accent); border-radius: var(--radius); }
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary::after { content: ""; margin-inline-start: auto; inline-size: 18px; block-size: 18px; background-color: currentColor;
  -webkit-mask: var(--ico-chevron-url) center / contain no-repeat; mask: var(--ico-chevron-url) center / contain no-repeat;
  transition: transform var(--med) var(--ease); }
details.advanced[open] > summary::after { transform: rotate(180deg); }
details.advanced > summary:hover { background: var(--accent-soft); }
details.advanced[open] { background: var(--surface); }
details.advanced[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; margin-bottom: var(--s3); }
details.advanced > :not(summary) { margin-inline: var(--s3); }
.profile-box { margin-bottom: var(--s3); padding: var(--s3); border-radius: var(--radius); background: var(--surface-2); }
.profile-box .row { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }

/* ---------- Buttons ---------- */
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
button.primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); inline-size: 100%; min-height: 44px;
  padding: 0 var(--s4); border: 0; border-radius: var(--radius); background: var(--accent); color: var(--on-accent);
  font-weight: 700; font-size: var(--fs-base); box-shadow: var(--shadow-sm); transition: background var(--fast) var(--ease), transform var(--fast) var(--ease); }
button.primary:hover:not(:disabled) { background: var(--accent-hover); }
button.primary:active:not(:disabled) { transform: translateY(1px); }
button.primary:disabled { cursor: progress; }
.card button.primary { inline-size: auto; min-height: 40px; font-size: var(--fs-md); }
.inputs > button.primary { inline-size: 100%; min-height: 46px; font-size: var(--fs-base); margin-top: var(--s2); }
.profile-box button, .link-btn, .sheet-tools button, .row-buttons button:not(.primary), .report-tools button, .buy-form button:not(.primary),
.inputs .row button {
  display: inline-flex; align-items: center; gap: var(--s1); min-height: 36px; padding: 0 var(--s3); border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.profile-box button:hover, .link-btn:hover, .sheet-tools button:hover, .row-buttons button:not(.primary):hover:not(:disabled),
.report-tools button:hover, .buy-form button:not(.primary):hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.link-btn { min-height: 32px; border-color: transparent; background: transparent; color: var(--accent); }
.profile-box button.danger, button.danger { color: var(--danger); border-color: var(--danger-line); background: var(--surface); }
button.danger:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.row-buttons { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin: var(--s3) 0; }
.flash { display: inline-flex; align-items: center; gap: var(--s2); margin: var(--s2) 0; padding: var(--s1) var(--s3); border-radius: 999px;
         background: var(--success-soft); color: var(--success); font-size: var(--fs-sm); font-weight: 600; }

/* ---------- Tabs (segmented) ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; margin-bottom: var(--s4); padding: 4px; inline-size: fit-content; max-inline-size: 100%;
        background: var(--surface-3); border-radius: 12px; }
.tabs button { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s4); border: 0; border-radius: 9px;
               background: transparent; color: var(--text-2); font-weight: 600; font-size: var(--fs-md); transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.tabs button:hover:not(:disabled):not(.active) { background: rgba(255, 255, 255, .5); color: var(--text); }
.tabs button.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.tabs-hint { font-size: var(--fs-sm); padding-inline: var(--s3); }

/* ---------- Tables ---------- */
table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
th, td { text-align: start; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border); vertical-align: middle; }
thead th, table > tr:first-child > th { background: var(--surface-2); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
thead th:first-child { border-start-start-radius: 8px; } thead th:last-child { border-start-end-radius: 8px; }
td:not(:first-child), th:not(:first-child) { font-variant-numeric: tabular-nums; }
tbody tr, table > tr { transition: background var(--fast) var(--ease); }
tr:hover > td { background: var(--surface-2); }
tr.sum td { font-weight: 700; background: var(--surface-2); }
tr.selected td { background: var(--sel); font-weight: 600; }
tr.disabled td { color: var(--muted); }
tr:last-child > td { border-bottom: 0; }

/* ---------- Result hero (KPIs) ---------- */
.hero { position: relative; padding: var(--s5) var(--s6); border-inline-start: 4px solid var(--accent); }
.hero > div:first-child { color: var(--text-2); font-weight: 500; }
.hero .big { margin: var(--s1) 0 var(--s2); font-size: var(--fs-3xl); line-height: 1.1; font-weight: 700; color: var(--text);
             font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.hero .hero-sub { margin-top: var(--s3); font-weight: 600; color: var(--text-2); }
.hero .hero-facts { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s2); }
.hero .hero-facts li { padding: var(--s2) var(--s3); background: var(--surface-2); border-radius: var(--radius); font-size: var(--fs-md); line-height: 1.5; }
.hero .ok, .hero .bad, .hero .muted { margin-top: var(--s3); }
.hero .kv { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s2); }

/* ---------- Drawing sheet ---------- */
.sheet-tools { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-bottom: var(--s3); }
.sheet-tools label.inline { display: inline-flex; gap: var(--s2); align-items: center; font-size: var(--fs-sm); color: var(--text-2); }
svg.drawing { inline-size: 100%; block-size: auto; margin-bottom: var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.sheet-bottom { display: grid; grid-template-columns: 1fr 380px; gap: var(--s4); align-items: start; }
@media (max-width: 1100px) { .sheet-bottom { grid-template-columns: 1fr; } }
.sheet-h { margin: var(--s4) 0 var(--s2); }
.titleblock { border: 2px solid var(--text); }
.titleblock th { inline-size: 34%; background: var(--surface-2); border: 1px solid var(--border); }
.titleblock td { border: 1px solid var(--border); }
.titleblock .disclaimer { font-size: var(--fs-xs); color: var(--warn); background: var(--warn-soft); }
.notes { color: var(--muted); font-size: var(--fs-sm); padding-inline-start: var(--s5); line-height: 1.7; }
.leg-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: var(--s3); }
.leg-sheet svg { inline-size: 100%; block-size: auto; display: block; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }

/* ---------- 3D ---------- */
.viewer3d { inline-size: 100%; block-size: 560px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #F4F6F9; }
.legend3d { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s2); font-size: var(--fs-sm); color: var(--text-2); }
.legend3d i { display: inline-block; inline-size: 12px; block-size: 12px; border-radius: 3px; margin-inline-end: var(--s1); vertical-align: middle; }

/* ---------- Sectors ---------- */
.sectors .sector-map svg { inline-size: 100%; block-size: auto; display: block; margin: var(--s2) 0 var(--s3); }
.sector-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); margin: var(--s3) 0; padding: var(--s3);
                border: 1px solid var(--border); border-inline-start-width: 4px; border-radius: var(--radius); background: var(--surface); }
.sector-block svg { inline-size: 100%; max-inline-size: 820px; block-size: auto; display: block; margin-inline: auto; border-radius: var(--radius-sm); }
.sector-block table { font-size: var(--fs-sm); }

/* ---------- Analysis / advice / purchase ---------- */
.analysis tr.limit td { background: var(--danger-soft); font-weight: 600; }
.analysis tr.std-all td { background: var(--success-soft); }
.analysis .an-cap { margin: var(--s3) 0 var(--s1); padding: var(--s3) var(--s4); border-radius: var(--radius); background: var(--warn-soft);
                    border-inline-start: 4px solid var(--warn-line); color: var(--text); font-weight: 500; }
.advice .advice-hero, .purchase .advice-hero { margin: var(--s2) 0 var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius);
  background: var(--accent-soft); color: var(--text); font-size: var(--fs-lg); font-weight: 700; border-inline-start: 4px solid var(--accent); }
.purchase .buy-form { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: flex-end; margin: var(--s3) 0; }
.purchase .buy-form label { margin: 0; }
.purchase .buy-form input { inline-size: 160px; }

/* ---------- Report tab ---------- */
.report-tools { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: flex-end; }
.report-tools label { margin: 0; }
.report-tools input { inline-size: 240px; }

/* ---------- Settings ---------- */
table.whatif td.name { font-weight: 600; }
table.whatif td.qty { text-align: center; }
table.whatif input { inline-size: 140px; min-height: 36px; margin: 0; }
table.whatif tr.group td { background: var(--surface-3); color: var(--text); font-weight: 700; font-size: var(--fs-sm); }
table.whatif tr.edited td { background: var(--warn-soft); }
table.whatif td.ok, table.whatif td.bad { margin: 0; }
.active-tmpl { margin: var(--s2) 0; padding: var(--s2) var(--s3); border-radius: var(--radius); background: var(--accent-soft); color: var(--text); }
.tmpl-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); margin-top: var(--s3); }
@media (min-width: 1100px) { .tmpl-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .tmpl-preview { position: sticky; top: 74px; align-self: start; } }
.tmpl-form { max-inline-size: none; }
.tmpl-form h4 { padding-top: var(--s3); border-top: 1px solid var(--border); }
.tmpl-form .grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 var(--s4); }
.edit-table input { inline-size: 140px; min-height: 36px; margin: 0; }
.tmpl-preview { padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); }
.tmpl-preview h4 { margin: 0 0 var(--s1); }
.tmpl-preview svg { inline-size: 100%; block-size: auto; display: block; background: #fff; border-radius: var(--radius); border: 1px solid var(--border); }
.pv-controls { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: flex-end; }
.pv-controls input[type=range] { inline-size: 240px; display: block; margin-top: var(--s2); }
.pv-controls select { inline-size: auto; }
.pv-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin: var(--s3) 0; font-size: var(--fs-sm); }
.pv-figures > span { padding: var(--s2) var(--s3); background: var(--surface); border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--text-2); }
.pv-figures b { display: block; margin: 2px 0 0; font-size: var(--fs-lg); color: var(--text); font-variant-numeric: tabular-nums; }
.pv-why { margin-bottom: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--text); font-size: var(--fs-sm); }
.pv-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s2); }
.pv-limits { font-size: var(--fs-sm); }

.flash.bad { background: var(--danger-soft); color: var(--danger); border-radius: var(--radius-sm); }
.flash.warn { background: var(--warn-soft); color: var(--warn); border-radius: var(--radius-sm); }
.flash .ico { flex: none; }
.field-hint { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-3); font-weight: 400; }
.field-hint.own { color: var(--accent); font-weight: 600; }
.field-err { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--danger); font-weight: 600; }
.tmpl-form input.own { border-color: var(--accent); background: var(--accent-soft); }
.tmpl-form input.invalid, table.whatif input.invalid { border-color: var(--danger); background: var(--danger-soft); }
.tmpl-form fieldset:disabled { opacity: .72; }
.tmpl-form fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.edit-table.from-file td { color: var(--text-2); }
.field-err-list { margin: var(--s1) 0; padding-inline-start: var(--s5); }
.overrides-box { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font-size: var(--fs-sm); }
.confirm-bar { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin: var(--s2) 0; padding: var(--s2) var(--s3);
               border-radius: var(--radius); background: var(--danger-soft); color: var(--danger); font-weight: 600; }
.overrides { margin: var(--s2) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); font-size: var(--fs-xs); }
.overrides li { padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--text); }
.titleblock .whatif-warn { font-weight: 700; color: var(--danger); background: var(--danger-soft); }
.mode-bar .stale { background: var(--warn-soft); color: var(--warn); border-color: transparent; font-weight: 600; }
.mode-bar .stale button { min-height: 28px; padding: 0 var(--s2); }

.auth-card { max-inline-size: 520px; }
.auth-card form { margin: 0; }
.approval-box { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin: var(--s3) 0; padding: var(--s2) var(--s3);
                border-radius: var(--radius); background: var(--warn-soft); color: var(--text); font-size: var(--fs-sm); }
.approval-box.ok { background: var(--success-soft); }
.approval-box > span { display: inline-flex; align-items: center; gap: var(--s1); font-weight: 600; }
.approval-box input { inline-size: 200px; min-height: 36px; margin: 0; }
.mode-bar .approved { background: var(--success-soft); color: var(--success); border-color: transparent; font-weight: 600; }
td small.src { display: block; font-size: var(--fs-xs); color: var(--text-3); font-weight: 400; }
.source-fields { margin-top: var(--s2); }

.project-bar { padding: var(--s2) var(--s4); }
.project-bar .row-buttons { margin: 0; }
.mode-bar .project-chip { background: var(--accent-soft); color: var(--text); border-color: transparent; font-weight: 600; }
.mode-bar .project-chip small { font-weight: 400; color: var(--text-2); }
.mode-bar .project-chip button, .mode-bar .stale button { min-height: 28px; padding: 0 var(--s2); }
.mode-bar .mode-check { display: inline-flex; align-items: center; gap: var(--s1); margin: 0; font-size: var(--fs-sm); }
.stock-time { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.stock-time.old { color: var(--warn); }
table.projects td.actions { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: center; }
table.projects td.actions button { min-height: 32px; padding: 0 var(--s2); }
table.projects .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); font-size: var(--fs-xs); font-weight: 600; }
table.projects tr.status-reserved .badge { background: var(--accent-soft); color: var(--accent); }
table.projects tr.status-closed .badge { background: var(--success-soft); color: var(--success); }
table.projects tr.status-cancelled { color: var(--text-3); }
.data-check { margin-top: var(--s4); }
.data-check tr.bad td { color: var(--danger); }
.quote h2 { margin-top: 0; }
.quote tr.bad td { color: var(--danger); }
@media print { .quote { box-shadow: none; border: 0; } }

.user-box { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); }
.user-box a { color: inherit; font-weight: 600; }
.user-box form { margin: 0; display: inline; }
.user-box .link-btn { min-height: 32px; }
.user-box .avatar { display: inline-grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--accent-soft);
                    color: var(--accent); font-weight: 700; text-decoration: none; }
.user-box .user-name { color: var(--text-2); text-decoration: none; }
table.users tr.disabled td { color: var(--text-3); }
table.users td.actions { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); }
.returns-date input { max-inline-size: 220px; }
/* Item lengths: the calculator role next to the length */
.it-table td .tag { margin-inline-start: 6px; }

/* Several slabs (spec 020) */
.add-slab { justify-self: start; }
.slab-list { border: 1px solid var(--border); border-radius: 10px; padding: var(--s2) var(--s3); margin: var(--s2) 0; display: grid; gap: var(--s2); }
.slab-list legend { font-weight: 700; padding: 0 var(--s1); }
.slab-row { display: grid; gap: var(--s1); padding: var(--s2); border-radius: 8px; background: var(--surface-2); }
.slab-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.slab-head .link-btn.danger { min-inline-size: 44px; min-block-size: 44px; }
.slab-pick { flex-wrap: wrap; }
.multi-result tr.selected td { background: var(--accent-soft); }
.expected-sources { border: 0; padding: 0; margin: var(--s2) 0 0; display: flex; flex-direction: column; gap: var(--s1); }
.expected-sources legend { font-size: var(--fs-sm); color: var(--text-2); padding: 0; margin-bottom: var(--s1); }

.zoom-buttons { display: inline-flex; gap: 2px; }
.zoom-buttons button { min-inline-size: 40px; min-height: 40px; padding: 0; font-size: 20px; font-weight: 700; line-height: 1; }

/* ---------- Blazor error ---------- */
#blazor-error-ui { position: fixed; inset-inline: 0; bottom: 0; z-index: 1000; display: none; padding: var(--s3) var(--s5);
                   background: var(--warn-soft); color: var(--text); box-shadow: var(--shadow-lg); }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; inset-inline-end: var(--s4); top: var(--s2); }

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .page { padding: var(--s3) var(--s4) var(--s6); }
  .topbar { padding: var(--s2) var(--s4); gap: var(--s2); }
  .topbar .title { display: none; }
  .user-box .user-name { max-inline-size: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero { padding: var(--s4); }
  .hero .big { font-size: 32px; }
  input[type=number], input[type=text], input[type=date], input[type=search], input[type=tel], input[type=email], input[type=password], select { font-size: 16px; }   /* no iOS zoom */
  .leg-sheet { grid-template-columns: 1fr; }
  .pv-pair, .pv-figures { grid-template-columns: 1fr; }
}

/* ---------- Print: the drawing sheet or the report only ---------- */
@media print {
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) { color-scheme: light; --bg: #fff; --surface: #fff; --surface-2: #F1F5F9; --text: #0F172A; --text-2: #334155; --border: #CBD5E1; }
  .topbar, .sidebar, .nav-scrim, .notice, .mode-bar, .inputs, .tabs, .no-print, .card.warn, .card.error, .lang-switch, .theme-btn { display: none !important; }
  .app-shell { display: block; }
  .layout { display: block; }
  .page { max-width: none; padding: 0; }
  .card { border: 0; padding: 0; box-shadow: none; overflow: visible; }
  svg.drawing { page-break-inside: avoid; }
  .leg-cell { break-inside: avoid; }
}

/* Permission matrix (spec 005, story 5) */
.sec-wrap { overflow-x: auto; max-width: 100%; }
table.sec-matrix { border-collapse: collapse; min-width: 100%; }
table.sec-matrix th, table.sec-matrix td { border-bottom: 1px solid var(--border); padding: var(--s1) var(--s2); vertical-align: top; text-align: start; }
table.sec-matrix thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; min-width: 12rem; }
table.sec-matrix tbody th[scope=row] { font-weight: 500; white-space: nowrap; }
tr.sec-section th, tr.sec-section td { background: var(--surface-2); font-weight: 600; }
.sec-acts { display: flex; flex-wrap: wrap; gap: 4px; }
.sec-act { min-height: 32px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .8rem; cursor: pointer; }
.sec-act.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 600; }
.sec-act.changed { outline: 2px dashed var(--warn); outline-offset: 1px; }
.sec-act:disabled { cursor: not-allowed; opacity: .6; }
.save-bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; padding: var(--s2) var(--s3); margin-top: var(--s3); background: var(--warn-soft); border-radius: var(--radius-sm); }
.tag { font-size: .7rem; padding: 0 6px; border-radius: 999px; background: var(--surface-3); }
.small { font-size: .8rem; }

/* Clients and projects (spec 006) */
.cp-layout { display: grid; grid-template-columns: minmax(16rem, 22rem) 1fr; gap: var(--s3); align-items: start; }
@media (max-width: 900px) { .cp-layout { grid-template-columns: 1fr; } }
.cp-items { list-style: none; margin: var(--s2) 0 0; padding: 0; max-height: 70vh; overflow-y: auto; }
.cp-items a { display: flex; flex-direction: column; padding: var(--s2); border-radius: var(--radius-sm); text-decoration: none; color: var(--text); min-height: 44px; }
.cp-items a:hover, .cp-items a.on { background: var(--accent-soft); }
.cp-items a.inactive .cp-name { opacity: .6; text-decoration: line-through; }
.cp-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--s2); border: 0; padding: 0; margin: var(--s2) 0; }
.cp-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; }
.cp-form label.wide { grid-column: 1 / -1; }
.cp-form label.check { flex-direction: row; align-items: center; }
.grow { flex: 1 1 16rem; min-width: 0; }
.cp-lists { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0; }
.cp-list-tab { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s2) var(--s3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer; }
.cp-list-tab.on { border-color: var(--accent); background: var(--accent-soft); }
table.cp-grid input.num, input.num { width: 7rem; text-align: end; font-variant-numeric: tabular-nums; }
table.cp-grid td.num, table.cp-grid th.num { text-align: end; font-variant-numeric: tabular-nums; }
table.cp-grid tr.changed td { background: var(--warn-soft); }
.tag.st-Active { background: var(--success-soft); color: var(--success); }
.tag.st-Closed { background: var(--surface-3); color: var(--muted, inherit); }

/* ---------- SaaS dashboard components (2026-10-05) ---------- */
/* Cards: flat, bordered, one elevation. Page headers with a toolbar. */
.card { border-radius: 12px; box-shadow: var(--shadow-sm); }
.page-h { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; font-size: var(--fs-xl); letter-spacing: -.2px; }
/* KPI strip: label, figure, context. Status in form as well as colour (a dot + text). */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s3); margin: 0 0 var(--s4); }
.kpi { display: grid; gap: 2px; padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); min-width: 0; }
.kpi .kpi-label { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: var(--text-3); font-weight: 500; }
.kpi .kpi-label::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--kpi, var(--accent)); flex: none; }
.kpi .kpi-value { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--text); }
.kpi .kpi-sub { font-size: var(--fs-xs); color: var(--text-3); }
.kpi.ok { --kpi: var(--success); } .kpi.warn { --kpi: var(--highlight); } .kpi.muted { --kpi: var(--text-3); }
/* Tables: compact, quiet header, accent row hover. */
thead th, table > tr:first-child > th { font-size: var(--fs-xs); letter-spacing: .02em; color: var(--text-3); }
tr:hover > td { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
/* Status pills */
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 600; padding: 2px 10px; color: var(--text-2); }
.tag.st-Draft { background: var(--highlight-soft); color: var(--highlight); }
/* Search field with an icon */
input[type=search] { padding-inline-start: 36px; background-image: none; }
.search-box { position: relative; display: flex; flex: 1 1 16rem; min-width: 0; }
.search-box .ico { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.search-box input { margin-top: 0; }
@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; row-gap: var(--s1); padding-inline: var(--s3); }
  .lang-switch button { padding: 0 var(--s2); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .kpi { padding: var(--s2) var(--s3); }
  .kpi .kpi-value { font-size: var(--fs-xl); }
}

/* ---------- Remaining screens (2026-10-05) ---------- */
/* One status palette everywhere: draft = amber, reserved/active = blue, closed = green, cancelled/disabled = grey. */
table.projects .badge { padding: 2px 10px; }
table.projects tr.status-draft .badge { background: var(--highlight-soft); color: var(--highlight); }
table.projects tr.status-cancelled .badge { background: var(--surface-3); color: var(--text-3); }
.kpi.info { --kpi: var(--accent); }
/* Sign-in: centred card, brand above it. */
.auth-card { margin: clamp(16px, 8vh, 96px) auto 0; padding: var(--s6); box-shadow: var(--shadow-lg); }
.auth-card h3 { font-size: var(--fs-xl); }
/* Page header row with an action on the far side. */
.page-h .spacer { flex: 1; }

/* ---------- New-project wizard, paste, approval preview (spec 006) ---------- */
.wz-steps { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0 0 var(--s4); padding: 0; counter-reset: none; }
.wz-steps li { display: inline-flex; align-items: center; gap: var(--s2); padding: 6px 14px 6px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-3); font-weight: 600; font-size: var(--fs-sm); }
.wz-steps .wz-num { display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--surface-3); color: var(--text-2); font-size: var(--fs-xs); }
.wz-steps li.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.wz-steps li.on .wz-num { background: var(--accent); color: var(--on-accent); }
.wz-steps li.done { color: var(--success); }
.wz-steps li.done .wz-num { background: var(--success-soft); color: var(--success); }
.wz-card { max-inline-size: 880px; }
.wz-choice { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s3); }
.wz-opt { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; font-weight: 600; }
.wz-opt.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.wz-pick { max-height: 320px; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s1); margin-top: var(--s2); }
.wz-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s1) var(--s3); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s3); margin: 0 0 var(--s3); }
.wz-cats legend { padding: 0 var(--s1); font-weight: 600; }
.wz-review { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s4); margin: 0; }
.wz-review dt { color: var(--text-3); font-weight: 500; }
.wz-review dd { margin: 0; font-weight: 600; }
.wz-nav { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--border); }
.wz-nav .spacer { flex: 1; }
.wz-nav button:not(.primary) { min-height: 40px; padding: 0 var(--s4); border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-2); font-weight: 600; }
.kpi-inline { font-weight: 700; color: var(--accent); }
.btn-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s4); border-radius: var(--radius); border: 1px solid var(--accent); color: var(--accent); font-weight: 700; text-decoration: none; }
.btn-link:hover { background: var(--accent-soft); }
.paste-panel { display: grid; gap: var(--s2); padding: var(--s3); margin: 0 0 var(--s3); border: 1px dashed var(--accent-line); border-radius: var(--radius); background: var(--surface-2); }
.paste-panel textarea { font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-sm); padding: var(--s2); border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); resize: vertical; }
.paste-errors { margin: 0; padding-inline-start: var(--s5); color: var(--danger); font-size: var(--fs-sm); }
.approve-panel { margin-top: var(--s3); padding: var(--s4); border: 1px solid var(--accent-line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); }
.approve-panel h4 { margin-top: 0; }
tr.diff-up td { background: var(--highlight-soft); } tr.diff-down td { background: var(--success-soft); }
tr.diff-removed td { color: var(--text-3); text-decoration: line-through; }

/* ---------- Project price list: items panel + list (spec 006) ---------- */
.pl-layout { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: var(--s4); align-items: start; margin-top: var(--s3); }
@media (max-width: 1100px) { .pl-layout { grid-template-columns: minmax(0, 1fr); } }
.pl-catalog { position: sticky; top: calc(var(--header-h) + 8px); display: flex; flex-direction: column; gap: var(--s2); max-height: calc(100dvh - var(--header-h) - 24px);
              padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); min-width: 0; }
@media (max-width: 1100px) { .pl-catalog { position: static; max-height: 70vh; } }
.pl-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.pl-head h4, .pl-title { margin: 0; }
.pl-cats { display: flex; flex-wrap: wrap; gap: var(--s1); }
.chip { min-height: 32px; padding: 0 var(--s3); border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pl-addall { display: flex; gap: var(--s2); align-items: flex-end; flex-wrap: wrap; }
.pl-addall label { display: grid; gap: 2px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); }
.pl-addall input { margin: 0; inline-size: 7rem; }
.pl-addall button.primary { inline-size: auto; flex: 1; min-height: 40px; font-size: var(--fs-md); }
.pl-items { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; gap: 4px; min-height: 0; flex: 1; }
.pl-item { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s2); inline-size: 100%; text-align: start; padding: var(--s2) var(--s3);
           border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); cursor: pointer;
           transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.pl-item:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.pl-item .pl-name { font-weight: 600; font-size: var(--fs-md); }
.pl-item .pl-meta { grid-column: 1; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: var(--fs-xs); color: var(--text-3); align-items: center; }
.pl-item .pl-meta b { color: var(--text-2); font-variant-numeric: tabular-nums; }
.pl-item .pl-state { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-grid; place-items: center; inline-size: 28px; block-size: 28px;
                     border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.pl-item.added { opacity: 1; cursor: default; background: var(--success-soft); border-color: transparent; }
.pl-item.added .pl-state { background: var(--success); color: #fff; }
.pl-item:disabled { opacity: 1; }
.pl-list { min-width: 0; }
.pl-empty { padding: var(--s6); text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
table.cp-grid tr.just-added td { background: var(--accent-soft); }
.pl-catalog .search-box { flex: none; }
.pl-catalog .search-box input { min-height: 40px; }

/* ---------- Items (spec 007) ---------- */
.it-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-items: start; }
.it-layout.with-panel { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
@media (max-width: 1100px) { .it-layout.with-panel { grid-template-columns: minmax(0, 1fr); } .it-panel { order: -1; } }
.it-panel { position: sticky; top: calc(var(--header-h) + 8px); max-block-size: calc(100vh - var(--header-h) - 16px); overflow-y: auto; }
@media (max-width: 1100px) { .it-panel { position: static; max-block-size: none; overflow: visible; } }
.it-panel-head { display: flex; justify-content: space-between; align-items: center; }
.it-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.it-status { inline-size: auto; margin: 0; }
.it-cat-input { max-inline-size: 260px; margin: 0; }
.it-list .pl-cats { margin-bottom: var(--s2); }
table.it-table tr.clickable { cursor: pointer; }
table.it-table tr.selected td { background: var(--sel); }
.it-import { max-inline-size: 760px; }
.warn-text { color: var(--warn); }

/* ---------- Desktop migration ---------- */
.mig-intro { max-inline-size: 80ch; }
.mig-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); max-inline-size: 980px; }
.mig-step.done { border-inline-start: 4px solid var(--success); }
.mig-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.mig-head h3 { margin: 0; }
.mig-num { display: inline-grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.mig-step.done .mig-num { background: var(--success); color: #fff; }
.mig-notes { margin: var(--s2) 0; padding-inline-start: var(--s5); color: var(--warn); font-size: var(--fs-sm); }
[hidden] { display: none !important; }   /* field styles must not show hidden inputs */

/* ---------- Rent requests (spec 010) ---------- */
.bar { display: inline-block; inline-size: 80px; block-size: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; vertical-align: middle; margin-inline-end: 6px; }
.bar > span { display: block; block-size: 100%; background: var(--success); }
table.cp-grid tr.row-bad td { background: var(--danger-soft); }

/* ---------- Calculator tabs: one menu entry, its screens as tabs ---------- */
.calc-tabs { margin: 0 0 var(--s4); }
.calc-tabs .calc-tab { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s4); border-radius: 9px;
                       color: var(--text-2); font-weight: 600; font-size: var(--fs-md); text-decoration: none; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.calc-tabs .calc-tab:hover:not(.active) { background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--text); }
.calc-tabs .calc-tab.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
@media print { .calc-tabs { display: none !important; } }

.nowrap { white-space: nowrap; }

/* ---------- Issue order: item history ---------- */
.pl-items .pl-row { display: flex; align-items: stretch; gap: var(--s2); }
.pl-items .pl-row .pl-item { flex: 1; min-inline-size: 0; }
.hist-btn { flex: none; inline-size: 44px; min-block-size: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; cursor: pointer; }
.hist-card { border-inline-start: 3px solid var(--accent); }

.cp-grid tr.warn-row td { background: color-mix(in srgb, var(--warn-line) 14%, transparent); }
.bad-text { color: var(--danger); }

.it-conv { margin-block-start: var(--s4); display: grid; gap: var(--s2); }
.it-conv h4 { margin: 0; }

/* ---------- Printed rent invoice (spec 014): the desktop report on the dot-matrix printer ---------- */
.inv-print { display: none; }
@page invoice { size: 210mm 305mm; margin: 5mm 5mm 2.5mm 12.7mm; @bottom-right { content: "page: " counter(page) " / " counter(pages); font: 9pt Calibri, Arial, sans-serif; } }
@media print {
  body:has(.inv-print) .inv-screen { display: none !important; }
  .inv-print { display: block; page: invoice; color: #000; background: #fff; font: 9.5pt Calibri, "Segoe UI", Arial, sans-serif; }
  .inv-print table { border-collapse: collapse; inline-size: 100%; }
  .inv-print, .inv-print * { color: #000 !important; background: transparent !important; box-shadow: none !important; }   /* dot-matrix: black only, no shading */
  .ip-frame > thead { display: table-header-group; }
  .ip-frame > tfoot { display: table-footer-group; }
  .ip-head { display: flex; justify-content: space-between; gap: 8mm; padding-block-start: 27mm; padding-block-end: 3mm; }   /* the pre-printed letterhead area, as on the desktop report */
  .ip-company { font-size: 12pt; font-weight: 700; }
  .ip-to { font-size: 11pt; margin-block-start: 4mm; }
  .ip-to b { font-size: 12pt; }
  .ip-phone { font-size: 9pt; }
  .ip-title { font-size: 14pt; text-align: center; margin-block-end: 2mm; }
  .ip-meta td { font-size: 11pt; padding: 0 2mm; }
  .ip-meta td + td { text-align: center; }
  .ip-sec { font-size: 11pt; font-weight: 700; margin: 3mm 0 1mm; }
  .ip-grid th, .ip-grid td { border: 1px solid #000; padding: 0.6mm 1.2mm; font-size: 9pt; }
  .ip-grid th { font-weight: 700; text-align: center; }
  .ip-grid tr { break-inside: avoid; }
  .ip-grid .c { text-align: center; }
  .ip-grid .r { text-align: right; white-space: nowrap; }
  .ip-sum { inline-size: 70mm !important; margin: 4mm 0 0 auto; }
  .ip-sum td { font-size: 10pt; padding: 0.6mm 1.5mm; }
  .ip-sum td + td { text-align: right; border-bottom: 1px solid #000; }
  .ip-strong td { font-weight: 700; }
  .ip-words { margin-block-start: 3mm; font-size: 10pt; font-weight: 700; }
  .ip-sign { display: flex; justify-content: space-between; font-size: 9pt; font-weight: 700; padding-block-start: 10mm; }
}

/* Dropdowns inside grids (receipt kind, conversion target) keep room for their text. */
.cp-grid select { min-inline-size: 7.5rem; }

/* ---------- UX pass (2026-10-07): filters, receipt grid, sticky save bar, vouchers ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s2); font-size: var(--fs-sm, .9rem); }
.filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s3); margin-block-end: var(--s3); }
.filter-bar .search-box { flex: 1 1 16rem; }
.filter-bar label { display: grid; gap: 2px; font-size: .85rem; color: var(--text-2); }
.filter-bar input[type=date], .filter-bar select { min-block-size: 40px; }
.kpi.dim { opacity: .45; }
.rc-grid .qty-in, .it-sug .qty-in { inline-size: 6.5rem; }
.rc-grid th.k-good { color: var(--success, #16a34a); } .rc-grid th.k-bad { color: var(--danger); } .rc-grid th.k-info { color: var(--accent); }
.sticky-bar { position: sticky; inset-block-end: 0; z-index: 5; background: var(--surface); border-block-start: 1px solid var(--border); padding: var(--s3); border-radius: 12px; box-shadow: var(--shadow); }
.doc-print { page: voucher; }
@page voucher { size: A4; margin: 12.7mm; @bottom-right { content: counter(page) " / " counter(pages); font: 9pt Calibri, Arial, sans-serif; } }
@media print {
  .doc-print .ip-head { padding-block-start: 4mm; }
  .ip-signs { margin-block-start: 8mm; } .ip-signs td { font-size: 9.5pt; padding: 2.5mm 2mm; }
}

.pf-tabs { display: flex; flex-wrap: wrap; gap: var(--s1); margin-block: var(--s3); }
.pf-count { display: inline-block; min-inline-size: 1.6em; padding: 0 .4em; margin-inline-start: .35em; border-radius: 999px; background: var(--surface-2, rgba(127,127,127,.15)); font-size: .8em; text-align: center; }
.pf-items tr.on > td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pf-hist > td { padding: var(--s2) var(--s4) var(--s4); }

.page-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block: calc(-1 * var(--s2)) var(--s3); }
.page-actions .btn-link, .page-actions button.btn-link { font-size: var(--fs-md, 1rem); min-block-size: 40px; display: inline-flex; align-items: center; }

/* ---------- warehouses tree (spec 017) ---------- */
.wh-tree .wh-branch > a { padding-inline-start: var(--s5, 1.5rem); }
.wh-tree .wh-main > a { font-weight: 600; }

.short-card { border-inline-start: 4px solid var(--danger); margin-block: var(--s3); }

.nav-badge { display: inline-block; min-inline-size: 1.4em; padding: 0 .4em; margin-inline-start: auto; border-radius: 999px; background: var(--danger); color: #fff; font-size: .75rem; font-weight: 700; text-align: center; }
/* Calculator assistant (spec 020 US3-US5) */
.assistant .ai-chat { display: grid; gap: var(--s2); margin-block: var(--s2); }
.assistant .ai-q { justify-self: end; max-inline-size: 85%; background: var(--accent-soft); border-radius: 12px; padding: 6px 12px; }
.assistant .ai-a { white-space: pre-wrap; line-height: 1.7; }
.assistant .ai-ask { display: flex; gap: var(--s2); margin-block: var(--s2); }
.assistant .ai-ask input { flex: 1 1 auto; min-inline-size: 0; }
.assistant .ai-ask button { inline-size: auto; }
.assistant .ai-status { display: flex; align-items: center; gap: 8px; }
.spinner { display: inline-block; inline-size: 14px; block-size: 14px; border: 2px solid var(--border); border-block-start-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
/* Trucks (owner 2026-10-09) */
.ico-truck { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E"); }
.truck-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.truck-card { min-inline-size: 0; }
.layout.layout-trucks { grid-template-columns: minmax(0, 1fr); }
.layout-trucks > .inputs { display: none; }
.truck-card table { margin-block-start: var(--s2); }
.truck-profile-controls, .truck-profile-form { display: grid; gap: var(--s2); }
.truck-profile-controls > label { max-inline-size: 520px; }
.truck-profile-form { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.truck-profile-form .row-buttons, .truck-profile-form .flash { grid-column: 1 / -1; }
.truck-card > h3 { margin-block: 0 var(--s2); }
.truck-dimension-tags { display: flex; flex-wrap: wrap; gap: var(--s1); margin-block: var(--s2); }
.truck-dimension-tags span { padding: 2px var(--s2); border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: .85em; }
.it-pack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.it-pack .wide { grid-column: 1 / -1; }
.truck-card td a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.truck-card td a:hover, .truck-card td a:focus-visible { color: var(--accent); text-decoration-style: solid; }
.swatch { display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: middle; }
.truck3d-viewer { display: grid; gap: var(--s2); min-inline-size: 0; }
.truck-view-switch { display: flex; flex-wrap: wrap; gap: var(--s2); }
.truck-view-switch button[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.truck3d-content { display: grid; gap: var(--s2); min-inline-size: 0; }
.truck3d-content[hidden] { display: none; }
.truck2d-content[hidden] { display: none; }
.truck3d-viewer:fullscreen .truck3d-content:not([hidden]) { display: flex; flex: 1; flex-direction: column; }
.truck2d-viewer { display: grid; gap: var(--s3); min-inline-size: 0; }
.truck2d-controls { display: flex; flex-wrap: wrap; gap: var(--s3); }
.truck2d-controls label { flex: 1 1 240px; min-inline-size: 0; }
.truck2d-controls select { inline-size: 100%; min-inline-size: 0; }
.truck2d-details { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); padding: var(--s3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.truck2d-details strong { flex-basis: 100%; }
.truck2d-details b[dir="ltr"], .truck2d-selected-size b[dir="ltr"] { display: inline-block; unicode-bidi: isolate; }
.truck2d-plans { display: grid; grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr); gap: var(--s3); align-items: start; }
.truck2d-plan { grid-column: 1; min-inline-size: 0; margin: 0; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: #0f172a; }
.truck2d-plan figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); font-size: var(--fs-sm); }
.truck2d-plan figcaption span { color: #64748b; }
.truck2d-rear { grid-column: 2; grid-row: 1 / span 2; }
.truck2d-svg { display: block; inline-size: 100%; block-size: auto; margin-block-start: var(--s2); font-family: var(--font); }
.truck2d-package { cursor: grab; touch-action: none; }
.truck2d-package[data-dragging="true"] { cursor: grabbing; opacity: .8; }
.truck2d-package:focus-visible rect { stroke: #0f172a; stroke-width: 3; stroke-dasharray: 4 2; }
.truck2d-package:focus-visible { outline: none; }
.truck2d-move-buttons { display: flex; flex-wrap: wrap; gap: var(--s2); }
.truck2d-move-buttons button { inline-size: auto; min-block-size: 44px; }
.truck2d-error, .truck2d-runtime-error { margin: 0; padding: var(--s2) var(--s3); border: 1px solid var(--danger-line); border-radius: var(--radius-sm); color: var(--danger); background: var(--danger-soft); }
.truck2d-runtime-error[hidden] { display: none; }
.truck2d-package:hover rect { stroke: #0f172a; stroke-width: 2; }
.truck2d-number { fill: #fff; stroke: #0f172a; stroke-width: 3; paint-order: stroke; font: 700 13px system-ui, sans-serif; pointer-events: none; }
.truck2d-selected-size { margin: 0; font-size: var(--fs-sm); text-align: center; }
@media (max-width: 800px) { .truck2d-plans { grid-template-columns: minmax(0, 1fr); } .truck2d-rear { grid-column: 1; grid-row: auto; max-inline-size: 380px; } }
@media (max-width: 600px) {
  .truck2d-plan:not(.truck2d-rear) .truck2d-dimension-text { font-size: 36px; }
  .truck2d-plan:not(.truck2d-rear) .truck2d-number { font-size: 30px; }
  .truck2d-plan:not(.truck2d-rear) .truck2d-orientation { font-size: 22px; }
}
.truck3d-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.truck3d-toolbar button, .truck3d-edit-tools button { inline-size: auto; min-block-size: 44px; }
.truck3d-toolbar { padding-block: var(--s2); border-bottom: 1px solid var(--border); }
.truck3d-views { display: grid; grid-template-columns: repeat(3, 52px); gap: 3px; direction: ltr; }
.truck3d-toolbar .truck3d-view-button { inline-size: 52px; min-block-size: 40px; block-size: 40px; padding: 2px; display: grid; place-items: center; background: #fff; }
.truck3d-view-button img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.truck2d-tractor { image-rendering: auto; }
.truck3d-edit-tools { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s2); }
.truck3d-edit-tools label { flex: 1 1 260px; max-inline-size: 420px; margin: 0; }
.truck3d-position { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s2); }
.truck3d-position label { flex: 0 1 120px; margin: 0; }
.truck3d-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); padding: var(--s2) 0; }
.truck3d-legend span { display: inline-flex; align-items: center; gap: var(--s1); font-size: .9em; }
.truck3d-legend b { color: var(--muted); font-weight: 500; }
.truck3d-stage { position: relative; min-inline-size: 0; block-size: clamp(480px, 72vh, 850px); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: #F3F6FA; }
.truck3d-viewer:fullscreen { display: flex; flex-direction: column; overflow: auto; padding: 20px; background: var(--surface, #fff); }
.truck3d-viewer:fullscreen .truck3d-stage { flex: 1 0 50vh; block-size: auto; }
.truck3d-stage canvas:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; }
.truck3d-stage canvas { display: block; inline-size: 100%; block-size: 100%; touch-action: none; }
.truck3d-axis { position: absolute; z-index: 3; transform: translate(-50%, -50%); display: grid; place-items: center;
  inline-size: 44px; block-size: 44px; min-block-size: 44px; padding: 0; border: 2px solid var(--axis-color);
  border-radius: 50%; background: #fff; color: var(--axis-color); font: 700 12px system-ui, sans-serif;
  direction: ltr; cursor: grab; touch-action: none; user-select: none; box-shadow: 0 2px 8px #0f172a22; }
.truck3d-axis:active { cursor: grabbing; }
.truck3d-axis:focus-visible { outline: 3px solid #0f172a; outline-offset: 3px; }
.truck3d-axis[hidden] { display: none; }
.truck3d-draft { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
  padding: var(--s3); border: 1px solid var(--border); border-inline-start: 4px solid #f59e0b;
  border-radius: var(--radius-sm); background: var(--surface-2); }
.truck3d-draft span { flex: 1 1 280px; }
.truck3d-draft button.primary { inline-size: auto; }
.truck3d-error, .truck3d-runtime-error { margin: 0; padding: var(--s2) var(--s3); border: 1px solid var(--danger-line); border-radius: var(--radius-sm); color: var(--danger); background: var(--danger-soft); }
.truck3d-runtime-error[hidden] { display: none; }
@media (max-width: 600px) { .truck3d-stage { block-size: 60vh; min-block-size: 360px; } .truck3d-viewer:fullscreen { padding: 10px; } }

/* ---------- Plan reading (spec 021) ---------- */
.plan-uploads { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--s3); }
.plan-file input[type=file] { inline-size: 100%; }
.plan-facts { margin: var(--s2) 0; padding-inline-start: 1.1rem; }
.plan-facts li { margin-block: 2px; }
.plan-view { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; max-block-size: 75vh; }
.plan-svg { display: block; inline-size: 100%; block-size: auto; min-inline-size: 640px; }
.plan-view.hide-lines .lyr-lines, .plan-view.hide-axes .lyr-axes, .plan-view.hide-columns .lyr-columns,
.plan-view.hide-openings .lyr-openings, .plan-view.hide-notes .lyr-notes { display: none; }
.plan-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--s3); align-items: start; }
.plan-questions .cp-form { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.plan-mark { max-inline-size: 7rem; }
.plan-view.hide-slab .lyr-slab, .plan-view.hide-shoring .lyr-shoring { display: none; }
.plan-edges { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.plan-add select { min-inline-size: 4.5rem; }