/* App shell (2026-10-13): compact page headers, fixed headers with scrolling order contents,
   the combined notification center, dark-mode tokens, and production card detail text.
   Loaded last, so these rules settle the older layered styles they name. */

/* ---- Shared tokens ----
   Several components were written against --text, --border, --primary, --surface-raised and
   --row-hover, which were never defined: borders vanished and dark mode fell back to white
   surfaces with light text. Define them once from the existing palette. */
:root {
  --text: var(--ink);
  --border: var(--line);
  --primary: var(--brand);
  --surface-soft: #f5f8fc;
  --surface-raised: var(--panel);
  --panel-raised: #f7f9fc;
  --row-hover: #edf3fb;
  color-scheme: light;
}
body.dark-mode {
  --text: var(--ink);
  --border: var(--line);
  --primary: var(--brand);
  --surface-raised: var(--panel);
  --panel-raised: #273648;
  --row-hover: #2f4157;
  /* Native controls, scrollbars and date pickers follow the theme. */
  color-scheme: dark;
  scrollbar-color: #5d7189 var(--bg);
}
body.dark-mode dialog,
body.dark-mode .table-shell,
body.dark-mode .work-week,
body.dark-mode .notification-list { scrollbar-color: #5d7189 transparent; }

/* ---- Compact page header (every page, desktop) ----
   One slim row: title, an optional one-line description, then the page tools; the tools take a
   second, right-aligned row when they do not fit beside the title (responsive-shell.css).
   The bottom padding keeps the Team Chat / notes tabs off the end of a scrolling page
   (--dock-reserve); fixed-header pages keep that room inside their scroller instead. */
@media (min-width: 744px) {
  body .workspace { gap: var(--shell-gap, 8px); padding: var(--shell-pad-y, 10px) var(--shell-gutter, 14px) calc(var(--shell-pad-y, 10px) + var(--dock-reserve, 0px)); }
  body .topbar,
  body.overview-density .topbar { flex-wrap: wrap; min-height: 52px; padding: 7px 12px; gap: 6px 12px; }
  body .topbar > div:first-child { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 1 1 auto; }
  body .topbar h1,
  body.overview-density .topbar h1 { margin: 0; font-size: var(--fs-lg, 20px); line-height: 1.2; white-space: nowrap; }
  body .topbar #pageSubtitle,
  body.overview-density .topbar #pageSubtitle { flex: 1 1 0; contain: inline-size; min-width: 0; max-width: 60ch; margin: 0; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
  body .topbar #pageSubtitle:empty { display: none; }
  body .topbar .toolbar { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; min-width: 0; margin-left: auto; }
}
@media (min-width: 744px) and (max-width: 1180px) {
  body .topbar #pageSubtitle { display: none; }
}

/* ---- Fixed header pages: Overview, Assembly Tracker, CPU Check-In (desktop) ----
   The page is one screen tall. Header, filters and totals stay put; only the order contents
   scroll. The workspace keeps overflow:auto so a short window can still reach everything. */
@media (min-width: 744px) {
  body.fixed-header-page .workspace { height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 8px; overflow: auto; }
  body.fixed-header-page .workspace > * { flex: 0 0 auto; }
  body.fixed-header-page #overviewContent { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
  body.fixed-header-page #overviewContent > * { flex: 0 0 auto; margin-top: 0; margin-bottom: 0; }
  /* position: relative makes each scroller the containing block of the absolutely positioned
     screen-reader text inside it (badge words, long chip labels). Without it such a 1px label
     escapes the scroller at its place far down the board and the whole page scrolls (2026-10-23). */
  body.fixed-header-page #overviewContent > #tableShell,
  body.fixed-header-page #overviewContent > #workWeek { flex: 1 1 auto; min-height: 240px; overflow: auto; overscroll-behavior: contain; position: relative; }
  /* Highland 2026-10-23 ("empty white bar at the bottom"): the board runs to the bottom of the
     window; the bottom docks' room (--dock-reserve) is scroll padding inside the scroller, so
     the last card or row can still be scrolled clear of them. */
  body.fixed-header-page .workspace { padding-bottom: var(--shell-pad-y, 10px); }
  body.fixed-header-page #overviewContent > #tableShell,
  body.fixed-header-page #overviewContent > #workWeek { padding-bottom: var(--dock-reserve, 0px); }
  /* Highland 2026-10-24: the slim docks sit on the window's bottom edge. While the board scrolls
     sideways (body.board-x-scroll, app.js installBoardScrollbarRoom) its horizontal scrollbar
     would be under them, so the scroller ends just above the docks instead and needs no room
     inside. Without sideways scrolling the board keeps running to the bottom. */
  body.fixed-header-page.board-x-scroll .workspace { padding-bottom: max(var(--shell-pad-y, 10px), var(--dock-reserve, 0px)); }
  body.fixed-header-page.board-x-scroll #overviewContent > :is(#tableShell, #workWeek) { padding-bottom: 0; }
  body.fixed-header-page #pageSubtitle { display: none; }
  /* Table headers stay visible inside the scroller. */
  body.fixed-header-page #ordersHead th { position: sticky; top: 0; z-index: 2; }
  /* Overview production cards: one scroller for the week; each day header sticks at its top. */
  body.fixed-header-page #workWeek { align-content: start; min-height: 240px; }
  body.fixed-header-page .work-week .week-day { overflow: clip; }
  body.fixed-header-page .work-week .week-day > .week-day-header,
  body.fixed-header-page .assembly-week-sections .assembly-day-section > header { position: sticky; top: 0; z-index: 4; }
  body.fixed-header-page .assembly-week-sections .assembly-day-section { overflow: clip; }
  /* Totals become one quiet line, as on CPU Check-In. */
  body.fixed-header-page #overviewContent > .stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; min-height: 0; padding: 6px 14px; }
  body.fixed-header-page #stats .stat { display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 0; background: transparent; }
  body.fixed-header-page #stats .stat strong { display: inline; font-size: 16px; line-height: 1.3; }
  body.fixed-header-page #stats .stat span { overflow: visible; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; white-space: nowrap; }
  /* Overview: the CPU / Delivery / Freight group wraps as one block, its partition a left rule. */
  body.fixed-header-page #overviewContent > .stats > .stats-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; min-width: 0; }
  body.fixed-header-page #overviewContent > .stats > .stats-partition { display: none; }
  body.fixed-header-page #overviewContent > .stats > .stats-group-shipping { padding-left: 24px; border-left: 1px solid var(--line); }
}

/* ---- Page tools in the header: one control height ---- */
@media (min-width: 744px) {
  body .topbar .workspace-actions > summary { min-height: 36px; padding: 7px 12px; }
  body .topbar .notification-center-button { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
}

/* ---- Notification center: one bell, one dialog (All / @ Mentions, Unread only) ---- */
#notificationDialog.notification-center-dialog { width: min(640px, calc(100vw - 24px)); max-width: 640px; padding: 0; background: var(--panel); color: var(--ink); }
#notificationDialog .notification-modal { display: flex; flex-direction: column; width: 100%; min-width: 0; max-height: min(86vh, 760px); padding: 0; }
#notificationDialog .notification-modal-header { min-height: 0; padding: 12px 12px 10px 20px; border-bottom: 1px solid var(--line); }
#notificationDialog .notification-modal-header h2 { font-size: 18px; line-height: 1.25; }
#notificationDialog .notification-count-label { color: var(--muted); font-size: 13px; font-weight: 700; }
#notificationDialog .notification-close { display: inline-grid; place-items: center; width: 40px; min-width: 40px; height: 40px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); font-size: 24px; line-height: 1; }
#notificationDialog .notification-close:hover { background: var(--row-hover); }
#notificationDialog .notification-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 20px; }
.notify-tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.notify-tabs button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; }
.notify-tabs button:hover { background: var(--row-hover); }
.notify-tabs button[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(16, 32, 52, .18), inset 0 -2px 0 var(--brand); }
.notify-tab-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #c81e1e; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }
.notify-tab-count.hidden { display: none; }
.notify-unread-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.notify-unread-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
#markAllNotificationsReadBtn { margin-left: auto; min-height: 34px; padding: 6px 12px; font-size: 13px; }
#notificationDialog .notification-list { display: grid; align-content: start; gap: 4px; flex: 1 1 auto; min-height: 120px; max-height: none; overflow: auto; padding: 0 12px 12px; overscroll-behavior: contain; }
#notificationDialog .notification-list:focus-visible { outline-offset: -3px; }
#notificationDialog .notification-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; width: 100%; min-width: 0; padding: 12px; border: 1px solid transparent; border-left: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
#notificationDialog .notification-item:hover { background: var(--row-hover); border-color: var(--line); }
#notificationDialog .notification-item.unread { background: #eef5ff; border-color: #cfe0f8; }
#notificationDialog .notification-item.unread:hover { background: #e3eeff; }
#notificationDialog .notify-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e8eef7; color: #2f4a70; font-size: 16px; font-weight: 900; }
#notificationDialog .mention-item .notify-icon { background: #efe7fa; color: #5b3f80; }
#notificationDialog .notification-copy { display: grid; gap: 3px; min-width: 0; }
#notificationDialog .notify-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
#notificationDialog .notify-title strong { min-width: 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 600; line-height: 1.35; }
#notificationDialog .notification-item.unread .notify-title strong { font-weight: 800; }
#notificationDialog .notify-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--panel); }
#notificationDialog .notification-copy small { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: capitalize; }
#notificationDialog .notification-copy p { margin: 2px 0 0; color: var(--ink); font-size: 13px; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
#notificationDialog .notification-item:not(.unread) .notification-copy p { color: var(--muted); }
#notificationDialog .notification-item time { color: var(--muted); font-size: 12px; line-height: 1.35; white-space: nowrap; }
#notificationDialog .notification-empty { display: grid; place-items: center; gap: 6px; min-height: 160px; padding: 24px; color: var(--muted); text-align: center; }
#notificationDialog .notification-empty strong { color: var(--ink); font-size: 15px; }
#notificationDialog .notification-status:empty { display: none; }
#notificationDialog .notification-status { margin: 0; padding: 0 20px 10px; color: var(--muted); font-size: 13px; font-weight: 600; }
#notificationDialog .mentions-more { margin: 0 auto 14px; }
#notificationDialog .mentions-more.hidden { display: none; }
body.dark-mode #notificationDialog.notification-center-dialog { background: var(--panel); color: var(--ink); }
body.dark-mode #notificationDialog .notification-item.unread { background: #24384f; border-color: #3d5a7c; }
body.dark-mode #notificationDialog .notification-item.unread:hover { background: #2b4360; }
body.dark-mode #notificationDialog .notify-icon { background: #33465e; color: #dbe7f6; }
body.dark-mode #notificationDialog .mention-item .notify-icon { background: #463a5c; color: #eee3fb; }
body.dark-mode .notify-tabs { background: #1b2735; }
body.dark-mode .notify-tabs button { background: transparent; color: var(--ink); }
body.dark-mode .notify-tabs button[aria-selected="true"] { background: #33465e; color: #f3f7fc; box-shadow: inset 0 -2px 0 var(--brand); }
body.dark-mode .notify-tab-count { background: #f08a8a; color: #2a0b0b; }
@media (max-width: 743px) {
  #notificationDialog.notification-center-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); margin: auto; }
  #notificationDialog .notification-modal { max-height: calc(100dvh - 16px); }
  #notificationDialog .notification-modal-header { padding: 10px 8px 8px 14px; }
  #notificationDialog .notification-modal-header > div { display: flex; align-items: baseline; gap: 10px; }
  #notificationDialog .notification-toolbar { padding: 10px 14px; gap: 8px 12px; }
  #markAllNotificationsReadBtn { margin-left: 0; }
  #notificationDialog .notification-list { padding: 0 8px 10px; }
  #notificationDialog .notification-item { grid-template-columns: 32px minmax(0, 1fr); padding: 10px; }
  #notificationDialog .notification-item time { grid-column: 2; white-space: normal; }
}

/* ---- Dark mode: shared controls ----
   Selected toggles: workspace.css gives them dark text, but body.dark-mode .secondary also
   gave them a dark background (unreadable). They use the light brand blue instead. */
body.dark-mode .secondary.selected,
body.dark-mode .fixed-action.selected,
body.dark-mode .view-mode-buttons .selected,
body.dark-mode .card-detail-toggle button.active { background: var(--brand); border-color: var(--brand); color: #0b1a2b; }
body.dark-mode .icon-btn,
body.dark-mode .notification-center-button { background: #263443; border-color: #4a5b70; color: #e4ebf3; }
body.dark-mode .notification-center-button:hover,
body.dark-mode .notification-center-button:focus-visible { background: #31435a; border-color: #6f89a6; }
body.dark-mode .mention-autocomplete { background: var(--panel); color: var(--ink); }
body.dark-mode .order-file-link,
body.dark-mode .pickup-history-item,
body.dark-mode .submission-draft-tabs button { background: var(--panel); color: var(--ink); }
body.dark-mode .admin-section-nav button.active { background: #33465e; color: #f3f7fc; }
body.dark-mode .admin-summary-grid article,
body.dark-mode .integration-status-grid article { background: var(--surface-soft); }
body.dark-mode .profile-preview { background: #2d4260; color: #e3edfb; border-color: var(--line); }
body.dark-mode .workspace-actions-panel,
body.dark-mode .workspace-filter-options,
body.dark-mode .workspace-actions > summary,
body.dark-mode .workspace-filter-panel > summary { color: var(--ink); }

/* ---- Admin > Sync & Repair: a summary strip, then one card per job (2026-10-28 clean-up).
   Tiles, banners and messages reuse the Dispatch page's dt-* styles (workspace.css). ---- */
.sync-admin-card { display: grid; gap: 14px; }
.sync-overview { display: grid; gap: 8px; min-width: 0; }
.sync-overview > p { margin: 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.sync-summary-tiles:empty { display: none; }
.sync-block { display: grid; gap: 10px; min-width: 0; }
.sync-card { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.sync-card.hidden { display: none; }
.sync-status-line, .sync-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; min-width: 0; }
.sync-status-line p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.sync-block-head > div { flex: 1 1 320px; min-width: 0; }
.sync-block-head h3, .sync-block-head p { margin: 0; }
.sync-block-head h3 { font-size: 15px; }
.sync-block-head p { margin-top: 2px; font-size: 13px; max-width: 78ch; }
.sync-show-all { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font-size: 13px; font-weight: 650; color: var(--ink); cursor: pointer; }
.sync-show-all input { margin: 0; }
.sync-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sync-bulk-bar.hidden { display: none; }
.sync-actions-message { margin: 0; min-height: 0; font-size: 13px; }
.sync-actions-message:empty { display: none; }
.sync-actions-message:focus { outline: none; }
.sync-actions-message:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.sync-admin-card details > summary { padding: 6px 0; }
.sync-admin-card .reconciliation-finding { grid-template-columns: auto minmax(0, 1fr); }
.sync-admin-card .reconciliation-finding .cell-btn { min-height: 28px; }
.sync-action-filters.hidden { display: none; }
.sync-action-list, .reconciliation-findings { max-height: min(64dvh, 640px); }
.sync-action-list { gap: 12px; }
.sync-empty { margin: 4px 0; }
.sync-group { display: grid; gap: 6px; min-width: 0; }
.sync-group-head h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.sync-group-head p { margin: 2px 0 0; font-size: 13px; }
.sync-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--surface-soft, #eef2f7); color: var(--ink); font-size: 12px; font-weight: 700; }
#syncActionsList .sync-action-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
.sync-action-row.sync-state-closed { border-left-color: var(--good); }
.sync-action-row.status-verification-needed { border-left-color: var(--warn); }
.sync-action-row.sync-state-attention.status-running,
.sync-action-row.sync-state-attention.status-pending,
.sync-action-row.sync-state-attention.status-processing { border-left-color: var(--warn); }
.sync-select { margin: 3px 0 0; }
.sync-row-main { display: grid; gap: 2px; min-width: 0; }
.sync-row-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.sync-row-title > span { min-width: 0; overflow-wrap: anywhere; }
.sync-row-meta { color: var(--muted); }
.sync-row-meta .status { color: var(--ink); font-weight: 650; }
.sync-action-row small.sync-row-meta { white-space: normal; }
.sync-row-error, .sync-row-note { margin: 2px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.sync-row-error { color: var(--bad); }
.sync-row-repeat { margin: 2px 0 0; font-size: 13px; font-weight: 650; color: var(--ink); }
.sync-row-note { color: var(--muted); }
.sync-order-link { min-height: 24px; padding: 0; border: 0; background: none; color: var(--brand-dark); font: inherit; font-weight: 750; text-decoration: underline; cursor: pointer; }
.sync-order-link:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.sync-truncated { margin: 0; font-size: 13px; }
.sync-action-row > .row-edit-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 14px; }
.sync-action-row > .row-edit-actions .cell-btn { min-height: 28px; }
.sync-action-row > .row-edit-actions .cell-btn:disabled { color: #5f6b7a; cursor: not-allowed; }
.sync-dismiss-note { display: block; margin: 10px 0 4px; font-weight: 650; }
#syncDismissNote { width: 100%; }
/* Folder check: compact runs list; a stale paused/running scan is marked as needing a decision */
.reconciliation-run-row { display: flex; align-items: center; gap: 8px 12px; min-width: 0; border-left: 4px solid transparent; border-radius: 6px; }
.reconciliation-run-row > .queue-summary { flex: 1 1 auto; min-width: 0; }
.reconciliation-run-row > .cell-btn { flex: 0 0 auto; min-height: 28px; margin-right: 8px; }
.reconciliation-run-row.needs-decision { border-left-color: var(--warn); background: rgba(199, 119, 0, 0.08); }
.reconciliation-job-panel.needs-decision { border-left: 4px solid var(--warn); }
.reconciliation-job-panel.needs-decision #reconciliationStatus { color: var(--ink); font-weight: 650; }
[data-reconciliation-older] { justify-self: start; min-height: 28px; }
/* DispatchTrack past orders card */
.dtb-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.dtb-details { margin: 0; font-size: 13px; }
.dtb-counts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.dtb-recent h4 { margin: 0 0 6px; font-size: 14px; }
.dtb-table-wrap { max-width: 100%; overflow-x: auto; }
.dtb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dtb-table th, .dtb-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.dtb-table th { color: var(--muted); font-weight: 700; }
body.dark-mode .sync-action-row { background: var(--panel); border-color: var(--line); }
body.dark-mode .sync-action-row > .row-edit-actions .cell-btn { border: 0; background: transparent; color: var(--brand); }
body.dark-mode .sync-action-row > .row-edit-actions .cell-btn:disabled { color: #9aa8b8; cursor: not-allowed; }
body.dark-mode .sync-order-link { color: var(--brand); }
@media (max-width: 743px) {
  .sync-card { padding: 10px; }
  .sync-action-row { grid-template-columns: minmax(0, 1fr) auto; }
  #syncActionsList .sync-action-row { grid-template-columns: auto minmax(0, 1fr); }
  #syncActionsList .sync-action-row > .row-edit-actions { grid-column: 1 / -1; }
  .sync-block-head > button { margin-left: auto; }
  .sync-action-row > .row-edit-actions { justify-content: flex-start; }
  .dtb-table th:nth-child(5), .dtb-table td:nth-child(5) { display: none; }
  .reconciliation-run-row { flex-wrap: wrap; }
  .reconciliation-run-row > .cell-btn { margin: 0 0 6px 10px; }
}

/* ---- Admin: sections become a slim tab row above the content (was a side list) ---- */
@media (min-width: 744px) {
  .admin-workspace { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .admin-section-nav { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; overflow-x: auto; border-radius: 10px; box-shadow: 0 2px 6px rgba(16, 32, 52, .06); }
  .admin-section-nav button { flex: 0 0 auto; min-height: 34px; padding: 6px 14px; text-align: center; white-space: nowrap; }
  .admin-section-nav button.active { box-shadow: inset 0 -2px 0 var(--brand); }
}
.admin-pane > .admin-card { padding: 14px 16px; }
.admin-pane .section-title-row { flex-wrap: wrap; margin-bottom: 4px; }
.admin-pane .section-title-row h2 { margin: 0; font-size: 18px; line-height: 1.3; }
.admin-pane .section-title-row p { margin: 2px 0 0; font-size: 13px; }
.admin-summary-grid { margin: 10px 0 14px; }

/* ---- User Settings (Highland 2026-10-23: "revamp how the user settings look so it's not so
   confusing"). A section list on the left (top tabs on phones) and one section at a time:
   Appearance, Pages & tools, Notifications, Profile, Sign-in & access. Appearance saves each
   choice at once; the three form sections share the Save bar at the bottom. ---- */
.settings-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); align-items: start; gap: 16px; width: min(1180px, 100%); }
.settings-nav { position: sticky; top: 0; display: grid; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.settings-nav-profile { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 2px 4px 10px; border-bottom: 1px solid var(--line); }
.settings-nav-profile .profile-preview { flex: 0 0 auto; width: 40px; height: 40px; font-size: 15px; }
.settings-nav-identity { display: grid; min-width: 0; line-height: 1.3; }
.settings-nav-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-nav-identity .muted { font-size: 13px; }
.settings-section-tabs { display: grid; gap: 4px; }
.settings-section-tabs [role="tab"] { display: grid; gap: 2px; width: 100%; min-height: 44px; padding: 8px 10px 8px 12px; border: 0; border-left: 3px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); text-align: left; }
.settings-section-tabs [role="tab"]:hover { background: var(--row-hover); }
.settings-section-tabs [role="tab"][aria-selected="true"] { border-left-color: var(--brand); background: color-mix(in srgb, var(--brand) 11%, var(--panel)); }
.settings-section-tabs [role="tab"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.settings-tab-title { font-size: 14px; font-weight: 750; line-height: 1.25; }
.settings-tab-hint { color: var(--muted); font-size: 12px; line-height: 1.3; }
.settings-body { min-width: 0; padding: 18px 20px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.settings-pane { display: block; padding-bottom: 18px; }
.settings-pane[hidden] { display: none; }
.settings-pane:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 4px; }
.settings-pane-header h2 { margin: 0; font-size: 19px; line-height: 1.3; }
.settings-pane-header p { margin: 4px 0 0; font-size: 13px; }
.settings-group { display: grid; gap: 10px; min-width: 0; margin: 16px 0 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.settings-group > legend { float: left; width: 100%; margin: 0 0 10px; padding: 0; font-size: 15px; font-weight: 750; }
.settings-group > legend + * { clear: both; }
.settings-group > h3 { margin: 0; font-size: 15px; }
.settings-group > p { margin: 0; }
.settings-group > button { justify-self: start; }
.settings-group.profile-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.settings-group.hidden { display: none; }
.settings-password .user-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 10px 12px; }
#settingsSection-security .active-sessions-card,
#settingsSection-security .my-access-card { margin-top: 16px; }

/* Theme: a two-part segmented control (native radios, so the arrow keys work). */
.settings-segmented { display: inline-flex; width: fit-content; padding: 3px; gap: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.settings-segmented label { position: relative; display: inline-flex; align-items: center; min-width: 96px; min-height: 36px; padding: 0 16px; justify-content: center; border-radius: 6px; font-weight: 700; cursor: pointer; }
.settings-segmented input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.settings-segmented label:has(input:checked) { background: var(--brand); color: #fff; }
.settings-segmented label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
body.dark-mode .settings-segmented label:has(input:checked) { color: #0b1a2b; }

/* Display density: three choices, each with a sample card and two table rows drawn with that
   density's own tokens (density.css .density-sample-*). */
.density-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.density-option { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 8px 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; }
.density-option:hover { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); }
.density-option > input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--brand); }
.density-option:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--panel)); }
.density-option:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.density-option-text { display: grid; gap: 2px; line-height: 1.35; }
.density-option-text > span { color: var(--muted); font-size: 13px; }
.density-sample { grid-column: 1 / -1; display: grid; align-content: start; gap: var(--density-card-gap); min-height: 150px; padding: 8px; border-radius: 6px; background: var(--bg); color: var(--ink); font-size: var(--density-fs); }
.density-sample-card { display: grid; gap: 1px; padding: var(--density-cell-py) 8px; border: 1px solid var(--line); border-left: 4px solid #8b5cf6; border-radius: 6px; background: var(--panel); line-height: 1.3; }
.density-sample-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.density-sample-top i { padding: 0 8px; border-radius: 999px; background: #d9f2e3; color: #14532d; font-size: var(--density-fs-sm); font-style: normal; font-weight: 700; }
.density-sample-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.density-sample-meta { color: var(--muted); font-size: var(--density-fs-sm); }
.density-sample-row { display: flex; align-items: center; gap: 10px; min-height: var(--density-row-h); padding: 0 var(--density-cell-px); border-bottom: 1px solid var(--line); background: var(--panel); }
.density-sample-row b { min-width: 3em; }

.settings-status { min-height: 20px; margin: 12px 0 0; font-weight: 700; }
.settings-status[data-tone="ok"] { color: #157347; }
.settings-status[data-tone="error"] { color: #b42318; }
body.dark-mode .settings-status[data-tone="ok"] { color: #7ee2a8; }
body.dark-mode .settings-status[data-tone="error"] { color: #ffb4ab; }

/* One Save bar for Pages & tools, Notifications and Profile; it stays in view while the section
   scrolls (above the collapsed Team Chat / notes strip, --dock-reserve) and says when there are
   unsaved changes. */
.settings-save-bar { position: sticky; bottom: var(--dock-reserve, 0px); z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 -20px; padding: 12px 20px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; background: var(--panel); }
.settings-save-bar .settings-save-status { flex: 1 1 220px; min-height: 20px; margin: 0; color: var(--muted); font-weight: 700; }
.settings-save-bar.is-dirty .settings-save-status { color: #8a4b00; }
body.dark-mode .settings-save-bar.is-dirty .settings-save-status { color: #fcd34d; }
.settings-shell:is([data-settings-active="appearance"], [data-settings-active="security"]) .settings-save-bar { display: none; }
.nav-order-row.is-fixed { min-height: 44px; }

@media (max-width: 1100px) {
  .density-options { grid-template-columns: minmax(0, 1fr); }
  .density-option { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr); }
  .density-sample { grid-column: auto; grid-row: 1 / span 2; }
  .settings-password .user-form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 743px) {
  .settings-shell { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .settings-nav { position: static; padding: 8px; gap: 8px; }
  .settings-nav-profile { padding: 0 2px 8px; }
  /* All five stay in view (two rows) rather than scrolling sideways out of sight. */
  .settings-section-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
  .settings-section-tabs [role="tab"] { flex: 0 0 auto; width: auto; padding: 8px 12px; border-left: 0; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0; white-space: nowrap; }
  .settings-section-tabs [role="tab"][aria-selected="true"] { border-bottom-color: var(--brand); }
  .settings-tab-hint { display: none; }
  .settings-body { padding: 14px 12px 0; }
  .settings-save-bar { margin: 0 -12px; padding: 10px 12px; }
  .settings-group.profile-settings-grid { grid-template-columns: minmax(0, 1fr); }
  .density-option { grid-template-columns: auto minmax(0, 1fr); }
  .density-sample { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
}

/* ---- Production cards: the card grid, its rows and their text sizes now live in
   responsive-overview.css (2026-10-20: name-first cards that adapt to the day column). ---- */