/* The portal's web client. Layout: sticky top bar - sign-in screen or project header - summary strip - 2/3 modules+roadmap+activity | 1/3 waiting+questions+change requests+approvals+risks+decisions+hours+quality - modals for detail - A4 print.
   Forked from the v4 mockup shell (client-dashboard/index.html); the tokens, components and print rules are the same. New here: the sign-in screen (si-), the project select, the disabled button state
   and developer mode (dv-): the Developer chip in the top bar and the Developer inbox card. */
:root {
  --bg:#F3F5F8; --surface:#FFFFFF; --surface-2:#EEF2F6; --line:#DAE1E9; --fg:#16202B; --muted:#5A6777;
  --accent:#1F5C99; --accent-soft:#E5EDF6; --on-accent:#FFFFFF;
  --ok:#1D7A4E; --ok-soft:#E2F2E9; --warn:#965F00; --warn-soft:#FAEFD9; --crit:#B3222C; --crit-soft:#FAE5E6;
  --paper:#FFFFFF; --ink:#111820;           /* report sheet: always light */
  --paper-2:#F3F4F6; --paper-line:#C9CFD6; --paper-muted:#4B5663; --paper-accent:#1F4E7F;
  --paper-ok:#1B6B45; --paper-warn:#865700; --paper-crit:#A61F29; --paper-bar:#59636F;
  --scrim: rgb(10 16 24 / .45);
  --r-sm:8px; --r:10px; --r-lg:14px;
  --shadow: 0 12px 40px rgb(15 25 40 / .18);
  --font-ui:"IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-report:"IBM Plex Serif", Georgia, "Times New Roman", serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#0E1319; --surface:#151C24; --surface-2:#1B242F; --line:#2A3542; --fg:#E5EAF0; --muted:#98A5B4;
  --accent:#6CA7E6; --accent-soft:#182A3F; --on-accent:#0E1319;
  --ok:#4CC08A; --ok-soft:#11281E; --warn:#E0A63A; --warn-soft:#2D2311; --crit:#EF7179; --crit-soft:#32191C;
  --shadow: 0 12px 40px rgb(0 0 0 / .5); color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg:#0E1319; --surface:#151C24; --surface-2:#1B242F; --line:#2A3542; --fg:#E5EAF0; --muted:#98A5B4;
  --accent:#6CA7E6; --accent-soft:#182A3F; --on-accent:#0E1319;
  --ok:#4CC08A; --ok-soft:#11281E; --warn:#E0A63A; --warn-soft:#2D2311; --crit:#EF7179; --crit-soft:#32191C;
  --shadow: 0 12px 40px rgb(0 0 0 / .5); color-scheme: dark; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-ui); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
:root { scrollbar-gutter: stable; }
:root:has(.dlg[open]) { overflow: hidden; }
body { margin: 0; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; -webkit-text-size-adjust: 100%; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.mono { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.warn-t { color: var(--warn); font-weight: 500; }
.crit-t { color: var(--crit); font-weight: 500; }
.ok-t { color: var(--ok); font-weight: 500; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.empty { padding: 24px 16px; text-align: center; color: var(--muted); font-size: 13px; line-height: 18px; }
.print-only { display: none; }

/* an empty slot (no Approvals module, or nothing to show) must not add a gap in the column */
.card-approvals:empty { display: none; }

/* ---------- state vocabulary: kinds, pills, dots, bars ---------- */
.k-ok, .pill-ok, .dot-ok { --tone: var(--ok); --tone-soft: var(--ok-soft); }
.k-accent, .pill-accent, .dot-accent { --tone: var(--accent); --tone-soft: var(--accent-soft); }
.k-warn, .pill-warn, .dot-warn { --tone: var(--warn); --tone-soft: var(--warn-soft); }
.k-crit, .pill-crit, .dot-crit { --tone: var(--crit); --tone-soft: var(--crit-soft); }
.k-neutral, .pill-neutral, .dot-neutral { --tone: var(--muted); --tone-soft: var(--surface-2); }
.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--muted)); }
.dot.none { background: transparent; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; line-height: 1; font-weight: 500; white-space: nowrap; color: var(--tone, var(--muted));
  background: var(--pill-fill, var(--tone-soft, var(--surface-2))); border: 1px solid var(--pill-edge, transparent);
}
.pill .dot { background: currentColor; }
.chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--muted); font-size: 12px; line-height: 1; font-weight: 500; white-space: nowrap;
}
.chip.sm { height: 20px; padding: 0 8px; margin-left: 8px; vertical-align: 1px; }
.upd .dot { margin-right: 2px; vertical-align: 1px; }
.bar { height: 6px; border-radius: 999px; background: var(--bar-track, var(--line)); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--bar-fill, var(--tone, var(--accent))); }
.segs { display: flex; gap: 4px; }
.segs i { flex: 1; height: 6px; border-radius: 999px; background: var(--bar-track, var(--line)); }
.segbar { display: flex; gap: 2px; height: 8px; border-radius: 999px; overflow: hidden; background: var(--bar-track, var(--line)); }
.segbar > i { display: block; background: var(--bar-fill, var(--tone, var(--accent))); }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--fg);
  font-size: 13px; line-height: 1; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); }
.btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--fg)); }
.btn-sm { height: 30px; padding: 0 12px; }
.btn:disabled { opacity: .55; cursor: default; }
.btn:disabled:hover { background: var(--surface); }
.btn-primary:disabled:hover { background: var(--accent); }
.lnk, .link-btn {
  appearance: none; background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--accent);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: left;
}
.lnk.mono { color: var(--accent); font-weight: 500; }

/* ---------- page frame and top bar ---------- */
.page { --gutter: max(16px, calc((100vw - 1240px) / 2)); padding-inline: var(--gutter); padding-block: 0 40px; }
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; margin-inline: calc(-1 * var(--gutter));
  padding: 10px var(--gutter); background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
}
.brand { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; min-width: 0; }
.brand-name { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -.005em; }
.brand-sep { width: 1px; height: 16px; background: var(--line); }
.brand-proj { font-size: 14px; line-height: 24px; color: var(--muted); }
.sel {
  max-width: 100%; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--fg);
  font: inherit; font-size: 13px; line-height: 18px; cursor: pointer;
}
.sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.bar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.upd { font-size: 13px; line-height: 18px; color: var(--muted); }
.upd.crit-t { color: var(--crit); font-weight: 500; }
.btns { display: flex; gap: 8px; }
.avatar { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12px; line-height: 1; font-weight: 600; letter-spacing: .02em; }
.avatar.lg { width: 40px; height: 40px; font-size: 14px; }
.who {
  appearance: none; display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; padding: 4px 12px 4px 4px;
  border: 1px solid transparent; border-radius: var(--r-sm); background: none; text-align: left; cursor: pointer; font: inherit; color: inherit;
  transition: background-color .12s, border-color .12s;
}
.who:hover { background: var(--surface-2); border-color: var(--line); }
.who-t { display: flex; flex-direction: column; min-width: 0; }
.who-l { font-size: 12px; line-height: 14px; color: var(--muted); }
.who-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 18px; font-weight: 500; }
.who .dv-chip { flex: none; margin-left: 0; color: var(--accent); background: var(--accent-soft); border-color: transparent; }
@media (max-width: 639px) {
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand who" "upd upd" "btns btns"; align-items: center; gap: 4px 8px; padding-block: 8px 10px; }
  .brand { grid-area: brand; }
  .bar-right { display: contents; }
  .upd { grid-area: upd; font-size: 12px; line-height: 16px; }
  .who { grid-area: who; justify-self: end; padding-right: 4px; max-width: 60vw; }   /* a long name shortens with an ellipsis (.who-n) instead of pushing the project name away; the avatar and the chip stay */
  .who-l { display: none; }
  .btns { grid-area: btns; flex-wrap: wrap; margin-top: 4px; }
  .btns .btn { flex: 1 1 0; padding: 0 8px; }
  .topbar.has-who .brand { flex-direction: column; align-items: flex-start; gap: 0; }
  .topbar.has-who .brand-sep { display: none; }
  .topbar.has-who .brand-name { line-height: 22px; }
  .topbar.has-who .brand-proj { font-size: 13px; line-height: 18px; }
}

