/* Approved fixed blue / light references. Existing geometry and workflows remain authoritative. */
body.app-reference {
  --shipleys-canvas: #f6f6f2;
  --shipleys-panel: #ffffff;
  --shipleys-yellow: #223f82;
  --app-reference-page: #f6f6f2;
  --app-reference-deep: #f6f6f2;
  --app-reference-rail: #223f82;
  --app-reference-panel: #ffffff;
  --app-reference-panel-2: #f5f7fa;
  --app-reference-line: #dce1e7;
  --app-reference-ink: #17263e;
  --app-reference-muted: #5b687a;
  /* Compatibility aliases for the existing component vocabulary. */
  --app-reference-pink: #223f82;
  --app-reference-pink-text: #5b687a;
  --app-reference-orange: #223f82;
  --app-reference-green: #17603e;
  --rota-reference-page: #f6f6f2;
  --rota-reference-deep: #f6f6f2;
  --rota-reference-rail: #223f82;
  --rota-reference-panel: #ffffff;
  --rota-reference-panel-2: #f5f7fa;
  --rota-reference-line: #dce1e7;
  --rota-reference-ink: #17263e;
  --rota-reference-muted: #5b687a;
  --rota-reference-soft: #5b687a;
  --rota-reference-pink: #223f82;
  --rota-reference-pink-text: #5b687a;
  --rota-reference-orange: #223f82;
  --rota-reference-green: #17603e;
  --bg: #f6f6f2; --bg-deep: #f6f6f2; --sidebar: #223f82;
  --card: #ffffff; --card-solid: #ffffff; --panel: #ffffff;
  --ink: #17263e; --muted: #5b687a; --muted-strong: #5b687a;
  --border: #dce1e7; --accent: #223f82; --accent-2: #223f82;
  --accent-3: #5b687a; --warning: #223f82; --danger: #ffb9a9;
  --success: #17603e; --shadow: none;
  --radius-xl: 8px; --radius-lg: 8px; --radius-md: 6px;
  background: var(--shipleys-canvas);
  color: var(--ink);
  font-family: 'Segoe UI', Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
body.app-reference::before { display: none; }
/* Remove legacy decorative paint, not the responsive or workflow contracts. */
body.app-reference :where(section, article, aside, header, nav, details, summary, form, table, th, td, button, a, .badge, .avatar) {
  box-shadow: none;
  backdrop-filter: none;
  text-shadow: none;
}
body.app-reference .sidebar { background: #223f82; border-color: #dce1e7; box-shadow: none; }
body.app-reference .brand-logo { width: 176px; max-width: 100%; height: auto; object-fit: contain; border: 0; border-radius: 0; background: transparent; padding: 0; }
body.app-reference .sidebar-brand { gap: 14px; border-color: #dce1e7; }
body.app-reference .sidebar-brand h1 { font-size: 13px; font-weight: 500; letter-spacing: .06em; }
body.app-reference .sidebar-brand .eyebrow { color: #5b687a; font-size: 10px; }
body.app-reference .nav-link { color: #5b687a; border-radius: 6px; background: transparent; box-shadow: none; }
body.app-reference .nav-link:hover { background: #eef3fb; transform: none; }
body.app-reference .portal-nav .nav-link.active { background: #eef3fb; border-color: #dce1e7; color: #17263e; box-shadow: inset 3px 0 0 var(--shipleys-yellow); }
body.app-reference .nav-glyph { color: #5b687a; }
body.app-reference .shell-topline { background: #ffffff; padding: 10px 14px; border-bottom: 1px solid #dce1e7; border-radius: 6px; }
body.app-reference .topbar-account-actions { margin-left: auto; background: #ffffff; }
body.app-reference .avatar { background: #dce1e7; color: #17263e; border: 1px solid #dce1e7; border-radius: 50%; }
body.app-reference .topbar-account-link { background: transparent; }
/* Page-level surfaces share one content gutter; nested planner scrollers keep
   their existing compact/edge-to-edge layout and the rota wide shell is unchanged. */
body.app-reference .hero-card { background: var(--shipleys-panel); border: 1px solid var(--border); box-shadow: none; }
@media screen {
  body.app-reference .content-shell > :is(.hero-card, .panel, .dashboard-section) {
    padding-inline: clamp(1rem, 3vw, 1.35rem);
  }
}
/* The centered guest form retains its deliberately roomier gutter. */
body.app-reference.is-guest .auth-shell > .auth-card {
  padding-inline: clamp(1.35rem, 5vw, 2rem);
}
body.app-reference .hero-card::before, body.app-reference .hero-card::after { display: none; }
body.app-reference h2 { letter-spacing: -.025em; }
body.app-reference .eyebrow { color: #5b687a; }
body.app-reference :is(.panel,.dashboard-section,.action-panel,.document-card,.staff-card,.account-details,.settings,.auth-card,.rota-review-panel,.rota-day-details,.rota-week-editor,.rota-workflow-tools > details) {
  background: #ffffff; border-color: #dce1e7; border-radius: 8px; box-shadow: none;
}
body.app-reference :is(.dashboard-priority-strip,.dashboard-control-panel,.rota-staff-summary,.rota-summary-strip) { background: #f5f7fa; border-color: #dce1e7; border-radius: 8px; box-shadow: none; }
body.app-reference :is(.priority-card,.dashboard-priority-card,.metric-card,.stat-card,.quick-action-grid a) { background: #f5f7fa; border-color: #dce1e7; box-shadow: none; }
/* Checklist summaries were missed by the light-card migration. Reset the
   background shorthand to remove the legacy gradient, retaining all geometry. */
body.app-reference .checklist-summary-pill { background: var(--card); border-color: var(--border); color: var(--ink); }
body.app-reference .checklist-summary-pill span { color: var(--muted-strong); }
body.app-reference .checklist-summary-pill-warning strong { color: #715300; }
body.app-reference .checklist-summary-pill-success strong { color: var(--success); }
body.app-reference :is(.rota-day-summary,.rota-week-editor-heading,.document-card-header,.staff-card-header) { background: #f5f7fa; border-color: #dce1e7; }
body.app-reference :is(button,.button-link,.link-button,.button-primary,.stacked-form button) { background: #223f82; color: #17263e; border: 1px solid #183269; border-radius: 6px; box-shadow: none; }
body.app-reference :is(button,.button-link,.link-button):hover { background: #183269; box-shadow: none; transform: none; }
body.app-reference :is(.button-secondary,.logout-button,.topbar-logout-button,.rota-week-popover-close) { background: #eef3fb; border-color: #dce1e7; color: #17263e; }
body.app-reference :is(input:not([type=checkbox]):not([type=radio]),select,textarea),
body.app-reference .stacked-form :is(input,select,textarea),body.app-reference .inline-form :is(input,select,textarea) {
  background: #ffffff; color: #17263e; border-color: #dce1e7; border-radius: 6px;
}
body.app-reference input::placeholder,body.app-reference textarea::placeholder { color: #5b687a; opacity: 1; }
body.app-reference :is(input[type=checkbox],input[type=radio]) { accent-color: #223f82; }
body.app-reference :focus-visible { outline: 3px solid #223f82; outline-offset: 3px; }
body.app-reference :is(.section-tabs,.rota-tabs) { background: transparent; }
body.app-reference .section-tab.active::after { background: #223f82; }
body.app-reference .section-tab.active { color: #17263e; background: #f5f7fa; }
body.app-reference table { background: #ffffff; color: #17263e; }
body.app-reference th { background: #eef3fb; color: #5b687a; box-shadow: none; }
body.app-reference td { background: #ffffff; border-color: #dce1e7; }
body.app-reference tbody tr:nth-child(even) td { background: #f5f7fa; }
body.app-reference .rota-staff-week-table .rota-week-person { background: #f5f7fa; box-shadow: none; }
body.app-reference .rota-staff-week-table thead th { background: #eef3fb; box-shadow: none; }
body.app-reference .rota-week-person-avatar { background: #dce1e7; color: #17263e; }
body.app-reference .rota-week-shift-editor > summary,
body.app-reference .rota-week-shift-card.status-published .rota-week-shift-editor > summary { background: #eef3fb; color: #17263e; border: 1px solid #dce1e7; border-radius: 5px; box-shadow: none; }
body.app-reference .rota-week-shift-card.status-draft .rota-week-shift-editor > summary,
body.app-reference .rota-week-shift-card.has-pending-change .rota-week-shift-editor > summary { background: #fff9df; border-color: #e7d786; color: #715300; }
body.app-reference .rota-week-shift-editor > summary strong { color: #5b687a; }
body.app-reference .rota-week-shift-state { color: #5b687a; background: #f5f7fa; }
body.app-reference .rota-week-cell-add > summary { color: #5b687a; background: transparent; }
body.app-reference :is(.rota-week-shift-popover,.rota-week-cell-add-popover,.rota-edit-form,.rota-mobile-day-add[open],.rota-shift-edit[open]) { background: #f5f7fa; border-color: #dce1e7; box-shadow: none; }
body.app-reference .rota-week-shift-popover .rota-edit-form { background: transparent; }
body.app-reference :is(.badge,.status-pill) { background: #eef3fb; color: #5b687a; border-color: #dce1e7; }
body.app-reference :is(.badge-warning,.status-draft,.flash-warning) { color: #715300; }
body.app-reference :is(.flash-error,.field-error,.error-message) { background: #382923; color: #ffcebf; border-color: #ae7861; }
body.app-reference .auth-topbar { background: #223f82; border-bottom: 1px solid #dce1e7; }
body.app-reference .auth-brand-lockup .brand-logo { width: 256px; height: auto; }
@media (max-width: 860px) {
  body.app-reference .sidebar { margin: 0; padding: 10px 12px; border-radius: 0; gap: 8px; }
  body.app-reference .sidebar-brand { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 2px 0 8px; border: 0; }
  body.app-reference .sidebar-brand .brand-logo { width: 150px; height: auto; }
  body.app-reference .sidebar-brand h1 { font-size: 10px; max-width: 110px; text-align: right; }
  body.app-reference .sidebar-brand .eyebrow { display: none; }
  body.app-reference .nav-glyph { display: none; }
  body.app-reference .portal-nav .nav-link.active { box-shadow: inset 0 -3px 0 #223f82; }
  body.app-reference .shell-topline { padding: 4px 0; margin-bottom: 12px; border-radius: 0; }
  body.app-reference .content-shell { padding-top: 6px; }
  body.app-reference :is(button,.button-link,.link-button,summary) { min-height: 44px; }
  body.app-reference .auth-brand-lockup .brand-logo { width: 220px; height: auto; }
}
@media print {
  body.app-reference { background: white; color: black; }
  body.app-reference :is(section,article,table,th,td) { background: white; color: black; }
}

body.app-reference .rota-manager-summary-bar,
body.app-reference .rota-manager-summary-bar > *,
body.app-reference .rota-summary-card,
body.app-reference .rota-summary-grid { background: #f5f7fa; border-color: #dce1e7; box-shadow: none; }
body.app-reference .topbar-account-copy small { display: block; }
/* Retire literal legacy paints at their original selector specificity. */
/* End manager staff-by-week editor */

/* End scroll performance polish */

/* Reference-led manager rota workspace: deep plum, operational metrics, no decorative charts. */
.page-manager-rota { background: #f5f7fa; }
.page-manager-rota .rota-manager-summary-bar > span.needs-attention { background: #f5f7fa; }
.page-manager-rota .rota-primary-actions { background: #f5f7fa; }
.page-manager-rota .rota-primary-actions form button[type="submit"]:not(.button-secondary) { color: #17263e; }
body.app-reference :is(.compact-details,.rota-chip-actions,.rota-chip-note-details) > summary { color: #5b687a; }
.page-manager-rota .rota-primary-create[open] { background: #f5f7fa; }
.page-manager-rota .rota-tab-count { background: #f5f7fa; }
.page-manager-rota .rota-staff-week-table thead th { background: #f5f7fa; }
.page-manager-rota .rota-staff-week-table thead th.is-today { background: #f5f7fa; }
.page-manager-rota .rota-staff-week-table .rota-week-person-heading,
.page-manager-rota .rota-staff-week-table .rota-week-person { background: #f5f7fa; }
.page-manager-rota .rota-week-unassigned-row .rota-week-person { background: #f5f7fa; }
.page-manager-rota .rota-week-unassigned-row .rota-week-staff-cell { background: #f5f7fa; }
.page-manager-rota .rota-week-cell-add > summary:hover,
.page-manager-rota .rota-week-cell-add > summary:focus-visible { border-color: #dce1e7; background: #f5f7fa; }
.page-manager-rota .rota-week-shift-popover,
.page-manager-rota .rota-week-cell-add-popover { background: #f5f7fa; }
.page-manager-rota .sidebar { background: #f5f7fa; }
/* End reference-led manager rota workspace. */

/* Reference-led whole-rota skin: shared shell and staff workspace. */
.page-rota-reference { background: #f5f7fa; }
.page-rota-reference .rota-mobile-quicklinks a:hover,
.page-rota-reference .rota-mobile-quicklinks a:focus-visible { border-color: #dce1e7; background: #f5f7fa; }
.page-rota-reference .staff-shift-card { background: #f5f7fa; }
.page-rota-reference .staff-shift-time { background: #f5f7fa; }
.page-rota-reference .shift-type-tag { border-color: #dce1e7; background: #f5f7fa; }
.page-rota-reference .staff-rota-extra-days,
.page-rota-reference .staff-rota-extra-days[open] { background: #f5f7fa; }
.page-rota-reference .rota-form input,
.page-rota-reference .rota-form select,
.page-rota-reference .rota-form textarea { background: #f5f7fa; }
.page-manager-rota .rota-empty-week { border-color: #dce1e7; background: #f5f7fa; }
.page-rota-reference .sidebar { background: #f5f7fa; }
/* End reference-led whole-rota skin. */

/* Whole-app reference design: authenticated portal only. */
body.app-reference { background: #f6f6f2; }
body.app-reference .sidebar { background: #223f82; }
body.app-reference .priority-tile:hover,
body.app-reference .summary-card:hover,
body.app-reference .staff-next-shift-card:hover { border-color: #dce1e7; background: #f5f7fa; }
body.app-reference .button-secondary:hover,
body.app-reference .secondary-button:hover,
body.app-reference .ghost-button:hover { border-color: #dce1e7; background: #f5f7fa; }
body.app-reference .stacked-form input,
body.app-reference .stacked-form select,
body.app-reference .stacked-form textarea,
body.app-reference .inline-form input,
body.app-reference .inline-form select,
body.app-reference .inline-form textarea { background: #f5f7fa; }
body.app-reference table { background: #f5f7fa; }
body.app-reference th { background: #f5f7fa; }
body.app-reference .rota-staff-week-table .rota-week-person-heading { background: #eef3fb; }
body.app-reference .section-tab .badge, body.app-reference .tab-count { background: #eef3fb; color: #5b687a; }

/* Approved palette — colour only; existing layout remains authoritative. */
body.app-reference :is(button,.button-link,.link-button,.button-primary,.stacked-form button) { background:#eef3fb; color:#17263e; border-color:#dce1e7; }
body.app-reference :is(button,.button-link,.link-button):hover {background:#dce1e7;color:#17263e;}
body.app-reference .rota-primary-create > summary,
body.app-reference .button-primary,
body.app-reference .dashboard-control-panel .button-link:not(.button-secondary),
body.app-reference .rota-primary-actions form button[type=submit]:not(.button-secondary) {background:#223f82;color:#ffffff;border-color:#183269;}
body.app-reference .rota-primary-create > summary:hover {background:#183269;color:#ffffff;}
body.app-reference .rota-primary-create > summary::before {color:inherit;}
body.app-reference .eyebrow {color:#5b687a;}
body.app-reference main > .hero-card .eyebrow {color:#223f82;}
body.app-reference .rota-staff-week-table thead th.is-today {box-shadow:inset 0 -3px #223f82;}
body.app-reference .rota-mobile-day-tabs a[aria-current],
body.app-reference .rota-day-switcher .active {background:#223f82;color:#ffffff;}
body.app-reference :is(.compact-details,.rota-chip-actions,.rota-chip-note-details) > summary {color:#5b687a;}
body.app-reference :focus-visible {outline:3px solid #b18c00!important;outline-offset:3px!important;}
/* Nested field labels need room for the 6px outward keyboard ring.
   Leave checkbox/radio rows and separately associated labels unchanged. */
body.app-reference label:not(.rota-date-jump label) > :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea) {
  margin-top: 8px;
}
/* Date-jump labels already use flex/grid gaps; reserve the same vertical room. */
body.app-reference .rota-date-jump label { row-gap: 8px; }

/* Retire remaining legacy literals without changing any spacing. */
body.app-reference button.logout-button.topbar-logout-button {background:#eef3fb!important;color:#17263e!important;border-color:#dce1e7;}
body.app-reference :is(.summary-card,.priority-tile,.dashboard-stats-panel) {background:#f5f7fa;border-color:#dce1e7;}
body.app-reference .summary-card :is(.summary-value,strong) {color:#17263e;}
body.app-reference .quick-action-grid a:first-child {background:#223f82;color:#ffffff;border-color:#183269;}
body.app-reference .rota-day-details[open] > summary {border-color:#223f82;box-shadow:inset 3px 0 #223f82;background:#eef3fb;}
body.app-reference .rota-day-details[open] > summary :is(strong,span) {color:#17263e;}

/* Warm palette: colour-only, approved A. */
body.app-reference .quick-action-grid a:first-child {background:var(--app-reference-panel-2);color:var(--ink);border-color:var(--border);}
body.app-reference main > .hero-card .eyebrow {color:#5b687a;}

/* Final nested-state and literal-paint corrections; no geometry changes. */
body.app-reference .rota-template-slot-note,body.app-reference .rota-mobile-day-add > summary {background:var(--app-reference-panel-2);color:#5b687a;border-color:var(--border);}
body.app-reference .rota-chip-actions,body.app-reference .rota-mobile-day-add {border-color:var(--border);}
body.app-reference .summary-card.summary-link {color:#17263e;}
body.app-reference .quick-action-grid a {color:#17263e!important;}
body.app-reference .summary-priority-label {background:#fff9df;color:#715300;border-color:var(--accent);}
body.app-reference .summary-priority-label.info {background:var(--app-reference-panel-2);color:#5b687a;border-color:var(--border);}
body.app-reference .avatar,body.app-reference .rota-week-person-avatar {background:var(--app-reference-panel-2);color:#17263e;}
body.app-reference .rota-week-unassigned-row .rota-week-person-avatar {background:var(--accent);color:#ffffff;}
body.app-reference .needs-attention {color:#715300!important;}
body.app-reference .rota-template-slot-hint {color:#5b687a;}
body.app-reference .rota-tab-count,body.app-reference th strong {color:#17263e!important;}
body.app-reference .rota-edit-form button,body.app-reference .rota-edit-form button.button-secondary {background:var(--accent);color:#ffffff!important;}
body.app-reference .status-badge.status-draft {background:#fff9df;color:#715300;border-color:var(--accent);}
body.app-reference main > .hero-card .eyebrow {color:#715300;}
body.app-reference .sidebar-status span {color:#17603e;}
body.app-reference .status-published,body.app-reference .status-approved,body.app-reference .badge-success {color:#17603e;}
body.app-reference .status-rejected,body.app-reference .status-cancelled,body.app-reference .badge-danger {color:#922b23;}
body.app-reference { --app-reference-green:#17603e;--rota-reference-green:#17603e;--success:#17603e; }
/* Populated Documents and staff administration: paint-only warm surfaces. */
body.app-reference :is(.document-read-details,.document-management,.staff-admin-card) {
  background: var(--app-reference-panel-2); border-color: var(--border);
}
body.app-reference .document-reader {
  background: var(--app-reference-panel); border-color: var(--border);
  scrollbar-color: var(--accent) var(--app-reference-panel);
}
body.app-reference .document-reader:focus { outline-color: var(--accent); }
body.app-reference .document-read-details > summary strong {
  background: #fff9df; color: #715300; border-color: var(--accent);
}
body.app-reference .document-export-actions .button-secondary {
  background: #eef3fb; color: var(--ink); border-color: var(--border);
}
body.app-reference .document-export-actions .button-secondary:is(:hover,:focus-visible) {
  background: var(--app-reference-panel-2); color: var(--ink); border-color: var(--accent);
}
body.app-reference .document-body,
body.app-reference .signature-pad label { color: var(--ink); }
body.app-reference .document-action-bar {
  background: var(--app-reference-panel-2); border-color: var(--border);
}
body.app-reference :is(.document-typed-ack-form,.acknowledgement-summary) { border-color: var(--border); }
body.app-reference .signature-canvas { background: #17263e; border-color: var(--accent); }
body.app-reference .staff-sensitive-actions .inline-form { background: var(--app-reference-panel-2); }
body.app-reference .temporary-password-panel strong {
  background: var(--app-reference-panel-2); color: var(--ink); border-color: var(--accent);
}
@media (max-width: 720px) {
  body.app-reference :is(.staff-import-table,.document-ack-table) tr {
    background: var(--app-reference-panel-2); border-color: var(--border);
  }
}
/* Real form selectors (including recovery and review), not preview-only classes. */
body.app-reference form button[type=submit]:not(.button-secondary):not(.button-danger),
body.app-reference .stacked-form button:not(.button-secondary):not(.button-danger) {
  background: #223f82; color: #ffffff; border-color: #183269;
}
body.app-reference form button[type=submit]:not(.button-secondary):not(.button-danger):hover {
  background: #183269; color: #ffffff;
}
body.app-reference .panel a:not(.button-link), body.app-reference .staff-card-details summary,
body.app-reference .rota-shift-edit > summary, body.app-reference .rota-duplicate-form > summary,
body.app-reference .rota-chip-actions details > summary { color: #5b687a; }
body.app-reference .portal-nav .nav-link.active { background: #223f82; color: #ffffff; }
body.app-reference .portal-nav .nav-link.active :is(span,.nav-glyph) { color: inherit; }
body.app-reference .button-danger { background: #fff0ed; color: #922b23; border-color: #d69b91; }
body.app-reference :is(.flash-error,.field-error,.error-message) { background: #fff0ed; color: #922b23; }


/* Fixed light-reference acceptance: blue frame, neutral workspace, white cards.
   Explicit final selectors retire legacy dark component paints without replacing workflows. */
body.app-reference { color-scheme: light; }
body.app-reference .staff-shift-time {color:#17263e;background:#eef3fb;}
body.app-reference .staff-shift-mine {color:#17603e;background:#eaf5ee;}
body.app-reference #my-shifts {background:#223f82;border-color:#223f82;color:#fff;}
body.app-reference #my-shifts :is(h3,strong,span,p,.shift-type-tag) {color:#fff;}
body.app-reference #my-shifts .shift-type-tag {background:transparent;border-color:#e1e8f7;}
body.app-reference .rota-primary-actions {box-shadow:none;}
body.app-reference .rota-week-person :is(strong,small) {text-transform:none;letter-spacing:0;}
body.app-reference .rota-week-shift-editor > summary {font-size:12px;}
body.app-reference .rota-primary-create > summary {border-radius:6px;}
body.app-reference .quick-action-grid a {border-radius:6px;}
body.app-reference .dashboard-section h3 {font-size:21px;}
body.app-reference .dashboard-action-bar {padding-block:16px;}
body.app-reference .dashboard-action-bar .section-heading {margin-bottom:8px;}
body.app-reference .compact-summary-card {min-height:0;}
body.app-reference .sidebar,body.app-reference .auth-topbar {background:#223f82;color:#fff;border-color:#223f82;}
body.app-reference .sidebar :is(h1,.eyebrow,.nav-glyph),body.app-reference .auth-topbar :is(h1,.eyebrow) {color:#e1e8f7;}
body.app-reference .nav-link {color:#e1e8f7;}
body.app-reference .nav-link:hover {background:#304d8d;color:#fff;}
body.app-reference .portal-nav .nav-link.active {background:#fff;color:#223f82;box-shadow:inset 3px 0 #223f82;}
body.app-reference .portal-nav .nav-link.active :is(span,.nav-glyph) {color:inherit;}
body.app-reference .shell-topline,body.app-reference .topbar-account-actions {background:#fff;}
body.app-reference :is(.avatar,.rota-week-person-avatar) {background:#eef3fb;color:#223f82;}
body.app-reference :is(button,.button-link,.link-button,.stacked-form button) {background:#fff;color:#17263e;border-color:#dce1e7;}
body.app-reference :is(button,.button-link,.link-button):hover {background:#eef3fb;color:#17263e;}
body.app-reference form button[type=submit]:not(.button-secondary):not(.button-danger),
body.app-reference .stacked-form button:not(.button-secondary):not(.button-danger),
body.app-reference .button-primary,body.app-reference .rota-primary-create > summary,
body.app-reference .rota-primary-actions form button[type=submit]:not(.button-secondary) {background:#223f82;color:white;border-color:#223f82;}
body.app-reference form button[type=submit]:not(.button-secondary):not(.button-danger):hover {background:#183269;color:#fff;}
body.app-reference button.logout-button.topbar-logout-button {background:#fff!important;color:#17263e!important;}
body.app-reference :is(.rota-staff-week-table,.rota-week-person,.rota-week-staff-cell),body.app-reference tbody tr:nth-child(even) td {background:#fff;}
body.app-reference .rota-staff-week-table :is(thead th,.rota-week-person-heading) {background:#f5f7fa;color:#5b687a;}
body.app-reference th strong {color:#17263e!important;}
body.app-reference .rota-week-shift-card.status-published .rota-week-shift-editor > summary {background:#eef3fb;color:#17263e;border-color:#d6e2fa;}
body.app-reference .rota-week-shift-card.has-pending-change .rota-week-shift-editor > summary,
body.app-reference .rota-week-shift-card.status-draft .rota-week-shift-editor > summary {background:#fff9df;color:#715300;border-color:#e7d786;}
body.app-reference .rota-week-shift-editor > summary strong {color:#17263e;}
body.app-reference .rota-edit-form button,body.app-reference .rota-edit-form button.button-secondary {color:#fff!important;}
body.app-reference .staff-next-shift-card {background:#223f82;border-color:#223f82;color:#fff;}
body.app-reference .staff-next-shift-card :is(strong,small,span) {color:#fff;}
body.app-reference .staff-next-shift-card:hover {background:#183269;}
body.app-reference :is(.hero-card,.dashboard-control-panel) {background:#fff;}
body.app-reference .needs-attention {background:#fff9df;color:#715300!important;}
body.app-reference :is(.status-published,.status-approved,.badge-success) {color:#17603e;}
body.app-reference :is(.status-rejected,.status-cancelled,.badge-danger) {color:#922b23;}
body.app-reference :is(button:disabled,[aria-disabled=true]) {opacity:1;background:#eef0f3;color:#626b78;border-color:#dce1e7;cursor:not-allowed;}
@media(min-width:861px) {
 body.app-reference .app-shell {grid-template-columns:190px minmax(0,1fr);}
 body.app-reference .sidebar {width:190px;padding:30px 16px;}
 body.app-reference .brand-logo {width:158px;}
 body.app-reference .content-shell {width:100%;max-width:none;padding:20px 32px;}
}
@media(max-width:860px) {
 body.app-reference .portal-nav .nav-link.active {background:white;color:#223f82;box-shadow:inset 0 -3px #223f82;}
 body.app-reference .staff-rota-day:not([data-has-my-shift]) {min-height:0;}
 body.app-reference .staff-rota-day:not([data-has-my-shift]) > summary {padding-block:10px;}
}

/* Mobile day cards own one shared gutter; leave room for the 3px selected marker. */
@media (max-width: 860px) {
  body.app-reference .rota-mobile-day-list > .rota-day-details { padding-inline: 0; }
  body.app-reference .rota-mobile-day-list > .rota-day-details > .rota-day-summary { padding-inline: .75rem; }
  body.app-reference .rota-mobile-day-list > .rota-day-details > .empty-state { margin-inline: .75rem; }
}

/* Fixed-reference hierarchy: the team is primary, tools remain reachable. */
body.app-reference .dashboard-control-panel { display:block; background:transparent; }
body.app-reference .dashboard-priority-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin-top:24px; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
body.app-reference .dashboard-priority-strip .priority-tile { background:white; border:0; border-right:1px solid var(--border); border-radius:0; padding:22px; }
/* Give KPI text breathing room within the existing card footprint. */
body.app-reference .dashboard-priority-strip .priority-tile { align-content:start; row-gap:4px; padding-block:18px; }
body.app-reference .dashboard-priority-strip .priority-tile > strong { white-space:nowrap; }
body.app-reference .dashboard-priority-strip .priority-tile .kpi-unit { font-size:.6em; font-weight:inherit; color:inherit; letter-spacing:0; margin-left:4px; }
body.app-reference .dashboard-reference-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:22px; align-items:start; }
body.app-reference .dashboard-team { padding:22px; margin:0; }
body.app-reference .dashboard-team-list { list-style:none; padding:0; margin:18px -22px; }
body.app-reference .dashboard-team-list li { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; border-top:1px solid var(--border); min-height:74px; }
body.app-reference .dashboard-team-list small { display:block; margin-top:6px; color:var(--muted); }
body.app-reference .dashboard-attention-column { display:flex; flex-direction:column; gap:18px; min-width:0; }
body.app-reference .dashboard-attention-column > * { margin:0; padding:20px; }
body.app-reference .dashboard-attention-column .manager-action-centre { order:-2; }
body.app-reference .dashboard-attention-column .today-actions-section { order:-1; }
body.app-reference .dashboard-attention-column .manager-action-centre-grid { display:grid; grid-template-columns:1fr; gap:0; }
body.app-reference .dashboard-attention-column .summary-card { border:0; border-top:1px solid var(--border); border-radius:0; padding:14px 0; min-height:0; }
body.app-reference .dashboard-attention-column .summary-count { font-size:22px; }
body.app-reference .staff-personal-days { display:grid; gap:14px; }
body.app-reference .staff-personal-day { border:1px solid var(--border); border-radius:6px; background:white; overflow:hidden; }
body.app-reference .staff-personal-day header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; background:#f5f7fa; border-bottom:1px solid var(--border); }
body.app-reference .staff-personal-day > div { padding:18px 16px; }
body.app-reference .staff-personal-day > div > strong { display:block; font-size:20px; }
body.app-reference .staff-personal-day small { color:var(--muted); }
body.app-reference .staff-personal-day > p { margin:0; padding:16px; color:var(--muted); }
@media(max-width:860px) {
 body.app-reference .dashboard-reference-grid { grid-template-columns:1fr; }
 body.app-reference .dashboard-priority-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }

 body.app-reference.page-rota-reference:not(.page-manager-rota) .rota-hero { order:-5; }
 body.app-reference.page-rota-reference:not(.page-manager-rota) #my-shifts { order:-4; }
 body.app-reference.page-rota-reference:not(.page-manager-rota) .staff-personal-days { order:-3; }
 body.app-reference.page-rota-reference:not(.page-manager-rota) .staff-personal-summary { order:-2; }
 body.app-reference.page-rota-reference:not(.page-manager-rota) .rota-hero .rota-week-nav { display:none; }
}

body.app-reference .document-admin-card, body.app-reference .document-management, body.app-reference .document-management-body, body.app-reference .document-meta-panel { background:#fff; }
body.app-reference .import-ready td:last-child { color:#17603e; }
body.app-reference .import-error td:last-child { color:#9b2929; }
/* Light notices and nested acknowledgement controls must fit their own cards. */
body.app-reference .flash-success, body.app-reference .flash.success { color:#17603e; background:#e4f3e9; border-color:#8fbda1; }
body.app-reference .document-sign-form { min-width:0; max-width:100%; }
body.app-reference .document-sign-form > button[data-signature-submit] { min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; min-height:44px; }

body.app-reference .dashboard-attention-column .manager-action-centre-grid .summary-card { display:block; padding:12px 0; min-height:0; background:transparent; border-top:1px solid var(--border); }
body.app-reference .dashboard-attention-column .summary-card > * { margin:2px 0; }
body.app-reference .dashboard-attention-column .summary-card .summary-count { display:inline-block; margin-left:8px; font-size:18px; }
body.app-reference .dashboard-attention-column .summary-card .summary-priority-label { display:none; }
body.app-reference .dashboard-attention-column .summary-card p { font-size:12px; }
body.app-reference #my-shifts { border-radius:6px; padding:22px clamp(1rem, 3vw, 1.35rem); margin-bottom:20px; }
body.app-reference #my-shifts h3 { font-size:11px; text-transform:uppercase; letter-spacing:.12em; font-weight:500; margin-bottom:18px; }
body.app-reference #my-shifts .next-shift-date { display:block; font-size:24px; line-height:1.25; margin-bottom:12px; }
body.app-reference #my-shifts .next-shift-time { display:block; margin-bottom:14px; }
body.app-reference #my-shifts details { margin-top:12px; }

/* Compact secondary context through natural flow, not clipping. */
body.app-reference .dashboard-attention-column { gap:12px; }
body.app-reference .dashboard-attention-column > * { padding:12px 20px; }
body.app-reference .dashboard-attention-column .section-heading { margin:0 0 10px; gap:4px; }
body.app-reference .dashboard-attention-column .section-heading :is(h3,p) { margin:0; }
body.app-reference .dashboard-attention-column .summary-card .summary-label { display:inline; }
body.app-reference .dashboard-attention-column .summary-card p { margin:4px 0 0; }
body.app-reference .dashboard-attention-column .quick-action-grid { display:flex; flex-wrap:wrap; gap:8px; }
body.app-reference .dashboard-attention-column .quick-action-grid a { min-height:0; padding:10px; }
body.app-reference .dashboard-attention-column .dashboard-admin-actions { margin-top:10px; }
body.app-reference .dashboard-attention-column .today-actions-grid { margin:0; grid-template-columns:minmax(0,1fr); }
body.app-reference .dashboard-attention-column .today-action-panel { padding:0; border:0; }
body.app-reference .dashboard-attention-column .compact-details > summary { margin:0; padding:0; }
body.app-reference .dashboard-attention-column .summary-card::before { content:none; }
body.app-reference .dashboard-secondary-details { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:16px; align-items:start; }
body.app-reference .dashboard-secondary-details > details { margin:0; padding:12px 20px; }
body.app-reference .dashboard-secondary-details + .dashboard-action-bar { position:static; margin-top:16px; }
@media(min-width:861px) {
 body.app-reference.page-manager-rota .rota-hero { padding-block:12px; }
 body.app-reference.page-manager-rota .rota-manager-command-centre { display:grid; grid-template-columns:1fr 1fr; align-items:start; margin-bottom:8px; overflow:visible; }
 body.app-reference.page-manager-rota .rota-primary-actions { border:0; padding:6px; }
 body.app-reference.page-manager-rota .rota-tabs { padding:0; margin-bottom:8px; }
 body.app-reference.page-manager-rota .rota-week-editor-heading { padding:6px 12px; }
 body.app-reference.page-manager-rota .rota-week-editor-heading :is(h3,p) { margin:0; display:inline; font-size:13px; }
 body.app-reference.page-manager-rota .rota-week-editor-heading p { margin-left:8px; }
 body.app-reference.page-manager-rota .rota-manager-command-centre { background:white; box-shadow:none; }
 body.app-reference.page-manager-rota .rota-template-slot-note { margin:0; padding:8px 12px; }
 body.app-reference.page-manager-rota .rota-week-editor { margin:0; }
}

/* Approved stronger rota day headers. */
body.app-reference.page-manager-rota .rota-staff-week-table thead th:not(:first-child),
body.app-reference.page-manager-rota .rota-day-details > .rota-day-summary,
body.app-reference.page-rota-reference .staff-personal-day > header {
  background: #cfe2f8;
  color: #244765;
}
body.app-reference.page-manager-rota .rota-staff-week-table thead th.is-weekend,
body.app-reference.page-manager-rota .rota-day-details.is-weekend > .rota-day-summary,
body.app-reference.page-rota-reference .staff-personal-day.is-weekend > header {
  background: #d6dcec;
}
body.app-reference.page-manager-rota .rota-staff-week-table thead th.is-today,
body.app-reference.page-manager-rota .rota-day-details[data-current-day] > .rota-day-summary,
body.app-reference.page-rota-reference .staff-personal-day[data-current-day] > header {
  background: #91b9e7;
  color: #173f70;
  box-shadow: inset 0 -3px #2a609b;
}
body.app-reference.page-manager-rota .rota-staff-week-table thead th:not(:first-child) > :is(span, strong),
body.app-reference.page-manager-rota .rota-day-summary :is(.eyebrow, strong, .rota-day-summary-meta),
body.app-reference.page-rota-reference .staff-personal-day > header > :is(strong, small) {
  color: inherit;
}

/* Compact publication review: complete details remain progressively available. */
body.app-reference .review-change-row {
  margin: 12px 0; padding: 12px 14px; border: 1px solid #d9dfeb;
  border-radius: 8px; background: #fffdf3; overflow-wrap: anywhere;
}
body.app-reference .review-change-overview {
  display: grid; grid-template-columns: minmax(120px, 1fr) minmax(110px, 1fr) minmax(120px, 1fr) minmax(140px, 1.5fr);
  gap: 6px 16px; align-items: baseline;
}
body.app-reference .review-change-row details { margin: 8px 0 0; }
body.app-reference .review-change-row [data-review-label] { margin: 4px 0; }
body.app-reference #clear-drafts { margin-top: 24px; padding-top: 12px; border-top: 1px solid #d9dfeb; }
body.app-reference #clear-drafts input[type="checkbox"] { color-scheme: light; background: #fff; color: #17263e; accent-color: #223f82; }
@media (max-width: 700px) {
  body.app-reference .review-change-overview { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  body.app-reference .review-change-row { padding: 10px; }
  body.app-reference .review-change-row summary { min-height: 44px; display: flex; align-items: center; }
}
@media (max-width: 360px) {
  body.app-reference .review-change-overview { grid-template-columns: 1fr; }
}

/* Published rota: same weekly geometry and palette, no editor affordances. */
body.app-reference .published-rota-header { padding-block: 14px; }
body.app-reference .published-rota-heading,
body.app-reference .published-rota-navigation,
body.app-reference .published-rota-toolbar,
body.app-reference .published-rota-links { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; }
body.app-reference .published-rota-heading { justify-content:space-between; }
body.app-reference .published-rota-heading h2 { margin:0; }
body.app-reference .published-rota-heading p { margin:4px 0; }
body.app-reference .published-rota-header > .hint { margin:6px 0 10px; }
body.app-reference .published-rota-toolbar { margin:10px 0; align-items:flex-start; }
body.app-reference .published-rota-toolbar #rota-review-status { flex:1; min-width:160px; margin:0; padding:10px 14px; }
body.app-reference .published-rota-links { gap:8px; }
body.app-reference .published-rota-links > .link-button { width:auto; display:inline-flex; text-decoration:none; align-items:center; min-height:40px; }
body.app-reference [data-published-rota] .rota-week-staff-cell { height:72px; }
body.app-reference .published-rota-navigation .rota-nav-button-group { display:flex; flex-wrap:nowrap; gap:4px; }
body.app-reference .published-rota-navigation .rota-nav-button-group .link-button { width:auto; padding-inline:8px; font-size:13px; }
body.app-reference .published-week-picker > summary { min-height:44px; display:flex; align-items:center; cursor:pointer; }
body.app-reference .published-week-picker form { padding:10px; }
body.app-reference [data-published-rota] .published-shift { display:grid; gap:3px; padding:8px; background:#fff; color:#17263e; border:1px solid #d6e2fa; border-left:3px solid #2a609b; border-radius:6px; }
body.app-reference [data-published-rota] .published-shift > strong { font-size:12px; overflow-wrap:anywhere; }
body.app-reference [data-published-rota] .published-shift-notes { margin:0; font-size:12px; color:#5b687a; }
body.app-reference [data-published-rota] .published-shift-notes summary { cursor:pointer; }
body.app-reference [data-published-rota] .published-shift-notes p { margin:6px 0; overflow-wrap:anywhere; white-space:pre-wrap; }
body.app-reference [data-published-rota] .published-day-shifts { list-style:none; margin:0; padding:0 12px; }
body.app-reference [data-published-rota] .published-day-shifts > li { padding:10px 0; border-bottom:1px solid #dce1e7; }
body.app-reference [data-published-rota] .published-day-shifts > li:last-child { border-bottom:0; }
body.app-reference [data-published-rota] .published-day-shifts > li > div { display:flex; justify-content:space-between; gap:4px 12px; flex-wrap:wrap; font-size:13px; }
body.app-reference [data-published-rota] .published-absence { margin:8px 12px; font-size:13px; }
@media(max-width:1100px) {
 body.app-reference .published-rota-header { padding:12px; }
 body.app-reference .published-rota-toolbar #rota-review-status { flex-basis:100%; }
 body.app-reference [data-published-rota] .published-shift-notes summary { min-height:44px; display:flex; align-items:center; }
 body.app-reference .published-rota-heading .link-button { min-height:44px; }
}



/* Hour calculator: readable labelled shift rows on phones only. */
@media (max-width: 600px) {
  .hours-results-table table, .hours-results-table tbody { display: block; width: 100%; min-width: 0; }
  .hours-results-table table { table-layout: fixed; }
  .hours-export-actions { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .hours-export-actions .button-link, .hours-export-actions .link-button { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .hours-results-table thead, .hours-results-table tr { min-width: 0; }
  .hours-results-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hours-results-table tbody tr { display: block; margin-block: 12px; border: 1px solid var(--app-reference-line); border-radius: 8px; padding: 8px; }
  .hours-results-table tbody td { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 8px; width: 100%; padding: 6px 0; border: 0; text-align: left; word-break: normal; overflow-wrap: normal; }
  .hours-results-table td::before { content: attr(data-label); font-weight: 700; }
  .hours-results-table td[data-label="Label"] > span { min-width: 0; overflow-wrap: anywhere; }
}