/* Laben by FEDA (was Ally 1.5). Colours: FEDA UI v3 (~/feda-ui 01a0ea5 tokens/feda-app-tokens-v3.json),
   light and dark M2; the chart, Gantt and RACI variables keep Ally's values until v3 series are mapped. */
:root {
  --bg: #edf1f6; --surface: #ffffff; --surface-2: #f4f7fb; --surface-3: #eef3fb; --border: #d4dde8;
  /* Contrast (WCAG 2.2 AA): text tokens are at least 4.5:1 on --surface and --bg; --input-border is 3:1. */
  --text: #0b1b2e; --muted: #56677c; --faint: #56677c; --input-border: #64748b;
  --brand: #05367b; --brand-2: #eef3fb; --brand-ink: #05367b; --on-brand: #ffffff;
  --good: #0f7544; --good-bg: #ecfdf5; --warn: #946010; --warn-bg: #fffbeb; --bad: #c7353a; --bad-bg: #fef2f2; --info: #05367b; --info-bg: #eef3fb;
  --bar: #3b7dd8; --bar-fill: #05367b; --crit: #d32f2f; --crit-fill: #a8161b; --base: #b6c3d6; --sum: #0f1b2e; --ms: #c94f00;
  --rR: #0b55b3; --rA: #b24700; --rC: #0f766e; --rI: #5f6673; --rText: #ffffff; --badge: #c2410c;
  --side-bg: #ffffff; --side-text: #0b1b2e; --side-muted: #56677c; --side-hover: #f4f7fb; --side-on: #eef3fb; --side-line: #d4dde8; --side-focus: #05367b;
  --radius: 12px; --shadow: 0 1px 2px rgba(15,27,46,.05), 0 2px 6px rgba(15,27,46,.06);
  --side-w: 236px; --tab-h: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #07121f; --surface: #152840; --surface-2: #1c3352; --surface-3: #1f3d66; --border: #2e4a6e;
    --text: #e8eef5; --muted: #8fa2b8; --faint: #8fa2b8;
    --brand: #9bbaea; --brand-2: #1f3d66; --brand-ink: #c1d4f2; --on-brand: #07121f;
    --good: #6ee7b7; --good-bg: #0f3a2c; --warn: #fcd34d; --warn-bg: #3a2e0e; --bad: #fca5a5; --bad-bg: #3a1a20; --info: #bfd4f5; --info-bg: #16294a;
    --bar: #4b8ee6; --bar-fill: #1f5fb8; --crit: #f26b6f; --crit-fill: #b9262b; --base: #3d5274; --sum: #d6e2f2; --ms: #ff8a3d;
    --rR: #5b9ff0; --rA: #ff8a3d; --rC: #2dd4bf; --rI: #9ca3af; --rText: #06101f; --badge: #ff8a3d; --input-border: #7d90a8;
    --side-bg: #152840; --side-text: #e8eef5; --side-muted: #8fa2b8; --side-hover: #1c3352; --side-on: #1f3d66; --side-line: #2e4a6e; --side-focus: #c1d4f2;
    --shadow: 0 1px 2px rgba(0,0,0,.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #07121f; --surface: #152840; --surface-2: #1c3352; --surface-3: #1f3d66; --border: #2e4a6e;
  --text: #e8eef5; --muted: #8fa2b8; --faint: #8fa2b8;
  --brand: #9bbaea; --brand-2: #1f3d66; --brand-ink: #c1d4f2; --on-brand: #07121f;
  --good: #6ee7b7; --good-bg: #0f3a2c; --warn: #fcd34d; --warn-bg: #3a2e0e; --bad: #fca5a5; --bad-bg: #3a1a20; --info: #bfd4f5; --info-bg: #16294a;
  --bar: #4b8ee6; --bar-fill: #1f5fb8; --crit: #f26b6f; --crit-fill: #b9262b; --base: #3d5274; --sum: #d6e2f2; --ms: #ff8a3d;
  --rR: #5b9ff0; --rA: #ff8a3d; --rC: #2dd4bf; --rI: #9ca3af; --rText: #06101f; --badge: #ff8a3d; --input-border: #7d90a8;
  --side-bg: #152840; --side-text: #e8eef5; --side-muted: #8fa2b8; --side-hover: #1c3352; --side-on: #1f3d66; --side-line: #2e4a6e; --side-focus: #c1d4f2;
  --shadow: 0 1px 2px rgba(0,0,0,.3);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); }
.rowlink { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowlink:hover { color: var(--brand); text-decoration: underline; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--brand); text-decoration: underline; cursor: pointer; font: inherit; text-align: left; }
.banner { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 24px; background: var(--bad-bg); color: var(--bad); border-bottom: 1px solid var(--border); font-weight: 600; }
.banner .sp { flex: 1; }
@media (max-width: 820px) { .banner { padding: 10px 16px; } }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
h2 { font-size: 16px; } h3 { font-size: 14px; }
.i { width: 18px; height: 18px; flex: none; }
.muted { color: var(--muted); } .faint { color: var(--faint); }
.num { font-variant-numeric: tabular-nums; }
.sp { flex: 1; }
.hide { display: none !important; }