/* ---------- cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; overflow: hidden; overflow: clip; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.card-h h2 { font-size: 14px; line-height: 20px; font-weight: 600; }
.card-h .sub { font-size: 13px; line-height: 18px; color: var(--muted); }
.card-f { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }

/* ---------- project header ---------- */
.proj { margin-top: 20px; padding: 20px; }
.proj-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.proj-name { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.005em; }
.proj-client { font-size: 14px; line-height: 20px; color: var(--muted); }
.proj-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.proj-hl { font-size: 12px; line-height: 16px; color: var(--muted); }
.proj-note { margin-top: 12px; max-width: 78ch; font-size: 14px; line-height: 22px; }
.proj-upd { margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--muted); }
.proj-dates { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.proj-dates > div { min-width: 0; }
.proj-dates dt { font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.proj-dates dd { margin-top: 2px; font-size: 14px; line-height: 20px; }
.proj-dates .sub { display: block; font-size: 12px; line-height: 16px; color: var(--muted); }

/* ---------- summary strip ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
@media (max-width: 1023px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .tiles { grid-template-columns: minmax(0, 1fr); } }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; min-width: 0; text-align: left; }
.tile-l { font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.tile-v { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 6px; min-height: 34px; font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.01em; }
.tile-v .u { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.tile-s { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 22px; font-size: 13px; line-height: 18px; color: var(--muted); }
.tile-x { margin-top: auto; padding-top: 14px; }
.tile-btn { appearance: none; width: 100%; cursor: pointer; font: inherit; color: inherit; transition: background-color .12s, border-color .12s; }
.tile-btn:hover { background: var(--surface-2); }
.tile.is-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.tile.is-warn .tile-v, .tile.is-warn .tile-l, .tile.is-warn .tile-v .u { color: var(--warn); }
.tile.is-warn .tile-s { color: var(--fg); }
.tile.is-warn.tile-btn:hover { background: var(--warn-soft); border-color: var(--warn); }
.tile-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--accent); }

/* ---------- main grid ---------- */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
@media (min-width: 1024px) { .grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---------- modules and features ---------- */
.card-mod { container: mf / inline-size; }
.mod + .mod { border-top: 1px solid var(--line); }
.mod-h { display: grid; grid-template-columns: minmax(0, 1fr) 168px auto; gap: 8px 16px; align-items: center; padding: 12px 16px; background: var(--surface-2); border-top: 1px solid var(--line); }
.card-mod .mod:first-child .mod-h { border-top: 0; }
.mod-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.mod-name { font-weight: 600; }
.mod-meta { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--muted); }
.bud-n { display: block; margin-bottom: 4px; font-size: 12px; line-height: 16px; color: var(--muted); }
.fl > li { display: grid; grid-template-columns: 48px minmax(0, 1fr) 136px 40px 96px 72px; gap: 6px 10px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); }
.fl > li:first-child { border-top: 0; }
.fr-t { font-weight: 500; overflow-wrap: anywhere; }
.fr-d { display: block; }
.fr-dl { display: block; margin-top: 1px; font-size: 12px; line-height: 16px; color: var(--muted); }
.fr-r { text-align: right; }
@container mf (max-width: 639px) {
  .mod-h { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top act" "bud bud"; }
  .mod-h .mod-main { grid-area: top; }
  .mod-h .mod-act { grid-area: act; }
  .mod-h .bud { grid-area: bud; }
  .fl > li { grid-template-columns: 40px minmax(0, auto) minmax(0, 1fr) auto; grid-template-areas: "id ti ti bt" ". st rl dt"; gap: 8px; padding: 12px 16px; }
  .fl .fr-id { grid-area: id; } .fl .fr-ti { grid-area: ti; } .fl .fr-bt { grid-area: bt; } .fl .fr-st { grid-area: st; }
  .fl .fr-rl { grid-area: rl; } .fl .fr-dt { grid-area: dt; text-align: right; }
}

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; }
.tbl-wrap.box { border: 1px solid var(--line); border-radius: var(--r-sm); }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap;
  font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--muted);
}
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.tbl tbody tr:last-child > td, .tbl tbody tr:last-child > th { border-bottom: 0; }
.tbl .num { text-align: right; }
.tbl .grp td, .tbl .grp th { background: var(--surface-2); font-weight: 600; }
@media (max-width: 599px) {
  :is(.page, .dlg:not(.is-report)) .tbl.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  :is(.page, .dlg:not(.is-report)) .tbl.stack, :is(.page, .dlg:not(.is-report)) .tbl.stack tbody { display: block; }
  :is(.page, .dlg:not(.is-report)) .tbl.stack tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  :is(.page, .dlg:not(.is-report)) .tbl.stack tbody tr:last-child { border-bottom: 0; }
  :is(.page, .dlg:not(.is-report)) .tbl.stack td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  :is(.page, .dlg:not(.is-report)) .tbl.stack td::before { content: attr(data-l); flex: none; font-size: 12px; line-height: 18px; color: var(--muted); text-align: left; }
  :is(.page, .dlg:not(.is-report)) .tbl.stack td[data-l=""]::before { display: none; }
  :is(.page, .dlg:not(.is-report)) .tbl.stack td[data-l=""] { justify-content: flex-start; text-align: left; }
  :is(.page, .dlg:not(.is-report)) .tbl.stack td:first-child { display: block; padding-bottom: 6px; font-weight: 500; text-align: left; }
  :is(.page, .dlg:not(.is-report)) .tbl.stack td:first-child::before { display: none; }
}

