/* ==========================================================================
   Resource Planner design system (Task 4R Checkpoint R1)
   Source of truth for tokens/visual language: 06-TASK-PLANS/04R-R1-DESIGN-BRIEF/
   Every existing class name below is kept exactly as-is (only values changed)
   so no template needed to change to pick up the new look. New sections are
   appended after the original ones and clearly marked.
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope/Manrope-Variable.946beb949095.ttf") format("truetype-variations"),
       url("fonts/manrope/Manrope-Variable.946beb949095.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Stop mobile Safari/Chrome auto-boosting text size in narrow columns
     (e.g. the sidebar) -- without this, some phones render sidebar text
     far larger than the rest of the page. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* -- Brand and surface tokens (light theme; see [data-theme="dark"] below) -- */
  --color-primary-navy: #15324a;
  --color-primary: #2f6fed;
  --color-primary-strong: #1e54c4;
  --color-teal: #16a6a1;
  --color-bg: #f4f7fb;
  --color-surface: #ffffff;
  --color-surface-soft: #f8fafd;
  --color-border: #dce4ee;
  --color-text: #172534;
  --color-text-muted: #66778a;

  /* -- Semantic status colours. Meaning stays fixed across both themes:
     green = healthy/completed, amber = at risk/pending, red = blocked/
     overdue/critical, blue = active planning, grey = baseline reference. -- */
  --color-success: #1f9254;
  --color-success-bg: #e5f6ec;
  --color-warning: #a15c00;
  --color-warning-bg: #fff2df;
  --color-danger: #c23b3b;
  --color-danger-bg: #fbeaea;
  --color-baseline: #8a97a6;
  --color-baseline-bg: #eef1f5;

  /* Legacy names kept as aliases so nothing above this line needs a second
     reading: existing rules further down still say --colour-*. */
  --colour-ink: var(--color-text);
  --colour-muted: var(--color-text-muted);
  --colour-canvas: var(--color-bg);
  --colour-surface: var(--color-surface);
  --colour-border: var(--color-border);
  --colour-accent: var(--color-primary);
  --colour-accent-strong: var(--color-primary-strong);
  --colour-focus: #f59e0b;
  --colour-info-bg: #e8f3fb;
  --colour-warning-bg: var(--color-warning-bg);
  --colour-warning-ink: var(--color-warning);
  --colour-danger: var(--color-danger);

  --radius-small: 0.5rem;
  --radius: 0.75rem;
  --radius-pill: 999rem;
  --shadow: 0 0.2rem 0.8rem rgb(23 32 50 / 10%);
  --shadow-md: 0 0.75rem 2rem rgb(23 32 50 / 16%);

  /* 4px base grid: 4 / 8 / 12 / 16 / 24 / 32px. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --content-width: 92rem;
  --sidebar-width: 16.5rem;
  --sidebar-width-collapsed: 4.75rem;

  font-family: "Manrope", "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.5;
}

/* Dark theme: dedicated values, not an inversion. Applied by setting
   data-theme="dark" on <html> (see the inline init script in base.html,
   which reads the visitor's saved choice before first paint to avoid a
   flash of the wrong theme) and toggled by the button wired in app.js. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-primary-navy: #101f2f;
  --color-primary: #5b8cff;
  --color-primary-strong: #82a6ff;
  --color-teal: #33c0b8;
  --color-bg: #08131f;
  --color-surface: #101f2f;
  --color-surface-soft: #16283a;
  --color-border: #294056;
  --color-text: #eaf0f6;
  --color-text-muted: #97a8ba;

  --color-success: #3ddc84;
  --color-success-bg: #113322;
  --color-warning: #ffb84d;
  --color-warning-bg: #3a2a0e;
  --color-danger: #ff8080;
  --color-danger-bg: #3a1414;
  --color-baseline: #7688a0;
  --color-baseline-bg: #16283a;

  --colour-ink: var(--color-text);
  --colour-muted: var(--color-text-muted);
  --colour-canvas: var(--color-bg);
  --colour-surface: var(--color-surface);
  --colour-border: var(--color-border);
  --colour-accent: var(--color-primary);
  --colour-accent-strong: var(--color-primary-strong);
  --colour-focus: #ffb84d;
  --colour-info-bg: #132a3d;
  --colour-warning-bg: var(--color-warning-bg);
  --colour-warning-ink: var(--color-warning);
  --colour-danger: var(--color-danger);

  --shadow: 0 0.2rem 0.8rem rgb(0 0 0 / 35%);
  --shadow-md: 0 0.75rem 2rem rgb(0 0 0 / 50%);
}

* { box-sizing: border-box; }
html { background: var(--colour-canvas); color: var(--colour-ink); }
/* Slightly below the 16px browser default: an information-dense operational
   tool reads better tighter (brief: "Primary body/table: 14px"). Spacing
   tokens stay anchored to the root's 16px so layout rhythm is unaffected. */
