/* Fraunhofer corporate design.
   Palette source: Fraunhofer CD-Manual (Stand 09/2012), section 1.1.1.2 "Technische
   Farbumsetzung" and 1.3 "farben / farbklima"; cross-checked against the live logo
   (fhg.svg -> fill:#179C7D) and the current fraunhofer.de stylesheet.
   Every hex below is a published CD value except --brand-strong / --brand-deep,
   which are darker shades of Pantone 334 C needed to reach WCAG AA for white text
   and body links (#179C7D itself only reaches 3.45:1 on white).
   Type: Hub Sans is a renamed Latin subset of Source Sans 3, not a copy of the
   commercially licensed corporate face. One variable WOFF2 covers every UI weight.
   Its SIL Open Font License is shipped in LICENSES/Source-Sans-3-OFL.txt. */
@font-face {
  font-family: "Hub Sans";
  src: url("/static/fonts/hub-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}
:root {
  color-scheme: light;

  /* Fraunhofer Grün, Pantone 334 C */
  --brand: #179c7d;
  --brand-web: #009374;          /* fraunhofer.de interactive green */
  --brand-strong: #0c6b55;       /* AA-safe shade: 6.46:1 on white */
  --brand-deep: #0a5f4c;
  --brand-mid: #6dbfa9;          /* Pantone 338 C */
  --brand-light: #b4dcd3;        /* Pantone 331 C */
  --brand-tint: #e8f4f0;
  --brand-tint-strong: #d7ebe4;

  /* HKS 99 Silber is the CD's defining neutral and its hairline colour */
  --silver: #c7cacc;
  --paper: #ffffff;
  --canvas: #f2f4f5;
  --surface-muted: #f7f8f9;
  --line: #dfe3e5;
  --line-faint: #eceff0;
  --line-strong: var(--silver);

  --ink: #1f2426;
  --ink-soft: #40484c;
  --muted: #5f6b71;

  /* Signal colours, all Farbklima members */
  --blue: #005a94;               /* Pantone 653 C */
  --blue-bright: #1f82c0;        /* Pantone 279 C */
  --blue-tint: #e3eff7;
  --orange: #eb6a0a;             /* Pantone 7413 C */
  --orange-text: #8f4300;
  --orange-tint: #fdf0e2;
  --red: #9e1c22;                /* Pantone 484 C */
  --red-tint: #fbe9ea;
  --slate: #4c636f;              /* Pantone 7546 C */
  --slate-tint: #edeff0;

  --focus: #005a94;
  --shadow: 0 1px 2px rgb(31 36 38 / 6%), 0 8px 20px rgb(31 36 38 / 5%);
  --shadow-pop: 0 18px 45px rgb(31 36 38 / 16%);
  --radius: 4px;

  font-family: "Hub Sans", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  letter-spacing: 0;
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; background: var(--canvas); color: var(--ink); }
body { max-width: 100%; margin: 0; min-width: 320px; overflow-x: hidden; background: var(--canvas); line-height: 1.4; }
a { color: var(--brand-strong); }
a:hover { color: var(--brand-deep); }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 1.75rem; line-height: 1.2; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { line-height: 1.55; }

.skip-link { position: fixed; z-index: 100; left: 1rem; top: 1rem; transform: translateY(calc(-100% - 2rem)); padding: .75rem 1rem; background: var(--ink); color: white; }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Shell ------------------------------------------------------------------- */
.app-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 1.5rem 1rem 1rem; background: var(--paper); border-right: 1px solid var(--line-strong); }
.brand { display: flex; flex-direction: column; align-items: start; gap: .55rem; padding: 0 .75rem; color: var(--ink); text-decoration: none; font-weight: 700; line-height: 1.25; }
.brand:hover { color: var(--ink); }
.brand-logo { width: 106px; height: auto; }
.brand-title { font-size: .92rem; }
.sidebar nav { display: grid; gap: 1px; margin-top: 1.75rem; }
.sidebar nav a { padding: .6rem .75rem; border-left: 3px solid transparent; color: var(--ink-soft); text-decoration: none; }
.sidebar nav a:hover { background: var(--surface-muted); color: var(--ink); }
.sidebar nav a[aria-current="page"] { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-strong); font-weight: 700; }
.sidebar-foot { display: grid; gap: .9rem; margin-top: auto; padding-top: 1.25rem; }
/* The institute mark carries its own generous whitespace, so it is aligned to
   the nav text rather than the padding box. */
.institute-logo { width: 152px; max-width: 100%; height: auto; margin-left: .75rem; }
.sidebar-meta { display: grid; gap: .3rem; padding: .9rem .75rem 0; border-top: 1px solid var(--line); }
.sidebar-meta small, .subtle { color: var(--muted); }
.role-badge { width: max-content; padding: .18rem .4rem; background: var(--brand-tint); color: var(--brand-strong); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.workspace { min-width: 0; }
.topbar { min-height: 64px; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 2rem; background: var(--paper); border-bottom: 1px solid var(--line-strong); }
.topbar > div { display: flex; align-items: center; gap: .75rem; }
.eyebrow { color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.workbook-state { color: var(--muted); font-size: .82rem; }
main { max-width: 1680px; margin: 0 auto; padding: 1.75rem 2rem 4rem; }
.page-heading, .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.35rem; }
.page-heading .eyebrow { display: block; margin: 0 0 .35rem; }
.section-heading { margin-top: 2.25rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line-strong); }
.section-heading > span { color: var(--muted); }

