:root {
  /* The warm look: warm linen canvas, buttermilk cards, botanical accents (matches Opun60) */
  color-scheme: light;
  --bg: #FAF5ED;
  --surface: #FFFDF9;
  --surface-2: #F4ECE0;
  --border: #E8DFD1;
  --border-strong: #D8CBBB;
  --text: #231E1B;
  --muted: #5E554D;
  --dim: #94887D;
  --accent: #A04F3C;            /* terracotta, dark enough for text (4.5:1 on paper and menu) */
  --accent-bright: #D9826C;
  --accent-soft: #FDF1ED;
  --accent-border: #94473A;
  --accent-shadow: rgba(184, 107, 77, .25);
  --accent-shadow-strong: rgba(184, 107, 77, .32);
  --on-accent: #FFFFFF;         /* text on the terracotta, P1/P3/P4 and dark avatar fills */
  --on-light: #231E1B;          /* text on light fills (P2 honey), both modes */
  --sage: #6A8670;
  --sage-soft: #EFF5F0;
  --sage-glow: rgba(106, 134, 112, .35);
  --danger: #B04A3B;
  --danger-soft: #FBEAE6;
  --danger-solid: #B04A3B;      /* filled "Delete" buttons in confirm boxes, both modes */
  --ok: #36603F;
  --ok-soft: #EFF5F0;
  --warn: #A8651F;
  --warn-soft: #FEF3E4;
  --p1: #B04D3E;
  --p2: #DE9B52;
  --p3: #587560;
  --p4: #776C62;
  --grad-primary: linear-gradient(135deg, #AD5A45, #94473A);  /* white text 4.5:1 on both stops */
  /* Elevation (research: layered, colour-matched shadows from one light source above-left, offsets 1:2,
     doubling layers; Comeau "Designing beautiful shadows", Ahlin "Layered box-shadows"). */
  --shadow-color: 28deg 30% 36%;
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, .8);
  --elev-1: var(--edge-light), 0.5px 1px 1px hsl(var(--shadow-color) / .14), 1px 2px 3px -0.5px hsl(var(--shadow-color) / .14),
    2px 4px 8px -2px hsl(var(--shadow-color) / .16), 3px 7px 14px -6px hsl(var(--shadow-color) / .18);
  --elev-2: var(--edge-light), 0.5px 1px 1px hsl(var(--shadow-color) / .12), 1px 2px 2px -0.5px hsl(var(--shadow-color) / .12),
    2px 5px 6px -1px hsl(var(--shadow-color) / .12), 5px 12px 18px -4px hsl(var(--shadow-color) / .2);
  --elev-3: var(--edge-light), 0.5px 1px 1px hsl(var(--shadow-color) / .1), 1px 2px 2px hsl(var(--shadow-color) / .1),
    2px 4px 4px hsl(var(--shadow-color) / .1), 4px 8px 8px hsl(var(--shadow-color) / .1), 8px 16px 16px hsl(var(--shadow-color) / .1),
    14px 28px 44px -6px hsl(var(--shadow-color) / .24);
  --surface-float: var(--surface);
  --shadow: var(--elev-1);
  --shadow-lg: var(--elev-3);
  --shadow-side: -8px 0 36px rgba(60, 45, 30, .14);
  --shadow-split: -10px 0 30px rgba(60, 45, 30, .06);
  --shadow-bar: 0 -6px 24px rgba(60, 45, 30, .08);
  /* canvas cards: menu items, group headers, top-bar buttons, dropdowns, boxes */
  --card-shadow: var(--elev-1);
  --card-shadow-hover: var(--elev-2);
  --card-shadow-active: var(--elev-2), 0 0 0 1px rgba(160, 79, 60, .25), 0 6px 18px -4px rgba(160, 79, 60, .28);
  --scrim: rgba(45, 32, 22, .22);
  --scrim-strong: rgba(45, 32, 22, .32);
  --bar-bg: rgba(250, 245, 237, .9);
  --glow-top: rgba(222, 155, 82, .07);
  --pdf-bg: #525659;            /* the PDF viewer stays the same in both modes; pages stay white */
  --pdf-page: #FFFFFF;
  --pdf-shadow: rgba(0, 0, 0, .35);
  --pdf-text: #EEEEEE;
  --radius: 12px;
  --sidebar: #F4ECE0;
  --menu-w: 240px;              /* the menu column; 0px when hidden or on phones */
  --bar-h: 68px;                /* the static top bar */
  --font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27140%27%20height%3D%27140%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.52%200%200%200%200%200.44%200%200%200%200%200.36%200%200%200%200.058%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27140%27%20height%3D%27140%27%20filter%3D%27url(%23g)%27/%3E%3C/svg%3E");
  --weave: repeating-linear-gradient(0deg, rgba(165, 135, 105, .028) 0 1px, transparent 1px 4px),
           repeating-linear-gradient(90deg, rgba(165, 135, 105, .028) 0 1px, transparent 1px 4px);
}
/* Night mode, "Espresso evening": same family, low light. Picked in the Hi menu, or following the device
   until someone picks. The two blocks are identical; CSS can't share one block between them. */
:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #1B1714;
  --surface: #29231E;
  --surface-2: #2D2722;
  --border: #3A322B;
  --border-strong: #4A4037;
  --text: #F1E9DE;
  --muted: #BDB1A3;
  --dim: #8F8377;
  --accent: #E8A08C;
  --accent-bright: #E39A85;
  --accent-soft: #3A2723;
  --sage: #9DB8A2;
  --sage-soft: #223025;
  --danger: #F08A78;
  --danger-soft: #3B221E;
  --ok: #9DC4A5;
  --ok-soft: #1F2E23;
  --warn: #EDB36F;
  --warn-soft: #3A2C1C;
  --p3: #5E7A64;
  --p4: #7D7268;
  /* Night: depth comes from light, not shadow. Higher surfaces are lighter (Atlassian / Material elevation),
     with a warm halo and a lit top edge; a dark drop underneath keeps them off the page. */
  --glow-color: 32deg 90% 78%;
  --edge-light: inset 0 1px 0 hsl(var(--glow-color) / .10);
  --elev-1: var(--edge-light), 0 0 0 1px hsl(var(--glow-color) / .10), 0 0 10px hsl(var(--glow-color) / .10),
    0 0 24px -4px hsl(var(--glow-color) / .09), 0 2px 4px rgba(0, 0, 0, .35);
  --elev-2: var(--edge-light), 0 0 0 1px hsl(var(--glow-color) / .15), 0 0 16px hsl(var(--glow-color) / .16),
    0 0 32px -4px hsl(var(--glow-color) / .10), 0 6px 14px rgba(0, 0, 0, .45);
  --elev-3: var(--edge-light), 0 0 0 1px hsl(var(--glow-color) / .18), 0 0 20px hsl(var(--glow-color) / .18),
    0 0 56px -6px hsl(var(--glow-color) / .16), 0 18px 44px rgba(0, 0, 0, .6);
  --surface-float: #322B25;
  --shadow: var(--elev-1);
  --shadow-lg: var(--elev-3);
  --shadow-side: -8px 0 36px rgba(0, 0, 0, .45);
  --shadow-split: -10px 0 30px rgba(0, 0, 0, .3);
  --shadow-bar: 0 -6px 24px rgba(0, 0, 0, .35);
  --card-shadow: var(--elev-1);
  --card-shadow-hover: var(--elev-2);
  --card-shadow-active: var(--elev-2), 0 0 0 1px rgba(232, 160, 140, .35), 0 0 22px rgba(232, 160, 140, .22);
  --scrim: rgba(0, 0, 0, .45);
  --scrim-strong: rgba(0, 0, 0, .55);
  --bar-bg: rgba(27, 23, 20, .9);
  --glow-top: rgba(222, 155, 82, .04);
  --sidebar: #211C18;
  --weave: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    color-scheme: dark;
    --bg: #1B1714;
    --surface: #29231E;
    --surface-2: #2D2722;
    --border: #3A322B;
    --border-strong: #4A4037;
    --text: #F1E9DE;
    --muted: #BDB1A3;
    --dim: #8F8377;
    --accent: #E8A08C;
    --accent-bright: #E39A85;
    --accent-soft: #3A2723;
    --sage: #9DB8A2;
    --sage-soft: #223025;
    --danger: #F08A78;
    --danger-soft: #3B221E;
    --ok: #9DC4A5;
    --ok-soft: #1F2E23;
    --warn: #EDB36F;
    --warn-soft: #3A2C1C;
    --p3: #5E7A64;
    --p4: #7D7268;
    /* Night: depth comes from light, not shadow. Higher surfaces are lighter (Atlassian / Material elevation),
       with a warm halo and a lit top edge; a dark drop underneath keeps them off the page. */
    --glow-color: 32deg 90% 78%;
    --edge-light: inset 0 1px 0 hsl(var(--glow-color) / .10);
    --elev-1: var(--edge-light), 0 0 0 1px hsl(var(--glow-color) / .10), 0 0 10px hsl(var(--glow-color) / .10),
      0 0 24px -4px hsl(var(--glow-color) / .09), 0 2px 4px rgba(0, 0, 0, .35);
    --elev-2: var(--edge-light), 0 0 0 1px hsl(var(--glow-color) / .15), 0 0 16px hsl(var(--glow-color) / .16),
      0 0 32px -4px hsl(var(--glow-color) / .10), 0 6px 14px rgba(0, 0, 0, .45);
    --elev-3: var(--edge-light), 0 0 0 1px hsl(var(--glow-color) / .18), 0 0 20px hsl(var(--glow-color) / .18),
      0 0 56px -6px hsl(var(--glow-color) / .16), 0 18px 44px rgba(0, 0, 0, .6);
    --surface-float: #322B25;
    --shadow: var(--elev-1);
    --shadow-lg: var(--elev-3);
    --shadow-side: -8px 0 36px rgba(0, 0, 0, .45);
    --shadow-split: -10px 0 30px rgba(0, 0, 0, .3);
    --shadow-bar: 0 -6px 24px rgba(0, 0, 0, .35);
    --card-shadow: var(--elev-1);
    --card-shadow-hover: var(--elev-2);
    --card-shadow-active: var(--elev-2), 0 0 0 1px rgba(232, 160, 140, .35), 0 0 22px rgba(232, 160, 140, .22);
    --scrim: rgba(0, 0, 0, .45);
    --scrim-strong: rgba(0, 0, 0, .55);
    --bar-bg: rgba(27, 23, 20, .9);
    --glow-top: rgba(222, 155, 82, .04);
    --sidebar: #211C18;
    --weave: none;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background-color: var(--bg); color: var(--text);
  background-image: var(--grain), var(--weave), radial-gradient(circle at 50% 0%, var(--glow-top), transparent 65%);
  font: 14px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.boot { padding: 40px; color: var(--muted); font-family: var(--font-serif); font-size: 18px; }

/* ---------- canvas cards (A3): paper, rounded, small soft shadow; lift on hover; accent when active ---------- */
.canvas { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--card-shadow); color: var(--text);
  transition: transform .12s, box-shadow .12s, border-color .12s, color .12s; }
button.canvas { cursor: pointer; font: inherit; }
button.canvas:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--card-shadow-hover); border-color: var(--border-strong); }
button.canvas:focus-visible { outline: 3px solid var(--accent-soft); border-color: var(--accent-bright); }
button.canvas:disabled { opacity: .5; cursor: default; }
.canvas.active, .tb-btn[aria-expanded=true] { border-color: var(--accent); color: var(--accent); box-shadow: var(--card-shadow-active); }

/* ---------- layout: static top bar, menu drawer, work area ---------- */
.frame { display: flex; flex-direction: column; height: 100vh; }
@supports (height: 100dvh) { .frame { height: 100dvh; } }
.topbar { position: relative; z-index: 31; flex: none; height: var(--bar-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 0 18px; border-bottom: 1px solid var(--border); background: var(--bar-bg); backdrop-filter: blur(12px); }
.bar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bar-title { min-width: 0; text-align: center; }
.bar-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.topbar h1 { font-family: var(--font-serif); font-size: 24px; margin: 0; font-weight: 400; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.logo-btn { display: inline-flex; align-items: center; padding: 4px 9px; }
.brand-logo { display: block; width: 92px; aspect-ratio: 480 / 172; background: var(--text);
  -webkit-mask: url("/static/hok-logo.png") left center / contain no-repeat; mask: url("/static/hok-logo.png") left center / contain no-repeat; }
.brand-sub { display: block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent); padding-left: 2px; }
.tb-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.tb-icon { font-size: 16px; line-height: 1; }
.hi-initial { display: none; }
.search-btn { display: none; }
.search { width: 220px; max-width: 26vw; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--card-shadow); }
.dd-wrap { position: relative; }
.dropdown { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 220px; max-width: min(320px, 92vw); padding: 6px;
  display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow-lg); }
.bar-left .dropdown { left: 0; right: auto; }
.dd-item, .dropdown .btn.dd-item { display: flex; align-items: center; width: 100%; justify-content: flex-start; text-align: left; gap: 8px; padding: 8px 10px;
  border: 0; border-radius: 8px; background: none; box-shadow: none; filter: none; color: var(--text); font-weight: 500; font-size: 14px; cursor: pointer; text-decoration: none; }