body { font-size: 0.9375rem; margin: 0; }
a { color: var(--colour-accent); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.15em; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible {
  box-shadow: 0 0 0 0.12rem var(--colour-surface), 0 0 0 0.32rem var(--colour-ink);
  outline: 0.2rem solid var(--colour-focus);
  outline-offset: 0.18rem;
}
h1, h2, h3 { line-height: 1.2; margin-block: 0; font-weight: 600; }
h1 { font-size: clamp(1.5rem, 3vw, 1.75rem); }
h2 { font-size: clamp(1.125rem, 2vw, 1.25rem); }
h3 { font-size: 1.05rem; }
p { margin-block: 0; }

.visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; }
.skip-link { background: var(--colour-ink); color: var(--colour-surface); left: var(--space-4); padding: var(--space-3) var(--space-4); position: fixed; top: -5rem; z-index: 100; }
.skip-link:focus { top: var(--space-4); }
.app-shell { min-height: 100vh; }
.app-header { align-items: center; background: var(--colour-surface); border-bottom: 1px solid var(--colour-border); color: var(--colour-ink); display: flex; gap: var(--space-4); justify-content: space-between; min-height: 4rem; padding: var(--space-3) clamp(1rem, 3vw, 2rem); }
.app-brand { align-items: center; color: var(--color-primary-navy); display: inline-flex; gap: var(--space-2); font-size: 1.15rem; font-weight: 600; min-height: 2.75rem; text-decoration: none; }
:root[data-theme="dark"] .app-brand { color: var(--color-text); }
.header-context { color: var(--colour-muted); }
.header-actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: end; }
.header-actions form, .app-header > form { margin: 0; }
.app-body { display: flex; align-items: stretch; min-height: calc(100vh - 4rem); }
.app-body--single { display: block; }
.side-nav { align-content: start; background: var(--color-primary-navy); border-right: 1px solid var(--colour-border); display: grid; align-content: start; gap: var(--space-4); padding: var(--space-4); flex: 0 0 auto; }
.nav-group { display: grid; gap: var(--space-1); }
.nav-group__heading { color: #ffffffa8; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; padding-inline: 0.75rem; text-transform: uppercase; }
/* grid-template-columns: minmax(0, 1fr) stops the implicit column from
   growing to an item's max-content width (icon + long label + the "Current"/
   "Planned" badge together can exceed the sidebar) -- without it, one long
   active label drags the whole sidebar wider than its fixed box. */
.nav-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.nav-list a, .nav-placeholder { align-items: center; border-radius: var(--radius-small); color: #eaf0f8; display: flex; gap: var(--space-3); justify-content: space-between; min-height: 2.75rem; padding: 0.65rem 0.75rem; text-decoration: none; font-weight: 500; }
.nav-list a > span:first-child, .nav-placeholder > span:first-child, .header-context { min-width: 0; overflow-wrap: anywhere; }
.nav-list a > span:first-child, .nav-placeholder > span:first-child { align-items: center; display: inline-flex; gap: var(--space-3); }
.nav-list a:hover { background: #ffffff1a; }
.nav-list a[aria-current="page"] { background: var(--color-primary); color: #ffffff; }
.nav-placeholder { color: #ffffff80; }
.nav-state { border: 1px solid currentColor; border-radius: 99rem; flex: none; font-size: 0.65rem; font-weight: 700; padding: 0.05rem 0.35rem; text-transform: uppercase; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-navigation { display: none; }
.breadcrumb { margin-bottom: var(--space-4); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: var(--space-2); }
.app-main { margin-inline: auto; max-width: var(--content-width); min-width: 0; padding: clamp(1rem, 3vw, 2rem); width: 100%; }
.page-heading, .section-heading { align-items: end; display: flex; gap: var(--space-5); justify-content: space-between; }
.page-heading { margin-bottom: var(--space-6); }
.eyebrow { color: var(--color-teal); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: var(--space-2); text-transform: uppercase; }
.lede { color: var(--colour-muted); font-size: 1.05rem; margin-top: var(--space-2); max-width: 45rem; }
.stack { display: grid; gap: var(--space-4); margin-block: 0 var(--space-6); scroll-margin-top: var(--space-4); }
.card-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.card { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius); box-shadow: none; display: grid; gap: var(--space-3); padding: var(--space-4); }
.button-row, .status-row { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.button, .icon-button { align-items: center; border: 1.5px solid var(--colour-accent); border-radius: var(--radius-small); cursor: pointer; display: inline-flex; gap: var(--space-2); font-weight: 600; justify-content: center; min-height: 2.75rem; padding: 0.55rem 1rem; white-space: nowrap; }
.button { background: var(--colour-accent); color: #ffffff; }
.button:hover { background: var(--colour-accent-strong); border-color: var(--colour-accent-strong); }
.button--secondary { background: var(--colour-surface); border-color: var(--colour-border); color: var(--colour-ink); }
.button--secondary:hover { background: var(--color-surface-soft); border-color: var(--colour-accent); }
.button--small { min-height: 2.25rem; padding: 0.35rem 0.7rem; }
.button--header { background: transparent; border-color: var(--colour-border); color: var(--colour-ink); min-height: 2.75rem; padding: 0.45rem 0.75rem; text-decoration: none; }
.button--header:hover { background: var(--color-surface-soft); }
.button__icon { flex: 0 0 auto; height: 1.35rem; width: 1.35rem; }
.icon-button { background: transparent; border-color: transparent; color: var(--colour-ink); font-size: 1.6rem; min-width: 2.75rem; padding: 0; }
.status { align-items: center; border: 1px solid currentColor; border-radius: var(--radius-pill); display: inline-flex; gap: var(--space-1); font-size: 0.85rem; font-weight: 600; min-height: 1.8rem; padding: 0.15rem 0.65rem; }
.status--active { background: color-mix(in srgb, var(--color-teal) 14%, transparent); color: var(--color-teal); }
.status--inactive { background: var(--color-surface-soft); color: var(--colour-muted); }
.status--warning { background: var(--colour-warning-bg); color: var(--colour-warning-ink); }
.status--complete { background: var(--color-success-bg); color: var(--color-success); }
.definition-list { display: grid; gap: var(--space-3); margin: 0; }
.definition-list div { border-bottom: 1px solid var(--colour-border); display: flex; gap: var(--space-4); justify-content: space-between; padding-bottom: var(--space-2); }
.definition-list dt { color: var(--colour-muted); }
.definition-list dd { font-weight: 600; margin: 0; }
.setup-checklist { display: grid; margin: 0; }
.setup-checklist__row { align-items: start; border-bottom: 1px solid var(--colour-border); display: grid; gap: var(--space-3); grid-template-columns: minmax(9rem, 0.8fr) 6.5rem minmax(0, 2fr); padding-block: var(--space-3); }
.setup-checklist__row:first-child { padding-top: 0; }
.setup-checklist__row:last-child { border-bottom: 0; padding-bottom: 0; }
.setup-checklist__label { color: var(--colour-muted); }
.setup-checklist__status, .setup-checklist__details { margin: 0; }
.setup-checklist__details { display: grid; gap: var(--space-1); }
.setup-checklist__details a { justify-self: start; }
.capacity-calendar { background: var(--color-surface-soft); border: 1px solid var(--colour-border); border-radius: var(--radius); padding: var(--space-4); }
.capacity-calendar__part { display: grid; gap: var(--space-4); scroll-margin-top: var(--space-4); }
.capacity-calendar__part + .capacity-calendar__part { border-top: 1px solid var(--colour-border); padding-top: var(--space-5); }
.form-stack { max-width: 50rem; }
/* Give the centred authentication layout an explicitly shrinkable track.
   A max-content grid track made the 34rem card overflow a 320px viewport even
   though the card itself declared a percentage width. */
.auth-layout { display: grid; grid-template-columns: minmax(0, 34rem); justify-content: center; padding-block: clamp(1rem, 6vw, 5rem); }
.auth-card { max-width: 34rem; min-width: 0; width: 100%; }
.error-summary__title { font-size: 1.1rem; margin-bottom: var(--space-1); }
[data-task-client-error-summary][hidden] { display: none; }
.choice-fieldset { border: 0; display: grid; gap: var(--space-3); margin: 0; min-width: 0; padding: 0; }
.choice-fieldset legend { font-weight: 600; padding: 0; }
.company-choices { display: grid; gap: var(--space-2); }
.company-choice { align-items: center; background: var(--colour-surface); border: 1.5px solid var(--colour-border); border-radius: var(--radius-small); cursor: pointer; display: grid; gap: var(--space-3); grid-template-columns: 1.5rem minmax(0, 1fr); min-height: 3.25rem; padding: var(--space-3); }
.company-choice:has(input:checked) { border-color: var(--colour-accent); box-shadow: inset 0.25rem 0 var(--colour-accent); }
.company-choice input { min-height: 1.25rem; width: 1.25rem; }
.field { display: grid; gap: var(--space-1); }
.field label { font-weight: 600; }
.field-hint { color: var(--colour-muted); }
.field-error { color: var(--colour-danger); font-weight: 600; }
.error-list { margin-block: var(--space-2) 0; padding-left: var(--space-5); }
.checkbox-field { align-items: start; display: grid; gap: var(--space-3); grid-template-columns: 1.5rem minmax(0, 1fr); }
.checkbox-field input { margin-top: 0.2rem; min-height: 1.25rem; width: 1.25rem; }
.checkbox-field label { font-weight: 600; }
.option-checklist { display: grid; gap: var(--space-2); }
.option-checklist label { align-items: start; display: grid; gap: var(--space-3); grid-template-columns: 1.5rem minmax(0, 1fr); }
.option-checklist input { margin-top: 0.2rem; min-height: 1.25rem; width: 1.25rem; }
.capability-fieldset { border-top: 1px solid var(--colour-border); padding-top: var(--space-4); }
input, select, textarea { background: var(--colour-surface); border: 1.5px solid var(--colour-border); border-radius: var(--radius-small); color: var(--colour-ink); min-height: 2.75rem; padding: 0.55rem 0.7rem; width: 100%; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--colour-accent); }
[aria-invalid="true"] { border-color: var(--colour-danger); }
.alert { border: 1px solid currentColor; border-left-width: 0.35rem; border-radius: var(--radius-small); padding: var(--space-4); display: flex; gap: var(--space-3); align-items: start; }
.alert--info { background: var(--colour-info-bg); color: var(--color-primary-strong); }
.alert--success { background: var(--color-success-bg); color: var(--color-success); }
.alert--warning, .alert--error { background: var(--colour-warning-bg); color: var(--colour-warning-ink); }
.dependency-warning { display: grid; }
.dependency-warning > h2, .dependency-warning > p, .dependency-warning > ul { max-width: 70ch; }
.message-stack { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.empty-state { background: var(--colour-surface); border: 1px dashed var(--colour-border); border-radius: var(--radius); display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-6); }
.table-container { border: 1px solid var(--colour-border); border-radius: var(--radius); overflow-x: auto; }
table { background: var(--colour-surface); border-collapse: collapse; font-size: 0.875rem; min-width: 42rem; width: 100%; }
.people-table { min-width: 56rem; }
.task-table { min-width: 58rem; }
.template-table { min-width: 48rem; }
.template-item-table { min-width: 58rem; }
.template-preview-table { min-width: 58rem; }
.template-preview-table ul { margin: 0; padding-left: var(--space-5); }
.generation-task-table { min-width: 92rem; }
.generation-task-table ul { margin: 0; padding-left: var(--space-5); }
.generation-task-choice { align-items: center; display: flex; justify-content: center; }
.generation-task-choice input { min-height: 1.25rem; width: 1.25rem; }
.table-edit { margin-top: var(--space-2); min-width: 10rem; }
.table-edit summary { color: var(--colour-accent-strong); cursor: pointer; font-weight: 600; }
.table-edit .field { margin-top: var(--space-2); min-width: 13rem; }
.time-entry-table { min-width: 58rem; }
.availability-table { min-width: 68rem; }
.report-table { min-width: 58rem; }
.people-table .person-column { min-width: 14rem; }
caption { background: var(--color-surface-soft); padding: var(--space-3); text-align: left; }
th, td { border-bottom: 1px solid var(--colour-border); padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }
thead th { background: var(--color-surface-soft); font-weight: 600; }
.filter-bar { align-items: end; background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius); display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-4); }
.filter-bar[data-filter-loading="true"] { cursor: progress; opacity: .72; }
.filter-status { align-self: center; color: var(--colour-muted); font-size: .8rem; }
.filter-status[hidden], [data-auto-filter-submit][hidden], [data-filter-clear-field][hidden], [data-filter-clear-all][hidden] { display: none; }
.filter-field { flex: 1 1 12rem; }
.filter-multiselect { min-width: 12rem; position: relative; }
.filter-multiselect summary { align-items: center; background: var(--colour-surface); border: 1.5px solid var(--colour-border); border-radius: var(--radius-small); cursor: pointer; display: flex; font-weight: 600; gap: var(--space-3); justify-content: space-between; list-style: none; min-height: 2.75rem; padding: 0.55rem 0.7rem; }
.filter-multiselect summary::-webkit-details-marker { display: none; }
.filter-multiselect summary::after { border-bottom: 0; border-left: .3rem solid transparent; border-right: .3rem solid transparent; border-top: .4rem solid currentColor; content: ""; margin-left: auto; }
.filter-multiselect[open] summary { border-color: var(--colour-accent); }
.filter-multiselect[open] summary::after { border-bottom: .4rem solid currentColor; border-top: 0; }
.filter-multiselect__count { background: var(--color-surface-soft); border-radius: var(--radius-pill); color: var(--colour-muted); font-size: .8rem; font-weight: 600; padding: .1rem .45rem; }
.filter-multiselect__panel { background: var(--colour-surface); border: 1.5px solid var(--colour-border); border-radius: var(--radius-small); box-shadow: var(--shadow); display: grid; gap: var(--space-3); inset-inline-start: 0; margin-top: var(--space-1); max-height: min(24rem, 60vh); min-width: max(100%, 16rem); overflow-y: auto; padding: var(--space-3); position: absolute; top: 100%; width: max-content; z-index: 20; }
.filter-multiselect__panel fieldset { border: 0; margin: 0; min-width: 0; padding: 0; }
.filter-multiselect__options { display: grid; gap: var(--space-1); }
.filter-multiselect__option { align-items: center; border-radius: var(--radius-small); cursor: pointer; display: grid; gap: var(--space-2); grid-template-columns: 1.5rem minmax(0, 1fr); min-height: 2.5rem; padding: var(--space-2); }
.filter-multiselect__option:hover { background: var(--color-surface-soft); }
.filter-multiselect__option input { min-height: 1.25rem; width: 1.25rem; }
.filter-multiselect__clear { background: transparent; border: 0; border-top: 1px solid var(--colour-border); color: var(--colour-accent-strong); cursor: pointer; font: inherit; font-weight: 600; padding: var(--space-3) var(--space-2) 0; text-align: left; }
.person-name, .record-name, .secondary-text { display: block; overflow-wrap: anywhere; }
/* A reference code (e.g. "J248") has no natural break point, so anywhere-wrap
   let a narrow auto-layout table column split it mid-string ("J2"/"48")
   instead of giving the column enough width -- normal wrap keeps it whole
   and lets the table scroll horizontally instead, like other wide tables
   in this app already do. */
.record-name { overflow-wrap: normal; white-space: nowrap; }
.secondary-text { color: var(--colour-muted); font-size: 0.875rem; font-weight: 400; }
.action-list { display: grid; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.danger-link { color: var(--colour-danger); font-weight: 600; }
.link-button { background: none; border: 0; cursor: pointer; font: inherit; padding: 0; text-decoration: underline; text-underline-offset: 0.18em; }
.link-button:hover { text-decoration-thickness: 0.15em; }
.button--danger { background: var(--colour-danger); border-color: var(--colour-danger); }
.tab-list { border-bottom: 1px solid var(--colour-border); display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0 0 var(--space-5); }
.tab-list a { border-bottom: 3px solid transparent; color: var(--colour-ink); display: inline-block; font-weight: 600; min-height: 2.75rem; padding: 0.65rem 0.1rem; text-decoration: none; }
.tab-list a[aria-current="page"] { border-bottom-color: var(--colour-accent); color: var(--colour-accent-strong); }
.tab-list a:hover { border-bottom-color: var(--colour-border); }
.button--danger:hover { background: #9c2f2f; }
.impact-card { margin-bottom: var(--space-4); max-width: 50rem; }
.progressive-section { border-top: 1px solid var(--colour-border); padding-top: var(--space-4); }
.progressive-section summary { cursor: pointer; font-weight: 600; min-height: 2.75rem; padding-block: var(--space-2); }
.progressive-section__body { margin-top: var(--space-4); }
.task-summary-grid { align-items: start; }
.overview-date { color: var(--colour-muted); font-weight: 600; }
.attention-summary { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); margin-bottom: var(--space-6); }
.attention-summary a { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius); display: grid; gap: var(--space-1); min-height: 4.75rem; padding: var(--space-3); text-decoration: none; }
.attention-summary a:hover { border-color: var(--colour-accent); }
.attention-summary strong { color: var(--colour-ink); font-size: 1.5rem; }
.attention-summary span { overflow-wrap: anywhere; }
.attention-section { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
.attention-list { display: grid; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.attention-item { background: var(--colour-surface); border: 1px solid var(--colour-border); border-left: 0.35rem solid var(--colour-warning-ink); border-radius: var(--radius); display: grid; gap: var(--space-4); padding: var(--space-5); }
.attention-item__heading { align-items: start; display: flex; gap: var(--space-4); justify-content: space-between; }
.attention-item__heading > div { display: grid; gap: var(--space-2); }
.attention-item__heading time { font-weight: 600; white-space: nowrap; }
.attention-explanation { display: grid; gap: var(--space-3); margin: 0; }
.attention-explanation div { display: grid; gap: var(--space-1); }
.attention-explanation dt { color: var(--colour-muted); font-weight: 600; }
.attention-explanation dd { margin: 0; }
.recent-activity { border-top: 1px solid var(--colour-border); display: grid; gap: var(--space-4); padding-top: var(--space-5); }
.recent-activity ol { display: grid; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.recent-activity li { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-small); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; padding: var(--space-3); }
.recent-activity li span { color: var(--colour-muted); }
.side-panel { border: 0; box-shadow: var(--shadow-md); height: 100%; margin: 0 0 0 auto; max-height: none; max-width: 32rem; padding: 0; width: min(100%, 32rem); background: var(--colour-surface); color: var(--colour-ink); }
.side-panel--task-form { max-width: 72rem; width: min(100%, 72rem); }
.side-panel::backdrop { background: rgb(8 19 31 / 55%); }
.side-panel__header { align-items: start; border-bottom: 1px solid var(--colour-border); display: flex; justify-content: space-between; padding: var(--space-5); }
.side-panel__body { padding: var(--space-5); }
.board-authority-note { color: var(--colour-muted); margin-bottom: var(--space-4); }
.board-desktop {
  --board-now-colour: color-mix(in srgb, var(--color-primary) 38%, transparent);
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
  position: relative;
}
.board-sticky-header {
  background: var(--colour-surface);
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 7;
}
.board-scroll-content {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}
.board-scroll-content::-webkit-scrollbar { display: none; }
.board-sticky-scrollbar-slot { block-size: 1.1rem; }
.board-sticky-scrollbar {
  background: var(--colour-surface);
  block-size: 1.1rem;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  z-index: 7;
}
.board-sticky-scrollbar--fixed {
  bottom: 0;
  position: fixed;
}
.board-sticky-scrollbar__spacer { block-size: 1px; }
.board-grid { display: grid; grid-template-columns: minmax(10rem, 13rem) repeat(var(--board-day-count), minmax(14rem, 1fr)); min-width: max-content; }
.board-grid--dates { border-bottom: 2px solid var(--color-primary-navy); }
.board-grid__label, .board-date, .board-day-cell { border-right: 1px solid var(--colour-border); min-width: 0; padding: var(--space-2); }
.board-grid__label { align-items: center; background: var(--color-surface-soft); display: flex; flex-wrap: wrap; font-weight: 600; gap: var(--space-2); left: 0; position: sticky; z-index: 3; }
.board-date { background: var(--color-surface-soft); display: grid; font-weight: 600; gap: var(--space-1); position: relative; }
.board-date--today, .board-day-cell--today, .board-day-card--today { border-left: 0.25rem solid var(--color-primary); position: relative; }
.board-today-label { font-size: 0.75rem; text-transform: uppercase; color: var(--color-primary); font-weight: 700; }
.board-now-marker,
.board-day-cell--now::before {
  background: var(--board-now-colour);
  content: "";
  inline-size: 1px;
  inset-block: 0;
  inset-inline-start: calc(var(--board-now-fraction) * 100%);
  pointer-events: none;
  position: absolute;
  z-index: 5;
}
.board-now-marker span {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--colour-surface));
  border: 1px solid var(--board-now-colour);
  color: var(--color-primary);
  font-size: 0.6rem;
  inset-block-end: 0;
  inset-inline-start: 0.2rem;
  line-height: 1.2;
  padding: 0.1rem 0.2rem;
  position: absolute;
}
.board-person { border-bottom: 2px solid var(--colour-border); }
.board-person__heading { align-content: center; background: var(--colour-surface); border-bottom: 1px solid var(--colour-border); display: grid; font-size: 1rem; margin: 0; min-height: 3.25rem; }
.board-person__heading-fill { background: var(--colour-surface); border-bottom: 1px solid var(--colour-border); grid-column: 2 / -1; }
.board-lane { border-bottom: 1px solid var(--colour-border); min-height: 2.75rem; }
.board-lane--plan, .board-lane--blocked { min-height: 5rem; }
.board-lane--actual { min-height: 3.75rem; }
.board-lane--plan .board-day-cell { block-size: 5rem; }
.board-lane--actual .board-day-cell { block-size: 3.75rem; }
.board-day-cell { align-content: start; background: var(--colour-surface); display: grid; gap: var(--space-1); }
.board-timeline-cell { --board-hour-width: 1.75rem; min-height: inherit; overflow: hidden; position: relative; }
.board-timeline-cell .board-block {
  inline-size: max(0.375rem, calc(var(--segment-hours) * var(--board-hour-width)));
  inset-inline-start: calc(var(--segment-start) * var(--board-hour-width));
  margin-inline-start: 0;
  max-inline-size: none;
  position: absolute;
  top: var(--space-2);
}
.board-block { align-content: center; border: 1.5px solid currentColor; border-radius: var(--radius-small); display: grid; font-size: 0.75rem; min-height: 1.75rem; min-width: 0; overflow: hidden; padding: 0.25rem var(--space-2); text-decoration: none; }
.board-block strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-block__reference { font-size: 0.82rem; font-weight: 700; }
.board-block__reference, .board-block__title, .board-block__hours { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-block__hours { font-variant-numeric: tabular-nums; }
.board-block--plan { background: color-mix(in srgb, var(--color-primary) 14%, var(--colour-surface)); color: var(--color-primary-strong); inline-size: max(8rem, calc(var(--segment-hours) * 1rem)); margin-inline-start: calc(var(--segment-start) * 1rem); max-inline-size: 24rem; }
.board-block--temporary { border-style: dashed; }
.board-block--actual { background: var(--color-success-bg); color: var(--color-success); }
.board-block--baseline { background: transparent; border-style: dashed; color: var(--color-baseline); opacity: 0.85; inline-size: max(3.5rem, calc(var(--segment-hours) * 1rem)); margin-inline-start: calc(var(--segment-start) * 1rem); max-inline-size: 24rem; }
.board-block--team { box-shadow: inset 0 0 0 2px var(--color-teal); }
.board-block--plan .board-team-flag, .board-block--plan .board-deadline-flag { display: none; }
.board-team-flag { background: var(--color-teal); border-radius: var(--radius-small); color: var(--colour-surface); flex-shrink: 0; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em; padding: 0 0.3rem; text-transform: uppercase; }
.board-empty-lane { color: var(--colour-muted); font-size: 0.8rem; }
.board-capacity { font-size: 0.8rem; }
.board-warning { color: var(--colour-warning-ink); }
.board-blocked-track {
  --board-hour-width: 1.75rem;
  background: var(--color-danger-bg);
  grid-column: 2 / -1;
  min-height: 5rem;
  overflow: hidden;
  padding: var(--space-2);
  position: relative;
}
.board-blocked-track--now::before {
  background: var(--board-now-colour);
  content: "";
  inline-size: 1px;
  inset-block: 0;
  inset-inline-start: var(--board-now-left, 0px);
  pointer-events: none;
  position: absolute;
  z-index: 3;
}
.board-block--blocked {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  inline-size: max(0.375rem, calc(var(--segment-hours) * var(--board-hour-width)));
  inset-block-start: var(--space-2);
  inset-inline-start: calc(var(--board-now-left, 0px) + (var(--blocked-start-hours) * var(--board-hour-width)));
  min-height: 3.75rem;
  position: absolute;
}
.board-responsive { display: none; }
.board-day-card { border-top: 1px solid var(--colour-border); display: grid; gap: var(--space-2); padding: var(--space-3); }
.board-card-block { border: 1px solid currentColor; border-radius: var(--radius-small); display: block; margin-top: var(--space-1); padding: var(--space-2); }
.board-text-alternative { margin-top: var(--space-5); }
/* Task 4S Checkpoint S6: zoom shortcuts, drag affordance and drop feedback. */
.board-zoom { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.board-zoom__label { color: var(--colour-muted); font-weight: 600; }
.board-zoom__option[aria-current="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--colour-surface); }
.board-block[draggable="true"] { cursor: grab; }
.board-block[draggable="true"]:active { cursor: grabbing; }
.board-day-cell--drop-target { background: color-mix(in srgb, var(--color-primary) 10%, var(--colour-surface)); outline: 2px dashed var(--color-primary); outline-offset: -2px; position: relative; }
.board-day-cell--drop-target::after {
  background: var(--color-primary);
  block-size: calc(100% - 0.5rem);
  content: "";
  inline-size: 0.2rem;
  inset-block-start: 0.25rem;
  inset-inline-start: var(--board-drop-x, 0.25rem);
  pointer-events: none;
  position: absolute;
  z-index: 5;
}
.board-resize-handle { cursor: ew-resize; inset-block-start: 50%; inset-inline-end: 0.15rem; position: absolute; touch-action: none; transform: translateY(-50%); user-select: none; }
.board-block--resizing { cursor: ew-resize; opacity: 0.9; z-index: 6; }
.board-drawer-actions { border-top: 1px solid var(--colour-border); padding-top: var(--space-3); }
.board-drawer-actions h3 { font-size: 0.95rem; }
.board-queue-actions { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.board-queue-actions .button { font-size: 0.82rem; gap: 0.35rem; min-width: 0; padding-inline: 0.55rem; white-space: nowrap; width: 100%; }
.board-queue-actions .button__icon { height: 1.15rem; width: 1.15rem; }
.board-text-alternative summary { cursor: pointer; font-weight: 600; min-height: 2.75rem; padding-block: var(--space-2); }
.board-text-alternative section { border-top: 1px solid var(--colour-border); display: grid; gap: var(--space-2); padding-top: var(--space-4); }
.board-text-alternative ul { margin-top: 0; }

@media (max-width: 48rem) {
  /* Dense is the sitewide default (an explicit owner decision), but on a
     phone width Comfortable's cards are far more usable than a dense grid
     needing horizontal scroll -- so that's the default here instead, unless
     the visitor has explicitly picked a view (data-density-user-set is only
     ever set by that explicit choice, see app.js), which always wins. */
  [data-density-scope]:not([data-density-user-set]) .record-table { display: none; }
  [data-density-scope]:not([data-density-user-set]) .record-cards { display: grid; }
  .app-header { align-items: start; flex-direction: column; }
  .header-actions { align-items: stretch; justify-content: start; width: 100%; }
  .header-context { flex-basis: 100%; }
  .app-body { display: block; }
  .side-nav { display: none; }
  .compact-navigation { background: var(--color-primary-navy); border-bottom: 1px solid var(--colour-border); display: block; }
  .compact-navigation summary { align-items: center; color: #eaf0f8; cursor: pointer; display: flex; font-weight: 600; min-height: 2.75rem; padding: var(--space-3) var(--space-4); }
  .compact-navigation__content { border-top: 1px solid #ffffff33; display: grid; gap: var(--space-4); padding: var(--space-4); }
  .page-heading, .section-heading { align-items: start; flex-direction: column; }
  .page-heading .button-row { width: 100%; }
  .page-heading .button { flex: 1 1 auto; }
  .setup-checklist__row { grid-template-columns: minmax(0, 1fr) auto; }
  .setup-checklist__details { grid-column: 1 / -1; }
  .attention-item__heading { align-items: start; flex-direction: column; }
  input, select, textarea { font-size: 1rem; }
  .filter-multiselect { flex: 1 1 100%; }
  .filter-multiselect__panel { max-width: calc(100vw - 2rem); min-width: 100%; width: 100%; }
  .board-desktop { display: none; }
  .board-responsive { display: grid; gap: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

@media (forced-colors: active) {
  .status, .alert, .button, .attention-item, .attention-summary a, .board-block, .board-date--today, .board-day-cell--today, .board-day-card--today, .personal-task-block, .personal-day-card--today, .personal-off-window { border: 2px solid currentColor; }
}

/* ==========================================================================
   R1 additions -- icon, shell/sidebar, header, density and chart components.
   Nothing above this line changes what a template needs to output; this
   section only adds new classes used by the rebuilt shell/pages.
   ========================================================================== */

/* -- Icons (vendored Phosphor SVGs, see templatetags/icons.py) -- */
.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.2em; }
.icon--sm { width: 1.05em; height: 1.05em; }
.icon--lg { width: 1.5em; height: 1.5em; }

/* -- Two-column shell: full-height sidebar beside a stacked header+main
   column. .app-column is new; every other class here already existed. -- */
.app-column { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.app-body--single .app-column { width: 100%; }
/* min-width guard: the preserved @media (max-width: 48rem) rule above sets
   .side-nav{display:none} on narrow screens -- this unconditional rule for
   the desktop flex layout must never win that fight regardless of source
   order, or the full sidebar renders (and gets mobile-browser font-boosted)
   instead of being hidden in favour of .compact-navigation. */
@media (min-width: 48.0625rem) {
  .side-nav { display: flex; flex-direction: column; width: var(--sidebar-width); transition: width 0.15s ease; }
}
html[data-sidebar-collapsed="true"] .side-nav { width: var(--sidebar-width-collapsed); }
html[data-sidebar-collapsed="true"] .side-nav .nav-group__heading,
html[data-sidebar-collapsed="true"] .side-nav .nav-label,
html[data-sidebar-collapsed="true"] .side-nav .nav-state,
html[data-sidebar-collapsed="true"] .side-nav .app-brand__name,
html[data-sidebar-collapsed="true"] .side-nav .sidebar-collapse__label {
  display: none;
}
html[data-sidebar-collapsed="true"] .side-nav .nav-list a,
html[data-sidebar-collapsed="true"] .side-nav .nav-placeholder,
html[data-sidebar-collapsed="true"] .side-nav .sidebar-collapse { justify-content: center; }
.side-nav__brand { align-items: center; color: #ffffff; display: flex; gap: var(--space-2); font-weight: 600; font-size: 1.05rem; padding-inline: 0.75rem; margin-bottom: var(--space-2); }
.side-nav__brand .icon { color: var(--color-teal); }
.sidebar-collapse { align-items: center; background: transparent; border: 1px solid #ffffff33; border-radius: var(--radius-small); color: #eaf0f8; cursor: pointer; display: flex; gap: var(--space-2); justify-content: center; margin-top: auto; min-height: 2.5rem; padding: 0.5rem; }
.sidebar-collapse:hover { background: #ffffff1a; }

/* -- Header: search, notifications, theme toggle, profile menu -- */
.header-search { align-items: center; background: var(--color-surface-soft); border: 1px solid var(--colour-border); border-radius: var(--radius-pill); display: flex; flex: 1 1 12rem; gap: var(--space-2); padding: 0.4rem 0.9rem; min-width: 9rem; max-width: 20rem; }
.header-search .icon { color: var(--colour-muted); }
.header-search input { background: transparent; border: 0; min-height: auto; padding: 0.15rem 0; width: 100%; }
.header-search input:focus-visible { outline: none; box-shadow: none; }
.icon-action { align-items: center; background: transparent; border: 1px solid transparent; border-radius: var(--radius-small); color: var(--colour-ink); cursor: pointer; display: inline-flex; justify-content: center; min-height: 2.5rem; min-width: 2.5rem; padding: 0; position: relative; text-decoration: none; }
.icon-action:hover { background: var(--color-surface-soft); }
.icon-action[disabled], .icon-action[aria-disabled="true"] { color: var(--colour-muted); cursor: default; }
.icon-action[disabled]:hover, .icon-action[aria-disabled="true"]:hover { background: transparent; }
.theme-toggle .icon--moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon--moon { display: inline-block; }
.profile-menu { position: relative; }
.profile-menu > summary { align-items: center; border-radius: var(--radius-small); cursor: pointer; display: flex; gap: var(--space-2); list-style: none; min-height: 2.75rem; padding: 0.35rem 0.6rem; }
.profile-menu > summary::-webkit-details-marker { display: none; }
.profile-menu > summary:hover { background: var(--color-surface-soft); }
.profile-menu__avatar { align-items: center; background: var(--color-primary); border-radius: 50%; color: #fff; display: flex; font-size: 0.85rem; font-weight: 700; height: 2rem; justify-content: center; width: 2rem; }
.profile-menu__panel { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius); box-shadow: var(--shadow-md); display: grid; gap: var(--space-2); min-width: 14rem; padding: var(--space-3); position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 20; }
.profile-menu__panel .button--header { justify-content: start; color: var(--colour-ink); border-color: transparent; }
.notification-menu { position: relative; }
.notification-menu > summary { list-style: none; }
.notification-menu > summary::-webkit-details-marker { display: none; }
.notification-menu__panel { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius); box-shadow: var(--shadow-md); min-width: min(20rem, calc(100vw - 2rem)); padding: var(--space-3); position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 20; }
.notification-badge { align-items: center; background: var(--color-danger); border-radius: var(--radius-pill); color: #fff; display: inline-flex; font-size: 0.65rem; font-weight: 700; justify-content: center; min-height: 1.15rem; min-width: 1.15rem; padding-inline: 0.25rem; position: absolute; right: -0.15rem; top: -0.15rem; }

/* -- Preview badge: used wherever a page shows a concept the backend does
   not implement yet. Never omit this alongside such content (R1 rule). -- */
.preview-badge { align-items: center; background: var(--color-baseline-bg); border: 1px solid var(--color-baseline); border-radius: var(--radius-pill); color: var(--color-text); display: inline-flex; font-size: 0.7rem; font-weight: 700; gap: var(--space-1); letter-spacing: 0.04em; padding: 0.1rem 0.55rem; text-transform: uppercase; }
.preview-badge .icon { width: 0.9em; height: 0.9em; }
.preview-note { color: var(--colour-muted); font-size: 0.85rem; margin-top: var(--space-1); }

/* -- New semantic status tones, additive only (existing .status--* classes
   above are unchanged in meaning; use these where a display is being built
   fresh, so red only ever means blocked/overdue, matching the brief). -- */
.status--success { background: var(--color-success-bg); color: var(--color-success); }
.status--at-risk { background: var(--colour-warning-bg); color: var(--colour-warning-ink); }
.status--danger { background: var(--color-danger-bg); color: var(--color-danger); }
.status--neutral { background: var(--color-baseline-bg); color: var(--colour-muted); }
.table-cell-detail { color: var(--colour-muted); display: block; font-size: 0.85rem; font-weight: 400; margin-top: 0.2rem; }
.my-tasks-table { min-width: 58rem; }
.my-tasks-table th:first-child { min-width: 13rem; }
.my-tasks-table td:nth-child(4) { min-width: 13rem; }

/* -- KPI strip (Overview) -- */
.kpi-strip { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); margin-bottom: var(--space-5); }
.kpi-tile { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius); display: grid; gap: var(--space-1); padding: var(--space-4); }
.kpi-tile__value { align-items: center; color: var(--colour-ink); display: flex; font-size: 1.6rem; font-weight: 600; gap: var(--space-2); }
.kpi-tile__label { color: var(--colour-muted); font-size: 0.85rem; }
.kpi-tile--danger .kpi-tile__value { color: var(--color-danger); }
.kpi-tile--warning .kpi-tile__value { color: var(--colour-warning-ink); }

/* -- Donut charts: plain hand-drawn SVG (stroke-dasharray rings), no chart
   library needed -- keeps the pilot's dependency footprint at zero. -- */
.donut-card { display: grid; gap: var(--space-3); grid-template-columns: auto 1fr; align-items: center; }
.donut-card__figure { position: relative; width: 5rem; height: 5rem; }
.donut-card__figure svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-card__center { align-content: center; align-items: center; display: grid; height: 100%; justify-content: center; justify-items: center; left: 0; line-height: 1.15; position: absolute; top: 0; width: 100%; }
.donut-card__center strong { font-size: 1.3rem; line-height: 1; }
.donut-card__center span { color: var(--colour-muted); font-size: 0.62rem; max-width: 3.1rem; text-align: center; text-wrap: balance; }
.donut-card__legend { display: grid; gap: var(--space-1); list-style: none; margin: 0; padding: 0; font-size: 0.85rem; }
.donut-card__legend li { align-items: center; display: flex; gap: var(--space-2); justify-content: space-between; }
.donut-card__swatch { border-radius: 50%; flex: none; height: 0.65rem; width: 0.65rem; }
.donut-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); margin-bottom: var(--space-6); }
.overview-section { margin-bottom: var(--space-6); }

/* -- Needs Attention / Upcoming Deadlines two-up layout -- */
.overview-columns { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); margin-bottom: var(--space-6); align-items: start; }
.overview-list { display: grid; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.overview-list__item { align-items: center; border-radius: var(--radius-small); display: flex; gap: var(--space-3); justify-content: space-between; padding: var(--space-2) var(--space-3); text-decoration: none; color: inherit; }
.overview-list__item:hover { background: var(--color-surface-soft); }
.overview-list__item .icon { color: var(--color-danger); }
.overview-list__meta { color: var(--colour-muted); font-size: 0.8rem; }

/* -- Resource Queue Snapshot -- */
.queue-snapshot { display: grid; gap: var(--space-3); }
.queue-snapshot__row { border-bottom: 1px solid var(--colour-border); display: grid; gap: var(--space-1); padding: var(--space-2) 0; }
.queue-snapshot__row:last-child { border-bottom: 0; }
.queue-snapshot__info { align-items: center; display: flex; gap: var(--space-3); justify-content: space-between; }
.queue-snapshot__low { color: var(--colour-warning-ink); font-weight: 600; }
/* Today's Current Forecast, condensed to one bar per person -- the same
   segments the full Resource Board plots for today, drawn to scale against
   the person's effective capacity for the day. */
.queue-bar { background: var(--color-surface-soft); border: 1px solid var(--colour-border); border-radius: var(--radius-small); height: 1.1rem; position: relative; overflow: hidden; }
.queue-bar__segment { background: var(--color-primary); border-radius: 2px; inset-block: 2px; position: absolute; min-width: 3px; }
.queue-bar__empty { align-items: center; color: var(--colour-muted); display: flex; font-size: 0.7rem; height: 100%; justify-content: center; width: 100%; }

/* -- Table density modes (Jobs/Tasks/People/Customers list pages) -- */
.density-toggle { display: inline-flex; border: 1px solid var(--colour-border); border-radius: var(--radius-small); overflow: hidden; }
.density-toggle button { background: var(--colour-surface); border: 0; border-right: 1px solid var(--colour-border); color: var(--colour-ink); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); min-height: 2.5rem; padding: 0.45rem 0.85rem; }
.density-toggle button:last-child { border-right: 0; }
.density-toggle button[aria-pressed="true"] { background: var(--color-primary); color: #fff; }
[data-density="comfortable"] .record-table { display: none; }
[data-density="dense"] .record-cards { display: none; }
.record-cards { display: grid; gap: var(--space-3); }
.record-card { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius); display: grid; gap: var(--space-3); padding: var(--space-4); text-decoration: none; color: inherit; }
.record-card:hover { border-color: var(--colour-accent); }
.record-card__header { align-items: start; display: flex; gap: var(--space-3); justify-content: space-between; }
.record-card__title { font-weight: 600; }
.record-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: 0.85rem; color: var(--colour-muted); }
.record-card__meta strong { color: var(--colour-ink); font-weight: 600; }
.platform-company-cards { display: none; grid-template-columns: minmax(0, 1fr); }
.platform-company-cards .record-card, .platform-company-cards .record-card__header > div { min-width: 0; }
.platform-company-cards .record-card__title { overflow-wrap: anywhere; }
.platform-company-table table { min-width: 70rem; }

@media (max-width: 48rem) {
  .platform-company-cards { display: grid; gap: var(--space-3); }
  .platform-company-table { display: none; }
}
.progress-bar { background: var(--color-surface-soft); border-radius: var(--radius-pill); display: block; height: 0.5rem; overflow: hidden; width: 100%; }
.progress-bar__fill { background: var(--color-primary); display: block; height: 100%; }
.progress-bar__fill--success { background: var(--color-success); }
.progress-bar__fill--warning { background: var(--colour-warning-ink); }
.progress-label { align-items: center; display: flex; gap: var(--space-2); font-size: 0.85rem; }
.progress-label__track { flex: 1 1 auto; }
.task-table .task-progress-column { min-width: 9rem; }

/* -- Form patterns: A (quick side drawer, reuses .side-panel) and
   B (grouped-card sections for large objects). -- */
.form-groups { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.form-group { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius); display: grid; gap: var(--space-3); padding: var(--space-4); }
.form-group h2, .form-group h3 { font-size: 1rem; }
.required-marker { color: var(--color-danger); }

/* -- Task form V1: compact core rows with advanced legacy controls tucked
   behind one disclosure until their redesigned checkpoints are approved. -- */
.task-form.form-stack { max-width: 70rem; }
.task-form__core { display: grid; gap: var(--space-3); }
.task-form__row { align-items: start; display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.task-form__row .field { align-content: start; }
.task-form__effort-row .field { display: flex; flex-direction: column; }
.task-form__effort-row .field > input,
.task-form__effort-row .field > select,
.task-form__effort-row .field > .task-form__readonly { margin-top: auto; }
.task-form__row textarea { min-height: 4.75rem; resize: vertical; }
.task-form__label { font-weight: 600; }
.task-form__readonly { background: var(--color-surface-soft); border: 1px solid var(--colour-border); border-radius: var(--radius-small); min-height: 2.75rem; padding: 0.65rem 0.75rem; }
.task-form__load-lines { margin-top: var(--space-2); }
.task-form__line-status:empty { display: none; }
.task-planning { border-top: 1px solid var(--colour-border); padding-top: var(--space-3); }
.task-planning #id_scheduling_mode { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.task-planning #id_scheduling_mode label { align-items: center; border: 1px solid var(--colour-border); border-radius: var(--radius-small); cursor: pointer; display: flex; gap: var(--space-2); min-height: 2.75rem; padding: 0.6rem 0.75rem; }
.task-planning #id_scheduling_mode input { min-height: 1.1rem; width: 1.1rem; }
.task-planning__conditional { align-items: start; display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.task-planning__conditional > .field-hint,
.task-planning__conditional > .alert { grid-column: 1 / -1; }
[data-scheduling-panel][hidden] { display: none; }
.recurrence-editor { background: var(--color-surface-soft); border: 1px solid var(--colour-border); border-radius: var(--radius); display: grid; gap: var(--space-3); grid-column: 1 / -1; padding: var(--space-3); }
.recurrence-editor__intro { align-items: center; display: flex; gap: var(--space-3); justify-content: space-between; }
.recurrence-editor__intro h3 { font-size: 1rem; }
.recurrence-editor__intro .field-hint { margin: 0; }
.recurrence-editor__rule-line { align-items: center; display: grid; gap: var(--space-3); grid-template-columns: minmax(9rem, 0.65fr) minmax(7rem, 0.45fr) minmax(20rem, 2fr); }
.recurrence-editor__timing-line { align-items: center; display: grid; gap: var(--space-3); grid-template-columns: minmax(12rem, 1fr) minmax(8rem, 0.65fr) minmax(20rem, 1.6fr) minmax(10rem, 0.8fr); }
.recurrence-editor__rule-line > div,
.recurrence-editor__timing-line > div { min-width: 0; }
.recurrence-editor .field { align-items: center; column-gap: var(--space-2); grid-template-columns: max-content minmax(0, 1fr); }
.recurrence-editor .field > label { white-space: nowrap; }
.recurrence-editor .field > .field-hint,
.recurrence-editor .field > .field-error { grid-column: 1 / -1; }
.recurrence-editor__pattern { align-items: center; display: grid; gap: var(--space-2); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.recurrence-editor__pattern-choice { grid-column: 1 / -1; }
.recurrence-editor__ordinal { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recurrence-editor #id_recurrence_daily_kind,
.recurrence-editor #id_recurrence_pattern_kind,
.recurrence-editor #id_recurrence_range_kind { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.recurrence-editor #id_recurrence_daily_kind > div,
.recurrence-editor #id_recurrence_pattern_kind > div,
.recurrence-editor #id_recurrence_range_kind > div { display: contents; }
.recurrence-editor #id_recurrence_daily_kind label,
.recurrence-editor #id_recurrence_pattern_kind label,
.recurrence-editor #id_recurrence_range_kind label { align-items: center; display: inline-flex; gap: 0.25rem; white-space: nowrap; }
.recurrence-editor #id_recurrence_daily_kind input,
.recurrence-editor #id_recurrence_pattern_kind input,
.recurrence-editor #id_recurrence_range_kind input { margin: 0; min-height: 1.1rem; width: 1.1rem; }
#id_recurrence_weekdays { display: grid; gap: var(--space-2); grid-template-columns: repeat(7, minmax(0, 1fr)); }
#id_recurrence_weekdays label { align-items: center; border: 1px solid var(--colour-border); border-radius: var(--radius-small); display: flex; gap: 0.25rem; justify-content: center; min-height: 2.35rem; padding: 0.25rem 0.35rem; }
#id_recurrence_weekdays input { margin: 0; min-height: 1.1rem; width: 1.1rem; }
.recurrence-preview { align-items: center; background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-small); display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
.recurrence-preview__dates { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.recurrence-preview__dates li { background: color-mix(in srgb, var(--color-primary) 10%, var(--colour-surface)); border-radius: var(--radius-pill); padding: 0.2rem 0.5rem; }
.recurrence-preview .field-hint { margin: 0; }
[data-recurrence-frequency-panel][hidden],
[data-recurrence-pattern-panel][hidden],
[data-recurrence-range-panel][hidden],
[data-recurrence-yearly-only][hidden] { display: none; }
.task-owner-plan { display: grid; gap: var(--space-3); grid-column: 1 / -1; min-width: 0; }
.task-owner-plan__heading { align-items: start; display: flex; gap: var(--space-3); justify-content: space-between; }
.task-owner-plan__heading h3 { font-size: 1rem; }
.task-owner-plan__controls { display: grid; gap: var(--space-4); grid-template-columns: minmax(12rem, 0.45fr) minmax(16rem, 1fr); }
.task-owner-plan__moves { gap: var(--space-2); margin-top: calc(var(--space-2) * -1); }
.task-plan-move { min-height: 2.35rem; padding: 0.35rem 0.65rem; }
.task-owner-plan__anchor-note { margin: calc(var(--space-2) * -1) 0 0; }
.task-plan-drag-source { display: flex; justify-content: flex-start; }
.task-plan-new-block { background: var(--color-primary); border: 2px solid var(--color-primary); border-radius: var(--radius-small); color: #fff; cursor: grab; display: grid; flex: none; gap: 0.15rem; min-height: 2.75rem; padding: 0.5rem 0.85rem; text-align: left; touch-action: none; user-select: none; }
.task-plan-new-block strong { font-weight: 700; }
.task-plan-new-block span { font-size: 0.78rem; font-weight: 500; opacity: 0.9; }
.task-plan-new-block:active { cursor: grabbing; }
.task-plan-new-block--dragging { cursor: grabbing; opacity: 0.72; }
.task-plan-summary { background: var(--color-surface-soft); border: 1px solid var(--colour-border); border-radius: var(--radius-small); display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); }
.task-plan-placement-confirmation { color: var(--colour-success-ink); font-weight: 700; }
.task-plan-warning { color: var(--colour-warning-ink); font-weight: 600; }
.task-plan-timeline { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius); display: grid; grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr); min-width: 0; overflow: hidden; }
.task-plan-person { align-items: center; background: var(--color-surface-soft); border-right: 1px solid var(--colour-border); display: flex; gap: var(--space-3); min-width: 0; padding: var(--space-4); }
.task-plan-person__photo,
.task-plan-person__initial { align-items: center; background: var(--color-primary-navy); border-radius: 50%; color: #fff; display: flex; flex: 0 0 3.5rem; font-size: 1.4rem; font-weight: 700; height: 3.5rem; justify-content: center; object-fit: cover; width: 3.5rem; }
.task-plan-person__details { display: grid; min-width: 0; }
.task-plan-person__details strong,
.task-plan-person__details span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-plan-person__details small { color: var(--colour-muted); font-style: italic; }
.task-plan-scroll { min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; }
.task-plan-canvas { min-width: calc(var(--task-plan-day-count) * 7rem); }
.task-plan-dates,
.task-plan-capacity,
.task-plan-drop-grid { display: grid; grid-template-columns: repeat(var(--task-plan-day-count), minmax(0, 1fr)); }
.task-plan-dates { background: var(--color-surface-soft); border-bottom: 1px solid var(--colour-border); }
.task-plan-date { border-right: 1px solid var(--colour-border); display: grid; font-size: 0.72rem; min-height: 2.55rem; padding: 0.4rem 0.5rem; }
.task-plan-date small { color: var(--color-primary-strong); font-weight: 700; }
.task-plan-date--today { background: color-mix(in srgb, var(--color-primary) 10%, var(--colour-surface)); box-shadow: inset 3px 0 0 var(--color-primary); }
.task-plan-capacity { min-height: 1rem; padding-block: 0.25rem; }
.task-plan-capacity__day { border-right: 1px solid var(--colour-border); padding-inline: 0.45rem; }
.task-plan-capacity__day > span { background: #51e6a8; border-radius: 999px; display: block; height: 0.4rem; width: var(--capacity-width); }
.task-plan-capacity__day--closed > span { background: var(--color-danger); min-width: 0.6rem; }
.task-plan-lane { border-top: 1px solid var(--colour-border); min-height: 5.8rem; position: relative; }
.task-plan-drop-grid { inset: 0; position: absolute; }
.task-plan-drop-day { border-right: 1px solid var(--colour-border); min-width: 0; }
.task-plan-drop-day--today { background: color-mix(in srgb, var(--color-primary) 7%, transparent); box-shadow: inset 3px 0 0 var(--color-primary); }
.task-plan-drop-day--closed { background: repeating-linear-gradient(135deg, transparent, transparent 0.45rem, color-mix(in srgb, var(--colour-border) 45%, transparent) 0.45rem, color-mix(in srgb, var(--colour-border) 45%, transparent) 0.55rem); }
.task-plan-drop-day--target { background: color-mix(in srgb, var(--color-primary) 16%, transparent); outline: 2px dashed var(--color-primary); outline-offset: -2px; }
.task-plan-bar { background: color-mix(in srgb, var(--color-primary) 22%, var(--colour-surface)); border: 1px solid color-mix(in srgb, var(--color-primary) 65%, var(--colour-border)); border-radius: 0.3rem; color: var(--colour-ink); cursor: default; display: grid; inset-block: 0.55rem; left: var(--plan-left); min-width: 2.4rem; overflow: hidden; padding: 0.35rem 0.45rem; position: absolute; text-overflow: ellipsis; white-space: nowrap; width: max(2.4rem, var(--plan-width)); z-index: 2; }
.task-plan-bar strong,
.task-plan-bar span,
.task-plan-bar small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-plan-bar small { opacity: 0.78; }
.task-plan-bar--1 { background: color-mix(in srgb, var(--color-teal) 30%, var(--colour-surface)); border-color: var(--color-teal); }
.task-plan-bar--2 { background: color-mix(in srgb, var(--color-success) 24%, var(--colour-surface)); border-color: var(--color-success); }
.task-plan-bar--3 { background: color-mix(in srgb, var(--color-warning) 24%, var(--colour-surface)); border-color: var(--color-warning); }
.task-plan-bar--4 { background: color-mix(in srgb, var(--color-baseline) 30%, var(--colour-surface)); border-color: var(--color-baseline); }
.task-plan-bar--5 { background: color-mix(in srgb, var(--color-danger) 20%, var(--colour-surface)); border-color: var(--color-danger); }
.task-plan-bar--candidate { background: var(--color-primary); border: 2px solid var(--color-primary-navy); color: #fff; cursor: grab; z-index: 3; }
.task-plan-bar--team { border-style: dashed; box-shadow: inset 0 0 0 2px var(--color-teal); }
.board-deadline-flag { background: var(--color-danger); border-radius: 999px; color: #fff; font-size: 0.62rem; font-weight: 800; padding: 0.08rem 0.3rem; }
.task-plan-lane__empty { color: var(--colour-muted); inset: 1.8rem auto auto 1rem; position: absolute; }

/* Employee Overview: four factual lanes on the same calendar scale.  The
   server supplies every percentage; CSS only renders those values. */
.employee-overview-card { min-width: 0; }
.personal-timeline { border: 1px solid var(--colour-border); border-radius: var(--radius); min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; }
.personal-timeline__grid { display: grid; grid-template-columns: 15rem minmax(calc(var(--personal-day-count) * 7rem), 1fr); min-width: calc(15rem + (var(--personal-day-count) * 7rem)); }
.personal-timeline__sticky { background: var(--colour-surface); border-right: 1px solid var(--colour-border); grid-column: 1; left: 0; position: sticky; z-index: 5; }
.personal-timeline__person { align-items: center; background: var(--color-surface-soft); display: flex; gap: var(--space-3); min-width: 0; padding: var(--space-3) var(--space-4); }
.personal-timeline__dates,
.personal-timeline__capacity { display: grid; grid-column: 2; grid-template-columns: repeat(var(--personal-day-count), minmax(0, 1fr)); }
.personal-timeline__dates { background: var(--color-surface-soft); }
.personal-timeline__date { border-right: 1px solid var(--colour-border); display: grid; font-size: 0.72rem; min-height: 3.6rem; padding: 0.45rem 0.55rem; }
.personal-timeline__date small { color: var(--color-primary-strong); font-weight: 700; }
.personal-timeline__date--today,
.personal-timeline__capacity-day--today { background: color-mix(in srgb, var(--color-primary) 10%, var(--colour-surface)); box-shadow: inset 3px 0 0 var(--color-primary); }
.personal-timeline__date--closed { background: repeating-linear-gradient(135deg, var(--color-surface-soft), var(--color-surface-soft) 0.45rem, color-mix(in srgb, var(--colour-border) 55%, transparent) 0.45rem, color-mix(in srgb, var(--colour-border) 55%, transparent) 0.55rem); }
.personal-timeline__label { align-content: center; border-top: 1px solid var(--colour-border); display: grid; gap: 0.15rem; min-height: var(--personal-lane-height, 5.7rem); padding: 0.55rem 1rem; }
.personal-timeline__label small { color: var(--colour-muted); font-size: 0.75rem; }
.personal-timeline__label--capacity { background: var(--color-surface-soft); min-height: 2rem; }
.personal-timeline__capacity { border-top: 1px solid var(--colour-border); min-height: 2rem; }
.personal-timeline__capacity-day { border-right: 1px solid var(--colour-border); padding: 0.75rem 0.45rem; }
.personal-timeline__capacity-day i { background: #51e6a8; border-radius: 999px; display: block; height: 0.45rem; width: var(--personal-capacity); }
.personal-timeline__capacity-day--closed i { background: var(--color-danger); min-width: 0.55rem; }
.personal-timeline__lane { border-top: 1px solid var(--colour-border); grid-column: 2; min-height: var(--personal-lane-height); position: relative; }
.personal-timeline__day-grid { display: grid; grid-template-columns: repeat(var(--personal-day-count), minmax(0, 1fr)); inset: 0; position: absolute; }
.personal-timeline__day-grid i { border-right: 1px solid var(--colour-border); min-width: 0; }
.personal-timeline__day-grid .is-today { background: color-mix(in srgb, var(--color-primary) 7%, transparent); box-shadow: inset 3px 0 0 var(--color-primary); }
.personal-timeline__day-grid .is-closed { background: repeating-linear-gradient(135deg, transparent, transparent 0.45rem, color-mix(in srgb, var(--colour-border) 45%, transparent) 0.45rem, color-mix(in srgb, var(--colour-border) 45%, transparent) 0.55rem); }
.personal-task-block { border: 1px solid; border-radius: 0.3rem; color: var(--colour-ink); display: grid; height: 3.35rem; left: calc(var(--personal-left) + 0.35rem); min-width: 3.2rem; overflow: hidden; padding: 0.3rem 0.45rem; position: absolute; text-decoration: none; top: calc(0.55rem + (var(--personal-stack) * 3.8rem)); white-space: nowrap; width: max(3.2rem, calc(var(--personal-width) - 0.7rem)); z-index: 2; }
.personal-task-block:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.personal-task-block:focus-visible { outline: 3px solid var(--colour-focus); outline-offset: 2px; z-index: 4; }
.personal-task-block strong,
.personal-task-block span,
.personal-task-block small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personal-task-block small { opacity: 0.8; }
.personal-task-block--baseline { background: color-mix(in srgb, var(--color-baseline) 18%, var(--colour-surface)); border-color: var(--color-baseline); }
.personal-task-block--forecast { background: color-mix(in srgb, var(--color-primary) 18%, var(--colour-surface)); border-color: var(--color-primary); }
.personal-task-block--actual { background: var(--color-success-bg); border-color: var(--color-teal); left: calc(var(--personal-left) + 0.175rem); min-width: 0; width: max(0.8rem, calc(var(--personal-width) - 0.35rem)); }
.personal-task-block--blocked { background: var(--color-danger-bg); border-color: var(--color-danger); }
.personal-task-block--general { border-style: dashed; }
.personal-task-block--team { border-style: dashed; box-shadow: inset 0 0 0 2px var(--color-teal); }
.task-block-tooltip { background: var(--colour-ink); border: 1px solid var(--colour-ink); border-radius: var(--radius-small); box-shadow: var(--shadow); color: var(--colour-surface); font-size: 0.875rem; line-height: 1.4; max-width: min(24rem, calc(100vw - 1rem)); padding: var(--space-2) var(--space-3); pointer-events: none; position: fixed; white-space: normal; z-index: 1000; }
.personal-timeline__empty { color: var(--colour-muted); inset: 1.8rem auto auto 1rem; position: absolute; }
.personal-off-window { align-items: start; background: var(--color-danger-bg); border: 1px dashed var(--color-danger); border-radius: var(--radius-small); display: grid; gap: var(--space-3); grid-template-columns: minmax(13rem, 0.45fr) minmax(0, 1fr); padding: var(--space-3); }
.personal-off-window > div { display: grid; gap: var(--space-1); }
.personal-off-window ul { margin: 0; }
.personal-text-alternative { border: 1px solid var(--colour-border); border-radius: var(--radius-small); padding: var(--space-2) var(--space-3); }
.personal-text-alternative summary { cursor: pointer; font-weight: 650; min-height: 2.75rem; padding-block: var(--space-2); }
.personal-text-alternative section { border-top: 1px solid var(--colour-border); display: grid; gap: var(--space-2); padding-top: var(--space-3); }
.personal-text-alternative section + section { margin-top: var(--space-3); }
.personal-text-alternative h3,
.personal-text-alternative p,
.personal-text-alternative ul { margin-block: 0; }
.personal-day-cards { display: none; }
.personal-day-card { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-small); display: grid; gap: var(--space-3); padding: var(--space-3); }
.personal-day-card--today { border-left: 0.3rem solid var(--color-primary); }
.personal-day-card h3,
.personal-day-card p { margin: 0; }
.personal-day-card > div { display: grid; gap: var(--space-1); }
.personal-day-card > div > a,
.personal-day-card > div > span { border-left: 0.25rem solid var(--color-primary); padding-left: var(--space-2); }
.personal-day-card > div > .personal-day-card__blocked { border-color: var(--color-danger); color: var(--color-danger); }
.employee-task-detail { display: grid; gap: var(--space-4); }
.employee-task-detail > .status { justify-self: start; }
.employee-task-detail__header { gap: var(--space-3); }
.employee-task-detail__facts { display: grid; gap: var(--space-2); margin: 0; }
.employee-task-detail__facts div { align-items: baseline; border-bottom: 1px solid var(--colour-border); display: flex; gap: var(--space-3); justify-content: space-between; padding-bottom: var(--space-2); }
.employee-task-detail__facts dt { color: var(--colour-muted); }
.employee-task-detail__facts dd { font-weight: 650; margin: 0; text-align: right; }
.employee-task-detail__notice,
.employee-task-detail__blocked { background: var(--color-surface-soft); border: 1px solid var(--colour-border); border-radius: var(--radius-small); padding: var(--space-3); }
.employee-task-detail__blocked { background: var(--color-danger-bg); border-color: var(--color-danger); }
.employee-task-detail__time { display: grid; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.employee-task-detail__time li { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; }
.employee-task-action { border-top: 1px solid var(--colour-border); display: grid; gap: var(--space-3); padding-top: var(--space-4); }
.employee-task-block-fields[hidden] { display: none; }
.employee-task-detail-page { margin-inline: auto; max-width: 46rem; padding: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .personal-task-block:hover { transform: none; }
}
@media (forced-colors: active) {
  .personal-task-block,
  .task-block-tooltip,
  .personal-day-card--today,
  .personal-off-window { border: 2px solid CanvasText; }
  .task-block-tooltip { background: Canvas; color: CanvasText; }
}
.task-optional-actions { border-top: 1px solid var(--colour-border); display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-3); }
.task-deadline-editor { align-items: end; background: var(--color-surface-soft); border: 1px solid var(--colour-border); border-radius: var(--radius); display: grid; gap: var(--space-3); grid-template-columns: minmax(13rem, 1fr) minmax(10rem, 0.7fr) minmax(10rem, 0.7fr) auto; padding: var(--space-3); }
.task-deadline-editor[hidden] { display: none; }
.task-deadline-editor h3 { font-size: 1rem; }
.task-deadline-editor .field-hint { margin: 0; }
.task-dependency-editor { background: var(--color-surface-soft); border: 1px solid var(--colour-border); border-radius: var(--radius); display: grid; gap: var(--space-3); padding: var(--space-3); }
.task-dependency-editor[hidden] { display: none; }
.task-status-editor { background: var(--color-surface-soft); border: 1px solid var(--colour-border); border-radius: var(--radius); display: grid; gap: var(--space-3); padding: var(--space-3); }
.task-status-editor[hidden],
.task-status-editor__blocked[hidden] { display: none; }
.task-status-editor__heading { align-items: start; display: flex; gap: var(--space-3); justify-content: space-between; }
.task-status-editor__heading h3,
.task-status-editor__heading .field-hint { margin: 0; }
.task-status-editor__blocked { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.task-dependency-editor__heading { align-items: start; display: flex; gap: var(--space-3); justify-content: space-between; }
.task-dependency-side__heading { min-width: 0; }
.task-dependency-editor__heading h3,
.task-dependency-side__heading h4 { font-size: 1rem; }
.task-dependency-editor__heading .field-hint,
.task-dependency-side__heading .field-hint { margin: 0; }
.task-dependency-editor__sides { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.task-dependency-side { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-small); display: grid; gap: var(--space-3); min-width: 0; padding: var(--space-3); }
.task-dependency-rows { display: grid; gap: var(--space-2); }
.task-dependency-row { align-items: end; background: var(--color-surface-soft); border: 1px solid var(--colour-border); border-radius: var(--radius-small); display: grid; gap: 0.35rem; grid-template-columns: minmax(4.75rem, 0.55fr) minmax(8.2rem, 1fr) auto auto; min-width: 0; padding: var(--space-2); }
.task-dependency-row label { display: grid; font-size: 0.82rem; font-weight: 600; gap: 0.2rem; min-width: 0; }
.task-dependency-row input,
.task-dependency-row select { box-sizing: border-box; max-width: 100%; min-height: 2.25rem; padding-block: 0.35rem; width: 100%; }
.task-dependency-row__task { grid-column: 1 / -1; min-width: 0; }
.task-dependency-row__task > label { margin-bottom: 0.2rem; }
.task-dependency-combobox { min-width: 0; position: relative; }
.task-dependency-combobox__control { display: grid; grid-template-columns: minmax(0, 1fr) 2.25rem; }
.task-dependency-combobox__control input { border-end-end-radius: 0; border-start-end-radius: 0; min-width: 0; }
.task-dependency-combobox__toggle { align-items: center; background: var(--colour-surface); border: 1px solid var(--colour-border); border-inline-start: 0; border-radius: 0 var(--radius-small) var(--radius-small) 0; color: var(--colour-text); cursor: pointer; display: inline-flex; font-size: 1rem; justify-content: center; min-height: 2.25rem; padding: 0; }
.task-dependency-combobox__toggle:hover { background: var(--color-surface-soft); }
.task-dependency-combobox__toggle:focus-visible { outline: 3px solid var(--colour-focus); outline-offset: 2px; }
.task-dependency-combobox__list { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-small); box-shadow: var(--shadow); inset: calc(100% + 0.25rem) 0 auto; max-height: 15rem; overflow-y: auto; padding: 0.25rem; position: absolute; z-index: 30; }
.task-dependency-combobox__list[hidden] { display: none; }
.task-dependency-combobox__option { background: transparent; border: 0; border-radius: calc(var(--radius-small) - 2px); color: var(--colour-text); cursor: pointer; display: block; font: inherit; padding: 0.55rem 0.65rem; text-align: start; width: 100%; }
.task-dependency-combobox__option:hover,
.task-dependency-combobox__option[aria-selected="true"] { background: var(--colour-info-bg); color: var(--colour-ink); }
.task-dependency-combobox__option--action { border-top: 1px solid var(--colour-border); color: var(--colour-accent); font-weight: 700; margin-top: 0.25rem; padding-top: 0.65rem; }
.task-dependency-combobox__option--other { padding-inline-start: 1rem; }
.task-dependency-combobox__group { border-top: 1px solid var(--colour-border); color: var(--colour-muted); font-size: 0.75rem; font-weight: 700; margin: 0.25rem 0.4rem 0; padding: 0.55rem 0.25rem 0.25rem; text-transform: uppercase; }
.task-dependency-combobox__empty { color: var(--colour-muted); font-size: 0.82rem; margin: 0; padding: 0.55rem 0.65rem; }
.task-dependency-row__enforce,
.compact-check { align-items: center; display: inline-flex !important; gap: 0.35rem !important; grid-template-columns: auto 1fr; min-height: 2.25rem; white-space: nowrap; }
.task-dependency-row__enforce input,
.compact-check input { margin: 0; min-height: 1.1rem; width: 1.1rem; }
.task-helper-editor,
.task-collaborator-editor { background: var(--color-surface-soft); border: 1px solid var(--colour-border); border-radius: var(--radius); display: grid; gap: var(--space-3); padding: var(--space-3); }
.task-helper-editor[hidden],
.task-collaborator-editor[hidden] { display: none; }
.task-helper-editor__heading,
.task-collaborator-editor__heading { align-items: start; display: flex; gap: var(--space-3); justify-content: space-between; }
.task-helper-editor__heading h3 { font-size: 1rem; }
.task-collaborator-editor__heading h3 { font-size: 1rem; }
.task-helper-editor__heading .field-hint,
.task-collaborator-editor__heading .field-hint { margin: 0; }
.task-helper-rows { display: grid; gap: var(--space-2); max-width: 42rem; }
.task-helper-row { align-items: end; background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-small); display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr) auto; min-width: 0; padding: var(--space-2); }
.task-helper-row__person { min-width: 0; }
.task-helper-row__person > label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.2rem; }
.task-helper-combobox { min-width: 0; position: relative; }
.task-helper-combobox__control { display: grid; grid-template-columns: minmax(0, 1fr) 2.25rem; }
.task-helper-combobox__control input { border-end-end-radius: 0; border-start-end-radius: 0; box-sizing: border-box; min-height: 2.25rem; min-width: 0; width: 100%; }
.task-helper-combobox__toggle { align-items: center; background: var(--colour-surface); border: 1px solid var(--colour-border); border-inline-start: 0; border-radius: 0 var(--radius-small) var(--radius-small) 0; color: var(--colour-text); cursor: pointer; display: inline-flex; font-size: 1rem; justify-content: center; min-height: 2.25rem; padding: 0; }
.task-helper-combobox__toggle:hover { background: var(--color-surface-soft); }
.task-helper-combobox__toggle:focus-visible { outline: 3px solid var(--colour-focus); outline-offset: 2px; }
.task-helper-combobox__list { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-small); box-shadow: var(--shadow); inset: calc(100% + 0.25rem) 0 auto; max-height: 15rem; overflow-y: auto; padding: 0.25rem; position: absolute; z-index: 30; }
.task-helper-combobox__list[hidden] { display: none; }
.task-helper-combobox__option { background: transparent; border: 0; border-radius: calc(var(--radius-small) - 2px); color: var(--colour-text); cursor: pointer; display: block; font: inherit; padding: 0.55rem 0.65rem; text-align: start; width: 100%; }
.task-helper-combobox__option:hover,
.task-helper-combobox__option[aria-selected="true"] { background: var(--colour-info-bg); color: var(--colour-ink); }
.task-helper-combobox__empty { color: var(--colour-muted); font-size: 0.82rem; padding: 0.55rem 0.65rem; }
.task-collaborator-rows { display: grid; gap: var(--space-2); }
.task-collaborator-row { align-items: end; background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-small); display: grid; gap: var(--space-2); grid-template-columns: minmax(12rem, 1.35fr) minmax(11rem, 0.9fr) minmax(7rem, 0.55fr) minmax(8.5rem, 0.75fr) auto; min-width: 0; padding: var(--space-2); }
.task-collaborator-row__person { min-width: 0; }
.task-collaborator-row__person > label,
.task-collaborator-row__mode,
.task-collaborator-row__hours { display: grid; font-size: 0.82rem; font-weight: 600; gap: 0.2rem; min-width: 0; }
.task-collaborator-row__mode select,
.task-collaborator-row__hours input { box-sizing: border-box; min-height: 2.25rem; width: 100%; }
.task-collaborator-row__hours[hidden] { display: none; }
.task-collaborator-row__impact { align-self: center; margin: 0; }
.task-participant-fallback { border-top: 1px solid var(--colour-border); padding-top: var(--space-3); }

.company-settings-form { max-width: 48rem; }
.company-settings-form .choice-fieldset { grid-template-columns: minmax(0, 1fr); }
.company-settings-form .alert { display: block; overflow-wrap: anywhere; }
.company-working-hours { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100%; min-width: 0; }
.company-working-hours > .field,
.company-working-hours input { max-width: 100%; min-width: 0; }

@media (max-width: 48rem) {
  .task-form__row { grid-template-columns: minmax(0, 1fr); }
  .task-form__effort-row .field > input,
  .task-form__effort-row .field > select,
  .task-form__effort-row .field > .task-form__readonly { margin-top: 0; }
  .task-planning #id_scheduling_mode,
  .task-planning__conditional { grid-template-columns: minmax(0, 1fr); }
  .task-dependency-editor__heading { align-items: stretch; flex-direction: column; }
  .task-status-editor__heading { align-items: stretch; flex-direction: column; }
  .task-status-editor__blocked { grid-template-columns: minmax(0, 1fr); }
  .task-dependency-editor__sides { grid-template-columns: minmax(0, 1fr); }
  .task-deadline-editor { align-items: stretch; grid-template-columns: minmax(0, 1fr); }
  .task-dependency-row { grid-template-columns: minmax(0, 1fr) minmax(7rem, 0.7fr); }
  .task-helper-editor__heading,
  .task-collaborator-editor__heading { align-items: stretch; flex-direction: column; }
  .task-helper-row { grid-template-columns: minmax(0, 1fr); }
  .task-collaborator-row { grid-template-columns: minmax(0, 1fr); }
  .task-owner-plan__heading { align-items: stretch; flex-direction: column; }
  .recurrence-editor__intro { align-items: stretch; flex-direction: column; }
  .recurrence-editor__rule-line,
  .recurrence-editor__timing-line { align-items: stretch; grid-template-columns: minmax(0, 1fr); }
  .recurrence-editor__pattern { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #id_recurrence_weekdays { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .task-plan-new-block { width: 100%; }
  .task-owner-plan__controls { grid-template-columns: minmax(0, 1fr); }
  .task-plan-timeline { grid-template-columns: minmax(0, 1fr); }
  .task-plan-person { border-bottom: 1px solid var(--colour-border); border-right: 0; padding: var(--space-3); }
  .employee-overview-heading .button-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .personal-timeline { display: none; }
  .personal-day-cards { display: grid; gap: var(--space-3); }
  .personal-off-window { grid-template-columns: minmax(0, 1fr); }
  .company-working-hours { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 30rem) {
  /* Keep the two HH:MM buffer labels and controls readable in a phone-width
     dependency card. Desktop retains the compact four-column row above. */
  .task-dependency-row { grid-template-columns: minmax(0, 1fr); }
  .task-dependency-row > .button { width: 100%; }
}

/* An effort handle, not a date/placement editor. */
.board-resize-handle { cursor: ew-resize; flex-shrink: 0; margin-inline-start: auto; padding-inline: 0.25rem; }
.board-resize-handle:focus-visible { outline: 2px solid currentColor; }
.board-new-task { position: sticky; top: 0.5rem; z-index: 5; margin-block-end: 0.5rem; cursor: grab; }
.board-drawer-actions[hidden] { display: none; }

[data-board-mirror-note][hidden] { display: none; }