/* ---------- timeline (activity) ---------- */
.tl { padding: 16px; }
.tl-i { position: relative; display: grid; grid-template-columns: 64px 8px minmax(0, 1fr); column-gap: 12px; padding-bottom: 16px; }
.tl-i:last-child { padding-bottom: 0; }
.tl-i:not(:last-child)::before { content: ""; position: absolute; left: 79px; top: 18px; bottom: -2px; width: 2px; background: var(--line); }
.tl-when { font-size: 13px; line-height: 20px; white-space: nowrap; }
.tl-when span { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--muted); }
.tl-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--tone, var(--muted)); }
.tl-text { min-width: 0; overflow-wrap: anywhere; }
.tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--muted); }
.tl-kind { font-weight: 500; color: var(--tone, var(--muted)); }

/* ---------- waiting, risks, decisions ---------- */
.qitem {
  appearance: none; display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 12px; width: 100%; padding: 12px 16px;
  background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: background-color .12s;
}
.qitem:hover { background: var(--surface-2); }
.qitem:focus-visible { outline-offset: -2px; }
.qitem > .dot { margin-top: 6px; }
.qlist > li + li > .qitem { border-top: 1px solid var(--line); }
.q-main { display: block; min-width: 0; }
.q-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-weight: 500; overflow-wrap: anywhere; }
.q-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--muted); }
.q-meta .pill { height: 20px; padding: 0 8px; }
.q-to.is-you { color: var(--fg); font-weight: 500; }
.dl > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; padding: 12px 16px; }
.dl > li + li { border-top: 1px solid var(--line); }
.dl-when { font-size: 13px; line-height: 20px; white-space: nowrap; }
.dl-t { font-weight: 500; overflow-wrap: anywhere; }
.dl-m { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--muted); }
.dl-m .pill { height: 20px; padding: 0 8px; }

/* ---------- developer inbox (developer mode): three groups in the card that replaces "Waiting for you" ---------- */
.dv-g + .dv-g { border-top: 1px solid var(--line); }
.dv-gh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px 4px; font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.dv-n { font-variant-numeric: tabular-nums; }
.dv-note { padding: 0 16px 4px; font-size: 12px; line-height: 16px; color: var(--muted); }
.dv-empty { padding: 6px 16px 14px; font-size: 13px; line-height: 18px; color: var(--muted); }

/* ---------- quality and security rows ---------- */
.kvt { width: 100%; border-collapse: collapse; }
.kvt th, .kvt td { padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 18px; font-weight: 400; text-align: left; vertical-align: baseline; }
.kvt tr:last-child > th, .kvt tr:last-child > td { border-bottom: 0; }
.kvt .lab { display: flex; align-items: center; gap: 10px; }
.kvt td { text-align: right; font-weight: 500; white-space: nowrap; }