.dd-item:hover:not(:disabled), .dd-item:focus-visible, .dropdown .btn.dd-item:hover { background: var(--surface-2); outline: none; text-decoration: none; }
.dropdown .btn.danger.dd-item { color: var(--danger); }
.dd-head { padding: 6px 10px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; overflow-wrap: anywhere; }
.dd-foot { padding: 6px 10px 2px; border-top: 1px solid var(--border); margin-top: 4px; }
.shell { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--menu-w) 1fr; }
.main { grid-column: 2; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* the slim row under the bar: filters, tabs and views the page shows (C3) */
.toolbar { flex: none; padding: 8px 28px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.toolbar.empty { display: none; }
.toolbar-inner { gap: 8px; }
.content { flex: 1; overflow: auto; padding: 22px 28px 60px; }
.content-inner { max-width: 1180px; }
body.menu-hidden { --menu-w: 0px; }
body.menu-hidden .sidebar { display: none; }
body.menu-hidden .content-inner:not(.sow-page) { max-width: none; }

/* ---------- menu (A4) ---------- */
.sidebar { grid-column: 1; background: var(--sidebar); border-right: 1px solid var(--border); overflow-y: auto; min-height: 0; padding: 12px 10px 28px; display: flex; flex-direction: column; gap: 8px; }
.menu-close { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.nav { display: flex; flex-direction: column; gap: 5px; }
.nav-children { display: flex; flex-direction: column; gap: 5px; }
.nav-grp > .nav-children { padding-left: 12px; margin-top: 5px; }
.nav-item, .nav-group { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; text-align: left; font-size: 13.5px; }
.nav-item.active { font-weight: 600; }
.nav-item.coming { color: var(--muted); }
.nav-group { font-weight: 600; }
.nav-section { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; cursor: pointer; padding: 14px 6px 4px; text-align: left;
  font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); }
.nav-section:hover { color: var(--accent); }
.nav-section:focus-visible { outline: 3px solid var(--accent-soft); border-radius: 6px; }
.nav-text { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chev { display: inline-block; width: 10px; color: var(--muted); transition: transform .12s; }
[aria-expanded=true] > .chev { transform: rotate(90deg); }
.nav-item .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.nav-item .count { margin-left: auto; background: var(--grad-primary); color: var(--on-accent); border-radius: 10px; padding: 0 7px; font-size: 11.5px; font-weight: 700; }
.nav-item .muted-count { margin-left: auto; color: var(--muted); font-size: 12px; font-family: var(--font-mono); }
.nav-item .soon { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.nav-backdrop { display: none; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; font-weight: 600; font-size: 13px; transition: border-color .15s, box-shadow .15s, background .15s; text-decoration: none; color: var(--text); }
.btn:hover { border-color: var(--accent-bright); background: var(--surface); text-decoration: none; }
.btn.primary { background: var(--grad-primary); color: var(--on-accent); border-color: var(--accent-border); box-shadow: 0 2px 10px var(--accent-shadow); }
.btn.primary:hover { filter: brightness(1.05); box-shadow: 0 4px 14px var(--accent-shadow-strong); }
.btn.danger-solid { background: var(--danger-solid); border-color: var(--danger-solid); color: var(--on-accent); }
.btn.danger-solid:hover { filter: brightness(1.08); background: var(--danger-solid); }
.btn.danger { color: var(--danger); }
.btn.small { padding: 4px 9px; font-size: 13px; }
.btn:disabled { opacity: .55; cursor: default; }
.seg { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.seg button { border: 0; background: none; padding: 5px 12px; cursor: pointer; border-radius: 7px; font-weight: 600; font-size: 13px; color: var(--muted); }
.seg button.on { background: var(--grad-primary); color: var(--on-accent); box-shadow: 0 2px 8px var(--accent-shadow); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; }
.input, select.input, textarea.input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.input:focus, .search:focus, .title-input:focus, .desc:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent-bright); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.error { color: var(--danger); background: var(--danger-soft); padding: 8px 12px; border-radius: 8px; margin: 8px 0; }
.notice { background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); padding: 10px 14px; border-radius: 10px; margin: 10px 0; }
.ok-box { color: var(--ok); background: var(--ok-soft); padding: 8px 12px; border-radius: 8px; margin: 8px 0; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 16px 18px; }
h2 { font-family: var(--font-serif); font-weight: 400; font-size: 21px; margin: 26px 0 10px; letter-spacing: -.1px; }
h3 { font-family: var(--font-serif); font-weight: 500; font-size: 17px; margin: 16px 0 8px; }

/* ---------- task list ---------- */
.group { margin-bottom: 18px; }
.group-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-serif); font-size: 17px; padding: 6px 2px; }
.group-head .n { color: var(--muted); font-weight: 500; font-size: 13px; }
.tasklist { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.task-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border); cursor: pointer; }
.task-row:first-child { border-top: 0; }
.task-row:hover { background: var(--surface-2); }
.task-row.selected { background: var(--accent-soft); }
.task-row.done .t-title { text-decoration: line-through; color: var(--muted); }
.t-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-title .unseen { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: middle; }
.t-meta { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.check { width: 20px; height: 20px; border-radius: 50%; border: 1.6px solid var(--muted); background: none; cursor: pointer; display: grid; place-items: center; padding: 0; color: transparent; font-size: 12px; }
.check:hover { border-color: var(--ok); color: var(--ok); }
.check.on { background: var(--ok); border-color: var(--ok); color: var(--on-accent); }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 11.5px; font-weight: 600; color: var(--muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.chip .sw { width: 8px; height: 8px; border-radius: 2px; }
.chip.rule { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
.pri { font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 5px; color: var(--on-accent); letter-spacing: .3px; }
.pri.P1 { background: var(--p1); } .pri.P2 { background: var(--p2); color: var(--on-light); } .pri.P3 { background: var(--p3); } .pri.P4 { background: var(--p4); }
.due.overdue { color: var(--danger); font-weight: 600; }
.due.today { color: var(--ok); font-weight: 600; }
.avatar { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--on-accent); flex: none; }
.add-row { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--border); }
.add-row input { flex: 1; border: 0; background: none; padding: 4px 2px; }
.add-row input:focus { outline: none; }
.empty { padding: 28px; text-align: center; color: var(--muted); }

/* ---------- board ---------- */
.board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 12px; }
.col { flex: 0 0 280px; background: var(--surface-2); border-radius: var(--radius); padding: 10px; min-height: 120px; }
.col.drop { outline: 2px dashed var(--accent); }
.col-head { font-weight: 650; padding: 2px 4px 8px; display: flex; justify-content: space-between; }
.bcard { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 10px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--shadow); }
.bcard:hover { border-color: var(--accent); }
.bcard.done { opacity: .6; }
.bcard .bt { font-weight: 550; margin-bottom: 8px; }
.bcard .bm { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.col .add-card { width: 100%; border: 0; background: none; color: var(--muted); text-align: left; padding: 6px; cursor: pointer; border-radius: 6px; }
.col .add-card:hover { background: var(--surface); color: var(--text); }

/* ---------- drawer ---------- */
.drawer-backdrop { position: fixed; top: var(--bar-h); left: 0; right: 0; bottom: 0; background: var(--scrim); z-index: 20; }
.drawer { position: fixed; top: var(--bar-h); right: 0; bottom: 0; width: min(620px, 100vw); background: var(--surface); border-left: 1px solid var(--border); z-index: 21; display: flex; flex-direction: column; box-shadow: var(--shadow-side); }
.drawer-head { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px 40px; }
.title-input { width: 100%; font-family: var(--font-serif); font-size: 24px; font-weight: 400; line-height: 1.25; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; background: none; }
.title-input:hover { border-color: var(--border); }
.props { display: grid; grid-template-columns: 120px 1fr; gap: 10px 12px; align-items: center; margin: 14px 0; }
.props .k { color: var(--dim); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
.props select, .props input { padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); max-width: 100%; }
.desc { width: 100%; min-height: 110px; border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--surface); resize: vertical; white-space: pre-wrap; }
.linked { overflow-wrap: anywhere; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin: 14px 0; }
.linked table { width: 100%; }
.subtasks .task-row { grid-template-columns: 28px 1fr auto; padding: 6px 8px; }
.comment { padding: 10px 0; border-top: 1px solid var(--border); }
.comment .who { font-weight: 600; }
.comment .body { white-space: pre-wrap; margin-top: 3px; }
.activity { font-size: 12.5px; color: var(--muted); }
.activity div { padding: 3px 0; }
.badge-rule { display: inline-block; font-size: 12px; background: var(--ok-soft); color: var(--ok); padding: 3px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ok) 22%, transparent); }

/* ---------- tables & tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 6px 0 18px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.tile .lbl { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.tile .val { font-family: var(--font-serif); font-size: 32px; font-weight: 400; line-height: 1.15; margin-top: 8px; font-variant-numeric: lining-nums tabular-nums; }
.tile.hot .val { color: var(--danger); }
table.grid { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
table.grid th, table.grid td { padding: 11px 14px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
table.grid th { background: var(--surface-2); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); border-top: 0; }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid tr.click { cursor: pointer; }
table.grid tr.click:hover td { background: var(--surface-2); }
table.grid tr.low td { background: var(--danger-soft); }
.bucket-overdue { color: var(--danger); font-weight: 600; }
.table-wrap { overflow-x: auto; }

/* ---------- modal & auth ---------- */
.modal-back { position: fixed; inset: 0; background: var(--scrim-strong); backdrop-filter: blur(2px); z-index: 40; display: grid; place-items: center; padding: 16px; }
.modal { width: min(560px, 100%); max-height: 90vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 24px 26px; }
.modal h2 { margin-top: 0; }
.modal-actions { justify-content: flex-end; }
.otp-row { flex-wrap: nowrap; }
.otp-box { font-family: var(--font-mono); letter-spacing: 0.04em; flex: 1; min-width: 0; }
.auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--surface) 80%, transparent) 0%, transparent 70%); }
.auth-mark { font-family: var(--font-serif); font-size: 64px; line-height: 1; letter-spacing: -1px; margin-bottom: 8px; }
.auth-mark span { color: var(--sage); text-shadow: 0 0 24px var(--sage-glow); }
.auth-tag { color: var(--muted); margin-bottom: 26px; text-align: center; }
.auth .card { width: min(440px, 100%); padding: 28px 30px; border-radius: 16px; box-shadow: var(--shadow-lg); }
.auth .card h2 { margin-top: 0; }
.rule-card { margin-bottom: 12px; }
.rule-card .row { margin-top: 8px; }
.rule-card input[type=number] { width: 110px; }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 6px 12px; }
pre.errors { white-space: pre-wrap; background: var(--surface-2); padding: 10px; border-radius: 8px; font-size: 12.5px; max-height: 240px; overflow: auto; }