/* Controls ---------------------------------------------------------------- */
.button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: .4rem; padding: .55rem .9rem; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; text-decoration: none; font-weight: 700; }
.button.primary { background: var(--brand-strong); color: #fff; }
.button.primary:hover { background: var(--brand-deep); color: #fff; }
.button.secondary { background: var(--paper); border-color: var(--silver); color: var(--ink); }
.button.secondary:hover { background: var(--surface-muted); color: var(--ink); }
.button.danger { background: var(--paper); border-color: #d9a3a5; color: var(--red); }
.button.danger:hover { background: var(--red-tint); }
.button.small { min-height: 32px; padding: .3rem .6rem; font-size: .82rem; }
/* A <summary> keeps its disclosure triangle unless display is list-item, and the
   .button rules already override display -- hide the marker so the two agree. */
summary.button { list-style: none; }
summary.button::-webkit-details-marker { display: none; }
summary.button::after { content: "\25BE"; font-size: .7em; }
details[open] > summary.button::after { content: "\25B4"; }
.button-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.text-link { font-weight: 700; text-underline-offset: 3px; }
.icon-link { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--brand-strong); text-decoration: none; font-size: 1.2rem; cursor: pointer; }
.icon-link:hover { background: var(--brand-tint); }
.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.segmented a { padding: .35rem .7rem; border-left: 1px solid var(--line-strong); background: var(--paper); color: var(--ink-soft); text-decoration: none; font-size: .8rem; font-weight: 700; }
.segmented a:first-child { border-left: 0; }
.segmented a:hover { background: var(--surface-muted); color: var(--ink); }
.segmented a[aria-current="page"] { background: var(--brand-strong); color: #fff; }

.state, .count-badge { display: inline-flex; align-items: center; padding: .28rem .5rem; border-radius: var(--radius); font-size: .74rem; font-weight: 700; white-space: nowrap; }
.state-ok { background: var(--brand-tint); color: var(--brand-strong); }
.state-warning { background: var(--orange-tint); color: var(--orange-text); }
.state-danger { background: var(--red-tint); color: var(--red); }
.count-badge { background: var(--blue-tint); color: var(--blue); }
.notice { margin: 0 0 1rem; padding: .85rem 1rem; border-left: 4px solid var(--blue); background: var(--paper); box-shadow: var(--shadow); }
.notice.success { border-color: var(--brand); background: var(--brand-tint); }
.notice.warning { border-color: var(--orange); background: var(--orange-tint); }
.notice.danger { border-color: var(--red); background: var(--red-tint); }
.notice ul { margin: .5rem 0 0; }

/* Cards and panels -------------------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.kpi { min-height: 108px; display: grid; align-content: space-between; padding: .9rem 1rem; border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: var(--radius); background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); }
.kpi:hover { border-color: var(--silver); color: var(--ink); }
.kpi strong { margin: .2rem 0; font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.kpi > span { color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.kpi small { color: var(--muted); }
.dashboard-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.admin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.panel { min-width: 0; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.dashboard-grid > .panel { grid-column: span 4; }
.dashboard-grid > .panel.half { grid-column: span 6; }
.dashboard-grid > .panel.wide { grid-column: span 8; }
.dashboard-grid > .panel.full { grid-column: span 12; }
.admin-grid > .panel.span-2 { grid-column: span 2; }
.panel-header { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 1rem; }
.panel-header .eyebrow { display: block; margin-bottom: .2rem; }

.bar-list { display: grid; gap: .55rem; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 2fr) 5ch; gap: .8rem; align-items: center; padding: .1rem 0; color: var(--ink); text-decoration: none; }
.bar-row:hover { color: var(--brand-strong); }
.bar-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row strong { text-align: right; font-variant-numeric: tabular-nums; }
progress { width: 100%; height: 8px; border: 0; border-radius: 0; background: var(--slate-tint); }
progress::-webkit-progress-bar { background: var(--slate-tint); }
progress::-webkit-progress-value { background: var(--brand); }
progress::-moz-progress-bar { background: var(--brand); }
.metric-list, .detail-list { margin: 0; }
.metric-list > div, .detail-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.metric-list > div:last-child, .detail-list > div:last-child { border-bottom: 0; }
.metric-list dt, .detail-list dt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.metric-list dd, .detail-list dd { flex: none; margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.detail-list dd.monospace { flex: 1 1 auto; min-width: 0; font-weight: 400; overflow-wrap: anywhere; }
.event-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.event-list li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: .7rem; align-items: baseline; }
.event-list li.empty { display: block; }
.event-list time { color: var(--muted); font-variant-numeric: tabular-nums; }
.event-list small { display: block; color: var(--muted); }
.issue-list { display: grid; gap: .4rem; }
.issue { display: grid; grid-template-columns: 72px minmax(140px, .7fr) minmax(180px, 1.3fr); gap: .7rem; align-items: center; padding: .6rem .7rem; border-left: 3px solid var(--line-strong); color: var(--ink); text-decoration: none; background: var(--surface-muted); }
.issue:hover { background: var(--canvas); color: var(--ink); }
.issue-error { border-color: var(--red); }
.issue-warning { border-color: var(--orange); }
.issue-info { border-color: var(--blue); }
.issue small { display: block; margin-top: .15rem; color: var(--muted); }
.issue-level { display: inline-block; width: max-content; padding: .15rem .4rem; border: 1px solid currentColor; border-radius: var(--radius); color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.issue-level.issue-error { border-color: var(--red); background: var(--red-tint); color: var(--red); }
.issue-level.issue-warning { border-color: var(--orange); background: var(--orange-tint); color: var(--orange-text); }
.issue-level.issue-info { border-color: var(--blue); background: var(--blue-tint); color: var(--blue); }

/* Roadmap ----------------------------------------------------------------- */
/* One row per project, months on the horizontal axis. Bar colour carries the
   coarse state only (five classes, validated for protan/deutan separation with
   scripts/validate_palette.js from the dataviz skill); the exact status is text
   on every row, so nothing is encoded by colour alone. */
.roadmap { --rm-head: 250px; --rm-value: 118px; --rm-row: 26px; --rm-gap: 4px; }
.rm-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.rm-legend { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: 0; padding: 0; list-style: none; font-size: .78rem; }
.rm-legend li { display: flex; align-items: center; gap: .4rem; color: var(--ink-soft); }
.rm-legend b { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 700; }
.rm-swatch { flex: none; width: 14px; height: 10px; border-radius: 2px; }
.rm-note { margin: 0 0 .75rem; color: var(--muted); font-size: .8rem; }
.rm-chart { display: grid; gap: 0; }

.rm-axis { display: grid; grid-template-columns: var(--rm-head) minmax(0, 1fr) var(--rm-value); gap: 0 .6rem; align-items: end; position: sticky; top: 0; z-index: 2; padding-bottom: .3rem; background: var(--paper); }
.rm-axis-title { align-self: end; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.rm-axis-value { text-align: right; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.rm-scale { min-width: 0; }
.rm-years { display: grid; margin-bottom: 2px; }
.rm-year { grid-row: 1; padding: 0 .3rem 2px; border-bottom: 1px solid var(--line-strong); color: var(--ink-soft); font-size: .72rem; font-weight: 700; overflow: hidden; }
.rm-months { display: grid; }
.rm-month { grid-row: 1; overflow: visible; padding-top: 2px; color: var(--muted); font-size: .68rem; text-align: center; white-space: nowrap; }
.rm-month.is-quarter { color: var(--ink-soft); font-weight: 700; }
.rm-month.is-now { color: var(--orange-text); font-weight: 700; }

.rm-section { padding-top: .85rem; border-top: 1px solid var(--line-strong); }
.rm-section + .rm-section { margin-top: 1rem; }
.rm-section-header { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: .3rem 1rem; margin-bottom: .6rem; }
.rm-section-header p { margin: .2rem 0 0; color: var(--muted); font-size: .8rem; }
.rm-section-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; font-size: .8rem; }
.rm-section-actions a { display: inline-flex; align-items: center; min-height: 44px; }
.rm-section .rm-note { display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.rm-section .roadmap-scroll { max-height: 320px; }
.rm-empty { margin: 0; padding: .75rem; background: var(--surface-muted); color: var(--muted); font-size: .82rem; }

.rm-row { display: grid; grid-template-columns: var(--rm-head) minmax(0, 1fr) var(--rm-value); align-items: center; gap: 0 .6rem; border-radius: 2px; color: var(--ink); text-decoration: none; }
.rm-row:hover { background: var(--surface-muted); color: var(--ink); }
.rm-row:hover .rm-bar { filter: brightness(0.92); }
.rm-row-head { min-width: 0; display: grid; padding-left: .1rem; line-height: 1.2; }
.rm-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; font-weight: 700; }
.rm-row-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .74rem; }
.rm-row-value { color: var(--muted); font-size: .76rem; text-align: right; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The track carries the row's vertical padding so the month gridlines run
   unbroken down the whole chart instead of dashing between rows. */
.rm-track { position: relative; display: grid; min-width: 0; height: calc(var(--rm-row) + 2 * var(--rm-gap)); background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px var(--rm-step)); }
.rm-track > * { grid-row: 1; }
.rm-now { align-self: stretch; border-left: 1px solid rgb(235 106 10 / 65%); }
.rm-bar { position: relative; align-self: center; height: 14px; border-radius: 2px; box-shadow: 0 0 0 2px var(--paper); }
.rm-bar--active, .rm-swatch--active { background: #179c7d; }
.rm-bar--open, .rm-swatch--open { background: #005a94; }
.rm-bar--hold, .rm-swatch--hold { background: #eb6a0a; }
.rm-bar--rejected, .rm-swatch--rejected { background: #9e1c22; }
.rm-bar--closed, .rm-swatch--closed { background: #4c636f; }
.rm-bar.is-clip-start { border-start-start-radius: 0; border-end-start-radius: 0; }
.rm-bar.is-clip-end { border-start-end-radius: 0; border-end-end-radius: 0; }
.rm-bar.is-clip-start::before,
.rm-bar.is-clip-end::after { position: absolute; top: 50%; transform: translateY(-50%); color: var(--paper); font-size: .8rem; line-height: 1; }
.rm-bar.is-clip-start::before { content: "\2039"; left: 1px; }
.rm-bar.is-clip-end::after { content: "\203A"; right: 1px; }
.rm-bar.is-open-start { mask-image: linear-gradient(to right, transparent, #000 24px); }
.rm-bar.is-open-end { mask-image: linear-gradient(to left, transparent, #000 24px); }
/* Long windows: only quarter labels fit, and 60+ monthly gridlines turn into
   hatching, so drop them a step. The lines stay per-month because the window
   start is not guaranteed to fall on a quarter. */
.rm-dense .rm-month:not(.is-quarter) { visibility: hidden; }
.rm-dense .rm-track { background-image: repeating-linear-gradient(to right, var(--line-faint) 0 1px, transparent 1px var(--rm-step)); }

/* Forms ------------------------------------------------------------------- */
.filter-band { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem; margin: 0 0 1.1rem; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.filter-band label { display: grid; gap: .25rem; color: var(--muted); font-size: .74rem; font-weight: 700; }
.filter-band .search-field { flex: 1 1 250px; }
input, select, textarea { width: 100%; min-height: 38px; padding: .5rem .6rem; border: 1px solid var(--silver); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
input:hover, select:hover, textarea:hover { border-color: #a9b1b4; }
textarea { min-height: 72px; resize: vertical; }
label { display: grid; gap: .3rem; color: var(--ink-soft); font-size: .82rem; font-weight: 700; }
.form-grid { display: grid; gap: .8rem; }
.form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-3 { grid-column: span 3; }
.form-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }
.popover-form { position: relative; }
.popover-form > summary { list-style: none; }
.popover-form > summary::-webkit-details-marker { display: none; }
.popover-form > .form-panel { position: absolute; z-index: 20; right: 0; top: calc(100% + .5rem); width: min(900px, calc(100vw - 300px)); max-height: 78vh; overflow: auto; }
.form-panel { padding: 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-pop); }
.form-panel h2 { margin-bottom: 1rem; }
.form-panel.embedded { margin-top: .75rem; box-shadow: none; }
.form-panel > fieldset, .acquisition-editor form > fieldset {
  min-width: 0;
  margin: 0 0 1rem;
  padding: .7rem 0 0;
  border: 0;
  border-top: 1px solid var(--line-faint);
}
.form-panel > fieldset > legend, .acquisition-editor form > fieldset > legend {
  padding: 0 .5rem 0 0;
  color: var(--ink);
  font-size: .92rem;
  font-weight: 700;
}
.form-panel > fieldset > .subtle, .acquisition-editor form > fieldset > .subtle { margin: 0 0 .5rem; }
.form-panel > .record-details { margin-bottom: .8rem; }
.form-panel > .record-details[open] > label { margin-top: .6rem; }
.inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem; padding: .65rem 0; }
.inline-form label { flex: 1 1 180px; }
.danger-zone { display: flex; align-items: end; gap: .6rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid #e6c9ca; }
.danger-zone label { max-width: 340px; }

/* Tables ------------------------------------------------------------------ */
.table-section { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
.table-meta { padding: .7rem .9rem; border-bottom: 1px solid var(--line); color: var(--muted); }
.table-scroll { width: 100%; overflow: auto; }
.scroll-hint { font-size: .8rem; color: var(--muted); margin: .5rem 0; }
.table-scroll > .data-table > tbody > tr > th:first-child {
  position: sticky; left: 0; background: var(--paper); z-index: 1;
}
.data-table, .heatmap-table, .allocation-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td, .heatmap-table th, .heatmap-table td, .allocation-table th, .allocation-table td { padding: .6rem .7rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.data-table thead th, .heatmap-table thead th, .allocation-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-muted); border-bottom: 1px solid var(--line-strong); color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.data-table tbody tr:hover { background: var(--surface-muted); }
.data-table td small, .allocation-table th small { display: block; color: var(--muted); }
.row-number { color: var(--muted); font-variant-numeric: tabular-nums; }
.status-badge { display: inline-block; padding: .22rem .45rem; border-radius: var(--radius); background: var(--slate-tint); color: var(--slate); font-size: .74rem; font-weight: 700; white-space: nowrap; }
.status-badge--active { background: var(--brand-tint); color: var(--brand-strong); }
.status-badge--open { background: var(--blue-tint); color: var(--blue); }
.status-badge--hold { background: var(--orange-tint); color: var(--orange-text); }
.status-badge--rejected { background: var(--red-tint); color: var(--red); }
.status-badge--closed { background: var(--slate-tint); color: var(--slate); }
.status-cell { max-width: 260px; }
.truncate-cell { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.multiline { white-space: pre-wrap; }
.numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }
.continuation-row { background: var(--surface-muted); color: var(--ink-soft); }
.continuation-row td:first-child { border-left: 3px solid var(--blue-bright); }
.continuation-label { color: var(--blue); font-size: .8rem; font-weight: 700; }
.detail-row > td { padding: 0; border: 0; }
.detail-row details > summary { padding: .45rem .8rem; color: var(--brand-strong); cursor: pointer; font-size: .8rem; }
.record-detail { padding: 1rem; border-block: 1px solid var(--line); background: var(--surface-muted); }
.record-detail { max-width: min(900px, calc(100vw - 2rem)); }
.row-editor td { padding: 0; }
.row-editor details > summary { padding: .65rem .8rem; min-height: 44px; }
.row-editor .form-panel { box-shadow: none; }
.history-fields { min-width: 16rem; overflow-wrap: anywhere; }
.pagination { display: flex; flex-wrap: wrap; gap: .25rem; padding: .75rem; }
.pagination a { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink-soft); text-decoration: none; font-size: .85rem; }
.pagination a:hover { background: var(--surface-muted); }
.pagination a[aria-current="page"] { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; font-weight: 700; }
.empty { padding: 1.5rem; color: var(--muted); text-align: center; }

/* Capacity ---------------------------------------------------------------- */
.legend { display: flex; flex-wrap: wrap; gap: .3rem; font-size: .72rem; }
.legend span { padding: .22rem .45rem; border-radius: var(--radius); font-weight: 700; }
.legend .available, .legend .near, .legend .overloaded { border: 0; }
.available { background: var(--brand-tint); color: var(--brand-strong); }
.near { background: var(--orange-tint); color: var(--orange-text); }
.overloaded { background: var(--red-tint); color: var(--red); }
.missing { background: var(--surface-muted); color: var(--muted); }
.heatmap-table, .allocation-table { min-width: 760px; }
.heatmap-table th:first-child, .allocation-table th:first-child { position: sticky; left: 0; z-index: 3; min-width: 130px; background: var(--paper); }
.heatmap-table thead th:first-child, .allocation-table thead th:first-child { z-index: 4; background: var(--surface-muted); }
.heatmap-table td { min-width: 86px; padding: .35rem .4rem; text-align: center; font-variant-numeric: tabular-nums; }
.heatmap-table td small { display: block; font-size: .62rem; }
.block-list { display: grid; gap: .8rem; }
.project-block { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.project-block > header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.project-block > header > span { color: var(--muted); font-size: .82rem; }
.project-id { display: block; color: var(--brand-strong); font-size: .72rem; font-weight: 700; letter-spacing: .05em; }
.inline-editor { margin-inline: 1rem; }
.inline-editor > summary { padding: .55rem 0; cursor: pointer; color: var(--brand-strong); font-size: .85rem; }
.block-actions { padding: .7rem 1rem; border-top: 1px solid var(--line); background: var(--surface-muted); }
.block-actions > details[open] { flex: 1 1 100%; }
.block-actions .inline-form, .block-actions .danger-zone { margin-top: .2rem; padding-top: .6rem; }
.block-actions .inline-form { padding-bottom: 0; }
.allocation-table td { min-width: 82px; padding: .3rem; text-align: center; font-variant-numeric: tabular-nums; }
.allocation-input { min-width: 68px; height: 32px; min-height: 32px; padding: .2rem .3rem; text-align: right; }
.tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line-strong); }
.tabs a { padding: .6rem .85rem; border-bottom: 3px solid transparent; color: var(--muted); text-decoration: none; font-weight: 700; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { border-color: var(--brand); color: var(--brand-strong); }

/* Records and admin ------------------------------------------------------- */
.record-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.record-list > .table-meta { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.record-card { display: flex; flex-direction: column; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.record-card header { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .8rem; }
.record-card header h2 { font-size: 1rem; }
.record-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; margin: 0; }
.record-card dl div { min-width: 0; }
.record-card dt { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.record-card dd { margin: .15rem 0 0; overflow-wrap: anywhere; white-space: pre-wrap; font-size: .88rem; }
.record-card > .button-row { margin-top: auto; padding-top: .9rem; }
.record-card > .button-row > details { min-width: 0; }
.record-card > .button-row > details[open] { flex: 1 1 100%; }
.quality-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); overflow: hidden; }
.quality-summary div { display: flex; align-items: baseline; gap: .5rem; padding: 1rem; background: var(--paper); }
.quality-summary strong { font-size: 1.6rem; font-weight: 700; }
.reference-list { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.reference-list li { display: flex; gap: .6rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.reference-list li:last-child { border-bottom: 0; }
.reference-list span { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius); background: var(--brand-tint); color: var(--brand-strong); font-size: .75rem; font-weight: 700; }
.monospace { font-family: "Liberation Mono", "Consolas", monospace; font-size: .82rem; }
.break-all { word-break: break-all; }
.restore { position: relative; }
.restore form { position: absolute; z-index: 10; right: 0; width: 380px; padding: .8rem; border: 1px solid #d9a3a5; border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-pop); }
.error-page { min-height: 100vh; display: grid; place-items: center; padding: 2rem; }
.error-page section { max-width: 620px; padding: 2rem; border-left: 5px solid var(--red); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.error-page .button + .button { margin-left: .5rem; }
.error-code { display: block; margin-bottom: .5rem; color: var(--red); font-size: 2rem; font-weight: 700; }
.htmx-request .htmx-indicator { display: inline-block; }

@media (max-width: 1250px) {
  .roadmap { --rm-head: 200px; --rm-value: 78px; }
}

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 190px minmax(0, 1fr); }
  main { padding-inline: 1rem; }
  .topbar { padding-inline: 1rem; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid > .panel, .dashboard-grid > .panel.half { grid-column: span 6; }
  .dashboard-grid > .panel.wide, .dashboard-grid > .panel.full { grid-column: span 12; }
  .popover-form > .form-panel { width: calc(100vw - 230px); }
}

@media (max-width: 720px) {
  .app-shell { display: block; }
  .sidebar { position: static; width: 100%; height: auto; padding: .8rem; }
  .brand { flex-direction: row; align-items: center; gap: .6rem; padding: 0; }
  .brand-logo { width: 62px; }
  .sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
  /* The header collapses to a band above the content; a second institute mark
     and the revision line would push the actual page below the fold. */
  .sidebar-foot { display: none; }
  .topbar { align-items: start; }
  .workbook-state time { display: none; }
  .page-heading, .section-heading { align-items: start; flex-direction: column; }
  .kpi-grid, .admin-grid, .record-list { grid-template-columns: 1fr; }
  .dashboard-grid > .panel, .dashboard-grid > .panel.half,
  .dashboard-grid > .panel.wide, .dashboard-grid > .panel.full { grid-column: span 12; }
  .admin-grid > .panel.span-2 { grid-column: auto; }
  .issue { grid-template-columns: 72px 1fr; }
  .issue > :last-child { grid-column: 1 / -1; }
  .roadmap { --rm-head: 130px; --rm-value: 0px; }
  .rm-axis, .rm-row { grid-template-columns: var(--rm-head) minmax(0, 1fr); }
  .rm-axis-value, .rm-row-value { display: none; }
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
  .form-grid .span-2, .form-grid .span-3 { grid-column: auto; }
  .popover-form { width: 100%; }
  .popover-form > .form-panel { position: fixed; inset: 1rem; width: auto; max-height: calc(100vh - 2rem); }
  .danger-zone { align-items: stretch; flex-direction: column; }
  .record-card dl { grid-template-columns: 1fr; }
  .quality-summary { grid-template-columns: 1fr; }
  .restore form { position: fixed; inset: auto 1rem 1rem; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Roadmap grid utilities -- generated, see scripts/gen_roadmap_css.py.
   The Content-Security-Policy of this app is `style-src 'self'`, which blocks
   inline style attributes, so column placement has to come from real classes. */
.rm-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); --rm-step: calc(100% / 1); }
.rm-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); --rm-step: calc(100% / 2); }
.rm-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); --rm-step: calc(100% / 3); }
.rm-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); --rm-step: calc(100% / 4); }
.rm-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); --rm-step: calc(100% / 5); }
.rm-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); --rm-step: calc(100% / 6); }
.rm-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); --rm-step: calc(100% / 7); }
.rm-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); --rm-step: calc(100% / 8); }
.rm-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); --rm-step: calc(100% / 9); }
.rm-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); --rm-step: calc(100% / 10); }
.rm-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); --rm-step: calc(100% / 11); }
.rm-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); --rm-step: calc(100% / 12); }
.rm-cols-13 { grid-template-columns: repeat(13, minmax(0, 1fr)); --rm-step: calc(100% / 13); }
.rm-cols-14 { grid-template-columns: repeat(14, minmax(0, 1fr)); --rm-step: calc(100% / 14); }
.rm-cols-15 { grid-template-columns: repeat(15, minmax(0, 1fr)); --rm-step: calc(100% / 15); }
.rm-cols-16 { grid-template-columns: repeat(16, minmax(0, 1fr)); --rm-step: calc(100% / 16); }
.rm-cols-17 { grid-template-columns: repeat(17, minmax(0, 1fr)); --rm-step: calc(100% / 17); }
.rm-cols-18 { grid-template-columns: repeat(18, minmax(0, 1fr)); --rm-step: calc(100% / 18); }
.rm-cols-19 { grid-template-columns: repeat(19, minmax(0, 1fr)); --rm-step: calc(100% / 19); }
.rm-cols-20 { grid-template-columns: repeat(20, minmax(0, 1fr)); --rm-step: calc(100% / 20); }
.rm-cols-21 { grid-template-columns: repeat(21, minmax(0, 1fr)); --rm-step: calc(100% / 21); }
.rm-cols-22 { grid-template-columns: repeat(22, minmax(0, 1fr)); --rm-step: calc(100% / 22); }
.rm-cols-23 { grid-template-columns: repeat(23, minmax(0, 1fr)); --rm-step: calc(100% / 23); }
.rm-cols-24 { grid-template-columns: repeat(24, minmax(0, 1fr)); --rm-step: calc(100% / 24); }
.rm-cols-25 { grid-template-columns: repeat(25, minmax(0, 1fr)); --rm-step: calc(100% / 25); }
.rm-cols-26 { grid-template-columns: repeat(26, minmax(0, 1fr)); --rm-step: calc(100% / 26); }
.rm-cols-27 { grid-template-columns: repeat(27, minmax(0, 1fr)); --rm-step: calc(100% / 27); }
.rm-cols-28 { grid-template-columns: repeat(28, minmax(0, 1fr)); --rm-step: calc(100% / 28); }
.rm-cols-29 { grid-template-columns: repeat(29, minmax(0, 1fr)); --rm-step: calc(100% / 29); }
.rm-cols-30 { grid-template-columns: repeat(30, minmax(0, 1fr)); --rm-step: calc(100% / 30); }
.rm-cols-31 { grid-template-columns: repeat(31, minmax(0, 1fr)); --rm-step: calc(100% / 31); }
.rm-cols-32 { grid-template-columns: repeat(32, minmax(0, 1fr)); --rm-step: calc(100% / 32); }
.rm-cols-33 { grid-template-columns: repeat(33, minmax(0, 1fr)); --rm-step: calc(100% / 33); }
.rm-cols-34 { grid-template-columns: repeat(34, minmax(0, 1fr)); --rm-step: calc(100% / 34); }
.rm-cols-35 { grid-template-columns: repeat(35, minmax(0, 1fr)); --rm-step: calc(100% / 35); }
.rm-cols-36 { grid-template-columns: repeat(36, minmax(0, 1fr)); --rm-step: calc(100% / 36); }
.rm-cols-37 { grid-template-columns: repeat(37, minmax(0, 1fr)); --rm-step: calc(100% / 37); }
.rm-cols-38 { grid-template-columns: repeat(38, minmax(0, 1fr)); --rm-step: calc(100% / 38); }
.rm-cols-39 { grid-template-columns: repeat(39, minmax(0, 1fr)); --rm-step: calc(100% / 39); }
.rm-cols-40 { grid-template-columns: repeat(40, minmax(0, 1fr)); --rm-step: calc(100% / 40); }
.rm-cols-41 { grid-template-columns: repeat(41, minmax(0, 1fr)); --rm-step: calc(100% / 41); }
.rm-cols-42 { grid-template-columns: repeat(42, minmax(0, 1fr)); --rm-step: calc(100% / 42); }
.rm-cols-43 { grid-template-columns: repeat(43, minmax(0, 1fr)); --rm-step: calc(100% / 43); }
.rm-cols-44 { grid-template-columns: repeat(44, minmax(0, 1fr)); --rm-step: calc(100% / 44); }
.rm-cols-45 { grid-template-columns: repeat(45, minmax(0, 1fr)); --rm-step: calc(100% / 45); }
.rm-cols-46 { grid-template-columns: repeat(46, minmax(0, 1fr)); --rm-step: calc(100% / 46); }
.rm-cols-47 { grid-template-columns: repeat(47, minmax(0, 1fr)); --rm-step: calc(100% / 47); }
.rm-cols-48 { grid-template-columns: repeat(48, minmax(0, 1fr)); --rm-step: calc(100% / 48); }
.rm-cols-49 { grid-template-columns: repeat(49, minmax(0, 1fr)); --rm-step: calc(100% / 49); }
.rm-cols-50 { grid-template-columns: repeat(50, minmax(0, 1fr)); --rm-step: calc(100% / 50); }
.rm-cols-51 { grid-template-columns: repeat(51, minmax(0, 1fr)); --rm-step: calc(100% / 51); }
.rm-cols-52 { grid-template-columns: repeat(52, minmax(0, 1fr)); --rm-step: calc(100% / 52); }
.rm-cols-53 { grid-template-columns: repeat(53, minmax(0, 1fr)); --rm-step: calc(100% / 53); }
.rm-cols-54 { grid-template-columns: repeat(54, minmax(0, 1fr)); --rm-step: calc(100% / 54); }
.rm-cols-55 { grid-template-columns: repeat(55, minmax(0, 1fr)); --rm-step: calc(100% / 55); }
.rm-cols-56 { grid-template-columns: repeat(56, minmax(0, 1fr)); --rm-step: calc(100% / 56); }
.rm-cols-57 { grid-template-columns: repeat(57, minmax(0, 1fr)); --rm-step: calc(100% / 57); }
.rm-cols-58 { grid-template-columns: repeat(58, minmax(0, 1fr)); --rm-step: calc(100% / 58); }
.rm-cols-59 { grid-template-columns: repeat(59, minmax(0, 1fr)); --rm-step: calc(100% / 59); }
.rm-cols-60 { grid-template-columns: repeat(60, minmax(0, 1fr)); --rm-step: calc(100% / 60); }
.rm-cols-61 { grid-template-columns: repeat(61, minmax(0, 1fr)); --rm-step: calc(100% / 61); }
.rm-cols-62 { grid-template-columns: repeat(62, minmax(0, 1fr)); --rm-step: calc(100% / 62); }
.rm-cols-63 { grid-template-columns: repeat(63, minmax(0, 1fr)); --rm-step: calc(100% / 63); }
.rm-cols-64 { grid-template-columns: repeat(64, minmax(0, 1fr)); --rm-step: calc(100% / 64); }
.rm-cols-65 { grid-template-columns: repeat(65, minmax(0, 1fr)); --rm-step: calc(100% / 65); }
.rm-cols-66 { grid-template-columns: repeat(66, minmax(0, 1fr)); --rm-step: calc(100% / 66); }
.rm-cols-67 { grid-template-columns: repeat(67, minmax(0, 1fr)); --rm-step: calc(100% / 67); }
.rm-cols-68 { grid-template-columns: repeat(68, minmax(0, 1fr)); --rm-step: calc(100% / 68); }
.rm-cols-69 { grid-template-columns: repeat(69, minmax(0, 1fr)); --rm-step: calc(100% / 69); }
.rm-cols-70 { grid-template-columns: repeat(70, minmax(0, 1fr)); --rm-step: calc(100% / 70); }
.rm-cols-71 { grid-template-columns: repeat(71, minmax(0, 1fr)); --rm-step: calc(100% / 71); }
.rm-cols-72 { grid-template-columns: repeat(72, minmax(0, 1fr)); --rm-step: calc(100% / 72); }