/* ---------- footer ---------- */
.page-foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; line-height: 16px; color: var(--muted); }
.page-foot p + p { margin-top: 4px; }
.page-foot:empty { display: none; }

/* ---------- placeholders ---------- */
.ph { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px; text-align: center; color: var(--muted); }
.ph svg { margin-bottom: 8px; }
.ph-t { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--fg); }
.ph-s { max-width: 44ch; font-size: 13px; line-height: 18px; }

/* ---------- loading and unavailable states (shown instead of the overview) ---------- */
.state { margin-top: 20px; }
.state .ph { padding: 44px 16px; }
.spin { width: 28px; height: 28px; margin-bottom: 8px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.sk { min-height: 96px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); animation: sk-pulse 1.4s ease-in-out infinite; }
.sk.wide { grid-column: 1 / -1; min-height: 160px; }
@keyframes sk-pulse { 50% { opacity: .55; } }
@media (max-width: 1023px) { .sk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .sk-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- sign-in screen (shown instead of the overview) ---------- */
.si { display: flex; justify-content: center; margin-top: 40px; }
.si-card { width: min(440px, 100%); padding: 24px; }
.si-head { margin-bottom: 20px; }
.si-title { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.005em; }
.si-sub { margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--muted); }
.si-form { display: grid; gap: 4px; }
.si-field { min-width: 0; }
.si-label { display: block; margin: 0 0 4px; font-size: 13px; line-height: 18px; font-weight: 500; }
.si-input {
  display: block; width: 100%; max-width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--fg); font: inherit; font-size: 14px; line-height: 20px; transition: border-color .12s;
}
.si-code { font-family: var(--font-mono); font-size: 18px; line-height: 24px; letter-spacing: .2em; }
.si-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.si-input[aria-invalid="true"] { border-color: var(--crit); box-shadow: 0 0 0 1px var(--crit); }
.si-err { min-height: 16px; margin: 6px 0 8px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--crit); }
.si-sent { margin-bottom: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.si-btn { width: 100%; height: 38px; }
.si-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 14px; font-size: 13px; line-height: 18px; }
@media (max-width: 559px) {
  .si { margin-top: 20px; }
  .si-card { padding: 20px 16px; }
  .si-input { font-size: 16px; }
  .si-code { font-size: 18px; }
}

/* ---------- report header/footer (shown in report view and print) ---------- */
.rep-head, .rep-foot, .print-head { display: none; }
.rep-kicker { font-size: 11px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.rep-title { margin: 6px 0 4px; font-family: var(--font-report); font-size: 28px; line-height: 34px; font-weight: 600; color: var(--fg); }
.rep-meta { font-size: 13px; line-height: 18px; color: var(--muted); }
.print-sheet { display: none; }

/* ---------- dialog system ---------- */
.dlg {
  padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--fg);
  box-shadow: var(--shadow); width: min(880px, calc(100% - 32px)); max-width: none; max-height: min(88vh, calc(100% - 32px)); overflow: hidden;
}
.dlg[open] { display: flex; flex-direction: column; animation: dlg-in .15s ease-out; }
.dlg::backdrop { background: var(--scrim); animation: dlg-fade .15s ease-out; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes dlg-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .dlg[open], .dlg::backdrop { animation: none; }
  .btn, .tile-btn, .qitem, .who, .si-input { transition: none; }
  .spin, .sk { animation: none; }
}
.dlg-head { flex: none; padding: 16px 20px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.dlg-title { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.005em; overflow-wrap: anywhere; }
.dlg-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: 13px; line-height: 20px; color: var(--muted); }
.dlg-sub:empty { display: none; }
.dlg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; overscroll-behavior: contain; padding: 20px; }
.dlg-body:focus { outline: none; }
.dlg.is-report .dlg-body { background: var(--surface-2); }
.dlg-foot { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface); }
#dlg-back { margin-right: auto; }
@media (max-width: 599px) {
  .dlg-head { padding: 14px 16px 12px; }
  .dlg-body { padding: 16px; }
  .dlg-foot { padding: 12px 16px; }
}