/* phones and small tablets: the menu opens over the page, under the bar */
@media (max-width: 820px) {
  :root { --menu-w: 0px; }
  .sidebar { position: fixed; top: var(--bar-h); bottom: 0; left: 0; width: min(300px, 84vw); z-index: 30; transform: translateX(-105%); visibility: hidden;
    transition: transform .18s, visibility .18s; box-shadow: var(--shadow-lg); }
  body.menu-open .sidebar { transform: none; visibility: visible; }
  body.menu-open .nav-backdrop { display: block; position: fixed; top: var(--bar-h); left: 0; right: 0; bottom: 0; z-index: 29; background: var(--scrim); }
  .topbar { padding: 0 12px; gap: 8px; }
  .tb-label { display: none; }
  .search { width: 150px; }
  .toolbar { padding: 8px 14px; }
  .toolbar-inner { flex-wrap: wrap; }
  .content { padding: 14px 14px 60px; }
  .t-meta .chip { display: none; }
  .props { grid-template-columns: 96px 1fr; }
}
/* phones: row 1 = logo, Hi initial, search icon, Import, Options; row 2 = the title, centred */
@media (max-width: 520px) {
  :root { --bar-h: 96px; }
  .topbar { grid-template-columns: 1fr auto; grid-template-rows: 54px 1fr; row-gap: 0; padding: 0 12px 4px; }
  .bar-left { grid-column: 1; grid-row: 1; gap: 8px; }
  .bar-right { grid-column: 2; grid-row: 1; gap: 6px; }
  .bar-title { grid-column: 1 / -1; grid-row: 2; }
  .topbar h1 { font-size: 20px; max-width: 100%; }
  .brand-sub, .hi-full { display: none; }
  .brand-logo { width: 70px; }
  .hi-initial { display: inline; }
  .tb-btn { padding: 0 10px; }
  .search-btn { display: inline-flex; }
  .search-wrap { display: none; }
  .topbar.searching .search-wrap { display: block; position: absolute; left: 12px; right: 12px; top: calc(100% + 6px); z-index: 50; }
  .topbar.searching .search { width: 100%; max-width: none; box-shadow: var(--shadow-lg); }
}
.modal.wide { width: min(860px, 100%); }
.chip.warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.timeline { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.timeline .step { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
.timeline .step.done { background: var(--ok-soft); color: var(--ok); font-weight: 600; }
table.grid.lines td { padding: 4px; }
table.grid.lines input { padding: 5px 7px; }

.card { border-radius: var(--radius); }
.empty { font-family: var(--font-serif); font-size: 16px; }
.content-inner > p.muted:first-child { font-size: 14.5px; max-width: 900px; }

/* ---------- task details: right half of the work area on wide screens ---------- */
@media (min-width: 1100px) {
  body.drawer-open .shell { grid-template-columns: var(--menu-w) calc((100vw - var(--menu-w)) / 2); }
  body.drawer-open .drawer-backdrop { display: none; }
  body.drawer-open .drawer { width: calc((100vw - var(--menu-w)) / 2); box-shadow: -1px 0 0 var(--border), var(--shadow-split); }
  body.drawer-open .content { padding: 22px 22px 60px; }
  body.drawer-open .toolbar { padding: 8px 22px; }
  body.drawer-open .t-meta .chip { display: none; }
}

/* ---------- SOWs ---------- */
.chip.danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.chip.accent { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.sow-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.sow-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px 14px; box-shadow: var(--shadow);
  cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.sow-card:hover { border-color: var(--accent-bright); }
.sow-card:focus-visible { outline: 3px solid var(--accent-soft); border-color: var(--accent-bright); }
.sow-card.selectable { padding-left: 50px; }
.sow-card.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent), var(--shadow); }
.sow-grid.dragging .sow-card { transform: scale(.985); }
.sel-dot { position: absolute; left: 14px; top: 16px; width: 24px; height: 24px; border-radius: 50%; border: 1.8px solid var(--border-strong); background: var(--surface);
  color: transparent; font-size: 13px; font-weight: 800; display: grid; place-items: center; cursor: pointer; padding: 0; }
.sow-card.selected .sel-dot { background: var(--grad-primary); border-color: var(--accent); color: var(--on-accent); }
.sow-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.sow-vendor { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sow-card-title { font-family: var(--font-serif); font-size: 19px; line-height: 1.25; margin: 6px 0 6px; }
.sow-card-what { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sow-card-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.sow-card-figs .lbl, .sow-overview .lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); }
.sow-card-figs .val { font-family: var(--font-serif); font-size: 22px; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; }
.sow-card-figs .val.small-val, .sow-overview .val.small-val { font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; line-height: 1.4; margin-top: 3px; }
.val.none { color: var(--dim); font-family: var(--font-sans) !important; font-size: 13px !important; font-weight: 500; margin-top: 3px; }
.sel-hint { margin: 0 0 12px; }
.sow-page { max-width: 900px; }
.sow-overview { padding: 20px 22px; margin-bottom: 16px; }
.sow-over-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sow-over-title { margin: 6px 0 8px; font-size: 26px; }
.sow-what { font-size: 15.5px; line-height: 1.6; margin: 0 0 14px; }
.sow-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 6px 0 14px; }
.sow-figs .fig { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.sow-figs .val { font-family: var(--font-serif); font-size: 28px; line-height: 1.2; margin-top: 4px; font-variant-numeric: lining-nums tabular-nums; }
.sow-deliv { margin: 6px 0 4px; padding-left: 20px; }
.sow-deliv li { margin: 3px 0; }
.sow-note { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); white-space: pre-wrap; }
.sow-note.warn { background: var(--warn-soft); } .sow-note.ok { background: var(--ok-soft); }
.sow-overview .field label .found { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ok); margin-left: 6px; }
.sow-overview .field label .found.none { color: var(--warn); }
.sow-send { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 14px; }
.sow-doc { padding: 18px 26px 26px; margin-bottom: 14px; }
.sow-doc-head { margin-bottom: 8px; }
.sow-doc h4 { font-family: var(--font-serif); font-weight: 500; font-size: 18px; margin: 20px 0 6px; }
.sow-doc p { font-size: 15px; line-height: 1.7; margin: 0 0 12px; max-width: 72ch; }
.sow-doc ul { margin: 0 0 12px; padding-left: 22px; font-size: 15px; line-height: 1.6; }
.sow-doc .doc-row { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.sow-history { margin: 6px 0 20px; }
.appr-list { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow: auto; }

/* fixed action bar (Approve etc.) */
.action-bar { position: fixed; left: var(--menu-w); right: 0; bottom: 0; z-index: 25; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--border); box-shadow: var(--shadow-bar); }
.action-bar-inner { max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.action-bar .spacer { flex: 1; }
.action-bar .bar-count { color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.btn.big { padding: 11px 22px; font-size: 15px; border-radius: 10px; }
body.has-bar .content { padding-bottom: 120px; }
body.has-bar .appr-content { padding-bottom: 130px; }
body.appr-mode .action-bar { left: 0; }
.action-bar .btn { white-space: nowrap; }
@media (max-width: 520px) {
  .action-bar-inner { flex-wrap: wrap; row-gap: 8px; }
  .action-bar .bar-count { order: -1; width: 100%; }
  .action-bar .btn.big { flex: 1; justify-content: center; }
  .sow-grid { grid-template-columns: 1fr; gap: 10px; }
  .sow-figs .val { font-size: 23px; }
  .sow-doc { padding: 14px 16px 20px; }
}

/* approver accounts: one screen, no sidebar */
.appr-shell { min-height: 100vh; }
.appr-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--bar-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.appr-logo { width: 84px; }
.appr-top .spacer, .appr-head .spacer { flex: 1; }
.appr-top-title { font-family: var(--font-serif); font-size: 19px; }
.appr-head { max-width: 900px; margin: 0 auto; padding: 20px 16px 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.appr-head h1 { font-family: var(--font-serif); font-weight: 400; font-size: 28px; margin: 0; }
.appr-content { max-width: 900px; margin: 0 auto; padding: 10px 16px 60px; }
.appr-menu { position: relative; }
.appr-menu summary { list-style: none; cursor: pointer; }
.appr-menu summary::-webkit-details-marker { display: none; }
.appr-menu-pop { position: absolute; right: 0; top: 36px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 200px; z-index: 30; }

/* ---------- phones: no tap-zoom, no jumping when the keyboard opens ---------- */
@media (hover: hover) and (pointer: fine) {
  body { background-attachment: fixed; }  /* desktop only: phones repaint fixed backgrounds while scrolling */
}
@supports (height: 100dvh) {
  .auth, .appr-shell { min-height: 100dvh; }
}
@media (max-width: 760px), (pointer: coarse) {
  /* iPhones zoom into any text box under 16px; 16px stops that */
  input, select, textarea, .input, select.input, textarea.input, .search { font-size: 16px; }
}
@media (max-width: 760px) {
  /* top-aligned, so the card stays put when the keyboard shrinks the screen */
  .auth { justify-content: flex-start; padding-top: 32px; }
  .auth-mark { font-size: 48px; }
  .auth-tag { margin-bottom: 18px; }
  .auth .card { padding: 22px 20px; }
}

/* ---------- Data imports: drop zone ---------- */
.drop-zone { border: 2px dashed var(--border); border-radius: 14px; padding: 34px 20px; text-align: center; cursor: pointer;
  background: color-mix(in srgb, var(--surface-2) 60%, transparent); transition: border-color .15s, background .15s, transform .15s; }
.drop-zone:hover, .drop-zone:focus-visible { border-color: var(--accent-bright); outline: none; }
.drop-zone.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); transform: scale(1.005); }
.drop-zone .muted { max-width: 560px; margin: 4px auto 0; }
.drop-icon { font-size: 30px; line-height: 1; color: var(--accent); margin-bottom: 6px; }
.drop-title { font-family: var(--font-serif); font-size: 21px; }
.drop-results { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.drop-row { padding: 12px 14px; }
.drop-name { font-weight: 600; margin-bottom: 6px; overflow-wrap: anywhere; }
.drop-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.drop-options .btn { flex-direction: column; align-items: flex-start; text-align: left; gap: 1px; }
.drop-opt-detail { font-weight: 400; max-width: 340px; white-space: normal; }
.drop-alt { margin-top: 6px; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 14px; margin-top: 10px; }
.map-field { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.map-field > span { color: var(--muted); }

/* ---------- documents: viewer and lists ---------- */
.modal.viewer { width: min(1100px, 100%); height: min(94vh, 1100px); max-height: 94vh; display: flex; flex-direction: column; overflow: hidden; }
.modal-back:has(.modal.viewer) { padding: 12px; }
.doc-view { flex: 1 1 auto; min-height: 0; border: 1px solid var(--border); border-radius: 10px; overflow: auto; background: var(--pdf-bg);
  padding: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; -webkit-overflow-scrolling: touch; min-height: 0; }
.doc-page { background: var(--pdf-page); box-shadow: 0 2px 10px var(--pdf-shadow); flex: none; max-width: none; margin: 0 auto; }
.doc-loading { color: var(--pdf-text); margin: auto; text-align: center; }
.doc-tools { margin-bottom: 8px; align-items: center; gap: 6px; }
@media (max-width: 760px) {
  .modal-back:has(.modal.viewer) { padding: 0; }
  .modal.viewer { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; padding: 12px; }
  .modal.viewer h2 { font-size: 17px; margin-bottom: 8px; overflow-wrap: anywhere; }
  .doc-view { padding: 6px; }
}
.doc-img { max-width: 100%; max-height: 100%; display: block; margin: auto; }
.doc-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.doc-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.doc-name { flex: 1 1 200px; overflow-wrap: anywhere; font-weight: 600; }
.doc-name .muted { font-weight: 400; }
.drop-zone.compact { padding: 16px 14px; }
.drop-zone.compact .drop-title { font-size: 16px; }
.inv-window { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 16px; flex: 1 1 auto; min-height: 0; }
.inv-details { overflow-y: auto; min-height: 0; }
.inv-details .kv { grid-template-columns: auto 1fr; }
.inv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.inv-doc { display: flex; flex-direction: column; min-height: 0; }
@media (max-width: 760px) {
  .inv-window { display: block; overflow-y: auto; }
  .inv-details { overflow: visible; margin-bottom: 12px; }
  .inv-details .kv { gap: 2px 10px; font-size: 13px; }
  .inv-doc .doc-view { height: 72dvh; flex: none; }
}

/* ---------- document menu (right-click or ⋯) ---------- */
.ctx-menu { position: fixed; z-index: 80; min-width: 230px; max-width: 300px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; }
.ctx-head { padding: 6px 10px 8px; font-weight: 600; overflow-wrap: anywhere; }
.ctx-item { text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--text); }
.ctx-item:hover:not([disabled]), .ctx-item:focus-visible { background: var(--surface-2); outline: none; }
.ctx-item[disabled] { opacity: .45; cursor: not-allowed; }
.ctx-item.danger { color: var(--danger); }
.ctx-sep { height: 1px; background: var(--border); margin: 4px 6px; }
.ctx-label { padding: 6px 10px 2px; text-transform: uppercase; letter-spacing: .6px; font-size: 10.5px; }
.icon-more { font-size: 16px; line-height: 1; padding: 4px 10px; }
.sow-card { position: relative; }
.card-more { position: absolute; right: 10px; bottom: 10px; opacity: .7; }
.card-more:hover { opacity: 1; }
@media (max-width: 760px) { .ctx-item { padding: 12px 12px; font-size: 15px; } }
.ok-box { position: relative; }
.drop-more { float: right; margin: -3px -4px 0 8px; }

/* ---------- floating boxes (A14): notes bottom-right; confirm / ask boxes on top of everything ---------- */
.notify-stack { position: fixed; right: 18px; bottom: 18px; z-index: 85; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: min(420px, calc(100vw - 36px)); }
body.has-bar .notify-stack { bottom: 96px; }
.notify { display: flex; align-items: flex-start; gap: 10px; padding: 11px 10px 11px 16px; box-shadow: var(--shadow-lg); font-weight: 600; font-size: 13.5px; transition: opacity .4s, transform .4s; }
.notify.error { border-color: var(--danger); color: var(--danger); }
.notify.fade { opacity: 0; transform: translateY(6px); }
.notify-text { overflow-wrap: anywhere; }
.notify-x { border: 0; background: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--muted); padding: 0 4px; }
.box-back { position: fixed; inset: 0; z-index: 90; background: var(--scrim); display: grid; place-items: center; padding: 16px; }
.box { width: min(440px, 100%); padding: 20px 22px 16px; border-radius: 14px; box-shadow: var(--shadow-lg); }
.box-text { font-size: 15px; line-height: 1.5; margin-bottom: 14px; overflow-wrap: anywhere; }
.box-field { margin-bottom: 14px; }
.box-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* ---------- All projects, coming pages ---------- */
.project-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--border); color: var(--text); }
.project-row:first-child { border-top: 0; }
.project-row:hover { background: var(--surface-2); text-decoration: none; }
.project-row .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pr-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coming-card { max-width: 640px; }
.coming-card h2 { margin-top: 0; }