.gc-start-1 { grid-column-start: 1; }
.gc-start-2 { grid-column-start: 2; }
.gc-start-3 { grid-column-start: 3; }
.gc-start-4 { grid-column-start: 4; }
.gc-start-5 { grid-column-start: 5; }
.gc-start-6 { grid-column-start: 6; }
.gc-start-7 { grid-column-start: 7; }
.gc-start-8 { grid-column-start: 8; }
.gc-start-9 { grid-column-start: 9; }
.gc-start-10 { grid-column-start: 10; }
.gc-start-11 { grid-column-start: 11; }
.gc-start-12 { grid-column-start: 12; }
.gc-start-13 { grid-column-start: 13; }
.gc-start-14 { grid-column-start: 14; }
.gc-start-15 { grid-column-start: 15; }
.gc-start-16 { grid-column-start: 16; }
.gc-start-17 { grid-column-start: 17; }
.gc-start-18 { grid-column-start: 18; }
.gc-start-19 { grid-column-start: 19; }
.gc-start-20 { grid-column-start: 20; }
.gc-start-21 { grid-column-start: 21; }
.gc-start-22 { grid-column-start: 22; }
.gc-start-23 { grid-column-start: 23; }
.gc-start-24 { grid-column-start: 24; }
.gc-start-25 { grid-column-start: 25; }
.gc-start-26 { grid-column-start: 26; }
.gc-start-27 { grid-column-start: 27; }
.gc-start-28 { grid-column-start: 28; }
.gc-start-29 { grid-column-start: 29; }
.gc-start-30 { grid-column-start: 30; }
.gc-start-31 { grid-column-start: 31; }
.gc-start-32 { grid-column-start: 32; }
.gc-start-33 { grid-column-start: 33; }
.gc-start-34 { grid-column-start: 34; }
.gc-start-35 { grid-column-start: 35; }
.gc-start-36 { grid-column-start: 36; }
.gc-start-37 { grid-column-start: 37; }
.gc-start-38 { grid-column-start: 38; }
.gc-start-39 { grid-column-start: 39; }
.gc-start-40 { grid-column-start: 40; }
.gc-start-41 { grid-column-start: 41; }
.gc-start-42 { grid-column-start: 42; }
.gc-start-43 { grid-column-start: 43; }
.gc-start-44 { grid-column-start: 44; }
.gc-start-45 { grid-column-start: 45; }
.gc-start-46 { grid-column-start: 46; }
.gc-start-47 { grid-column-start: 47; }
.gc-start-48 { grid-column-start: 48; }
.gc-start-49 { grid-column-start: 49; }
.gc-start-50 { grid-column-start: 50; }
.gc-start-51 { grid-column-start: 51; }
.gc-start-52 { grid-column-start: 52; }
.gc-start-53 { grid-column-start: 53; }
.gc-start-54 { grid-column-start: 54; }
.gc-start-55 { grid-column-start: 55; }
.gc-start-56 { grid-column-start: 56; }
.gc-start-57 { grid-column-start: 57; }
.gc-start-58 { grid-column-start: 58; }
.gc-start-59 { grid-column-start: 59; }
.gc-start-60 { grid-column-start: 60; }
.gc-start-61 { grid-column-start: 61; }
.gc-start-62 { grid-column-start: 62; }
.gc-start-63 { grid-column-start: 63; }
.gc-start-64 { grid-column-start: 64; }
.gc-start-65 { grid-column-start: 65; }
.gc-start-66 { grid-column-start: 66; }
.gc-start-67 { grid-column-start: 67; }
.gc-start-68 { grid-column-start: 68; }
.gc-start-69 { grid-column-start: 69; }
.gc-start-70 { grid-column-start: 70; }
.gc-start-71 { grid-column-start: 71; }
.gc-start-72 { grid-column-start: 72; }