/* ---------- layout ---------- */
.app { display: flex; min-height: 100vh; min-height: 100dvh; }
.side {
  width: var(--side-w); flex: none; background: var(--side-bg); color: var(--side-text);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; padding: 14px 10px;
  padding-top: max(16px, env(safe-area-inset-top));
}
.brand { display: flex; flex-direction: column; gap: 10px; padding: 2px 8px 16px; }
.brand .feda { width: 168px; }
.brand-app { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--side-line); }
.brand-app img { width: 26px; height: 26px; border-radius: 7px; }
.brand b { display: block; font-size: 15px; letter-spacing: -.01em; }
.brand b .by { font-weight: 500; font-size: 12px; color: var(--side-muted); letter-spacing: 0; }
.brand small { display: block; color: var(--side-muted); font-size: 11px; }
.proj-sel { margin: 0 4px 12px; }
.proj-sel select { width: 100%; background: var(--side-hover); color: var(--side-text); border-color: var(--side-line); }
.proj-sel select option { color: #0f1b2e; background: #fff; }
#sidenav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.nav-a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--side-muted);
  text-decoration: none; font-weight: 500; border-left: 3px solid transparent;
}
.nav-a:hover { background: var(--side-hover); color: var(--side-text); }
.nav-a.on { background: var(--side-on); color: var(--side-text); border-left-color: #fd6500; }
.side-foot { margin-top: auto; padding: 10px 6px 0; display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.side-foot .btn.ghost { color: var(--side-muted); }
.side-foot .btn.ghost:hover { background: var(--side-hover); color: var(--side-text); }
/* FEDA IT Consulting logo: full colour on light backgrounds, white version on dark or blue ones. */
.feda { display: inline-block; }
.feda img { display: block; width: 100%; height: auto; }
.feda .feda-d { display: none; }
.feda.on-dark .feda-l { display: none !important; }
.feda.on-dark .feda-d { display: block !important; }
.top-logo, .top-app { display: none; }
:root[data-theme="dark"] .feda .feda-l { display: none; }
:root[data-theme="dark"] .feda .feda-d { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .feda .feda-l { display: none; }
  :root:not([data-theme="light"]) .feda .feda-d { display: block; }
}
.sheet-foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; color: var(--faint); font-size: 12px; }
.sheet-foot .feda { width: 130px; }
.about { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.about .feda { width: 220px; max-width: 100%; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top {
  display: flex; align-items: center; gap: 12px; padding: 14px 24px; padding-top: max(14px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 20; min-height: 62px;
}
.top-l { min-width: 0; flex: 1; }
.top h1 { font-size: 19px; letter-spacing: -.01em; }
.top-sub { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.top-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#view { padding: 20px 24px 40px; flex: 1; min-width: 0; }
.tabbar { display: none; }

@media (max-width: 820px) {
  .side { display: none; }
  .top { padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); min-height: 56px; background: var(--side-bg); color: var(--side-text); border-bottom: 0; }
  .top h1 { font-size: 16px; }
  .top-sub { color: var(--side-muted); }
  .top .bell { color: var(--side-text); }
  .top .bell:hover { background: var(--side-hover); color: var(--side-text); }
  .top-logo { display: block; width: 92px; flex: none; padding-right: 12px; margin-right: 2px; border-right: 1px solid var(--side-line); }
  .top-app { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--side-muted); line-height: 1.2; }
  #view { padding: 14px 16px calc(var(--tab-h) + 24px + env(safe-area-inset-bottom)); }
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface);
    border-top: 1px solid var(--border); height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a, .tabbar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 11px; color: var(--muted); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer;
  }
  .tabbar .on { color: var(--brand); }
  .tabbar .i { width: 22px; height: 22px; }
  .hide-m { display: none !important; }
}
@media (min-width: 821px) { .hide-d { display: none !important; } }

/* ---------- primitives ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px;
  border-radius: 9px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-weight: 550;
  white-space: nowrap; text-decoration: none; color: var(--text);
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: var(--rText); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger-t { color: var(--bad); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.btn:disabled { opacity: .5; cursor: default; }
.icon-btn {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
  border: 0; background: transparent; color: var(--muted); cursor: pointer; flex: none;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn.sm { width: 26px; height: 26px; }
.icon-btn.sm .i { width: 15px; height: 15px; }
input[type=text], input[type=date], input[type=number], input[type=email], input:not([type]), select, textarea {
  height: 36px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--surface); padding: 0 10px; min-width: 0;
}
textarea { height: auto; min-height: 72px; padding: 8px 10px; resize: vertical; width: 100%; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
@media (max-width: 820px) { input, select, textarea { font-size: 16px; } } /* avoid iOS zoom */
.field { display: flex; flex-direction: column; gap: 5px; }
.field > span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.field input, .field select { width: 100%; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.fgrid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .fgrid { grid-template-columns: 1fr; } }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); margin: 0; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; }
.card-b { padding: 14px 16px 16px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .g2, .g3 { grid-template-columns: minmax(0, 1fr); } }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
@media (max-width: 560px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); min-width: 0; }
.kpi-l { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kpi-v { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 2px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-s { font-size: 12.5px; color: var(--muted); }
.kpi.good .kpi-v { color: var(--good); } .kpi.warn .kpi-v { color: var(--warn); } .kpi.bad .kpi-v { color: var(--bad); }
@media (max-width: 560px) { .kpi-v { font-size: 20px; } }

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.chip.good { background: var(--good-bg); color: var(--good); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.info { background: var(--info-bg); color: var(--info); }
.chip.brand { background: var(--brand-2); color: var(--brand-ink); }

.pbar { height: 6px; background: var(--surface-3); border-radius: 99px; overflow: hidden; min-width: 40px; }
.pbar > i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.pbar.good > i { background: var(--good); } .pbar.warn > i { background: var(--warn); } .pbar.bad > i { background: var(--bad); }

.av {
  --h: 230; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; flex: none; background: hsl(var(--h) 70% 88%); color: hsl(var(--h) 55% 28%);
}
:root[data-theme="dark"] .av { background: hsl(var(--h) 35% 28%); color: hsl(var(--h) 80% 86%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .av { background: hsl(var(--h) 35% 28%); color: hsl(var(--h) 80% 86%); } }
.av.av-none { background: var(--surface-3); color: var(--faint); }
.av.lg { width: 42px; height: 42px; font-size: 15px; }

.seg { display: inline-flex; background: var(--surface-2); border-radius: 9px; padding: 3px; gap: 2px; border: 1px solid var(--border); }
.seg button { white-space: nowrap; border: 0; background: transparent; height: 28px; padding: 0 12px; border-radius: 7px; cursor: pointer; font-weight: 550; color: var(--muted); font-size: 13px; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface); }
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .r, .tbl th.r { text-align: right; }
.tbl tfoot td { font-weight: 700; border-top: 1px solid var(--border); }
.tbl input[type=number] { width: 110px; text-align: right; height: 30px; }

.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty h2 { color: var(--text); margin-bottom: 6px; }
.empty .btn { margin-top: 14px; }
.list { display: flex; flex-direction: column; }
.li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.li:last-child { border-bottom: 0; }
.li-main { flex: 1; min-width: 0; }
.li-t { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-s { font-size: 12.5px; color: var(--muted); }
.section-t { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 8px; }

/* ---------- modal & toast ---------- */
dialog.modal {
  border: 0; padding: 0; border-radius: 16px; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px);
  background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
dialog.modal.wide { width: min(760px, calc(100vw - 24px)); }
dialog.modal::backdrop { background: rgba(10,12,24,.45); }
dialog.modal form { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
dialog.modal header { display: flex; align-items: center; gap: 10px; padding: 16px 18px 10px; }
dialog.modal header h2 { flex: 1; font-size: 17px; }
.m-body { padding: 4px 18px 16px; overflow-y: auto; }
dialog.modal footer { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
@media (max-width: 560px) {
  dialog.modal, dialog.modal.wide { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 18px 18px 0 0; max-height: 92dvh; }
  dialog.modal form { max-height: 92dvh; }
}
.sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sheet-grid a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 12px; background: var(--surface-2); color: var(--text); text-decoration: none; font-size: 13px; font-weight: 550; }
.sheet-grid a.on { background: var(--brand-2); color: var(--brand-ink); }
.sheet-grid .i { width: 22px; height: 22px; }
.menu-list { display: flex; flex-direction: column; }
.menu-list button { display: flex; align-items: center; gap: 10px; padding: 12px 6px; border: 0; background: none; text-align: left; cursor: pointer; border-bottom: 1px solid var(--border); font-weight: 500; }
.menu-list button:last-child { border-bottom: 0; }
.menu-list button:hover { color: var(--brand); }
.menu-list button.danger-t { color: var(--bad); }
.menu-list button:disabled { opacity: .4; cursor: default; }
#toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
@media (max-width: 820px) { #toasts { bottom: calc(var(--tab-h) + 16px + env(safe-area-inset-bottom)); } }
.toast { background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 550; box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: tin .2s ease-out; max-width: 90vw; }
.toast.bad { background: var(--bad); color: #fff; }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }

/* ---------- dashboard ---------- */
.hero { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 16px 18px; }
.hero h2 { font-size: 20px; letter-spacing: -.01em; }
.phase-mini { display: flex; gap: 4px; margin-top: 10px; }
.phase-mini i { height: 6px; flex: 1; border-radius: 99px; background: var(--surface-3); }
.phase-mini i.done { background: var(--good); } .phase-mini i.cur { background: var(--brand); }
.insight { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); text-decoration: none; color: var(--text); }
.insight + .insight { margin-top: 8px; }
.insight .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--info); }
.insight.bad .dot { background: var(--bad); } .insight.warn .dot { background: var(--warn); } .insight.good .dot { background: var(--good); }
.insight:hover { background: var(--surface-3); }
.ally-h { display: flex; align-items: center; gap: 8px; color: var(--brand); }

/* ---------- lifecycle ---------- */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
@media (max-width: 820px) { .steps { display: flex; overflow-x: auto; padding-bottom: 4px; } .step { min-width: 150px; } }
.step { display: flex; gap: 10px; align-items: center; text-align: left; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.step-n { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: var(--surface-3); color: var(--muted); flex: none; }
.step-t small { display: block; color: var(--muted); font-size: 12px; }
.step.done .step-n { background: var(--good); color: var(--rText); }
.step.current .step-n { background: var(--brand); color: var(--on-brand); }
.step.sel { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.gate-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.gate-item:last-child { border-bottom: 0; }
.gate-item.done span { color: var(--muted); text-decoration: line-through; }
.tool-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- WBS ---------- */
.wbs-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.wrow {
  display: grid; grid-template-columns: minmax(200px, 1fr) 150px 56px 88px 110px 110px 34px; align-items: center; gap: 10px;
  padding: 6px 10px 6px calc(10px + var(--d, 0) * 20px); border-bottom: 1px solid var(--border); cursor: pointer; min-height: 44px;
}
.wrow:last-child { border-bottom: 0; }
.wrow:hover { background: var(--surface-2); }
.wrow.head { cursor: default; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--muted); padding-left: 10px; min-height: 36px; }
.wrow.head > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wrow.sum { font-weight: 650; }
.wrow.flash, .li.flash { background: color-mix(in srgb, var(--brand) 14%, transparent); transition: background .3s; }
.w-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.w-name .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-code { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 34px; }
.caret { width: 22px; height: 22px; border: 0; background: none; padding: 0; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; flex: none; }
.caret .i { width: 14px; height: 14px; transition: transform .15s; }
.caret.open .i { transform: rotate(90deg); }
.caret.none { visibility: hidden; }
.w-prog { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.w-prog .pbar { flex: 1; }
.ms-ic { color: var(--ms); display: inline-flex; }
.ms-ic .i { width: 14px; height: 14px; }
@media (min-width: 821px) and (max-width: 1240px) {
  .wrow { grid-template-columns: minmax(0, 1fr) 130px 88px 100px 34px; }
  .wrow > .w-dur, .wrow > .w-bud { display: none; }
}
@media (max-width: 820px) {
  .wrow { grid-template-columns: minmax(0, 1fr) 70px 30px; padding-left: calc(8px + var(--d, 0) * 14px); }
  .wrow > .w-dates, .wrow > .w-dur, .wrow > .w-own, .wrow > .w-bud { display: none; }
  .w-name .t { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; text-align: left; }
  .w-prog .num { display: none; }
}
.org-wrap { overflow: auto; padding: 8px 0 16px; }
.org, .org ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; }
.org ul { padding-top: 18px; position: relative; }
.org li { position: relative; padding: 18px 6px 0; display: flex; flex-direction: column; align-items: center; }
.org > li { padding-top: 0; }
.org li::before, .org li::after { content: ""; position: absolute; top: 0; height: 18px; border-top: 1.5px solid var(--base); width: 50%; }
.org li::before { right: 50%; } .org li::after { left: 50%; border-left: 1.5px solid var(--base); }
.org li:only-child::before, .org li:only-child::after { border-top: 0; }
.org li:only-child::after { border-left: 1.5px solid var(--base); }
.org li:first-child::before, .org li:last-child::after { border-top: 0; }
.org li:last-child::before { border-right: 1.5px solid var(--base); border-top: 1.5px solid var(--base); border-radius: 0 6px 0 0; }
.org li:first-child::after { border-radius: 6px 0 0 0; }
.org > li::before, .org > li::after { display: none; }
.org ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 18px; border-left: 1.5px solid var(--base); }
.onode { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; min-width: 120px; max-width: 170px; cursor: pointer; box-shadow: var(--shadow); text-align: left; }
.onode:hover { border-color: var(--brand); }
.onode.root { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.onode .c { font-size: 11px; color: var(--faint); font-weight: 600; }
.onode.root .c { color: inherit; opacity: .8; }
.onode .n { font-weight: 600; font-size: 13px; line-height: 1.25; margin: 2px 0 6px; }
.onode.leaf { border-style: dashed; }

/* ---------- Gantt ---------- */
.g-wrap { overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); max-height: calc(100dvh - 210px); position: relative; -webkit-overflow-scrolling: touch; }
@media (max-width: 820px) { .g-wrap { max-height: calc(100dvh - 240px - var(--tab-h)); } }
.g-inner { position: relative; isolation: isolate; }
.g-head { display: flex; position: sticky; top: 0; z-index: 8; background: var(--surface); border-bottom: 1px solid var(--border); }
.g-head .g-left { z-index: 9; font-size: 12px; font-weight: 600; color: var(--muted); display: flex; align-items: flex-end; padding-bottom: 6px; }
.g-scale { position: relative; flex: none; }
.g-scale .r1, .g-scale .r2 { position: relative; height: 24px; }
.g-scale .r1 { border-bottom: 1px solid var(--border); }
.g-scale span { position: absolute; top: 0; height: 100%; display: flex; align-items: center; font-size: 11.5px; color: var(--muted); padding-left: 5px; border-left: 1px solid var(--border); white-space: nowrap; overflow: hidden; }
.g-scale .r1 span { font-weight: 600; color: var(--text); }
.g-scale .r2 span.we { background: var(--surface-2); }
.g-scale .r2 span.td { color: var(--brand); font-weight: 700; }
.g-row { display: flex; height: 38px; }
.g-row:hover .g-left { background: var(--surface-2); }
.g-left {
  position: sticky; left: 0; z-index: 6; flex: none; background: var(--surface); border-right: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px; padding: 0 8px 0 calc(8px + var(--d, 0) * 14px); border-bottom: 1px solid var(--border); min-width: 0;
}
.g-left .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; cursor: pointer; }
.g-left.sum .t { font-weight: 650; }
.g-left .w-code { min-width: 0; }
.g-track { position: relative; flex: none; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.g-grid { position: absolute; z-index: 0; pointer-events: none; }
.g-grid i { position: absolute; top: 0; bottom: 0; }
.g-grid i.we { background: var(--surface-2); }
.g-grid i.hol { background: repeating-linear-gradient(135deg, var(--warn-bg) 0 4px, transparent 4px 8px); pointer-events: auto; }
.link-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 72px 28px; gap: 6px; align-items: center; margin-bottom: 6px; }
.link-row select, .link-row input { width: 100%; height: 34px; }
/* Comments */
.cm { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.cm:last-child { border-bottom: 0; }
.cm-b { flex: 1; min-width: 0; font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 2px; white-space: normal; }
.cm-h .icon-btn { margin-left: auto; }
.mention { color: var(--brand); }
.cmt-count { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--muted); }
.cmt-count .i { width: 13px; height: 13px; }
/* Notifications */
.bell { position: relative; }
.bell .badge { position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--badge); color: var(--rText); font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.notif { display: flex; gap: 10px; align-items: flex-start; padding: 10px 8px; border-radius: 10px; cursor: pointer; border: 0; background: none; text-align: left; width: 100%; }
.notif:hover { background: var(--surface-2); }
.notif.unread { background: var(--brand-2); }
.notif .ni { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: var(--surface-3); color: var(--muted); }
.notif.bad .ni { background: var(--bad-bg); color: var(--bad); } .notif.warn .ni { background: var(--warn-bg); color: var(--warn); }
/* Timesheets */
.ts { border-collapse: separate; border-spacing: 0; width: 100%; }
.ts th, .ts td { border-bottom: 1px solid var(--border); padding: 6px; text-align: center; background: var(--surface); }
.ts th { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.ts th.off, .ts td.off { background: var(--surface-2); }
.ts .tn { text-align: left; position: sticky; left: 0; z-index: 1; min-width: 200px; max-width: 280px; }
.ts .tn .t { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.ts input { width: 58px; height: 32px; text-align: center; padding: 0 4px; }
.ts tfoot td { font-weight: 700; }
.ts td.tot { font-weight: 700; }
@media (max-width: 820px) { .ts .tn { min-width: 130px; max-width: 150px; } .ts input { width: 46px; } }
/* Status report */
.report { background: #fff; color: #0f1b2e; max-width: 900px; margin: 0 auto; padding: 36px 40px; border-radius: 12px; box-shadow: var(--shadow); border: 1px solid var(--border); }
.report h1, .report .rp-title { font-size: 24px; color: #05367b; margin: 0; } .report h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #05367b; margin: 22px 0 8px; }
.report .rp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 2px solid #05367b; padding-bottom: 14px; }
.report .rp-head img { width: 150px; }
.report .rp-meta { color: #4f5f77; font-size: 13px; margin-top: 4px; }
.report .rag { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; padding: 6px 12px; border-radius: 8px; }
.report .rag.green { background: #e5f5ea; color: #15803d; } .report .rag.amber { background: #fcf1dd; color: #b45309; } .report .rag.red { background: #fcebeb; color: #c62828; }
.report .rp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.report .rp-kpi { border: 1px solid #d9e2ee; border-radius: 8px; padding: 10px 12px; }
.report .rp-kpi b { display: block; font-size: 20px; } .report .rp-kpi span { font-size: 11.5px; color: #4f5f77; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.report table { width: 100%; border-collapse: collapse; font-size: 13px; }
.report th { text-align: left; background: #edf2f9; color: #05367b; padding: 6px 8px; font-size: 12px; }
.report td { padding: 6px 8px; border-bottom: 1px solid #e3e9f2; vertical-align: top; }
.report .note { min-height: 44px; border: 1px dashed #b6c3d6; border-radius: 8px; padding: 8px 10px; font-size: 13.5px; white-space: pre-wrap; outline: none; }
.report .note:focus { border-color: #0b55b3; border-style: solid; }
.report .note:empty::before { content: attr(data-ph); color: #8492a8; }
.report .rp-foot { margin-top: 26px; font-size: 11px; color: #8492a8; display: flex; justify-content: space-between; }
@media (max-width: 820px) { .report { padding: 20px 16px; } .report .rp-kpis { grid-template-columns: repeat(2, 1fr); } .report .rp-head { flex-direction: column-reverse; } }
.g-grid i.ln { border-left: 1px solid var(--border); }
.g-grid i.today { border-left: 2px solid var(--brand); z-index: 1; }
.g-grid i.status { border-left: 2px dashed var(--good); z-index: 1; }
.g-grid i.deadline { border-left: 3px double var(--bad); z-index: 1; }
.g-arrows { position: absolute; z-index: 2; pointer-events: none; overflow: visible; }
.g-arrows path { fill: none; stroke: var(--faint); stroke-width: 1.3; }
.g-arrows path.crit { stroke: var(--crit); }
.bar {
  position: absolute; top: 9px; height: 20px; border-radius: 5px; background: var(--bar); z-index: 3; cursor: grab; overflow: hidden;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bar-fill); }
.bar.crit { background: var(--crit); } .bar.crit > i { background: var(--crit-fill); }
.bar.dragging { opacity: .85; cursor: grabbing; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.bar .g-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 10px; cursor: ew-resize; z-index: 2; }
.bar.with-base { top: 7px; height: 17px; }
.sbar { position: absolute; top: 13px; height: 8px; background: var(--sum); z-index: 3; border-radius: 2px; }
.sbar::before, .sbar::after { content: ""; position: absolute; bottom: -5px; border: 5px solid transparent; border-top-color: var(--sum); }
.sbar::before { left: 0; border-left-color: var(--sum); } .sbar::after { right: 0; border-right-color: var(--sum); }
.sbar > i { position: absolute; left: 0; top: 2px; bottom: 2px; background: var(--brand); opacity: .9; }
.msb { position: absolute; top: 11px; width: 15px; height: 15px; background: var(--ms); transform: rotate(45deg); z-index: 3; border-radius: 2px; cursor: grab; touch-action: pan-y; }
.msb.crit { background: var(--crit); }
.msb.done { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--good); }
.bbar { position: absolute; top: 28px; height: 5px; background: var(--base); border-radius: 3px; z-index: 2; }
.g-lab { position: absolute; top: 10px; font-size: 12px; color: var(--muted); white-space: nowrap; z-index: 3; pointer-events: none; }
.g-tip { position: fixed; z-index: 90; background: var(--text); color: var(--bg); font-size: 12px; padding: 4px 8px; border-radius: 6px; pointer-events: none; font-weight: 600; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 10px; align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 18px; height: 8px; border-radius: 3px; }

/* ---------- charts ---------- */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { fill: var(--muted); font-size: 11px; }
.chart .gl { stroke: var(--border); }
.chart .ax { stroke: var(--base); }
.chart .s { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chart .pv { stroke: var(--faint); stroke-dasharray: 5 4; }
.chart .ev { stroke: var(--brand); } .chart .ac { stroke: var(--warn); }
.chart .ideal { stroke: var(--faint); stroke-dasharray: 5 4; } .chart .act { stroke: var(--brand); }
.chart .bac { stroke: var(--good); stroke-dasharray: 2 4; stroke-width: 1.5; fill: none; }
.chart .vl { stroke: var(--brand); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .dot { stroke: var(--surface); stroke-width: 2; }
.chart .vbar { fill: var(--brand); }
.chart .vbar.cur { fill: var(--faint); }
.chart .avg { stroke: var(--warn); stroke-dasharray: 5 4; stroke-width: 1.5; }

/* ---------- Scrum ---------- */
.board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
/* Phone: one column per screen width, measured against the board itself. (82vw made the phone's layout viewport
   grow to fit the whole board, which then made every vw larger and the page scroll sideways.) */
@media (max-width: 820px) { .board { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 88%; scroll-snap-type: x mandatory; } .col { scroll-snap-align: start; } }
/* Scrolling areas are positioned so that screen-reader-only text inside them (position: absolute) is clipped with
   them; otherwise it escapes the scroller and makes the whole page scroll sideways on phones. */
.board, .steps, .tbl-wrap, .raci-wrap, .g-wrap, .org-wrap, .heat { position: relative; }
/* Buttons whose label can be long in some languages may wrap instead of pushing the page wider. */
.btn.wrap { white-space: normal; height: auto; min-height: 40px; max-width: 100%; text-align: left; line-height: 1.3; padding-top: 8px; padding-bottom: 8px; }
.col { background: var(--surface-2); border-radius: var(--radius); padding: 10px; min-height: 200px; border: 1px solid var(--border); }
.col.over { outline: 2px dashed var(--brand); outline-offset: -2px; }
.col-h { display: flex; align-items: center; gap: 6px; margin: 2px 4px 10px; font-weight: 650; }
.story { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--shadow); }
.story:hover { border-color: var(--brand); }
.story.dragging { opacity: .5; }
.st-t { font-weight: 550; margin-bottom: 8px; }
.st-m { display: flex; align-items: center; gap: 6px; }
.pts { display: inline-flex; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--brand-2); color: var(--brand-ink); font-size: 12px; font-weight: 700; align-items: center; justify-content: center; }
.sprint-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.bl-row { display: grid; grid-template-columns: 1fr auto auto auto 150px auto; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.bl-row:last-child { border-bottom: 0; }
.bl-row .t { cursor: pointer; font-weight: 550; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-row select { height: 30px; width: 150px; }
@media (max-width: 820px) { .bl-row { grid-template-columns: 1fr auto auto; } .bl-row .hide-sm { display: none; } .bl-row select { grid-column: 1 / -1; width: 100%; } }

/* ---------- RACI ---------- */
.raci-wrap { overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); max-height: calc(100dvh - 230px); }
.raci { border-collapse: separate; border-spacing: 0; }
.raci th, .raci td { border-bottom: 1px solid var(--border); padding: 6px 8px; background: var(--surface); }
.raci thead th { position: sticky; top: 0; z-index: 2; font-size: 12px; vertical-align: bottom; text-align: center; min-width: 76px; }
.raci .rn { position: sticky; left: 0; z-index: 1; min-width: 240px; max-width: 300px; text-align: left; border-right: 1px solid var(--border); }
.raci thead .rn { z-index: 3; }
.raci .rn .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; padding-left: calc(var(--d, 0) * 14px); }
.raci tr.sum .rn .t { font-weight: 650; }
.raci td.c { text-align: center; padding: 4px; }
.raci tfoot td { position: sticky; bottom: 0; background: var(--surface-2); font-size: 12px; text-align: center; color: var(--muted); }
.raci tfoot td.rn { text-align: left; font-weight: 600; }
.rc { width: 36px; height: 30px; border-radius: 7px; border: 1px dashed var(--border); background: transparent; cursor: pointer; font-weight: 800; font-size: 13px; color: var(--faint); }
.rc:hover { border-color: var(--brand); }
.rc.R { background: var(--rR); color: var(--rText); border: 0; } .rc.A { background: var(--rA); color: var(--rText); border: 0; }
.rc.C { background: var(--rC); color: var(--rText); border: 0; } .rc.I { background: var(--rI); color: var(--rText); border: 0; }
.mhead { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mhead b { font-size: 12px; color: var(--text); white-space: nowrap; }
.mhead small { color: var(--faint); font-weight: 500; white-space: nowrap; }
@media (max-width: 820px) { .raci .rn { min-width: 150px; max-width: 170px; } .raci-wrap { max-height: calc(100dvh - 250px - var(--tab-h)); } }
.raci-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.raci-legend .rc { width: 26px; height: 24px; cursor: default; font-size: 12px; margin-right: 4px; }

/* ---------- Risks ---------- */
.risk-grid { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); align-items: start; }
@media (max-width: 1150px) { .risk-grid { grid-template-columns: minmax(0, 1fr); } }
.card-h { flex-wrap: wrap; }
.heat { display: grid; grid-template-columns: 28px repeat(5, 1fr); gap: 4px; max-width: 420px; }
.heat .hc { aspect-ratio: 1.3; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; cursor: pointer; border: 2px solid transparent; font-size: 15px; }
.heat .hc.lo { background: var(--good-bg); color: var(--good); } .heat .hc.md { background: var(--warn-bg); color: var(--warn); } .heat .hc.hi { background: var(--bad-bg); color: var(--bad); }
.heat .hc.sel { border-color: var(--text); }
.heat .ax { font-size: 11px; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.score { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; font-weight: 800; flex: none; }
.score.lo { background: var(--good-bg); color: var(--good); } .score.md { background: var(--warn-bg); color: var(--warn); } .score.hi { background: var(--bad-bg); color: var(--bad); }
.risk-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.risk-card:last-child { border-bottom: 0; }
.risk-card.closed { opacity: .6; }

/* ---------- Team & projects ---------- */
.member { display: flex; gap: 12px; align-items: center; padding: 14px; }
.member .m-main { flex: 1; min-width: 0; }
.member .m-stats { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.pcard { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.pcard.cur { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.pcard h2 { font-size: 16px; }

@page { size: A4; margin: 12mm; }
@media print {
  .side, .tabbar, .top, .top-actions, .toolbar, .no-print, #toasts, dialog { display: none !important; }
  html, body, .app, .main { background: #fff !important; display: block; min-height: 0; }
  #view { padding: 0 !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .report { box-shadow: none; border: 0; padding: 0; max-width: none; border-radius: 0; }
  .report .note { border: 0; padding: 0; min-height: 0; }
  .report .note:empty { display: none; }
  .report .rp-sec, .report tr { break-inside: avoid; }
  .report .grid.g2 { grid-template-columns: 1fr 1fr; }
  .report .rp-kpis { grid-template-columns: repeat(4, 1fr); }
  .report .rp-head { flex-direction: row; }
}

/* ---------- Accessibility (WCAG 2.2 AA) ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 200; background: var(--brand); color: var(--on-brand); padding: 10px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 8px; }
/* One visible focus ring for every interactive element, keyboard only. */
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
/* The title and the main area take focus from the app after a route change (tabindex=-1, never by Tab): no box. */
#title:focus, #title:focus-visible, #view:focus, #view:focus-visible { outline: none; }
.side :focus-visible, .top :focus-visible { outline-color: var(--side-focus); }
[role="button"] { cursor: pointer; }
fieldset.actuals { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px 12px; margin: 0; min-width: 0; }
fieldset.actuals legend { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 0 6px; }
.ferr { display: block; color: var(--bad); font-size: 12.5px; font-weight: 600; margin-top: 4px; }
[aria-invalid="true"] { border-color: var(--bad) !important; box-shadow: 0 0 0 1px var(--bad); }
.toast { display: flex; align-items: center; gap: 12px; pointer-events: auto; }
.toast-act { background: none; border: 1px solid currentColor; color: inherit; border-radius: 6px; padding: 4px 10px; font-weight: 700; cursor: pointer; }
/* Meaning never by colour alone: critical bars are striped, risk bands carry a symbol. */
.bar.crit { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.28) 0 4px, transparent 4px 9px); }
.legend i.crit-key { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.4) 0 3px, transparent 3px 6px); }
.heat .hc { position: relative; }
.heat .hc.hi::after, .heat .hc.md::after { position: absolute; top: 3px; right: 5px; font-size: 10px; opacity: .85; }
.heat .hc.hi::after { content: "▲"; } .heat .hc.md::after { content: "◆"; }
.raci .rc { min-width: 36px; }
.raci-legend .rc { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
/* Phones: touch targets of at least 44 px. */
@media (max-width: 820px) {
  .btn.sm { min-height: 40px; }
  .icon-btn, .icon-btn.sm { width: 44px; height: 44px; }
  .caret { width: 36px; height: 36px; }
  .rc { width: 44px; height: 40px; }
  .ts input { height: 44px; }
  .seg button { min-height: 40px; }
  .check input { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Resource workload (Team screen) */
.wl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wl-table { border-collapse: separate; border-spacing: 4px; min-width: 100%; font-size: 13px; }
.wl-table th { text-align: left; font-weight: 600; color: var(--muted); white-space: nowrap; padding: 2px 6px; }
.wl-table tbody th { color: var(--text); }
.wl-table tbody th .faint { display: block; font-weight: 500; font-size: 11.5px; }
.wl-name { display: block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.wl-cell { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 56px; min-height: 36px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface, transparent); color: var(--text); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.wl-cell:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.wl-cell.lv1 { background: var(--good-bg); color: var(--good); }
.wl-cell.lv2 { background: var(--warn-bg); color: var(--warn); }
.wl-cell.lv3 { background: var(--bad-bg); color: var(--bad); font-weight: 700; border-color: var(--bad); }
.wl-mark { font-weight: 800; }
.wl-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.wl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wl-legend .wl-cell { min-width: 18px; min-height: 14px; cursor: default; }
.wl-alert { display: flex; gap: 8px; align-items: flex-start; color: var(--bad); font-weight: 600; font-size: 13px; margin: 0 0 10px; }
.wl-alert svg { flex: none; width: 18px; height: 18px; }
.wl-table thead th:first-child, .wl-table tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Portfolio */
.pf-table th[scope=row] { min-width: 170px; }
.pf-tl { width: 100%; height: auto; }
.pf-tl text { font-size: 12px; fill: var(--muted); }
.pf-bar.green { fill: var(--good-bg); stroke: var(--good); }
.pf-bar.amber { fill: var(--warn-bg); stroke: var(--warn); }
.pf-bar.red { fill: var(--bad-bg); stroke: var(--bad); stroke-width: 2; }
.pf-done { fill: var(--text); opacity: .75; }
.pf-base { fill: var(--text); }
.pf-key { border: 1px solid; }
.pf-key.green { background: var(--good-bg) !important; border-color: var(--good); }
.pf-key.amber { background: var(--warn-bg) !important; border-color: var(--warn); }
.pf-key.red { background: var(--bad-bg) !important; border-color: var(--bad); }

/* ---------- Procurement: quotation comparison ---------- */
.tbl.compare th[scope=row] { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; font-weight: 600; min-width: 150px; }
.tbl.compare thead th { vertical-align: top; min-width: 130px; }
.tbl.compare thead th .chip { margin: 4px 4px 0 0; }
.tbl.compare tr.tot th, .tbl.compare tr.tot td { border-top: 2px solid var(--border); }
@media print { .tbl.compare th[scope=row] { position: static; } .tbl.compare input { border: 0; background: none; } }