/* ---------- Import box (A5): a floating paper box under the Import button ---------- */
.import-box { position: fixed; top: calc(var(--bar-h) + 8px); right: 18px; z-index: 35; width: min(600px, calc(100vw - 36px));
  max-height: calc(100vh - var(--bar-h) - 24px); overflow: auto; padding: 14px 18px 16px; border-radius: 14px; box-shadow: var(--shadow-lg); }
@supports (height: 100dvh) { .import-box { max-height: calc(100dvh - var(--bar-h) - 24px); } }
.import-box[hidden] { display: none; }
.import-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.import-head h2 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 20px; }
.import-reads { margin: 4px 0 10px; }
.import-box > .card { border: 0; box-shadow: none; background: none; padding: 0; }
.import-box .drop-zone { padding: 24px 16px; }
.import-past { margin-top: 12px; }
.drop-skip { margin-top: 8px; }
.needs-approval { margin-left: 6px; font-style: italic; font-weight: 600; }
.held-box { margin: 8px 0; }
@media (max-width: 520px) { .import-box { right: 8px; left: 8px; width: auto; } }

/* ---------- held imports: Audit trail > Waiting for approval, and the task panel ---------- */
.held-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.held-name { overflow-wrap: anywhere; }
.held-actions { margin-top: 8px; gap: 8px; flex-wrap: wrap; align-items: center; }
.held-out:not(:empty) { margin-top: 10px; }