.gc-span-1 { grid-column-end: span 1; }
.gc-span-2 { grid-column-end: span 2; }
.gc-span-3 { grid-column-end: span 3; }
.gc-span-4 { grid-column-end: span 4; }
.gc-span-5 { grid-column-end: span 5; }
.gc-span-6 { grid-column-end: span 6; }
.gc-span-7 { grid-column-end: span 7; }
.gc-span-8 { grid-column-end: span 8; }
.gc-span-9 { grid-column-end: span 9; }
.gc-span-10 { grid-column-end: span 10; }
.gc-span-11 { grid-column-end: span 11; }
.gc-span-12 { grid-column-end: span 12; }
.gc-span-13 { grid-column-end: span 13; }
.gc-span-14 { grid-column-end: span 14; }
.gc-span-15 { grid-column-end: span 15; }
.gc-span-16 { grid-column-end: span 16; }
.gc-span-17 { grid-column-end: span 17; }
.gc-span-18 { grid-column-end: span 18; }
.gc-span-19 { grid-column-end: span 19; }
.gc-span-20 { grid-column-end: span 20; }
.gc-span-21 { grid-column-end: span 21; }
.gc-span-22 { grid-column-end: span 22; }
.gc-span-23 { grid-column-end: span 23; }
.gc-span-24 { grid-column-end: span 24; }
.gc-span-25 { grid-column-end: span 25; }
.gc-span-26 { grid-column-end: span 26; }
.gc-span-27 { grid-column-end: span 27; }
.gc-span-28 { grid-column-end: span 28; }
.gc-span-29 { grid-column-end: span 29; }
.gc-span-30 { grid-column-end: span 30; }
.gc-span-31 { grid-column-end: span 31; }
.gc-span-32 { grid-column-end: span 32; }
.gc-span-33 { grid-column-end: span 33; }
.gc-span-34 { grid-column-end: span 34; }
.gc-span-35 { grid-column-end: span 35; }
.gc-span-36 { grid-column-end: span 36; }
.gc-span-37 { grid-column-end: span 37; }
.gc-span-38 { grid-column-end: span 38; }
.gc-span-39 { grid-column-end: span 39; }
.gc-span-40 { grid-column-end: span 40; }
.gc-span-41 { grid-column-end: span 41; }
.gc-span-42 { grid-column-end: span 42; }
.gc-span-43 { grid-column-end: span 43; }
.gc-span-44 { grid-column-end: span 44; }
.gc-span-45 { grid-column-end: span 45; }
.gc-span-46 { grid-column-end: span 46; }
.gc-span-47 { grid-column-end: span 47; }
.gc-span-48 { grid-column-end: span 48; }
.gc-span-49 { grid-column-end: span 49; }
.gc-span-50 { grid-column-end: span 50; }
.gc-span-51 { grid-column-end: span 51; }
.gc-span-52 { grid-column-end: span 52; }
.gc-span-53 { grid-column-end: span 53; }
.gc-span-54 { grid-column-end: span 54; }
.gc-span-55 { grid-column-end: span 55; }
.gc-span-56 { grid-column-end: span 56; }
.gc-span-57 { grid-column-end: span 57; }
.gc-span-58 { grid-column-end: span 58; }
.gc-span-59 { grid-column-end: span 59; }
.gc-span-60 { grid-column-end: span 60; }
.gc-span-61 { grid-column-end: span 61; }
.gc-span-62 { grid-column-end: span 62; }
.gc-span-63 { grid-column-end: span 63; }
.gc-span-64 { grid-column-end: span 64; }
.gc-span-65 { grid-column-end: span 65; }
.gc-span-66 { grid-column-end: span 66; }
.gc-span-67 { grid-column-end: span 67; }
.gc-span-68 { grid-column-end: span 68; }
.gc-span-69 { grid-column-end: span 69; }
.gc-span-70 { grid-column-end: span 70; }
.gc-span-71 { grid-column-end: span 71; }
.gc-span-72 { grid-column-end: span 72; }