/* sheet = the content of a modal; .rv turns it into the A4 report */
.sheet { container: sheet / inline-size; }
.sec + .sec { margin-top: 24px; }
.sec-h { margin-bottom: 10px; font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.sec-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sec-top .sec-h { margin-bottom: 0; }
.sec-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lead { font-size: 14px; line-height: 22px; }
.lead.gap { margin-top: 14px; }
.note-box { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--muted); font-size: 13px; line-height: 18px; }
.note-box.gap { margin-top: 14px; }
.note-box .mono { color: var(--fg); font-size: 13px; user-select: text; }
.facts { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 16px; }
.facts.flush { margin-top: 0; }
.facts > div { min-width: 0; }
.facts dt { font-size: 12px; line-height: 16px; color: var(--muted); }
.facts dd { margin-top: 2px; font-size: 14px; line-height: 20px; }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.kv-i { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 14px; background: var(--surface); font-size: 13px; line-height: 18px; }
.kv-l { min-width: 0; color: var(--muted); }
.kv-v { font-weight: 500; text-align: right; }
.stepper-wrap { container: stp / inline-size; }
.stepper { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
.step { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-right: 4px; }
.step::after { content: ""; position: absolute; top: 11px; left: 32px; right: 4px; height: 2px; border-radius: 2px; background: var(--line); }
.step:last-child::after { display: none; }
.step.is-done::after { background: var(--ok); }
.node { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); color: var(--muted); font-size: 12px; line-height: 1; font-weight: 600; }
.is-done .node { background: var(--ok); border-color: var(--ok); color: var(--on-accent); }
.is-current .node { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.step-label { font-size: 12px; line-height: 16px; color: var(--muted); overflow-wrap: anywhere; }
.is-done .step-label { color: var(--fg); }
.is-current .step-label { color: var(--fg); font-weight: 600; }
@container stp (max-width: 559px) {
  .stepper { display: flex; flex-direction: column; }
  .step { flex-direction: row; align-items: center; gap: 12px; padding: 0 0 14px; }
  .step:last-child { padding-bottom: 0; }
  .step::after { top: 26px; bottom: -2px; left: 11px; right: auto; width: 2px; height: auto; }
  .step-label { font-size: 13px; line-height: 18px; }
}
.rows { border: 1px solid var(--line); border-radius: var(--r-sm); }
.rows > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; }
.rows > li + li { border-top: 1px solid var(--line); }
.you { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.you-main { flex: 1 1 220px; min-width: 0; }
.you-name { font-size: 16px; line-height: 24px; font-weight: 500; }
.you-title { font-size: 13px; line-height: 18px; color: var(--muted); }
.you-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--muted); }
.you-meta .mono { color: var(--fg); overflow-wrap: anywhere; }
.roles > li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; }
.roles .pill { justify-self: start; }
.roles-t { font-size: 13px; line-height: 18px; }
.people .c-name { min-width: 200px; }
.people .c-role { width: 108px; }
.people .c-since { width: 124px; white-space: nowrap; }
.p-name { display: block; font-weight: 500; }
.p-title { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--muted); }
.people .mono { color: var(--fg); overflow-wrap: anywhere; }
.people tr.is-me td { background: var(--surface-2); }
.fine { margin-top: 10px; font-size: 12px; line-height: 16px; color: var(--muted); }
.metrics { min-width: 560px; }
.metrics th[scope="row"] { position: sticky; left: 0; z-index: 1; min-width: 200px; background: var(--surface); border-right: 1px solid var(--line); text-transform: none; letter-spacing: 0; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--fg); white-space: normal; }
.metrics thead th:first-child { position: sticky; left: 0; z-index: 1; border-right: 1px solid var(--line); }
.metrics thead th.num { min-width: 112px; white-space: normal; }
.metrics .h-t { display: block; letter-spacing: 0; text-transform: none; font-size: 13px; line-height: 16px; font-weight: 500; color: var(--fg); }
.metrics .h-id { display: block; margin-top: 2px; text-transform: none; letter-spacing: 0; }
.metrics td { padding: 9px 12px; font-size: 13px; line-height: 18px; }
.metrics .col-proj { background: var(--surface-2); font-weight: 600; border-left: 1px solid var(--line); }
.cell-v { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 20px; font-size: 12px; line-height: 16px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.sum { table-layout: fixed; }
.sum td { vertical-align: top; }
.sum-v { display: block; font-size: 20px; line-height: 28px; font-weight: 600; }
.sum-s { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--muted); }
.rp-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 14px 0 6px; font-size: 14px; line-height: 20px; font-weight: 600; }
.rp-h:first-child { margin-top: 0; }
.rp-upd { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--muted); }
.rp-kv { margin-top: 14px; }
.steps-list { display: grid; gap: 8px; margin-top: 10px; }
.steps-list > li { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 12px; }
.steps-list .dot { margin-top: 6px; }
.lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lcard { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); min-width: 0; }
.lcard h3 { margin-bottom: 8px; font-size: 14px; line-height: 20px; font-weight: 600; }
.flist > li { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; }
.flist > li:first-child { border-top: 0; }
.flist .dot { margin-top: 5px; }