/* ---------- invoices received: split view (A9) and the shared details strip ---------- */
:root { --inv-list-w: 380px; }
.doc-view { scrollbar-gutter: stable; }  /* the page width doesn't jump when the scrollbar appears, so no extra redraw */
.inv-chips { margin-top: 10px; flex-wrap: wrap; }
.inv-nopdf-hint { margin-top: 6px; opacity: .8; }
.inv-doc-bar { gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.inv-doc-bar .doc-tools { margin-bottom: 0; }
.inv-doc-bar .spacer, .inv-row-sub .spacer { flex: 1; }
.inv-older { margin: 0 0 8px; }
/* the compact list (both widths) */
.inv-list { display: flex; flex-direction: column; gap: 6px; }
.inv-row { padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--card-shadow); cursor: pointer; }
.inv-row:hover { border-color: var(--border-strong); }
.inv-row:focus-visible { outline: 3px solid var(--accent-soft); }
.inv-row.selected { border-color: var(--accent); box-shadow: var(--card-shadow-active); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.inv-row-main { display: flex; gap: 10px; align-items: baseline; }
.inv-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-vendor { font-weight: 600; }
.inv-amt { flex: none; font-weight: 600; }
.inv-row-sub { display: flex; gap: 8px; align-items: center; margin-top: 3px; min-height: 26px; }
.inv-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--accent); }
.inv-dot.reviewed { background: var(--ok); }
.inv-dot.dismissed { background: var(--dim); }
.inv-flags { display: inline-flex; gap: 4px; }
.inv-flag { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; font-size: 11px; font-weight: 700; line-height: 1;
  background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.inv-flag.rule { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.inv-row-sub .icon-more { padding: 0 8px; min-height: 24px; }
.inv-add-card { margin-bottom: 14px; }
/* split: list left, viewer right; the page fills the work area and lifts the width cap */
body.inv-split-on .content { overflow: hidden; display: flex; flex-direction: column; padding: 16px 20px; }
.content-inner.inv-split { max-width: none; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.inv-split > p.muted:first-child { margin: 0 0 12px; font-size: 13.5px; }
.inv-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--inv-list-w) minmax(0, 1fr); gap: 16px; }
.inv-split .inv-list { overflow-y: auto; min-height: 0; padding: 2px 4px 12px 2px; }
.inv-viewer { min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.inv-viewer.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.inv-uploads { flex: none; max-height: 32%; overflow-y: auto; }
.inv-add-row { gap: 10px; align-items: center; flex-wrap: wrap; }
.inv-uploads .drop-results { margin-top: 8px; }
.inv-uploads .drop-results:empty { display: none; }
.inv-sel { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.inv-sel .inv-details { flex: none; max-height: 38%; overflow-y: auto; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.inv-sel .inv-details .kv { grid-template-columns: repeat(3, auto minmax(0, 1fr)); gap: 3px 12px; }
.inv-sel .inv-actions { margin-top: 10px; }
.inv-sel .inv-doc { flex: 1; min-height: 0; }
.inv-empty { margin: auto; text-align: center; }
/* the review task panel takes the viewer's place; closing it brings the viewer back */
body.inv-split-on.drawer-open .shell { grid-template-columns: var(--menu-w) 1fr; }
body.inv-split-on.drawer-open .drawer-backdrop { display: none; }
body.inv-split-on.drawer-open .drawer { left: calc(var(--menu-w) + 20px + var(--inv-list-w) + 8px); width: auto; box-shadow: -1px 0 0 var(--border), var(--shadow-split); }
body.inv-split-on.drawer-open .inv-viewer { visibility: hidden; }
@media (max-width: 1200px) { .inv-sel .inv-details .kv { grid-template-columns: repeat(2, auto minmax(0, 1fr)); } }

/* ---------- Floating layers: lighter paper, highest elevation, a short rise as they appear ---------- */
.dropdown, .import-box, .box, .notify, .modal, .ctx-menu { background: var(--surface-float); box-shadow: var(--elev-3); }
.canvas { transform: translateY(0); }
.dropdown, .import-box:not([hidden]), .box, .notify, .ctx-menu { animation: float-in .16s ease-out; }
@keyframes float-in { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dropdown, .import-box, .box, .notify, .ctx-menu { animation: none; } }

/* Reports (0.2.39): the choices above a report, its totals row and its pager */
.report-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 16px; margin-bottom: 14px; }
.report-field { flex: 1 1 180px; max-width: 320px; }
.report-field .report-ccy { max-width: 90px; text-transform: uppercase; }
.report-range { display: flex; align-items: center; gap: 8px; }
.report-go { margin-bottom: 14px; }
table.grid.report-table tfoot td { font-weight: 700; background: var(--surface-2); }
.report-pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 12px 0; }
.report-area:first-of-type { margin-top: 10px; }
@media (max-width: 640px) { .report-field { max-width: none; flex-basis: 100%; } .report-range .input { min-width: 0; } }
/* Report builder 2 (OpunX): Build a report (design, actions, output bands), My dashboard's tiles, Assistant habits */
.rb-hub { gap: 8px; margin: 0 0 14px; }
.rb-design { margin-bottom: 14px; }
.rb-spots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
.rb-spot { border: 0; border-top: 1px solid var(--border); margin: 0; padding: 10px 0; min-width: 0; }
.rb-spot legend { padding: 0; margin-bottom: 6px; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.rb-spot label { display: block; margin: 4px 0; }
.rb-spot .input { width: 100%; min-width: 0; }
.rb-spot.rb-over { outline: 2px dashed var(--accent); outline-offset: 2px; }
.rb-check { display: flex !important; align-items: center; gap: 6px; }
.rb-chip { cursor: grab; }
.rb-row { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.rb-row .input { flex: 1 1 0; }
.rb-band-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-start; margin-bottom: 14px; }
.rb-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rb-save-group { flex-direction: column; align-items: stretch; min-width: 260px; }
.rb-needs { border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; margin: 0; }
.rb-needs legend { font-size: .75rem; color: var(--muted); }
.rb-day { max-width: 90px; }
.rb-charts { margin: 0 0 14px; }
.rb-figure { margin: 0 0 10px; }
.rb-figure figcaption { font-size: .85rem; color: var(--muted); margin-bottom: 4px; }
.rb-chart { display: block; width: 100%; height: auto; }
.rb-chart .rb-bar, .rb-chart .rb-dot { fill: var(--accent); }
.rb-chart .rb-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.rb-chart .rb-axis { stroke: var(--border-strong); stroke-width: 1; }
.rb-chart .rb-label, .rb-chart .rb-tick { fill: var(--muted); font-size: 11px; }
.rb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.rb-tile { min-width: 0; }
.rb-tile h2 { margin: 0 0 6px; font-size: 1rem; }
.rb-habits td { vertical-align: top; }
/* SKUs (Sean 2026-10-06) */
.sku-bar { margin-bottom: 12px; }
.sku-search { width: 280px; max-width: 100%; }
.sku-unadded { margin-left: 8px; vertical-align: middle; }
table.grid.sku-table tr.click:focus-visible td { background: var(--surface-2); }
table.grid.sku-table tr.click:focus-visible { outline: 3px solid var(--accent-soft); }
.sku-head { margin-top: 18px; }
table.grid tfoot tr.sku-total td { font-weight: 700; background: var(--surface-2); }
.sku-actions { justify-content: flex-end; margin-top: 16px; }
@media (max-width: 640px) { .sku-search { width: 100%; } }
/* BOMs (OpunX 0.2.41, Sean's sketch): tree band, component columns, item card, lines */
.bom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.bom-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; text-align: center; color: var(--text); }
.bom-tile:hover { border-color: var(--accent-bright); text-decoration: none; }
.bom-pic { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 8px; object-fit: contain; background: var(--surface-2); flex: none; }
.bom-pic.small { width: 36px; height: 36px; border-radius: 6px; }
.bom-pic.big { width: 112px; height: 112px; }
.bom-ph { font-family: var(--font-mono); font-size: 13px; color: var(--muted); border: 1px dashed var(--border-strong); }
.bom-band { overflow-x: auto; overflow-y: hidden; max-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 0; margin-bottom: 16px; }
.bom-tree { display: block; margin: 0 auto; }
.bom-tree text { text-anchor: middle; font-size: 12px; fill: var(--text); }
.bom-tree .bom-ph-text { font-family: var(--font-mono); fill: var(--muted); font-size: 14px; }
.bom-links line { stroke: var(--border-strong); stroke-width: 2; }
.bom-node { cursor: pointer; }
.bom-node .bom-frame { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.bom-node .bom-ph-box { fill: var(--surface-2); }
.bom-node:hover .bom-frame, .bom-node:focus .bom-frame { stroke: var(--accent-bright); }
.bom-node.on .bom-frame { stroke: var(--accent); stroke-width: 3; }
.bom-node.root .bom-label { font-weight: 700; }
.bom-node:focus { outline: none; }
.bom-head { margin-top: 18px; }
.bom-cols { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.bom-col { flex: 0 0 168px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.bom-col.on { border-color: var(--accent); }
.bom-col-head { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font-weight: 700; color: var(--text); }
.bom-field { display: flex; flex-direction: column; gap: 2px; }
.bom-field > span { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; }
.bom-field.inline { flex-direction: row; align-items: center; gap: 8px; }
.bom-add, .bom-save { align-items: center; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.bom-add-input { width: 280px; max-width: 100%; }
.bom-card { display: flex; gap: 16px; align-items: flex-start; margin: 14px 0; }
.bom-card h3 { margin: 0 0 4px; }
.bom-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 8px 0; }
.bom-facts dt { color: var(--muted); font-size: 12.5px; }
.bom-facts dd { margin: 0; }
.bom-qty { max-width: 140px; }
table.grid.bom-lines tr.bom-short td { background: var(--danger-soft); }
.bom-draft { margin-bottom: 10px; }
.sku-cell { display: flex; align-items: center; gap: 10px; }
.sku-pic { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; object-fit: contain; background: var(--surface-2); flex: none; font-size: 11px; }
.sku-pic.big { width: 120px; height: 120px; float: right; margin: 0 0 8px 12px; }
.sku-pic-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sku-pic-tile { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sku-pic-tile .sku-pic.big { float: none; margin: 0; }
.sku-role { width: auto; }
.sku-short { margin-left: 8px; color: var(--muted); font-size: 12.5px; }
@media (max-width: 640px) { .bom-card { flex-direction: column; } .bom-add-input { width: 100%; } }
@media print { .bom-band { overflow: visible; border: 0; } }
body.bom-print { padding: 24px; background: #fff; color: #000; }
body.bom-print .bom-print-tree ul { margin: 2px 0 2px 18px; }
.bom-filter { align-items: center; gap: 10px; flex-wrap: wrap; }

/* Intelligence and Accounts setup (OpunX 0.2.41.2): Opun60's own screens for OpunX's assistant setup and Finance -> Setup */
.intel-card, .acs-step { max-width: 980px; }
.intel-grid, .acs-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.intel-key-row { flex-wrap: nowrap; }
.intel-key-row .input { flex: 1; min-width: 0; font-family: var(--font-mono); }
.intel-cap { max-width: 160px; }
.intel-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; }
.field .intel-person { display: flex; align-items: center; gap: 8px; font-size: 13.5px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); cursor: pointer; }
.acs-head { margin: 18px 0 10px; font-size: 14px; }
.acs-code { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }
.acs-chart .chip + .chip { margin-left: 4px; }
.acs-lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.acs-line { flex-wrap: nowrap; }
.acs-line .input { flex: 1; min-width: 0; }
.acs-line select.input { flex: 2; }
@media (max-width: 640px) { .acs-line { flex-wrap: wrap; } .acs-line .input { flex-basis: 100%; } }

/* Documents to review (OpunX 0.2.44 o3): page image left with the field's box, fields right, flagged first */
.content-inner.rdr-page-wide { max-width: none; }
.rdr-queue .rdr-row { cursor: pointer; }
.rdr-queue .rdr-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rdr-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 16px; align-items: start; }
.rdr-left { position: sticky; top: 0; }
.rdr-pager { align-items: center; gap: 10px; margin-bottom: 8px; }
.rdr-frame { position: relative; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.rdr-img { display: block; width: 100%; height: auto; }
.rdr-box { position: absolute; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent-bright) 18%, transparent); border-radius: 3px; box-shadow: 0 0 0 3px var(--accent-shadow); pointer-events: none; }
.rdr-help { margin: 0 0 10px; }
.rdr-checks { border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); background: var(--danger-soft); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 12px; font-size: 13px; }
.rdr-checks.ok { border-color: var(--border); background: var(--surface); }
.rdr-checks-head { font-weight: 600; margin-bottom: 4px; }
.rdr-check + .rdr-check { margin-top: 4px; }
.rdr-fields { display: flex; flex-direction: column; gap: 8px; }
.rdr-field { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; }
.rdr-field.flagged { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-soft); }
.rdr-field.done { border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.rdr-field.current { box-shadow: 0 0 0 2px var(--accent-shadow-strong); }
.rdr-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.rdr-field-head label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.rdr-field .input { width: 100%; font-family: var(--font-mono); }
.rdr-reason { color: var(--warn); }
.rdr-actions { margin-top: 12px; }
@media (max-width: 900px) { .rdr-split { grid-template-columns: 1fr; } .rdr-left { position: static; } }
/* Filters on Tasks and All projects (Sean 2026-10-13): a Filters button with how many are on, Clear, and the fields */
.flt-bar { margin: 0 0 14px; }
.flt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.flt-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-size: 11px; }
.flt-count[hidden], .flt-panel[hidden] { display: none; }
.flt-shown { margin-left: auto; }
.flt-panel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 14px; margin-top: 10px; padding: 12px 14px 0;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--card-shadow); }
.flt-field { flex: 1 1 170px; max-width: 240px; margin-bottom: 12px; }
.flt-field.flt-wide { flex-basis: 280px; max-width: 340px; }
.flt-range { display: flex; align-items: center; gap: 6px; }
.flt-range .input { min-width: 0; }
.pr-lead { white-space: nowrap; }
@media (max-width: 640px) {
  .flt-field, .flt-field.flt-wide { max-width: none; flex-basis: 100%; }
  .flt-shown { margin-left: 0; flex-basis: 100%; }
}