/* Standalone planner: one matrix, one on-demand editor, touch-friendly controls. */
.workspace, main, .panel, .table-section { min-width: 0; }
.topbar-category { display: block; color: var(--muted); font-size: .8rem; }
.session-user { color: var(--muted); }
.panel { box-shadow: none; }
.panel + .panel { margin-top: 1.5rem; }
.overview-metrics { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 1.5rem; margin: 0 0 2rem; align-items: stretch; }
.overview-metrics a { color: var(--ink); text-decoration: none; padding: 1rem 0; border-top: 2px solid var(--line-strong); display: flex; flex-direction: column; gap: .5rem; }
.overview-metrics .hero-metric { border-color: var(--brand); }
.hero-metric strong { font-size: 3.5rem; line-height: 1; color: var(--brand-strong); }
.support-metric strong { font-size: 2rem; }
.hero-metric small { color: var(--muted); max-width: 34ch; }
.roadmap-scroll { overflow-x: auto; max-width: 100%; }
.rm-chart { min-width: 1000px; }
.rm-range { display: block; color: var(--muted); font-size: .75rem; }
.matrix-help { font-size: .9rem; max-width: 100ch; }
.matrix-scroll { max-height: 74vh; overflow: auto; border: 1px solid var(--line-strong); background: var(--paper); }
.capacity-matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; }
.capacity-matrix caption { padding: .75rem; text-align: left; background: var(--paper); }
.capacity-matrix th, .capacity-matrix td { padding: .4rem .65rem; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line-faint); text-align: center; min-width: 100px; }
.capacity-matrix thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-muted); white-space: nowrap; font-size: .85rem; }
.capacity-matrix th:first-child { position: sticky; left: 0; z-index: 2; background: var(--paper); min-width: 220px; max-width: 320px; text-align: left; }
.capacity-matrix thead th:first-child { z-index: 4; background: var(--surface-muted); }
.capacity-matrix .project-heading th, .capacity-matrix .matrix-section th { position: static; text-align: left; background: var(--surface-muted); padding: .65rem; border-top: 2px solid var(--line-strong); }
.project-meta { font-size: .8rem; font-weight: 400; margin-left: 1rem; color: var(--muted); }
.cell-launch { display: flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; color: var(--ink); }
.cell-launch:hover { outline: 2px solid var(--brand-strong); outline-offset: -2px; }
.load-label { display: block; font-size: .7rem; margin: .25rem 0; padding: .1rem .3rem; border-radius: 3px; white-space: nowrap; }
.heat-0 { background: #f7fbf9; }.heat-1 { background: #e8f4f0; }.heat-2 { background: #d7ebe4; }.heat-3 { background: #b4dcd3; }.heat-4 { background: #94cbbb; }
.heat-inactive { background: var(--surface-muted); color: var(--muted); }
.editor-panel { border-left: 4px solid var(--brand); background: var(--paper); padding: 1rem; margin: 1rem 0; }
.editor-panel header { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 1rem; }
.editor-panel form { margin-bottom: .75rem; }.editor-panel input[type=number] { max-width: 16rem; }
.saved-label { color: var(--brand-strong); }.htmx-indicator { display: none; }.htmx-request.htmx-indicator, .htmx-request .htmx-indicator { display: inline; }
.planning-shortcuts { margin-bottom: .6rem; }
.planning-shortcuts [aria-current="page"] { border-color: var(--brand-strong); background: var(--brand-tint); }
.planning-count { font-size: .85rem; }
.role-badge, .issue-level, .data-table thead th { text-transform: none; letter-spacing: 0; }
.data-table thead th { font-size: .82rem; }
.detail-list dt { white-space: normal; overflow: visible; }
.detail-list dd { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.detail-list dd { text-align: left; font-weight: 400; }
.popover-form > .form-panel { position: static; margin-top: .75rem; width: min(900px, calc(100vw - 300px)); }
.popover-form[open] { flex: 1 1 100%; }
.page-heading:has(.popover-form[open]) { flex-wrap: wrap; }
button[disabled] { opacity: .6; cursor: wait; }.checkbox-label { display: flex; align-items: center; gap: .5rem; }.checkbox-label input { width: auto; min-height: 24px; }
.login-page { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }.login-panel { width: min(100%, 420px); padding: 2rem; background: var(--paper); border-top: 4px solid var(--brand); }.login-panel form { display: grid; gap: 1rem; }.login-panel h1 { margin-bottom: 1.5rem; }
.login-logo { width: 106px; height: auto; }
@media (max-width: 900px) { .overview-metrics { grid-template-columns: 1fr 1fr; }.hero-metric { grid-column: 1 / -1; }.sidebar nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }.sidebar nav a { min-height: 44px; }.topbar { flex-wrap: wrap; }.workbook-state { flex-wrap: wrap; }.project-meta { display: block; margin-left: 0; } }
@media (max-width: 1050px) { .popover-form > .form-panel { width: min(900px, calc(100vw - 230px)); } }
@media (max-width: 720px) {
  .popover-form > .form-panel { position: static; inset: auto; width: 100%; max-height: none; }
  .record-detail { padding: .75rem; }
  .detail-list > div { display: grid; gap: .25rem; }
}
@media (max-width: 600px) { main { padding: 1rem; }.sidebar { padding: .75rem; }.sidebar nav a { min-height: 44px; padding: .65rem .4rem; font-size: .85rem; }.brand { flex-direction: row; align-items: center; }.brand-logo { width: 50px; }.brand-title { max-width: 22ch; }.page-heading { align-items: stretch; flex-direction: column; }.filter-band { display: grid; grid-template-columns: 1fr 1fr; }.filter-band label { min-width: 0; }.filter-band .search-field { grid-column: 1 / -1; }.filter-band input, .filter-band select { width: 100%; min-width: 0; }input, select, textarea { font-size: 16px; min-height: 44px; } .button { min-height: 44px; }.form-grid, .form-grid-3, .inline-form { display: grid; grid-template-columns: minmax(0, 1fr); }.span-2, .span-3 { grid-column: auto; }.form-panel { min-width: 0; max-width: 100%; }.capacity-matrix th:first-child { min-width: 160px; max-width: 220px; }.editor-panel header { flex-wrap: wrap; }.overview-metrics { gap: .75rem; }.support-metric span { font-size: .85rem; }.table-scroll details .form-panel { min-width: 250px; }.topbar time { display: none; } }
@media print { @page { size: A4 landscape; margin: 12mm; }.sidebar, .topbar, .filter-band, .editor-panel, .page-heading > a, .button, .segmented, #flash { display: none !important; }.app-shell { display: block; } main { padding: 0; }.matrix-scroll { max-height: none; overflow: visible; border: none; }.capacity-matrix { font-size: 8pt; }.capacity-matrix th, .capacity-matrix td { min-width: 0; padding: 3px; }.capacity-matrix th:first-child { min-width: 100px; position: static; }.cell-launch { min-height: 0; }.load-label { font-size: 6pt; }.roadmap-scroll { overflow: visible; }.rm-chart { min-width: 0; }.panel { break-inside: avoid; }.capacity-matrix thead { display: table-header-group; } }

/* Compact operational workbench: task views, not a wall of matrices/forms. */
.app-shell { grid-template-columns: 216px minmax(0, 1fr); }
.sidebar { padding-top: 1.1rem; }
.sidebar nav { margin-top: 1.2rem; }
main { padding: 1.35rem 1.5rem 2rem; }
.topbar { padding: .65rem 1.5rem; min-height: 58px; }
.topbar-category { display: none; }
.page-heading { margin-bottom: 1rem; align-items: center; }
.page-heading p { margin: .4rem 0 0; font-size: .95rem; }
h1 { font-size: 1.6rem; }
.overview-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.overview-metrics a { padding: .8rem; gap: .3rem; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--line-strong); border-radius: var(--radius); }
.overview-metrics .hero-metric { grid-column: auto; border-top-color: var(--brand-strong); }
.hero-metric strong, .support-metric strong { font-size: 2.2rem; line-height: 1.1; }
.overview-metrics small { font-size: .8rem; color: var(--muted); }
.dashboard-grid > .panel + .panel, .admin-grid > .panel + .panel { margin-top: 0; }
.workspace-tabs { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; border-bottom: 1px solid var(--line-strong); margin: 0 0 1rem; }
.workspace-tabs > a { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .2rem; color: var(--ink-soft); text-decoration: none; border-bottom: 3px solid transparent; }
.workspace-tabs > a[aria-current="page"] { border-color: var(--brand-strong); color: var(--brand-strong); font-weight: 700; }
.workspace-tabs > a:hover { color: var(--brand-strong); }
.compact-toolbar { gap: .6rem; }
.planning-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 0 0 1rem; }
.planning-shortcuts { margin-bottom: 0; }
.project-workbench { display: grid; grid-template-columns: minmax(225px, 28%) minmax(0, 1fr); gap: 1rem; align-items: start; }
.project-workbench > .panel + .panel { margin-top: 0; }
.project-directory { padding: .85rem; }
.directory-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.directory-list a { display: grid; gap: .15rem; padding: .65rem .7rem; color: var(--ink); text-decoration: none; border: 1px solid transparent; border-left: 3px solid transparent; border-radius: var(--radius); overflow-wrap: anywhere; }
.directory-list a:hover { background: var(--surface-muted); }
.directory-list a[aria-current="true"] { background: var(--brand-tint); border-left-color: var(--brand-strong); }
.directory-list span, .directory-list small { font-size: .8rem; color: var(--muted); }
.project-directory .pagination { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-top: .85rem; margin-top: .5rem; border-top: 1px solid var(--line); font-size: .8rem; }
.project-focus .panel-header { margin-bottom: .5rem; }
.project-focus h2 { font-size: 1.25rem; overflow-wrap: anywhere; }
.project-focus .state { margin-top: .4rem; }
.matrix-scroll { max-height: 58vh; }
.dense-table caption { font-size: .85rem; padding: .6rem; }
.capacity-matrix.dense-table th, .capacity-matrix.dense-table td { padding: .25rem .5rem; min-width: 88px; }
.capacity-matrix.dense-table th:first-child { min-width: 145px; max-width: 230px; overflow-wrap: anywhere; }
.record-details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.record-details > summary { cursor: pointer; padding: .75rem; font-weight: 600; }
.record-details > summary:hover { background: var(--surface-muted); }
.record-details > :not(summary) { margin-left: .75rem; margin-right: .75rem; }
.record-details + .record-details { margin-top: .6rem; }
.record-details[open] > summary { border-bottom: 1px solid var(--line); }
.matrix-legend { margin-top: .8rem; font-size: .85rem; }
.bounded-region { max-height: 440px; overflow: auto; }
.nav-toggle { display: none; }
.language-switch a { min-height: 32px; display: flex; align-items: center; }
.language-switch a[aria-current="true"] { background: var(--brand-strong); color: white; }
.planning-status { margin: .75rem 0; }
@media (max-width: 1050px) { .app-shell { grid-template-columns: 190px minmax(0, 1fr); }.project-workbench { grid-template-columns: 225px minmax(0, 1fr); } }
@media (max-width: 900px) {
 .app-shell { display: block; }.sidebar { position: static; height: auto; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: .65rem 1rem; border-right: 0; border-bottom: 1px solid var(--line); }
 .brand { flex-direction: row; align-items: center; padding: 0; gap: .65rem; }.brand-logo { width: 43px; }.brand-title { font-size: .95rem; }
 .sidebar-foot { display: none; }
 .sidebar nav { flex: 1 1 100%; margin-top: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .topbar { padding: .65rem 1rem; }.session-user, .topbar time { display: none; }.workbook-state { gap: .5rem; }
 .overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }.hero-metric { grid-column: auto; }
 .project-workbench { grid-template-columns: minmax(0, 1fr); }.directory-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }.directory-list a { height: 100%; }
 .project-directory .panel-header { margin-bottom: .5rem; }.project-directory .pagination { justify-content: center; gap: 1rem; }
 .popover-form > .form-panel { width: 100%; }
}
/* Determine the initial menu state before deferred scripts arrive: collapsing
   it in JavaScript shifted the entire mobile workspace after first paint.
   With scripting disabled (or an older browser), keep every link visible. */
