/* IMI Design app
   Layout: navy sidebar app shell on desktop; top bar + bottom tab bar on phones. Documents print on A4.
   Brand: IMI Design navy and red, Manrope throughout (tabular figures for numbers), matching imidesign.in. */
:root {
  --bg: #f3f5f8; --surface: #ffffff; --sunk: #eef1f5; --side: #0e1a2b; --ink: #0e1a2b; --muted: #5a6472;
  --line: #e2e6eb; --line-strong: #c3cad4;
  --accent: #1d4f91; --accent-soft: #e4ecf7; --on-accent: #ffffff;
  --primary: #d71920; --primary-hover: #b4141a; --on-primary: #ffffff; --brand-red: #d71920;
  --good: #1f7a45; --good-soft: #dcefe3; --warn: #9a6205; --warn-soft: #f6ead0; --bad: #b42318; --bad-soft: #fbe3e1;
  --s1: #1d4f91; --s2: #2f9a7c;
  --p1: #1d4f91; --p2: #1d746c; --p3: #ad5d27; --p4: #6a4c93; --p5: #56731b; --p6: #d71920;
  --font-ui: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 8px; --side-w: 240px; --bottom-h: 62px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0b1422; --surface: #111d2e; --sunk: #17253a; --side: #070f1a; --ink: #e8edf3; --muted: #9aa8b9;
  --line: #22324a; --line-strong: #3a4d68;
  --accent: #8fb4e8; --accent-soft: #1b2c45; --on-accent: #0b1422;
  --primary: #e5484d; --primary-hover: #f0595e; --on-primary: #ffffff; --brand-red: #ef3b42;
  --good: #72c791; --good-soft: #17301f; --warn: #e6ad50; --warn-soft: #3a2d13; --bad: #f0857a; --bad-soft: #3e201c;
  --s1: #8fb4e8; --s2: #6fcfac;
  --p1: #8fb4e8; --p2: #5cc2b5; --p3: #e59c66; --p4: #b9a2e0; --p5: #a8c866; --p6: #f0757a;
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0b1422; --surface: #111d2e; --sunk: #17253a; --side: #070f1a; --ink: #e8edf3; --muted: #9aa8b9;
  --line: #22324a; --line-strong: #3a4d68;
  --accent: #8fb4e8; --accent-soft: #1b2c45; --on-accent: #0b1422;
  --primary: #e5484d; --primary-hover: #f0595e; --on-primary: #ffffff; --brand-red: #ef3b42;
  --good: #72c791; --good-soft: #17301f; --warn: #e6ad50; --warn-soft: #3a2d13; --bad: #f0857a; --bad-soft: #3e201c;
  --s1: #8fb4e8; --s2: #6fcfac;
  --p1: #8fb4e8; --p2: #5cc2b5; --p3: #e59c66; --p4: #b9a2e0; --p5: #a8c866; --p6: #f0757a;
  color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
html.modal-open { overflow: hidden; }
body { color: var(--ink); font-family: var(--font-ui); font-size: 14.5px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
p { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono, .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.num { text-align: right; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.muted, small { color: var(--muted); }
.small { font-size: 12.5px; }
.neg { color: var(--bad) !important; }
.prewrap { white-space: pre-wrap; }
.label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
code, .sel { font-family: var(--font-num); background: var(--sunk); padding: 1px 6px; border-radius: 4px; user-select: all; word-break: break-all; }

/* ---------- shell ---------- */
.shell { min-height: 100vh; }
.side { position: fixed; inset: 0 auto 0 0; width: var(--side-w); background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: calc(16px + env(safe-area-inset-top, 0px)) 12px 14px max(12px, env(safe-area-inset-left, 0px)); gap: 14px; z-index: 30; }
.main-col { margin-left: var(--side-w); min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); min-width: 0; padding: 4px 6px; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 34px; width: auto; max-width: 120px; object-fit: contain; }
.brand-mark { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--ink); color: var(--bg); font-weight: 800; font-size: 17px; }
.wordmark { font-weight: 800; letter-spacing: .01em; white-space: nowrap; color: inherit; font-size: 19px; line-height: 1; }
.wordmark b { color: var(--brand-red); font-weight: 800; }
.brand-t { display: flex; flex-direction: column; min-width: 0; }
.brand-t b, .brand-name { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-t small { font-size: 11px; }
.side-nav { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; flex: 1; }
.nav-a { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 6px; color: #a9b6c6; font-weight: 600; }
.nav-a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.nav-a.on { background: rgba(255,255,255,.09); color: #fff; box-shadow: inset 3px 0 0 #ef3b42; }
.ic { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.userbox { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 8px 0; border-top: 1px solid var(--line); }
.userbox span { display: flex; flex-direction: column; min-width: 0; }
.userbox b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userbox small { font-size: 11.5px; }
.topbar { display: none; }
.content { max-width: 1240px; margin: 0 auto; padding-block: 24px 64px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 18px; }
.bottom-nav { display: none; }
.demobar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-block: 8px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); background: var(--warn-soft); border-bottom: 1px solid var(--line); font-size: 13px; }
.demobar label { gap: 6px; }
.demobar select { padding: 4px 6px; font-size: 13px; }
.boot { min-height: 100vh; display: grid; place-content: center; text-align: center; gap: 6px; }

@media (max-width: 900px) {
  .side { display: none; }
  .main-col { margin-left: 0; }
  .topbar { display: flex; position: sticky; top: 0; z-index: 25; background: var(--bg); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); height: calc(54px + env(safe-area-inset-top, 0px)); align-items: center; }
  .topbar .brand-logo { height: 28px; }
  .topbar .brand-mark { width: 28px; height: 28px; font-size: 14px; }
  .content { padding-block: 16px calc(var(--bottom-h) + 32px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); gap: 14px; }
  .demobar { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset: auto 0 0 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  .bottom-nav a, .bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--bottom-h); border: 0; background: none; color: var(--muted); font-size: 11px; font-weight: 600; cursor: pointer; }
  .bottom-nav a:hover { text-decoration: none; }
  .bottom-nav .on { color: var(--accent); }
  .bottom-nav .ic { width: 22px; height: 22px; }
}
.more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.more-a { display: flex; align-items: center; gap: 10px; padding: 14px 12px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); font-weight: 600; }
.more-a.on { border-color: var(--accent); color: var(--accent); }
.more-a:hover { text-decoration: none; background: var(--sunk); }

/* ---------- auth ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px max(16px, env(safe-area-inset-left, 0px)); }
.auth-card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.auth-card h1 { font-size: 26px; font-weight: 800; }
.auth-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.link { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 600; cursor: pointer; }
.link:hover { text-decoration: underline; }
.link.sm { font-size: 12px; }
.ok-msg { color: var(--good); font-weight: 600; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--surface); padding: 8px 14px; min-height: 38px; border-radius: var(--r); cursor: pointer; font-weight: 600; white-space: nowrap; color: var(--ink); text-decoration: none; line-height: 1.2; }
.btn:hover { border-color: var(--ink); text-decoration: none; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--sunk); }
.btn.small { padding: 5px 10px; min-height: 32px; font-size: 13px; }
.btn.danger { color: var(--bad); border-color: var(--bad); }
.btn.ghost.danger { border-color: transparent; }
.btn.armed { background: var(--bad) !important; color: var(--surface) !important; border-color: var(--bad) !important; }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.icon-btn { border: 0; background: none; width: 34px; height: 34px; flex: none; border-radius: var(--r); cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; display: inline-grid; place-items: center; }
.icon-btn:hover { background: var(--sunk); color: var(--ink); }
.icon-btn.sm { width: 26px; height: 26px; font-size: 14px; }
.icon-btn:disabled { opacity: .3; cursor: default; }
.input { width: 100%; padding: 9px 10px; min-height: 38px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); }
textarea.input { resize: vertical; min-height: 64px; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input[readonly] { background: var(--sunk); }
select.input { padding-right: 28px; }
.input.search { width: min(260px, 100%); }
.input-group { display: flex; gap: 6px; }
.input-group .input:last-child { width: auto; flex: none; }
.w-num { width: 84px !important; text-align: right; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field.end { justify-content: flex-end; }
.field-err { color: var(--bad); font-size: 13px; font-weight: 600; }
.hint { color: var(--muted); font-size: 12.5px; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 32px; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.stack-checks { gap: 4px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.row.wrap { justify-content: flex-end; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.seg::-webkit-scrollbar { display: none; }
.seg button { border: 0; background: none; padding: 7px 12px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 13px; white-space: nowrap; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.toolbar > .input:not(.search) { width: auto; }

/* ---------- page parts ---------- */
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.page-head h1, .hello h1 { font-size: clamp(24px, 3.4vw, 30px); font-weight: 800; line-height: 1.1; }
.page-head p { margin-top: 4px; max-width: 70ch; }
.ph-text { min-width: 0; }
.back { font-weight: 600; font-size: 13px; display: inline-block; margin-bottom: 4px; }
.hello p { margin-top: 4px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.stat { background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.stat .v { font-family: var(--font-num); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat.neg .v { color: var(--bad); }
.stat small { font-size: 12.5px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.panel-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.panel-h h2 { font-size: 15.5px; font-weight: 700; }
.panel-b { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.note { padding: 14px 16px; color: var(--muted); }
.panel-b .note { padding: 0; }
.note-bar { padding: 10px 14px; background: var(--accent-soft); border-radius: var(--r); }
.empty { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 28px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.empty h3 { font-size: 19px; }
.empty p { color: var(--muted); max-width: 62ch; }
.two { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (max-width: 1000px) { .two { grid-template-columns: minmax(0, 1fr); } }
.sub-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); margin-top: 4px; }
.sub-h:first-child { border-top: 0; }
.sub-h h3 { font-size: 15px; }
.callout { background: var(--sunk); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.tabs-inline { overflow-x: auto; }
.big { font-size: 18px; }
.steps-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* chips, meters */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--sunk); color: var(--muted); white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.plain::before { display: none; }
.chip.good { background: var(--good-soft); color: var(--good); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.accent { background: var(--accent-soft); color: var(--accent); }
.burn { position: relative; height: 8px; background: var(--sunk); border-radius: 2px; min-width: 64px; }
.burn-fill { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--good); }
.burn.warn .burn-fill { background: var(--warn); }
.burn.bad .burn-fill { background: var(--bad); }
.burn.none .burn-fill { background: var(--line-strong); }
.burn.accent .burn-fill { background: var(--accent); }
.burn-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.burn.lg { height: 12px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; }
.avatar.sm { width: 26px; height: 26px; font-size: 11px; }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who > span { min-width: 0; }
.you { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-left: 6px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); align-items: center; }
.legend i { display: inline-block; vertical-align: -1px; margin-right: 6px; }
.lg-sw { width: 14px; height: 9px; border-radius: 2px; background: var(--good); }
.lg-sw.s1 { background: var(--s1); } .lg-sw.s2 { background: var(--s2); }
.lg-tick { width: 2px; height: 13px; background: var(--ink); }
.lg-bar { width: 22px; height: 11px; border: 1px solid var(--p1); background: color-mix(in srgb, var(--p1) 55%, var(--surface)); border-radius: 2px; }
.lg-bar.over { border: 2px solid var(--bad); background: var(--surface); }
.lg-today { width: 2px; height: 13px; background: var(--bad); }

/* tables and lists */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th.num { text-align: right; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tfoot td { border-top: 1px solid var(--line-strong); border-bottom: 0; font-weight: 600; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--sunk); }
.tbl tr.dim td { opacity: .6; }
.tbl.compact td { padding: 6px 8px; }
.tbl.compact th { padding: 8px; }
.w-burn { min-width: 120px; }
.list { list-style: none; margin: 0; padding: 0; }
.list > li + li { border-top: 1px solid var(--line); }
.list-a, .list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; color: var(--ink); min-width: 0; }
.list-a:hover { background: var(--sunk); text-decoration: none; }
.list-a > span:first-child, .list-row > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.list-a small, .list-row small { font-size: 12.5px; }
.list-a .right { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.list-a.todo { justify-content: flex-start; }
.list-a.todo > span { flex: 1; }
.sev { width: 4px; align-self: stretch; border-radius: 2px; flex: none; background: var(--accent); }
.sev.bad { background: var(--bad); } .sev.warn { background: var(--warn); }
.go { color: var(--muted); font-size: 18px; flex: none; }
.list-a.proj { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 120px) auto; }
.pn { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; min-width: 0; }
.pn > span { display: flex; flex-direction: column; min-width: 0; }
.pn b, .pn small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini { display: flex; align-items: center; gap: 8px; }
.mini .burn { width: 90px; }

/* project list */
.plist { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.plist-head, .prow { display: grid; grid-template-columns: 70px minmax(0, 2fr) 104px minmax(0, 2fr) 100px 120px; gap: 6px 16px; align-items: center; }
.plist-head { padding: 10px 16px; border-bottom: 1px solid var(--line); }
.plist-head .r { text-align: right; }
.prow { padding: 14px 16px; color: var(--ink); border-top: 1px solid var(--line); grid-template-areas: "num name stat burn inv health"; }
.prow:first-of-type { border-top: 0; }
.plist-head + .prow { border-top: 0; }
.prow:hover { background: var(--sunk); text-decoration: none; }
.pnum { grid-area: num; display: flex; align-items: center; gap: 7px; font-family: var(--font-num); font-size: 13px; }
.pname { grid-area: name; min-width: 0; display: flex; flex-direction: column; }
.pname b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pname small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pstat { grid-area: stat; }
.pburn { grid-area: burn; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pburn small { font-size: 12px; }
.pinv { grid-area: inv; display: flex; flex-direction: column; text-align: right; }
.pinv small { font-family: var(--font-ui); font-size: 11px; }
.phealth { grid-area: health; justify-self: end; }
@media (max-width: 760px) {
  .plist-head { display: none; }
  .prow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num stat" "name name" "burn burn" "inv health"; }
  .pinv { text-align: left; flex-direction: row; gap: 6px; align-items: baseline; }
}

/* title block (project sheet) */
.tb { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--ink); border: 2px solid var(--ink); border-radius: 3px; }
.tb-cell { background: var(--surface); padding: 9px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tb-cell > :last-child { overflow-wrap: anywhere; }
.tb-name { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; }
.tb-name h1 { font-size: clamp(22px, 4vw, 30px); font-weight: 800; line-height: 1.1; }
.stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* project editor stages */
.stage-list { display: flex; flex-direction: column; gap: 8px; }
.stage-ed { display: grid; grid-template-columns: auto minmax(140px, 2fr) minmax(100px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr) auto; gap: 8px; align-items: end; padding: 10px; background: var(--sunk); border-radius: var(--r); }
.stage-ord { display: flex; flex-direction: column; }
@media (max-width: 680px) {
  .stage-ed { grid-template-columns: 1fr 1fr auto; }
  .stage-ed .stage-ord { grid-row: 1; grid-column: 3; flex-direction: row; justify-self: end; }
  .stage-ed .field:nth-of-type(1) { grid-column: 1 / 3; grid-row: 1; }
  .stage-ed > .icon-btn:last-child { grid-column: 3; grid-row: 2; }
}
.line-ed { display: grid; grid-template-columns: minmax(160px, 3fr) minmax(80px, 1fr) minmax(100px, 1fr) auto auto; gap: 8px; align-items: end; padding: 10px; background: var(--sunk); border-radius: var(--r); }
@media (max-width: 680px) { .line-ed { grid-template-columns: 1fr 1fr auto; } .line-ed .field:first-child { grid-column: 1 / -1; } }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.sw { width: 30px; height: 30px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; }
.sw[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--surface); }
.pct-in { display: inline-flex; align-items: center; gap: 4px; }
.pct-in .input { width: 76px; text-align: right; }

/* timeline */
.gantt { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); -webkit-overflow-scrolling: touch; }
.g-in { position: relative; }
.g-head, .g-row { display: flex; position: relative; }
.g-head { border-bottom: 1px solid var(--line-strong); height: 34px; }
.g-row { border-bottom: 1px solid var(--line); }
.g-row:last-of-type { border-bottom: 0; }
.g-lab { position: sticky; left: 0; z-index: 3; flex: none; width: 160px; background: var(--surface); border-right: 1px solid var(--line); padding: 8px 10px; display: flex; flex-direction: column; justify-content: center; gap: 1px; color: var(--ink); min-width: 0; }
a.g-lab:hover { text-decoration: none; background: var(--sunk); }
.g-lab b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-lab small { font-family: var(--font-num); font-size: 11px; }
.g-track { position: relative; flex: none; }
.g-month { position: absolute; top: 0; bottom: 0; padding: 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; }
.g-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); pointer-events: none; }
.g-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--bad); z-index: 2; pointer-events: none; }
.g-today span { position: absolute; top: 3px; left: 5px; font-size: 10px; font-weight: 700; color: var(--bad); text-transform: uppercase; letter-spacing: .06em; background: var(--surface); padding: 0 3px; }
.g-bar { position: absolute; height: 22px; border-radius: 3px; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 14%, var(--surface)); overflow: hidden; z-index: 1; color: var(--ink); }
.g-bar:hover { text-decoration: none; box-shadow: 0 0 0 2px var(--c); }
.g-bar.over { border: 2px solid var(--bad); }
.g-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--c) 55%, var(--surface)); }
.g-txt { position: relative; display: block; font-size: 11px; font-weight: 600; padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* timesheet */
.week-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.week-sum .burn { width: 200px; }
.ts { border-collapse: collapse; width: 100%; min-width: 760px; }
.ts th { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; padding: 9px 4px; text-align: center; border-bottom: 1px solid var(--line); vertical-align: top; }
.ts th small { display: block; font-family: var(--font-num); font-size: 13px; letter-spacing: 0; color: var(--ink); font-weight: 500; }
.ts th em { display: block; font-style: normal; font-size: 9.5px; letter-spacing: .02em; text-transform: none; color: var(--warn); font-weight: 600; max-width: 64px; margin: 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts th.today small { color: var(--accent); font-weight: 700; }
.ts th.wkend, .ts td.wkend { background: color-mix(in srgb, var(--sunk) 60%, var(--surface)); }
.ts th.off { background: var(--warn-soft); }
.ts td { padding: 5px 4px; border-bottom: 1px solid var(--line); text-align: center; }
.ts .ts-first { text-align: left; padding-left: 12px; width: 34%; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.ts tfoot td { font-weight: 600; border-bottom: 0; padding-block: 10px; }
.ts .rt { font-weight: 600; min-width: 52px; }
.row-sel { min-width: 200px; max-width: 340px; padding: 7px 8px; min-height: 36px; }
.ts-cell { width: 54px; height: 38px; padding: 6px 4px; text-align: center; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 15px; }
.ts-cell:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.ts-cell[readonly] { background: transparent; border-color: transparent; }
.pad { padding: 16px 12px !important; }
.add-row { width: auto; max-width: 100%; }
.day-tabs { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line); }
.day-tabs button { border: 0; background: none; padding: 10px 2px 8px; display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; color: var(--muted); border-bottom: 3px solid transparent; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.day-tabs button b { font-family: var(--font-num); font-size: 17px; color: var(--ink); font-weight: 500; letter-spacing: 0; }
.day-tabs button small { font-family: var(--font-num); font-size: 11px; text-transform: none; }
.day-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.day-tabs button.today b { color: var(--accent); }
.day-tabs button.off { background: var(--warn-soft); }
.day-rows { list-style: none; margin: 0; padding: 0; }
.day-rows li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.day-rows li:last-child { border-bottom: 0; }
.dr-l { flex: 1; min-width: 0; }
.dr-l .row-sel { width: 100%; min-width: 0; max-width: none; }
.dr-r { display: flex; align-items: center; gap: 4px; flex: none; }
.dr-r .ts-cell { width: 64px; height: 44px; font-size: 17px; }
.weeks { list-style: none; margin: 0; padding: 0; }
.weeks li + li { border-top: 1px solid var(--line); }
.week-btn { width: 100%; border: 0; background: none; display: grid; grid-template-columns: 110px minmax(60px, 1fr) 64px auto; gap: 12px; align-items: center; padding: 10px 16px; cursor: pointer; text-align: left; }
.week-btn:hover { background: var(--sunk); }

/* invoices */
.aging { display: flex; height: 14px; border-radius: 3px; overflow: hidden; gap: 2px; }
.ag { background: var(--good); min-width: 4px; }
.ag.warn { background: var(--warn); } .ag.bad { background: var(--bad); }
.aging-l { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.aging-l span { display: flex; flex-direction: column; }
.totals { display: grid; grid-template-columns: auto auto; justify-content: end; gap: 5px 28px; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.totals span:nth-child(odd) { font-family: var(--font-ui); color: var(--muted); text-align: right; }
.totals span:nth-child(even) { text-align: right; }
.totals .t { font-weight: 700; font-size: 16px; color: var(--ink) !important; border-top: 1px solid var(--line-strong); padding-top: 6px; }
.tot-foot { font-weight: 600; }

/* modal */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.scrim { position: absolute; inset: 0; background: color-mix(in srgb, #000 45%, transparent); }
.sheet { position: relative; background: var(--surface); width: 100%; max-width: 680px; max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 40px rgba(0,0,0,.2); }
.sheet.wide { max-width: 940px; }
.sheet.narrow { max-width: 480px; }
.sheet-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px max(18px, env(safe-area-inset-right, 0px)) 12px max(18px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line); }
.sheet-h h2 { font-size: 19px; font-weight: 750; }
.sheet-b { padding: 16px max(18px, env(safe-area-inset-right, 0px)) 18px max(18px, env(safe-area-inset-left, 0px)); overflow-y: auto; display: flex; flex-direction: column; gap: 14px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.sheet-f { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; padding: 12px max(18px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--line); }
@media (min-width: 700px) {
  .modal { align-items: center; padding: 24px; }
  .sheet { border-radius: 12px; max-height: calc(100dvh - 48px); }
}

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 70; background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 9px; font-weight: 600; font-size: 13.5px; max-width: calc(100% - 32px); box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.toast.bad { background: var(--bad); color: #fff; }
@media (max-width: 900px) { .toast { bottom: calc(var(--bottom-h) + 14px + env(safe-area-inset-bottom, 0px)); } }

/* settings */
.settings { display: flex; flex-direction: column; gap: 18px; padding-bottom: 40px; }
.img-pick { min-height: 84px; border: 1px dashed var(--line-strong); border-radius: var(--r); display: grid; place-items: center; padding: 10px; background: repeating-conic-gradient(var(--sunk) 0 25%, var(--surface) 0 50%) 0 0 / 16px 16px; }
.img-pick img { max-height: 80px; width: auto; }
.save-bar { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 -4px 20px rgba(0,0,0,.06); }
.save-bar.show { border-color: var(--accent); }
@media (max-width: 900px) { .save-bar { bottom: calc(var(--bottom-h) + 8px + env(safe-area-inset-bottom, 0px)); } }

/* charts */
.chart { display: flex; flex-direction: column; gap: 8px; }
.chart svg { display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 11px; font-family: var(--font-num); }
.chart .bar { fill: var(--s1); }
.chart .bar.s2 { fill: var(--s2); }

/* ---------- documents (invoice, proposal) ---------- */
.doc-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.doc-wrap { container: doc / inline-size; width: 100%; }
.doc { --doc-accent: #0e1a2b; --doc-red: #d71920; font-family: var(--font-ui); position: relative; background: #fff; color: #1b1d1c; width: 100%; max-width: 820px; margin: 0 auto; padding: 44px 48px; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 4px 24px rgba(0,0,0,.06); font-size: 13px; line-height: 1.5; color-scheme: light; display: flex; flex-direction: column; gap: 22px; overflow: hidden; }
.doc .muted, .doc small { color: #5d6672; }
.doc a { color: inherit; }
.doc-stamp { position: absolute; top: 26px; right: -44px; transform: rotate(35deg); background: #e7ecf3; color: #0e1a2b; z-index: 2; padding: 6px 60px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; font-size: 12px; }
.doc-stamp.bad { background: #fbe3e1; color: #b42318; }
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--doc-accent); position: relative; }
.doc-head::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 72px; height: 2px; background: var(--doc-red); }
.doc-brand { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.doc-wordmark { font-size: 26px; font-weight: 800; letter-spacing: .01em; color: var(--doc-accent); line-height: 1; white-space: nowrap; }
.doc-wordmark b { color: var(--doc-red); font-weight: 800; }
.doc-logo { max-height: 60px; max-width: 200px; object-fit: contain; align-self: flex-start; }
.doc-tag { color: #5d6672; font-weight: 600; font-size: 11.5px; }
.doc-firm { text-align: right; min-width: 0; font-size: 11.5px; color: #4a5260; display: flex; flex-direction: column; gap: 2px; }
.doc-name { font-weight: 800; font-size: 13.5px; line-height: 1.3; color: var(--doc-accent); }
.doc-addr { margin-top: 2px; }
.doc-ids { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1px 12px; }
.doc-ids b { color: #1b2330; font-weight: 700; }
.doc-mark { display: none; }
.doc-titlebar { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.doc-titlebar h1 { font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--doc-accent); line-height: 1.1; }
.doc-titlebar dl { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 0; justify-content: end; }
.doc-titlebar dt { color: #5d6672; font-size: 11.5px; text-align: right; }
.doc-titlebar dd { margin: 0; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.doc-brandfoot { margin-top: auto; padding-top: 10px; border-top: 1px solid #e2e6eb; text-align: center; font-size: 10.5px; color: #6b7480; letter-spacing: .02em; }
.doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.doc h4 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--doc-red); margin-bottom: 4px; font-weight: 700; }
.doc h3 { font-size: 14px; font-weight: 700; margin-bottom: 6px; color: var(--doc-accent); }
.pos { margin-top: 8px; padding: 6px 10px; background: #f2f3f7; border-radius: 4px; display: inline-block; }
.doc-lines { width: 100%; border-collapse: collapse; }
.doc-lines th { background: var(--doc-accent); color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; text-align: left; padding: 8px 10px; font-weight: 600; }
.doc-lines th.num { text-align: right; }
.doc-lines td { padding: 9px 10px; border-bottom: 1px solid #e2e6eb; vertical-align: top; }
.doc-lines tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid #1b1d1c; }
.doc-lines .c { text-align: center; width: 40px; }
.doc-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.doc-words p { font-weight: 600; }
.doc-totals { min-width: 260px; }
.doc-totals span:nth-child(odd) { color: #5d6460; }
.doc-totals .t { color: #1b1d1c !important; border-top: 2px solid #1b1d1c; }
.doc-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding-top: 16px; border-top: 1px solid #e3e5e1; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 0; }
.kv dt { color: #5d6460; }
.kv dd { margin: 0; }
.doc-terms { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.doc-right { display: flex; gap: 20px; align-items: flex-end; }
.doc-upi { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; max-width: 130px; }
.doc-upi small { font-size: 10.5px; }
.qr { display: block; image-rendering: pixelated; }
.qr svg rect[fill="#ffffff"], .qr svg path[fill="#ffffff"] { fill: #fff; }
.doc-sign { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 180px; text-align: center; }
.sig-img { max-height: 60px; max-width: 180px; }
.sig-space { height: 52px; }
.sig-line { border-top: 1px solid #1b1d1c; padding-top: 4px; width: 100%; font-weight: 600; }
.doc-note { text-align: center; font-size: 11px; color: #7a817c; }
.doc-subject { padding: 10px 12px; background: #f3f5f8; border-left: 3px solid var(--doc-red); }
.doc-sec { display: flex; flex-direction: column; gap: 8px; }
.doc-foot.accept { align-items: end; }
.doc-accept { max-width: 260px; }
@container doc (max-width: 680px) {
  .doc { padding: 24px 18px; gap: 18px; font-size: 12.5px; }
  .doc-head { flex-direction: column; gap: 12px; }
  .doc-firm { text-align: left; } .doc-ids { justify-content: flex-start; }
  .doc-titlebar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .doc-titlebar dl { justify-content: start; }
  .doc-titlebar dt { text-align: left; } .doc-titlebar dd { text-align: left; }
  .doc-parties, .doc-sum, .doc-foot { grid-template-columns: 1fr; }
  .doc-totals { min-width: 0; justify-content: stretch; }
  .doc-right { flex-wrap: wrap; justify-content: space-between; }
  .doc-lines { font-size: 12px; }
  .doc-lines td, .doc-lines th { padding: 7px 6px; }
}

/* ---------- print: only the document ---------- */
@page { size: A4; margin: 12mm; }
@media print {
  html, body { background: #fff !important; }
  .side, .topbar, .bottom-nav, .demobar, .no-print, .toast, .modal, .page-head, .save-bar { display: none !important; }
  .main-col { margin: 0 !important; }
  .content { padding: 0 !important; max-width: none; }
  .doc { border: 0; box-shadow: none; max-width: none; padding: 0; font-size: 11.5px; }
  .doc-lines th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-head, .doc-head::after, .doc-stamp, .pos, .doc-subject, .doc-wordmark { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-lines tr, .doc-foot { break-inside: avoid; }
}

@media (prefers-reduced-motion: no-preference) {
  .sheet { animation: rise .18s ease-out; }
  @keyframes rise { from { transform: translateY(12px); opacity: .6; } to { transform: none; opacity: 1; } }
}

/* fixes from browser testing */
.list-a.todo > span { display: flex; flex-direction: column; min-width: 0; }
.list-row > .who, .list-a > .who { flex-direction: row !important; align-items: center; }
.list-row > .who > span { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 560px) {
  .list-a.proj { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .list-a.proj .burn { grid-column: 1 / -1; grid-row: 2; }
  .week-btn { grid-template-columns: 92px minmax(30px, 1fr) 50px; gap: 8px; padding: 10px 12px; }
  .week-btn .chip { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 680px) {
  .stage-ed { grid-template-columns: 1fr 1fr auto; }
  .stage-ed > :nth-child(1) { grid-column: 3; grid-row: 1; flex-direction: row; justify-self: end; align-self: end; }
  .stage-ed > :nth-child(2) { grid-column: 1 / 3; grid-row: 1; }
  .stage-ed > :nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  .stage-ed > :nth-child(4) { grid-column: 1; grid-row: 3; }
  .stage-ed > :nth-child(5) { grid-column: 2; grid-row: 3; }
  .stage-ed > :nth-child(6) { grid-column: 3; grid-row: 3; }
}

/* ===== v3: workflow modules ===== */
.lock-ic { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; vertical-align: -2px; flex: none; }
.row-between { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.small-h { font-size: 14px; margin-bottom: 6px; }
.pad-x { padding: 10px 16px 0; }
.cur b { font-weight: 600; }
.tabbar { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin-top: -4px; }
.tabbar::-webkit-scrollbar { display: none; }
.tabbar button { border: 0; background: none; padding: 10px 12px 11px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.tabbar button:hover { color: var(--ink); }
.tabbar button.on { color: var(--ink); border-bottom-color: var(--accent); }
.tab-n { font-size: 11px; font-family: var(--font-num); background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 0 7px; }

/* phases with payment gates */
.phase-list { list-style: none; margin: 0; padding: 6px 0; }
.phase { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 0 16px 0 8px; }
.ph-rail { position: relative; display: flex; justify-content: center; }
.ph-rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--line); }
.phase:first-child .ph-rail::before { top: 22px; }
.phase:last-child .ph-rail::before { bottom: calc(100% - 22px); }
.ph-dot { position: relative; z-index: 1; margin-top: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-family: var(--font-num); background: var(--surface); border: 2px solid var(--line-strong); color: var(--muted); }
.phase.open .ph-dot { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.phase.closed .ph-dot { border-color: var(--good); background: var(--good); color: var(--surface); }
.phase.to_invoice .ph-dot, .phase.awaiting_payment .ph-dot { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.phase.locked .ph-dot { color: var(--bad); border-color: var(--line-strong); }
.ph-body { padding: 12px 0 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.phase:last-child .ph-body { border-bottom: 0; }
.phase.locked .ph-body > :not(.ph-top):not(.ph-reason):not(.ph-actions) { opacity: .7; }
.ph-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ph-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ph-title h3 { font-size: 16px; }
.ph-reason { color: var(--bad); font-size: 13px; font-weight: 600; display: flex; gap: 6px; align-items: center; }
.ph-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.ph-meta > span { display: flex; flex-direction: column; gap: 2px; min-width: 56px; }
.ph-meta small { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.ph-burn { min-width: 120px !important; justify-content: space-between; }
.ph-burn .burn { margin-top: 6px; }
.ms-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r); }
.ms-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; font-size: 13.5px; }
.ms-list li + li { border-top: 1px solid var(--line); }
@media (max-width: 560px) { .ms-list li { grid-template-columns: minmax(0, 1fr) auto; } .ms-list li > :last-child { grid-column: 1 / -1; } }
.ph-actions { gap: 8px; }
.ph-ed { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.ph-ed-h { display: flex; justify-content: space-between; align-items: center; }
.ms-ed { background: var(--sunk); border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ms-ed-row { display: grid; grid-template-columns: minmax(120px, 2fr) minmax(130px, 1.2fr) minmax(90px, 1fr) auto; gap: 8px; align-items: center; }
@media (max-width: 600px) { .ms-ed-row { grid-template-columns: 1fr 1fr auto; } .ms-ed-row > :first-child { grid-column: 1 / -1; } }

/* quotation stage editor */
.q-stages { display: flex; flex-direction: column; gap: 8px; }
.q-stage { position: relative; display: grid; grid-template-columns: minmax(150px, 2.2fr) 90px minmax(100px, 1fr) 80px 90px; gap: 8px 10px; align-items: end; padding: 10px 44px 10px 10px; background: var(--sunk); border-radius: var(--r); }
.q-stage.adv { background: var(--accent-soft); grid-template-columns: minmax(150px, 2.2fr) 90px minmax(100px, 1fr); }
.q-stage .field.wide { grid-column: 1 / -1; }
.q-stage .amt { padding: 9px 0; }
.q-x { position: absolute; top: 6px; right: 6px; }
@media (max-width: 640px) { .q-stage, .q-stage.adv { grid-template-columns: 1fr 1fr; } .q-stage > .field:first-child { grid-column: 1 / -1; } }

/* revisions */
.allow { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 0; }
.allow-chip { font-size: 12.5px; background: var(--sunk); border-radius: 999px; padding: 3px 10px; }
.allow-chip.over { background: var(--bad-soft); color: var(--bad); }
.panel > .callout { margin: 12px 16px 0; }
.rounds { display: flex; flex-direction: column; }
.round { padding: 14px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.round:first-child { border-top: 0; }
.round-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.round-h h3 { font-size: 16px; }
.options { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.option { border: 1px solid var(--line); border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.option.chosen { border-color: var(--good); box-shadow: inset 0 0 0 1px var(--good); }
.opt-key { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: var(--ink); color: var(--bg); font-family: var(--font-num); font-size: 12px; margin-right: 4px; }
.opt-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: var(--sunk); max-width: 100%; }
.opt-ed { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: start; padding: 10px; background: var(--sunk); border-radius: var(--r); }
.opt-ed > .row { grid-column: 2; }

/* tasks */
.tasks { list-style: none; margin: 0; padding: 0; }
.task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--line); }
.task:first-child { border-top: 0; }
.task-check { width: 20px; height: 20px; accent-color: var(--accent); }
.task-main { all: unset; cursor: pointer; display: flex; flex-direction: column; min-width: 0; }
.task-main b { font-weight: 600; overflow-wrap: anywhere; }
.task-main:focus-visible { outline: 2px solid var(--accent); }
.task.done .task-main b { text-decoration: line-through; color: var(--muted); }
.task-side { display: flex; align-items: center; gap: 8px; }
@media (max-width: 520px) { .task { grid-template-columns: auto minmax(0, 1fr); } .task-side { grid-column: 2; } }

/* activity */
.timeline-list { list-style: none; margin: 0; padding: 4px 0; }
.timeline-list li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 9px 16px; border-top: 1px solid var(--line); }
.timeline-list li:first-child { border-top: 0; }
.timeline-list .when { color: var(--muted); font-size: 12.5px; padding-top: 2px; }
.timeline-list span:last-child { display: flex; flex-direction: column; }
.timeline-list b { font-weight: 500; }

/* site visits */
.act-ed { display: grid; grid-template-columns: auto minmax(140px, 3fr) minmax(80px, 1fr) minmax(130px, 1fr) auto; gap: 8px; align-items: center; }
@media (max-width: 640px) { .act-ed { grid-template-columns: auto 1fr auto; } .act-ed > :nth-child(2) { grid-column: 2 / 4; } .act-ed > :nth-child(3) { grid-column: 1 / 3; } }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.photo-ed { position: relative; }
.photo-ed .icon-btn { position: absolute; top: 4px; right: 4px; background: var(--surface); }
.photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: #e9ebe5; display: block; max-width: 100%; }
.doc-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.doc-ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.cert .cert-body { font-size: 15px; line-height: 1.75; padding: 12px 0 24px; }

/* dashboard board */
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .board { grid-template-columns: minmax(0, 1fr); } }
.board-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.board-h { display: flex; justify-content: space-between; align-items: center; }
.board-card { display: flex; flex-direction: column; gap: 3px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); background: var(--surface); min-width: 0; }
.board-card:hover { border-color: var(--line-strong); text-decoration: none; background: var(--sunk); }
.board-card .pn b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-card small { overflow-wrap: anywhere; }
.sev.good { background: var(--good); }

/* timeline additions */
.g-bar.locked { background: repeating-linear-gradient(135deg, var(--surface) 0 5px, var(--sunk) 5px 10px); border-style: dashed; }
.g-bar.done .g-txt::after { content: " ✓"; }
.lg-bar.locked { background: repeating-linear-gradient(135deg, var(--surface) 0 3px, var(--sunk) 3px 6px); border-style: dashed; border-color: var(--line-strong); }

/* files */
.file-link { text-align: left; overflow-wrap: anywhere; }
.btn.busy { opacity: .6; pointer-events: none; }
.list.pick { max-height: 46vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r); }

/* client portal */
.portal { min-height: 100vh; }
.portal-top { position: sticky; top: 0; z-index: 25; background: var(--bg); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.portal-in { max-width: 980px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.portal-top .portal-in { display: flex; justify-content: space-between; align-items: center; height: 60px; gap: 10px; }
.portal .content { padding-block: 20px 60px; }
.portal-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); }
.portal-card:hover { border-color: var(--line-strong); text-decoration: none; }
.portal-card h2 { font-size: 21px; font-weight: 800; }
.pc-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
@media (max-width: 520px) { .portal-user { display: none; } }

/* PDF rendering: an off-screen A4-width copy of the document */
.pdf-host { position: fixed; left: -12000px; top: 0; width: 794px; background: #fff; container: doc / inline-size; }
.pdf-host .doc { max-width: none; border: 0; box-shadow: none; border-radius: 0; padding: 28px 32px; }
.pdf-host .doc-stamp { top: 18px; }

/* grids: draw cell dividers on the cells so a short last row leaves clean white space */
.tb { gap: 0; background: var(--surface); overflow: hidden; }
.tb-cell { box-shadow: 1px 1px 0 var(--ink); }
.tb-name { box-shadow: 0 1px 0 var(--ink); }
.stats { gap: 0; background: var(--surface); }
.stat { box-shadow: 1px 1px 0 var(--line); }
.cr-list { list-style: none; margin: 0; padding: 0; }
.cr-list li { border-top: 1px solid var(--line); }
.cr-list li:first-child { border-top: 0; }
.cr-item { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 16px; cursor: pointer; }
.cr-item:hover { background: var(--sunk); }
.cr-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cr-item.static { cursor: default; }
.cr-item.static:hover { background: none; }
.cr-item .num-c { font-family: var(--font-num); font-size: 13px; color: var(--muted); padding-top: 2px; }
.cr-item .cr-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-item .cr-main small { overflow-wrap: anywhere; }
.cr-item .cr-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
@media (max-width: 520px) { .cr-item { grid-template-columns: 44px minmax(0, 1fr); } .cr-item .cr-side { grid-column: 2; flex-direction: row; align-items: center; gap: 8px; } }

/* ---------- v4: WhatsApp, alerts, comments, planning, contracts, import ---------- */
.callout.inline, .callout.warn, .callout.bad { display: block; line-height: 1.5; }
.callout.warn { background: var(--warn-soft); }
.callout.bad { background: var(--bad-soft); }
.btn.wa { color: #12753a; border-color: #8cc7a1; }
.btn.wa:hover { background: #e3f4e8; text-decoration: none; }
.wa-ic { width: 16px; height: 16px; fill: currentColor; flex: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.wa { color: #7ad69b; border-color: #2f6b45; } :root:not([data-theme="light"]) .btn.wa:hover { background: #17301f; } }

.side-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.side-top .brand { flex: 1; }
.topbar { justify-content: space-between; }
.bell { position: relative; border: 0; background: none; width: 40px; height: 40px; flex: none; border-radius: var(--r); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.bell:hover { background: var(--sunk); }
.bell svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.bell-n { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; font-family: var(--font-num); }
.notif-list { margin: -4px -4px 0; }
.notif { all: unset; box-sizing: border-box; width: 100%; display: grid !important; grid-template-columns: 28px minmax(0, 1fr) 10px; gap: 10px; align-items: start; padding: 10px 8px; border-radius: var(--r); cursor: pointer; }
.notif:hover { background: var(--sunk); }
.notif:focus-visible { outline: 2px solid var(--accent); }
.notif b { font-weight: 500; line-height: 1.4; }
.notif.unread b { font-weight: 700; }
.notif-ic { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 14px; }
.dot-unread { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-top: 6px; }
.row.end { justify-content: flex-end; }
.steps-ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }

.log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.log-list li { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.add-note { flex-wrap: nowrap; }
.add-note .input { flex: 1; min-width: 0; }
.enq-actions { padding-bottom: 6px; }

.comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.comments li { padding: 10px 12px; border-radius: var(--r); background: var(--sunk); max-width: 560px; }
.comments li.from-client { background: var(--accent-soft); }
.comments li.from-team { margin-left: auto; }
.comments li.resolved { opacity: .6; }
.comments p { margin: 4px 0 0; }
.cm-h { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.cm-h .link { margin-left: auto; }
.cm-add { display: grid; gap: 8px; justify-items: start; }
.cm-n { color: var(--accent); font-weight: 600; }
.cd-rev { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; padding: 12px; background: var(--sunk); border-radius: var(--r); }
.cd-rev .label { display: block; }
.cd-decide { display: grid; gap: 8px; }

.bid-ed, .alloc-ed { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: center; }
.alloc-ed { grid-template-columns: minmax(0, 1fr) 90px auto; margin-bottom: 8px; }
@media (max-width: 600px) { .bid-ed { grid-template-columns: 1fr 1fr auto; } .bid-ed > :nth-child(3) { grid-column: 1 / 3; grid-row: 2; } }
.tbl tr.won td { background: var(--good-soft); }
.bill-sum { max-width: 420px; margin-left: auto; }
.bill-sum dd { text-align: right; font-family: var(--font-num); }
.doc-parties h4.mt { margin-top: 10px; }
.doc-lines tr.tot td { border-top: 2px solid var(--ink); }

.tbl.plan th.c, .tbl.plan td.c { text-align: center; }
.tbl.plan td { padding: 6px; }
.tbl.plan td:first-child { padding-left: 12px; min-width: 140px; }
.plan-cell { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 64px; padding: 7px 4px; border-radius: 6px; cursor: pointer; font-family: var(--font-num); }
.plan-cell small { font-size: 11px; color: var(--muted); }
.plan-cell:disabled { cursor: default; }
.plan-cell:focus-visible { outline: 2px solid var(--accent); }
.plan-cell.low, .key.low { background: var(--sunk); }
.plan-cell.warn, .key.warn { background: var(--warn-soft); }
.plan-cell.good, .key.good { background: var(--good-soft); }
.plan-cell.bad, .key.bad { background: var(--bad-soft); }
.plan-cell.bad b { color: var(--bad); }
.key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin: 0 4px 0 10px; border: 1px solid var(--line); }
.key:first-child { margin-left: 0; }
.tbl tfoot td { border-top: 1px solid var(--line-strong); border-bottom: 0; font-weight: 600; }
.burn-wrap { width: 120px; flex: none; }

.import-row { margin: 12px 0; }
.tbl tr.dim td { color: var(--muted); }
.panel .seg { margin-bottom: 8px; }

/* ---------- Website: blog editor ---------- */
.fields.one { grid-template-columns: minmax(0, 1fr); }
.bp-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bp-row > span { min-width: 0; }
.bp-thumb { width: 72px; height: 38px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); background: var(--sunk); flex: none; display: block; }
.bp-edit { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.bp-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bp-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; position: sticky; top: 12px; }
.bp-title { font-size: 20px; font-weight: 700; }
.md-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); position: sticky; top: 0; z-index: 2; }
.md-bar > button { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; min-height: 34px; padding: 0 10px; cursor: pointer; font: 600 13px var(--font-ui); color: var(--ink); }
.md-bar > button:hover { border-color: var(--line-strong); background: var(--sunk); }
.md-area { min-height: 520px; font: 15px/1.65 var(--font-num); resize: vertical; tab-size: 2; }
.bp-preview { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 28px; min-height: 520px; line-height: 1.65; max-width: 100%; overflow-x: auto; }
.bp-preview h2 { font-size: 24px; margin: 24px 0 8px; font-weight: 800; }
.bp-preview h3 { font-size: 19px; margin: 18px 0 6px; }
.bp-preview p, .bp-preview ul, .bp-preview ol, .bp-preview table, .bp-preview blockquote { margin: 0 0 12px; }
.bp-preview img { max-width: 100%; border-radius: 6px; }
.bp-preview table { border-collapse: collapse; }
.bp-preview th, .bp-preview td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.bp-preview blockquote { border-left: 4px solid var(--accent); padding: 8px 14px; background: var(--sunk); }
.bp-preview a { text-decoration: underline; }
.bp-cover { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); display: block; }
.serp { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); margin-top: 12px; font-family: Arial, sans-serif; }
.serp-url { font-size: 12px; color: var(--muted); }
.serp-t { font-size: 18px; color: #1a0dab; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serp-d { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .serp-t { color: #8ab4f8; } }
.seo-checks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.seo-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; font-size: 13.5px; }
.seo-checks li > span:first-child { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.seo-checks li.ok > span:first-child { background: var(--good-soft); color: var(--good); }
.seo-checks li.no > span:first-child { background: var(--warn-soft); color: var(--warn); }
.seo-checks small { display: block; color: var(--muted); }
@media (max-width: 1100px) { .bp-edit { grid-template-columns: minmax(0, 1fr); } .bp-side { position: static; } }
textarea.input.md-area { min-height: 560px; height: 62vh; }

/* ---------- IMI Design brand: navy sidebar, wordmark, sign-in ---------- */
.side { border-right: 0; }
.side .brand { color: #fff; }
.side .wordmark b { color: #ef3b42; }
.side .brand-t small { color: #a9b6c6; }
.side .brand-mark { background: #ef3b42; color: #fff; }
.side .bell { color: #e8edf3; }
.side .bell:hover { background: rgba(255,255,255,.08); }
.side > .userbox { border-top-color: rgba(255,255,255,.12); }
.side > .userbox b { color: #fff; }
.side > .userbox small { color: #a9b6c6; }
.side > .userbox .btn { color: #e8edf3; border-color: rgba(255,255,255,.25); background: transparent; }
.side > .userbox .btn.ghost { border-color: transparent; }
.side > .userbox .btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
.side-nav::-webkit-scrollbar { width: 6px; } .side-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
.topbar .wordmark { font-size: 17px; }
.brand-t .wordmark + small { margin-top: 5px; }
.auth, .boot { background: #0e1a2b; color: #e8edf3; }
.auth { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.auth-brand { color: #fff; text-align: center; display: grid; gap: 8px; }
.auth-brand .wordmark { font-size: 30px; }
.auth-brand .wordmark b { color: #ef3b42; }
.auth-brand small { color: #a9b6c6; font-size: 13px; }
.auth-card { box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); border: 0; color: var(--ink); }
.auth-foot { color: #8494a8; font-size: 12.5px; }
.auth-foot a { color: #a9b6c6; }
.boot .wordmark { font-size: 26px; color: #fff; }
.boot .wordmark b { color: #ef3b42; }
.boot p { color: #a9b6c6; }
.portal-top .wordmark { font-size: 18px; }
.side .brand-logo { background: #fff; padding: 4px 8px; border-radius: 6px; height: 40px; }
@media (max-width: 900px) {
  .topbar { background: #0e1a2b; border-bottom: 0; }
  .topbar .brand { color: #fff; }
  .topbar .wordmark b { color: #ef3b42; }
  .topbar .bell { color: #e8edf3; }
  .topbar .bell:hover { background: rgba(255,255,255,.08); }
  .topbar .brand-logo { background: #fff; padding: 3px 6px; border-radius: 6px; }
}