/* multiproj: the task panel's one "Projects" field, a dropdown of ticks */
.drawer details.projects-pick summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.drawer details.projects-pick .pick-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.drawer details.projects-pick label.pick { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.drawer details.projects-pick input[type=checkbox] { padding: 0; }
.drawer details.projects-pick .btn { align-self: flex-start; margin-top: 4px; }

/* OpunX BUILD-finance-ops-full A3: the chart of accounts' tree, one step per level */
.coa-depth-1 { padding-left: 1.8em; }
.coa-depth-2 { padding-left: 3.0em; }
.coa-depth-3 { padding-left: 4.2em; }
.coa-depth-4 { padding-left: 5.4em; }
.coa-depth-5 { padding-left: 6.6em; }
.coa-depth-6 { padding-left: 7.8em; }
/* OpunX BUILD-finance-ops-full stage 4: the item and detail pages' labels, the count's boxes */
.s4-key { display: inline-block; min-width: 140px; }
.s4-count-box { width: 90px; }

/* OpunX 0.4.2: Something wrong?, Where you're signed in, Reported problems */
.report-text { width: 100%; min-height: 110px; resize: vertical; }
.account-card { margin-bottom: 16px; }
.account-actions { justify-content: flex-end; margin-top: 12px; }
.more-row { justify-content: center; margin-top: 10px; }
.tickets { display: flex; flex-direction: column; gap: 12px; }
.ticket-head { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ticket-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; }
.ticket-error { color: var(--danger); overflow-wrap: anywhere; margin: 0 0 6px; }
.ticket-agent { overflow-wrap: anywhere; margin: 0; }

/* OpunX 0.4.1: the calendar of due dates, templates */
.cal-bar { align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-month { margin: 0 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-head { font-size: 12px; color: var(--muted); text-align: center; padding: 4px 0; }
.cal-day { min-height: 92px; border: 1px solid var(--border); border-radius: 6px; padding: 4px; overflow: hidden; }
.cal-off { border: none; }
.cal-today { border-color: var(--accent); }
.cal-num { font-size: 12px; color: var(--muted); }
.cal-task { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.cal-done { text-decoration: line-through; opacity: .6; }
.tpl-row { gap: 8px; margin-top: 8px; }
.tpl-item { gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.tpl-name { flex: 1; }
@media (max-width: 640px) { .cal-day { min-height: 64px; } .cal-task { font-size: 11px; } }

/* ---------- Scenarios (app.js viewScenarios; BUILD-0.4-scenarios-screens Layout: Mission Control with Studio
   Console's strips). Look tokens only, so Warm, Neon and Green, light and dark, need nothing of their own. ---------- */
.sc { padding-bottom: 72px; }
.sc-bar, .sc-acts, .sc-fields, .sc-ctl, .sc-field, .sc-check, .sc-marks, .sc-transport-row, .sc-axis-head, .sc-panel-head,
.sc-meter-row { gap: 6px; align-items: center; flex-wrap: wrap; }
.sc-chip { display: inline-block; padding: 1px 6px; margin: 1px 2px; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 12px; color: var(--muted); }
.sc-num { width: 7em; }
.sc-fields .input, .sc-panel-head .input, .sc-ctl .input, .sc-transport .input { width: auto; max-width: 100%; }
.sc-log td { vertical-align: top; }
.sc-acts { min-width: 300px; }
.sc-json { width: 16em; font-family: var(--font-mono); font-size: 12px; }
.sc-bad { outline: 2px solid var(--danger); }
.sc-axis-svg { width: 100%; height: auto; display: block; cursor: crosshair; }
.sc-t { font-size: 11px; fill: var(--muted); }
.sc-lane-line { stroke: var(--border); stroke-width: 2; }
.sc-lane-ran { stroke: var(--accent); stroke-width: 3; }
.sc-lane-base .sc-lane-ran { stroke: var(--text); }
.sc-run-mark { fill: var(--accent); }
.sc-fork { cursor: pointer; }
.sc-fork-line { stroke: var(--warn); fill: none; stroke-width: 1.5; }
.sc-inject-mark { fill: var(--danger); }
.sc-sel { fill: var(--accent-soft); }
.sc-zero { stroke: var(--border); stroke-width: 1; }
.sc-trace { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.sc-strips { display: flex; gap: 8px; overflow-x: auto; margin: 10px 0; padding-bottom: 4px; }
.sc-strip { flex: 0 0 210px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.sc-strip.sc-base { border-color: var(--text); }
.sc-strip.sc-focus { border-color: var(--accent); }
.sc-strip-head { display: flex; gap: 6px; align-items: center; justify-content: space-between; }
.sc-fader { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; border-top: 1px solid var(--border); padding-top: 3px; }
.sc-fader.sc-changed { border-left: 3px solid var(--accent); padding-left: 4px; }
.sc-fader-name { background: none; border: 0; padding: 0; color: var(--text); font-weight: 600; cursor: pointer; text-decoration: underline dotted; }
.sc-meter { width: 120px; height: 14px; }
.sc-meter-bar.sc-better { fill: var(--ok); }
.sc-meter-bar.sc-worse { fill: var(--danger); }
.sc-meter-bar.sc-same, .sc-meter-bar.sc-none { fill: var(--muted); }
.sc-spark { width: 120px; height: 30px; display: block; }
.sc-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.sc-panel { overflow-x: auto; }
.sc-kpi { background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; text-align: left; }
.sc-row-on td { background: var(--accent-soft); }
.sc-basecol { font-weight: 600; }
.sc-verdict { font-size: 12px; }
.sc-verdict.sc-better { color: var(--ok); }
.sc-verdict.sc-worse { color: var(--danger); }
.sc-verdict.sc-same, .sc-verdict.sc-none { color: var(--muted); }
.sc-bridge, .sc-tornado { width: 100%; height: auto; }
.sc-barfill { fill: var(--accent); }
.sc-rest { fill: var(--muted); }
.sc-multiples { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-multiple { border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; }
.sc-grid-figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 8px 0; }
.sc-fig { display: grid; gap: 2px; }
.sc-ai { display: grid; gap: 8px; margin-top: 10px; }
.sc-insight p { max-width: 70ch; }
.sc-transport { position: sticky; bottom: 0; z-index: 5; background: var(--surface-2); border-top: 1px solid var(--border);
  padding: 8px 12px; margin-top: 12px; }
.sc-transport input[type=range] { width: 140px; }
.sc-speed-word { min-width: 6em; font-weight: 600; text-transform: capitalize; }
.sc-run-said { font-size: 13px; }
.sc-report-link { margin-top: 10px; }
.sc-differ { margin-top: 10px; }
.sc-handled { margin-top: 6px; font-size: 13px; }
.sc-meters { display: grid; gap: 2px; }
.sc-mini { min-height: 4px; }
.sc-report-section summary h2 { display: inline; }
.sc-finding { font-family: var(--font-serif); font-size: 17px; max-width: 70ch; }
.sc-report-note { margin: 6px 0; }
.sc-report-controls { gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.sc-rep td, .sc-rep th { white-space: nowrap; }
@media print {
  .sidebar, .topbar, .sc-transport, .sc-report-controls, .report-pager, .modal-back { display: none !important; }
  .sc-report-section { break-inside: avoid; border: 0; box-shadow: none; }
  .sc-report-section > summary { list-style: none; }
}
@media (max-width: 700px) {
  .sc-strip { flex-basis: 180px; }
  .sc-transport-row { gap: 4px; }
}

/* The terms card (app.js termsCard): the top of Home for a company administrator until the terms in force are accepted */
.terms-card { margin-bottom: 12px; border-left: 3px solid var(--accent); }