@media (max-width: 900px) and (scripting: enabled) {
 .nav-toggle { display: inline-flex; }
 body:not(.nav-open) #primary-nav { display: none; }
}
@media (max-width: 600px) {
 main { padding: 1rem .85rem 2rem; }.topbar > div:first-child { display: none; }.topbar .workbook-state { width: 100%; justify-content: space-between; }
 .workspace-tabs { gap: 0 .7rem; }.workspace-tabs > a { font-size: .9rem; min-height: 44px; }
 .directory-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem; }.directory-list a { padding: .5rem; font-size: .85rem; }.directory-list small { display: none; }
 .project-directory { padding: .65rem; }.project-focus { padding: .75rem; }.panel-header { flex-wrap: wrap; }
 .overview-metrics { gap: .5rem; }.overview-metrics a { padding: .65rem; }.hero-metric strong, .support-metric strong { font-size: 1.85rem; }
 .bounded-region { max-height: 360px; }.language-switch a { min-height: 38px; }.matrix-scroll { max-height: 55vh; }
 .capacity-matrix.dense-table th:first-child { min-width: 125px; max-width: 160px; }
}
@media print { .project-workbench { display: block; }.project-directory, .workspace-tabs, .planning-toolbar, .matrix-legend, .nav-toggle, .language-switch { display: none !important; } }
/* Page-review refinements: readable actions and native progressive disclosure. */
.filter-band .filter-options { flex: 1 1 100%; min-width: 0; }
.filter-options > .form-grid, .filter-actions { margin-top: .7rem; }
.data-table.dense-table th, .data-table.dense-table td { padding: .4rem .55rem; }
.record-preview { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 400; }
.team-create { margin-bottom: .75rem; }.team-directory { max-width: 880px; }
.table-meta.compact-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.roadmap-windows { display: flex; flex-wrap: wrap; gap: .35rem; }
.roadmap-windows a { min-height: 44px; display: inline-flex; align-items: center; }
.overview-fold, .overview-more { margin: .5rem 0; }
.overview-fold > summary, .overview-more > summary, .roadmap-range > summary { min-height: 44px; padding: .65rem .2rem; cursor: pointer; font-weight: 600; }
.admin-task, .admin-section { margin-top: .8rem; }
.admin-task > summary, .admin-section > summary, .admin-explanation > summary { cursor: pointer; min-height: 44px; padding: .65rem 0; font-weight: 600; }
.admin-explanation { font-size: .9rem; color: var(--muted); }
.quality-group-summary { cursor: pointer; padding: .5rem 0; }
.quality-group-summary h2 { display: inline; }
.quality-issue { grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1.2fr); overflow-wrap: anywhere; }
.quality-issue small { display: block; color: var(--muted); }
.quality-action { display: block; color: var(--brand-strong); text-decoration: underline; font-weight: 600; }
.rm-row-head { position: sticky; left: 0; z-index: 1; background: var(--paper); padding: .25rem; }
.rm-axis-title { position: sticky; left: 0; z-index: 3; background: var(--paper); }
.error-page section { border-color: var(--line-strong); box-shadow: none; }
.error-code { color: var(--muted); font-size: .9rem; }
@media (max-width: 600px) {
 .rm-section .roadmap-scroll { max-height: 280px; }
 .filter-band .filter-options { grid-column: 1 / -1; }
 .detail-row details > summary { min-height: 44px; display: flex; align-items: center; }
 .quality-summary-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }.quality-summary-compact div { padding: .6rem; flex-direction: column; gap: .15rem; }.quality-summary-compact span { font-size: .8rem; }
 .quality-issue { grid-template-columns: 70px minmax(0, 1fr); }.quality-message { grid-column: 1 / -1; }
}
@media print { .bounded-region, .rm-section .roadmap-scroll { max-height: none; overflow: visible; }.rm-row-head, .rm-axis-title { position: static; } }