/* narrow sheet (phones, not the A4 report) */
@container sheet (max-width: 559px) {
  .people { min-width: 0; }
  .people thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .people, .people tbody { display: block; }
  .people tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name role" "email email" "since since"; gap: 6px 12px; padding: 12px; border-bottom: 1px solid var(--line); }
  .people-dev tr { grid-template-areas: "name role" "email email"; }
  .people tbody tr:last-child { border-bottom: 0; }
  .people td { display: block; padding: 0; border: 0; background: none; }
  .people tr.is-me { background: var(--surface-2); }
  .people .c-name, .people .c-role, .people .c-email, .people .c-since { width: auto; min-width: 0; }
  .people .c-name { grid-area: name; } .people .c-role { grid-area: role; } .people .c-email { grid-area: email; } .people .c-since { grid-area: since; font-size: 13px; line-height: 18px; color: var(--muted); }
  .people .c-since::before { content: "Access since "; }
  .you-main { flex-basis: 160px; }
  .kv, .lists { grid-template-columns: minmax(0, 1fr); }
  .rows > li { flex-wrap: wrap; }
  .sum, .sum tbody, .sum thead, .sum tr, .sum th, .sum td { display: block; }
  .sum thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sum td { padding: 10px 12px; }
  .sum td::before { content: attr(data-l); display: block; margin-bottom: 2px; font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
}

/* report look: also used by the print copy of a modal */
.rv {
  --surface: var(--paper); --surface-2: var(--paper-2); --line: var(--paper-line); --fg: var(--ink); --muted: var(--paper-muted);
  --accent: var(--paper-accent); --accent-soft: var(--paper-2); --on-accent: var(--paper);
  --ok: var(--paper-ok); --ok-soft: var(--paper-2); --warn: var(--paper-warn); --warn-soft: var(--paper-2);
  --crit: var(--paper-crit); --crit-soft: var(--paper-2);
  --pill-fill: transparent; --pill-edge: currentColor; --bar-fill: var(--paper-bar); --bar-track: var(--paper-line);
  background: var(--paper); color: var(--ink); font-size: 13px; line-height: 18px;
}
.rv .rep-head { display: block; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.rv .rep-foot { display: block; margin-top: 28px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; line-height: 16px; color: var(--muted); }
.rv .sec-h { margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-family: var(--font-report); font-size: 16px; line-height: 22px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--ink); }
.rv .sec-top { margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.rv .sec-top .sec-h { padding: 0; border: 0; }
.rv .lead, .rv .facts dd { font-size: 13px; line-height: 20px; }
.rv .tbl th { padding: 7px 10px; }
.rv .tbl td { padding: 7px 10px; font-size: 13px; }
.rv .tbl-wrap { overflow: visible; }
.rv .tbl-wrap.box { border-radius: 0; }
.rv .metrics { min-width: 0; }
.rv .metrics th[scope="row"], .rv .metrics thead th:first-child { position: static; min-width: 0; }
.rv .btn, .rv .no-rep { display: none; }
.rv .no-rep + .sec { margin-top: 0; }
.rv .lnk, .rv .link-btn { color: inherit; text-decoration: none; font-weight: inherit; pointer-events: none; }
.rv select, .rv input, .rv textarea { display: none; }
.rv svg { max-width: 100%; }
.rv [class^="rm-"], .rv [class*=" rm-"] { overflow: visible !important; max-width: 100% !important; }
.rv [class^="rm-"] svg, .rv [class*=" rm-"] svg, .rv svg[class^="rm-"], .rv svg[class*=" rm-"] { min-width: 0 !important; width: 100% !important; max-width: 100% !important; height: auto !important; }
.rv pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.dlg .sheet.rv { width: 210mm; padding: 16mm; border: 1px solid var(--line); border-radius: 2px; transform-origin: 0 0; }
.dlg.is-report .sheet-frame { overflow: hidden; margin-inline: auto; }

/* ---------- print ---------- */
@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  :root:has(.dlg[open]) { overflow: visible; }
  body { background: var(--paper); color: var(--ink); font-size: 12px; line-height: 17px; }
  .topbar, .btn, .tile-cta, .card-f, .chev, .dlg, .no-print, .state, .si, .sel { display: none !important; }
  .page {
    --surface: var(--paper); --surface-2: var(--paper-2); --line: var(--paper-line); --fg: var(--ink); --muted: var(--paper-muted);
    --accent: var(--paper-accent); --accent-soft: var(--paper-2); --on-accent: var(--paper);
    --ok: var(--paper-ok); --ok-soft: var(--paper-2); --warn: var(--paper-warn); --warn-soft: var(--paper-2);
    --crit: var(--paper-crit); --crit-soft: var(--paper-2);
    --pill-fill: transparent; --pill-edge: currentColor; --bar-fill: var(--paper-bar); --bar-track: var(--paper-line);
    --gutter: 0px; padding: 0; background: var(--paper); color: var(--ink);
  }
  .card-mod, .stepper-wrap, .print-sheet .sheet { container-type: normal; }
  .print-head { display: block; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
  .print-only { display: block; }
  .rep-title { font-size: 24px; line-height: 30px; }
  .proj { margin-top: 0; padding: 12px 14px; border-radius: var(--r-sm); }
  .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
  .tile { min-height: 0; padding: 10px 12px; gap: 2px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; }
  .tile:last-child { border-right: 0; }
  .tile.is-warn { background: transparent; border-color: var(--line); }
  .tile.is-warn .tile-v, .tile.is-warn .tile-l, .tile.is-warn .tile-v .u { color: inherit; }
  .tile-l { font-size: 11px; }
  .tile-v { min-height: 0; font-size: 20px; line-height: 26px; }
  .tile-v .u { font-size: 13px; line-height: 18px; }
  .tile-x { padding-top: 8px; }
  .grid { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
  .col { display: contents; }
  .card-mod { order: 1; } .card-rm { order: 2; } .card-wait { order: 3; } .card-q { order: 4; } .card-cr { order: 5; } .card-approvals { order: 6; } .card-risk { order: 7; } .card-dec { order: 8; }
  .card-hours { order: 9; } .card-qs { order: 10; } .card-act { order: 11; }
  .card { border-radius: var(--r-sm); break-inside: avoid; }
  .card-mod, .card-act { break-inside: auto; }
  .card-h { padding: 8px 12px; }
  tr, li, .mod-h { break-inside: avoid; }
  thead { display: table-header-group; }
  .tbl-wrap { overflow: visible; }
  .fl > li { padding: 7px 12px; }
  .mod-h { padding: 8px 12px; }
  .qitem { padding: 8px 12px; }
  .q-text { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
  .tl { padding: 12px; }
  .kvt th, .kvt td { padding: 6px 12px; font-size: 12px; }
  .page-foot { margin-top: 14px; padding-top: 8px; }
  .app.is-dlg-open .page { display: none; }
  .app.is-dlg-open ~ .print-sheet { display: block; }
  .print-sheet .sheet.rv { width: auto; padding: 0; border: 0; border-radius: 0; transform: none; font-size: 12px; line-height: 17px; }
  .rv .sec { break-inside: auto; }
  .rv .sec-h, .rv .sec-top { break-after: avoid; }
  .rv .stepper, .rv .kv-i, .rv .rows > li { break-inside: avoid; }
}