@font-face {
  font-family: "Roc Grotesk";
  src: url("./assets/fonts/rocgrotesk-regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Roc Grotesk";
  src: url("./assets/fonts/roc-grotesk-medium.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Roc Grotesk";
  src: url("./assets/fonts/rocgrotesk-bold.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Roc Grotesk";
  src: url("./assets/fonts/roc-grotesk-black.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 900;
}

:root {
  color-scheme: light;
  /* MK-63: three button sizes and no fourth. A control picks one of these
     rather than inventing a height, which is how 26/30/34/36/38/48px all ended
     up coexisting. The touch tier at the end of this file lifts everything to
     --control-height-touch on coarse pointers, so these are the desktop sizes. */
  --control-height-row: 32px;
  --control-height-default: 40px;
  --control-height-touch: 44px;
  --background: #faf8f2;
  --surface: #f3f0e8;
  --surface-child: rgba(255, 255, 255, 0.52);
  --surface-strong: #fffdf7;
  --surface-translucent: rgba(250, 248, 242, 0.72);
  --text: #1c1a17;
  --foreground: var(--text);
  /* X-1 v1.2 token panel names this --focus; production had only ever named
     --focus-ring. Both names now resolve to the same value instead of
     forcing a rename of every existing outline: var(--focus-ring) rule. */
  --focus: #114d61;
  --focus-ring: var(--focus);
  --ink: var(--text);
  --muted: #6b665d;
  /* D4-A-046: the darker muted step (BIRDHOUSE-DESIGN-SYSTEM.md's
     --muted-foreground). It was consumed by the planning headers and the
     week-mark chips without ever being declared, so `color:
     var(--muted-strong)` was invalid-at-computed-value and those elements
     silently inherited --text -- darker than --muted, the exact inverse of
     the atom. Values are the artifact's (D-4-project-home.html:31/64). */
  --muted-strong: #5f5a51;
  --primary: #114d61;
  --primary-foreground: #faf8f2;
  --primary-soft: #d9e8e8;
  --accent: #e8aa57;
  --accent-soft: #fff4d8;
  --hours-billable: #17694b;
  --hours-warranty: #9a5808;
  --concept: #f59e0b;
  --danger: #dc2626;
  --status-red: #b42318;
  --status-amber: #9a5808;
  --status-green: #17694b;
  --status-red-fill: color-mix(in srgb, var(--status-red) 13%, var(--surface));
  --status-red-line: color-mix(in srgb, var(--status-red) 46%, var(--line));
  --status-amber-fill: color-mix(in srgb, var(--status-amber) 15%, var(--surface));
  --status-amber-line: color-mix(in srgb, var(--status-amber) 48%, var(--line));
  --status-green-fill: color-mix(in srgb, var(--status-green) 13%, var(--surface));
  --status-green-line: color-mix(in srgb, var(--status-green) 46%, var(--line));
  --status-on: var(--background);
  /* v1.3 MK-14 colour pass (2026-08-10) — Home's only per-week capacity
     surface (the "Wat er na deze week staat" strip). Same tints, tokens and
     thresholds as the D-4 Band 1 grid and the D-10 board: over capacity =
     red, under by 20%+ of contract = amber. Reuses the existing status-fill
     formula (already theme-fixed via var(--status-*)) rather than
     duplicating literal colours — resolves correctly in dark without a
     separate dark-block declaration. D2-A-068/069. */
  --cap-over-tint: var(--status-red-fill);
  --cap-under-tint: var(--status-amber-fill);
  --cap-ok-tint: var(--status-green-fill);
  --danger-bg: #fee2e2;
  --danger-border: #fecaca;
  --danger-text: #852d25;
  --line: #ded8cb;
  --success-bg: #eef8f0;
  --success-border: #b7dbc1;
  --success-text: #276749;
  --warning-bg: #fff7ed;
  --warning-border: #fed7aa;
  --warning-text: #9a3412;
  --report-chart-axis: #3f5f6a;
  --report-chart-budget: #17694b;
  --report-chart-current: #3f5f6a;
  --report-chart-golive: #17694b;
  --report-chart-grid: #d8d2c4;
  --report-chart-marker-uat: #6f4c9b;
  --report-chart-now: #9a3412;
  --report-chart-reserve: #9a5808;
  --report-chart-scope: #9a5808;
  --report-chart-work: #c2410c;
  /* X-1 v1.2 / shell-component-vocabulary.json token foundation. Radius,
     control-height and duration are theme-invariant, so they are declared
     once here; --control-sm/-md/-lg alias the pre-existing
     --control-height-row/-default/-touch trio rather than duplicating the
     32/40/44px values as a second source of truth. */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --control-sm: var(--control-height-row);
  --control-md: var(--control-height-default);
  --control-lg: var(--control-height-touch);
  --dur-fast: 150ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* X5-A-001..004: elevation + the fourth status token. --st-neutral closes
     the Core/Delivery parity gap found by X-5-gap.md §1.1 (Core already
     shipped it; Delivery had not). --row-tint is the X-2/X-5 zebra token
     (X5-A-005), consumed by the zebra rule further down this file. */
  --elev-1: 0 1px 2px rgba(28, 26, 23, 0.07);
  --elev-2: 0 8px 20px rgba(28, 26, 23, 0.11);
  --elev-3: 0 18px 40px rgba(28, 26, 23, 0.17);
  --st-neutral: #6b665d;
  --st-info: #114d61;
  --row-tint: rgba(28, 26, 23, 0.030);
  /* D-4 D4-A-047/048/056 + GD-01/04: NU, UAT and Go-live weeks are carried by a
     light FULL-COLUMN tint in three distinct hues — never by a coloured top
     bar, underline or rail. Kept weak enough to compose with --row-tint zebra
     and with the capacity-heat cell states painted on top. */
  --col-now: rgba(17, 77, 97, 0.055);
  --marker-uat: rgba(111, 76, 155, 0.055);
  --marker-live: rgba(23, 105, 75, 0.055);
  /* D4-A-058/059 (v2.2): the frozen column is the one week with no hue — a
     neutral wash so "you cannot type here" reads before the "vast" label or
     the dashed input, without desaturating the text. The aggregate tint is
     the quiet teal that marks "Birdhouse computed this" (totals row +
     Budgetverbruik column), distinct from every marked-week hue. Both are
     tokens, not inline color-mix()/rgba() literals, so they get real dark
     values below instead of one light value doing double duty. */
  --col-frozen: color-mix(in srgb, var(--muted) 9%, var(--surface));
  --agg-tint: rgba(17, 77, 97, 0.08);
}

[data-project-report-static-unavailable] {
  display: none;
}

[data-static-report] > :not([data-project-report-static-unavailable]) {
  display: none;
}

[data-static-report] > [data-project-report-static-unavailable] {
  display: block;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #0b2e3b;
  --surface: #0f3a4a;
  --surface-child: color-mix(in srgb, var(--surface) 82%, var(--background));
  --surface-strong: #134757;
  --surface-translucent: color-mix(in srgb, var(--surface) 76%, transparent);
  --text: #f0ede6;
  --foreground: var(--text);
  --focus: #f0be72;
  --focus-ring: var(--focus);
  --ink: var(--text);
  --muted: #90b5c3;
  /* D4-A-046: a step brighter than --muted in dark, the same one-step-more-
     legible relationship as light (artifact D-4-project-home.html:64). */
  --muted-strong: #b7d6e2;
  --primary: #f0be72;
  --primary-foreground: #0b2e3b;
  --primary-soft: #134757;
  --accent: #5cc0dc;
  --accent-soft: color-mix(in srgb, var(--accent) 22%, var(--surface));
  --hours-billable: #7fd8b8;
  --hours-warranty: #f2a66e;
  --concept: #f2a66e;
  --danger: #fca5a5;
  --status-red: #fca5a5;
  --status-amber: #f2a66e;
  --status-green: #7fd8b8;
  --danger-bg: color-mix(in srgb, #dc2626 24%, var(--surface));
  --danger-border: color-mix(in srgb, #dc2626 52%, var(--line));
  --danger-text: #ffc4bd;
  --line: #1a5268;
  --success-bg: color-mix(in srgb, #2f8a62 24%, var(--surface));
  --success-border: color-mix(in srgb, #2f8a62 54%, var(--line));
  --success-text: #a7f3d0;
  --warning-bg: color-mix(in srgb, #e8aa57 22%, var(--surface));
  --warning-border: color-mix(in srgb, #e8aa57 58%, var(--line));
  --warning-text: #ffd994;
  --report-chart-axis: #c7e5ed;
  --report-chart-budget: #7fd8b8;
  --report-chart-current: #c7e5ed;
  --report-chart-golive: #7fd8b8;
  --report-chart-grid: #28677c;
  --report-chart-marker-uat: #d6b4ff;
  --report-chart-now: #ffc4bd;
  --report-chart-reserve: #ffd994;
  --report-chart-scope: #ffd994;
  --report-chart-work: #ffc4bd;
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.28);
  --elev-2: 0 8px 20px rgba(0, 0, 0, 0.34);
  --elev-3: 0 18px 40px rgba(0, 0, 0, 0.42);
  --st-neutral: #90b5c3;
  --st-info: #5cc0dc;
  --row-tint: rgba(240, 237, 230, 0.042);
  --col-now: rgba(199, 229, 237, 0.070);
  --marker-uat: rgba(214, 180, 255, 0.070);
  --marker-live: rgba(127, 216, 184, 0.070);
  /* D4-A-058/059 dark values — a 9% color-mix of --muted reads as near-invisible
     against the #0b2e3b dark surface, so the frozen wash needs its own alpha
     the same way --col-now/--marker-uat/--marker-live do. */
  --col-frozen: rgba(240, 237, 230, 0.075);
  --agg-tint: rgba(199, 229, 237, 0.10);
}

/* ────────────────────────────────────────────────────────────────
   RESPONSIVE CONVENTION (2026-07 mobile pass)

   Two canonical tiers. All NEW rules use these and only these.

     PHONE TIER   @media (max-width: 760px)      Delivery
                  @media (max-width: 767.98px)   Core
     SHELL TIER   @media (max-width: 1099.98px)  topbar/header chrome only

   Why Delivery's phone tier is 760 and not 768: scripts/check-delivery-
   static-app.mjs asserts the literal string "@media (max-width: 760px)"
   plus ".planning-desktop-workspace {\n    display: none;". Renumbering that
   block breaks the build. The 761-767px band is not a real device width; it
   receives desktop content rules (correct - tables scroll at that width) and
   the SHELL TIER chrome.

   Why the shell tier is 1099.98 and not 768: the 4-column .topbar/.global-
   header grid needs ~1100px to fit its own content (36 avatar + 200 lockup
   + nav + ~326 tools + 36 gaps + 40 padding). Between 761px and ~1100px the
   nav track collapses and its links paint on top of the search field, so the
   shell tier hides the desktop rail rather than letting it overlap. See WP3.

   MR-A T1-b update: the nav track's own demand dropped from six Dutch labels
   (~459px) to five (Start/Projecten/Planning/Rapportages/Inzichten), because
   D-1 v1.5 Q18-c moved Integraties out of the row and into the account menu.
   That is what closes the 1100-1170px "dead band" the previous version of
   this comment described as a live, unresolved overlap: the sixth item was
   the first to collide with the tools column, and there is no sixth item any
   more. The 1099.98 tier itself is UNCHANGED and still earns its keep — it is
   what keeps the 761-1099px band from having to fit a rail at all.

   LEGACY tiers still present and NOT renumbered in this pass:
     Delivery 680 / 720 / 900 / 960 / 1080
     Core     980
   Migrate opportunistically, one block at a time, with a screenshot diff
   per block. Do not renumber in bulk.

   WP6 added ONE narrow tier, @media (max-width: 359.98px), for a single
   purpose: --delivery-phone-topbar-h. The WP3 phone topbar measures 123px
   from 360px up, but at 320px the tools cluster wraps to a line of its own
   and the bar becomes 177px. Anything that sticks below the topbar must
   offset by var(--delivery-phone-topbar-h), never by a literal.
   ──────────────────────────────────────────────────────────────── */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: "Roc Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

button {
  font: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[data-report-history-row]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.skip-link {
  left: -9999px;
  position: absolute;
  top: 0;
  z-index: 100;
}

.skip-link:focus {
  align-items: center;
  background: var(--background);
  border: 2px solid var(--focus-ring);
  border-radius: 8px;
  color: var(--text);
  display: inline-flex;
  left: 8px;
  min-height: 44px;
  padding: 12px 16px;
  top: 8px;
  width: auto;
}

.shell {
  min-height: 100vh;
  min-height: 100dvh;
}

body[data-delivery-core-auth="checking"] .shell,
body[data-delivery-core-auth="required"] .shell {
  display: none;
}

.impersonation-banner {
  background: var(--primary-soft);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 20px;
  position: sticky;
  text-align: center;
  top: 0;
  z-index: 60;
}

.topbar {
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(180px, auto) minmax(0, 1fr) auto;
  min-height: 72px;
  padding: 10px 20px;
}

.product-lockup {
  align-items: baseline;
  display: flex;
  gap: 10px;
  min-width: 0;
  position: relative;
}

.product-name {
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.app-switcher,
.user-menu {
  position: relative;
}

.app-switcher-button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--primary);
  cursor: pointer;
  display: flex;
  gap: 7px;
  min-height: 32px;
  padding: 0 8px;
}

.app-switcher-button:hover,
.app-switcher-button[aria-expanded="true"] {
  background: var(--background);
  border-color: var(--line);
}

.app-switcher-button [data-current-app] {
  font-size: 16px;
  font-weight: 900;
}

.app-menu,
.user-menu-panel {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(28, 26, 23, 0.12);
  display: grid;
  gap: 6px;
  min-width: 230px;
  padding: 8px;
  position: absolute;
  top: calc(100% + 10px);
  z-index: 20;
}

:root[data-theme="dark"] .app-menu,
:root[data-theme="dark"] .user-menu-panel {
  background: color-mix(in srgb, var(--surface) 86%, var(--background));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

.app-menu[hidden],
.user-menu-panel[hidden] {
  display: none;
}

/* WP5: left-anchored and clamped to the viewport. Right-anchoring it
   (left: auto; right: 0) is wrong here - the switcher button's right edge
   sits at ~268px, so a 340px right-anchored panel clips off the LEFT edge
   at tablet and desktop. */
.app-menu {
  inline-size: 340px;
  left: 0;
  max-inline-size: min(340px, calc(100vw - 24px));
}

.topbar > .user-menu .user-menu-panel {
  left: 0;
  right: auto;
}

.app-option,
.user-menu-item {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  text-decoration: none;
  text-align: left;
}

/* WP5: the two identity lines are inert text, not menu items. Sharing the
   rule above made all four rows look equally tappable, two of which do
   nothing. */
.user-menu-panel > span {
  display: block;
  padding: 4px 10px;
  text-align: left;
}

.user-menu-panel > span:first-of-type {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

.user-menu-panel > span:nth-of-type(2) {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
  padding-bottom: 10px;
}

/* D-1 Q18-c: Integraties moved out of the nav row into this menu, so the menu now
   has a labelled group rather than a flat list of three unrelated rows. */
.user-menu-section {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 6px 0 0;
  padding: 10px 10px 2px;
  text-transform: uppercase;
}

.user-menu-item[data-delivery-account-integrations] {
  align-items: baseline;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 44px;
}

.user-menu-item[data-delivery-account-integrations] > strong {
  font-size: 14px;
  font-weight: 700;
}

.user-menu-item[data-delivery-account-integrations] > span {
  color: var(--muted);
  font-size: 12px;
  grid-column: 1;
}

/* D1-A-007: additive 6px danger dot, never a replacement for the label. */
.user-menu-item[data-delivery-account-integrations] > i[data-mobile-sync-unread],
.user-menu [data-delivery-account-unread] {
  background: var(--danger);
  block-size: 6px;
  border-radius: 999px;
  inline-size: 6px;
}

.user-menu-item[data-delivery-account-integrations] > i[data-mobile-sync-unread] {
  align-self: center;
  grid-column: 2;
  grid-row: 1 / span 2;
}

.user-menu [data-delivery-account-unread] {
  position: absolute;
  right: -1px;
  top: -1px;
}

.user-menu [data-delivery-account-unread][hidden],
.user-menu-item[data-delivery-account-integrations] > i[data-mobile-sync-unread][hidden] {
  display: none;
}

.user-menu > .btn.icon {
  position: relative;
}

/* align-items: start rather than center: with a wrapping label the pill
   otherwise floats to the vertical middle of a three-line row. */
.app-option {
  align-items: start;
  cursor: pointer;
  gap: 10px;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  inline-size: 100%;
}

.app-option > .glyph {
  align-self: start;
}

.app-option > .pill {
  align-self: start;
  justify-self: end;
  white-space: nowrap;
}

.app-option[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.62;
}

.app-option[aria-current="true"] {
  background: var(--primary-soft);
}

.app-option:hover,
.user-menu-item:hover {
  background: var(--surface);
}

.app-option-label {
  display: grid;
  gap: 2px;
  min-inline-size: 0;
}

/* Dutch app descriptions run long and have no break opportunities in the
   middle ("Toekomstige commerciele werkruimte"); without this the label
   overflows its track and paints under the status pill. */
.app-option-label > strong,
.app-option-label > span {
  overflow-wrap: anywhere;
}

.app-option-label span,
.app-menu small {
  color: var(--muted);
}

.glyph {
  align-items: center;
  background: var(--primary);
  border-radius: 6px;
  color: var(--background);
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
  min-height: 32px;
}

.user-menu-item {
  cursor: pointer;
  inline-size: 100%;
}

.user-menu-item.logout {
  color: var(--danger);
}

.nav {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  min-width: 0;
}

/* ── WP3: nav hardening ───────────────────────────────────────── */
/* Inert today: at >=1100px the five links (461px) fit their track with
   room to spare. It exists so that adding a sixth destination can never
   again make the nav paint on top of .topbar-tools - the failure this
   pass had to fix. Below 1100px the shell tier stacks the nav onto its
   own row instead. */
@media (min-width: 1100px) {
  .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-block: 3px; /* room for the 3px focus ring */
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }
}

.nav a,
.period button,
.tab {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--muted);
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  /* MK-63: was the retired 34px. Padding-block goes to 0 so the box IS the
     size token rather than the token plus whatever padding happens to be set. */
  min-height: var(--control-height-default);
  padding: 0 12px;
  text-decoration: none;
  white-space: nowrap;
}

.nav a {
  padding: 8px 10px;
}

.nav a:hover,
.nav a[aria-current="page"] {
  background: var(--background);
  color: var(--primary);
}

.period button.is-active,
.tab[aria-selected="true"],
.tab[aria-pressed="true"] {
  background: var(--primary);
  color: #faf8f2;
}

.user {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.topbar-tools {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  min-width: 0;
}

.language-toggle {
  width: auto;
  min-width: 46px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 900;
}

.global-search-wrap {
  position: relative;
}

.global-search {
  align-items: center;
  background: var(--background);
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex: 0 1 280px;
  gap: 8px;
  font-size: 14px;
  line-height: 1.25;
  max-width: 280px;
  min-width: 180px;
  padding: 8px 12px;
  width: auto;
}

.global-search:focus-within,
.project-search:focus-within {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.header-logo {
  align-items: center;
  display: inline-flex;
  height: 34px;
  width: 34px;
}

.header-logo img {
  display: block;
  height: 34px;
  object-fit: contain;
  object-position: center;
  width: 34px;
}

.global-search span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.global-search input {
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  inline-size: 100%;
  min-width: 0;
  outline: 0;
}

.global-search-panel {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--text) 14%, transparent);
  inline-size: min(520px, calc(100vw - 32px));
  /* WP5: an unbounded result list ran off the bottom of the viewport with
     no way to reach the tail of it. */
  max-block-size: min(60svh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
}

.global-search-panel[hidden] {
  display: none;
}

.global-search-results {
  display: grid;
  gap: 4px;
}

.global-search-position {
  color: var(--muted);
  font-size: 12px;
  margin: 8px 10px 2px;
}

.global-search-results > section {
  display: grid;
  gap: 4px;
}

.global-search-results > section > strong,
.global-search-results > section > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding-inline: 10px;
  text-transform: uppercase;
}

.global-search-results > section > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  margin-top: -4px;
  text-transform: none;
}

.global-search-result,
.global-search-empty {
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 68px minmax(0, 1fr);
  min-height: 68px;
  padding: 9px 10px;
  text-decoration: none;
}

.global-search-result:hover,
.global-search-result:focus {
  background: var(--surface);
  outline: 0;
}

.global-search-result span,
.global-search-result small,
.global-search-empty {
  color: var(--muted);
  font-size: 12px;
}

.global-search-code-not-found {
  grid-template-columns: minmax(0, 1fr);
}

.global-search-code-not-found strong {
  color: var(--primary);
}

.global-search-result mark {
  background: color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 3px;
  color: var(--text);
  font: inherit;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding-inline: 3px;
}

.global-search-result span {
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.global-search-result strong {
  color: var(--primary);
  display: block;
  font-size: 15px;
}

.global-search-result div { min-width: 0; }

.global-search-project-loading-row {
  background: color-mix(in srgb, var(--surface) 84%, var(--line));
  border-radius: 8px;
  min-height: 68px;
  position: relative;
}

.global-search-project-loading-row::after {
  background: color-mix(in srgb, var(--background) 62%, transparent);
  border-radius: 4px;
  content: "";
  height: 12px;
  left: 78px;
  position: absolute;
  right: 44px;
  top: 18px;
}

/* The square icon-only button that used to have its own rule here is
   retired onto the canonical .btn.icon block further down this file, per
   MK63_DELIVERY_COMPONENT_MIGRATION_MAP.md. */

/* WP3: the search field is always visible above the phone tier, so the
   button that reveals it only exists there. MK-63: this now has to beat
   the canonical .btn rule's own `display: inline-flex` at equal source
   order, so it is written as the compound .btn.global-search-toggle rather
   than a bare single-class selector (matches the phone-tier override
   below, which needs the same specificity to win back at that width). */
.btn.global-search-toggle {
  display: none;
}

.global-search-cancel {
  display: none;
}

.user-menu {
  position: relative;
}

.user-menu-panel {
  right: 0;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  padding: 28px 32px 36px;
}

body[data-delivery-page="home"] .workspace {
  grid-template-columns: minmax(0, 1fr);
}

body[data-delivery-page^="project-detail"] .workspace {
  grid-template-columns: minmax(0, 1fr);
}

.main {
  min-width: 0;
}

body[data-delivery-page] .home-surface,
body[data-delivery-page] .dashboard-surface,
body[data-delivery-page] .split > div > .section,
body[data-delivery-page] .side-panel {
  display: none;
}

body[data-delivery-page="home"] .page-head.home-surface {
  display: grid;
}

body[data-delivery-page="home"] .home-triage.home-surface,
body[data-delivery-page="home"] .home-portfolio.home-surface,
body[data-delivery-page="home"] .home-work-areas.home-surface,
body[data-delivery-page="home"] .home-divider.home-surface {
  display: block;
}

body[data-delivery-page="home"] [data-delivery-home-portfolio][hidden],
body[data-delivery-page="home"] [data-delivery-home-portfolio-divider][hidden] {
  display: none;
}

body[data-delivery-page="home"] .split {
  display: none;
}

body[data-delivery-page="insights"] .page-head.dashboard-surface {
  display: grid;
}

body[data-delivery-page="insights"] .dashboard-signals-zone.dashboard-surface,
body[data-delivery-page="insights"] .dashboard-portfolio-card.dashboard-surface,
body[data-delivery-page="insights"] .dashboard-composition.dashboard-surface,
body[data-delivery-page="insights"] .dashboard-exception-queue.dashboard-surface,
body[data-delivery-page="insights"] .dashboard-period-band.dashboard-surface,
body[data-delivery-page="insights"] .dashboard-period-panel.dashboard-surface,
body[data-delivery-page="insights"] .utilisation-workspace.dashboard-surface,
body[data-delivery-page="insights"] .dashboard-trust-footer.dashboard-surface {
  display: block;
}

body[data-delivery-page="insights"] .split {
  display: none;
}

body[data-delivery-page="projects"] #projects,
body[data-delivery-page="project-detail"] #project-detail,
body[data-delivery-page="project-detail-jira-progress"] #project-detail,
body[data-delivery-page="project-detail-project-log"] #project-log,
body[data-delivery-page="project-detail-settings"] #project-detail,
body[data-delivery-page="project-detail-sprint-report"] #reports,
body[data-delivery-page="planning"] #planning,
body[data-delivery-page="integrations"] #integrations,
body[data-delivery-page="reports"] .split > div > .section[data-delivery-reports-route],
body[data-delivery-page="reports"] .split > div > .section[data-reports-drill-in]:not([hidden]) {
  display: block;
}

body[data-delivery-page="projects"] .split,
body[data-delivery-page="project-detail"] .split,
body[data-delivery-page="project-detail-jira-progress"] .split,
body[data-delivery-page="project-detail-project-log"] .split,
body[data-delivery-page="project-detail-settings"] .split,
body[data-delivery-page="project-detail-sprint-report"] .split,
body[data-delivery-page="planning"] .split,
body[data-delivery-page="integrations"] .split,
body[data-delivery-page="reports"] .split {
  display: block;
}

body[data-delivery-page="projects"] .side,
body[data-delivery-page="project-detail"] .side,
body[data-delivery-page="project-detail-jira-progress"] .side,
body[data-delivery-page="project-detail-project-log"] .side,
body[data-delivery-page="project-detail-settings"] .side,
body[data-delivery-page="project-detail-sprint-report"] .side,
body[data-delivery-page="planning"] .side,
body[data-delivery-page="integrations"] .side,
body[data-delivery-page="reports"] .side {
  display: none;
}

body[data-delivery-page="projects"] .workspace,
body[data-delivery-page="project-detail"] .workspace,
body[data-delivery-page="project-detail-jira-progress"] .workspace,
body[data-delivery-page="project-detail-project-log"] .workspace,
body[data-delivery-page="project-detail-settings"] .workspace,
body[data-delivery-page="project-detail-sprint-report"] .workspace,
body[data-delivery-page="planning"] .workspace,
body[data-delivery-page="integrations"] .workspace,
body[data-delivery-page="reports"] .workspace {
  grid-template-columns: minmax(0, 1fr);
}

body[data-delivery-page="project-detail-jira-progress"] .detail-panel {
  display: none;
}

body[data-delivery-page="project-detail"] .detail-team,
body[data-delivery-page="project-detail"] .detail-contacts,
body[data-delivery-page="project-detail"] .detail-epics,
body[data-delivery-page="project-detail"] .detail-sprints {
  display: none;
}

body[data-delivery-page="project-detail-jira-progress"] .detail-jira,
body[data-delivery-page="project-detail-jira-progress"] .detail-jira-board,
body[data-delivery-page="project-detail-jira-progress"] .detail-epics,
body[data-delivery-page="project-detail-jira-progress"] .detail-sprints,
body[data-delivery-page="project-detail-jira-progress"] .detail-progress-budget {
  display: block;
}

.page-head {
  align-items: end;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 24px;
}

.page-head-h1-row,
.section-head-h1-row {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.page-head-h1-row h1,
.section-head-h1-row h1 { margin: 0; }

.dashboard-hero {
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

.dashboard-hero [data-dashboard-hero-copy] {
  max-width: 50rem;
}

.dashboard-hero .period {
  justify-content: flex-start;
  min-width: 0;
}

.home-focus {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.workflow-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 24px;
}

.workflow-link {
  background: var(--surface);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 172px;
  padding: 18px;
  text-decoration: none;
}

.workflow-link:first-child {
  border-radius: 8px 0 0 8px;
}

.workflow-link:last-child {
  border-radius: 0 8px 8px 0;
}

.workflow-link span {
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.workflow-link strong {
  font-size: 19px;
  line-height: 1.1;
}

.workflow-link small {
  color: var(--muted);
  line-height: 1.35;
}

.workflow-link:hover {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.workflow-link .wf-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin-top: auto;
}

/* Home Direction A — command-start triage layout */
.home-head h1 {
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.04;
  margin: 0;
}

.home-head .who {
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  margin: 8px 0 0;
}

.home-head .who b {
  color: var(--text);
  font-weight: 700;
}

.home-head-loading {
  display: grid;
  gap: 8px;
  max-inline-size: 44rem;
}

/* D2-A-029 (2026-08-12 prod QA): the author `display: grid` above beats the
   UA stylesheet's `[hidden] { display: none }`, so setting `.hidden = true`
   on this element in JS left the heading skeleton visibly stuck once the
   real heading had loaded beside it. Same pattern already fixed for
   .btn[hidden]/.tab[hidden] etc. — see the note near line 4415. */
.home-head-loading[hidden] {
  display: none;
}

.home-ghost,
.triage-ghost {
  animation: triage-pulse 1.4s ease-in-out infinite;
  background: color-mix(in srgb, var(--line) 52%, var(--surface));
  border-radius: 6px;
  display: block;
}

.home-ghost-eyebrow { height: 10px; width: 38%; }
.home-ghost-title { height: 26px; margin-top: 4px; width: 88%; }
.home-ghost-title-short { margin-top: 0; width: 62%; }
.home-ghost-summary { height: 11px; margin-top: 8px; width: 45%; }

.home-freshness {
  align-self: end;
  justify-self: end;
}

.home-scope {
  display: flex;
  gap: 8px;
  margin: 14px 0 0;
}

.home-scope .tab {
  align-items: center;
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  display: inline-flex;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  gap: 7px;
  min-height: 44px;
  padding: 8px 12px;
}

.home-scope .tab b {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.home-scope .tab[aria-selected="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

.home-triage {
  margin-bottom: 8px;
}

.triage-head {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 0 0 12px;
}

.triage-head h2 {
  font-size: 20px;
  font-weight: 900;
  margin: 0;
}

.count-line {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.home-counts {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.home-count-filter {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  min-height: 44px;
  padding: 8px 6px;
}

.home-count-filter b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.home-count-filter[aria-pressed="true"] {
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 20%, var(--line));
  color: var(--text);
}

.home-count-filter.critical[aria-pressed="true"] b {
  color: var(--status-red);
}

.home-count-filter.attention[aria-pressed="true"] b {
  color: var(--status-amber);
}

.home-count-filter.healthy[aria-pressed="true"] b {
  color: var(--status-green);
}

.crit-tone {
  color: var(--status-red);
}

.attn-tone {
  color: var(--status-amber);
}

.triage-list {
  display: grid;
  gap: 1px;
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

/* MK-62 · one project exception per record: the severity signal, the project
   and why it surfaced, and the one action it wants. The record form's declared
   minimum is 14px + 210px + 210px of columns, two 16px gaps and 32px of
   padding = 498px — comfortably under the 760px point where the MK-01 phone
   form takes the whole surface over, so this record's two forms already meet
   with room to spare and it needs no third, container-queried one. Measured on
   a served dist at 320-1440: zero cell overflow in either form. */
.triage-row {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: inherit;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(210px, 1fr) minmax(210px, auto);
  min-height: 78px;
  padding: 14px 16px;
  text-decoration: none;
}

.triage-row:first-child {
  border-radius: 8px 8px 0 0;
}

.triage-row.is-last-exception {
  border-radius: 0 0 8px 8px;
}

.triage-row:hover {
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}

.sev-badge {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 500;
  gap: 6px;
  min-height: 28px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* D-2 gap C-1 (2026-08-10): the standalone leading severity dot outside the
   pill was removed on desktop — one pill, one muted reason sentence, no
   second colour channel. The mobile fold still nests this element inside
   the .sev-badge as one object, which already conformed. */
.triage-severity-signal {
  background: currentcolor;
  border-radius: 999px;
  flex: 0 0 12px;
  height: 12px;
  width: 12px;
}

.sev-badge.critical {
  background: var(--status-red-fill);
  border-color: var(--status-red-line);
  color: var(--status-red);
}

.sev-badge.attention {
  background: var(--status-amber-fill);
  border-color: var(--status-amber-line);
  color: var(--status-amber);
}

.triage-main .proj {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
}

.triage-main .owner {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.triage-main .owner b {
  color: var(--text);
  font-weight: 700;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* One pill, one muted reason sentence (D-2 gap C-1) — replaces the old
   .chips-based chip cloud on the desktop triage row. */
.triage-desktop-chips {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.triage-reason {
  color: var(--muted);
  flex: 1 1 240px;
  font-size: 13px;
  line-height: 1.35;
  margin: 4px 0 0;
  min-width: 0;
}

.chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  padding: 3px 8px;
  white-space: nowrap;
}

.chip.sla-over {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
  font-weight: 700;
}

.chip.sla-due {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
  font-weight: 700;
}

.triage-action {
  display: grid;
  gap: 5px;
  justify-items: end;
  text-align: right;
}

.triage-action .btn {
  min-height: 44px;
}

.triage-sort-value {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.triage-mobile-meta,
.triage-mobile-chevron {
  display: none;
}

.triage-empty {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  list-style: none;
  padding: 18px 16px;
}

.triage-footer {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 13px;
  gap: 12px;
  justify-content: space-between;
  margin: 10px 2px 0;
}

.triage-expand {
  appearance: none;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 0;
  border-radius: 0 0 8px 8px;
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  /* MK-63: was 48px. A full-width card action is still one of the three. */
  min-height: var(--control-height-touch);
  width: 100%;
}

.triage-expand:hover {
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}

.triage-state {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 10px 0;
  padding: 14px 16px;
}

.triage-state[hidden],
.home-triage [data-delivery-triage-content][hidden],
.home-low-priority [hidden] {
  display: none;
}

.triage-evidence {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  gap: 6px;
  margin: 4px 2px 12px;
}

.triage-evidence-sources {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* GD-01/GD-04: no coloured vertical rail. "partial" used to be an amber left
   border over a neutral one — but the coverage line under every source already
   reads "{checked} of {total} checked · {unavailable} unavailable" in every
   state, and names its reasons, so the colour was carrying nothing the words
   were not. A rule above separates the three sources instead, the same way
   MK-28's totals row does. */
.triage-evidence-sources > span {
  border-top: 2px solid var(--line);
  display: grid;
  gap: 2px;
  padding-top: 6px;
}

.triage-evidence-sources b {
  color: var(--ink);
}

/* D-2 gap C-4 / Q-D2-3 (approved 2026-08-05): a partially covered source
   carries a 7px amber dot + the literal word "deels"/"partial" + the
   shortfall figure. The word carries the state; the dot only reinforces it —
   this is not the rail the comment above rules out. */
[data-evidence-status="partial"] {
  color: var(--status-amber);
}

.evidence-partial-dot {
  background: var(--status-amber);
  border-radius: 999px;
  display: inline-block;
  height: 7px;
  margin-right: 2px;
  width: 7px;
}

.triage-notice {
  align-items: center;
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.triage-notice.stale {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

.triage-earned-empty {
  background: color-mix(in srgb, var(--status-green-fill) 66%, var(--surface));
  border-color: var(--status-green-line);
  color: var(--success-text);
}

.triage-earned-empty p {
  color: var(--muted);
  margin: 6px 0 0;
}

.triage-invariant-error {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

.triage-loading {
  border: 0;
  display: grid;
  gap: 22px;
  padding: 0;
}

.triage-ghost {
  height: 11px;
}

.triage-loading-heading {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.triage-ghost-heading { height: 20px; width: min(58%, 280px); }
.triage-ghost-count { height: 18px; width: 68px; }

.triage-loading-list {
  display: grid;
  gap: 1px;
}

.triage-loading-row {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  display: grid;
  gap: 8px;
  min-height: 64px;
  padding: 14px 16px;
}

.triage-loading-row:first-child { border-radius: 8px 8px 0 0; }
.triage-loading-row:last-child { border-radius: 0 0 8px 8px; }
.triage-ghost-row-primary { width: 70%; }
.triage-ghost-row-secondary { width: 46%; }

@keyframes triage-pulse {
  50% {
    opacity: 0.45;
  }
}

.home-low-priority {
  border-top: 1px solid var(--line);
  display: grid;
  font-size: 13px;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 22px;
  padding-top: 16px;
}

.home-low-priority-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0 0 5px;
  text-transform: uppercase;
}

.home-low-priority-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.home-low-priority-row .btn {
  min-height: 44px;
}

.home-portfolio {
  border-top: 1px solid var(--line);
  margin-top: 26px;
  padding-top: 20px;
}

.home-portfolio-card {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  margin: 12px 0 16px;
}

.allclear {
  color: var(--success-text);
  font-weight: 700;
}

.home-divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 30px 0 22px;
}

.rail-head {
  margin: 0 0 12px;
}

.rail-head h2 {
  font-size: 16px;
  font-weight: 900;
  margin: 0;
}

.rail-head p {
  color: var(--muted);
  font-size: 13px;
  margin: 5px 0 0;
}

/* Dashboard Direction B — steering view */
.tnum {
  font-variant-numeric: tabular-nums;
}

.dashboard-head-controls {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dashboard-freshness {
  align-self: flex-end;
}

.dashboard-head-period {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dashboard-head-period-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.dashboard-signals-zone {
  margin-bottom: 24px;
}

.signals-head {
  margin: 0 0 12px;
}

.signals-head h2 {
  font-size: 16px;
  font-weight: 900;
  margin: 0;
}

.signals-head p {
  color: var(--muted);
  font-size: 13px;
  margin: 5px 0 0;
}

.dashboard-signals {
  margin-bottom: 0;
}

.split-figure {
  align-items: baseline;
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.split-figure .seg {
  display: flex;
  flex-direction: column;
}

.split-figure .seg b {
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1;
}

.split-figure .seg span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-top: 5px;
  text-transform: uppercase;
}

.split-figure .seg.crit b,
.split-figure .seg.crit span {
  color: var(--status-red);
}

.split-figure .seg.attn b,
.split-figure .seg.attn span {
  color: var(--status-amber);
}

.split-figure .seg.ok b,
.split-figure .seg.ok span {
  color: var(--status-green);
}

.split-figure .sep {
  align-self: center;
  color: var(--line);
  font-size: 22px;
}

.dashboard-composition {
  scroll-margin-top: 18px;
}

.health-bar {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 2px;
  height: 30px;
  overflow: hidden;
  padding: 2px;
}

.health-bar .seg {
  align-items: center;
  color: var(--status-on);
  display: flex;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.health-bar .seg.crit {
  background: var(--status-red);
}

.health-bar .seg.attn {
  background: var(--status-amber);
}

.health-bar .seg.ok {
  background: var(--status-green);
}

.health-bar .seg.unmeasured {
  background: color-mix(in srgb, var(--muted) 14%, var(--surface));
}

.health-legend {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 18px;
  margin-top: 12px;
}

.health-legend .item {
  align-items: center;
  display: flex;
  gap: 7px;
}

.health-legend .key {
  border-radius: 3px;
  height: 10px;
  width: 10px;
}

.health-legend .key.crit {
  background: var(--status-red);
}

.health-legend .key.attn {
  background: var(--status-amber);
}

.health-legend .key.ok {
  background: var(--status-green);
}

.health-legend .key.unmeasured {
  background: var(--muted);
}

/* B8: Portfolio overview card — always-current RAG status, above the period picker. */
.dashboard-portfolio-card .portfolio-card-body {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 28px 40px;
  margin-bottom: 16px;
}

.portfolio-figure {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.portfolio-figure b {
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1;
}

.portfolio-figure span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.rag-split {
  background: var(--background);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.rag-split .seg {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex: 1 1 76px;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 10px 14px;
}

.rag-split .seg b {
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1;
}

.rag-split .seg span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.rag-split .seg.crit {
  background: var(--status-red-fill);
  border-color: var(--status-red-line);
}

.rag-split .seg.crit b,
.rag-split .seg.crit span {
  color: var(--status-red);
}

.rag-split .seg.attn {
  background: var(--status-amber-fill);
  border-color: var(--status-amber-line);
}

.rag-split .seg.attn b,
.rag-split .seg.attn span {
  color: var(--status-amber);
}

.rag-split .seg.ok {
  background: var(--status-green-fill);
  border-color: var(--status-green-line);
}

.rag-split .seg.ok b,
.rag-split .seg.ok span {
  color: var(--status-green);
}

.rag-split .seg.unmeasured {
  background: color-mix(in srgb, var(--muted) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--muted) 38%, var(--line));
}

.rag-split .seg.unmeasured b,
.rag-split .seg.unmeasured span {
  color: var(--muted);
}

:root[data-theme="dark"] .health-bar .seg.unmeasured {
  background: color-mix(in srgb, var(--muted) 24%, var(--surface));
}

:root[data-theme="dark"] .rag-split .seg.unmeasured {
  background: color-mix(in srgb, var(--muted) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--muted) 48%, var(--line));
}

/* B8: Reporting-period band — the picker sits above only the period-scoped sections. */
.dashboard-period-band {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
}

.period-band-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.period-band-head .section-note {
  margin: 0;
}

.health-legend b {
  color: var(--text);
  font-weight: 700;
}

.pointer {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  margin-top: 16px;
  padding: 13px 16px;
}

.pointer .txt {
  font-size: 14px;
}

.pointer .txt b {
  font-weight: 700;
}

.pointer .lead {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.dashboard-exception-queue {
  scroll-margin-top: 18px;
}

.dashboard-exception-queue .count-line {
  margin-top: 6px;
}

.healthy-collapse {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 14px;
  justify-content: space-between;
  margin-top: 10px;
  padding: 12px 16px;
}

.healthy-collapse .left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.healthy-collapse .more {
  color: var(--warning-text);
  font-weight: 700;
}

.home-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  margin-top: 28px;
  padding-top: 14px;
}

.home-footer b {
  color: var(--text);
  font-weight: 700;
}

.dashboard-unmapped-footline {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
  margin: -10px 0 24px;
  padding-top: 10px;
}

.dashboard-unmapped-footline [data-dashboard-unmapped-footer] {
  align-items: baseline;
  column-gap: 10px;
  display: flex;
  flex-wrap: wrap;
}

.dashboard-unmapped-footline b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.dashboard-unmapped-footline a {
  align-items: center;
  color: var(--primary);
  display: inline-flex;
  font-weight: 700;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.chart-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 24px;
  padding: 20px 22px 16px;
}

.chart-head {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 6px;
}

.chart-title {
  font-size: 15px;
  font-weight: 900;
}

.chart-sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.chart-legend {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 16px;
}

.chart-legend .swatch {
  border-radius: 3px;
  display: inline-block;
  height: 12px;
  margin-right: 6px;
  vertical-align: -1px;
  width: 12px;
}

.spark-wrap {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 11px;
  gap: 8px;
}

.chart-bars {
  align-items: end;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 14px;
  margin-top: 18px;
  min-height: 168px;
  padding-bottom: 0;
}

.chart-bars .dashboard-week-column {
  flex: 1;
  min-width: 0;
}

/* Whole-year / many-bucket ranges: tighten spacing and let the thinned week
   labels overflow into neighbouring (label-less) columns without wrapping.
   The two/three-series compound selectors below win over .chart-bars.two-pairs-bars
   (gap: 18px) on specificity. */
.chart-bars.two-pairs-bars.dashboard-bars-dense,
.chart-bars.three-series-bars.dashboard-bars-dense,
.chart-bars.dashboard-bars-dense {
  gap: 4px;
}

.chart-bars.dashboard-bars-dense .dashboard-week-column strong {
  white-space: nowrap;
  overflow: visible;
}

.dashboard-week-bars.billable-only {
  grid-template-columns: repeat(2, minmax(8px, 1fr));
}

/* B8: grouped 3-series bars (billable / internal / total × planned/actual). */
.dashboard-week-bars.three-series {
  gap: 2px;
  grid-template-columns: repeat(6, minmax(4px, 1fr));
}

.chart-bars.three-series-bars {
  gap: 18px;
}

.chart-caption {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 12px;
  justify-content: space-between;
  margin-top: 14px;
}

.flank-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 4px;
}

/* B8: Warranty flank folded into the Garantie KPI — Internal is now the sole flank. */
.flank-grid.single {
  grid-template-columns: minmax(0, 1fr);
}

.flank-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
}

.flank-head {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 4px;
}

.flank-head .total {
  font-size: 15px;
  font-weight: 900;
}

.flank-sort {
  display: flex;
  gap: 6px;
  margin: 10px 0 4px;
}

.flank-sort button {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 7px;
  box-sizing: border-box;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  /* MK-63: was 28px, the pill size, on a control that sorts a list. */
  min-height: var(--control-height-row);
  padding: 0 10px;
}

.flank-sort button.active {
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  border-color: var(--primary);
  color: var(--primary);
}

.flank-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.flank-list li {
  align-items: baseline;
  border-top: 1px solid var(--line);
  display: flex;
  font-size: 14px;
  gap: 12px;
  justify-content: space-between;
  padding: 9px 0;
}

.flank-list li:first-child {
  border-top: 0;
}

.flank-list strong {
  font-weight: 500;
}

.flank-list span {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  white-space: nowrap;
}

.table-note {
  color: var(--muted);
  font-size: 12px;
  margin: 10px 2px 0;
}

@media (max-width: 1080px) {
  /* MK-62 pattern C: the `.metrics.kpi` 5→3 column override that used to
     live here is gone. S1 (2026-08-12) retired `.t-stats` and its auto-fit
     rule along with it — `.figure-strip` states its column count explicitly
     instead, and the 5→3 wrap D12-A-010 requires is stated in the
     701–768px band beside the component. */

  .flank-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  /* MK-62 pattern C: same story as the 1080px band — the single-column
     override is gone. Since S1 (2026-08-12) the narrow-width column count
     is stated by `.figure-strip`'s own ≤700px rule, not by a retired
     `.t-stats` auto-fit. */

  .chart-bars {
    overflow-x: auto;
  }
}

@media (max-width: 760px) {
  .triage-head {
    align-items: stretch;
    display: grid;
    gap: 8px;
  }

  .count-line {
    width: 100%;
  }

  /* The phone form of the same record. It carries `.t-records` so it outranks
     the record form's own declared column minimums rather than tying on
     specificity and losing to source order. */
  .triage-row.t-records {
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) 16px;
    min-height: 0;
    overflow: hidden;
    padding: 9px 14px;
  }

  .triage-row.is-pointer {
    grid-template-columns: minmax(0, 1fr);
    max-height: 135px;
    min-height: 108px;
    padding-block: 10px;
  }

  .triage-row:not(.is-pointer) {
    height: 64px;
  }

  .triage-row .owner,
  .triage-desktop-chips,
  .triage-row:not(.is-pointer) .triage-action {
    display: none;
  }

  .triage-main {
    min-width: 0;
  }

  .triage-main .proj {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .triage-row.is-pointer .triage-main .proj {
    white-space: normal;
  }

  .triage-mobile-meta {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: 12px;
    gap: 7px;
    margin-top: 4px;
    min-width: 0;
  }

  .triage-mobile-meta > span:first-child {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .triage-mobile-meta .sev-badge {
    flex: 0 1 auto;
    max-width: 62%;
    min-height: 24px;
    overflow: hidden;
    padding: 3px 8px;
    text-overflow: ellipsis;
  }

  .triage-mobile-chevron {
    align-self: center;
    color: var(--muted);
    display: block;
    font-size: 20px;
  }

  .triage-row.is-pointer .triage-mobile-chevron {
    display: none;
  }

  .triage-action {
    justify-items: start;
    margin-top: 6px;
    text-align: left;
  }

  .triage-sort-value {
    display: none;
  }

  .home-counts {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .home-count-filter {
    font-size: 12px;
    line-height: 1.2;
    padding-inline: 5px;
  }

  .triage-evidence-sources {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-low-priority {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-portfolio-card {
    align-items: stretch;
    display: grid;
  }

  .home-portfolio .health-legend {
    display: grid;
    gap: 8px;
  }
}

/* S1 — quiet figure strip (2026-08-12 faithfulness campaign).
   One shared component for KPI/stat rows: uppercase kicker, large tabular
   figure, muted context line. No boxes, no backgrounds, no border-radius —
   the "quiet" in the name.

   The BASE below is D-7's drawn CSS verbatim (D-7-jira-progress.html:138-141:
   `.r-fig{border-left:1px solid var(--line);padding:4px 24px 6px}`,
   `.r-fig .k{…12px;font-weight:500;letter-spacing:.04em…}`,
   `.r-fig .v{…26px;font-weight:800;…letter-spacing:-.02em;margin-top:8px}`),
   because D-7 is the frame with the fullest kicker+value+context+divider set.

   D-7's numbers are NOT the house style: the other three surfaces were each
   drawn with their own strip CSS, and the faithfulness standard is each
   artifact's own block, not the extraction source projected onto all four.
   The three `--` variants below carry those per-surface tokens. Adjudicated
   2026-08-12 (owner ruling on the MR-P0 checkpoint review). */
.figure-strip {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(var(--figure-strip-cols, 4), minmax(0, 1fr));
  margin: 0;
}

.figure-strip-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.figure-strip-row .figure-strip {
  flex: 1 1 auto;
}

.figure-strip-cell {
  border-left: 1px solid var(--line);
  min-width: 0;
  padding: 4px 24px 6px;
}

.figure-strip-cell:first-child {
  border-left: 0;
  padding-left: 0;
}

.figure-strip-kicker {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.figure-strip-value {
  display: block;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 8px;
}

.figure-strip-context {
  color: var(--muted);
  display: block;
  font-size: 13px;
  margin-top: 6px;
}

/* words carry the meaning (the kicker + context text), colour is never the
   only signal — these modifiers only ever tint an already-labelled figure. */
.figure-strip-value.is-warning { color: var(--warning-text); }
.figure-strip-value.is-danger { color: var(--status-red-fg); }
.figure-strip-value.is-amber { color: var(--status-amber-fg); }
.figure-strip-value.is-good { color: var(--status-green-fg); }

@media (max-width: 700px) {
  .figure-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 20px;
  }

  .figure-strip-cell:nth-child(2n+1) {
    border-left: 0;
    padding-left: 0;
  }
}

/* ── Variant: D-6 project-log summary ──────────────────────────────────
   D-6-project-log.html:148-151 —
     .r-logsummary{align-items:center;border-bottom:1px solid var(--line);
       display:flex;flex-wrap:wrap;gap:28px;padding:18px 0 22px;margin-top:28px}
     .r-logsummary .stat{display:flex;flex-direction:column;gap:4px}
     .r-logsummary .stat .k{…font-size:12px;font-weight:500;letter-spacing:.04em…}
     .r-logsummary .stat .v{font-size:22px;font-weight:800;…}
   So: no vertical dividers, one hairline UNDER the block, 22px value, and the
   kicker→value gap is 4px rather than D-7's 8px margin-top.

   NOTE for the record: D6-A-003 words this as "one hairline-bordered block",
   which could be read as an enclosing box; the drawn CSS is border-bottom
   only, and the drawn CSS is the standard this variant follows. */
.figure-strip--log-summary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  grid-template-columns: none;
}

.figure-strip-row:has(> .figure-strip--log-summary) {
  border-bottom: 1px solid var(--line);
  margin-top: 28px;
  padding: 18px 0 22px;
}

.figure-strip--log-summary .figure-strip-cell {
  border-left: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
}

.figure-strip--log-summary .figure-strip-value {
  font-size: 22px;
  letter-spacing: normal;
  margin-top: 0;
}

/* ── Variant: D-11 reports SLA counts ──────────────────────────────────
   D-11-reports.html:142-147 —
     .kpis{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
       display:grid;grid-template-columns:repeat(4,1fr);margin:24px 0 26px}
     .kpi{…border-left:1px solid var(--line);padding:16px 20px;text-align:left}
     .kpi:first-child{border-left:0}
     .kpi span{…font-size:11px;font-weight:700;letter-spacing:.07em…}
     .kpi strong{…font-size:28px;…font-weight:800;line-height:1.15;margin-top:8px}
     .kpi small{…font-size:12px;margin-top:4px}
   Keeps D-7's vertical dividers, adds the enclosing top/bottom hairlines, and
   carries its own tighter/heavier kicker and larger value. `.kpi:first-child`
   drops only the border — not the 20px padding — so the base's padding-left
   reset is restored here. */
.figure-strip--reports-sla {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  margin: 24px 0 26px;
}

.figure-strip--reports-sla .figure-strip-cell {
  padding: 16px 20px;
}

.figure-strip--reports-sla .figure-strip-cell:first-child {
  padding-left: 20px;
}

.figure-strip--reports-sla .figure-strip-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.figure-strip--reports-sla .figure-strip-value {
  font-size: 28px;
  letter-spacing: normal;
  line-height: 1.15;
}

.figure-strip--reports-sla .figure-strip-context {
  font-size: 12px;
  margin-top: 4px;
}

/* ── Variant: D-12 Insights key figures ────────────────────────────────
   D-12-insights.html:157-161 —
     .kpi{border-bottom:1px solid var(--line);border-top:1px solid var(--line);
       display:grid;gap:26px 40px;grid-template-columns:repeat(5,minmax(0,1fr));
       margin:26px 0 0;padding:22px 0 24px}
     .kpi.wrap32{grid-template-columns:repeat(3,minmax(0,1fr))}
     .k b{…font-size:10.5px;font-weight:700;letter-spacing:.11em…}
     .k strong{…font-size:28px;font-weight:750;…letter-spacing:-.02em;
       line-height:1.2;margin-top:8px}
     .k span{…font-size:12.5px;margin-top:5px}
   D12-A-009: "cardless: one hairline above and below, no per-figure box or
   outline" — so the base's per-cell dividers are removed here and the
   separation is whitespace (the 40px column gap) plus the two rails. */
.figure-strip--insights-kpis {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  gap: 26px 40px;
  margin: 26px 0 0;
  padding: 22px 0 24px;
}

.figure-strip--insights-kpis .figure-strip-cell {
  border-left: 0;
  padding: 0;
}

.figure-strip--insights-kpis .figure-strip-kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.figure-strip--insights-kpis .figure-strip-value {
  font-size: 28px;
  font-weight: 750;
  line-height: 1.2;
}

.figure-strip--insights-kpis .figure-strip-context {
  font-size: 12.5px;
  margin-top: 5px;
}

/* D12-A-010: "KPI strip wraps 3+2 between 700 and 768px, left-aligned; never
   five squeezed columns" — the artifact's own `.kpi.wrap32` variant. The strip
   this component replaced (`.metrics.kpi.t-stats`) satisfied the rule
   implicitly via `repeat(auto-fit, minmax(min(150px, 100%), 1fr))`;
   `.figure-strip` states its column count explicitly, so without this the five
   figures stayed hard-locked at five columns across that band — ~130px each,
   under the width the longest Dutch label ("% declarabel") plus a four-digit
   value needs, i.e. exactly the collision the atom forbids. */
@media (min-width: 701px) and (max-width: 768px) {
  .figure-strip--insights-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* S2 — shared project-detail header (2026-08-12 faithfulness campaign).
   One header idiom for all five project-detail subtabs: breadcrumb eyebrow,
   H1, right-aligned status pill(s), meta line. Sits above the tab strip. */
.project-detail-header {
  margin-bottom: 20px;
}

.project-detail-breadcrumb {
  color: var(--muted);
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.project-detail-breadcrumb a {
  color: var(--primary);
  text-decoration: none;
}

.project-detail-breadcrumb a:hover {
  text-decoration: underline;
}

.project-detail-head-row {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: space-between;
}

.project-detail-head-row h1 {
  margin: 0;
}

.project-detail-head-pills {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.project-detail-meta {
  color: var(--muted);
  font-size: 13px;
  margin: 8px 0 0;
}

.project-detail-tabs {
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
  padding-bottom: 10px;
}

.project-detail-tabs a[aria-current="page"] {
  background: var(--primary);
  color: var(--background);
}

.eyebrow {
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 8px;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: clamp(30px, 2.4vw, 40px);
  font-weight: 900;
  line-height: 1.03;
  margin-bottom: 10px;
  max-width: none;
}

.subcopy {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.45;
  max-width: 760px;
}

.period {
  align-items: center;
  flex-wrap: wrap;
  display: flex;
  gap: 6px;
}

.period-chooser {
  align-items: flex-end;
  display: flex;
  justify-content: flex-end;
  position: relative;
}

.period-toggle {
  align-items: center;
  background: var(--background);
  border: 2px solid var(--primary);
  border-radius: 8px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  /* MK-63: was 48px. The period switch is a primary, touch-first control, so
     it takes the touch size rather than a fourth one above it. */
  min-height: var(--control-height-touch);
  padding: 0 14px;
}

.period-toggle-icon {
  border: 2px solid var(--text);
  border-radius: 3px;
  box-sizing: border-box;
  color: var(--primary);
  display: inline-block;
  height: 22px;
  position: relative;
  width: 22px;
}

.period-toggle-icon::before,
.period-toggle-icon::after {
  background: var(--text);
  content: "";
  position: absolute;
}

.period-toggle-icon::before {
  height: 2px;
  left: 2px;
  right: 2px;
  top: 6px;
}

.period-toggle-icon::after {
  border-radius: 999px;
  height: 4px;
  left: 7px;
  top: 12px;
  width: 4px;
}

.period-toggle strong {
  font-size: 18px;
  font-weight: 900;
}

.period-menu {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 46px rgba(28, 26, 23, 0.14);
  min-width: min(640px, calc(100vw - 48px));
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
}

.period-menu [hidden] {
  display: none !important;
}

.period-tabs {
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.period-tabs button,
.period-option-grid button,
.period-year-nav button {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
}

.period-tabs button {
  align-items: center;
  border-bottom: 3px solid transparent;
  display: inline-flex;
  font-size: 15px;
  font-weight: 900;
  justify-content: center;
  /* MK-63: 14px padding-block put these segmented tabs at 53px. They are the
     default size, like every other tab. */
  min-height: var(--control-height-default);
  padding: 0 18px;
}

.period-year-nav button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  /* MK-63: was the retired 34px. */
  min-height: var(--control-height-default);
}

.period-tabs button.is-active {
  border-color: var(--primary);
  color: var(--text);
}

.period-menu-body {
  padding: 20px;
}

.period-year-nav {
  align-items: center;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  margin-bottom: 16px;
  text-align: center;
}

.period-year-nav strong {
  font-size: 20px;
  font-weight: 900;
}

.period-year-nav button {
  color: var(--text);
  font-size: 32px;
  line-height: 1;
}

.period-option-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.period-option-grid button {
  border-radius: 8px;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  min-height: 44px;
}

.period-option-grid button.is-active {
  background: var(--primary);
  color: #faf8f2;
}

.period-option-grid button:disabled {
  color: color-mix(in srgb, var(--muted) 44%, transparent);
  cursor: not-allowed;
}

.period-custom-fields {
  display: grid;
  gap: 10px;
}

.period button {
  background: transparent;
  cursor: pointer;
}

.period-date {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 8px;
  min-height: 36px;
  padding: 0 8px;
}

.period-custom-range {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.period-date span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.period-date input {
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  max-width: 136px;
}

@media (min-width: 960px) {
  .dashboard-hero {
    grid-template-columns: minmax(32rem, 1fr) minmax(18rem, 0.6fr);
  }

  .dashboard-hero .period,
  .dashboard-hero .period-chooser {
    justify-content: flex-end;
  }
}

/* MK-62 pattern C (.t-stats/.t-stat/.metric(s)/.project-home-kpi(s)/
   .project-log-summary) was fully retired by S1 (2026-08-12 faithfulness
   campaign): the shared cardless `.figure-strip`/`.figure-strip-cell`
   component (below) replaced every consumer — dashboard KPIs, reports SLA
   tiles, the project head KPIs, and the project log summary. */
.data-label {
  color: var(--muted);
  display: block;
  font-size: 13px;
  font-weight: 500;
}

.dashboard-period-panel {
  scroll-margin-top: 18px;
}

.dashboard-variance {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
  padding: 12px 0;
}

.dashboard-variance span {
  display: grid;
  gap: 2px;
}

.dashboard-variance strong {
  color: var(--text);
  font-size: 1rem;
}

.dashboard-variance small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.health-overview {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  padding: 18px 0 20px;
}

.health-list {
  display: grid;
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.health-row {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.28fr);
  min-height: 82px;
  padding: 14px 16px;
}

.health-row:first-child {
  border-radius: 8px 8px 0 0;
}

.health-row:last-child {
  border-radius: 0 0 8px 8px;
}

.health-row strong,
.health-row small {
  display: block;
}

.health-row strong {
  font-size: 16px;
  font-weight: 700;
}

.health-row small {
  color: var(--muted);
  line-height: 1.4;
  margin-top: 4px;
}

.dashboard-period-grid {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 1px;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  overflow: hidden;
}

.dashboard-period-chart,
.dashboard-period-breakdown {
  background: var(--surface);
  padding: 16px;
}

.dashboard-period-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 12px;
}

.dashboard-period-legend span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.dashboard-period-legend span::before {
  border-radius: 999px;
  content: "";
  display: inline-block;
  height: 8px;
  margin-right: 6px;
  width: 20px;
}

.dashboard-period-legend .planned-internal::before,
.dashboard-week-bar.planned-internal {
  background: color-mix(in srgb, var(--accent) 42%, var(--surface));
}

.dashboard-period-legend .actual-internal::before,
.dashboard-week-bar.actual-internal {
  background: color-mix(in srgb, var(--accent) 78%, var(--primary-soft));
}

.dashboard-period-legend .planned-billable::before,
.dashboard-week-bar.planned-billable,
.dashboard-period-legend .planned::before,
.dashboard-period-track.planned,
.dashboard-period-bars .planned-billable {
  background: var(--accent);
}

.dashboard-period-bars .planned-non-billable {
  background: color-mix(in srgb, var(--accent) 40%, var(--surface));
}

.dashboard-period-legend .actual-billable::before,
.dashboard-week-bar.actual-billable,
.dashboard-period-legend .actual::before,
.dashboard-period-track.actual,
.dashboard-period-bars .actual-billable {
  background: var(--primary);
}

/* B8: total series (billable + internal) — planned vs actual. */
.chart-legend .swatch.planned-total,
.dashboard-week-bar.planned-total {
  background: color-mix(in srgb, var(--muted) 55%, var(--surface));
}

.chart-legend .swatch.actual-total,
.dashboard-week-bar.actual-total {
  background: var(--ink);
}

/* Redesigned planned-vs-actual chart: two pairs of bars (internal + billable),
   each planned/actual rendered as 2 shades of one hue (internal = accent/amber,
   billable = primary/teal), with a billable-% line overlaid on the bars. */
.dashboard-week-bars.two-pairs {
  gap: 2px;
  grid-template-columns: repeat(4, minmax(4px, 1fr));
}

.dashboard-week-bars.two-pairs > :nth-child(2) {
  margin-right: 6px;
}

.chart-bars.two-pairs-bars {
  gap: 18px;
  position: relative;
}

.dashboard-week-bars.two-pairs .dashboard-week-bar.planned-internal,
.chart-legend .swatch.planned-internal {
  background: color-mix(in srgb, var(--accent) 40%, var(--surface));
}

.dashboard-week-bars.two-pairs .dashboard-week-bar.actual-internal,
.chart-legend .swatch.actual-internal {
  background: color-mix(in srgb, var(--accent) 90%, var(--ink));
}

.dashboard-week-bars.two-pairs .dashboard-week-bar.planned-billable,
.chart-legend .swatch.planned-billable {
  background: color-mix(in srgb, var(--primary) 40%, var(--surface));
}

.dashboard-week-bars.two-pairs .dashboard-week-bar.actual-billable,
.chart-legend .swatch.actual-billable {
  background: var(--primary);
}

.chart-legend .swatch.billable-line {
  align-self: center;
  background: var(--accent);
  border-radius: 2px;
  height: 3px;
}

.dashboard-billable-line {
  height: 150px;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 4px;
  width: 100%;
}

/* Round hover dots on the billable-% line (HTML so they stay circular over the
   stretched SVG). Hovering a dot reveals the exact % via its title. */
.dashboard-billable-dots {
  height: 150px;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 4px;
  width: 100%;
}

.dashboard-billable-dot {
  background: var(--accent);
  border: 2px solid var(--surface);
  border-radius: 50%;
  height: 11px;
  pointer-events: auto;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 11px;
}

/* Chart frame: bars + a right-hand 0-100% axis for the billable-% line. */
.dashboard-chart-figure {
  align-items: flex-start;
  display: flex;
  gap: 10px;
}

.dashboard-chart-figure .chart-bars {
  flex: 1;
  min-width: 0;
}

.dashboard-billable-axis {
  color: var(--accent);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 900;
  height: 150px;
  justify-content: space-between;
  padding-top: 4px;
  text-align: right;
}

/* Per-bucket figures under each bar cluster: clearer, roomier, actual / planned. */
.dashboard-week-figures {
  display: grid;
  gap: 3px;
  margin-top: 6px;
}

.dashboard-week-figure {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding-left: 10px;
  position: relative;
}

.dashboard-week-figure::before {
  border-radius: 2px;
  content: "";
  height: 9px;
  left: 0;
  position: absolute;
  top: 3px;
  width: 4px;
}

.dashboard-week-figure.fig-internal::before {
  background: color-mix(in srgb, var(--accent) 90%, var(--ink));
}

.dashboard-week-figure.fig-billable::before {
  background: var(--primary);
}

.dashboard-week-figure.fig-percentage::before {
  background: var(--accent);
}

.dashboard-week-figure .fig-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.dashboard-week-figure .fig-value {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.dashboard-period-segment-legend {
  align-items: center;
  border-top: 1px solid color-mix(in srgb, var(--primary) 10%, var(--line));
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 12px;
  padding-top: 10px;
}

.dashboard-period-segment-legend span {
  align-items: center;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  gap: 6px;
}

.dashboard-period-segment-legend span::before {
  border-radius: 999px;
  content: "";
  display: inline-block;
  height: 8px;
  width: 20px;
}

.dashboard-period-segment-legend .billable-segment::before {
  background: linear-gradient(90deg, var(--accent), var(--primary));
}

.dashboard-period-segment-legend .non-billable-segment::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, var(--surface)), color-mix(in srgb, var(--primary) 24%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
}

.dashboard-period-bars .actual-non-billable {
  background: color-mix(in srgb, var(--primary) 24%, var(--surface));
}

.dashboard-period-analysis {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 12px;
  overflow: hidden;
}

.dashboard-period-analysis span {
  background: var(--surface);
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
}

.dashboard-period-analysis strong {
  color: var(--primary);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.dashboard-period-analysis small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.dashboard-week-column {
  display: grid;
  gap: 6px;
  min-width: 70px;
}

/* D4: bucket columns filter the resource table on click. */
.dashboard-week-column[role="button"] {
  border-radius: 8px;
  cursor: pointer;
  padding: 4px;
  transition: background 120ms ease;
}

.dashboard-week-column[role="button"]:hover {
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.dashboard-week-column[role="button"]:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);
  outline: 0;
}

.dashboard-week-column.is-filtering {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.dashboard-week-bars {
  align-items: end;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(4, minmax(8px, 1fr));
  height: 150px;
}

.dashboard-week-bar {
  border-radius: 6px 6px 0 0;
  min-height: 2px;
}

.dashboard-week-column strong,
.dashboard-week-column small {
  font-size: 12px;
}

.dashboard-week-column small {
  color: var(--muted);
  line-height: 1.25;
}

.dashboard-period-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 42px minmax(0, 1fr) 126px;
  min-height: 36px;
}

.dashboard-period-row > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.dashboard-period-row strong {
  display: grid;
  gap: 2px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.dashboard-period-row strong span {
  font-size: 12px;
  line-height: 1.1;
}

.dashboard-period-bars {
  display: grid;
  gap: 4px;
}

.dashboard-period-track {
  border-radius: 999px;
  display: flex;
  height: 8px;
  min-width: 2px;
  overflow: hidden;
}

.dashboard-period-bars i {
  display: block;
  height: 8px;
  min-width: 2px;
}

.dashboard-period-breakdown {
  display: grid;
  gap: 16px;
}

.dashboard-breakdown-disclosure {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.dashboard-breakdown-disclosure summary {
  align-items: baseline;
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.dashboard-sort-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.dashboard-breakdown-head {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.dashboard-breakdown-head strong {
  color: var(--primary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  white-space: nowrap;
}

.dashboard-period-breakdown ul {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.dashboard-period-breakdown li {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.dashboard-classification-rules {
  background: color-mix(in srgb, var(--primary-soft) 34%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 8px;
  padding: 12px;
}

.dashboard-classification-rules li {
  align-items: start;
  display: grid;
  gap: 4px;
  grid-template-columns: minmax(0, 0.52fr) minmax(0, 0.48fr);
  justify-content: stretch;
}

.dashboard-classification-rules li + li {
  border-top: 1px solid color-mix(in srgb, var(--primary) 10%, var(--line));
  padding-top: 8px;
}

.dashboard-classification-rules small {
  color: var(--muted);
  font-size: 12px;
  grid-column: 1 / -1;
  line-height: 1.35;
}

.dashboard-period-breakdown li strong,
.dashboard-period-breakdown li span {
  font-size: 13px;
}

.dashboard-period-breakdown li span {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.split {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
}

.split > *,
.side {
  min-width: 0;
}

.section {
  margin-bottom: 30px;
}

.section-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.section-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.section h2 {
  font-size: 22px;
  font-weight: 900;
  margin: 0;
}

.section-note {
  color: var(--muted);
  font-size: 14px;
  margin: 6px 0 0;
}

.table {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.row {
  align-items: center;
  background: var(--surface-translucent);
  border-top: 1px solid var(--line);
  color: var(--text);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(190px, 1.35fr) 82px 88px 96px minmax(116px, 0.75fr);
  min-height: 68px;
  padding: 12px 16px;
  text-decoration: none;
}

.row:first-child {
  border-top: 0;
}

.table [data-project-rows] .row:first-child {
  border-top: 1px solid var(--line);
}

.table [data-project-rows] .row {
  cursor: pointer;
}

.table [data-project-rows] .row.is-selected {
  background: color-mix(in srgb, var(--primary) 8%, var(--background));
  box-shadow: inset 3px 0 0 var(--primary);
}

.table [data-project-rows] .row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.project-filter-panel {
  align-items: center;
  display: grid;
  gap: 8px 10px;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  margin: 10px 0 12px;
}

.project-search,
.filter-chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  min-height: 44px;
  padding: 9px 12px;
}

.project-search {
  display: grid;
  gap: 4px;
}

.project-status-filter,
.project-secondary-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* WP5: the block is a stretched grid item of .project-filter-more-body, so
   its chips inherited the height of the tallest sibling column - measured
   at ~120px per chip. Wrong at every width, not just on phones. */
.project-secondary-filters {
  align-content: flex-start;
  align-items: flex-start;
}

.project-secondary-filters .filter-chip {
  min-height: 44px;
}

.project-status-filter {
  flex-wrap: nowrap;
}

.project-status-filter .filter-chip {
  min-height: 44px;
  white-space: nowrap;
}

/* WP6: the result count is now the third row of .project-search, directly
   under the input it describes, so it aligns with the field rather than
   floating at the far end of the filter panel. */
.project-filter-count {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  justify-self: start;
}

.project-filter-more {
  grid-column: 1 / -1;
}

.project-filter-more summary {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  min-height: 44px;
  padding: 7px 10px;
}

.project-filter-more summary::-webkit-details-marker {
  display: none;
}

.project-filter-more-body {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(260px, 1.1fr) minmax(260px, 1fr);
  margin-top: 8px;
  padding: 10px;
}

/* WP5: the sheet footer is an affordance for the phone bottom sheet only.
   Above that tier the panel is inline, the result list is already visible
   beside it, and the summary itself closes the disclosure - so a second
   "show results" button would be desktop chrome for no reason. */
.project-filter-sheet-foot {
  display: none;
  grid-column: 1 / -1;
}

/* The filter row keeps its three rigid tracks plus a nowrap result counter
   until the phone tier, so 761-900px pushed the whole document to 835px on
   the projects overview. Collapse to a single column across that band; 900
   clears the measured overflow with headroom and stays clear of the 1080px
   layout rules. Must sit after the base declarations above, or the later
   .project-filter-more-body rule would win on source order. */
@media (max-width: 900px) {
  .project-filter-panel {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  .project-filter-more-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-status-filter {
    flex-wrap: wrap;
  }
}

.project-saved-filters {
  display: grid;
  gap: 8px;
}

.project-saved-filters > strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.project-saved-filters > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-saved-filters .filter-chip {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  min-height: 44px;
  padding: 7px 10px;
}

.project-saved-filters .filter-chip small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.filter-chip-group {
  align-items: stretch;
  display: inline-flex;
  gap: 4px;
}

.filter-chip-delete {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
}

.filter-chip-delete:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.project-filter-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-filter-save-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-filter-save-row input[type="text"],
.project-filter-save-row input:not([type]) {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  min-height: 44px;
  padding: 7px 9px;
}

.project-filter-shared-toggle {
  align-items: center;
  display: inline-flex;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
}

.project-filter-actions span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.project-type-filters {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px 10px;
}

.project-type-filters legend {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 0 4px;
  text-transform: uppercase;
}

.project-type-filters label {
  align-items: center;
  display: inline-flex;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
}

.project-management-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 12px 0;
  padding: 12px;
}

.project-management-panel > summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
}

.project-management-panel > :not(summary) {
  margin-top: 12px;
}

.project-type-bulk-actions,
.project-type-select-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-type-bulk-actions span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.project-type-select-row input {
  accent-color: var(--primary);
}

/* The eyebrow above the input. WP6 added the result count as a third row of
   the same label, and that one is sentence case at reading size. */
.project-search > span:not(.project-filter-count) {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.project-search input {
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  min-width: 0;
  outline: 0;
}

.filter-chip {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.filter-chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--background);
}

.projects-overview-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
}

.project-overview-row {
  align-items: stretch;
  background: var(--surface-translucent);
  border-top: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 1px;
  /* WP6: retuned so the row fits the 1374px workspace at 1440 instead of
     permanently clipping Budget. Col 2 (type select) 136->152 so "Beheerde
     service"/"Niet toegewezen" clear the chevron; col 5 144 so the Dutch
     header "Rapportage" cannot bleed into Jira; col 10 84 so "Voortgang"
     fits. Status/Live/Deadline/DM pay for it - they hold a short chip, a
     "15 sep" date, a ~120px sub-line and a name. */
  grid-template-columns: minmax(240px, 1.3fr) 152px 88px 84px 120px 104px 100px 176px 96px 100px 76px;
  min-width: 1346px;
  text-decoration: none;
}

.project-overview-row[hidden] {
  display: none !important;
}

.project-overview-row:first-child {
  border-top: 0;
}

.project-overview-row > span {
  align-content: center;
  display: grid;
  min-height: 64px;
  min-width: 0;
  padding: 10px 12px;
}

.project-overview-row.head {
  background: var(--surface);
  color: var(--muted);
  cursor: default;
  font-size: 12px;
  font-weight: 900;
  min-height: 42px;
  text-transform: uppercase;
}

.project-overview-row.head > span {
  align-content: end;
  min-height: 42px;
}

.project-overview-row.head button {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: 1.15;
  overflow-wrap: anywhere;
  padding: 0;
  text-align: left;
  text-transform: inherit;
}

.project-overview-row.head button.is-active::after,
.project-mobile-sort button.is-active::after {
  content: " " attr(data-project-sort-direction);
  color: var(--primary);
}

/* WP6: the phone tier hides the header row, so sorting needs its own control.
   Hidden everywhere else - the column headers already sort there. */
.project-mobile-sort {
  display: none;
}

/* WP6: only rendered when a filter combination matches nothing; without it the
   header row sat above blank space. */
.project-overview-empty {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 28px 16px 32px;
}

.project-overview-empty strong {
  font-size: 16px;
  font-weight: 900;
}

.project-overview-empty p {
  color: var(--muted);
  margin: 0;
  max-width: 46ch;
}

/* MK-61(c): two actions and no more - clear everything (primary) or return to
   the default this user saved. They sit on one line so the empty state reads
   as a choice rather than a stack of options. */
.project-overview-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* WP6: the name column is the only cell that identifies the record, so it must
   stay in view while the nine operational columns scroll under it. The row
   background is translucent; an inherited fill would let the scrolling cells
   show through, hence the explicit near-equivalent. 761px rather than 768px so
   the whole non-phone range is covered - see the RESPONSIVE CONVENTION note. */
@media (min-width: 761px) {
  .project-overview-row > span:first-child {
    background: color-mix(in srgb, var(--surface) 72%, var(--background));
    box-shadow: 1px 0 0 var(--line);
    left: 0;
    position: sticky;
    z-index: 1;
  }

  .project-overview-row.head > span:first-child {
    background: var(--surface);
    z-index: 2;
  }

  .project-overview-row.is-selected > span:first-child {
    background: color-mix(in srgb, var(--primary) 8%, var(--background));
    box-shadow: inset 3px 0 0 var(--primary), 1px 0 0 var(--line);
  }
}

.project-overview-row.is-selected {
  background: color-mix(in srgb, var(--primary) 8%, var(--background));
  box-shadow: inset 3px 0 0 var(--primary);
}

.project-overview-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.project-overview-row small {
  color: var(--muted);
  display: block;
  font-size: 12px;
  line-height: 1.25;
  margin-top: 3px;
}

.project-overview-cell-link {
  color: inherit;
  display: block;
  min-height: 44px;
  text-decoration: none;
}

.project-overview-cell-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.project-status-cell {
  align-content: center;
  gap: 6px;
}

.project-report-link,
.project-dm-link {
  text-decoration: none;
}

.project-report-link {
  align-items: center;
  border-radius: 6px;
  color: var(--text);
  display: flex;
  line-height: 1.15;
  margin: -4px -6px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 4px 6px;
  white-space: nowrap;
}

.project-report-link:hover,
.project-report-link:focus-visible,
.project-dm-link:hover,
.project-dm-link:focus-visible {
  background: var(--primary-soft);
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.project-report-copy {
  min-width: 0;
  overflow: hidden;
}

.project-report-link strong,
.project-report-link small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-report-link strong {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.project-report-link.is-complete {
  color: var(--success-text);
  justify-items: start;
}

.project-report-link.is-complete strong {
  font-size: 16px;
}

.project-report-link.is-danger {
  color: var(--danger-text);
}

.project-report-link.is-warning {
  color: var(--warning-text);
}

.project-report-link.is-neutral {
  color: var(--muted);
}

.project-report-link small {
  color: color-mix(in srgb, var(--muted) 70%, var(--text));
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 2px;
}

.project-dm-link {
  border-radius: 6px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  width: fit-content;
}

.project-type-cell {
  cursor: default;
}

.project-type-inline-select {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  min-height: 34px;
  width: 100%;
}

.rag {
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  justify-content: center;
  min-height: 26px;
  padding: 4px 8px;
  width: fit-content;
}

.rag.red {
  background: var(--status-red-fill);
  border-color: var(--status-red-line);
  color: var(--status-red);
}

.rag.orange {
  background: var(--status-amber-fill);
  border-color: var(--status-amber-line);
  color: var(--status-amber);
}

.rag.green {
  background: var(--status-green-fill);
  border-color: var(--status-green-line);
  color: var(--status-green);
}

.rag.neutral {
  background: var(--background);
  border-color: var(--line);
  color: var(--muted);
}

/* .mode‑badge and .jira‑state retired 2026-08-11 (T1-a cluster B) onto
   canonical .pill.info/.pill.success/.pill.danger/.pill.neutral — see
   docs/operations/MK63_DELIVERY_COMPONENT_MIGRATION_MAP.md. */

.number {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.row.head {
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  min-height: 44px;
  text-transform: uppercase;
}

.row > span {
  min-width: 0;
}

/* WP6: a six-line project name produced a 220px row next to 64px siblings.
   Two lines plus the title attribute for the full string. */
.project-title strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
}

.project-title small {
  color: var(--muted);
}

.project-source {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.pill {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 500;
  min-height: 28px;
  padding: 4px 9px;
}

a.pill {
  text-decoration: none;
}

/* X-1/MK-63 canonical .pill tone vocabulary — clusters B/C (2026-08-11).
   --st-neutral/--st-info already theme-aware (X-5); success/warning/danger
   reuse the existing status-bg/-border/-text trio rather than duplicating
   values as a second source of truth. */
.pill.neutral,
.pill-inline.neutral {
  background: color-mix(in srgb, var(--st-neutral) 13%, var(--surface));
  border-color: color-mix(in srgb, var(--st-neutral) 46%, var(--line));
  color: var(--st-neutral);
}

.pill.info,
.pill-inline.info {
  background: color-mix(in srgb, var(--st-info) 13%, var(--surface));
  border-color: color-mix(in srgb, var(--st-info) 46%, var(--line));
  color: var(--st-info);
}

.pill.success,
.pill-inline.success,
.pill-fixed.success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}

.pill.warning,
.pill-inline.warning,
.pill-fixed.warning {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

.pill.danger,
.pill-inline.danger,
.pill-fixed.danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

/* Compact/inline geometry preserved from the retired .readiness‑pill /
   .planning‑concept‑badge selectors (10px uppercase, tight padding) —
   cluster A found full geometry convergence to 28px/12px on inline
   compact contexts causes overflow regressions, so only the colour
   vocabulary converges here; see T1-A-STATUS.md Clusters B+C. */
.pill-inline {
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  padding: 3px 6px;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Fixed-width status pill geometry preserved from the retired
   .progress‑status‑pill selector (report/progress tables rely on a
   consistent column width). */
.pill-fixed {
  justify-content: center;
  min-height: 28px;
  min-width: 108px;
}

.pill-fixed[data-epic-activity-map-jump] {
  -webkit-appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  min-height: 44px;
}

.pill.provider {
  background: var(--primary-soft);
  color: var(--primary);
}

.pill.manual {
  background: #fff4d8;
  border-color: #f2c375;
  color: #8a5600;
}

.pill.concept {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.pill.danger-pill {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

.status {
  color: var(--primary);
  display: block;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.status.health-critical {
  color: var(--status-red);
}

.status.health-attention {
  color: var(--status-amber);
}

.status.health-healthy {
  color: var(--status-green);
}

/* ── X-1/MK-63 canonical .btn ─────────────────────────────────────────
   Retires the four legacy Delivery button selectors (the compact table
   action, the square icon-only control, the planning week-nav control, and
   the progress-table sort header) onto one shared button vocabulary per
   docs/operations/MK63_DELIVERY_COMPONENT_MIGRATION_MAP.md. Exactly 4
   variants (primary/secondary/quiet/destructive), exactly 3 sizes
   (sm=table row/32px, default=40px, lg=touch+dialogs/44px — the
   pre-existing --control-height-row/-default/-touch trio via the
   --control-sm/-md/-lg aliases), never a 4th of either.

   Deliberate divergence from X-1's own literal CSS: X-1 sets
   white-space: nowrap on .btn. Migrating real product content onto it
   surfaced two real overflow regressions at 320px (the cockpit triage
   row-0 action link and the "open full list" footer link, both carrying
   translated Dutch labels that used to wrap and no longer could) — neither
   retired legacy selector ever set white-space at all. Rather than an
   open-ended list of per-consumer nowrap overrides as more pages migrate,
   .btn omits the rule and wraps by default like its predecessors did;
   a specific instance that genuinely needs single-line truncation can add
   white-space: nowrap itself. */
.btn {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: var(--text-sm, 14px);
  font-weight: 500;
  gap: 8px;
  justify-content: center;
  line-height: 1;
  min-height: var(--control-md);
  padding: 0 14px;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.btn.sm {
  font-size: 13px;
  min-height: var(--control-sm);
  padding: 0 10px;
}

.btn.lg {
  font-size: var(--text-base, 16px);
  min-height: var(--control-lg);
  padding: 0 18px;
}

.btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
  font-weight: 700;
}

.btn.secondary {
  background: var(--background);
  border-color: var(--line);
  color: var(--primary);
  font-weight: 700;
}

.btn.quiet {
  background: transparent;
  border-color: transparent;
  color: var(--primary);
  font-weight: 500;
}

.btn.destructive {
  background: color-mix(in srgb, var(--status-red) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--status-red) 46%, var(--line));
  color: var(--status-red);
  font-weight: 700;
}

.btn.icon {
  padding: 0;
  width: var(--control-md);
}

.btn.icon.sm {
  width: var(--control-sm);
}

.btn.icon.lg {
  width: var(--control-lg);
}

.btn.secondary:hover,
.btn.quiet:hover {
  background: var(--surface);
  border-color: var(--line);
}

.btn.primary:hover {
  background: color-mix(in srgb, var(--primary) 86%, var(--text));
}

/* Icon buttons keep their pre-existing inverted-fill hover/expanded
   treatment (topbar chrome) rather than the flatter .secondary/.quiet
   hover above — a deliberate accent, not a geometry divergence. */
.btn.icon:hover,
.btn.icon[aria-expanded="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--background);
}

.btn.icon.language-toggle {
  min-width: 46px;
  padding: 0 10px;
  width: auto;
}

.btn[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

/* An author `display` beats the UA stylesheet's [hidden] { display: none },
   so every control this pass gave a display value has to restate it or the
   hidden state stops hiding. (Caught by check-delivery-action-controls.mjs:
   two hidden buttons became visible.) */
.btn[hidden],
.tab[hidden],
.flank-sort button[hidden],
.period-tabs button[hidden],
.period-year-nav button[hidden] {
  display: none;
}

/* Busy state for the Integrations sync buttons: a spinning ring after the label
   makes it obvious the (up-to-a-minute) provider sync is running. */
.btn.is-syncing::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: delivery-sync-spin 0.7s linear infinite;
}

@keyframes delivery-sync-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-syncing::after {
    animation: none;
  }
}

.progress {
  background: var(--surface);
  border-radius: 999px;
  height: 9px;
  margin-top: 8px;
  overflow: hidden;
}

.progress span {
  background: var(--primary);
  display: block;
  height: 100%;
}

.sync-status-card[hidden] {
  display: none;
}

.sync-status-progress span {
  transition: width 0.4s ease;
  width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sync-status-progress span {
    transition: none;
  }
}

.side {
  display: grid;
  gap: 18px;
}

.side-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

.side-panel h3 {
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 12px;
}

.auth-panel {
  background: color-mix(in srgb, var(--primary-soft) 34%, transparent);
}

.auth-panel-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.auth-panel-head h3 {
  margin-bottom: 0;
}

.auth-status {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  margin: 10px 0 12px;
}

.auth-status.danger {
  color: var(--danger);
}

.auth-form {
  display: grid;
  gap: 8px;
}

.auth-form[hidden] {
  display: none;
}

.auth-form input {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  min-height: 38px;
  min-width: 0;
  padding: 7px 9px;
}

.auth-form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
  outline: 0;
}

.auth-user {
  color: var(--muted);
  display: block;
  line-height: 1.4;
  margin-top: 10px;
}

.focus-list,
.sync-list,
.report-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.focus-list li,
.sync-list li,
.report-list li {
  display: grid;
  gap: 4px;
  list-style: none;
}

.focus-list strong,
.sync-list strong,
.report-list strong {
  font-size: 15px;
}

.focus-list span,
.sync-list span,
.report-list span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.sync-list.compact {
  gap: 8px;
}

.sync-list.compact strong {
  font-size: 14px;
}

.integrations-workspace {
  min-height: 68vh;
}

.integrations-grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.integrations-grid > .sync-evidence,
.integrations-grid > .integration-action,
.integrations-grid > .integration-activation,
.integrations-grid > .integration-readiness {
  height: 100%;
  margin-top: 0;
}

.integrations-grid > .auth-panel {
  align-content: start;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--line));
  border-radius: 8px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr) minmax(220px, 0.45fr);
  padding: 14px;
}

.integrations-grid > .auth-panel .auth-form {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

.integrations-grid > .auth-panel .auth-status,
.integrations-grid > .auth-panel .auth-user {
  margin: 0;
}

.integration-command-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.integration-command-grid > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 12px;
}

/* The admin-only full-sync action ships [hidden] and is revealed per session.
   The grid/action display rules above would otherwise defeat the hidden
   attribute's UA display:none. */
[data-delivery-full-sync-action][hidden] {
  display: none;
}

.integration-command-grid small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.integration-readiness,
.integration-activation {
  background: color-mix(in srgb, var(--primary-soft) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 8px;
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
}

.integration-activation {
  background: color-mix(in srgb, var(--surface) 78%, var(--accent-soft));
}

.sync-evidence {
  background: color-mix(in srgb, var(--surface) 72%, var(--primary-soft));
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
}

.provider-evidence.compact-source {
  gap: 8px;
  margin: 10px 0 18px;
  padding: 10px 12px;
}

.provider-evidence.compact-source [data-sync-evidence-summary] {
  display: none;
}

.provider-evidence.compact-source .sync-list {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.provider-evidence.compact-source .sync-list li {
  min-height: auto;
  padding: 8px;
}

.provider-evidence.compact-source .sync-list strong {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: space-between;
}

.provider-evidence.compact-source .sync-list span,
.provider-evidence.compact-source .sync-list small {
  display: none;
}

.provider-evidence.compact-source .sync-list .pill-inline {
  display: inline-flex;
  flex: 0 0 auto;
  margin-left: 6px;
}

.integration-readiness-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.integration-readiness-head > strong {
  font-size: 15px;
  font-weight: 900;
}

.integration-readiness > small,
.integration-activation > small,
.sync-evidence > small,
.sync-list.compact small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.activation-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.activation-list li {
  border: 1px solid var(--line);
  border-left: 4px solid var(--danger);
  border-radius: 8px;
  display: grid;
  gap: 3px;
  padding: 10px;
}

.activation-list li.warn {
  border-left-color: var(--accent);
}

.activation-list li.provider {
  border-left-color: var(--primary);
}

.activation-list strong {
  font-size: 14px;
}

.activation-list span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

/* .readiness‑pill retired 2026-08-11 (T1-a cluster B) onto .pill-inline +
   .pill.{success,warning,danger} — see
   docs/operations/MK63_DELIVERY_COMPONENT_MIGRATION_MAP.md. margin-left is
   carried by .pill-inline itself (5px, this component's original value). */
.pill-inline {
  margin-left: 5px;
}

.integration-action {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
}

.integration-action.nested {
  margin-top: 10px;
  padding-top: 10px;
}

.project-type-inbox {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  padding: 12px;
}

.project-type-inbox.warn {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

.project-type-inbox.is-clear {
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 18%, var(--line));
}

.project-type-inbox strong {
  font-size: 16px;
  font-weight: 900;
}

.integration-settings summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
  list-style-position: inside;
}

.integration-settings form {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.integration-action .btn {
  justify-self: start;
}

.integration-action input,
.integration-action select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  min-width: 0;
  padding: 9px 10px;
}

.integration-action input:focus,
.integration-action select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(17, 77, 97, 0.13);
  outline: none;
}

.integration-action small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.project-jira-link-card {
  align-items: end;
  background: color-mix(in srgb, var(--surface) 84%, var(--primary-soft));
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(260px, 1fr) minmax(120px, 0.22fr) auto;
  margin: 0 0 18px;
  padding: 14px;
}

.project-jira-link-card strong,
.project-jira-link-card small,
.project-jira-link-card label span {
  display: block;
}

.project-jira-link-card label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.project-jira-link-card input {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  min-height: 38px;
  padding: 8px 10px;
  text-transform: uppercase;
  width: 100%;
}

.project-jira-link-card input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(17, 77, 97, 0.13);
  outline: none;
}

.project-jira-link-card > small {
  grid-column: 1 / -1;
}

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.window-switch {
  display: flex;
  gap: 8px;
  margin: -4px 0 14px;
}

.planning-command-bar {
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(180px, auto) minmax(190px, auto) auto 1fr;
  margin: 16px 0 18px;
  padding: 12px;
}

.planning-control-group {
  display: grid;
  gap: 6px;
}

.planning-control-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

/* D10-A-003 (T4-a, grid chunk 3): the capacity-answer sentence is the page's
   signature element (MK-15 verdict) -- a plain tinted surface, no coloured
   edge (GD-01/GD-04), so it reads as a computed answer without inventing a
   new status colour. */
.planning-capacity-answer {
  align-items: center;
  background: var(--agg-tint);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: space-between;
  margin: 16px 0;
  padding: 14px 16px;
}

.planning-capacity-answer strong {
  font-size: 18px;
  font-weight: 800;
}

.planning-capacity-threshold-field {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 6px;
}

.planning-capacity-threshold-field input {
  font-size: 16px;
  height: 40px;
  text-align: center;
  width: 64px;
}

.compact-tabs {
  margin: 0;
}

/* The short states ("Saved", "Bewaard") never wrap on their own, but the
   project log's first-paint sentence is 218px (239px in Dutch) and used to
   leave a 320px viewport entirely because of `white-space: nowrap`. It wraps
   inside its column now — the whole sentence still reads, MK-62 forbids
   truncating or hiding it. */
.save-state {
  justify-self: start;
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.save-state.saving {
  background: #fff7ed;
  color: #9a3412;
}

.save-state.failed {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.offline-write-notice {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

/* An author `display` beats the UA stylesheet's [hidden] { display: none },
   so `.pill`'s `display: inline-flex` (line ~4360) ignored the JS toggling
   `notice.hidden = !offline` on the planning save-status pill -- the "Offline
   — planningswijzigingen kunnen niet worden opgeslagen" notice rendered
   visibly while genuinely online (owner report 2026-08-13). Same pattern as
   .project-home-commercial-unavailable[hidden] above. */
.offline-write-notice[hidden] {
  display: none;
}

/* Same `.pill[hidden]` specificity trap as above -- the team-role save-status
   pill (delivery-project-detail team panel) ships hidden by default and only
   the JS reveals it once a save is in flight. */
.team-role-save-status[hidden] {
  display: none;
}

/* Same `.pill[hidden]` specificity trap, and the one behind the D-8
   "Alleen-lezen" chip appearing to render for a genuinely-writable (DM/admin)
   project-detail settings session on 2026-08-13: JS correctly set
   `settingsReadOnlyChip.hidden = projectSettingsWritable`, but `.pill`'s
   `display: inline-flex` still won, so the chip rendered regardless of the
   value it was set to -- reading as an "erroneous read-only session" when the
   underlying write gate (deliveryProjectSettingsWritable) was actually
   correct all along. */
[data-project-settings-readonly-chip][hidden] {
  display: none;
}

.planning-save-retry {
  justify-self: start;
}

.planning-persistence-conflict {
  background: var(--danger-bg);
  border: 1px solid color-mix(in srgb, var(--danger-text) 38%, var(--line));
  border-radius: 10px;
  color: var(--danger-text);
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 14px;
}

.planning-persistence-conflict p,
.planning-persistence-conflict ul {
  margin: 0;
}

.planning-persistence-conflict ul {
  display: grid;
  gap: 4px;
  padding-left: 18px;
}

.planning-persistence-conflict li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.planning-persistence-conflict-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.resource-filter-popover {
  grid-column: 1 / -1;
}

.resource-filter-popover summary {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  list-style: none;
  min-height: 44px;
  padding: 10px 12px;
}

.resource-filter-popover summary::-webkit-details-marker {
  display: none;
}

.resource-filter-popover summary span {
  color: var(--muted);
}

.resource-filter-builder {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 8px;
  padding: 12px;
}

.resource-filter-save {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(180px, 1fr) auto;
}

.resource-filter-save label {
  display: grid;
  gap: 5px;
}

.resource-filter-save span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.resource-filter-name {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  min-height: 34px;
  padding: 7px 9px;
}

.resource-filter-builder h3 {
  font-size: 14px;
  font-weight: 900;
  margin: 0 0 8px;
}

.resource-chip-list,
.planning-filter-strip,
.planning-type-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.resource-checkbox-list {
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow: auto;
  padding-right: 4px;
}

.resource-checkbox {
  align-items: center;
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 8px;
  min-height: 34px;
  padding: 7px 9px;
}

.resource-checkbox input {
  accent-color: var(--primary);
}

/* D10-A-006 (grid chunk 3b): now a wrapper for the three named
   Status/Type/Resources groups + the "Als standaard opslaan" action,
   spanning the command bar's full width so they lay out as their own
   flex-wrapped row(s) instead of fighting .planning-command-bar's 4-column
   grid template (sized for the View/Range groups above). */
.planning-filter-strip {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  grid-column: 1 / -1;
}

/* D10-A-006 (grid chunk 3b): the flat sixteen-pill filter strip becomes
   three named .planning-control-group groups (Status/Type/Resources),
   matching the existing Weergave/Bereik pattern above -- same label style,
   same grid rhythm, so the filter row reads as one system with the view/
   range controls rather than a bolted-on second row. */
.planning-filter-group-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.planning-filter-actions {
  align-items: end;
  display: grid;
  margin-left: auto;
}

/* D10-A-007: a distinct action, not a filter pill -- .btn.sm.secondary
   already carries that visual language elsewhere on this bar (the retry
   button above), so this reuses it rather than inventing a fourth button
   style. Disabled while the current filters equal the saved default. */
.planning-filter-actions .btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* D10-A-008/009: the always-visible active-filter chip row. */
.planning-filter-chiprow {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 4px;
  padding-top: 10px;
}

.achip {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 4px;
  padding: 4px 6px 4px 10px;
}

.achip.plain {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
  font-weight: 500;
}

.achip button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  height: 18px;
  justify-content: center;
  padding: 0;
  width: 18px;
}

.achip button:hover {
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--text);
}

.chip-clear {
  background: transparent;
  border: 0;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 2px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.chip-clear:disabled {
  color: var(--muted);
  cursor: not-allowed;
  text-decoration: none;
}

.planning-filter-autosaved {
  color: var(--muted);
  font-size: 12px;
  margin-left: auto;
}

.link-button {
  background: transparent;
  border: 0;
  color: var(--primary);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.planning-type-filter {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.jira-board-type-filter {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* State mirror, not a control: this <select> exists so the filter chips have
   a machine-readable record of what is selected. Nothing listens to its
   change event and it carries tabindex="-1" + aria-hidden, so it is not a
   control for anyone — pointer, keyboard or screen reader. It was clipped to
   1x1px, which is the visually-hidden recipe for text you still want ANNOUNCED;
   this is the opposite case. Take it out of layout entirely rather than leave
   three one-pixel pointer targets on the planning and admin bodies. */
.planning-type-select {
  display: none;
}

.planning-type-chip-list {
  display: inline-flex;
}

.resource-chip {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 7px 9px;
}

.resource-chip.excluded {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--primary);
}

/* .planning‑filter‑chip retired 2026-08-11 (T1-a cluster C) onto
   .pill.select[aria-pressed] — see
   docs/operations/MK63_DELIVERY_COMPONENT_MIGRATION_MAP.md. Already rendered
   as <button aria-pressed>, so this is a pure colour/geometry convergence,
   no markup shape change. */
.pill.select {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 7px 9px;
}

.pill.select[aria-pressed="true"] {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--primary);
}

.planning-page-head {
  align-items: end;
}

.planning-view-head {
  align-items: end;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 16px 0 10px;
  padding-top: 14px;
}

.planning-view-head strong {
  display: block;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
}

.planning-view-head small {
  color: var(--muted);
  display: block;
  font-size: 14px;
  line-height: 1.35;
  margin-top: 4px;
}

.tab {
  background: transparent;
  cursor: pointer;
}

.tab.small {
  /* MK-63: was 30px. "Small" keeps its meaning by taking the row size rather
     than a fourth height of its own. */
  min-height: var(--control-height-row);
  padding: 0 10px;
}

.planning-board-scroll {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.planning-board {
  display: grid;
  grid-template-columns: minmax(190px, 1.4fr) minmax(112px, 0.76fr) repeat(8, minmax(92px, 1fr)) minmax(128px, 1fr);
  min-width: 1244px;
}

/* D10 grid chunk 3 (severity-1 fix): the runtime only ever mounts a WINDOW
   of the 52 weeks (D10-A-037, grows on scroll), so a template hard-coded for
   the full board leaves each row-group short of the declared track count --
   auto-placement then packs cells from several row-groups into one grid row
   instead of wrapping per row-group, which is the live-probed
   character-stacked/bleeding/misaligned severity-1 defect. browser.ts sets
   --planning-year-columns to the count actually rendered on every pass; this
   repeat(60, ...) is only the SSG/no-JS fallback, sized for the full board
   (52 weeks + 4 quarter-subtotal columns spanning 2 tracks each). */
.planning-board.long-range {
  grid-template-columns: var(--planning-year-columns, minmax(190px, 1.4fr) repeat(60, minmax(44px, 1fr)) minmax(128px, 1fr));
  min-width: 3092px;
}

.planning-board.long-range .planning-quarter-cell {
  border-left: 2px solid var(--line);
  border-right: 2px solid var(--line);
  grid-column: span 2;
  text-align: center;
}

.planning-board.long-range .planning-quarter-cell small {
  color: var(--muted);
  font-size: 10px;
  white-space: normal;
}

.planning-board.long-range .planning-cell {
  padding-inline: 2px;
}

.planning-board.long-range .planning-head {
  overflow: visible;
  text-align: center;
}

/* D10-A-033/073, annotation 65: a month boundary is STRUCTURE, so it is the
   1px --line separator the GD-01/GD-04 extension carves out -- not the 2px
   --primary rail that lived here, which is the coloured vertical edge that
   extension bans on any element for any reason. */
.planning-board.long-range .planning-cell.month-turn {
  border-left: 1px solid var(--line);
}

.planning-board.long-range .planning-head small {
  font-size: 10px;
  overflow: visible;
  white-space: nowrap;
}

.planning-board.long-range .planning-input-wrap {
  justify-content: center;
  min-width: 0;
  width: 100%;
}

.planning-board.long-range .planning-input-wrap input {
  font-size: 12px;
  inline-size: 100%;
  max-inline-size: 38px;
  padding-inline: 2px;
  text-align: center;
  width: 100%;
}

.planning-board.long-range .planning-cell > * {
  max-width: 100%;
  min-width: 0;
}

.planning-board.long-range .planning-cell:not(.planning-head) small {
  font-size: 10px;
  overflow-wrap: anywhere;
}

.planning-grid-row {
  display: contents;
}

.planning-grid-row[hidden] {
  display: none;
}

/* D4-A-063/064 (T4-a, grid chunk 2): heat + week-column tint (current-week/
   frozen) + marker (UAT/go-live) + zebra compose as four background-image
   layers over one base fill, instead of each state overwriting `background`
   and whichever is declared later in the cascade winning outright -- the
   chunk-1-flagged .frozen-vs-.neutral collision, and the reason a frozen
   week's heat was invisible. Every state class below sets only its own
   custom property; this rule never decides who wins. Mirrored on D-4's
   .project-detail-planning-row > span below with the same four properties,
   so both grids draw identically (D4-A-064). */
.planning-cell {
  min-height: 62px;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 5px;
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
  --cell-heat: transparent;
  --cell-marker: transparent;
  --cell-week: transparent;
  --cell-zebra: transparent;
  --cell-agg: transparent;
  background-color: var(--surface-translucent);
  background-image:
    linear-gradient(var(--cell-heat), var(--cell-heat)),
    linear-gradient(var(--cell-week), var(--cell-week)),
    linear-gradient(var(--cell-marker), var(--cell-marker)),
    linear-gradient(var(--cell-agg), var(--cell-agg)),
    linear-gradient(var(--cell-zebra), var(--cell-zebra));
  padding: 9px 10px;
}

/* D4-A-063: the zebra layer the heat/week tints compose with -- previously
   absent for this grid: .planning-grid-row uses display:contents (no box of
   its own to paint), and the app-wide X-2/X-5 zebra rule only matches real
   <table> rows, so it silently never matched these CSS-grid <div> rows. */
.planning-grid-row:nth-of-type(even) .planning-cell {
  --cell-zebra: var(--row-tint);
}

.planning-board:not(.long-range) .planning-cell:nth-child(-n+11) {
  border-top: 0;
}

.planning-board:not(.long-range) .planning-cell:nth-child(11n) {
  border-right: 0;
}

.planning-board.long-range .planning-cell:nth-child(-n+58) {
  border-top: 0;
}

.planning-board.long-range .planning-cell:nth-child(9n) {
  border-right: 1px solid var(--line);
}

.planning-board.long-range .planning-cell:nth-child(58n) {
  border-right: 0;
}

.planning-cell strong,
.planning-cell span {
  overflow-wrap: anywhere;
}

.planning-cell strong {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.planning-input-wrap {
  align-items: center;
  display: flex;
  gap: 4px;
}

.planning-input-wrap input {
  appearance: textfield;
  background: var(--background);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  min-height: 30px;
  min-width: 0;
  padding: 4px 6px;
  width: 58px;
}

.planning-input-wrap input::-webkit-inner-spin-button,
.planning-input-wrap input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.planning-input-wrap input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
  outline: 0;
}

/* D4-A-064: same token as D-4's frozen-week tint (.project-detail-planning-row
   > span.frozen below) -- one definition, used everywhere, instead of a
   one-off color-mix()/opacity treatment. D4-A-063: through the --cell-week
   compositing layer (not `background`), so a frozen week's heat still shows
   at full contrast instead of this rule's cascade position deciding whether
   heat is visible. */
.planning-cell.frozen {
  --cell-week: var(--col-frozen);
}

.planning-cell.frozen .planning-input-wrap input {
  color: var(--muted);
  cursor: not-allowed;
}

/* D10-A-081/082: .pill sets its own `display`, which otherwise beats the UA
   stylesheet's `[hidden] { display: none }` (established pattern, see the
   other .foo[hidden] overrides in this file). "Als standaard opslaan" drops
   entirely while offline instead of sitting there disabled. */
[data-planning-filter-default][hidden] {
  display: none;
}

.planning-input-wrap input[aria-invalid="true"] {
  border-color: var(--danger-text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger-text) 25%, transparent);
}

/* D10-A-081/082: offline read-only VALUES, not grey-disabled controls --
   border and background drop so the number reads as plain text, distinct
   from the muted/not-allowed frozen-cell treatment above. */
.planning-input-wrap input.is-offline-readonly-value {
  background: transparent;
  border-color: transparent;
  cursor: default;
}

.planning-cell small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

/* background-color, not the `background` shorthand: both are .planning-cell
   elements, so the shorthand reset the shared base rule's background-image.
   That stopped the T4-a full-column current-week tint dead at the header
   (the header cell does set .current-week), and dropped the D4-A-063 zebra
   layer on the pinned resource column. --surface keeps both opaque, which
   .planning-row-head needs anyway since it is position:sticky. */
.planning-head,
.planning-row-head {
  background-color: var(--surface);
}

/* D4-A-064/059: same aggregate tint token as D-4's totals row and last
   ("Budgetprognose") column (.project-detail-planning-total > span below) --
   one definition, used everywhere. */
.planning-total {
  --cell-agg: var(--agg-tint);
}

/* D4-A-064: same header-row weight/color as D-4's grid (D4-A-046,
   .project-detail-planning-head > span below) -- one definition, used
   everywhere. */
.planning-head span {
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.planning-row-head {
  position: sticky;
  left: 0;
  z-index: 2;
  border-right-color: color-mix(in srgb, var(--primary) 32%, var(--line));
}

.planning-row-head strong {
  font-size: 15px;
  font-weight: 900;
}

.planning-parent-head {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.planning-parent-head strong {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.planning-row-kind {
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 5px;
  color: var(--primary);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  padding: 3px 5px;
  text-transform: uppercase;
}

.planning-inline-staffing-trigger {
  background: transparent;
  border: 0;
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  margin-left: 8px;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.planning-inline-staffing-trigger:focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.planning-inline-staffing-row > .planning-cell {
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
  grid-column: 1 / -1;
  padding: 14px;
  position: relative;
  right: auto;
  z-index: 4;
}

.planning-inline-staffing {
  display: grid;
  gap: 12px;
}

.planning-inline-staffing-head,
.planning-inline-staffing-actions,
.planning-inline-staffing-evidence {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.planning-inline-staffing-head strong { font-size: 16px; }
.planning-inline-staffing-head small,
.planning-inline-staffing-evidence span { color: var(--muted); font-size: 13px; }

.planning-inline-staffing-fields {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(180px, 1.7fr) minmax(120px, 0.8fr) minmax(100px, 0.5fr);
}

.planning-inline-staffing label { display: grid; gap: 4px; }
.planning-inline-staffing label > span { color: var(--muted); font-size: 12px; font-weight: 800; }
.planning-inline-staffing select,
.planning-inline-staffing input {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  min-height: 36px;
  padding: 6px 8px;
}

.planning-inline-staffing-evidence {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 10px;
}

.planning-inline-staffing-evidence.over {
  background: var(--danger-bg);
  border-color: var(--danger-text);
}

.planning-inline-staffing-result { color: var(--success-text); font-size: 13px; font-weight: 800; }

@media (max-width: 700px) {
  .planning-inline-staffing-fields { grid-template-columns: 1fr; }
  .planning-inline-staffing-actions .btn { min-height: 44px; }
}

.planning-parent-summary[aria-expanded="true"] .disclosure-toggle {
  transform: rotate(90deg);
}

.disclosure-toggle {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--primary);
  cursor: pointer;
  /* MK-63: same defect class as the column-header sort control -- no height of
     its own, so it rendered at its 18px line box. It is the in-row size. */
  display: inline-flex;
  font-size: 18px;
  justify-content: center;
  line-height: 1;
  margin: 0;
  min-height: var(--control-height-row);
  padding: 0 2px;
  transition: transform 140ms ease;
}

.disclosure-toggle[hidden] {
  display: none;
}

.disclosure-toggle:focus-visible {
  border-radius: 4px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent);
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.planning-child-head {
  background: color-mix(in srgb, var(--surface) 78%, var(--background));
  padding-left: 28px;
}

.planning-context-head,
.planning-context-cell {
  background: color-mix(in srgb, var(--surface) 86%, var(--background));
}

.planning-context-cell strong {
  font-size: 14px;
}

/* background-color, not the `background` shorthand: child rows are ordinary
   week cells, so the shorthand reset the base rule's background-image and
   silently dropped their heat/current-week/frozen/marker tints. */
.planning-child-row .planning-cell {
  background-color: var(--surface-child);
}

.planning-parent-total strong {
  font-size: 16px;
}

.planning-total-label,
.planning-total {
  border-top-color: color-mix(in srgb, var(--primary) 25%, var(--line));
}

/* Freeze the cumulative/total column on the right (Excel-style) so it stays
   pinned while the week columns scroll horizontally [H4]. The rightmost cell of
   every body + totals row is the cumulative cell; header Total cells are direct
   children of the grid so they carry .planning-col-total explicitly. */
.planning-board .planning-grid-row > .planning-cell:last-child,
.planning-board .planning-col-total {
  position: sticky;
  right: 0;
  z-index: 2;
  border-left: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line));
}

.planning-board .planning-head.planning-col-total {
  z-index: 3;
}

/* The header's identity cell carries .sticky-col; pin it left so the header
   column stays aligned with the already-sticky body row-heads while scrolling. */
.planning-board .planning-head.sticky-col {
  position: sticky;
  left: 0;
  z-index: 3;
}

/* Copy-a-week / paste-to-weeks on the project-detail planning table. Wrap so
   the pair never overflows a narrow week column, where the overflowing button
   half would sit under the next column's header and swallow clicks. */
.project-detail-planning-week-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

/* The 24x24px planning week-nav control that used to have its own rule here
   is retired onto .btn.sm (32px table / 44px touch via the existing
   touch-lift media query) with .primary while selected / .secondary
   otherwise, per MK63_DELIVERY_COMPONENT_MIGRATION_MAP.md — the
   button:focus-visible global rule (near the top of this file) already
   covers the focus ring, so no component-specific focus rule is needed. */

.planning-week-total-row .planning-cell {
  min-height: 54px;
}

/* D10-A-028: pipeline/concept footer line -- a single cell spanning the full
   grid width (`.planning-grid-row { display: contents }` above makes this
   safe: an explicit grid-column override bypasses the per-row cell-count
   auto-placement the other rows rely on). */
.planning-cell.planning-pipeline-footnote {
  grid-column: 1 / -1;
}

.planning-cell.planning-pipeline-footnote .footnote {
  color: var(--muted);
  font-size: 12px;
  margin: 6px 0 0;
}

.planning-cell.planning-pipeline-footnote .footnote:first-child {
  color: var(--text);
  font-weight: 700;
  margin-top: 10px;
}

.planning-cell.planning-pipeline-footnote .pill.concept {
  display: inline-flex;
  vertical-align: middle;
}

.planned-pct {
  border-radius: 7px;
  display: inline-flex;
  font-size: 13px;
  font-weight: 900;
  justify-content: center;
  line-height: 1;
  min-width: 44px;
  padding: 7px 8px;
}

/* D4-A-060/061/064 (T4-a): CELL-level capacity heat -- per resource×week
   cell, never the whole row -- from the theme-fixed --status-* / --cap-*-tint
   tokens only, NEVER --warning-* / --primary. This is the MK-45-class defect
   found by computed-style probing: prod's .planning-cell.under painted from
   --warning-bg/--warning-text, indistinguishable from an unrelated warning
   state and not one of the tokens this decision is allowed to use. Routed
   through the --cell-heat compositing layer (not `background`) so heat
   composes with the week-column tint and zebra instead of colliding with
   them. .planned-pct is a different component (the totals-row percentage
   pill) and keeps its own pre-existing danger/warning pill styling below --
   only the CELL tint moves onto the cap-tint tokens. */
.planning-cell.neutral,
.planning-cell.none {
  --cell-heat: transparent;
}

.planning-cell.unknown {
  color: var(--muted);
}

.planning-cell.over {
  --cell-heat: var(--cap-over-tint);
  color: var(--status-red);
}

.planning-cell.under {
  --cell-heat: var(--cap-under-tint);
  color: var(--status-amber);
}

.planned-pct.neutral,
.planned-pct.none {
  background: var(--surface-translucent);
}

.planned-pct.unknown {
  color: var(--muted);
}

.planned-pct.over {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.planned-pct.under {
  background: var(--warning-bg);
  color: var(--warning-text);
  outline: 2px solid var(--warning-border);
  outline-offset: -2px;
}

/* D4-A-062: the words-in-cell heat note ("+4 u boven contract",
   "67% van 36 u") -- every heated cell states the figure, not colour alone. */
.planning-cell-heat-note {
  font-weight: 700;
}

.planning-cell.over .planning-cell-heat-note {
  color: var(--status-red);
}

.planning-cell.under .planning-cell-heat-note {
  color: var(--status-amber);
}

/* D4-A-064: the same note, the same colours, on D-4's grid. Without these
   two rules `.project-detail-planning-row small { color: var(--muted) }`
   (0-1-1) outranks `.planning-cell-heat-note` (0-1-0) and the D-10 rules
   above never match D-4's `span.over`/`span.under`, so the heat note
   rendered grey here and red/amber there -- the one divergence left in
   "one definition, both grids". */
.project-detail-planning-row > span.over .planning-cell-heat-note {
  color: var(--status-red);
}

.project-detail-planning-row > span.under .planning-cell-heat-note {
  color: var(--status-amber);
}

/* T4-a (grid chunk 2): the forbidden 3px coloured edge (GD-01/04) is gone --
   current-week is now the same full-column background-image tint as D-4's
   .project-detail-planning-row > span.current-week below, through the
   --cell-week compositing layer so it composes with heat and zebra instead
   of overwriting them. delivery-capacity-renderers.test.ts and
   delivery-planning-grid-render.test.ts both pin this and were updated in
   the same commit. */
.planning-cell.current-week {
  --cell-week: var(--col-now);
}

/* .concept-row's coloured inset box-shadow rail removed 2026-08-11 (T4-a, GD-01/GD-04 —
   phase-c-gap/D-10-gap.md §1.4: no coloured leading edge on rows, cells, banners or
   callouts). The class name stays on the markup as a semantic hook (see
   scripts/build-delivery-static-app.mjs / browser.ts) — it just no longer carries a
   colour treatment. */

/* .planning‑concept‑badge retired 2026-08-11 (T1-a cluster B) onto
   .pill-inline.pcb-gap + .pill.warning — see
   docs/operations/MK63_DELIVERY_COMPONENT_MIGRATION_MAP.md. The concept-tinted
   background (color-mix on --concept) is dropped in favour of the canonical
   --warning-bg/-border tokens, a deliberate colour-vocabulary convergence;
   margin-left/white-space are this component's own original values. */
.pill-inline.pcb-gap {
  margin-left: 8px;
  white-space: nowrap;
}

.year-horizon {
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(250, 248, 242, 0.72);
  padding: 16px;
}

.year-horizon strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
  font-weight: 900;
}

.year-horizon small {
  display: block;
  max-width: 680px;
  margin-top: 6px;
  color: var(--muted);
}

.year-grid {
  display: grid;
  grid-template-columns: repeat(13, minmax(42px, 1fr));
  gap: 6px;
}

.year-grid span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.year-grid span.current-week {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--background);
}

.project-detail {
  scroll-margin-top: 18px;
}

.project-detail-empty-state {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 6px solid var(--primary);
  border-radius: 8px;
  box-shadow: 0 18px 52px rgba(28, 26, 23, 0.06);
  display: none;
  gap: 10px;
  margin: 14px 0;
  max-width: 860px;
  padding: 22px;
}

.project-detail-empty-state strong {
  color: var(--primary);
  display: block;
  font-size: 28px;
  line-height: 1;
}

.project-detail-empty-state p {
  color: var(--muted);
  margin: 0;
  max-width: 680px;
}

.project-detail[data-project-detail="project-detail-loading"] .project-detail-empty-state {
  display: grid;
}

.project-detail[data-project-detail="project-detail-loading"] .project-home-hero,
.project-detail[data-project-detail="project-detail-loading"] .project-home-burn-lens,
.project-detail[data-project-detail="project-detail-loading"] .project-setup-band,
.project-detail[data-project-detail="project-detail-loading"] .project-home-operating-grid,
.project-detail[data-project-detail="project-detail-loading"] .project-subtab-hero,
.project-detail[data-project-detail="project-detail-loading"] .team-workspace-grid {
  display: none;
}

.project-setup-band {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 10px;
  margin-top: 14px;
  overflow: clip;
}

.project-setup-summary {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--text);
  display: flex;
  font: inherit;
  font-weight: 700;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 14px;
  text-align: left;
  width: 100%;
}

.project-setup-summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.project-setup-head, .project-setup-row { display: grid; gap: 8px; }
.project-setup-head { border-top: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); padding: 14px; }
.project-setup-rows { border-top: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); }
.project-setup-row { align-items: center; border-top: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); grid-template-columns: 22px minmax(0, 1fr) auto; min-height: 62px; padding: 10px 14px; }
.project-setup-row:first-child { border-top: 0; }
.project-setup-row small { color: var(--muted); text-align: right; }
.project-setup-glyph { color: var(--success-text); font-size: 18px; font-weight: 800; }
.project-setup-row[data-project-setup-state="attention"] .project-setup-glyph,
.project-setup-row[data-project-setup-state="open"] .project-setup-glyph { color: var(--warning-text); }
.project-setup-row > :last-child { min-width: 0; }
.project-setup-row form,
.project-setup-row [role="group"] { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.project-setup-row input:not([type="radio"]), .project-setup-row select { min-height: 36px; }
.project-setup-row .type-chip-group { justify-content: flex-end; }
.project-setup-complete { min-width: 0; }
.project-setup-complete summary { align-items: center; color: var(--text); cursor: pointer; display: flex; gap: 8px; justify-content: flex-end; list-style: none; min-height: 36px; }
.project-setup-complete summary::-webkit-details-marker { display: none; }
.project-setup-complete summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.project-setup-complete [data-project-setup-value] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-setup-complete-edit { color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.project-setup-complete-editor { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }

@media (max-width: 600px) {
  .project-setup-row { grid-template-columns: 22px minmax(0, 1fr); }
  .project-setup-row > :last-child { grid-column: 1 / -1; }
  .project-setup-row form, .project-setup-row [role="group"], .project-setup-row .type-chip-group { justify-content: flex-start; }
  .project-setup-row input:not([type="radio"]), .project-setup-row select { font-size: 16px; min-height: 44px; }
  .project-setup-complete summary { justify-content: flex-start; min-height: 44px; }
}

.project-home-hero {
  align-items: end;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
  margin: 14px 0;
  padding: 10px 0;
  position: relative;
}

.project-home-band1 {
  container-type: inline-size;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 14px 0;
}

.project-home-band1 > article,
.project-home-band1 > aside {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 16px;
}

.project-home-band1 strong {
  color: var(--text);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.project-home-band1 small {
  color: var(--muted);
}

.project-home-answer-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.project-home-answer-actions .btn {
  min-height: 44px;
}

.project-home-hero h1 {
  color: var(--text);
  font-size: clamp(23px, 0.72cqi + 23.4px, 32px);
  font-weight: 900;
  hyphens: auto;
  letter-spacing: -0.014em;
  line-height: 1.08;
  margin: 4px 0 10px;
  max-width: none;
  overflow-wrap: break-word;
}

.project-home-title-stack {
  container-type: inline-size;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.project-home-hero p {
  color: var(--muted);
  margin: 0;
}

.project-home-title-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.project-home-title-meta span {
  background: rgba(250, 248, 242, 0.62);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 999px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  min-height: 28px;
  padding: 6px 10px;
  text-transform: uppercase;
}

.project-rag-card {
  align-self: center;
  background: color-mix(in srgb, var(--surface) 88%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 7px;
  display: grid;
  gap: 6px;
  min-width: 276px;
  padding: 10px 12px;
}

.project-rag-control {
  background: color-mix(in srgb, var(--paper) 76%, var(--surface));
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 2px;
}

.project-rag-option {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  gap: 5px;
  justify-content: center;
  min-height: 30px;
  padding: 5px 7px;
}

.project-rag-option > span {
  background: currentColor;
  border-radius: 50%;
  display: none;
  height: 7px;
  width: 7px;
}

.project-rag-option.green { color: var(--status-green); }
.project-rag-option.orange { color: var(--status-amber); }
.project-rag-option.red { color: var(--status-red); }

.project-rag-option[aria-checked="true"] {
  background: var(--surface);
  border-color: currentColor;
  box-shadow: 0 1px 4px rgba(28, 26, 23, 0.08);
}

.project-rag-option:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.project-rag-option:disabled {
  cursor: wait;
  opacity: 0.65;
}

.project-rag-reason,
.project-rag-audit,
.project-rag-save-status {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  min-height: 0;
}

.project-rag-save-status:not(:empty) {
  color: var(--primary);
}

.project-rag-dialog {
  align-items: center;
  background: color-mix(in srgb, var(--text) 34%, transparent);
  display: grid;
  inset: 0;
  justify-items: center;
  padding: 24px;
  position: fixed;
  z-index: 60;
}

.project-rag-dialog[hidden] { display: none; }

.project-rag-dialog-panel {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 24px 64px color-mix(in srgb, var(--text) 20%, transparent);
  display: grid;
  gap: 16px;
  inline-size: min(620px, calc(100vw - 32px));
  max-block-size: calc(100dvh - 48px);
  overflow: auto;
  padding: 18px;
}

.project-rag-dialog-head,
.project-rag-dialog-footer,
.project-rag-dialog-footer > div,
.project-rag-transition {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.project-rag-dialog-head strong {
  color: var(--primary);
  display: block;
  font-size: 22px;
  line-height: 1.1;
  margin-top: 4px;
}

.project-rag-transition { justify-content: flex-start; }

.project-rag-definitions {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.project-rag-definitions li {
  align-items: baseline;
  display: grid;
  gap: 8px;
  grid-template-columns: 82px 1fr;
}

.project-rag-definitions span,
.project-rag-benign,
.project-rag-deviation,
.project-rag-dialog-footer small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.project-rag-dialog form { display: grid; gap: 14px; }

.project-rag-dialog fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
}

.project-rag-dialog legend { color: var(--primary); font-weight: 800; }
.project-rag-dialog fieldset > small { color: var(--muted); font-size: 12px; }

.project-rag-dialog fieldset label {
  align-items: center;
  display: flex;
  gap: 8px;
  min-block-size: 44px;
}

.project-rag-dialog input[type="checkbox"] { accent-color: var(--primary); }
.project-rag-dialog-error { color: var(--status-red); font-size: 13px; font-weight: 700; margin: 0; }
.project-rag-plan textarea { font: inherit; min-block-size: 72px; resize: vertical; }
.project-rag-plan small { color: var(--muted); font-size: 11px; text-align: end; }

.project-rag-dialog-footer {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

/* MK-63: was 48px -- the sheet asks for 44 in dialogs. */
.project-rag-dialog-footer .primary { min-block-size: var(--control-height-touch); }

@media (max-width: 760px) {
  .project-rag-dialog {
    align-items: end;
    padding: 0;
  }

  .project-rag-dialog-panel {
    border-radius: 14px 14px 0 0;
    inline-size: 100%;
    max-block-size: 86dvh;
    padding: 16px;
    padding-bottom: calc(34px + env(safe-area-inset-bottom));
  }

  .project-rag-definitions li { grid-template-columns: 1fr; gap: 2px; }
  .project-rag-dialog fieldset label { min-block-size: 44px; }

  .project-rag-dialog-footer {
    align-items: stretch;
    background: var(--background);
    bottom: 0;
    display: grid;
    gap: 10px;
    margin: 0 -16px calc(-34px - env(safe-area-inset-bottom));
    padding: 12px 16px calc(34px + env(safe-area-inset-bottom));
    position: sticky;
  }

  .project-rag-dialog-footer > div { display: grid; grid-template-columns: 1fr 1fr; }
  .project-rag-dialog-footer .btn { min-block-size: var(--control-height-touch); }
}

.project-home-status {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.project-home-burn-lens {
  background: var(--surface);
  border-block: 1px solid var(--line);
  display: grid;
  gap: 12px 24px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  margin: 0 0 18px;
  padding: 16px 0;
}

.project-home-burn-lens > .project-workspace-source-notice {
  grid-column: 1 / -1;
}

.project-home-burn-lens-figure {
  min-width: 0;
}

.project-home-burn-lens-figure .data-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.project-home-burn-lens-figure strong {
  color: var(--text);
  display: block;
  font-size: 34px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1.1;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.project-home-burn-lens-body {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding-bottom: 26px;
}

.project-home-runway-sentence .data-label {
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.project-home-runway-sentence strong {
  color: var(--text);
  font-size: clamp(14px, 1.25vw, 17px);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  max-inline-size: 68ch;
}

.project-home-prognose {
  align-items: baseline;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin: 0;
  padding-top: 12px;
}

.project-home-prognose .data-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.project-home-prognose strong {
  color: var(--text);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1.1;
}

.project-home-prognose small {
  color: var(--muted);
  font-size: 13px;
}

/* GD-05: a negative Prognose needs more than a minus sign. */
.project-home-prognose strong.over {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: 7px;
  color: var(--danger-text);
  padding: 2px 9px;
}

.project-home-prognose strong.over::before {
  content: "▲";
  font-size: 12px;
  margin-right: 7px;
}

.project-home-burn-lens.over {
  background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 10%, var(--surface)), var(--surface) 56%);
}

.project-home-burn-lens.unavailable {
  color: var(--muted);
}

.project-home-operating-dashboard {
  background: rgba(250, 248, 242, 0.68);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 0 14px;
  padding: 18px;
}

.project-home-budget-runway {
  align-content: start;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 7%, transparent), transparent 42%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 8px;
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
}

.runway-head,
.runway-facts {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.runway-head > div,
.runway-facts > span {
  min-width: 0;
}

.runway-head strong,
.runway-facts strong {
  color: var(--text);
  display: block;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  line-height: 1.05;
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.runway-head small,
.runway-facts small {
  color: var(--muted);
  display: block;
  line-height: 1.35;
  margin-top: 5px;
}

.runway-track {
  background: color-mix(in srgb, var(--line) 66%, var(--background));
  border-radius: 999px;
  display: flex;
  height: 16px;
  overflow: visible;
  position: relative;
}

.runway-seg {
  display: block;
  flex-shrink: 0;
  height: 100%;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.runway-seg:first-child { border-radius: 999px 0 0 999px; }
.runway-seg:last-child { border-radius: 0 999px 999px 0; }

.runway-seg.booked { background: var(--primary); }

.runway-seg.planned {
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--primary) 60%, transparent) 0 4px, transparent 4px 9px),
    color-mix(in srgb, var(--primary) 18%, var(--background));
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
}

.runway-seg.buffer { background: transparent; }

.runway-seg.over { background: var(--danger); }

.runway-100 {
  background: var(--text);
  bottom: -6px;
  position: absolute;
  top: -6px;
  transform: translateX(-50%);
  width: 2px;
}

.runway-100 b {
  background: var(--background);
  color: var(--text);
  font-size: 10px;
  font-weight: 900;
  left: 5px;
  letter-spacing: 0.08em;
  padding: 0 3px;
  position: absolute;
  text-transform: uppercase;
  top: -16px;
  white-space: nowrap;
}

.runway-tick {
  background: var(--accent);
  border-radius: 2px;
  bottom: -7px;
  position: absolute;
  top: -7px;
  transform: translateX(-50%);
  width: 3px;
  z-index: 2;
}

.runway-tick b {
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  left: 50%;
  letter-spacing: 0.06em;
  position: absolute;
  text-transform: uppercase;
  top: calc(100% + 4px);
  transform: translateX(-50%);
  white-space: nowrap;
}

.project-home-runway-warning {
  color: var(--warning-text);
  display: block;
  margin-top: 14px;
}

.runway-facts {
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 14px;
}

.runway-facts strong {
  font-size: 18px;
}

.project-home-progress-lens {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
  min-width: 0;
}

.project-home-sprint-matrix,
.project-home-progress-sidecar {
  min-width: 0;
}

.project-home-sprint-matrix {
  display: grid;
  gap: 10px;
}

.project-home-sprint-matrix [data-project-home-sprint-row][aria-current="true"] {
  background: color-mix(in srgb, var(--primary) 8%, var(--background));
  box-shadow: inset 3px 0 0 var(--primary);
}

.compact-progress-table {
  background: var(--background);
  margin-top: 0;
}

.project-home-progress-sidecar {
  display: grid;
  gap: 12px;
}

.project-home-progress-sidecar > div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.project-home-progress-sidecar .compact-list {
  margin-top: 10px;
}

.project-home-signals {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 14px;
  overflow: hidden;
}

.project-home-signal {
  background: rgba(250, 248, 242, 0.54);
  border-left: 1px solid var(--line);
  display: grid;
  gap: 5px;
  min-height: 92px;
  padding: 14px 16px;
}

.project-home-signal:first-child {
  border-left: 0;
}

.project-home-signal span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.project-home-signal strong {
  color: var(--text);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.project-home-signal small {
  color: var(--muted);
  line-height: 1.3;
}

.project-home-operating-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
  margin: 14px 0;
}

.project-context-bar {
  align-items: center;
  background: color-mix(in srgb, var(--background) 94%, transparent);
  border-block: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  min-height: 48px;
  padding: 2px 8px;
  position: sticky;
  top: 0;
  z-index: 40;
}

.project-context-back,
.project-context-bar nav a,
.project-context-switcher > button {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 800;
  min-height: 44px;
  padding: 0 10px;
  text-decoration: none;
}

.project-context-switcher {
  min-width: 0;
  position: relative;
}

.project-context-switcher > button {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-context-menu {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 8px;
  inline-size: min(520px, calc(100vw - 32px));
  left: 0;
  max-height: min(520px, 70vh);
  overflow: auto;
  padding: 12px;
  position: absolute;
  top: calc(100% + 4px);
}

.project-context-menu[hidden] {
  display: none;
}

.project-context-menu label {
  display: grid;
  gap: 6px;
}

.project-context-menu input {
  min-height: 44px;
}

[data-project-context-options] {
  display: grid;
}

[data-project-context-options] a {
  align-items: center;
  color: var(--text);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 44px;
  padding: 8px 10px;
  text-decoration: none;
}

[data-project-context-options] a[aria-current="true"] {
  background: var(--primary-soft);
}

.project-context-bar nav {
  display: flex;
}

.project-context-bar nav a[aria-disabled="true"] {
  cursor: default;
  opacity: 0.42;
}

.project-detail-tabs {
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 16px;
  overflow-x: auto;
}

.project-detail-tabs .tab {
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  flex: 0 0 auto;
  /* MK-63: was 48px. These are the project's primary in-page navigation and
     are tapped on a phone, so they take the touch size -- the largest approved
     one, which keeps them dominant over the 40px .tab default without being a
     fourth height. */
  min-height: var(--control-height-touch);
  padding-inline: 2px;
}

.project-detail-tabs .tab[aria-current="page"],
.project-detail-tabs .tab.active {
  border-bottom-color: var(--primary);
}

.project-home-planning-trend {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(8, minmax(48px, 1fr));
  min-height: 190px;
  overflow-x: auto;
}

.project-home-planning-loading {
  display: grid;
  gap: 12px;
  grid-column: 1 / -1;
  grid-template-rows: auto 1fr;
  min-height: 190px;
}

.project-home-planning-loading p {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

.project-home-planning-loading-weeks {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(8, minmax(48px, 1fr));
  min-height: 142px;
}

.project-home-planning-loading-week {
  background: linear-gradient(90deg, color-mix(in srgb, var(--muted) 12%, var(--surface)), color-mix(in srgb, var(--muted) 5%, var(--surface)), color-mix(in srgb, var(--muted) 12%, var(--surface)));
  border-radius: 4px 4px 0 0;
  min-height: 120px;
}

.project-home-trend-week {
  display: grid;
  gap: 5px;
  min-width: 54px;
  text-align: center;
}

.project-home-trend-bars {
  align-items: end;
  display: flex;
  gap: 3px;
  height: 120px;
}

.project-home-trend-bars i,
.project-home-trend-bars b {
  border-radius: 4px 4px 0 0;
  display: block;
  flex: 1;
}

.project-home-trend-bars i {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border: 2px solid var(--primary);
  height: var(--planned);
}

.project-home-trend-bars b {
  background: var(--accent);
  height: var(--booked);
}

.project-home-trend-week small {
  color: var(--muted);
  font-size: 11px;
}

.project-workspace-source-notice {
  align-items: baseline;
  background: color-mix(in srgb, var(--warning) 11%, var(--surface));
  border-inline-start: 3px solid var(--warning);
  display: flex;
  gap: 8px;
  grid-column: 1 / -1;
  padding: 8px 10px;
}

.project-workspace-source-notice[hidden] {
  display: none;
}

.project-workspace-source-notice small {
  color: var(--muted);
}

.is-source-degraded .project-home-burn-lens-figure,
.is-source-degraded .runway-track,
.project-home-trend-week.is-degraded {
  opacity: 0.58;
}

.project-home-sprint-disclosure,
.project-home-reference .report-disclosure {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 44px;
  padding: 10px 12px;
}

.project-home-reference {
  display: grid;
  gap: 8px;
  margin: 20px 0;
}

.project-home-reference h2 {
  margin: 0;
}

.project-overview-log-more a {
  align-items: center;
  display: flex;
  font-weight: 900;
  min-height: 44px;
}

.project-overview-log-item > span {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-operating-panel,
.project-attention-panel {
  background: rgba(250, 248, 242, 0.68);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  padding: 18px;
}

.project-operating-metrics {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}

.project-operating-metrics div {
  min-width: 0;
}

.project-operating-metrics span,
.project-operating-sources span:not(.dot) {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.project-operating-metrics strong {
  color: var(--text);
  display: block;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  line-height: 1.05;
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.project-operating-metrics small,
.project-operating-sources small {
  color: var(--muted);
  display: block;
  line-height: 1.35;
  margin-top: 6px;
}

.project-operating-sources {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 24px;
  padding-top: 16px;
}

.project-operating-sources div {
  min-width: 0;
  padding-left: 16px;
  position: relative;
}

.project-home-epic-summary {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 16px;
}

.project-home-epic-summary .compact-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 10px;
}

.project-detail-planning-grid {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 14px;
  overflow-x: auto;
}

/* D4-A-065: the K/P copy/paste-week tools get a --primary-tinted fill and
   hairline instead of reading as two stray capitals in the header row --
   project-scoped only (D4-A-016), so this never reaches D-10's board. The
   cancel-copy state keeps .btn.primary's own solid fill; this only touches
   the two quiet states (copy/paste), hooked off their own data attributes
   rather than a bespoke class: the MK-63/X-1 component map (see
   docs/operations/MK63_DELIVERY_COMPONENT_MIGRATION_MAP.md) retires the old
   week-button selector, and these buttons already carry its
   .btn.sm.secondary replacement. */
.btn.sm[data-project-planning-copy-week],
.btn.sm[data-project-planning-paste-week] {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
}

.project-detail-planning-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.35fr) repeat(9, minmax(74px, 0.8fr)) minmax(132px, 1fr);
  min-width: 1040px;
}

/* D4-A-063/064 (T4-a, grid chunk 2): same four-layer heat/week/marker/zebra
   compositing as D-10's .planning-cell above, so both grids draw identically
   instead of D-4 stacking one-off background-image rules per state combo
   (current-week+milestone used to need its own combined-class rule; now the
   two independent --cell-week/--cell-marker layers compose automatically). */
.project-detail-planning-row > span {
  align-content: center;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  min-height: 58px;
  padding: 10px 12px;
  --cell-heat: transparent;
  --cell-marker: transparent;
  --cell-week: transparent;
  --cell-zebra: transparent;
  --cell-agg: transparent;
  background-image:
    linear-gradient(var(--cell-heat), var(--cell-heat)),
    linear-gradient(var(--cell-week), var(--cell-week)),
    linear-gradient(var(--cell-marker), var(--cell-marker)),
    linear-gradient(var(--cell-agg), var(--cell-agg)),
    linear-gradient(var(--cell-zebra), var(--cell-zebra));
}

/* D4-A-063: the zebra layer -- app-wide X-2/X-5 zebra only matches real
   <table> rows, and these are CSS-grid <div> rows carrying .t-matrix as a
   styling hook only, so it never matched here. */
.project-detail-planning-row:nth-of-type(even) > span {
  --cell-zebra: var(--row-tint);
}

/* D4-A-060/061/064: same per-CELL heat as D-10's .planning-cell above, from
   the same tokens -- built once (deliveryCapacityHeat in
   @birdhouse/app-contracts/delivery) and consumed by both grids' cell data,
   not reimplemented here. Cross-project weekly load vs W1/W2 contract
   capacity; D-4 previously had no heat treatment at all. */
.project-detail-planning-row > span.neutral,
.project-detail-planning-row > span.none {
  --cell-heat: transparent;
}

.project-detail-planning-row > span.unknown {
  color: var(--muted);
}

.project-detail-planning-row > span.over {
  --cell-heat: var(--cap-over-tint);
  color: var(--status-red);
}

.project-detail-planning-row > span.under {
  --cell-heat: var(--cap-under-tint);
  color: var(--status-amber);
}

/* Freeze the Resource (left) + Budget prognosis (right) columns so they stay
   pinned while the week columns scroll horizontally, Excel-style [full-year].
   background-COLOR, not the `background` shorthand: these two columns are
   position:sticky, so the fill has to stay fully opaque (week cells scroll
   underneath them), and the shorthand would additionally reset the base
   rule's background-image and kill the D4-A-063 zebra layer on exactly the
   two columns that frame every row. */
.project-detail-planning-row > span:first-child {
  background-color: var(--surface);
  border-left: 0;
  left: 0;
  position: sticky;
  z-index: 1;
}

.project-detail-planning-row > span:last-child {
  background-color: var(--surface);
  border-left: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line));
  position: sticky;
  right: 0;
  z-index: 1;
}

.project-detail-planning-head > span:first-child,
.project-detail-planning-head > span:last-child {
  background: var(--surface-strong);
  z-index: 3;
}

/* No fill of its own: the sticky rule above already supplies the opaque
   --surface base, and the aggregate tint arrives as the --cell-agg
   compositing layer from `.project-detail-planning-total > span` below.
   Re-declaring `background: var(--agg-tint)` here made these two pinned
   cells 8%-alpha, so the week columns scrolled visibly through them. */
.project-detail-planning-total > span:first-child,
.project-detail-planning-total > span:last-child {
  z-index: 2;
}

/* D4-A-046 (v2.1): 600/--muted-strong, not 500/--muted — the header row was
   too light. Data rows stay the quieter 12px/700 relationship: the header
   remains a step lighter than the 14px/700 body text at every size. */
.project-detail-planning-head > span {
  background: var(--surface-strong);
  border-top: 0;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.project-detail-planning-head > span strong {
  color: var(--text);
  font-size: 12px;
}

.project-detail-planning-row strong {
  display: block;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.project-detail-planning-row small {
  color: var(--muted);
  display: block;
  font-size: 11px;
  line-height: 1.35;
  margin-top: 4px;
}

.project-detail-planning-input-wrap {
  display: block;
}

.project-detail-planning-input-wrap input {
  appearance: textfield;
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  width: 100%;
}

.project-detail-planning-input-wrap input::-webkit-inner-spin-button,
.project-detail-planning-input-wrap input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.project-detail-planning-input-wrap input:focus {
  background: var(--surface);
  box-shadow: inset 0 -2px 0 var(--primary);
  outline: 0;
}

/* background-color, not the `background` shorthand: has-hours is on almost
   every cell heat can apply to (heat requires planned hours > 0), and the
   shorthand form would reset the --cell-* compositing layers above to none,
   silently hiding heat/week-tint/zebra on every non-empty cell (T4-a). */
.project-detail-planning-row .has-hours {
  background-color: rgba(232, 170, 87, 0.17);
}

/* Frozen (historical, read-only) planned-hours weeks: past their Tuesday 08:00
   Amsterdam cutoff, kept as a stable baseline for reporting. D4-A-058: the
   one week column with no hue — a token, not a one-off color-mix(), so it
   gets a real dark value below instead of the light 9% wash going invisible
   on the dark surface. Text keeps full contrast; nothing is desaturated.
   D4-A-063: through --cell-week (not `background`), so a frozen week's heat
   still shows at full contrast instead of colliding with it (chunk-1 flag). */
.project-detail-planning-row > span.frozen {
  --cell-week: var(--col-frozen);
}

.project-detail-planning-input-wrap input:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

/* The 3px inset box-shadow markers that used to live on these three rules are
   deleted (D4-A-031/047, GD-01/04). Meaning is carried by the full-column tint
   plus the week's text chip (nu / UAT / Go-live), never by an edge.
   D4-A-063: through --cell-marker, so this composes with heat/current-week/
   zebra instead of overwriting the base rule's background-image outright. */
.project-detail-planning-row .is-milestone {
  --cell-marker: var(--marker-uat);
}

.project-detail-planning-row .milestone-go-live {
  --cell-marker: var(--marker-live);
}

/* D4-A-059: the totals row and the Budgetverbruik-per-week column share one
   quiet teal aggregate tint, distinct from every marked-week hue — a token
   so it carries its own dark value instead of a hardcoded light-only rgba(). */
.project-detail-planning-total > span {
  --cell-agg: var(--agg-tint);
}

.project-detail-planning-row:not(.project-detail-planning-head) > span:last-child {
  --cell-agg: var(--agg-tint);
}

.project-detail-planning-row > span.current-week {
  --cell-week: var(--col-now);
}

/* A week that is both current and marked shows both tints stacked -- now
   automatic, since --cell-week (current/frozen) and --cell-marker (UAT/
   go-live) are independent compositing layers instead of one rule per
   combination; heat (--cell-heat) composes on top the same way. */

.planning-week-mark {
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 600;
}

.dot {
  border-radius: 999px;
  height: 7px;
  left: 0;
  position: absolute;
  top: 7px;
  width: 7px;
}

.dot.green {
  background: #2f8a62;
}

.dot.orange {
  background: var(--accent);
}

.dot.red {
  background: #bf4b3f;
}

.project-attention-panel h2 {
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 18px;
}

.project-attention-panel ul {
  display: grid;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.project-attention-panel li {
  display: grid;
  gap: 3px 12px;
  grid-template-columns: 18px minmax(0, 1fr);
}

.project-attention-panel li > span {
  border: 5px solid var(--primary);
  border-radius: 999px;
  height: 18px;
  margin-top: 2px;
  width: 18px;
}

.project-attention-panel li.attention > span {
  border-color: #bf4b3f;
}

.project-attention-panel strong,
.project-attention-panel small {
  grid-column: 2;
}

.project-attention-panel strong {
  font-size: 15px;
  line-height: 1.2;
}

.project-attention-panel small {
  color: var(--muted);
  line-height: 1.35;
}

.detail-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
}

.detail-panel {
  background: var(--surface-translucent);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  padding: 16px;
}

.detail-main {
  grid-row: span 2;
}

.team-workspace-grid .detail-main {
  grid-column: 1 / -1;
  grid-row: auto;
}

.team-workspace-grid .detail-contacts {
  grid-column: 1 / -1;
}

.detail-progress-budget {
  grid-column: 1 / -1;
}

.detail-panel-title {
  color: var(--text);
  display: block;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
  margin-top: 6px;
}

.detail-title {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.detail-title.compact-title {
  border-top: 1px solid var(--line);
  margin: 18px 0 10px;
  padding-top: 14px;
}

.detail-title strong,
.detail-kpi {
  display: block;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.detail-panel small {
  color: var(--muted);
  display: block;
  line-height: 1.35;
  margin-top: 6px;
}

.project-settings-grid {
  display: grid;
  gap: 0;
  max-width: 640px;
}

.project-settings-section {
  display: grid;
  gap: 8px;
  padding: 30px 0;
}

.project-settings-section + .project-settings-section {
  border-top: 1px solid var(--line);
}

.project-settings-section > small,
.project-settings-section > .detail-title small {
  color: var(--muted);
  line-height: 1.35;
}

.project-settings-section .detail-title {
  display: grid;
  gap: 6px;
}

.project-settings-section .detail-panel-title {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
}

.milestone-field {
  display: grid;
  font-size: 13px;
  font-weight: 700;
  gap: 6px;
  margin-top: 10px;
}

/* D-8 date locale (2026-08-13 re-verify): the native <input type="date">
   placeholder's digit order follows the browser's own locale, not the page's
   `lang` — this states the expected NL/EN format explicitly since nothing in
   the page can override the native control's own rendering. */
.milestone-field-format-hint {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.milestone-field input,
.jira-board-picker input {
  background: var(--panel, #fff);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: inherit;
  font: inherit;
  min-height: 44px;
  padding: 8px 10px;
  width: 100%;
}

.end-phase-reserve-field {
  display: grid;
  font-size: 13px;
  font-weight: 700;
  gap: 6px;
  margin-top: 10px;
}

.end-phase-reserve-field input {
  background: var(--panel, #fff);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: inherit;
  font: inherit;
  min-height: 44px;
  padding: 8px 10px;
  width: 100%;
}

.end-phase-reserve-field input[aria-invalid="true"] {
  border-color: var(--danger);
}

.reserve-save-status:not(:empty) {
  color: var(--ink);
  font-weight: 700;
}

.project-settings-provenance-table {
  display: grid;
  border-top: 1px solid var(--line);
}

.project-settings-provenance-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto minmax(132px, auto);
  min-height: 44px;
  border-bottom: 1px solid var(--line);
}

.project-settings-provenance-heading {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.project-settings-provenance-summary {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 10px;
}

/* MK-56: the editable Type cell keeps the row's 44px touch target. */
.project-settings-provenance-type-select {
  min-height: 44px;
  width: 100%;
}

.project-home-commercial-unavailable {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  padding: 18px;
}

/* An author `display` beats the UA stylesheet's [hidden] { display: none },
   so this section has to restate it or `section.hidden = hasCommercialBudgetModel`
   (browser.ts) never actually hides it — this is why the D-4 S&M/MS
   not-applicable block co-rendered with the live budget lens on JVM
   (project.type "salesforce") in production: the JS toggled the attribute
   correctly, but CSS specificity ignored it. */
.project-home-commercial-unavailable[hidden] {
  display: none;
}

.project-home-commercial-unavailable small {
  color: var(--muted);
}

.project-settings-provenance-row time {
  color: var(--muted);
  font-size: 12px;
}

.project-settings-integrations a {
  color: var(--primary);
  font-weight: 700;
  min-height: 44px;
  align-items: center;
  display: inline-flex;
  justify-self: start;
}

.activity-budget-overspend {
  margin-top: 6px;
  width: fit-content;
}

.activity-budget-overspend b { color: var(--danger-text); }

/* D8-A-020: zebra on the provenance table, the 2026-08-05 app-wide desktop
   default -- this table was the one exception (T2-c gap-report finding). */
.project-settings-provenance-row:nth-of-type(even) {
  background: var(--row-tint);
}

/* D8-A-025/044: absent-not-disabled read-only replacement for a settings
   control (milestone dates, etc.) -- rendered as a plain value, never a
   disabled input, so nothing on the page promises an interaction that will
   not happen. */
.project-settings-readonly-value {
  color: var(--ink);
  display: inline-block;
  font-weight: 600;
  padding: 6px 0;
}

@media (max-width: 520px) {
  .project-settings-section { padding: 24px 0; }
  .project-settings-provenance-row { align-items: start; grid-template-columns: minmax(0, 1fr) auto; padding: 10px 0; }
  .project-settings-provenance-row > span:nth-child(2),
  .project-settings-provenance-row time { grid-column: 1 / -1; }
  .project-settings-provenance-heading { display: none; }
}

/* --- D-7 status->% ladder ("Waar deze voortgang vandaan komt") --- */
.status-ladder-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.jira-status-ladder-table .pct {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.jira-status-ladder-table .pct.unmapped {
  color: var(--danger-text);
}

.jira-status-ladder-table tbody tr:nth-of-type(even) {
  background: var(--row-tint);
}

.status-ladder-unmapped-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 12px 0 0;
}

.status-ladder-unmapped-note .link {
  color: var(--primary);
  font-weight: 700;
}

/* --- D-7 status distribution segmented bar --- */
.status-segbar {
  border-radius: 6px;
  display: flex;
  height: 14px;
  margin-top: 10px;
  overflow: hidden;
  width: 100%;
}

.status-segbar > span {
  display: block;
  height: 100%;
}

.status-seg-done { background: var(--primary); }
.status-seg-doing { background: var(--accent); }
.status-seg-todo { background: var(--line); }

.status-seglegend {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 12.5px;
  gap: 16px;
  margin-top: 10px;
}

.status-seg-key {
  border-radius: 3px;
  display: inline-block;
  height: 10px;
  margin-right: 6px;
  vertical-align: middle;
  width: 16px;
}

/* --- D-8 Voortgangsstatussen (per-project status->% editor) --- */
.project-settings-progress-statuses-table {
  border-collapse: collapse;
  font-size: 13.5px;
  width: 100%;
}

.project-settings-progress-statuses-table th {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 8px 10px 8px 0;
  text-align: left;
  text-transform: uppercase;
}

.project-settings-progress-statuses-table td {
  border-bottom: 1px solid var(--line);
  padding: 8px 10px 8px 0;
  vertical-align: middle;
}

.project-settings-progress-statuses-table tbody tr:nth-of-type(even) {
  background: var(--row-tint);
}

.project-settings-progress-status-input {
  min-height: 40px;
  text-align: right;
  width: 88px;
}

.project-settings-progress-status-new-chip {
  margin-left: 8px;
}

.detail-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

/* D4-A-054/057b (2026-08-12 prod QA): the klantcontacten empty state — one
   hairline line on the page's own surface, no card, no icon column. */
.project-home-contacts-empty {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 0;
}

.detail-row {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(132px, 1.4fr) repeat(3, minmax(72px, 0.8fr));
  min-height: 54px;
  padding: 10px 12px;
}

.detail-team .detail-row {
  grid-template-columns: minmax(160px, 1.4fr) minmax(150px, 1fr) repeat(3, minmax(72px, 0.7fr));
}

.detail-row:first-child {
  border-top: 0;
}

.detail-row.head {
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  min-height: 38px;
  text-transform: uppercase;
}

.detail-row strong,
.detail-row small {
  display: block;
}

.detail-row small {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.budget-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
}

.budget-list div {
  align-items: baseline;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding-top: 8px;
}

.budget-list dt,
.budget-list dd {
  margin: 0;
}

.budget-list dt {
  color: var(--muted);
  font-size: 13px;
}

.budget-list dd {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.readiness-grid {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

/* WP7: `.jira-progress-table { min-width: 1040px }` used to live here. It never
   applied - the later, equal-specificity `.log-table { min-width: 880px }` won
   the cascade - so it only misled readers about the real track width. */

/* MK-62 shared .t-records anatomy: a cell that spans the whole record rather
   than sitting in one column. One rule, every record surface — the pattern is
   supposed to be an implementation, not a marker class. */
.t-records > .t-merge {
  grid-column: 1 / -1;
}

/* X-2/X-5 zebra: app-wide desktop table default (X2-A-010/011/012, X5-A-005/
   008/009, owner decision 2026-08-05). A flat background wash only — never a
   border or box-shadow, and always subordinate to a status pill on the same
   row. Mobile record lists (<=390px) collapse to cards and stay
   hairline-only, so the rule is desktop-only by media query rather than by
   pattern class. */
@media (min-width: 391px) {
  .t-records tbody tr:nth-of-type(even),
  .t-matrix tbody tr:nth-of-type(even) {
    background: var(--row-tint);
  }
}

/* ── X-1 X1-A-014 · .segctl segmented control ─────────────────────────
   Net-new. Named .segctl rather than X-1's own literal ".seg" because that
   name is already live in production as the RAG portfolio composition bar
   (.split-figure .seg / .health-bar .seg, a differently-shaped component) —
   gap finding in X-1-component-vocabulary-gap.md §1 C-4. One segmented-
   toggle pattern, aria-pressed per segment rather than an .active label. */
.segctl {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: inline-flex;
  gap: 3px;
  padding: 3px;
}

.segctl button {
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm, 14px);
  font-weight: 500;
  min-height: 34px;
  padding: 0 14px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.segctl button[aria-pressed="true"] {
  background: var(--background);
  box-shadow: var(--elev-1);
  color: var(--text);
  font-weight: 700;
}

.segctl.lg button {
  min-height: var(--control-lg);
  padding: 0 18px;
}

/* ── X-1/X-3 state kit — .empty-state / .skeleton-row / .sk / .stale-bar /
   .all-clear ──────────────────────────────────────────────────────────
   Net-new (X-3-gap.md §1.1 / X-1-component-vocabulary-gap.md §1 C-4: every
   grep for these class names on origin/main returned zero hits before this
   commit; every page-specific "empty state" that already ships —
   .project-detail-empty-state, .report-register-skeleton,
   .project-row-skeletons — is a bespoke, unrelated implementation). This is
   the canonical kit; per-page migration onto it is separate follow-on work,
   not part of this slice. */
.empty-state {
  align-content: start;
  column-gap: 18px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 40px 26px 44px;
  row-gap: 0;
}

.empty-state-icon {
  color: var(--primary);
  grid-column: 1;
  grid-row: 1 / span 4;
  height: 34px;
  width: 34px;
}

.empty-state-icon svg {
  display: block;
  height: 100%;
  width: 100%;
}

.empty-state.cause-hidden-default .empty-state-icon,
.empty-state.is-error .empty-state-icon {
  color: var(--warning-text);
}

.empty-state.is-error .empty-state-icon {
  color: var(--danger-text);
}

/* X3-A-006/Q2: the fifth cause, "commissioned, pending build" — an
   informational tone, never warning/danger, because an unbuilt source is a
   roadmap fact, not a broken thing (GD-27 Rule 1: no dead/fake control). */
.empty-state.cause-unbuilt .empty-state-icon {
  color: var(--st-info);
}

.empty-state h3 {
  font-size: 21px;
  font-weight: 900;
  grid-column: 2;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
  max-width: 46ch;
}

.empty-state > p {
  color: var(--muted);
  font-size: 14.5px;
  grid-column: 2;
  line-height: 1.45;
  margin: 8px 0 0;
  max-width: 62ch;
}

.empty-state-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-column: 2;
  margin-top: 16px;
}

.empty-state-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  grid-column: 2;
  margin-top: 18px;
}

.empty-state-actions .btn {
  min-height: 44px;
}

.empty-state-meta {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  grid-column: 2;
  margin-top: 14px;
}

.skeleton-row {
  align-items: center;
  cursor: default;
  display: grid;
  gap: 14px;
  grid-template-columns: 2.2fr 0.9fr 0.9fr 1fr;
  min-height: 56px;
  padding: 0;
}

.skeleton-row > span {
  align-content: center;
}

.sk {
  animation: x3-sk 1.5s ease-in-out infinite;
  background: color-mix(in srgb, var(--text) 9%, transparent);
  border-radius: 4px;
  display: block;
  height: 11px;
}

.sk.tall {
  height: 14px;
}

.sk.thin {
  height: 9px;
  margin-top: 6px;
  opacity: 0.62;
  width: 70%;
}

.sk.pill {
  border-radius: var(--radius-pill);
  height: 22px;
  width: 64px;
}

.skeleton-row:nth-child(2) .sk {
  animation-delay: 0.08s;
}

.skeleton-row:nth-child(3) .sk {
  animation-delay: 0.16s;
}

.skeleton-row:nth-child(4) .sk {
  animation-delay: 0.24s;
}

@keyframes x3-sk {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk {
    animation: none;
    opacity: 0.8;
  }
}

.stale-bar {
  align-items: baseline;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: 8px;
  color: var(--warning-text);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 6px 12px;
  margin-bottom: 10px;
  padding: 10px 14px;
}

.stale-bar strong {
  font-weight: 900;
}

.stale-bar .btn {
  border-color: var(--warning-border);
  color: var(--warning-text);
  margin-left: auto;
  min-height: 32px;
}

.all-clear {
  align-items: start;
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  border-radius: 10px;
  column-gap: 16px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  padding: 22px 24px 24px;
}

.all-clear-icon {
  color: var(--success-text);
  grid-column: 1;
  grid-row: 1 / span 3;
  height: 30px;
  width: 30px;
}

.all-clear-icon svg {
  display: block;
  height: 100%;
  width: 100%;
}

.all-clear strong {
  display: block;
  font-size: 26px;
  font-weight: 900;
  grid-column: 2;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.all-clear p {
  color: var(--text);
  font-size: 15px;
  grid-column: 2;
  margin: 8px 0 0;
  max-width: 56ch;
}

.all-clear .empty-state-meta {
  color: var(--success-text);
  margin-top: 12px;
  opacity: 0.9;
}

/* ── X-2 Pattern B · .t-matrix collapse mechanism ─────────────────────
   Zero CSS existed for this pattern before this commit (X-2-table-strategy-
   gap.md §1.1) even though the marker class is already emitted on three
   tables (browser.ts:2680 utilisation table; 6836/6891/6909 project-detail
   planning rows) — those markers had no rule set to attach to. Frozen name
   column + fading right edge + a visible scroll-position track above 600px
   container width; below 600px, panning is dropped entirely and the table
   becomes a .t-drill-row list. Markup for the .m-name/.m-cell/.m-total
   sub-structure this CSS expects is a separate, page-owning slice — this
   slice builds the mechanism, per the brief. */
.t-matrix-frame {
  position: relative;
}

.t-matrix-body {
  display: grid;
}

.t-matrix-row {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 190px repeat(6, 84px) 96px;
}

.t-matrix-row:first-child {
  border-top: 0;
}

.t-matrix-row:nth-of-type(even) {
  background: var(--row-tint);
}

.t-matrix-row > span {
  align-content: center;
  display: grid;
  min-height: 52px;
  padding: 8px 10px;
}

.t-matrix-row .m-name {
  background: var(--background);
  font-size: 13.5px;
  font-weight: 700;
  left: 0;
  position: sticky;
  z-index: 2;
}

.t-matrix-row:nth-of-type(even) .m-name {
  background: color-mix(in srgb, var(--row-tint) 100%, var(--background));
}

.t-matrix-row .m-cell {
  color: var(--text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.t-matrix-row .m-cell.over {
  color: var(--status-red);
  font-weight: 700;
}

.t-matrix-row .m-total {
  background: var(--surface);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  position: sticky;
  right: 0;
  text-align: right;
}

.t-matrix-fade {
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--background) 92%, transparent));
  bottom: 0;
  pointer-events: none;
  position: absolute;
  right: 96px;
  top: 0;
  width: 44px;
  z-index: 3;
}

.t-scrollpos {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.t-scrollpos-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.t-scrollpos-track {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  flex: 1 1 auto;
  height: 8px;
  min-width: 80px;
  position: relative;
}

.t-scrollpos-track i {
  background: var(--primary);
  border-radius: var(--radius-pill);
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
}

.t-drill {
  display: none;
}

@container tbl (max-width: 600px) {
  .t-matrix-frame {
    display: none;
  }

  .t-drill {
    display: grid;
  }
}

.t-drill-row {
  align-items: center;
  background: transparent;
  border-top: 1px solid var(--line);
  column-gap: 12px;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 12px;
  min-height: 64px;
  padding: 12px 14px;
  text-align: left;
  width: 100%;
}

.t-drill-row:first-child {
  border-top: 0;
}

.t-drill-row:nth-of-type(even) {
  background: var(--row-tint);
}

.t-drill-row strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
}

.t-drill-row small {
  color: var(--muted);
  display: block;
  font-size: 12.5px;
  margin-top: 2px;
}

.t-drill-figs {
  display: grid;
  gap: 1px;
  justify-items: end;
}

.t-drill-figs b {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.t-drill-figs span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.t-drill-chev {
  color: var(--muted);
  font-size: 18px;
}

.t-drill-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin-top: 10px;
}

/* MK-62 S2/S3/S4: the keys live in the DOM at every width; the table form
   simply does not need to draw them, because the column header already says
   it. `.detail-row` joins them: it keeps a real `.detail-row.head` row that
   only the card form hides. */
.jira-progress-table .t-key,
.project-log-table .t-key,
.detail-row .t-key {
  display: none;
}

/* The progress-table column-sort header control that used to have its own
   rule here is retired onto .btn.sm.quiet (32px table / 44px touch) per
   MK63_DELIVERY_COMPONENT_MIGRATION_MAP.md. The sort-direction arrow is
   real, functional (not decorative) UI, so it's kept — re-keyed off the
   pre-existing data-progress-sort attribute rather than the retired class,
   since that attribute already uniquely identifies the control. Main's
   own sort-control block (added while T1-a was in flight) is superseded by
   the retirement; the progress/budget band's key-label rules left with
   !460's deletion of that band. */
[data-progress-sort]::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  content: "";
  opacity: 0.42;
}

[data-progress-sort][data-sort-direction="asc"]::after {
  border-bottom: 6px solid currentColor;
}

[data-progress-sort][data-sort-direction="desc"]::after {
  border-top: 6px solid currentColor;
}

.progress-compare {
  display: grid;
  gap: 5px;
  min-width: 210px;
}

.progress-compare-track {
  background: color-mix(in srgb, var(--line) 70%, var(--surface));
  border-radius: 999px;
  height: 11px;
  overflow: visible;
  position: relative;
}

/* The filled bar is BUDGET use, the marker is PROGRESS — the same convention
   as the generated report's BVP bullet, so "the bar is budget" reads the same
   everywhere across Birdhouse Delivery and the reports [H10]. */
.progress-compare-fill {
  background: var(--primary);
  border-radius: inherit;
  display: block;
  height: 100%;
  width: var(--budget-fill, 0%);
}

.progress-compare-marker {
  background: var(--accent);
  bottom: -5px;
  display: block;
  left: var(--progress-mark, 0%);
  position: absolute;
  top: -5px;
  width: 3px;
}

.progress-compare-legend {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 6px 16px;
  margin-top: 8px;
}

.progress-compare-legend .legend-item {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.progress-compare-legend .legend-swatch {
  border-radius: 2px;
  display: inline-block;
  height: 10px;
  width: 16px;
}

.progress-compare-legend .legend-swatch-budget {
  background: var(--primary);
}

.progress-compare-legend .legend-swatch-progress {
  background: var(--accent);
  border-radius: 1px;
  width: 3px;
}

.progress-compare small strong {
  color: var(--primary);
  display: inline;
  font-size: inherit;
}

/* D-7 redesigned progress-per-epic table (D7-A-016/017/018): the "Afwijking"
   column. Budget-use is the fill (same convention as .progress-compare
   above — the bar is budget), scope% is a tick, and a striped red segment
   marks the range where budget has run ahead of scope. An epic with no
   linked Yoobi activity has no denominator to draw at all, so it renders a
   plain flat "not measured" track instead of a bar with a fabricated value —
   GD-24 bans hatching (2026-08-12 prod QA); same unmeasured treatment as
   .health-bar .seg.unmeasured. */
.divergence-bar {
  display: grid;
  gap: 5px;
  min-width: 190px;
}

.divergence-track {
  background: color-mix(in srgb, var(--line) 70%, var(--surface));
  border-radius: 5px;
  height: 10px;
  overflow: visible;
  position: relative;
}

.divergence-track.unlinked {
  background: color-mix(in srgb, var(--muted) 14%, var(--surface));
}

.divergence-fill {
  background: var(--primary);
  border-radius: 5px 0 0 5px;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  width: var(--divergence-budget, 0%);
}

.divergence-over {
  background: repeating-linear-gradient(
    45deg,
    var(--danger),
    var(--danger) 3px,
    transparent 3px,
    transparent 6px
  );
  height: 100%;
  left: var(--divergence-over-start, 0%);
  position: absolute;
  width: var(--divergence-over-width, 0%);
}

.divergence-tick {
  background: var(--text);
  height: 14px;
  left: var(--divergence-scope, 0%);
  position: absolute;
  top: -2px;
  width: 2px;
}

.divergence-bar small {
  color: var(--muted);
  display: block;
  font-size: 12.5px;
}

.divergence-bar small.divergence-behind {
  color: var(--status-red, var(--danger-text));
  font-weight: 700;
}

.divergence-bar small.divergence-ahead {
  color: var(--status-green, var(--accent));
  font-weight: 700;
}

/* .progress‑status‑pill retired 2026-08-11 (T1-a cluster B) onto
   .pill.pill-fixed + .pill.{success,warning,danger} — see
   docs/operations/MK63_DELIVERY_COMPONENT_MIGRATION_MAP.md. The JS-computed
   "warn" state token is kept (not renamed to "warning") to avoid touching
   the shared reportActivityBudgetProgressStatusClass()/status-object call
   sites in both browser.ts and build-delivery-static-app.mjs; .pill.warn is
   aliased to the same tone as .pill.warning below. padding differs slightly
   (5px 10px vs canonical .pill's 4px 9px) — preserved via .pill-fixed. */
.pill-fixed {
  padding: 5px 10px;
}

.pill.warn,
.pill-fixed.warn {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

.jira-status-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.jira-status {
  background: var(--surface);
  border-radius: 6px;
  display: grid;
  gap: 3px;
  min-height: 52px;
  padding: 9px;
}

.jira-status strong {
  font-size: 13px;
}

.jira-status span {
  color: var(--muted);
  font-size: 12px;
}

.compact-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
}

.compact-list li {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 4px;
  list-style: none;
  padding-top: 10px;
}

.compact-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.compact-list strong {
  font-size: 14px;
}

.compact-list span {
  color: var(--muted);
  font-size: 13px;
}

/* WP7: client contact email/phone are the point of the Team & contacts screen -
   make them real mailto:/tel: targets instead of escaped text. */
.contact-link {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.client-contact-disclosure > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  margin-top: 14px;
}

.compact-qa-list {
  display: none;
}

.action-list li.attention strong {
  color: var(--danger);
}

.project-log {
  scroll-margin-top: 18px;
}

.log-forms {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.project-log-dialog {
  align-items: center;
  background: color-mix(in srgb, var(--text) 28%, transparent);
  display: grid;
  inset: 0;
  justify-items: center;
  padding: 24px;
  position: fixed;
  z-index: 60;
}

.project-log-dialog[hidden] {
  display: none;
}

.project-log-dialog-panel {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 24px 64px color-mix(in srgb, var(--text) 20%, transparent);
  display: grid;
  gap: 18px;
  inline-size: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  padding: 18px;
}

.project-log-dialog-head {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.project-log-dialog-head strong {
  color: var(--primary);
  display: block;
  font-size: 22px;
  line-height: 1.1;
  margin-top: 4px;
}

.project-log-dialog .log-form {
  border: 0;
  padding: 0;
}

/* WP5: the form repeats the dialog's own heading as its first grid row.
   On a single-column phone form that costs a whole row; on desktop it is
   simply the same words twice. */
.project-log-dialog .log-form > strong {
  display: none;
}

/* LOG-FORM (owner decision, fifth round 2026-08-12): quick capture keeps
   three columns -- type, text, deadline -- at sheet widths that fit them;
   below 640px (the mobile bottom sheet) it collapses to one column, same
   DOM, matching D6-A-017's "no auto-fit column count" rule for the item
   dialog's own grid. Checkbox + submit stay full-width beneath. */
.project-log-quick-form {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-log-quick-form[hidden] {
  display: none;
}

.project-log-quick-form .check-label.project-log-quick-col,
.project-log-quick-form .btn.project-log-quick-col {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .project-log-quick-form {
    grid-template-columns: 1fr;
  }
}

.project-log-quick-types {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quick-type {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  min-height: 44px;
}

.quick-type.is-selected {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

/* D6-A-028/029: three 44px deadline chips, "Deze week" carrying its own
   resolved-date span rather than leaving the resolution invisible. */
.project-log-quick-deadline-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quick-deadline-chip {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  min-height: 44px;
  padding: 0 14px;
}

.quick-deadline-chip[aria-pressed="true"] {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

.quick-deadline-chip-date {
  color: var(--muted);
  font-weight: 700;
}

.project-log-quick-deadline-picker {
  font-size: 16px;
  margin-top: 8px;
  min-height: 44px;
  width: 100%;
}

.project-log-quick-deadline-picker[hidden] {
  display: none;
}

/* D6-A-025: the FAB is present on every viewport, not mobile-only -- the
   base rule below establishes desktop placement/size; the mobile media
   query further down only adjusts its bottom offset for the mobile tab
   bar's safe area. */
.project-log-quick-fab {
  align-items: center;
  background: var(--primary);
  border: 0;
  border-radius: 999px;
  bottom: 24px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--text) 24%, transparent);
  color: var(--primary-foreground);
  display: inline-flex;
  font: inherit;
  font-weight: 800;
  gap: 8px;
  min-height: 56px;
  padding: 0 20px;
  position: fixed;
  right: 24px;
  z-index: 30;
}

.project-log-quick-onboarding {
  background: var(--text);
  border-radius: 6px;
  bottom: 56px;
  color: var(--background);
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 10px;
  position: fixed;
  right: 158px;
  z-index: 30;
}

.project-log-quick-onboarding[hidden] {
  display: none;
}

.project-log-quick-toast {
  align-items: center;
  background: var(--text);
  border-radius: 8px;
  bottom: 92px;
  color: var(--background);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  left: 16px;
  max-width: 420px;
  padding: 12px 14px;
  position: fixed;
  right: auto;
  z-index: 61;
}

.project-log-quick-toast[hidden] {
  display: none;
}

.project-log-quick-toast .btn {
  min-height: 44px;
}

.project-log-mobile-summary,
.project-log-mobile-list {
  display: none;
}

/* ── WP1: bottom sheet ────────────────────────────────────────── */
@media (max-width: 760px) {
  .project-log .log-section-head > .btn.primary {
    display: none;
  }

  /* S1 (2026-08-12): the D-6 quiet-figure-strip summary row (figure-strip +
     "+ Add item") stays desktop-only, same as the .project-log-summary it
     replaced — the mobile summary paragraph above takes over below 760px. */
  .project-log .figure-strip-row {
    display: none;
  }

  .project-log .log-board {
    display: none;
  }

  .project-log-mobile-summary {
    color: var(--muted);
    display: block;
    font-size: 14px;
    line-height: 1.45;
    margin: 0 0 14px;
  }

  .project-log-mobile-search {
    display: block;
    margin: 0 0 14px;
  }

  .project-log-mobile-search input {
    font-size: 16px;
    min-height: 44px;
    width: 100%;
  }

  .project-log-mobile-list {
    display: grid;
    gap: 8px;
    padding-bottom: 78px;
  }

  .project-log-mobile-record {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    display: grid;
    gap: 6px;
    padding: 14px;
  }

  .project-log-mobile-record.is-new {
    animation: project-log-new-record 400ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .project-log-mobile-record-head,
  .project-log-mobile-record-actions {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
  }

  .project-log-mobile-type {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .project-log-mobile-record p {
    color: var(--muted);
    margin: 0;
  }

  .project-log-mobile-record-actions .btn,
  .project-log-mobile-record-actions .check-label {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
  }

  /* Mobile tab bar occupies the safe-area strip these three otherwise
     overlap -- only the bottom offset differs from the base (desktop)
     rules above. */
  .project-log-quick-fab {
    bottom: calc(52px + env(safe-area-inset-bottom) + 16px);
    right: 16px;
  }

  .project-log-quick-fab > span:first-child {
    font-size: 24px;
    line-height: 1;
  }

  .project-log-quick-onboarding {
    bottom: calc(52px + env(safe-area-inset-bottom) + 28px);
    right: 150px;
  }

  .project-log-quick-toast {
    bottom: calc(52px + env(safe-area-inset-bottom) + 84px);
    max-width: none;
    right: 16px;
  }

  .project-log-dialog.is-quick .project-log-dialog-panel {
    border-radius: 18px 18px 0 0;
    bottom: 0;
    inline-size: 100%;
    height: var(--project-log-quick-viewport-height, 100dvh);
    max-height: var(--project-log-quick-viewport-height, 100dvh);
    overflow-y: auto;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    position: fixed;
  }

  .project-log-quick-form textarea {
    font-size: 16px;
    min-height: 104px;
    resize: none;
  }

  @keyframes project-log-new-record {
    from {
      background: color-mix(in srgb, var(--primary) 16%, var(--surface));
    }

    to {
      background: var(--surface);
    }
  }
  .sheet-on-mobile {
    border-radius: 14px 14px 0 0;
    bottom: 0;
    inset-inline: 0;
    inline-size: 100%;
    max-block-size: 78dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    position: fixed;
    top: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sheet-scrim {
    background: color-mix(in srgb, var(--text) 45%, transparent);
    inset: 0;
    position: fixed;
    z-index: 19;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-log-mobile-record.is-new {
    animation: none;
  }
}

.log-form {
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  column-gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 18px;
  padding: 14px;
}

.log-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.log-row-actions .btn {
  min-height: 36px;
}

.project-log-lock-reason {
  color: var(--color-ink-muted);
  display: block;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 6px;
}

.log-needed-by {
  font-weight: 800;
}

.log-needed-by.soon {
  color: var(--warning-text);
}

.log-needed-by.overdue {
  color: var(--danger-text);
}

.log-field {
  display: grid;
  gap: 6px;
  grid-template-rows: 14px 44px 18px;
  min-height: 88px;
  min-width: 0;
}

.log-field > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 14px;
  text-transform: uppercase;
}

.log-field::after {
  content: "";
  min-height: 18px;
}

.log-form > strong,
.log-form > .check-label,
.log-form > button,
.log-form > small {
  grid-column: 1 / -1;
}

.log-form > .check-label,
.log-form > button {
  min-height: 44px;
}

.log-field-wide {
  grid-column: 1 / -1;
}

.team-role-select {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  inline-size: 100%;
  max-inline-size: 180px;
  min-height: 34px;
  padding: 4px 8px;
}

.team-role-control {
  align-items: start;
  display: grid;
  gap: 6px;
}

.detail-row.is-dm-focus-target {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}

.project-dm-focus-note,
.project-dm-focus-empty,
.report-period-link-status {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.project-dm-focus-note {
  max-inline-size: 180px;
}

.project-dm-focus-empty,
.report-period-link-status {
  border-left: 3px solid var(--warning);
  margin: 8px 0 0;
  padding: 6px 10px;
}

.sync-freshness {
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  margin-top: 8px;
  padding: 3px 10px;
}

.sync-freshness.fresh {
  border-color: color-mix(in srgb, #2f8a64 40%, transparent);
  color: #2f8a64;
}

.sync-freshness.warn {
  border-color: color-mix(in srgb, #e07a2f 40%, transparent);
  color: #e07a2f;
}

.sync-freshness.stale,
.sync-freshness.none {
  border-color: color-mix(in srgb, #c0442c 40%, transparent);
  color: #c0442c;
}

.freshness-strip {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.freshness-strip[hidden] { display: none; }
.mobile-dialog-source { display: none !important; }

.delivery-route-freshness {
  justify-content: flex-end;
  margin-bottom: 16px;
}

.freshness-chip,
.mobile-freshness {
  align-items: center;
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  min-height: 28px;
  padding: 3px 10px;
  white-space: nowrap;
}

.freshness-mark {
  background: currentColor;
  border-radius: 999px;
  display: inline-block;
  height: 7px;
  width: 7px;
}

.freshness-chip.fresh,
.mobile-freshness.fresh { color: var(--status-green); }
.freshness-chip.warn,
.mobile-freshness.warn { color: var(--warning-text); }
.freshness-chip.stale,
.mobile-freshness.stale { color: var(--status-amber, #e07a2f); }
.freshness-chip.failed,
.mobile-freshness.failed,
.freshness-chip.none,
.mobile-freshness.none { color: var(--status-red, #c0442c); }
.freshness-chip.stale .freshness-mark { border-radius: 999px 0 0 999px; }
.freshness-chip.none .freshness-mark { background: transparent; border: 1px solid currentColor; }
.freshness-chip.failed .freshness-mark { background: transparent; height: auto; width: auto; }
.freshness-chip.failed .freshness-mark::after { content: "✕"; font-size: 14px; font-weight: 900; }

.shell-slot {
  align-items: center;
  background: var(--danger-bg);
  border-bottom: 1px solid var(--danger-border);
  color: var(--danger-text);
  display: flex;
  font-size: 13px;
  font-weight: 700;
  gap: 10px;
  min-height: 40px;
  padding: 4px 20px;
  position: sticky;
  top: 72px;
  z-index: 54;
}

.shell-slot[hidden] { display: none; }

.shell-slot.impersonation {
  background: var(--primary-soft);
  border-bottom-color: var(--line);
  color: var(--text);
}

.shell-slot.sync_attention {
  background: var(--warning-bg);
  border-bottom-color: var(--warning-border);
  color: var(--warning-text);
}

/* X-7-gap C-2: resolveDeliveryShellSlot has a fourth, real branch X-7 never drew —
   read-only WITHOUT impersonation (a DM or consultant on someone else's project).
   It had no rule of its own, so it inherited `.shell-slot`'s default, which is the
   danger/red treatment meant for sync failure. A neutral fact was painting as an
   incident. The state is kept (it is reachable and true) and given a neutral
   treatment; it is recorded as a divergence for owner sign-off because the artifact
   still describes read-only as pill-only. */
.shell-slot.read_only {
  background: var(--surface-strong);
  border-bottom-color: var(--line);
  color: var(--text);
}

.shell-slot > span { flex: 1 1 auto; min-width: 0; }

.shell-slot-view-as-mobile-prefix { display: none; }

.shell-slot-view-as-role { font-weight: 500; }

.shell-slot-action,
.shell-slot-dismiss {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  min-height: 32px;
  padding: 0 4px;
  text-decoration: underline;
  white-space: nowrap;
}

.mobile-freshness,
.mobile-tabbar { display: none; }

.freshness-dialog {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  max-inline-size: min(520px, calc(100vw - 32px));
  padding: 18px;
}

.freshness-dialog::backdrop { background: color-mix(in srgb, var(--background) 72%, transparent); }
.freshness-dialog-head { align-items: start; display: flex; gap: 12px; justify-content: space-between; }
.freshness-dialog-head h2 { margin: 0; }
.freshness-dialog-head .eyebrow { margin: 0 0 4px; }
.freshness-dialog-list { display: grid; gap: 0; list-style: none; margin: 14px 0; padding: 0; }
.freshness-dialog-list li { border-top: 1px solid var(--line); display: grid; gap: 3px; padding: 9px 0; }
.freshness-dialog-list li:first-child { border-top: 0; }
.freshness-dialog-list small { color: var(--muted); font-size: 12px; }
.freshness-dialog-state { font-size: 13px; font-weight: 800; }
.freshness-dialog-state.failed { color: var(--status-red, #c0442c); }
.freshness-dialog-state.stale,
.freshness-dialog-state.none { color: var(--status-amber, #e07a2f); }

[data-freshness-source-cell].is-approx::before {
  color: var(--warning-text);
  content: "~ ";
  font-weight: 900;
}

[data-freshness-source-cell].is-approx { color: var(--muted); }

.reconciliation-warning { color: var(--warning-text); display: block; font-size: 11px; font-weight: 800; overflow-wrap: anywhere; }
.reconciliation-disclosure { color: var(--warning-text); display: block; font-size: 11px; font-weight: 800; margin-top: 4px; }
.reconciliation-disclosure.unavailable { color: var(--muted); }
.unassigned-activity-reconciliation { background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning-text); display: grid; font-size: 12px; gap: 4px; margin: 10px 0; padding: 8px 10px; }
.unassigned-activity-reconciliation small { color: var(--muted); font-size: 11px; }
.unassigned-activity-reconciliation a { color: inherit; font-size: 11px; font-weight: 800; width: fit-content; }
.unassigned-activity-reconciliation ul { color: var(--text); display: grid; font-size: 11px; gap: 3px; list-style: none; margin: 0; padding: 0; }
.unassigned-activity-reconciliation li { display: flex; gap: 8px; justify-content: space-between; }
.field-provenance-chip { border: 1px solid var(--line); border-radius: 99px; color: var(--muted); display: inline-block; font-size: 10px; font-weight: 800; margin-top: 3px; padding: 1px 5px; }
.field-provenance-chip.yoobi { color: var(--primary); }
.field-provenance-chip.birdhouse-manual { color: var(--text); }
.field-provenance-chip.override { color: var(--warning-text); }

@media print {
  .shell-slot,
  .freshness-strip,
  .mobile-freshness,
  .mobile-tabbar { display: none !important; }
}

.global-search-kbd {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 5px;
  pointer-events: none;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

/* WP3: the chip sits exactly where the UA paints
   ::-webkit-search-cancel-button, so the two glyphs overlap as soon as the
   field has content - and there is no Cmd key on a touch device anyway. */
@media (hover: none), (pointer: coarse) {
  .global-search-kbd {
    display: none;
  }
}


.global-search-result.is-active {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  outline: 2px solid color-mix(in srgb, var(--primary) 35%, transparent);
  outline-offset: -2px;
}

.persistence-conflict-banner {
  align-items: center;
  background: var(--background);
  border: 1px solid color-mix(in srgb, #c0442c 45%, transparent);
  border-radius: 10px;
  bottom: 18px;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--text) 22%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  left: 50%;
  max-width: min(680px, calc(100vw - 32px));
  padding: 12px 16px;
  position: fixed;
  transform: translateX(-50%);
  z-index: 60;
}

.persistence-conflict-banner strong {
  color: #c0442c;
}

.manual-project-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 18px;
  margin-bottom: 14px;
  padding: 18px;
}

.manual-project-form > * {
  grid-column: 1 / -1;
}

.manual-project-form-head {
  display: grid;
  gap: 4px;
}

.manual-project-form-head .section-note {
  margin: 0;
}

.manual-project-form-fields {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.manual-project-form .log-field {
  align-content: start;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.manual-project-form .log-field > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.log-form.manual-project-form input,
.log-form.manual-project-form select {
  min-height: 44px;
}

.manual-project-form :is(input, select)[aria-invalid="true"] {
  border-color: var(--danger-text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger-text) 16%, transparent);
}

.manual-project-required,
.manual-project-field-error {
  color: var(--danger-text);
}

.manual-project-field-error {
  font-size: 12px;
  font-weight: 700;
}

.manual-project-budget-echo,
.manual-project-live-date small {
  color: var(--muted);
  font-size: 12px;
}

.manual-project-form-actions {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.manual-project-required-legend {
  color: var(--muted);
  font-size: 12px;
}

.manual-project-failure.persistence-conflict-banner {
  inset: auto;
  max-width: none;
  position: static;
  transform: none;
}

.manual-project-confirmation {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  border-radius: 12px;
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  padding: 16px;
}

.manual-project-confirmation[hidden] {
  display: none;
}

.manual-project-confirmation :is(p, small) {
  margin: 0;
}

.manual-project-confirmation .btn {
  justify-self: start;
}

.project-row-actions {
  display: inline-block;
  margin-inline-start: 6px;
  position: relative;
}

.project-row-actions > summary {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  justify-content: center;
  list-style: none;
  min-height: 28px;
  min-width: 30px;
}

.project-row-actions > summary::-webkit-details-marker {
  display: none;
}

.project-row-actions > button {
  background: var(--surface-strong);
  border: 1px solid var(--danger-border);
  border-radius: 8px;
  color: var(--danger-text);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  inset-inline-end: 0;
  min-height: 38px;
  padding: 8px 10px;
  position: absolute;
  top: calc(100% + 4px);
  white-space: nowrap;
  z-index: 8;
}

.project-row-actions-mobile {
  display: none;
}

.manual-project-delete-dialog {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  max-width: min(520px, calc(100vw - 32px));
  padding: 0;
}

.manual-project-delete-dialog::backdrop {
  background: color-mix(in srgb, var(--text) 42%, transparent);
}

.manual-project-delete-dialog form {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.manual-project-delete-dialog p {
  margin: 0;
}

.manual-project-delete-head,
.manual-project-delete-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.manual-project-delete-head h2 {
  margin: 2px 0 0;
}

.manual-project-delete-dialog .log-field {
  display: grid;
  gap: 6px;
}

.manual-project-delete-dialog input {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  min-height: 44px;
  padding: 8px 10px;
}

.manual-project-delete-alternative {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: 8px;
  color: var(--warning-text);
  padding: 10px;
}


@media (max-width: 1000px) and (min-width: 761px) {
  .manual-project-form-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .manual-project-form {
    margin-inline: -16px;
    padding: 16px;
  }

  .manual-project-form-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .log-form.manual-project-form input,
  .log-form.manual-project-form select {
    font-size: 16px;
    min-height: 48px;
  }

  .manual-project-form-actions {
    background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
    bottom: calc(-16px - env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, 1fr);
    margin: 0 -16px -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    position: sticky;
    z-index: 6;
  }

  .manual-project-form-actions .manual-project-required-legend {
    order: 0;
  }

  .manual-project-form-actions [data-manual-project-submit] {
    min-height: 48px;
    order: 1;
    width: 100%;
  }

  .manual-project-form-actions [data-manual-project-cancel] {
    min-height: 48px;
    order: 2;
    width: 100%;
  }

  .projects-overview-table .project-title {
    align-items: start;
    display: grid;
    gap: 4px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .projects-overview-table .project-title > a {
    grid-column: 1;
  }

  .project-row-actions-mobile {
    display: inline-block;
    grid-column: 2;
    margin: 0;
  }

  .project-row-actions:not(.project-row-actions-mobile) {
    display: none;
  }

  .manual-project-delete-actions {
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .manual-project-delete-actions .btn {
    min-height: 48px;
    width: 100%;
  }
}

.resource-form {
  margin-top: 12px;
}

.log-form[hidden] {
  display: none;
}

.log-form strong {
  align-self: center;
}

.log-form input,
.log-form select,
.log-form textarea {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  min-height: 44px;
  min-width: 0;
  padding: 7px 9px;
}

.log-form textarea {
  resize: vertical;
}

.log-form input:focus,
.log-form select:focus,
.log-form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
  outline: 0;
}

/* Nested inside the Client contacts panel and now inside a <details>, so the
   card chrome would be a box in a box in a box. */
.client-contact-form {
  border: 0;
  padding: 0;
}

/* WP7: per-panel project-log filters. */
.log-filter {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 12px 0 4px;
}

.log-filter-search {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  flex: 1 1 180px;
  font: inherit;
  font-size: 13px;
  min-height: 34px;
  min-width: 0;
  padding: 6px 10px;
}

.log-filter-search:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
  outline: 0;
}

.log-empty {
  color: var(--muted);
  font-size: 13.5px;
  margin: 12px 0 0;
}

.check-label {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 13px;
  gap: 7px;
  white-space: nowrap;
}

.log-board {
  display: grid;
  gap: 14px;
  /* MK-62 S3: the implicit `auto` track took its minimum from the table's
     880px min-width, so at 768px the board was 704px wide with an 882px panel
     hanging out of it and the whole document scrolled sideways. A definite
     minmax(0, 1fr) track hands the overflow back to the table's own scroller
     — which is also what lets the table measure itself below. */
  grid-template-columns: minmax(0, 1fr);
}

.project-log-lane-hint {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  margin: 0 0 16px;
}

.log-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  overflow: hidden;
}

.log-section-head {
  align-items: baseline;
  background: var(--surface);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 16px;
}

.log-section-head h3 {
  font-size: 18px;
  font-weight: 900;
  margin: 0;
}

/* MK-33 Wijzigingen table. Copied from the approved mockup's own style block
   (MK-33-delivery-log-tab.html), which is written in this stylesheet's idiom:
   existing custom properties, existing 8px radius, no new palette or scale. */
.mk-new-rowtools {
  display: inline-flex;
  gap: 4px;
  white-space: nowrap;
}

.mk-new-iconbtn {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--primary);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 900;
  justify-content: center;
  min-height: 34px;
  min-width: 34px;
  padding: 0 8px;
}

.mk-new-iconbtn[aria-expanded="true"] {
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--line));
}

.mk-new-iconbtn[disabled] {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.55;
}

.mk-new-locked td {
  background: color-mix(in srgb, var(--accent) 9%, var(--background));
}

.mk-new-locknote {
  align-items: flex-start;
  color: var(--warning-text);
  display: flex;
  font-size: 12px;
  font-weight: 500;
  gap: 6px;
  line-height: 1.4;
  margin-top: 5px;
  max-width: 460px;
}

.mk-new-locknote b {
  font-weight: 900;
}

.mk-new-lanehint {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.mk-new-emptycell strong {
  display: block;
  font-size: 14px;
}

.mk-new-emptycell small {
  color: var(--muted);
  display: block;
  margin-top: 3px;
}

/* The row-level origin/history disclosure the "i" control opens. */
.project-log-change-history td {
  color: var(--muted);
  font-size: 13px;
}

.log-section-head span {
  color: var(--muted);
  font-size: 13px;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── WP1: canonical horizontal scroller ───────────────────────── */
.scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;   /* stops the drag becoming browser back-swipe */
  -webkit-overflow-scrolling: touch; /* no-op on iOS 13+; kept for parity with the older scrollers */
  scrollbar-width: thin;
}

/* The seven existing scrollers get the same touch behaviour without a
   markup change. */
.scroll-x,
.projects-overview-table,
.project-detail-planning-grid,
.planning-board-scroll,
.table-scroll,
.report-history-scroll,
.report-burndown-chart,
.chart-bars {
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── WP1: screen-reader-only text ─────────────────────────────── */
.sr-only {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.log-table {
  border-collapse: collapse;
  min-width: 880px;
  width: 100%;
}

.log-table th,
.log-table td {
  border-top: 1px solid var(--line);
  padding: 11px 12px;
  text-align: left;
  vertical-align: middle;
}

.log-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.log-table td {
  font-size: 14px;
}

.log-table td small {
  color: var(--muted);
  display: block;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 4px;
  max-width: 420px;
}

.log-incomplete {
  color: var(--warning-text);
  font-weight: 800;
}

.log-missing-count {
  background: color-mix(in srgb, var(--warning-text) 12%, transparent);
  border-radius: 999px;
  color: var(--warning-text);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  white-space: nowrap;
}

.log-table tr.cumulative {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  border-top: 3px solid var(--primary);
}

.owner-badge,
.score-badge,
.log-status {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  min-height: 28px;
  padding: 4px 8px;
}

.owner-badge {
  background: var(--primary-soft);
  color: var(--primary);
}

.owner-badge.client {
  background: #fff4d8;
  border-color: #f2c375;
  color: #8a5600;
}

.log-status.is-overdue {
  background: #fee2e2;
  border-color: #fecaca;
  color: var(--danger);
}

.log-status.is-done {
  background: #eef8f0;
  border-color: #b7dbc1;
  color: #276749;
}

.score-badge.score-l {
  background: #fee2e2;
  border-color: #fecaca;
  color: var(--danger);
}

.score-badge.score-m {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.score-badge.score-s {
  background: #eef8f0;
  border-color: #b7dbc1;
  color: #276749;
}

.report-workbench {
  scroll-margin-top: 18px;
}

body[data-delivery-page="project-detail-sprint-report"] .report-workbench {
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(249, 249, 243, 0.9)),
    var(--surface);
}

body[data-delivery-page="project-detail-sprint-report"] .report-workbench > .section-head {
  align-items: flex-end;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  margin-bottom: 18px;
  padding-bottom: 18px;
}

body[data-delivery-page="project-detail-sprint-report"] .report-workbench > .section-head h2 {
  color: var(--primary);
  font-size: clamp(30px, 3.3vw, 44px);
  font-weight: 900;
  line-height: 1.02;
  margin-top: 4px;
  max-width: 920px;
  overflow-wrap: anywhere;
}

body[data-delivery-page="project-detail-sprint-report"] .report-workbench > .section-head .section-note {
  max-width: 720px;
}

/* Sprint report tab — status band (merges the old section-head + current-period
   card + focus KPI strip into one canonical band). */
.report-workbench-header {
  align-items: start;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 18px;
}

.report-status-main {
  min-width: 0;
}

.report-band-title {
  color: var(--primary);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.05;
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.report-band-meta {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 500;
  gap: 6px 10px;
  margin: 10px 0 0;
}

.report-band-fact {
  white-space: nowrap;
}

.report-band-fact b {
  color: var(--text);
  font-weight: 700;
}

.report-band-sep {
  color: var(--line);
}

.report-band-note {
  color: var(--muted);
  margin: 8px 0 0;
  max-width: 720px;
}

.report-status-side {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.report-stepper {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.report-step {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  padding: 4px 0;
}

.report-step:not(:last-child)::after {
  background: var(--line);
  content: "";
  height: 1px;
  margin: 0 8px;
  width: 16px;
}

.report-step-dot {
  background: var(--line);
  border-radius: 999px;
  flex-shrink: 0;
  height: 8px;
  width: 8px;
}

.report-step.is-complete {
  color: var(--text);
}

.report-step.is-complete .report-step-dot {
  background: var(--primary);
}

.report-step.is-current {
  color: var(--primary);
}

.report-step.is-current .report-step-dot {
  background: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}

.report-band-status-line {
  align-items: center;
  display: flex;
  gap: 10px;
}

.report-band-state {
  font-size: 13px;
  font-weight: 700;
}

.report-project-header {
  align-items: end;
  background:
    linear-gradient(135deg, rgba(20, 75, 96, 0.07), rgba(255, 253, 247, 0.98) 48%, rgba(248, 217, 119, 0.14)),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, #d9e7e3);
  border-left: 5px solid var(--primary);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(17, 77, 97, 0.07);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 0.46fr);
  margin-top: 12px;
  padding: 18px 20px;
  position: relative;
}

.report-briefing-panel {
  min-height: 0;
}

.report-project-header h1,
.report-project-header h3 {
  color: var(--primary);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.04;
  margin: 6px 0 0;
  max-width: 900px;
  overflow-wrap: anywhere;
}

.report-project-header p {
  color: color-mix(in srgb, var(--primary) 42%, var(--muted));
  font-size: 15px;
  line-height: 1.35;
  margin: 8px 0 0;
  max-width: 780px;
}

.report-focus-panel {
  border: 1px solid color-mix(in srgb, var(--primary) 15%, #d9e7e3);
  border-radius: 8px;
  box-shadow: 0 16px 38px rgba(17, 77, 97, 0.07);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
  overflow: hidden;
}

.report-focus-panel div {
  background: color-mix(in srgb, #fffdf7 94%, #f2f1e8);
  min-width: 0;
  padding: 16px;
}

.report-focus-panel .report-focus-period {
  background:
    linear-gradient(135deg, rgba(20, 75, 96, 0.08), rgba(255, 253, 247, 0.96)),
    #fffdf7;
}

.report-focus-panel strong,
.report-focus-panel small {
  display: block;
  overflow-wrap: anywhere;
}

.report-focus-panel strong {
  color: var(--primary);
  font-size: clamp(20px, 2vw, 28px);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1.05;
  margin-top: 10px;
}

.report-focus-panel small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
  margin-top: 7px;
}

.report-current-period-facts {
  background: #fffdf7;
  border: 1px solid color-mix(in srgb, var(--primary) 13%, #d9e7e3);
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
}

.report-current-period-facts div {
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  min-width: 0;
  padding: 12px 14px;
}

.report-current-period-facts div:nth-child(odd) {
  border-left: 0;
}

.report-current-period-facts div:nth-child(-n + 2) {
  border-top: 0;
}

.report-current-period-facts dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.report-current-period-facts dd {
  color: var(--foreground);
  font-size: 18px;
  font-weight: 900;
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.report-preview-shell {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
  margin-top: 14px;
}

.report-client-artifact-primary {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.36fr) minmax(320px, 0.64fr);
  margin-top: 16px;
}

.report-workbench-main {
  isolation: isolate;
}

.report-artifact-stage {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-width: 0;
  padding: 18px 0 0;
}

.report-artifact-stage-head {
  align-items: start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.report-artifact-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.report-logo-upload {
  cursor: pointer;
  position: relative;
}

.report-logo-upload input {
  block-size: 1px;
  inline-size: 1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.report-logo-audit {
  color: var(--muted);
  flex-basis: 100%;
  font-size: 12px;
  margin: 0;
  text-align: right;
}

.report-artifact-stage-head h2 {
  color: var(--primary);
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.04;
  margin: 6px 0 0;
}

.report-artifact-stage-head p {
  color: color-mix(in srgb, var(--primary) 42%, var(--muted));
  line-height: 1.35;
  margin: 8px 0 0;
  max-width: 760px;
}

.report-client-artifact-primary .report-workflow-rail {
  align-self: start;
  gap: 14px;
  padding: 18px;
  position: static;
}

.report-client-artifact-primary .report-cover-preview {
  display: none;
}

.report-client-artifact-primary .report-title-stack {
  margin-top: 20px;
}

.report-client-artifact-primary .report-title-stack strong {
  font-size: clamp(27px, 3vw, 38px);
  line-height: 0.98;
}

.report-client-artifact-primary .report-title-stack span {
  font-size: 15px;
}

.report-native-sections {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 16px;
}

.report-period-mode-panel {
  align-self: stretch;
}

.report-mode-segment {
  background: color-mix(in srgb, var(--primary) 6%, #fffdf7);
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 8px;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
  padding: 6px;
}

.report-mode-segment .btn.is-active,
.report-mode-segment .btn[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--background);
}

.report-activity-panel,
.report-burndown-panel {
  grid-column: 1 / -1;
}

.report-burn-header {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 12px;
}

.report-burn-header strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.report-activity-table td {
  vertical-align: middle;
}

/* MK-62 S5: `.report-activity-field-label` used to live here. It was already
   real DOM — the one surface in this train that never used content: attr() —
   but it was a private class with no i18n key, so a language switch could not
   reach it and no gate knew it was a column key. Same span, shared carrier. */
.report-activity-table .t-key {
  display: none;
}

.report-activity-table td:nth-child(2),
.report-activity-table td:nth-child(3),
.report-activity-table td:nth-child(4) {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.report-activity-table th:nth-child(2),
.report-activity-table th:nth-child(3),
.report-activity-table th:nth-child(4) {
  text-align: right;
}

.report-activity-table tr.is-warranty {
  border-top: 3px solid var(--accent);
}

.report-activity-table tr.is-warranty td:first-child {
  color: var(--muted);
}

.report-activity-table tr.cumulative {
  background: color-mix(in srgb, var(--primary) 7%, #fffdf7);
  border-top: 3px solid var(--primary);
}

.report-activity-scroll-hint {
  display: none;
}

.report-burndown-chart {
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(246, 244, 236, 0.9));
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: 8px;
  overflow-x: auto;
  padding: 14px;
}

.report-burndown-availability {
  border-top: 1px solid var(--line);
  color: var(--text);
  display: grid;
  font-size: 13px;
  font-weight: 700;
  gap: 6px;
  line-height: 1.4;
  margin: 0 0 12px;
  padding: 10px 0 0;
}

.report-burndown-availability[hidden] {
  display: none;
}

.report-burndown-availability p {
  margin: 0;
}

.report-sprint-picker,
.report-month-picker {
  align-items: center;
  display: flex;
  font-size: 13px;
  font-weight: 700;
  gap: 10px;
  margin-top: 10px;
}

/* The [hidden] attribute must win over the flex display above, else the picker
   stays visible-but-inert in the wrong mode (e.g. sprint picker in monthly) [F2]. */
.report-sprint-picker[hidden],
.report-month-picker[hidden] {
  display: none;
}

.report-sprint-picker select,
.report-month-picker select {
  background: var(--panel, #fff);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: inherit;
  flex: 1;
  font: inherit;
  min-width: 0;
  padding: 6px 8px;
}

/* Desktop keeps its approved geometry. Phone uses its own one-series chart so
   labels remain legible instead of shrinking with the 800px desktop viewBox. */
.report-burndown-chart svg {
  display: block;
  height: auto;
  width: 100%;
}

.report-chart-title {
  fill: var(--primary);
  font-size: 13px;
  font-weight: 900;
}

.report-chart-subtitle,
.report-chart-axis text,
.report-chart-legend text,
.report-chart-reserve-label {
  fill: var(--report-chart-axis);
  font-size: 10px;
  font-weight: 700;
}

.report-chart-grid line {
  stroke: var(--report-chart-grid);
  stroke-width: 1;
}

.report-chart-budget,
.report-chart-work {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.report-chart-planned {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.report-chart-budget {
  stroke: var(--report-chart-budget);
}

.report-chart-planned {
  stroke: var(--primary);
  stroke-dasharray: 6 3;
}

.report-chart-work {
  stroke: var(--report-chart-work);
}

.report-chart-work-dot {
  fill: var(--report-chart-work);
  stroke: var(--surface-strong);
  stroke-width: 2px;
}

.report-chart-current {
  stroke: var(--report-chart-current);
  stroke-dasharray: 3 2;
  stroke-width: 1;
}

.report-chart-reserve {
  stroke: var(--report-chart-reserve);
  stroke-dasharray: 6 4;
  opacity: 0.6;
  stroke-width: 1;
}

.report-chart-uat {
  stroke: var(--report-chart-marker-uat);
  stroke-dasharray: 3 3;
  opacity: 0.6;
  stroke-width: 1;
}

.report-chart-golive {
  stroke: var(--report-chart-golive);
  stroke-dasharray: 3 3;
  opacity: 0.6;
  stroke-width: 1;
}

.report-chart-scope {
  opacity: 0.65;
  stroke: var(--report-chart-scope);
  stroke-dasharray: 2 2;
  stroke-width: 1;
}

.report-chart-marker-leader {
  opacity: 0.7;
  stroke: var(--report-chart-axis);
  stroke-width: 1;
}

.report-chart-marker-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.report-chart-marker-now {
  fill: var(--report-chart-now);
}

.report-chart-marker-uat {
  fill: var(--report-chart-marker-uat);
}

.report-chart-marker-golive {
  fill: var(--report-chart-golive);
}

.report-chart-marker-scope {
  fill: var(--report-chart-scope);
}

.report-chart-axis text.report-chart-now-label {
  fill: var(--report-chart-now);
  font-weight: 900;
}

.report-chart-contract-unavailable rect {
  fill: var(--surface);
  stroke: var(--line);
}

.report-chart-contract-unavailable text {
  fill: var(--report-chart-axis);
  font-size: 8px;
  font-weight: 800;
}

.report-burndown-mobile {
  display: none;
}

.report-chart-mobile-grid {
  stroke: var(--report-chart-grid);
  stroke-width: 1;
}

.report-chart-mobile-work {
  fill: none;
  stroke: var(--report-chart-work);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.report-chart-mobile-work-dot {
  fill: var(--report-chart-work);
  stroke: var(--surface-strong);
  stroke-width: 2px;
}

.report-chart-mobile-x,
.report-chart-mobile-y,
.report-chart-mobile-unavailable-label {
  fill: var(--report-chart-axis);
  font-size: 12px;
  font-weight: 700;
}

.report-chart-mobile-now {
  fill: var(--report-chart-now);
  font-size: 12px;
  font-weight: 900;
  paint-order: stroke;
  stroke: var(--surface-strong);
  stroke-width: 3px;
}

.report-chart-mobile-now-dot {
  fill: var(--report-chart-now);
  stroke: var(--surface-strong);
  stroke-width: 2px;
}

.report-chart-mobile-facts {
  border-top: 1px solid var(--line);
  display: grid;
  margin: 12px 0 0;
}

.report-chart-mobile-facts div {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  min-height: 44px;
}

.report-chart-mobile-facts dt {
  color: var(--muted);
  font-size: 13px;
}

.report-chart-mobile-facts dd {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  margin: 0;
}

.report-chart-mobile-unavailable {
  color: var(--muted);
  margin: 12px 0 0;
}

@media (max-width: 760px) {
  .report-burndown-desktop {
    display: none;
  }

  .report-burndown-mobile {
    display: block;
    margin: 0 auto;
    max-width: 286px;
  }

  .report-burndown-mobile svg {
    display: block;
    height: auto;
    width: 100%;
  }
}

.report-cover-preview {
  align-content: space-between;
  background:
    linear-gradient(145deg, rgba(255, 253, 247, 0.98), rgba(238, 248, 240, 0.96) 58%, rgba(247, 228, 198, 0.9)),
    linear-gradient(90deg, var(--primary) 0 8px, transparent 8px);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, #d9e7e3);
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(17, 77, 97, 0.08);
  color: var(--primary);
  display: grid;
  min-height: 356px;
  overflow: hidden;
  padding: 24px;
  position: relative;
}

.report-cover-preview::after {
  background: linear-gradient(180deg, rgba(17, 77, 97, 0.16), rgba(232, 170, 87, 0.16));
  content: "";
  height: 100%;
  position: absolute;
  right: 18px;
  top: 0;
  width: 8px;
}

.report-cover-preview > * {
  position: relative;
  z-index: 1;
}

.report-cover-top {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.report-cover-logo {
  height: 52px;
  object-fit: contain;
  object-position: left top;
  width: 128px;
}

.report-cover-brand {
  color: var(--foreground);
  display: inline-block;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.report-title-stack {
  display: grid;
  gap: 10px;
}

.report-title-stack strong {
  font-size: clamp(34px, 4.8vw, 64px);
  font-weight: 900;
  line-height: 0.94;
  overflow-wrap: anywhere;
}

.report-title-stack span {
  color: #537984;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.15;
}

.report-hero {
  background:
    linear-gradient(90deg, rgba(17, 77, 97, 0.08), rgba(17, 77, 97, 0) 42%),
    var(--surface);
  border: 1px solid #d9e7e3;
  border-radius: 8px;
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  margin-top: 14px;
  overflow: hidden;
}

.report-layout {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  margin-top: 12px;
}

.report-layout.secondary {
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.08fr) minmax(260px, 0.9fr);
}

.report-layout.evidence {
  grid-template-columns: minmax(0, 1.36fr) minmax(280px, 0.74fr);
}

.report-layout.history {
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
}

.report-panel {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 10%, #d9e7e3);
  border-radius: 8px;
  min-width: 0;
  padding: 16px;
}

.report-panel-head {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.report-panel-head strong {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.15;
}

.report-period-card {
  min-width: 0;
  padding: 0 0 16px;
  position: relative;
}

.report-workflow-rail {
  background:
    linear-gradient(180deg, #fffdf7, #f3f0e8);
  border: 1px solid #d9e7e3;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 20px;
}

.report-title {
  display: block;
  font-size: clamp(32px, 4.4vw, 58px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.92;
  margin-top: 8px;
  overflow-wrap: anywhere;
}

.report-title.compact {
  font-size: 26px;
  line-height: 1;
}

.report-meta {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  margin: 8px 0 0;
}

.report-period-facts {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 18px 0 0;
}

.report-period-facts div {
  border-top: 1px solid var(--line);
  min-width: 0;
  padding-top: 10px;
}

.report-period-facts dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.report-period-facts dd {
  font-size: 16px;
  font-weight: 900;
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.report-period-strip {
  background: color-mix(in srgb, #fffdf7 92%, var(--primary-soft));
  border: 1px solid color-mix(in srgb, var(--primary) 10%, #d9e7e3);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(17, 77, 97, 0.04);
  margin-top: 12px;
  padding: 14px 16px 16px;
}

.period-list-head {
  align-items: end;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.period-list-head strong,
.period-list-head span {
  display: block;
}

.period-list-head strong {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
  margin-top: 2px;
}

.period-list-head > span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  text-align: right;
}

.report-history-table {
  display: block;
  gap: 8px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.report-period-item {
  background: rgba(255, 253, 247, 0.72);
  border: 1px solid color-mix(in srgb, var(--primary) 9%, var(--line));
  border-radius: 8px;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
}

.report-period-item.is-active {
  background:
    linear-gradient(135deg, #eef8f0, #fffdf7);
  border-color: #b7dbc1;
  box-shadow: inset 0 -3px 0 #b7dbc1;
}

.report-period-item strong,
.report-period-item span,
.report-period-item small {
  display: block;
  overflow-wrap: anywhere;
}

.report-period-item strong {
  color: var(--foreground);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
}

.report-period-item span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.report-period-item small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.report-period-facts {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-period-facts small {
  background: rgba(255, 253, 247, 0.8);
  border: 1px solid color-mix(in srgb, var(--primary) 7%, var(--line));
  border-radius: 6px;
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px;
}

.report-period-facts b {
  color: var(--muted);
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.workflow-steps {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 16px 0 18px;
  padding: 0;
}

.workflow-steps li {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  min-height: 48px;
  padding: 8px;
  text-transform: uppercase;
}

.workflow-steps li.is-complete {
  background: #eef8f0;
  border-color: #b7dbc1;
  color: #276749;
}

.workflow-steps li.is-current {
  background: var(--primary);
  color: var(--background);
}

.primary-action {
  background: var(--primary);
  border: 0;
  border-radius: 8px;
  color: var(--background);
  cursor: pointer;
  font-weight: 900;
  min-height: 44px;
  padding: 0 16px;
}

.report-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

[data-report-draft-actions][hidden],
[data-report-locked-actions][hidden],
[data-report-replace-locked][hidden] {
  display: none !important;
}

.report-send-state[data-report-lifecycle-status="locked"] {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
}

.report-send-state[data-report-lifecycle-status="error"] {
  border-color: color-mix(in srgb, #a33a2b 42%, var(--line));
}

.report-actions .btn,
.report-actions .primary-action {
  /* MK-63: was the retired 38px, and these render inside the mark-sent dialog,
     where the sheet asks for 44. */
  min-height: var(--control-height-touch);
}

.report-replacement-dialog {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(22, 47, 51, 0.2);
  color: var(--text);
  max-width: min(520px, calc(100vw - 32px));
  padding: 0;
  width: 100%;
}

.report-replacement-dialog::backdrop {
  background: rgba(22, 47, 51, 0.36);
}

.report-replacement-dialog form {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.report-replacement-dialog h2,
.report-replacement-dialog p {
  margin: 0;
}

.report-replacement-dialog .field {
  display: grid;
  gap: 6px;
}

.report-replacement-dialog textarea {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  font: inherit;
  line-height: 1.4;
  padding: 10px;
  resize: vertical;
}

.report-replacement-dialog textarea[aria-invalid="true"] {
  border-color: #a33a2b;
}

.report-replacement-dialog textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 30%, transparent);
  outline-offset: 2px;
}

.report-source-delta {
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 12px;
}

.report-source-delta ul {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
}

.readiness-grid,
.preview-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.readiness {
  background: rgba(255, 253, 247, 0.74);
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--line));
  border-radius: 8px;
  display: grid;
  gap: 4px;
  min-height: 68px;
  padding: 12px;
}

.readiness.attention {
  background: #fff7ed;
  border-color: #fed7aa;
}

.readiness strong,
.readiness span {
  display: block;
}

.readiness span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.preview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.preview-block {
  border-top: 1px solid var(--line);
  min-width: 0;
  padding-top: 10px;
}

.preview-block h3 {
  font-size: 15px;
  font-weight: 900;
  margin: 0 0 8px;
}

.preview-block ul {
  color: var(--muted);
  display: grid;
  gap: 5px;
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
  padding-left: 18px;
}

.preview-block li {
  overflow-wrap: anywhere;
}

.report-artifact-preview-frame {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: block;
  height: 520px;
  margin-top: 12px;
  max-width: 100%;
  width: 100%;
}

body[data-delivery-page="project-detail-sprint-report"] .report-layout.secondary {
  align-items: start;
  grid-template-columns: minmax(260px, 0.48fr) minmax(0, 1.52fr);
}

body[data-delivery-page="project-detail-sprint-report"] .report-period-table {
  min-width: 0;
  table-layout: fixed;
  width: 100%;
}

body[data-delivery-page="project-detail-sprint-report"] table.report-history-table {
  min-width: 860px;
}

body[data-delivery-page="project-detail-sprint-report"] .report-period-table th,
body[data-delivery-page="project-detail-sprint-report"] .report-period-table td {
  font-size: 11px;
  line-height: 1.25;
  padding: 10px 8px;
}

body[data-delivery-page="project-detail-sprint-report"] .report-period-table td small {
  font-size: 10px;
}

body[data-delivery-page="project-detail-sprint-report"] .report-artifact-contract-grid {
  display: block;
}

body[data-delivery-page="project-detail-sprint-report"] .report-client-artifact-primary {
  display: block;
}

/* D5-A-093/104/116. The generated report lives in the page flow. The container
   is a plain scroll region: the document's own sheets set their own size, the
   height follows the content, and the scale factor only ever shrinks (capped at
   1 in browser.ts) so a narrow viewport fits rather than a wide one stretches. */
body[data-delivery-page="project-detail-sprint-report"] .report-document-body {
  --report-preview-factor: 1;
  /* The embedded document carries its own z-indexes (the draft banner sits at
     21). Isolating the host keeps every one of them inside this box, so the
     document can never paint over the app shell or swallow a click meant for
     the header. */
  isolation: isolate;
  position: relative;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(20, 75, 96, 0.04), rgba(20, 75, 96, 0)),
    #f4f3eb;
  border: 0;
  min-width: 0;
  overflow-x: auto;
  padding: 10px;
}

body[data-delivery-page="project-detail-sprint-report"] .report-document-flow {
  transform: scale(var(--report-preview-factor));
  transform-origin: top left;
  width: 794px;
}

/* D5-A-005/D5-A-115. The A4 sheets are the only shadowed elements on the page,
   and the document stays light in both themes because it is the client's
   document, not app chrome. */
body[data-delivery-page="project-detail-sprint-report"] .report-document-flow .page {
  box-shadow: 0 22px 56px rgba(17, 77, 97, 0.1);
  color-scheme: light;
}

/* 1 · the five figures */
.report-figure-strip {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.report-figure {
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px;
}

.report-figure-value {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.report-figure[data-report-figure-state="negative"] .report-figure-value {
  color: var(--status-red);
}

/* An absent figure reads as a stated absence, not as a dimmed number. */
.report-figure[data-report-figure-state="absent"] .report-figure-value {
  font-size: 15px;
  font-weight: 400;
}

.report-figure-basis,
.report-figure-cause {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

/* 2 · the sprint/maand toggle */
.report-period-selector {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}

/* the acknowledgement tick sits with the checks it clears */
.report-readiness-acknowledgement {
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  padding-top: 12px;
}

.report-readiness-acknowledgement label {
  align-items: center;
  display: flex;
  gap: 8px;
}

.report-readiness-acknowledgement small {
  color: var(--muted);
  font-size: 11px;
}

/* furniture: the action row closes the page */
.report-action-bar {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

@media (max-width: 900px) {
  .report-figure-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* a-44: at 320px the figures go one column and nothing overflows */
@media (max-width: 480px) {
  .report-figure-strip {
    grid-template-columns: minmax(0, 1fr);
  }
}

.report-preview-fullscreen-trigger {
  margin-top: 12px;
  /* MK-63: was 48px on a .btn whose own rule is already the touch
     size, so the override only added a fourth height. */
  min-height: var(--control-height-touch);
}

.report-preview-fullscreen-dialog {
  background: #f4f3eb;
  border: 0;
  block-size: 100dvh;
  inline-size: 100dvw;
  margin: 0;
  max-block-size: none;
  max-inline-size: none;
  padding: 0;
}

.report-preview-fullscreen-dialog::backdrop {
  background: rgba(12, 30, 38, 0.82);
}

.report-preview-fullscreen-chrome {
  align-items: center;
  background: rgba(244, 243, 235, 0.94);
  display: flex;
  justify-content: flex-start;
  left: 0;
  padding: 10px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.report-preview-fullscreen-content {
  box-sizing: border-box;
  min-block-size: calc(100dvh - 60px);
  overflow: auto;
  padding: 0 0 28px;
}

.report-preview-fullscreen-content > body {
  background: white;
  box-shadow: 0 22px 56px rgba(17, 77, 97, 0.22);
  display: block;
  margin: 0 auto;
  max-width: none;
  min-width: 794px;
}

.report-period-overview {
  border-top: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  margin-top: 24px;
  padding-top: 18px;
}

.report-period-overview .report-period-facts {
  display: grid;
  gap: 12px 18px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.report-period-overview .report-period-facts > div {
  border-inline-start: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  padding-inline-start: 12px;
}


body[data-delivery-page="project-detail-sprint-report"] .report-supporting-inputs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-disclosure {
  background: color-mix(in srgb, #fffdf7 92%, #f2f1e8);
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: 8px;
  margin-top: 16px;
  overflow: hidden;
}

.report-disclosure summary {
  align-items: center;
  color: var(--primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  list-style: none;
  min-height: 64px;
  padding: 16px 18px;
}

.report-disclosure summary::-webkit-details-marker {
  display: none;
}

.report-disclosure summary::after {
  background: var(--primary);
  border-radius: 999px;
  color: #fffdf7;
  content: "+";
  display: grid;
  font-weight: 900;
  height: 28px;
  place-items: center;
  width: 28px;
}

.report-disclosure[open] summary::after {
  content: "-";
}

.report-disclosure summary strong,
.report-disclosure summary small {
  display: block;
}

.report-disclosure summary strong {
  font-size: 18px;
  font-weight: 900;
}

.report-disclosure summary small {
  color: var(--muted);
  line-height: 1.35;
  margin-top: 4px;
}

.report-disclosure .report-supporting-inputs {
  border-top: 1px solid color-mix(in srgb, var(--primary) 10%, var(--line));
  margin-top: 0;
  padding: 16px;
}

.report-disclosure:not([open]) .report-audit-grid,
.report-disclosure:not([open]) .report-supporting-inputs {
  display: none;
}

.report-audit-grid {
  border-top: 1px solid color-mix(in srgb, var(--primary) 10%, var(--line));
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  padding: 16px;
}

.report-audit-grid .report-evidence-panel {
  grid-column: 1;
}

.report-audit-grid [data-report-lifecycle] {
  grid-column: 2;
}

body[data-delivery-page="project-detail-sprint-report"] .report-layout.secondary > .report-panel {
  min-height: 100%;
}

.report-evidence-table {
  min-width: 100%;
}

table.report-history-table {
  min-width: 860px;
  table-layout: fixed;
  width: 100%;
}

.report-history-workspace {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  margin-top: 24px;
  padding: 24px 0 28px;
}

.report-history-heading h2,
.report-history-heading p {
  margin: 0;
}

.report-history-heading {
  align-items: end;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.report-history-heading h2 {
  color: var(--primary);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  letter-spacing: -0.025em;
}

.report-history-heading .section-note {
  margin-top: 6px;
}

.report-history-toolbar {
  align-items: start;
  display: grid;
  gap: 18px 28px;
  grid-template-columns: minmax(520px, 1fr) auto;
  margin-top: 20px;
}

.report-history-context {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(240px, 0.72fr) minmax(300px, 1fr);
  min-width: 0;
}

.report-history-toolbar .report-period-mode-panel,
.report-history-toolbar .report-sprint-picker,
.report-history-toolbar .report-month-picker {
  margin: 0;
}

.report-history-toolbar .report-mode-segment {
  margin: 0;
}

.report-history-toolbar .btn,
.report-history-toolbar .primary-action,
.report-history-toolbar select,
.report-history-workspace summary,
.report-history-workspace a {
  min-height: 44px;
}

.report-history-toolbar select {
  border-radius: 8px;
  padding: 10px 12px;
}

.report-preview-controls {
  background: color-mix(in srgb, var(--surface) 64%, var(--background));
  border: 1px solid color-mix(in srgb, var(--primary) 7%, var(--line));
  border-radius: 8px;
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 16px;
}

.report-history-picker-group,
.report-history-actions {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.report-history-picker-group .report-sprint-picker,
.report-history-picker-group .report-month-picker {
  align-items: stretch;
  display: grid;
  gap: 6px;
}

.report-history-picker-group .report-sprint-picker[hidden],
.report-history-picker-group .report-month-picker[hidden] {
  display: none;
}

.report-history-picker-group select {
  width: 100%;
}

.report-history-actions {
  align-content: start;
  justify-items: end;
  min-width: max-content;
}

.report-history-actions .report-actions {
  justify-content: end;
  margin: 0;
}

.report-history-actions .report-send-state {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  text-align: right;
}

.report-history-actions .report-send-state strong {
  color: var(--primary);
  font-weight: 900;
}

.report-history-actions .report-meta {
  margin: 0;
  max-width: 54ch;
  text-align: right;
}

.report-history-scroll {
  border-bottom: 1px solid var(--line);
  margin-top: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.report-history-scroll:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.report-history-table th,
.report-history-table td {
  font-variant-numeric: tabular-nums;
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
}

.report-history-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}

.report-history-sort {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: 5px;
  letter-spacing: inherit;
  min-height: 32px;
  padding: 0;
  text-align: left;
  text-transform: inherit;
}

.report-history-sort:hover {
  color: var(--primary);
}

.report-history-sort:focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.report-history-sort-icon {
  color: var(--primary);
  font-size: 14px;
  line-height: 1;
}

.report-history-table th:nth-child(1) { width: 21%; }
.report-history-table th:nth-child(2) { width: 25%; }
.report-history-table th:nth-child(3) { width: 17%; }
.report-history-table th:nth-child(4) { width: 18%; }
.report-history-table th:nth-child(5) { width: 19%; }

.report-history-table [data-report-history-row] {
  cursor: pointer;
  position: relative;
  transition: background-color 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.report-history-table [data-report-history-row]:hover {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.report-history-table [data-report-history-row][aria-current="true"] {
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  box-shadow: inset 4px 0 0 var(--primary);
}

.report-history-date {
  white-space: nowrap;
}

.report-history-date > * + * {
  margin-left: 7px;
}

.report-history-status {
  align-items: center;
  display: inline-flex;
  font-weight: 700;
  gap: 7px;
  min-height: 28px;
}

.report-history-status svg {
  fill: none;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.7;
  width: 16px;
}

.report-history-status.is-locked {
  color: var(--success-text);
}

.report-history-status.is-draft {
  color: var(--muted);
}

.report-history-table a {
  align-items: center;
  color: var(--primary);
  display: inline-flex;
  font-weight: 700;
  overflow-wrap: anywhere;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.report-history-details,
[data-report-history-older-versions] {
  margin-top: 4px;
}

.report-history-details summary,
[data-report-history-older-versions] summary {
  align-items: center;
  color: var(--primary);
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
}

.report-history-details p,
[data-report-history-older-versions] ul {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  margin: 4px 0 0;
}

.report-history-provenance-list {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.report-history-version-provenance,
[data-report-history-older-versions] {
  border-left: 2px solid var(--line);
  display: grid;
  gap: 6px;
  padding-left: 10px;
}

.report-history-version-provenance h4,
[data-report-history-older-versions] h3 {
  color: var(--primary);
  font-size: 12px;
  margin: 0;
}

.report-history-version-provenance p {
  margin: 0;
}

.report-history-version-provenance dl {
  display: grid;
  gap: 7px;
  margin: 2px 0 0;
}

.report-history-version-provenance dl > div {
  display: grid;
  gap: 2px;
}

.report-history-version-provenance dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.report-history-version-provenance dd {
  color: var(--ink);
  font-size: 11px;
  line-height: 1.35;
  margin: 0;
  overflow-wrap: anywhere;
}

.report-history-version-provenance dd span {
  display: block;
}

.report-history-version-provenance code {
  font-size: 10px;
  white-space: normal;
}

[data-report-history-older-versions] ul {
  display: grid;
  gap: 6px;
  list-style: none;
  padding: 0;
}

.report-history-workspace .report-client-artifact-primary {
  margin-top: 22px;
}

.report-prepared-file {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 3px;
  padding: 12px 0;
}

.report-prepared-file small {
  color: var(--muted);
}

.report-mark-sent-dialog input[type="datetime-local"] {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  min-height: 44px;
  padding: 10px 12px;
}

.report-source-changed-ack {
  align-items: start;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: 8px;
  color: var(--warning-text);
  display: grid;
  gap: 10px;
  grid-template-columns: 22px minmax(0, 1fr);
  padding: 12px;
}

.report-source-changed-ack[hidden] {
  display: none;
}

.report-source-changed-ack input {
  height: 20px;
  margin: 1px 0 0;
  width: 20px;
}

.report-history-table td strong,
.report-history-table td small {
  display: block;
}

.report-history-table td small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  margin-top: 3px;
}

.report-register-context,
.report-register-empty {
  color: var(--muted);
  font-size: 13px;
  margin: 18px 0 0;
}

.report-register-state {
  align-content: start;
  display: grid;
  gap: 16px;
  min-height: 208px;
  padding: 18px 0;
}

.report-register-state-message {
  color: var(--muted);
  margin: 0;
}

.report-register-state.is-error .report-register-state-message {
  color: var(--danger);
}

.report-register-skeleton {
  display: grid;
  gap: 10px;
}

.report-register-skeleton span {
  background: color-mix(in srgb, var(--line) 64%, var(--surface));
  border-radius: 4px;
  display: block;
  height: 44px;
}

.report-register-table {
  min-width: 920px;
}

.report-register-table th:nth-child(1) { width: 31%; }
.report-register-table th:nth-child(2) { width: 17%; }
.report-register-table th:nth-child(3) { width: 16%; }
.report-register-table th:nth-child(4) { width: 18%; }
.report-register-table th:nth-child(5) { width: 18%; }

.report-register-table [data-report-register-row]:focus-visible,
.report-register-card-summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

.report-history-status.is-sent_locked {
  color: var(--success-text);
}

.report-history-status.is-replaced {
  color: var(--warning-text);
}

.report-history-status.is-withdrawn,
.report-history-status.is-unavailable {
  color: var(--danger);
}

.report-register-reason {
  max-width: 32ch;
}

/* Owner decision 2026-08-02 #4: prepared (Concept) reports the database chose to show
   this project member, sitting above the sent-gated register. Muted and dashed so it
   reads as not-yet-sent rather than as an official version. */
.report-register-drafts {
  border: 1px dashed var(--line);
  border-radius: 12px;
  margin-bottom: 20px;
  padding: 2px 16px 14px;
}

.report-register-drafts .report-register-context {
  font-weight: 600;
}

.report-register-drafts .report-history-status.is-draft {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  padding: 3px 10px;
}

.report-register-details-row {
  background: color-mix(in srgb, var(--surface) 76%, var(--background));
}

.report-register-file-action-row > td {
  border-bottom: 1px solid var(--line);
  padding: 6px 18px 12px;
}

.report-register-details-row > td {
  border-left: 4px solid var(--primary);
  padding: 16px 18px;
}

.report-register-forensic {
  display: grid;
  gap: 12px 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.report-register-forensic > div,
.report-register-card-overview > div {
  min-width: 0;
}

.report-register-forensic dt,
.report-register-card-overview dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.report-register-forensic dd,
.report-register-card-overview dd {
  color: var(--ink);
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.report-register-file-name {
  color: var(--ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.report-register-download {
  color: var(--primary);
  font-weight: 700;
  margin-top: 14px;
}

.report-register-file-action-row .report-register-download {
  display: inline-block;
  margin-top: 0;
}

.report-register-provenance-list {
  display: grid;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.report-register-provenance-list li {
  display: grid;
  gap: 2px;
}

.report-register-provenance-list time,
.report-register-provenance-list span {
  color: var(--muted);
  font-size: 12px;
}

.report-register-cards {
  display: none;
}

.report-lifecycle-list {
  display: grid;
  gap: 11px;
}

.report-lifecycle-item {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: 22px minmax(0, 1fr);
}

.report-lifecycle-marker {
  border: 5px solid var(--line);
  border-radius: 50%;
  height: 18px;
  margin-top: 2px;
  width: 18px;
}

.report-lifecycle-item.is-complete .report-lifecycle-marker {
  border-color: #276749;
}

.report-lifecycle-item.is-current .report-lifecycle-marker {
  border-color: var(--primary);
}

.report-lifecycle-item p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
}

.report-lifecycle-item strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.report-boundary {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 12px;
  padding: 14px 16px;
}

.report-boundary span {
  color: var(--muted);
  font-size: 13px;
}

.footer-note {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  margin-top: 34px;
  padding-top: 16px;
}

@media (max-width: 1080px) {
  .workspace,
  .split,
  .detail-grid,
  .project-home-hero,
  .project-home-operating-dashboard,
  .project-home-operating-grid,
  .project-home-band1,
  .project-home-progress-lens,
  .project-jira-link-card,
  .integrations-grid,
  .integration-command-grid,
  .report-project-header,
  .report-focus-panel,
  .report-preview-shell,
  .report-client-artifact-primary,
  .report-hero,
  .report-layout,
  .report-layout.evidence,
  .report-layout.history,
  .report-layout.secondary,
  .report-audit-grid {
    grid-template-columns: 1fr;
  }

  .report-workflow-rail {
    border: 1px solid #d9e7e3;
  }

  .report-history-toolbar {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .report-history-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-history-actions {
    grid-column: 1;
    justify-items: start;
    min-width: 0;
  }

  .report-history-actions .report-actions {
    justify-content: start;
  }

  .report-history-actions .report-meta,
  .report-history-actions .report-send-state {
    text-align: left;
  }

  .report-client-artifact-primary .report-workflow-rail {
    position: static;
  }

  .report-artifact-stage-head {
    flex-direction: column;
  }

  .report-history-table {
    grid-template-columns: 1fr;
  }

  body[data-delivery-page="project-detail-sprint-report"] .report-artifact-contract-grid,
  body[data-delivery-page="project-detail-sprint-report"] .report-document-body {
    grid-column: 1;
    grid-row: auto;
  }


  body[data-delivery-page="project-detail-sprint-report"] .report-supporting-inputs {
    grid-template-columns: minmax(0, 1fr);
  }

  .report-audit-grid .report-evidence-panel,
  .report-audit-grid [data-report-lifecycle] {
    grid-column: 1;
  }

  .period-list-head {
    align-items: start;
    flex-direction: column;
  }

  .period-list-head > span {
    text-align: left;
  }

  .report-project-header {
    align-items: start;
  }

  .detail-main {
    grid-row: auto;
  }

  .provider-evidence.compact-source .sync-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .runway-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-home-signals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-home-signal:nth-child(odd) {
    border-left: 0;
  }

  .workflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planning-command-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .save-state {
    justify-self: stretch;
    text-align: center;
  }

  .workflow-link,
  .workflow-link:first-child,
  .workflow-link:last-child {
    border-radius: 8px;
  }
}

@media (max-width: 680px) {
  .report-history-workspace {
    margin-top: 16px;
    padding: 20px 0 24px;
  }

  .report-history-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .report-history-heading [data-report-period-heading] {
    align-self: stretch;
    text-align: left;
  }

  .report-history-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .report-history-context {
    grid-template-columns: minmax(0, 1fr);
  }

  .report-history-picker-group,
  .report-history-picker-group .report-sprint-picker,
  .report-history-picker-group .report-month-picker {
    min-width: 0;
    width: 100%;
  }

  .report-history-picker-group .report-sprint-picker,
  .report-history-picker-group .report-month-picker {
    align-items: stretch;
    flex-direction: column;
  }

  .report-history-picker-group select {
    max-width: 100%;
    width: 100%;
  }

  .report-history-actions {
    grid-column: 1;
  }

  .report-history-actions .report-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .report-history-actions .btn,
  .report-history-actions .primary-action {
    justify-content: center;
    width: 100%;
  }

  .report-history-scroll {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
  }
}

/* ── WP3: shell tier ──────────────────────────────────────────── */
/* The 4-column .topbar grid needs ~1100px to fit its own content (36
   avatar + 200 lockup + 461 nav + ~398 tools + gaps + padding). Between
   761px and 1100px the nav track collapsed - measured at 59px on an iPad
   in portrait - and because .nav is overflow:visible its links painted
   underneath the search field and the toggles. Stack the shell instead:
   identity on row 1, navigation on its own row, tools on row 3. */
@media (max-width: 1099.98px) {
  /* The insets stay in this tier, not just the phone one: a landscape
     iPhone is 852-932px wide and puts a ~59px notch cutout on the side. */
  .topbar {
    align-items: center;
    gap: 14px;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 18px;
    padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right));
    padding-block-start: max(18px, env(safe-area-inset-top));
  }

  .topbar > .user-menu {
    grid-column: 1;
    grid-row: 1;
  }

  .product-lockup {
    grid-column: 2;
    grid-row: 1;
  }

  .nav {
    flex-wrap: wrap;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .topbar-tools {
    display: grid;
    gap: 8px;
    grid-column: 1 / -1;
    grid-row: 3;
    /* 52/44/44 rather than 42/40/40: WP1 grew the icon buttons to 44px
       touch targets, which overflowed the old fixed tracks onto the logo. */
    grid-template-columns: minmax(0, 1fr) minmax(52px, auto) 44px 44px;
    justify-content: stretch;
    width: 100%;
  }

  .global-search,
  .global-search-wrap {
    min-width: 0;
  }

  .global-search input {
    inline-size: 100%;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  /* Measured height of the WP3 phone topbar. Every sticky element that parks
     below it offsets by this, so the number lives in exactly one place. */
  :root {
    --delivery-phone-topbar-h: 123px;
  }

  .project-context-bar {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    min-height: 56px;
    padding: 0 4px;
    top: var(--delivery-chrome-offset);
  }

  .project-context-back span,
  .project-context-bar nav {
    display: none;
  }

  .project-context-bar [data-project-context-position] {
    font-size: 12px;
    white-space: nowrap;
  }

  .project-context-switcher > button {
    padding-inline: 4px;
  }

  .project-detail-tabs {
    flex-wrap: nowrap;
    gap: 14px;
    min-height: 52px;
    padding: 4px 18px 0 4px;
    position: relative;
  }

  .project-detail-tabs::after {
    align-self: stretch;
    background: linear-gradient(to right, transparent, var(--background));
    content: "";
    flex: 0 0 28px;
    margin-left: -28px;
    pointer-events: none;
    position: sticky;
    right: 0;
  }

  .project-detail-tabs .tab {
    min-height: 44px;
  }

  .project-home-band1 {
    grid-template-columns: 1fr;
  }

  .project-home-burn-lens-head {
    align-items: start;
    gap: 4px;
    grid-template-columns: minmax(0, 1fr);
  }

  .project-home-burn-lens {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-home-burn-lens-figure strong {
    font-size: 30px;
  }

  .project-home-runway-sentence strong {
    font-size: 14px;
  }

  .project-home-planning-trend {
    grid-template-columns: repeat(8, minmax(64px, 1fr));
  }

  .team-role-select {
    font-size: 16px;
    max-inline-size: none;
    min-height: 44px;
    width: 100%;
  }

  [data-project-home-team-contacts] .contact-link {
    align-items: center;
    color: var(--primary);
    display: flex;
    min-height: 44px;
    text-decoration: underline;
  }

  .detail-contacts .contact-link {
    align-items: center;
    display: flex;
    min-height: 44px;
  }

  .client-contact-disclosure > summary {
    align-items: center;
    display: flex;
    font-size: 16px;
    min-height: 44px;
  }

  .client-contact-form .log-field > span {
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: none;
  }

  [data-project-home-team-contacts] .compact-list li > span {
    display: grid;
  }

  .page-head {
    align-items: start;
    grid-template-columns: 1fr;
  }

  /* ── WP3: phone topbar ──────────────────────────────────────
     Two rows instead of four (measured 249px before this pass):
     row 1 is identity + tools, row 2 is a single-line scrolling nav
     rail. Flex rather than grid so that at 320px - where the tools
     cluster genuinely cannot share a line with the app switcher - the
     cluster wraps to its own line instead of painting over it. */
  .topbar {
    align-items: center;
    column-gap: 8px;
    display: flex;
    flex-wrap: wrap;
    padding: 12px 16px;
    padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
    padding-block-start: max(12px, env(safe-area-inset-top));
    position: sticky;
    row-gap: 10px;
    top: 0;
    z-index: 55; /* under .impersonation-banner (60) and every dialog */
  }

  /* The "Birdhouse" wordmark is the only item in the header that is a
     label rather than a control, and row 1 is 116px short of holding it
     alongside the avatar and the three tools. The app switcher next to
     it still names the product ("Delivery"), so identity survives. */
  .product-name {
    display: none;
  }

  .product-lockup {
    flex: 0 1 auto;
  }

  /* The Outbirds asset is a full horizontal lockup crushed into 34px:
     the wordmark renders at ~6px cap-height and disappears altogether in
     dark mode, because its fill is hard-coded to the light theme's
     --primary. It also just links to Home, which the nav already does. */
  .header-logo {
    display: none;
  }

  /* Single-row scrolling rail. One DOM node - no duplicated nav - so the
     build's single-match aria-current replacement keeps working. */
  .nav {
    flex: 1 0 100%;
    flex-wrap: nowrap;
    order: 2;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* fade the right edge so a cut-off item reads as scrollable */
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav a {
    flex: 0 0 auto;
  }

  .topbar-tools {
    display: grid;
    gap: 8px;
    grid-template-columns: 44px minmax(52px, auto) 44px;
    margin-inline-start: auto;
    width: auto;
  }

  .btn.global-search-toggle {
    display: inline-flex;
  }

  /* No Cmd key on a phone, and the chip is painted exactly where the UA
     draws ::-webkit-search-cancel-button. */
  .global-search-kbd {
    display: none;
  }

  /* Search collapses to an icon; opening it gives the tools cluster the
     whole width and puts a full-width field to the left of the buttons. */
  .global-search-wrap {
    display: none;
  }

  .topbar[data-search-open] .topbar-tools {
    flex-basis: 100%;
    grid-template-columns: minmax(0, 1fr) 44px minmax(52px, auto) 44px;
    width: 100%;
  }

  .topbar[data-search-open] .global-search-wrap {
    display: block;
    grid-column: 1;
    grid-row: 1;
  }

  /* Side by side, the "ZOEKEN" caption ate ~45% of the field and at 320px
     left a 51px input, so the typed query was clipped. Stack the caption
     above the field instead of dropping it: production HTML may not carry
     placeholder attributes (docs/operations/DELIVERY_PLACEHOLDER_INVENTORY.md),
     so the caption is the only visible label this control has. */
  .topbar[data-search-open] .global-search {
    align-items: stretch;
    flex-direction: column;
    gap: 2px;
    inline-size: 100%;
    max-inline-size: none;
    padding-block: 4px;
  }

  .global-search-panel {
    inline-size: calc(100vw - 36px);
    left: 0;
    right: auto;
  }

  /* ── WP5: shell overlays become bottom sheets ────────────────────
     A desktop dropdown anchored under a control that sits in a 123px
     sticky header leaves a phone-sized panel hanging off the viewport.
     Both panels dock to the bottom edge instead, above the header
     (z-index 55) so the header cannot paint over them. */
  .app-menu,
  .user-menu-panel {
    border-radius: 14px 14px 0 0;
    bottom: 0;
    inset-inline: 0;
    inline-size: 100%;
    max-block-size: 70dvh;
    max-inline-size: none;
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    position: fixed;
    top: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 70;
  }

  /* Keyed off aria-expanded, which the shell toggles already maintain;
     a data-open attribute would never match - nothing writes one. */
  .app-switcher:has(> .app-switcher-button[aria-expanded="true"])::before,
  .user-menu:has(> .btn.icon[aria-expanded="true"])::before {
    background: color-mix(in srgb, var(--text) 45%, transparent);
    content: "";
    inset: 0;
    position: fixed;
    z-index: 69;
  }

  /* Paired with the aria-expanded scrim above: the page behind a sheet
     must not scroll away under the user's finger. */
  body[data-overlay-open] {
    overflow: hidden;
  }

  .project-log-dialog {
    padding: 12px 12px max(12px, env(safe-area-inset-bottom));
  }

  .project-log-dialog-panel {
    inline-size: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }

  .project-log-dialog-head {
    align-items: stretch;
    flex-direction: column;
  }

  /* .nav is deliberately absent: it is a nowrap scrolling rail here. */
  .period,
  .tabs,
  .window-switch,
  .section-head,
  .section-actions,
  .log-section-head {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .section-head {
    align-items: flex-start;
  }

  .workspace {
    padding: 20px 18px 28px;
    padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right));
    padding-block-end: calc(28px + env(safe-area-inset-bottom));
  }

  .integrations-grid > .auth-panel,
  .integrations-grid > .auth-panel .auth-form {
    grid-template-columns: 1fr;
  }

  .report-current-period-facts {
    grid-template-columns: 1fr;
  }

  .preview-grid {
    grid-template-columns: 1fr;
  }

  .preview-block ul {
    padding-left: 14px;
  }

  .report-current-period-facts div,
  .report-current-period-facts div:nth-child(odd),
  .report-current-period-facts div:nth-child(-n + 2) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .report-current-period-facts div:first-child {
    border-top: 0;
  }

  /* MK-62 pattern C: `.metrics` and `.project-home-kpis` have left this
     list — a number strip states its columns once, in `.figure-strip`
     (`.t-stats` was retired by S1, 2026-08-12). */
  .provider-evidence.compact-source .sync-list,
  .runway-head,
  .runway-facts,
  .project-home-progress-lens,
  .project-home-signals,
  .project-operating-metrics,
  .project-operating-sources {
    grid-template-columns: 1fr;
  }

  .project-home-signal,
  .project-home-signal:nth-child(odd) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .project-home-signal:first-child {
    border-top: 0;
  }

  .project-home-status {
    justify-content: flex-start;
  }

  .home-focus {
    justify-content: flex-start;
  }

  .workflow-grid {
    grid-template-columns: 1fr;
  }

  .planning-command-bar,
  .project-filter-panel,
  .project-filter-more-body,
  .resource-filter-builder {
    grid-template-columns: 1fr;
  }

  .resource-filter-save {
    grid-template-columns: 1fr;
  }

  /* ── WP5: "More filters" becomes a bottom sheet ──────────────────
     Inline, the disclosure expanded ~611px of chrome and pushed the
     project list clean off the screen, so the user filtered blind and
     had no way to confirm or dismiss. */
  .project-filter-more[open] .project-filter-more-body {
    background: var(--surface);
    border-radius: 16px 16px 0 0;
    bottom: 0;
    box-shadow: 0 -8px 32px rgb(0 0 0 / 0.18);
    inset-inline: 0;
    margin-top: 0;
    max-block-size: 78dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    position: fixed;
    -webkit-overflow-scrolling: touch;
    z-index: 40;
  }

  .project-filter-sheet-foot {
    background: var(--surface);
    /* The bar floats above the tail of the scrolling filter list, so it needs
       an edge of its own or the chips underneath read as clipped. */
    border-top: 1px solid var(--line);
    bottom: 0;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr auto;
    padding-top: 12px;
    position: sticky;
  }

  /* Native checkboxes render at 13x13px - far under the touch minimum -
     so the whole label becomes the target instead. */
  .project-type-filters label {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 6px;
    min-height: 44px;
    padding: 0 10px;
  }

  .project-type-filters label:has(input:checked) {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
  }

  .project-type-filters input[type="checkbox"] {
    accent-color: var(--primary);
  }

  /* WP6: segmented rather than a ragged two-line chip wrap at 320px. */
  .project-status-filter {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, 1fr);
  }

  /* The base chip is nowrap, which in a rigid 1fr track would push the
     document sideways at 320px; inside the segment it wraps instead. */
  .project-status-filter .filter-chip {
    border-radius: 0;
    font-size: clamp(8px, 2.5vw, 11px);
    margin-left: -1px;
    padding-inline: 6px;
    text-align: center;
    white-space: normal;
  }

  .project-status-filter .filter-chip:first-child {
    border-radius: 8px 0 0 8px;
    margin-left: 0;
  }

  .project-status-filter .filter-chip:last-child {
    border-radius: 0 8px 8px 0;
  }

  /* WP6: "Add manual project" is a rare admin action that was rendered as a
     full-width primary block above the search field. */
  .section-head {
    align-items: start;
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .section-actions .btn.primary {
    background: transparent;
    border-color: var(--line);
    color: var(--primary);
  }

  /* ── WP6: Projects overview becomes a record list ─────────────
     Eleven tracks in a 352px window meant nine operational columns
     were only reachable through an undiscoverable 4.1x horizontal
     scroll. The row keeps all eleven cells - only the layout changes. */
  .projects-overview-table {
    border: 0;
    border-radius: 0;
    border-top: 1px solid var(--line);
    overflow-x: visible;
  }

  .project-overview-row.head {
    display: none;
  }

  /* MK-62 S1: the phone-tier row layout that used to live here (a two-track
     identity/number grid with hand-placed grid-column assignments) is gone.
     The Projects table now switches shape on its OWN width through the
     .t-records container query, and that one implementation serves phone,
     tablet and narrow desktop alike. Leaving these rules behind made the
     card form sprout an implicit second column. */

  /* The sort control is revealed by the .t-records container query, not by a
     viewport band: it has to be reachable at EVERY width where the column
     headers are hidden, and those two widths are the same width. */

  .row,
  .row.head,
  .health-row,
  .detail-row,
  .detail-row.head {
    grid-template-columns: 1fr;
  }

  .detail-team .detail-row,
  .detail-team .detail-row.head {
    grid-template-columns: 1fr;
  }

  .row.head,
  .detail-row.head {
    display: none;
  }

  .planning-board {
    min-width: 980px;
  }

  .planning-desktop-workspace {
    display: none;
  }

  .planning-mobile-workspace {
    display: block;
  }

  .year-grid {
    grid-template-columns: repeat(4, minmax(48px, 1fr));
  }

  .workflow-steps,
  .preview-grid,
  .log-form {
    grid-template-columns: 1fr;
  }

  .report-evidence-table,
  .report-evidence-table thead,
  .report-evidence-table tbody,
  .report-evidence-table tr,
  .report-evidence-table th,
  .report-evidence-table td {
    display: block;
  }

  .report-evidence-table thead {
    display: none;
  }

  .report-evidence-table tr {
    border-top: 1px solid var(--line);
    padding: 10px 0;
  }

  .report-evidence-table tr:first-child {
    border-top: 0;
  }

  .report-evidence-table td {
    border-top: 0;
    padding: 3px 0;
  }

  .report-evidence-table td:nth-child(2)::before {
    content: "Source: ";
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .report-evidence-table td:nth-child(3)::before {
    content: "Status: ";
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .report-evidence-table td:nth-child(4)::before {
    content: "Owner: ";
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }

  /* MK-62 S4: the WP1 stacked-record-label rule used to live here — a column
     key drawn by CSS out of a data-label attribute. That text could not be
     selected, never reached the accessibility tree, and only reached Dutch
     because a second runtime pass rewrote the attribute. Every table it
     served now carries a real translated <span class="t-key">, so the rule
     and the class it hung on are deleted rather than renamed. */

  /* Empty grid cells (spacers) must not leave phantom gaps. */
  .detail-row.t-records > span:empty {
    display: none;
  }

  /* MK-62 S3: the generic `.t-stack` card form used to live here. It was the
     shared half of the rejected mechanism — the shape that made a real table
     display:block so `.stacked-labels`' `content: attr(data-label)` had
     somewhere to draw. Its last two users, the Jira progress tables and the
     project log tables, are `.t-records` now, so the shape is stated per
     table with the geometry the table's own copy needs. */

  /* MK-62 S7: the Jira progress card form used to live here, in the 760px
     viewport band. These three tables sit in a `.detail-panel` inside the
     two-column Jira workspace grid, so their scroller is about 200px
     narrower than the viewport — and the viewport band flipped them back to
     table form while their own scroller was still far too narrow. Measured
     on a served dist: at a 768px viewport an 880px table sat in a 670px
     scroller, 210px of sideways scroll with every column key hidden. The
     shape now hangs off the scroller's own width — see the @container block
     below. */

  /* ── WP7.1: Team & contacts hour cells ──────────────────────── */
  /* The collapsed row used to read as the bare sequence "240h / 450h / 690h"
     with no way to tell planned from actual from total. Three short numeric
     values read better label-left / value-right than stacked. MK-62 S4: the
     selector matched a data-label ATTRIBUTE, so it stopped applying the
     moment the attribute went; it keys off the real .t-key span now. */
  .detail-row.t-records > span:not(.t-name):not(:empty) {
    align-items: baseline;
    column-gap: 12px;
    display: grid;
    grid-template-columns: minmax(96px, auto) 1fr;
  }

  .detail-row.t-records > span:not(.t-name) > .t-key {
    color: var(--muted);
    display: inline-block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* The role select is a control, not a short number: it gets the key above
     it and the full width below, and keeps its 44px target. */
  .detail-row.t-records > .team-role-control {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ── WP7.2: client contacts ─────────────────────────────────── */
  .compact-list span {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* Padding, not line-height: line-height would misalign the baseline against
     the 13px role text sharing the line. */
  .contact-link {
    padding-block: 12px;
  }

  /* MK-62 S3: the project log card form used to live here, in the phone
     media query. Measured on a served dist it never rendered: at 760px and
     below `.project-log .log-board { display: none }` replaces the whole
     desktop board with the MK-52 phone record list, so every one of these
     rules was dead. The card form now hangs off the table's OWN width
     instead — see the @container block below, which puts it exactly where
     the columns stop fitting. */

  /* ── WP7.4: log summary tiles and filters ───────────────────── */
  .log-filter .type-chip span {
    font-size: 14px;
    min-height: 44px;
    padding: 10px 14px;
  }

  .log-filter-search {
    flex-basis: 100%;
    min-height: 44px;
  }

  /* ── WP7.5: Jira progress tables ────────────────────────────── */
  /* MK-62 S7: `.jira-progress-table { min-width: 0 }` used to live here too.
     It is part of the card form, so it moved into the container query with
     the rest — a viewport band cannot tell whether these tables are in a
     page-wide panel or beside a sidebar, and their scroller can. */

  /* MK-62 S2: a rule hiding the Sprint Goal cell in the card form used to live
     here. Hiding it was the data-label era's answer to a crowded card, but the
     sprint goal is written nowhere else in the record, so hiding it lost the
     value outright. Under pattern A a column changes shape, it never
     disappears — the goal now carries its own key. */

  .progress-compare,
  .progress-compare-track,
  .divergence-bar,
  .divergence-track {
    min-width: 0;
  }

  /* Keep the desktop register table discoverable at narrow tablet widths.
     Phones switch to the card renderer below. */
  .report-history-scroll {
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    scrollbar-width: thin;
  }
}

/* ── MK-62 pattern A · Jira progress .t-records ───────────────────────
   Sprints, snapshots and epics are one record per row. All three tables sit
   in a `.detail-panel` inside the two-column Jira workspace grid, so the
   scroller is roughly 200px narrower than the viewport — which is exactly
   why the flip cannot be a viewport number. 879px is the width below which
   `.log-table`'s 880px column minima stop fitting, measured on a served
   dist. The keys are real translated <span class="t-key"> DOM, never
   content: attr(). */
.table-scroll:has(> .jira-progress-table) {
  container-name: tbl;
  container-type: inline-size;
  min-width: 0;
}

@container tbl (max-width: 879px) {
  .jira-progress-table.t-records {
    display: block;
    min-width: 0;
  }

  .jira-progress-table.t-records thead {
    display: none;
  }

  /* auto-fit: two cards side by side when the panel is wide enough, one when
     it is not. The min() keeps the 280px card floor from becoming a floor on
     the SCROLLER — a 320px phone gives this panel 250px, and a bare
     minmax(280px, 1fr) made every card overflow it by 30px. */
  .jira-progress-table.t-records tbody {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    min-width: 0;
    padding: 10px 0;
  }

  .jira-progress-table.t-records tr {
    background: var(--surface-translucent);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-sizing: border-box;
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    padding: 6px 0 8px;
  }

  .jira-progress-table.t-records td {
    align-content: start;
    border: 0;
    box-sizing: border-box;
    column-gap: 12px;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    min-width: 0;
    padding: 5px 14px;
  }

  .jira-progress-table.t-records .t-key {
    color: var(--muted);
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.9;
    text-transform: uppercase;
  }

  /* "No Jira sprint" / "Not measured" are whole-card sentences, not a
     key/value pair — the one cell spans the card. */
  .jira-progress-table.t-records .jira-progress-state-row td {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The progress bar is the widest thing in a card; without this it keeps
     its intrinsic track width and pushes the card back out. The viewport
     band used to do this, and stopped doing it above 760px — which is
     precisely where the card form now still applies. */
  .jira-progress-table.t-records .progress-compare,
  .jira-progress-table.t-records .progress-compare-track {
    min-width: 0;
  }

  /* D-7 redesigned epic table: the divergence bar is the widest cell
     content here too, same reasoning as .progress-compare above it. */
  .jira-progress-table.t-records .divergence-bar,
  .jira-progress-table.t-records .divergence-track {
    min-width: 0;
  }
}

/* ── MK-62 pattern A · project log .t-records ─────────────────────────
   Tasks, decisions and risks are one record per row. The scroller measures
   ITSELF, so the card form appears exactly where the eight columns stop
   fitting their 880px minimum instead of at a viewport number that has
   nothing to do with this panel's width. Below 760px the whole board is
   replaced by the MK-52 phone record list, so the band this actually serves
   is the tablet one — the band where the board used to push an 880px table
   through a 704px column. The keys are real translated
   <span class="t-key"> DOM, never content: attr(). */
.table-scroll:has(> .project-log-table) {
  container-name: tbl;
  container-type: inline-size;
  min-width: 0;
}

@container tbl (max-width: 879px) {
  .project-log-table.t-records {
    display: block;
    min-width: 0;
  }

  .project-log-table.t-records thead {
    display: none;
  }

  /* auto-fit: two cards side by side on a tablet, one when the panel is
     narrower. min() keeps the 280px card floor off the scroller itself. */
  .project-log-table.t-records tbody {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    min-width: 0;
    padding: 10px;
  }

  .project-log-table.t-records tr {
    background: var(--surface-translucent);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-sizing: border-box;
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    padding: 6px 0 8px;
  }

  .project-log-table.t-records td {
    align-content: start;
    border: 0;
    box-sizing: border-box;
    column-gap: 12px;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    min-width: 0;
    padding: 5px 14px;
  }

  /* the title cell is the head of the card: no key, full width */
  .project-log-table.t-records td.t-name {
    font-weight: 700;
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 8px;
  }

  .project-log-table.t-records .t-key {
    color: var(--muted);
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.9;
    text-transform: uppercase;
  }

  /* everything tappable inside a card keeps its 44px — the cell that owns a
     control, and the controls themselves, which the table form never had to
     size because the whole row was tall enough. */
  .project-log-table.t-records td.t-tap {
    min-height: 44px;
  }

  .project-log-table.t-records td.t-tap .btn,
  .project-log-table.t-records td.t-tap .check-label {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }

  .project-log-table.t-records td.t-tap .log-row-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .project-log-table.t-records td.t-tap .check-label {
    padding-inline: 10px;
  }
}

/* MK-17: a phone is a week-scoped planning triage surface, not a squeezed grid. */
.planning-mobile-workspace {
  display: none;
}

@media (max-width: 760px) {
  .planning-mobile-workspace {
    background: var(--surface);
    border-top: 1px solid var(--line);
    display: block;
    margin: 0 -16px;
  }

  .planning-mobile-controls {
    align-items: center;
    background: var(--background);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 8px;
    justify-content: space-between;
    padding: 10px 16px;
    position: sticky;
    top: 0;
    z-index: 5;
  }

  .planning-mobile-controls h2 {
    color: var(--text);
    font-size: 20px;
    font-weight: 900;
    margin: 0;
  }

  .planning-mobile-loading {
    background: var(--background);
    display: grid;
    gap: 10px;
    min-height: 260px;
    padding: 20px 16px;
  }

  .planning-mobile-loading strong { color: var(--text); font-size: 20px; font-weight: 900; }
  .planning-mobile-loading p { color: var(--muted); font-size: 14px; margin: 0 0 8px; }
  .planning-mobile-loading span { background: linear-gradient(90deg, color-mix(in srgb, var(--muted) 12%, var(--surface)), color-mix(in srgb, var(--muted) 5%, var(--surface)), color-mix(in srgb, var(--muted) 12%, var(--surface))); border-radius: 8px; min-height: 64px; }

  .planning-mobile-controls [role="group"] {
    border: 1px solid var(--line);
    border-radius: 9px;
    display: flex;
    overflow: hidden;
  }

  .planning-mobile-controls button {
    background: var(--surface);
    border: 0;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    min-height: 44px;
    padding: 0 12px;
  }

  .planning-mobile-controls button + button {
    border-left: 1px solid var(--line);
  }

  .planning-mobile-controls button.is-active {
    background: var(--primary);
    color: var(--primary-foreground);
  }

  .planning-mobile-weekstrip {
    background: var(--background);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 10px 16px 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .planning-mobile-weekchip {
    background: var(--surface);
    border: 1px solid var(--line);
    border-bottom: 3px solid var(--line);
    border-radius: 10px;
    color: var(--muted);
    display: grid;
    flex: 0 0 56px;
    font: inherit;
    gap: 4px;
    justify-items: center;
    min-height: 72px;
    min-width: 56px;
    padding: 8px 4px;
    position: relative;
    scroll-snap-align: center;
  }

  .planning-mobile-weekchip strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
  }

  .planning-mobile-weekchip > span {
    border-radius: 6px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    padding: 3px 4px;
  }

  /* D10-A-044/077, LOOP-D10 ruling 3: the same capacity heat as the desktop
     cells, so it uses the same theme-fixed --cap-tint / --status- tokens
     and NEVER the --danger, --warning or --success families. Mobile was the last
     surface still painting heat from the generic status-message tokens, and
     .neutral was painted --success-bg green -- the a-24 defect: "within
     capacity" is the quiet default, not a success state. */
  .planning-mobile-weekchip.over > span { background: var(--cap-over-tint); color: var(--status-red); }
  .planning-mobile-weekchip.neutral > span { background: transparent; color: var(--text); }
  .planning-mobile-weekchip.under > span { background: var(--cap-under-tint); color: var(--status-amber); }
  .planning-mobile-weekchip.unknown > span { background: color-mix(in srgb, var(--muted) 15%, var(--surface)); color: var(--muted); }

  /* D10-A-039 regression fix: is-current (today) and [aria-selected] (the
     week you're viewing) used to share this one border+shadow treatment, so
     navigating to a different week left two chips looking identically
     "selected" with no way to tell which one was actually today -- a double
     signal the owner has separately ruled against (D-4, "AI bars/lines...
     they must go"). [aria-selected] keeps the one strong viewing signal
     regardless of is-current; is-current gets its own small dot instead,
     stated in words too via the aria-label suffix (GD-01, no colour alone). */
  .planning-mobile-weekchip[aria-selected="true"] {
    border-bottom-color: var(--primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 36%, transparent);
  }

  .planning-mobile-weekchip.is-current:not([aria-selected="true"])::after {
    background: var(--primary);
    border-radius: 50%;
    content: "";
    height: 6px;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 6px;
  }

  .planning-mobile-weekchip.is-frozen {
    background: color-mix(in srgb, var(--muted) 8%, var(--surface));
    border-style: dashed;
  }

  .planning-mobile-verdict {
    background: var(--background);
    border-bottom: 1px solid var(--line);
    padding: 18px 16px 14px;
  }

  .planning-mobile-verdict strong {
    color: var(--text);
    display: block;
    font-size: 28px;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    letter-spacing: -0.015em;
    line-height: 1.05;
  }

  .planning-mobile-verdict span,
  .planning-mobile-verdict small {
    color: var(--muted);
    display: block;
    line-height: 1.35;
    margin-top: 6px;
  }

  .planning-mobile-verdict span { font-size: 14px; }
  .planning-mobile-verdict small { font-size: 12px; }

  .planning-mobile-resources { border-top: 1px solid var(--line); }

  .planning-mobile-resource {
    align-items: center;
    background: var(--surface);
    border: 0;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    display: grid;
    gap: 3px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 64px;
    padding: 11px 16px 12px;
    text-align: left;
    width: 100%;
  }

  .planning-mobile-resource > span:first-child { min-width: 0; }

  .planning-mobile-resource strong {
    display: block;
    font-size: 17px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .planning-mobile-resource small {
    color: var(--muted);
    display: block;
    font-size: 12px;
    margin-top: 2px;
  }

  .planning-mobile-resource > b {
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
  }

  .planning-mobile-resource.over > b { color: var(--danger-text); }

  .planning-mobile-resource.is-readonly { cursor: default; }

  .planning-mobile-capacity-bar {
    background: color-mix(in srgb, var(--muted) 16%, var(--surface));
    border-radius: 3px;
    display: flex;
    grid-column: 1 / -1;
    height: 6px;
    margin-top: 6px;
    overflow: hidden;
    position: relative;
  }

  .planning-mobile-capacity-bar::after {
    background: var(--text);
    content: "";
    height: 6px;
    left: 50%;
    opacity: 0.55;
    position: absolute;
    top: 0;
    width: 1px;
  }

  .planning-mobile-capacity-bar i { background: color-mix(in srgb, var(--primary) 72%, var(--surface)); }
  .planning-mobile-capacity-bar b { background: var(--danger); }
  .planning-mobile-capacity-bar.is-clipped::before { background: var(--danger); clip-path: polygon(0 0, 100% 50%, 0 100%); content: ""; height: 6px; position: absolute; right: 0; top: 0; width: 5px; z-index: 1; }

  .planning-mobile-expanded {
    background: color-mix(in srgb, var(--primary) 4%, var(--background));
    border-bottom: 1px solid var(--line);
    padding: 4px 16px 14px;
  }

  .planning-mobile-assignment { border-top: 1px solid var(--line); padding: 12px 0; }
  .planning-mobile-assignment:first-child { border-top: 0; }
  .planning-mobile-assignment > strong { display: block; font-size: 15px; font-weight: 700; }
  .planning-mobile-assignment > small { color: var(--muted); display: block; font-size: 12px; margin-top: 2px; }

  .planning-mobile-stepper {
    display: grid;
    gap: 8px;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    margin-top: 10px;
  }

  .planning-mobile-step,
  .planning-mobile-assignment-value {
    align-items: center;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
    border-radius: 9px;
    color: var(--primary);
    display: inline-flex;
    font: inherit;
    font-weight: 900;
    height: 44px;
    justify-content: center;
    padding: 0;
  }

  .planning-mobile-step { font-size: 20px; }
  .planning-mobile-assignment-value { color: var(--text); gap: 6px; padding: 0 10px; }
  .planning-mobile-assignment-value input { appearance: textfield; background: transparent; border: 0; color: inherit; font: inherit; font-size: 16px; font-variant-numeric: tabular-nums; font-weight: 900; min-height: 42px; min-width: 0; text-align: center; width: 100%; }
  .planning-mobile-assignment-value input::-webkit-inner-spin-button,
  .planning-mobile-assignment-value input::-webkit-outer-spin-button { appearance: none; margin: 0; }
  .planning-mobile-assignment-value.is-frozen { background: color-mix(in srgb, var(--muted) 9%, var(--surface)); border-style: dashed; color: var(--muted); }

  /* D10-A-081/082: offline read-only VALUE, not grey-disabled -- the
     stepper buttons drop entirely (absent-beats-disabled) rather than
     sitting there disabled, and the column grid collapses to just the
     value so it does not leave two empty gaps where the buttons were. */
  .planning-mobile-stepper:has([data-planning-mobile-adjust][hidden]) { grid-template-columns: minmax(0, 1fr); }
  .planning-mobile-assignment-value input.is-offline-readonly-value { background: transparent; }
  /* .planning-mobile-step sets its own `display`, which otherwise beats the
     UA stylesheet's `[hidden] { display: none }` (established pattern, see
     the other .foo[hidden] overrides in this file). */
  .planning-mobile-step[hidden] { display: none; }

  .planning-mobile-expanded-total {
    align-items: baseline;
    border-top: 2px solid color-mix(in srgb, var(--primary) 30%, var(--line));
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding-top: 12px;
  }

  .planning-mobile-expanded-total strong { font-size: 20px; font-variant-numeric: tabular-nums; font-weight: 900; }
  .planning-mobile-expanded-total span { color: var(--muted); font-size: 13px; }

  .planning-mobile-spark {
    align-items: flex-end;
    display: flex;
    gap: 4px;
    grid-column: 1 / -1;
    height: 34px;
    margin-top: 7px;
    position: relative;
  }

  .planning-mobile-spark::before { background: var(--text); content: ""; height: 1px; left: 0; opacity: 0.28; position: absolute; right: 0; top: 50%; }
  .planning-mobile-spark i { background: color-mix(in srgb, var(--primary) 55%, var(--surface)); border-radius: 2px 2px 0 0; flex: 1 1 0; min-width: 0; }
  .planning-mobile-spark i.over { background: var(--danger); }
  .planning-mobile-spark i.neutral { background: var(--success-text); }
  .planning-mobile-spark i.under { background: var(--warning-text); }
  .planning-mobile-spark i.is-current { box-shadow: 0 0 0 2px var(--primary); }

  .planning-mobile-desktop-note,
  .planning-mobile-month-summary {
    background: color-mix(in srgb, var(--primary) 5%, var(--surface));
    border-top: 1px solid var(--line);
    padding: 16px;
  }

  .planning-mobile-desktop-note > strong,
  .planning-mobile-month-summary h2 { color: var(--text); display: block; font-size: 15px; font-weight: 900; margin: 0; }
  .planning-mobile-desktop-note > p,
  .planning-mobile-month-summary p { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 6px 0 12px; }
  /* D10-A-039 regression fix: the honest note when the 12-month cap cuts off
     a real, partial 13th month instead of silently dropping it. */
  .planning-mobile-month-truncated { color: var(--muted); font-size: 12px; margin: -8px 0 12px; }

  .planning-mobile-monthroll {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .planning-mobile-monthroll > div { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 2px; justify-items: center; min-height: 52px; padding: 8px 4px; text-align: center; }
  .planning-mobile-monthroll strong { font-size: 11px; font-weight: 900; text-transform: uppercase; }
  .planning-mobile-monthroll span { font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 900; }
  .planning-mobile-monthroll small { color: var(--muted); font-size: 10px; }
  .planning-mobile-monthroll > div.over span { color: var(--danger-text); }
  .planning-mobile-monthroll > div.neutral span { color: var(--success-text); }
  .planning-mobile-monthroll > div.under span { color: var(--warning-text); }
}

/* ── WP7.7: tablet scroll affordance ──────────────────────────── */
/* Between 768 and 1100 the tables still scroll sideways but there is no visual
   cue that they do. Fade the right edge; the phone tier gets the same for the
   report-history ledger above. */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .table-scroll,
  .projects-overview-table,
  .planning-board-scroll,
  .project-detail-planning-grid,
  .report-history-scroll {
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    scrollbar-width: thin;
  }
}

@media (max-width: 767.98px) {
  .report-register .report-history-scroll {
    display: none;
  }

  .report-register-cards {
    display: grid;
    gap: 12px;
    margin-top: 16px;
  }

  .report-register-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    display: grid;
    gap: 12px;
    padding: 16px;
  }

  .report-register-card:hover {
    border-color: color-mix(in srgb, var(--primary) 32%, var(--line));
  }

  .report-register-card.is-active {
    border-color: var(--primary);
    box-shadow: inset 4px 0 0 var(--primary);
  }

  .report-register-card-summary {
    cursor: pointer;
    display: grid;
    gap: 12px;
  }

  .report-register-card-head {
    align-items: start;
    display: flex;
    gap: 10px;
    justify-content: space-between;
  }

  .report-register-version {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
  }

  .report-register-card-overview {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
  }

  .report-register-card-overview small {
    color: var(--muted);
    display: block;
    font-size: 12px;
    margin-top: 2px;
  }

  .report-register-card a {
    color: var(--primary);
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .report-register-card > .report-register-download {
    margin-top: 0;
  }

  .report-register-card-details {
    border-top: 1px solid var(--line);
    padding-top: 14px;
  }

  .report-register-forensic {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* At 320px the topbar tools cluster cannot share a line with the app switcher
   and wraps to its own row, taking the bar from 123px to a measured 177px. */
@media (max-width: 359.98px) {
  :root {
    --delivery-phone-topbar-h: 177px;
  }
}

/* ── Epic ↔ Yoobi activity mapping (Jira Progress tab) ── */
.epic-activity-mapping-section {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.epic-activity-map-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--surface-child);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.epic-activity-map-toggle:hover {
  border-color: var(--primary-soft);
  background: var(--surface-strong);
}
.epic-activity-map-toggle:focus-visible {
  outline: 2.5px solid var(--primary);
  outline-offset: 2px;
}
.epic-activity-map-toggle-caret {
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}
.epic-activity-map-toggle[aria-expanded="true"] .epic-activity-map-toggle-caret {
  transform: rotate(45deg);
}
.epic-activity-map-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.epic-activity-map-toggle-text strong {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.epic-activity-map-toggle-text small {
  font-size: 12px;
  color: var(--muted);
}
.epic-activity-map-panel {
  padding: 16px 2px 4px;
}
.epic-activity-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.epic-activity-count {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.epic-activity-count strong {
  color: var(--text);
}
.epic-activity-status {
  font-size: 12.5px;
  color: var(--success-text);
  font-weight: 600;
}
.epic-activity-assignbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--primary);
  color: var(--background);
  border-radius: 10px;
  padding: 11px 15px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
}
.epic-activity-assignbar-cancel {
  margin-left: auto;
  flex: none;
  border: none;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0.85;
  padding: 2px 4px;
}
.epic-activity-assignbar-cancel:hover {
  opacity: 1;
}
.epic-activity-assignbar-cancel:focus-visible {
  outline: 2.5px solid var(--background);
  outline-offset: 2px;
}
.epic-activity-buckets-wrap {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.epic-activity-tray {
  background: var(--surface-child);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  position: sticky;
  top: 16px;
}
.epic-activity-tray-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
}
.epic-activity-tray-sub {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
}
.epic-activity-tray-chips {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.epic-activity-tray-epic {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: grab;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}
.epic-activity-tray-epic:hover {
  border-color: var(--primary-soft);
  transform: translateY(-1px);
}
.epic-activity-tray-epic:focus-visible {
  outline: 2.5px solid var(--primary);
  outline-offset: 2px;
}
.epic-activity-tray-epic.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.epic-activity-tray-epic-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.epic-activity-tray-epic-name {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.epic-activity-tray-epic-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
}
.epic-activity-allset {
  margin: 0;
  font-size: 12.5px;
  color: var(--success-text);
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  border-radius: 9px;
  padding: 9px 11px;
  text-align: center;
  font-weight: 600;
}
.epic-activity-node-key {
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 5px;
  padding: 2px 6px;
  flex: none;
}
.epic-activity-node-budget {
  font-size: 12px;
  color: var(--muted);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.epic-activity-bucket-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.epic-activity-bucket {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.epic-activity-bucket:focus-visible {
  outline: 2.5px solid var(--primary);
  outline-offset: 2px;
}
.epic-activity-bucket.is-drop-target {
  border-color: var(--primary);
  border-style: dashed;
  background: var(--primary-soft);
}
.epic-activity-bucket-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.epic-activity-bucket-name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.epic-activity-bucket-rolled {
  margin: 9px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.epic-activity-bucket-rolled .epic-activity-pct {
  color: var(--primary);
}
.epic-activity-bucket-split {
  margin-top: 8px;
}
.epic-activity-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  white-space: nowrap;
  flex: none;
}
.epic-activity-chip.auto {
  background: var(--primary-soft);
  border-color: var(--primary-soft);
  color: var(--primary);
}
.epic-activity-chip.manual {
  background: var(--accent-soft);
  border-color: var(--warning-border);
  color: var(--warning-text);
}
.epic-activity-chip.open {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
}
.epic-activity-chip.split {
  background: var(--surface-strong);
  color: var(--primary);
  border-color: var(--primary-soft);
}
.epic-activity-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.epic-activity-bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
}
.epic-activity-pct {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.epic-activity-bucket-items {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.epic-activity-bucket-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-child);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12.5px;
}
.epic-activity-bucket-item-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.epic-activity-bucket-item-share {
  margin-left: auto;
  flex: none;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.epic-activity-bucket-item-remove {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 5px;
  flex: none;
}
.epic-activity-bucket-item-remove:hover {
  color: var(--danger);
}
.epic-activity-bucket-item-remove:focus-visible {
  outline: 2.5px solid var(--primary);
  outline-offset: 1px;
}
.epic-activity-bucket-placeholder {
  flex: 1;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
  border: 1px dashed var(--line);
  border-radius: 9px;
  margin: 9px 0 0;
  min-height: 52px;
  text-align: center;
  padding: 8px;
}
.epic-activity-empty {
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
  margin: 0;
}
@media (max-width: 900px) {
  .epic-activity-buckets-wrap {
    grid-template-columns: 1fr;
  }
  .epic-activity-tray {
    position: static;
  }
}
@media (max-width: 720px) {
  .epic-activity-bucket-grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .epic-activity-tray-epic,
  .epic-activity-bucket,
  .epic-activity-map-toggle,
  .epic-activity-map-toggle-caret {
    transition: none;
  }
}

/* ── Integrations A-v2: verdict-first layout ─────────────────────────── */
.integrations-workspace { display: flex; flex-direction: column; gap: 40px; }

.integrations-verdict { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.integrations-overline { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.integrations-verdict-headline { font-weight: 900; font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -0.02em; line-height: 1.08; margin: 0; max-width: 640px; }
.integrations-verdict-headline[data-integrations-verdict-state="ok"] { color: var(--success-text); }
.integrations-verdict-headline[data-integrations-verdict-state="waiting"] { border-bottom: 2px dashed currentColor; color: var(--muted); padding-bottom: 4px; }
.integrations-verdict-headline[data-integrations-verdict-state="stale"] { color: var(--status-amber, #9a5808); }
.integrations-verdict-headline[data-integrations-verdict-state="bad"] { color: var(--danger-text); }
.integrations-verdict-headline[data-integrations-verdict-state="backoff"] { color: var(--warning-text); font-weight: 700; }
.integrations-verdict-headline[data-integrations-verdict-state="checking"],
.integrations-verdict-headline[data-integrations-verdict-state="unknown"] { color: var(--muted); }
.integrations-verdict-sub { margin: 10px 0 0; font-size: 15px; color: var(--muted); max-width: 580px; }
.integrations-verdict-action { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 300px; text-align: right; }
.integrations-verdict-action small { color: var(--muted); font-size: 12px; }

.integrations-h3 { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; margin: 0 0 4px; display: flex; align-items: baseline; gap: 10px; }
.needs-you-count { font-size: 12px; font-weight: 500; padding: 1px 9px; border-radius: 99px; background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-border); }

/* GD-01/GD-04: no decorative accent rail — the amber signal already lives in
   .needs-you-count and the task titles, so the card itself stays a plain,
   neutral surface. */
.needs-you-task { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.needs-you-task + .needs-you-task { margin-top: 10px; }
/* MK-47 fault (A)+(B): one row pattern across every task block — title above,
   affordance beneath, both left-aligned. The old two-column flex parked the
   affordance ~1240px from its own title at 1280px and gave it no touch target.
   The affordance stays a <span> inside <summary> so the whole summary remains
   the click target (a nested <button> would swallow the toggle), but it carries
   real button chrome and a 44px minimum height. */
.needs-you-task summary { list-style: none; cursor: pointer; display: grid; justify-items: start; gap: 10px; padding: 16px 18px 16px 22px; }
.needs-you-task summary::-webkit-details-marker { display: none; }
.needs-you-task-title { display: flex; flex-direction: column; gap: 2px; }
.needs-you-task-title strong { font-weight: 700; font-size: 15px; }
.needs-you-task-title small { color: var(--muted); font-size: 13px; }
.needs-you-open-hint { align-items: center; background: transparent; border: 1px solid var(--line); border-radius: 8px; box-sizing: border-box; color: var(--primary); display: inline-flex; font-size: 13px; font-weight: 900; justify-content: center; justify-self: start; min-height: 44px; padding: 7px 14px; white-space: nowrap; }
.needs-you-open-hint::after { content: " ▾"; font-size: 11px; }
.needs-you-task[open] .needs-you-open-hint::after { content: " ▴"; }
.needs-you-task[open] { background: var(--surface-strong); border: 1px solid var(--line); }
.needs-you-panel { padding: 4px 22px 20px; display: flex; flex-direction: column; gap: 14px; }

/* MK-50 identity queue. Same three-column row pattern as the rest of the page —
   who, state, action — separated by the zebra token rather than per-row boxes,
   and with no coloured rail (GD-01/GD-04). The three states separate on the
   chip's own fill/border AND on the sentence beneath it, so the row still reads
   in greyscale. */
.identity-rows { display: flex; flex-direction: column; }
.identity-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: 12px 18px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); }
.identity-rows > .identity-row:first-child { border-top: 0; }
.identity-rows > .identity-row:nth-child(even) { background: var(--row-tint); }
.identity-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.identity-who strong { font-size: 14px; font-weight: 700; }
.identity-who small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.identity-state { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.identity-state strong { align-self: flex-start; font-size: 12px; font-weight: 500; padding: 1px 9px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); }
.identity-state small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.identity-state-proposal strong { background: var(--status-amber-fill); border-color: var(--status-amber-line); color: var(--status-amber); }
.identity-state-unlinked strong { background: var(--status-red-fill); border-color: var(--status-red-line); color: var(--status-red); }
.identity-state-linked strong { background: var(--status-green-fill); border-color: var(--status-green-line); color: var(--status-green); }
.identity-state-no-resource strong { color: var(--st-neutral); }
.identity-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
/* Yoobi spells names "Vries, Sanne de", so the search lives in the row: pointing
   somewhere else to fix a link means it does not get fixed (MK-50 annotation 4). */
.identity-combobox { min-width: 200px; min-height: 44px; font-size: 16px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); }
.identity-actions .btn { min-height: 44px; min-width: 132px; }
.identity-feedback { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-strong); font-size: 13px; }
.identity-settled > summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; font-size: 13px; color: var(--primary); }
.identity-settled > summary::-webkit-details-marker { display: none; }
.identity-settled > summary::after { content: " ⌄"; margin-left: 6px; }
.identity-settled[open] > summary::after { content: " ⌃"; }

/* Below 760px the row stacks in the reading order the MK-50 mobile frame draws:
   who → state → action, with full-width controls. */
@media (max-width: 760px) {
  .identity-row { grid-template-columns: minmax(0, 1fr); }
  .identity-actions { justify-content: flex-start; }
  .identity-combobox { min-width: 0; width: 100%; }
}

/* MK-62 · "Your data" is one record per source. The panel measures ITSELF, so
   the card form appears exactly where the six columns stop fitting their own
   declared minimum instead of at a viewport number that knows nothing about
   this panel's width. Below 760px the whole desktop body is replaced by the
   MK-52 mobile fallback, so the band this serves is the tablet one. */
.your-data-rows { border-top: 1px solid var(--line); container-name: tbl; container-type: inline-size; min-width: 0; }
/* The action column is a FIXED track: each row is its own grid, and a
   content-sized (auto) track resolves differently for rows without a button,
   shifting every other column out of alignment. */
.your-data-row { display: grid; grid-template-columns: minmax(210px, 1.3fr) minmax(180px, 1.1fr) minmax(130px, 0.9fr) minmax(120px, 0.9fr) 140px 112px; gap: 14px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--line); min-width: 0; }
.your-data-row.t-records > * { min-width: 0; }
.your-data-row .btn { justify-self: end; }
.your-data-name { display: flex; flex-direction: column; gap: 1px; }
.your-data-name strong { font-weight: 700; font-size: 14.5px; }
.your-data-name small { color: var(--muted); font-size: 12.5px; }
.your-data-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.your-data-row .t-key { font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.your-data-cell-value { font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.your-data-state { align-self: flex-start; display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 500; padding: 3px 11px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); max-width: 100%; }
.your-data-state[data-your-data-state-kind="fresh"] { color: var(--success-text); border-color: var(--success-border); background: var(--success-bg); }
.your-data-state[data-your-data-state-kind="stale"] { color: var(--warning-text); border-color: var(--warning-border); background: var(--warning-bg); }
.your-data-request-status { color: var(--muted); font-size: 12.5px; }
.your-data-request-status:empty { display: none; }

.integrations-thresholds { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 22px; }
.thresholds-group { margin-top: 14px; }
.thresholds-group + .thresholds-group { margin-top: 22px; }
.thresholds-group-head h4 { font-size: 13.5px; font-weight: 700; margin: 0 0 8px; }
.thresholds-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.thresholds-row input { width: 88px; height: 32px; font-size: 13.5px; font-variant-numeric: tabular-nums; text-align: right; }
.thresholds-subnote { color: var(--muted); font-size: 12.5px; margin-top: 14px; }
.thresholds-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.thresholds-status { color: var(--muted); font-size: 12.5px; margin-top: 8px; }
.thresholds-status:empty { display: none; }

.yoobi-coverage { border-top: 2px solid var(--ink); padding-top: 22px; }
.integrations-section-head { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
.integrations-section-head > div { min-width: 0; }
.yoobi-coverage-scroll { margin-top: 18px; overflow-x: auto; overscroll-behavior-inline: contain; }
.yoobi-coverage-year { display: grid; grid-template-columns: 72px max-content; min-width: 620px; }
.yoobi-coverage-year + .yoobi-coverage-year { border-top: 1px solid var(--line); }
.yoobi-coverage-year-label { align-items: center; background: var(--surface); display: flex; font-size: 13px; inset-inline-start: 0; padding-inline: 4px 14px; position: sticky; z-index: 1; }
.yoobi-coverage-months { display: grid; gap: 6px; grid-template-columns: repeat(12, 40px); padding-block: 8px; }
.yoobi-coverage-cell { align-items: center; block-size: 44px; box-sizing: border-box; color: var(--muted); display: inline-flex; font-size: 12px; font-variant-numeric: tabular-nums; inline-size: 40px; justify-content: center; }
.yoobi-coverage-cell.complete { background: var(--success-text); color: var(--success-bg); }
.yoobi-coverage-cell.missing,
.yoobi-coverage-cell.partial { background: var(--surface); border: 2px solid var(--status-amber, #9a5808); color: var(--status-amber, #9a5808); cursor: pointer; font-weight: 700; }
.yoobi-coverage-cell.partial { border-color: var(--danger-text); color: var(--danger-text); }
.yoobi-coverage-cell.before-start { border: 1px dotted var(--muted); color: var(--muted); }
.yoobi-coverage-cell.is-selected { box-shadow: 0 0 0 3px var(--ink); }
.yoobi-coverage-cell.missing:hover,
.yoobi-coverage-cell.partial:hover { border-color: var(--ink); color: var(--ink); }
.yoobi-coverage-cell:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

.sync-repair-drawer { background: var(--surface); border: 1px solid var(--ink); box-shadow: -12px 12px 0 var(--surface-strong); display: flex; flex-direction: column; gap: 18px; inset-block: 96px auto; inset-inline-end: max(24px, calc((100vw - 1240px) / 2)); max-block-size: 78dvh; overflow: auto; padding: 20px; position: fixed; width: min(420px, calc(100vw - 32px)); z-index: 50; }
.sync-repair-drawer[hidden] { display: none; }
@media (min-width: 761px) {
  .integrations-workspace:has(.sync-repair-drawer:not([hidden])) { padding-inline-end: 436px; }
}
.sync-repair-drawer-head { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; }
.sync-repair-drawer-head .btn.icon { flex: 0 0 auto; }
.sync-repair-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sync-repair-chip { background: var(--surface-strong); border: 1px solid var(--ink); border-radius: 999px; color: var(--text); font: inherit; font-size: 14px; min-block-size: 44px; padding: 8px 12px; }
.sync-repair-chip::after { content: " ×"; }
.sync-repair-option { align-items: center; display: flex; font-size: 14px; gap: 10px; }
.sync-repair-option input { flex: 0 0 auto; }
.sync-repair-status { color: var(--muted); font-size: 13px; margin: 0; }
.sync-repair-status:empty { display: none; }
.sync-repair-footer { background: var(--surface); border-top: 1px solid var(--line); bottom: 0; display: grid; gap: 10px; margin: auto -20px -20px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); position: sticky; }
.sync-repair-footer p { font-size: 14px; font-weight: 700; margin: 0; }
.sync-repair-footer small { color: var(--muted); font-size: 12.5px; }

@media (max-width: 760px) {
  .yoobi-coverage-year { grid-template-columns: 60px max-content; min-width: 580px; }
  .sync-repair-drawer { inset: auto 16px calc(72px + env(safe-area-inset-bottom)); max-block-size: 78dvh; width: auto; }
}

.sync-log-list { border-top: 2px solid var(--ink); }
.sync-log-run { border-bottom: 1px solid var(--line); }
.sync-log-run > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 110px minmax(150px, 1.2fr) minmax(200px, 1.6fr) auto; gap: 14px; align-items: baseline; padding: 12px 4px; font-size: 13.5px; }
.sync-log-run > summary::-webkit-details-marker { display: none; }
.sync-log-run > summary:hover { background: var(--surface-translucent); }
.sync-log-time { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.sync-log-what { display: flex; flex-direction: column; gap: 1px; }
.sync-log-what strong { font-weight: 500; font-size: 13.5px; }
.sync-log-what small { color: var(--muted); font-size: 12px; }
.sync-log-counts { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sync-log-state { font-weight: 500; font-size: 12.5px; white-space: nowrap; text-align: right; }
.sync-log-state.ok { color: var(--success-text); }
.sync-log-state.warn { color: var(--warning-text); }
.sync-log-state.bad { color: var(--danger-text); }
.sync-log-detail { padding: 4px 4px 18px 118px; }
.sync-log-group .sync-log-detail { padding-left: 12px; }
.sync-log-jobs { border-top: 1px solid var(--line); max-width: 720px; }
.sync-log-job { display: grid; grid-template-columns: 22px minmax(190px, 1.1fr) minmax(200px, 1.6fr); gap: 10px; padding: 8px 0; border-bottom: 1px dotted var(--line); font-size: 12.5px; align-items: baseline; }
.sync-log-job-icon { font-weight: 700; }
.sync-log-job.ok .sync-log-job-icon { color: var(--success-text); }
.sync-log-job.bad .sync-log-job-icon { color: var(--danger-text); }
.sync-log-job.skip .sync-log-job-icon { color: var(--muted); }
.sync-log-job-name { font-weight: 500; }
.sync-log-job-detail { color: var(--muted); font-variant-numeric: tabular-nums; }
.sync-log-job.bad .sync-log-job-detail { color: var(--danger-text); }
/* GD-01/GD-04: no coloured vertical rail. The recovered/failed distinction is
   carried by the heading tone below and, decisively, by the copy — a recovered
   run prints "resolved itself" under a Resolved heading, a failed one prints
   numbered steps under "Steps to resolve" — so the 3px edge was the only part
   of the treatment that said nothing the words did not. A rule above separates
   the breakdown from the job list, the same way MK-28's totals row does. */
.sync-log-why { max-width: 720px; margin-top: 14px; border-top: 1px solid var(--line); padding: 12px 0 2px; }
.sync-log-why h4 { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 12px 0 3px; }
.sync-log-why h4:first-child { margin-top: 0; }
.sync-log-why.warn h4 { color: var(--warning-text); }
.sync-log-why.bad h4 { color: var(--danger-text); }
.sync-log-why p { margin: 0; font-size: 13px; }
.sync-log-steps { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.sync-log-steps li { margin-top: 5px; }
.sync-log-empty { color: var(--muted); font-size: 13.5px; padding: 12px 4px; }

.integrations-unmapped-codes { border-top: 1px solid var(--line); padding: 22px 4px; scroll-margin-top: 84px; }
.integrations-unmapped-codes:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.unmapped-code-count { margin: 14px 0 8px; font-size: 13px; }
.unmapped-code-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.unmapped-code-row { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr); gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.unmapped-code-row > div { display: flex; flex-direction: column; gap: 2px; }
.unmapped-code-row strong { font-family: var(--font-mono); font-size: 13px; }
.unmapped-code-row small,
.unmapped-code-row > span,
.unmapped-code-empty,
.unmapped-code-action small { color: var(--muted); font-size: 12.5px; }
.unmapped-code-empty { margin: 14px 0; }
.unmapped-code-action { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }

.integrations-setup { border-top: 1px solid var(--line); }
.integrations-setup > summary { list-style: none; cursor: pointer; padding: 14px 4px; font-weight: 500; font-size: 14px; color: var(--primary); display: flex; align-items: center; gap: 12px; }
.integrations-setup > summary::-webkit-details-marker { display: none; }
.integrations-setup > summary::before { content: "▸"; font-size: 11px; }
.integrations-setup[open] > summary::before { content: "▾"; }
.integrations-setup-body { display: flex; flex-direction: column; gap: 18px; padding: 6px 4px 20px; }
.integrations-technical > summary { list-style: none; cursor: pointer; font-weight: 500; font-size: 13.5px; color: var(--primary); padding: 8px 0; }
.integrations-technical > summary::-webkit-details-marker { display: none; }

/* 210+180+130+120+140+112 = 892px of column minimums (the State track holds
   NL "Gesynchroniseerd" in one pill), five 14px gaps and 8px
   of row padding: the six columns stop fitting at 970px of panel. Below that
   each source becomes a card — name across the top, the four keyed facts two
   up, the refresh action on its own line. */
@container tbl (max-width: 969px) {
  .your-data-row.t-records { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 10px; }
  .your-data-row.t-records > .t-name { grid-column: 1 / -1; }
  .your-data-row.t-records .btn { justify-self: start; }
}

@media (max-width: 900px) {
  .unmapped-code-row { grid-template-columns: 1fr; gap: 4px; }
  .sync-log-run > summary { grid-template-columns: 90px 1fr auto; }
  .sync-log-counts { display: none; }
  .sync-log-detail { padding-left: 4px; }
}

/* ── Needs-you flows: type chips + board suggestion cards ────────────── */
.needs-you-bulk { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.needs-you-bulk small { color: var(--muted); font-size: 12.5px; max-width: 460px; }

/* MK-62 · the untyped-project inbox is one record per project: who it is,
   which type it should get, and the save. The queue measures ITSELF, so the
   card form appears where the type chips stop fitting beside the name instead
   of at a viewport number that knows nothing about this queue's width. */
.type-assign-rows { display: flex; flex-direction: column; min-width: 0; container-name: tbl; container-type: inline-size; }
.type-assign-row { display: grid; grid-template-columns: minmax(210px, 1.1fr) minmax(481px, 1.8fr) auto; gap: 10px 20px; align-items: center; min-width: 0; padding: 14px 0; border-top: 1px solid var(--line); }
.type-assign-row > * { min-width: 0; }
.type-assign-choice { display: grid; gap: 6px; min-width: 0; }
/* This queue has no header row at any width, so — like S4's progress/budget
   band and S5's readiness rows — its key is drawn in both forms. */
.type-assign-row .t-key { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; line-height: 1.9; text-transform: uppercase; }
.type-assign-info { display: flex; flex-direction: column; gap: 2px; }
.type-assign-info strong { font-weight: 700; font-size: 14px; }
.type-assign-info small { color: var(--muted); font-size: 12.5px; }
.type-assign-info small a { color: var(--primary); font-weight: 500; text-decoration: none; }
.type-assign-info small a:hover { text-decoration: underline; }
.type-assign-empty { padding: 14px 0; display: flex; flex-direction: column; gap: 2px; }
.type-assign-empty strong { font-weight: 700; font-size: 14px; }
.type-assign-empty span { color: var(--muted); font-size: 13px; }

.type-chip-group { display: flex; flex-wrap: wrap; gap: 7px; }
.type-chip { position: relative; }
.type-chip input { position: absolute; opacity: 0; pointer-events: none; }
.type-chip span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line); background: transparent; cursor: pointer; color: var(--text); }
.type-chip span:hover { border-color: var(--primary); color: var(--primary); }
.type-chip input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.type-chip input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.type-chip-suggested { font-style: normal; font-size: 9.5px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.75; }

.board-link-rows { display: flex; flex-direction: column; min-width: 0; }
.board-link-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; min-width: 0; padding: 14px 0; border-top: 1px solid var(--line); }
.board-link-row > * { min-width: 0; }
.board-link-info { display: flex; flex-direction: column; gap: 3px; }
.board-link-info strong { font-weight: 700; font-size: 14px; }
.board-link-info small { color: var(--muted); font-size: 12.5px; }
.board-link-stale-note { margin: 4px 0 0; font-size: 12.5px; color: var(--warning-text); }
.board-link-actions { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.board-suggestion-card { display: flex; align-items: center; gap: 14px; border: 1px solid var(--success-border); background: var(--success-bg); border-radius: 10px; padding: 11px 14px; }
.board-suggestion-info { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.board-suggestion-tag { font-size: 10.5px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--success-text); }
.board-suggestion-info strong { font-weight: 700; font-size: 13.5px; }
.board-suggestion-info small { color: var(--muted); font-size: 12px; }

.board-manual-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.board-manual-label { color: var(--muted); font-size: 12.5px; }
.board-manual-pick input { font: inherit; font-size: 13px; max-width: 100%; min-width: 0; padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--background); color: var(--text); width: 210px; }
.board-manual-pick input::placeholder { color: var(--muted); }
/* MK-47 fault (C) applied to the per-row picker: the board-code input carried no
   height of its own and fell back to the UA default (~33px) beside its 44px
   button. Same idiom as .inline-form, so the whole row is one height. */
.board-manual-pick :is(input, button) { box-sizing: border-box; max-width: 100%; min-height: 44px; min-width: 0; }
.board-manual-pick small:empty { display: none; }

/* Project detail · Jira board card: state first, then the picker that fixes it */
.detail-jira-board [data-project-jira-board-state] { justify-self: start; }
.detail-jira-board .board-open-link { color: var(--primary); font-size: 13px; font-weight: 500; justify-self: start; text-decoration: underline; text-underline-offset: 3px; }
.detail-jira-board .board-open-link[hidden] { display: none; }

.jira-board-form { border-top: 1px solid var(--line); display: grid; gap: 8px; padding-top: 14px; }
.jira-board-form[hidden] { display: none; }
.jira-board-form small { color: var(--muted); font-size: 12.5px; margin-top: 0; max-width: 62ch; }
.jira-board-form small.is-error, .board-manual-pick small.is-error, [data-jira-board-suggestion-batch-status].is-error { color: var(--danger-text); font-weight: 500; }
.jira-board-picker { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.jira-board-picker input { background: var(--background); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font: inherit; font-size: 14px; letter-spacing: 0.05em; padding: 7px 11px; text-transform: uppercase; width: 190px; }
.jira-board-picker input::placeholder { letter-spacing: normal; text-transform: none; color: var(--muted); }
.jira-board-picker input:focus-visible { border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: 1px; }
.jira-board-not-linkable { color: var(--warning-text); font-size: 12.5px; margin: 12px 0 0; }
.jira-board-not-linkable[hidden] { display: none; }
/* The trailing link is inline by default, so a wrapped status line above it
   collides with its line box. */
.detail-jira-board > a.btn { display: inline-flex; margin-top: 14px; }

.needs-you-tools { border-top: 1px solid var(--line); margin-top: 6px; }
.needs-you-tools > summary { list-style: none; cursor: pointer; padding: 10px 0; font-weight: 500; font-size: 13px; color: var(--primary); }
.needs-you-tools > summary::-webkit-details-marker { display: none; }
.needs-you-tools > summary::before { content: "▸ "; font-size: 10px; }
.needs-you-tools[open] > summary::before { content: "▾ "; }
.needs-you-tools > *:not(summary) { margin-top: 8px; }

/* Measured, not guessed: a 210px name column, a type column two chips wide
   (2 × 237px + the 7px chip gap = 481px, because a one-chip-wide column turns
   a six-option group into a six-line vertical list and the card form — where
   the group gets the whole record width — is strictly better than that), the
   158px save button and two 20px gaps: 889px. Below that the three columns
   cannot hold their own declared minimums, so each project becomes a card. */
@container tbl (max-width: 888px) {
  .type-assign-row.t-records { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

@media (min-width: 901px) {
  .board-link-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 10px 24px; }
}

.inline-form { display: grid; gap: 8px; max-width: 560px; min-width: 0; }
.inline-form.compact { font-size: 16px; }
.inline-form :is(input, select, button) { box-sizing: border-box; max-width: 100%; min-width: 0; min-height: 44px; }
.inline-form.compact :is(input, select, button) { font-size: inherit; }
.inline-form :is(input, select) { width: 100%; }
.integration-action select,
select { max-width: 100%; }
.planning-type-filter,
.planning-type-chip-list { min-width: 0; }

.integrations-mobile-fallback { display: none; }

@media (max-width: 760px) {
  .integrations-desktop-content { display: none; }
  .integrations-mobile-fallback { display: grid; gap: 22px; min-width: 0; }
  .integrations-mobile-fallback-head h1 { font-size: 28px; line-height: 1.1; margin: 0; }
  .integrations-mobile-fallback-head .section-note { margin: 6px 0 0; }
  .integrations-mobile-sources { display: grid; min-width: 0; }
  .integrations-mobile-sources h2,
  .integrations-mobile-tasks h2 { font-size: 17px; margin: 0 0 8px; }
  .integrations-mobile-source { border-top: 1px solid var(--line); min-width: 0; padding: 14px 0 4px; }
  .mobile-source-head { align-items: baseline; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 8px; }
  .mobile-source-head strong { font-size: 15px; min-width: 0; }
  .integrations-mobile-state { border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 800; max-width: 100%; padding: 4px 8px; white-space: nowrap; }
  .integrations-mobile-state[data-your-data-state-kind="fresh"] { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
  .integrations-mobile-state[data-your-data-state-kind="stale"],
  .integrations-mobile-state[data-your-data-state-kind="waiting"] { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
  .mobile-facts { display: grid; }
  .mobile-facts > div { align-items: center; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) auto; min-height: 44px; padding: 4px 0; }
  .mobile-facts span { color: var(--muted); font-size: 13px; min-width: 0; }
  .mobile-facts b { font-size: 13px; max-width: 48vw; overflow-wrap: anywhere; text-align: right; }
  .integrations-mobile-tasks { border-top: 1px solid var(--line); padding-top: 18px; }
  .integrations-mobile-tasks .section-note { margin: 0 0 6px; }
  .integrations-mobile-tasks ol { counter-reset: task; list-style: none; margin: 0; padding: 0; }
  .integrations-mobile-tasks li { border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); display: grid; gap: 2px 12px; grid-template-columns: 24px minmax(0, 1fr); min-height: 44px; padding: 10px 0; }
  .integrations-mobile-tasks li::before { color: var(--muted); content: counter(task); counter-increment: task; font-size: 13px; font-weight: 900; grid-row: 1 / span 2; }
  .integrations-mobile-tasks li strong { font-size: 14px; }
  .integrations-mobile-tasks li small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
  .desktop-only-note { border-top: 2px solid var(--text); padding-top: 14px; }
  .desktop-only-note h2 { font-size: 17px; margin: 0 0 6px; }
  .desktop-only-note p { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: 0 0 10px; max-width: 46ch; }
  .integrations-mobile-where { color: var(--muted); display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; margin-top: 14px; }
}

/* Needs-you follow-ups: log cap + stale note + board directory hint */
.sync-log-stale-note { padding: 10px 4px; font-size: 13px; color: var(--warning-text); }
.sync-log-show-all { display: block; padding: 12px 4px; }
.board-directory-hint { font-size: 12.5px; color: var(--warning-text); max-width: 720px; }

/* ── WP1: touch tier ──────────────────────────────────────────── */
/* Matches phones AND touch-only devices of any width. Deliberately does
   NOT match hover-capable touch laptops, which would widen desktop
   controls for no benefit. Kept at the end of the file so it wins the
   cascade against every earlier component rule. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {

  /* 16px floor on every focusable text control, bought with :not() rather
     than by enumerating components — enumeration is how this regresses six
     months from now.

     Specificity is per-selector, not per-rule, so each arm has to earn its
     own. The input arm is (0,3,2) and beats .planning-input-wrap input
     (0,1,1) etc. Bare `body select` / `body textarea` would be only (0,0,2),
     which ANY single-class rule outranks — that is how .team-role-select
     (0,1,0) kept 12px on touch tablets, masked below 760px by the
     phone-width rule. :not([hidden]) lifts both arms to (0,1,2). */
  body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  body select:not([hidden]),
  body textarea:not([hidden]) {
    font-size: 16px;
  }

  /* 44px minimum hit area. .btn alone covers every .btn.icon/.btn.sm/
     .btn.sm.quiet instance — no need to name the compounds separately. */
  .btn,
  .filter-chip,
  .pill.select,
  .resource-chip,
  .type-chip span,
  .app-switcher-button,
  .user-menu-item,
  .app-option,
  .tab,
  .nav a,
  .disclosure-toggle,
  .cell-button {
    min-block-size: 44px;
  }

  /* MK-63: these three carry a desktop size at higher specificity than the
     shared component rules above, so they have to be named here to reach the
     touch size instead of shipping a 32/40px target on a phone. */
  .flank-sort button,
  .period-tabs button,
  .period-year-nav button,
  .tab.small {
    min-block-size: var(--control-height-touch);
  }

  .btn.icon { inline-size: 44px; }
  .btn.icon.language-toggle { inline-size: auto; min-inline-size: 52px; }
  .btn.sm { min-inline-size: 44px; inline-size: auto; }

  /* Some of these are inline-level; give them a real box. .btn already
     establishes inline-flex/align-items at every size, so it does not need
     restating here. */
  .nav a,
  .tab,
  .disclosure-toggle {
    align-items: center;
    display: inline-flex;
  }

  .nav a { padding-block: 11px; }
  .btn.sm.quiet { padding-block: 12px; }

  /* Checkboxes/radios: grow the control itself, not the font. */
  input[type="checkbox"],
  input[type="radio"] {
    block-size: 24px;
    inline-size: 24px;
  }

  /* Text inputs that inherit their size from a wrapper. */
  .global-search,
  .project-search,
  .milestone-field,
  .report-sprint-picker,
  .report-month-picker {
    font-size: 16px;
  }

  /* Known collateral of the 16px floor. */

  /* .project-type-inline-select goes 12px -> 16px; it already clips
     "Beheerde service" at 12px. It is removed from the mobile row
     entirely in WP6, but tablet/touch-laptop still renders it. The 34px
     box cannot hold 16px text, so it takes the 44px hit area too — this
     one changes on phones as well as tablets, because no narrower rule
     covers it the way one covers .team-role-select. */
  .project-type-inline-select { padding-inline-end: 26px; min-block-size: 44px; }

  /* .team-role-select is capped at 180px; at 16px the Dutch role labels
     no longer fit. Release the cap on touch, and lift the 34px box to the
     44px hit area — the phone-width rule already does both below 760px,
     so for this control only touch tablets change. */
  .team-role-select { max-inline-size: none; inline-size: 100%; min-block-size: 44px; }

  /* Planning hour inputs go 15px -> 16px in a 58px box; "12,5" no
     longer fits. */
  .planning-input-wrap input { inline-size: 72px; min-block-size: 44px; }
  .project-detail-planning-input-wrap { align-items: center; display: flex; min-block-size: 44px; }
}

@media (max-width: 760px) {
  :root {
    --delivery-chrome-offset: 64px;
    --delivery-phone-topbar-h: 64px;
  }

  :root[data-delivery-shell-banner="visible"] { --delivery-chrome-offset: 104px; }

  .shell-slot {
    block-size: 40px;
    box-sizing: border-box;
    min-height: 40px;
    max-height: 40px;
    overflow: hidden;
    padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
    position: sticky;
    top: 64px;
    z-index: 54;
  }

  .shell-slot > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .shell-slot-view-as-desktop-prefix,
  .shell-slot-view-as-role { display: none; }

  .shell-slot-view-as-mobile-prefix { display: inline; }

  .shell-slot-dismiss { display: none; }

  .topbar {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    height: 64px;
    min-height: 64px;
    padding: 0 10px;
    position: sticky;
    top: 0;
    z-index: 55;
  }

  .topbar .nav,
  .header-logo { display: none; }

  .product-lockup { flex: 1 1 auto; min-width: 0; }
  .app-switcher { min-inline-size: 0; }
  .app-switcher-button { min-height: 44px; min-inline-size: 0; overflow: hidden; padding-inline: 4px; }
  /* The mobile freshness chip carries a visible status WORD as of MR-A T1-b
     (D1-A-011 / X7-A-001 — it used to be a bare glyph plus a clock, with the word
     only in aria-label). "✕ failed · 18:40" is ~40px wider than "✕ 18:40", which
     tipped the 390px flex row 4px over. The row absorbs it by letting the app
     name ellipsise: the current-app label stays present and readable, and the
     honest status text is never the thing that gets cut. */
  .app-switcher-button [data-current-app] {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* flex: 0 0 auto, not the default 1 1 auto: the three tool buttons each hold a
     hard 44px touch floor, so shrinking this container never shrinks them — it just
     lets them paint past its right edge and off the viewport. Freezing it sends the
     shrink to the app lockup, which can ellipsise, instead. */
  .topbar-tools { display: flex; flex: 0 0 auto; gap: 2px; margin-inline-start: 0; width: auto; }
  .topbar-tools .btn.icon { min-inline-size: 44px; }
  .topbar .language-toggle { display: inline-grid; min-inline-size: 44px; padding-inline: 0; }

  .mobile-freshness {
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 11px;
    min-height: 32px;
    padding-inline: 7px;
  }

  .topbar[data-search-open] .topbar-tools {
    flex-basis: auto;
    grid-template-columns: none;
    width: auto;
  }

  .topbar[data-search-open] .global-search-wrap {
    background: var(--background);
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) 44px;
    inset: var(--delivery-chrome-offset) 0 calc(52px + env(safe-area-inset-bottom));
    overflow-y: auto;
    padding: 12px;
    position: fixed;
    z-index: 58;
  }

  .topbar[data-search-open] .global-search { flex-direction: row; grid-column: 1; min-height: 44px; padding-block: 6px; }
  .topbar[data-search-open] .global-search > span { display: none; }
  .topbar[data-search-open] .global-search-cancel { align-items: center; background: transparent; border: 0; color: var(--primary); cursor: pointer; display: inline-flex; font: inherit; font-weight: 700; justify-content: center; min-height: 44px; padding: 0; }
  .topbar[data-search-open] .global-search-panel { grid-column: 1 / -1; inline-size: auto; max-block-size: none; position: static; }

  .mobile-tabbar {
    background: var(--surface);
    border-top: 1px solid var(--line);
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-bottom: env(safe-area-inset-bottom);
    position: fixed;
    inset-inline: 0;
    z-index: 55;
  }

  .mobile-tabbar a {
    align-items: center;
    border-top: 2px solid transparent;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 700;
    gap: 2px;
    height: 52px;
    justify-content: center;
    min-width: 0;
    padding-inline: 0;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
  }

  .mobile-tabbar a > span:first-child { font-size: 18px; line-height: 1; }
  .mobile-tabbar a > span:nth-of-type(2) {
    display: block;
    font-size: 12px;
    inline-size: 100%;
    letter-spacing: -0.06em;
    line-height: 1;
    max-width: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar :is(a, button, input):focus-visible { outline-offset: -1px; }
  .mobile-tabbar a:focus-visible { outline-offset: -3px; }
  .mobile-tabbar a[aria-current="page"] { border-top-color: var(--primary); color: var(--primary); }
  .mobile-tabbar i { background: var(--danger); border-radius: 999px; height: 6px; position: absolute; top: 8px; transform: translateX(9px); width: 6px; }

  .workspace { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .freshness-strip { display: none; }
  .freshness-dialog { border-radius: 0; inset: var(--delivery-chrome-offset) 0 auto; max-inline-size: none; min-block-size: calc(100dvh - var(--delivery-chrome-offset)); }
}

@media (max-width: 340px) {
  .product-name { display: none; }
  .app-switcher-button { gap: 0; justify-content: center; min-inline-size: 44px; padding-inline: 0; }
  .app-switcher-button [data-current-app] { display: inline; }
  .mobile-freshness { min-inline-size: 28px; padding-inline: 5px; }
  .app-switcher-button [data-current-app] { font-size: 12px; }
  .topbar-tools { gap: 0; }
}

/* MK-04 / MK-05 / MK-06 Projects overview */
.projects-source-status {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.projects-source-status [hidden] {
  display: none !important;
}

.projects-source-status > p,
.projects-source-status > small,
.project-source-error p,
.project-overview-loading p {
  color: var(--muted);
  margin: 0;
}

.projects-source-status > p,
.project-source-error,
.project-overview-loading,
.projects-source-status .resource-identity-notice {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.projects-source-status > p[data-projects-role-evidence-notice],
.project-source-stale {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

.project-source-error {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

.project-source-error,
.project-overview-loading {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.project-filter-sheet-open {
  display: none;
}

.project-filter-panel.project-filter-sheet {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  margin: 12px 0;
}

.project-filter-sheet-head {
  display: grid;
  gap: 8px;
}

.project-filter-sheet-close {
  display: none;
}

.project-search-control {
  align-items: center;
  display: flex;
  gap: 8px;
}

.project-search-control input {
  flex: 1 1 auto;
}

.project-search-control kbd {
  color: var(--muted);
  flex: 0 0 auto;
  font: inherit;
  font-size: 11px;
  white-space: nowrap;
}

.project-filter-groups {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
}

.project-filter-group {
  display: grid;
  gap: 6px;
  padding: 0 12px;
  position: relative;
}

.project-filter-group:first-child {
  padding-inline-start: 0;
}

.project-filter-group + .project-filter-group::before,
.project-type-filters::before {
  background: var(--line);
  content: "";
  height: 24px;
  inset: 18px auto auto 0;
  position: absolute;
  width: 1px;
}

.project-filter-group > strong,
.project-type-filters legend,
.project-saved-filters > strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.project-filter-group > div,
.project-secondary-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.project-filter-group .filter-chip {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  min-height: 44px;
  width: auto;
}

.project-filter-group .filter-chip b {
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 999px;
  font-size: 10px;
  min-width: 20px;
  padding: 2px 5px;
  text-align: center;
}

.project-type-filters {
  border: 0;
  border-radius: 0;
  gap: 6px;
  grid-column: auto;
  margin: 0;
  padding: 0 0 0 12px;
  position: relative;
}

.project-type-filters label {
  border: 1px solid var(--line);
  border-radius: 999px;
  min-height: 44px;
  padding: 0 10px;
}

.project-type-filters label:has(input:checked) {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

.project-saved-filters {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  padding-top: 10px;
}

.project-filter-save-row > label:first-child {
  display: grid;
  gap: 4px;
}

.project-filter-sheet-foot {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding-top: 10px;
}

.project-filter-sheet-foot small {
  color: var(--muted);
  display: none;
  font-size: 11px;
  line-height: 1.35;
}

.project-active-filters {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.project-active-filters strong {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.project-active-filters button {
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line));
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  min-height: 32px;
  padding: 5px 10px;
}

.project-active-filters [data-project-active-filter-remove="search"] {
  background: var(--accent-soft);
}

.project-mobile-metric-legend {
  display: none;
}

.projects-overview-scroll {
  border: 1px solid var(--line);
  border-radius: 8px;
  /* MK-62: the table measures ITSELF, not the viewport. Everything the
     Projects table does responsively hangs off this container — including
     the sort control, which lives inside it precisely so the one condition
     that hides the column headers is the one that reveals it. */
  container-name: tbl;
  container-type: inline-size;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.projects-overview-table {
  border: 0;
  border-collapse: separate;
  border-radius: 0;
  border-spacing: 0;
  min-width: 1216px;
  overflow: visible;
  table-layout: fixed;
  width: 100%;
}

/* MK-61(b): the fixed min-width exists to fit the eleven-column header row.
   With zero rows the header row is hidden (browser.ts), so drop the floor
   and let the empty state render full-width without forcing horizontal
   scroll. */
.projects-overview-table[data-project-rows-empty="true"] {
  min-width: 0;
}

.projects-overview-table caption {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.projects-overview-table .project-overview-row {
  background: var(--surface-translucent);
  display: table-row;
  min-width: 0;
}

.projects-overview-table .project-overview-row > th,
.projects-overview-table .project-overview-row > td {
  border-top: 1px solid var(--line);
  box-sizing: border-box;
  height: 64px;
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
}

.projects-overview-table .project-overview-row > :nth-child(1) { width: auto; }
.projects-overview-table .project-overview-row > :nth-child(2) { width: 104px; }
.projects-overview-table .project-overview-row > :nth-child(3) { width: 96px; }
.projects-overview-table .project-overview-row > :nth-child(4) { width: 96px; }
.projects-overview-table .project-overview-row > :nth-child(5) { width: 104px; }
.projects-overview-table .project-overview-row > :nth-child(6) { width: 96px; }
.projects-overview-table .project-overview-row > :nth-child(7) { width: 112px; }
.projects-overview-table .project-overview-row > :nth-child(8) { width: 150px; }
.projects-overview-table .project-overview-row > :nth-child(9) { width: 104px; }
.projects-overview-table .project-overview-row > :nth-child(10) { width: 72px; }
.projects-overview-table .project-overview-row > :nth-child(11) { width: 92px; }

/* The keys live in the DOM at every width; the table form simply does not
   need to draw them, because the column header already says it. */
.projects-overview-table .t-key {
  display: none;
}

.projects-overview-table thead .project-overview-row > th {
  background: var(--surface);
  border-top: 0;
  color: var(--muted);
  height: 48px;
  padding-block: 0;
  text-transform: uppercase;
}

.projects-overview-table thead button {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  gap: 4px;
  height: 44px;
  padding: 0;
  text-align: left;
  text-transform: inherit;
  width: 100%;
}

.projects-overview-table thead button::after {
  color: color-mix(in srgb, var(--muted) 45%, transparent);
  content: "▲▼";
  font-size: 8px;
  letter-spacing: -2px;
}

.projects-overview-table thead button.is-active[data-project-sort-direction="asc"]::after {
  color: var(--primary);
  content: "▲";
  letter-spacing: 0;
}

.projects-overview-table thead button.is-active[data-project-sort-direction="desc"]::after {
  color: var(--primary);
  content: "▼";
  letter-spacing: 0;
}

.projects-overview-table .project-title {
  font-weight: inherit;
}

.projects-overview-table thead th:first-child,
.projects-overview-table tbody th[scope="row"] {
  background: var(--surface-strong);
  left: 0;
  position: sticky;
  z-index: 2;
}

.projects-overview-table thead th:first-child {
  z-index: 3;
}

.projects-overview-scroll.is-scrolled .projects-overview-table :is(thead th:first-child, tbody th[scope="row"]) {
  box-shadow: 8px 0 12px -12px var(--text);
}

.project-type-text {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}

.project-type-manual-dot {
  background: var(--warning-text);
  border-radius: 50%;
  height: 7px;
  width: 7px;
}

.project-status-chip {
  max-width: 100%;
  white-space: normal;
}

.project-status-split {
  display: grid;
  gap: 5px;
}

.project-status-split > span {
  display: grid;
  gap: 2px;
}

.project-status-split small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-mobile-summary {
  display: none;
}

.projects-overview-table .project-report-link {
  box-sizing: border-box;
  margin-inline: 0;
  width: 100%;
}

.project-metric {
  display: grid;
  font-variant-numeric: tabular-nums;
  gap: 5px;
}

.project-metric-bar {
  background: var(--line);
  display: block;
  height: 3px;
  overflow: hidden;
  width: 100%;
}

.project-metric-bar i {
  background: var(--primary);
  display: block;
  height: 100%;
  width: var(--project-metric-value);
}

.project-metric.is-warning .project-metric-bar i {
  background: var(--warning-text);
}

.project-metric.is-danger .project-metric-bar i {
  background: var(--danger-text);
}

.project-metric-unavailable {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
}

.project-overview-state-row > td {
  height: auto;
  padding: 0;
}

.project-row-skeletons {
  display: grid;
  gap: 8px;
  width: min(100%, 720px);
}

.project-row-skeletons i {
  animation: project-skeleton-sweep 1.4s ease-in-out infinite;
  background: linear-gradient(90deg, var(--line), var(--surface-strong), var(--line));
  background-size: 220% 100%;
  border-radius: 6px;
  display: block;
  height: 48px;
}

@keyframes project-skeleton-sweep {
  to { background-position: -220% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .project-row-skeletons i {
    animation: none;
  }
}

/* MK-62 S1: the right-edge fade that hinted at horizontal panning is gone
   with the panning. Below the container threshold the table is a card grid,
   and the mask was bleaching the right 24px of it. */

@media (max-width: 899px) and (min-width: 761px) {
  .project-search-control kbd {
    display: none;
  }
}

@media (max-width: 760px) {
  .project-filter-sheet-open {
    display: inline-flex;
    margin: 8px 0;
    min-height: 44px;
  }

  .project-filter-panel.project-filter-sheet {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    bottom: 0;
    box-shadow: 0 -10px 34px rgb(0 0 0 / 0.22);
    display: none;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr);
    inset-inline: 0;
    margin: 0;
    max-height: 78dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    position: fixed;
    z-index: 60;
  }

  .project-filter-panel.project-filter-sheet.is-open {
    display: grid;
  }

  .project-filter-sheet-head {
    background: var(--surface);
    grid-template-columns: minmax(0, 1fr) 44px;
    position: sticky;
    top: -16px;
    z-index: 2;
  }

  .project-filter-sheet-close {
    align-items: center;
    display: inline-flex;
    font-size: 20px;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }

  .project-search-control kbd {
    display: none;
  }

  .project-filter-groups {
    display: grid;
    gap: 14px;
  }

  .project-filter-group,
  .project-filter-group:first-child,
  .project-type-filters {
    border-top: 1px solid var(--line);
    padding: 14px 0 0;
  }

  .project-filter-group:first-child {
    border-top: 0;
    order: -1;
    padding-top: 0;
  }

  .project-filter-group + .project-filter-group::before,
  .project-type-filters::before {
    display: none;
  }

  .project-filter-sheet-foot {
    background: var(--surface);
    bottom: calc(-16px - env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 12px 0 calc(16px + env(safe-area-inset-bottom));
    position: sticky;
    z-index: 2;
  }

  .project-filter-sheet-foot small {
    display: block;
    grid-column: 1 / -1;
  }

  .project-mobile-metric-legend {
    display: none;
  }

}

/* ── MK-62 pattern A · .t-records ────────────────────────────────────
   One record per row. When the eleven columns no longer fit their 1216px
   minimum (1026px of fixed columns + a 190px name), the row becomes a card
   of key/value pairs. The mockup's 1190px assumed 80px of Jira and 72px of
   Budget; measured against the real copy those two clip ("Required" needs
   96px, the Dutch "Niet van toepassing voor dit contracttype" needs 83px),
   so the two columns — and with them the threshold — grew. A column never disappears, it
   only changes shape. The keys are real translated
   <span class="t-key"> DOM, never content: attr() — that text has to be
   selectable, translatable through the i18n bundle and readable by a
   screen reader. */
@container tbl (max-width: 1215px) {
  .projects-overview-scroll {
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .projects-overview-table.t-records {
    box-sizing: border-box;
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    table-layout: auto;
    width: 100%;
  }

  .projects-overview-table.t-records thead {
    display: none;
  }

  /* Hiding the column headers removes the only way to sort, so the standalone
     control appears under exactly the same condition. It parks under the
     phone topbar where there is one and needs an opaque bar of its own, or
     the record list scrolls through it. */
  .projects-overview-scroll .project-mobile-sort {
    background: var(--background);
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 4px;
    padding: 8px 10px 0;
    position: sticky;
    top: var(--delivery-chrome-offset, var(--delivery-phone-topbar-h, 0px));
    z-index: 5;
  }

  /* auto-fit: two cards side by side on a tablet, one on a phone. */
  .projects-overview-table.t-records tbody {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    min-width: 0;
    padding: 10px;
    width: 100%;
  }

  .projects-overview-table.t-records .project-overview-row {
    align-items: stretch;
    background: var(--surface-translucent);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-sizing: border-box;
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    padding: 6px 0 8px;
    width: 100%;
  }

  .projects-overview-table.t-records .project-overview-row > th,
  .projects-overview-table.t-records .project-overview-row > td {
    align-content: start;
    background: transparent;
    border: 0;
    box-sizing: border-box;
    column-gap: 12px;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    height: auto;
    min-height: 34px;
    min-width: 0;
    padding: 5px 14px;
    position: static;
    width: auto;
  }

  /* the name cell is the head of the card: no key, full width */
  .projects-overview-table.t-records .project-overview-row > .t-name {
    grid-template-columns: minmax(0, 1fr);
    min-height: 44px;
    padding-bottom: 8px;
  }

  .projects-overview-table.t-records .project-overview-cell-link {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .projects-overview-table.t-records .project-title strong {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-size: 16px;
    -webkit-line-clamp: 2;
    line-height: 1.2;
    overflow: hidden;
  }

  .projects-overview-table.t-records .project-title > a > small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .projects-overview-table.t-records .t-key {
    color: var(--muted);
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.9;
    text-transform: uppercase;
  }

  /* everything tappable inside a card keeps its 44px — the cell that owns a
     link, and the links themselves, which the table form never had to size
     because the whole 64px row was the target */
  .projects-overview-table.t-records .project-overview-row > .t-tap {
    min-height: 44px;
  }

  .projects-overview-table.t-records .project-dm-link,
  .projects-overview-table.t-records [data-project-jira-action],
  .projects-overview-table.t-records .project-report-link {
    align-items: center;
    display: flex;
    min-height: 44px;
  }

  .projects-overview-table.t-records .project-overview-row > td:has(.project-dm-link),
  .projects-overview-table.t-records .project-overview-row > td:has([data-project-jira-action]) {
    min-height: 44px;
  }

  /* Project type, Live and Reporting mode are spelled out verbatim in the
     card head already. Their own key/value pair would show the same value
     a second time, so the card form hides those three cells. That is the
     ONLY place this pattern hides a cell, and only because the value is
     elsewhere in the same card. */
  .projects-overview-table.t-records .project-overview-row > .t-merge {
    display: none;
  }

  .projects-overview-table.t-records .project-mobile-summary {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .projects-overview-table.t-records .project-mobile-status-summary {
    box-sizing: border-box;
    font-size: 10px;
    line-height: 1.2;
    max-width: 100%;
    overflow: visible;
    overflow-wrap: anywhere;
    padding: 2px 5px;
    white-space: normal;
  }

  .projects-overview-table.t-records .project-mobile-signal-summary {
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 9px;
    gap: 2px 8px;
    line-height: 1.25;
    min-width: 0;
  }

  .projects-overview-table.t-records .project-mobile-signal-summary > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .projects-overview-table.t-records .project-overview-state-row {
    display: block;
    grid-column: 1 / -1;
    min-height: 0;
    padding: 0;
  }

  .projects-overview-table.t-records .project-overview-state-row > td {
    display: block;
  }
}

.my-week-controls,
.my-week-range,
.my-week-figures,
.my-week-arithmetic,
.utilisation-norm,
.utilisation-population-count {
  display: flex;
  align-items: center;
}

.my-week-controls {
  gap: 8px;
}

.my-week-controls button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--text);
  padding: 0 14px;
  font: inherit;
  font-weight: 700;
}

.my-week-workspace {
  display: grid;
  gap: 18px;
}

.resource-identity-notice[hidden] {
  display: none;
}

.resource-identity-notice {
  display: grid;
  gap: 6px;
  border: 1px solid var(--status-amber-line);
  border-radius: 10px;
  background: var(--status-amber-fill);
  padding: 16px;
}

.resource-identity-notice strong {
  font-size: 15px;
}

.resource-identity-notice span {
  color: var(--muted);
  line-height: 1.45;
}

.my-week-range {
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.my-week-range div {
  display: grid;
  gap: 4px;
}

.my-week-range span,
.my-week-range small,
.my-week-project span,
.my-week-project small,
.my-week-strip-week span,
.my-week-strip-week small,
.my-week-booking span {
  color: var(--muted);
  font-size: 12px;
}

.my-week-block {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 18px;
}

.my-week-block h2 {
  margin: 0;
  font-size: 18px;
}

.my-week-projects,
.my-week-bookings {
  display: grid;
  gap: 8px;
}

.my-week-project,
.my-week-booking {
  display: grid;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--text);
  padding: 10px 12px;
  text-decoration: none;
}

.my-week-project {
  grid-template-areas:
    "client hours"
    "title hours"
    "meta hours"
    "action action";
  grid-template-columns: minmax(0, 1fr) auto;
}

.my-week-project-client,
.my-week-project-title,
.my-week-project-meta,
.my-week-project-action {
  min-width: 0;
  overflow-wrap: anywhere;
}

.my-week-project-client { grid-area: client; }

.my-week-project-title {
  grid-area: title;
  font-size: 16px;
}

.my-week-project-hours {
  grid-area: hours;
  align-self: start;
  display: grid;
  justify-items: end;
}

.my-week-project-hours b {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.my-week-project-hours small {
  font-size: 11px;
}

.my-week-project-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
}

.my-week-project-meta em {
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--primary);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  padding: 3px 7px;
}

.my-week-project-delivery-manager {
  color: var(--muted);
  font-size: 12px;
}

.my-week-project-manager-compact {
  display: none;
}

.my-week-project-action {
  grid-area: action;
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
}

.my-week-booking {
  grid-template-columns: 78px minmax(0, 1.5fr) minmax(0, 1fr) 62px max-content;
}

.my-week-booking-project {
  overflow-wrap: anywhere;
}

.my-week-booking-activity {
  overflow-wrap: anywhere;
}

.my-week-booking-hours {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.my-week-booking em {
  width: max-content;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--primary);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-transform: capitalize;
}

.my-week-booking em[data-classification="billable"] { color: var(--hours-billable); }
.my-week-booking em[data-classification="warranty"] { color: var(--hours-warranty); }
.my-week-booking em[data-classification="internal"] { color: var(--muted); }

.my-week-arithmetic {
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.my-week-arithmetic span {
  color: var(--muted);
  font-size: 12px;
}

.my-week-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(230px, 1fr));
  gap: 8px;
  overflow-x: auto;
}

.my-week-strip-week {
  min-height: 220px;
  display: grid;
  align-content: space-between;
  gap: 5px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: var(--primary-soft);
  padding: 10px;
}

.my-week-strip-week[data-capacity-heat="over"] { background: var(--cap-over-tint); border-color: var(--status-red); }
.my-week-strip-week[data-capacity-heat="under"] { background: var(--cap-under-tint); border-color: var(--status-amber); }
.my-week-strip-week[data-capacity-heat="neutral"] { background: var(--cap-ok-tint); border-color: var(--status-green); }
.my-week-strip-week[data-capacity-heat="unknown"],
.my-week-strip-week[data-capacity-heat="none"] { border-color: var(--line); }

.my-week-capacity-track {
  align-items: flex-end;
  border: 2px solid currentColor;
  display: flex;
  height: 64px;
  overflow: hidden;
  position: relative;
}

.my-week-capacity-track i {
  align-self: stretch;
  background: currentColor;
  display: block;
  opacity: 0.24;
}

.my-week-capacity-track b {
  bottom: 5px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  left: 7px;
  position: absolute;
}

.my-week-strip-week[data-capacity-track-state="empty"] .my-week-capacity-track {
  background: transparent;
  border-radius: 0;
  color: var(--muted);
}

.my-week-strip-week[data-capacity-track-state="unknown"] .my-week-capacity-track {
  border-radius: 50% 50% 0 0;
  border-style: solid;
  border-width: 4px;
  color: var(--muted);
}

.my-week-strip-week[data-capacity-track-state="none"] .my-week-capacity-track {
  border-radius: 0;
  border-style: double;
  border-width: 4px;
  color: var(--muted);
}

.my-week-strip-week[data-capacity-track-state="free"] .my-week-capacity-track {
  border-radius: 16px 16px 4px 4px;
  color: var(--status-amber);
}

.my-week-strip-week[data-capacity-track-state="on"] .my-week-capacity-track {
  border-radius: 2px;
  color: var(--status-green);
}

.my-week-strip-week[data-capacity-track-state="over"] .my-week-capacity-track {
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
  color: var(--status-red);
}

.my-week-strip-week ul {
  display: grid;
  gap: 4px;
  list-style: none;
  margin: 4px 0;
  padding: 0;
}

.my-week-strip-week li {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.my-week-strip-week li a {
  color: var(--text);
}

.my-week-strip-week p {
  color: var(--muted);
  margin: 0;
}

.my-week-forward-action {
  color: var(--primary);
  font-weight: 800;
}

.my-week-strip-week.is-zero,
.my-week-empty {
  border: 1px solid var(--line);
  background: transparent;
}

.my-week-empty {
  min-height: 120px;
  display: grid;
  place-content: center;
  gap: 5px;
  border-radius: 8px;
  text-align: center;
}

.my-week-empty span {
  color: var(--muted);
  font-size: 30px;
  font-variant-numeric: tabular-nums;
}

.my-week-empty.compact {
  min-height: 84px;
}

.my-week-figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 16px;
  row-gap: 10px;
}

.my-week-figures div {
  display: grid;
  gap: 5px;
}

.my-week-figures span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.my-week-figures strong {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.my-week-booked-equation,
.my-week-derived {
  margin: 0;
  color: var(--muted);
}

.utilisation-project-filter {
  min-width: 210px;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.utilisation-project-filter select {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--text);
  padding: 0 10px;
  /* Not `font: inherit`: that pulls 12px/700 from the wrapper at
     specificity (0,1,1), which beats the touch floor's `body select`
     (0,0,2) and silences it on phones (iOS zooms any focused input
     under 16px). Same trap awaits any other `.foo select { font-size }`
     rule below (0,1,1) — the floor only wins ties, not higher specificity. */
  font-size: 16px;
  font-weight: 400;
}

/* GD-23 (T4-c): the ad-hoc resource filter, styled identically to the
   project-numerator control it sits beside — same control, same weight,
   deliberately unsaved (no "Save as default", unlike Planning's filter). */
.utilisation-resource-filter {
  min-width: 210px;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.utilisation-resource-filter input {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--text);
  padding: 0 10px;
  font-size: 16px;
  font-weight: 400;
}

/* D-12 (T4-c) denominator toggle: label + .segctl, same weight as the two
   filter controls it sits beside. */
.utilisation-denominator-toggle {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}

.utilisation-denominator-toggle > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.utilisation-norm,
.utilisation-population-count {
  min-height: 36px;
  width: max-content;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--status-amber);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
}

.utilisation-capacity-bar {
  width: 180px;
  height: 9px;
  display: flex;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.utilisation-capacity-bar i[data-segment="billable"] { background: var(--hours-billable); }
.utilisation-capacity-bar i[data-segment="internal"] { background: var(--muted); }
.utilisation-capacity-bar i[data-segment="warranty"] { background: var(--hours-warranty); }
.utilisation-capacity-bar i[data-segment="unbooked"] { background: var(--surface-strong); }

.utilisation-table td {
  font-variant-numeric: tabular-nums;
}

.utilisation-table td:first-child strong,
.utilisation-table td:first-child small {
  display: block;
}

.utilisation-table td:first-child small {
  margin-top: 3px;
  color: var(--muted);
}

/* MK-03 Reports route */
.reports-sla-route {
  display: grid;
  gap: 18px;
}

.reports-sla-controls,
.reports-sla-scope,
.reports-sla-periods,
.reports-sla-filters,
.reports-sla-status,
.reports-sla-actions,
.reports-sla-footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reports-sla-controls {
  justify-content: space-between;
  border-block: 1px solid var(--line);
  padding-block: 10px;
}

/* Board filter row (D11-A-033..039): Periode · Status · Delivery manager. */
.reports-sla-filters {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.reports-sla-filter-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reports-sla-more-periods,
.reports-sla-dm {
  position: relative;
}

.reports-sla-more-periods summary,
.reports-sla-dm summary {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  list-style: none;
  padding: 6px 12px;
}

.reports-sla-more-periods summary::-webkit-details-marker,
.reports-sla-dm summary::-webkit-details-marker {
  display: none;
}

.reports-sla-more-periods[open] > div,
.reports-sla-dm[open] > div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding: 8px;
  position: absolute;
  z-index: 5;
}

.reports-sla-dm[open] > div {
  min-width: 220px;
}

.reports-sla-filters-clear {
  background: none;
  border: 0;
  color: var(--primary);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  margin-inline-start: auto;
  padding: 0;
}

.reports-sla-filter-hint {
  color: var(--muted);
  font-size: 12.5px;
  margin: 0;
}

.reports-sla-result,
.reports-sla-source-notice,
.reports-sla-footer {
  color: var(--muted);
  margin: 0;
}

.reports-sla-source-notice {
  display: grid;
  gap: 6px;
  border: 1px solid var(--status-amber-border, var(--line));
  background: var(--accent-soft);
  padding: 12px;
}

.reports-sla-source-notice p { margin: 0; }
.reports-sla-source-notice a { color: var(--primary); font-weight: 800; }

.reports-sla-metrics .figure-strip-cell {
  appearance: none;
  background: none;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: start;
}

.reports-sla-metrics .figure-strip-cell[aria-pressed="true"] {
  box-shadow: inset 0 -3px 0 var(--primary);
}

.reports-sla-table-wrap {
  overflow-x: auto;
}

.reports-sla-table {
  min-width: 760px;
  width: 100%;
}

.reports-sla-table td small,
.reports-sla-table td strong {
  display: block;
}

.reports-sla-table td small { color: var(--muted); margin-top: 3px; }
.reports-sla-table .t-key { display: none; }
.reports-sla-group th { background: var(--surface-strong); color: var(--text); text-align: start; }
.reports-sla-group th span { color: var(--muted); font-variant-numeric: tabular-nums; margin-inline-start: 8px; }
.reports-sla-empty td { color: var(--muted); font-style: italic; }
.reports-sla-table tr.is-sent { color: var(--muted); }
.reports-sla-table tr.is-sent strong { color: inherit; font-weight: 500; }
.reports-action-unavailable { color: var(--muted); display: grid; gap: 3px; }
.reports-sent-artifact { background: var(--surface); border: 1px solid var(--line); display: block; height: min(72vh, 760px); margin-top: 12px; width: 100%; }

/* Zebra restarts at the first row of each deadline group (D11-A-023/024,
   D-11 artifact annotation 04), never across the whole board. This is a
   locally-scoped token rather than the shared `--row-tint` X-1 introduces
   app-wide — T3-c-1 branches before that lands and must not adopt it yet;
   rebase onto it when the MR-A base is integrated. */
.reports-sla-table {
  --reports-row-tint: rgb(0 0 0 / 3%);
}
:root[data-theme="dark"] .reports-sla-table {
  --reports-row-tint: rgb(255 255 255 / 4%);
}
.reports-sla-table tr.is-tint td { background: var(--reports-row-tint); }

.reports-sla-actions { justify-content: space-between; }
.reports-sla-actions p { color: var(--muted); margin: 0; max-width: 62ch; }
.reports-bulk-progress { color: var(--muted); margin: 0; padding-inline-start: 18px; width: 100%; }
.reports-sla-footer { align-items: baseline; border-top: 1px solid var(--line); padding-top: 12px; }
.reports-sla-footer details { width: 100%; }
.reports-sla-footer ul { margin-block: 8px 0; padding-inline-start: 18px; }

/* D-11 v1.2 drill-in (Frames 8-11). Zebra comes from the app-wide
   `.t-records tbody tr:nth-of-type(even)` rule (styles.css ~7454) via the
   shared --row-tint token — the drill-in table carries the .t-records class
   for exactly that reason, and nth-of-type restarts naturally per <table>,
   which is what gives each project's sub-table its own fresh zebra without
   any JS-driven row classing. No local token, no manual .is-tint. */
.reports-sla-head-actions { align-items: center; display: flex; gap: 8px; }
.reports-drillin-findwrap { position: relative; }
.reports-drillin-find { border: 1px solid var(--line); border-radius: 10px; font: inherit; height: 44px; padding: 0 14px; width: 100%; }
.reports-drillin-find-list { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-sm, 0 4px 14px rgba(0,0,0,.12)); list-style: none; margin: 4px 0 0; max-height: 320px; overflow-y: auto; padding: 4px; position: absolute; width: 100%; z-index: 20; }
.reports-drillin-find-list li { border-radius: 8px; cursor: pointer; padding: 8px 10px; }
.reports-drillin-find-list li:hover,
.reports-drillin-find-list li[aria-selected="true"] { background: var(--surface-hover, var(--surface-strong)); }
.reports-drillin-find-list b { display: block; font-weight: 700; }
.reports-drillin-find-list span { color: var(--muted); }
.reports-drillin-findhint { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.reports-drillin-chosen { align-items: baseline; display: flex; gap: 10px; margin-top: 16px; }
.reports-drillin-chosen .kind { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.reports-drillin-chosen h2 { font-size: 20px; margin: 0; }
.reports-drillin-summary { color: var(--muted); margin: 4px 0 0; }
.reports-drillin-pgroup { align-items: baseline; display: flex; gap: 10px; justify-content: space-between; margin: 20px 0 8px; }
.reports-drillin-pgroup h3 { font-size: 15px; margin: 0; }
.reports-drillin-pgroup span { color: var(--muted); font-size: 12px; }
.reports-drillin-table { border-collapse: collapse; width: 100%; }
.reports-drillin-table th,
.reports-drillin-table td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.reports-drillin-table .absent { color: var(--muted); font-style: italic; }
.reports-drillin-table .hfilemeta { color: var(--muted); display: block; font-size: 11px; }
.reports-drillin-table .slot { background-image: repeating-linear-gradient(135deg, var(--row-tint) 0 4px, transparent 4px 8px); border-left: 1px dashed var(--line); }
.reports-drillin-table th.slot em { color: var(--muted); display: block; font-size: 10px; font-style: normal; font-weight: 500; text-transform: none; }
.reports-drillin-table tr.is-expected .per { color: var(--status-red, var(--redS, inherit)); }
.reports-drillin-hnote { color: var(--muted); font-size: 13px; margin-top: 12px; }
.reports-drillin-empty { color: var(--muted); padding: 24px 0; }
.reports-drillin-cadence-unknown { color: var(--muted); font-style: italic; padding: 8px 0; }

@media (max-width: 760px) {
  .reports-sla-controls,
  .reports-sla-scope,
  .reports-sla-actions { align-items: stretch; width: 100%; }
  .reports-sla-controls { gap: 12px; }
  .reports-sla-scope .filter-chip { flex: 1; }
  /* D11-A-039: mobile filters stay one horizontally scrolling chip row, never
     a modal filter sheet or a wrapped stack. */
  .reports-sla-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .reports-sla-filters .filter-chip,
  .reports-sla-more-periods,
  .reports-sla-dm,
  .reports-sla-filter-label { flex: 0 0 auto; }
  /* MK-62 pattern C: the two-column override and the radius reset for
     `.reports-sla-metrics` are gone — `.figure-strip` states the columns
     once (`.t-stats` was retired by S1, 2026-08-12) and the cardless strip
     carries no radius at any width. */
  .reports-sla-table { min-width: 0; }
  .reports-sla-table thead { display: none; }
  .reports-sla-table tbody,
  .reports-sla-table tr,
  .reports-sla-table td { display: block; width: 100%; }
  .reports-sla-table tr:not(.reports-sla-group):not(.reports-sla-empty) { border-bottom: 1px solid var(--line); padding: 12px 0; }
  .reports-sla-table td { border: 0; padding: 5px 0; }
  .reports-sla-table .t-key { color: var(--muted); display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; }
  .reports-sla-table td:last-child .primary-action,
  .reports-sla-table td:last-child .btn { min-height: 44px; width: 100%; }
  .reports-sla-actions .primary-action { min-height: 44px; width: 100%; }

  /* D-11 v1.2 drill-in: mobile drill-in record list — hairline only, no
     zebra (MK-62 table strategy exemption boundary matches the board's own). */
  .reports-drillin-table { min-width: 0; }
  .reports-drillin-table thead { display: none; }
  .reports-drillin-table tbody,
  .reports-drillin-table tr,
  .reports-drillin-table td { display: block; width: 100%; }
  .reports-drillin-table tr { border-bottom: 1px solid var(--line); padding: 12px 0; }
  .reports-drillin-table td { border: 0; padding: 3px 0; }
  .reports-drillin-table td.slot { background-image: none; border-left: 0; }
  .reports-drillin-table .t-key { color: var(--muted); display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; }
  /* The floating "More" disclosure that held the sixth destination is gone with
     Q18-c — Integraties is reached from the account menu on every breakpoint. */

  .my-week-controls {
    width: 100%;
  }

  .my-week-controls button {
    flex: 1;
  }

  .my-week-range,
  .my-week-arithmetic {
    align-items: flex-start;
    flex-direction: column;
  }

  .my-week-project {
    grid-template-areas:
      "client hours"
      "title hours"
      "meta hours"
      "action action";
  }

  .my-week-project-manager-full {
    display: none;
  }

  .my-week-project-manager-compact {
    display: inline;
  }

  .my-week-booking {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 4px;
  }

  .my-week-booking-date,
  .my-week-booking-project,
  .my-week-booking-activity,
  .my-week-booking-classification {
    grid-column: 1;
  }

  .my-week-booking-date { grid-row: 1; }
  .my-week-booking-project { grid-row: 2; }
  .my-week-booking-activity { grid-row: 3; }
  .my-week-booking-classification { grid-row: 4; justify-self: start; }

  .my-week-booking-hours {
    align-self: center;
    grid-column: 2;
    grid-row: 1 / span 4;
  }

  .my-week-figures {
    grid-template-columns: repeat(2, 1fr);
  }

  .utilisation-project-filter,
  .utilisation-resource-filter {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 639.98px) {
  .report-burndown-availability {
    font-size: 16px;
    line-height: 1.45;
  }

  .report-burndown-chart[data-has-burndown-unavailability="true"] {
    padding: 12px;
  }

  /* MK-62 S7: the activity card form used to live here, behind a 639.98px
     VIEWPORT query. This table sits inside a report panel, so its scroller
     is narrower than the viewport by the workspace gutters — measured on a
     served dist, a 700px viewport put the 880px table in a 630px scroller:
     250px of sideways scroll with all ten column keys hidden, in the one
     band the viewport query said was still a table. The shape now hangs off
     the scroller's own width; see the @container block below. */

  .report-activity-unmapped {
    color: var(--warning-text);
  }
}

/* ── MK-62 pattern A · report activity .t-records ─────────────────────
   One activity per row. 879px is the width below which `.log-table`'s
   880px column minima stop fitting — the same threshold the project log
   and the Jira progress tables use, because it is the same measurement. */
.table-scroll:has(> .report-activity-table) {
  container-name: tbl;
  container-type: inline-size;
  min-width: 0;
  position: relative;
}

/* The overflow affordance was banded to 640–760px, which is exactly the
   band where the table is now a card and cannot overflow at all. The
   runtime already measures the scroller and toggles `.has-overflow`, so
   the fade and the hint follow that measurement at every width instead. */
.table-scroll:has(> .report-activity-table).has-overflow::after {
  background: linear-gradient(90deg, transparent, var(--surface));
  content: "";
  inset: 0 0 0 auto;
  pointer-events: none;
  position: absolute;
  width: 44px;
}

.report-activity-scroll-hint:not([hidden]) {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin: 8px 0 0;
}

@container tbl (max-width: 879px) {
  .report-activity-table,
  .report-activity-table tbody,
  .report-activity-table tr,
  .report-activity-table td {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .report-activity-table thead {
    display: none;
  }

  .report-activity-table tr {
    display: grid;
    gap: 10px 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 18px 0;
  }

  .report-activity-table tr + tr {
    border-top: 1px solid var(--line);
  }

  .report-activity-table td {
    border: 0;
    padding: 0;
    text-align: left;
    white-space: normal;
  }

  .report-activity-table.t-records .t-key {
    color: var(--muted);
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 3px;
  }

  .report-activity-table td:first-child,
  .report-activity-table td:nth-child(5),
  .report-activity-table td:nth-child(6) {
    grid-column: 1 / -1;
  }

  /* Burn and Status each take the full card width with a visual of their own
     (the progress bar and the status pill), so the key would sit alone on a
     line above a graphic that already reads as itself. The cell stays — only
     its key is undrawn, and the column header names it in the table form,
     which is now exactly the form this block does not apply to. */
  .report-activity-table.t-records td:nth-child(5) .t-key,
  .report-activity-table.t-records td:nth-child(6) .t-key {
    display: none;
  }

  .report-activity-table td:first-child strong {
    font-size: 16px;
  }

  .report-activity-table td:nth-child(5) .progress-compare {
    min-width: 0;
    width: 100%;
  }

  .report-activity-table td:nth-child(6) {
    justify-self: end;
    width: auto;
  }

  /* A warranty row has no budget, no burn and no status — the table prints an
     em dash in those three cells only because a table row has to fill its
     grid, and the row's own subtitle says why ("separated from billable
     activity use"). A card has no grid to fill, so three key/value pairs
     reading "Budget € —" would be the invention, not the omission. Same
     .t-merge treatment the Projects overview uses, named in the markup rather
     than picked out by column position, so the cells that merge are stated
     where they are written. */
  .report-activity-table.t-records tr.is-warranty > .t-merge {
    display: none;
  }
}

.report-narrative-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 16px 0;
  padding: 18px;
}

.report-narrative-card .report-panel-head {
  align-items: flex-start;
}

.report-narrative-card h2,
.report-narrative-card p {
  margin: 0;
}

.report-narrative-card .report-panel-head > div > p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
  max-width: 68ch;
}

.report-narrative-fields {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.report-narrative-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.report-narrative-block.is-suggested {
  background: var(--surface-muted);
}

.report-narrative-label {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.report-narrative-label label {
  font-weight: 800;
}

.report-narrative-label span,
.report-narrative-requirement {
  color: var(--muted);
  font-size: 12px;
}

.report-narrative-requirement {
  margin: 4px 0 8px;
}

.report-narrative-block.is-suggested textarea {
  color: var(--muted);
  font-style: italic;
}

.report-narrative-block textarea {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-sizing: border-box;
  color: var(--ink);
  display: block;
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
  padding: 10px;
  resize: vertical;
  width: 100%;
}

.report-narrative-bullet + .report-narrative-bullet {
  margin-top: 8px;
}

.report-narrative-bullet {
  align-items: flex-start;
  display: flex;
  gap: 8px;
}

.report-narrative-bullet .btn.icon {
  flex: 0 0 44px;
  margin-top: 0;
}

.report-narrative-bullet + .btn {
  margin-top: 8px;
}

.report-narrative-unavailable {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: 8px;
  color: var(--warning-text);
  margin: 0;
  padding: 12px;
}

.report-narrative-redraft {
  align-items: center;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px;
}

.report-narrative-redraft p {
  color: var(--muted);
  font-size: 13px;
}

.report-readiness-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 16px 0;
  padding: 18px;
}

.report-readiness-list {
  border-top: 1px solid var(--line);
  display: grid;
  margin-top: 16px;
}

.report-readiness-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 8px 12px;
  grid-template-columns: 24px minmax(0, 1fr) auto auto auto;
  min-height: 48px;
  padding: 10px 0;
}

.report-readiness-row > span {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.report-readiness-row small {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.report-readiness-row em {
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.report-readiness-row .btn {
  /* MK-63: was the retired 36px. A repair action inside a checklist row is a
     default-sized button, not a size of its own. */
  min-height: var(--control-height-default);
}

/* This rule sits AFTER the shared touch tier near the end of the file, so the
   touch size has to be restated here or specificity+order would keep a 40px
   target on a phone. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .report-readiness-row .btn {
    min-height: var(--control-height-touch);
  }
}

.report-readiness-passed {
  border-bottom: 1px solid var(--line);
}

.report-readiness-passed > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  padding: 12px 0;
}

.report-readiness-row.is-passed > span,
.report-readiness-row.is-passed em {
  color: var(--success-text);
}

.report-readiness-row.is-warning > span,
.report-readiness-row.is-warning em {
  color: var(--warning-text);
}

.report-readiness-row.is-blocker > span,
.report-readiness-row.is-blocker em {
  color: var(--danger-text);
}

.report-readiness-blocked {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: 8px;
  color: var(--danger-text);
  margin: 14px 0 0;
  padding: 10px 12px;
}

@media (max-width: 600px) {
  .report-narrative-card {
    padding: 14px;
  }

  .report-readiness-card {
    padding: 14px;
  }

  .report-readiness-row {
    align-items: start;
    grid-template-columns: 24px minmax(0, 1fr) auto;
  }

  .report-readiness-row small {
    grid-column: 2 / -1;
    text-align: left;
  }

  .report-readiness-row .btn {
    grid-column: 2 / -1;
    justify-self: start;
  }

  .report-narrative-card .report-panel-head {
    display: grid;
    gap: 10px;
  }

  .report-narrative-card textarea {
    font-size: 16px;
  }

  .report-narrative-redraft {
    align-items: flex-start;
    flex-direction: column;
  }
}