/* Arabic RTL foundations and unchanged calendar positioning primitives. */
@font-face { font-family: 'Noto Sans Arabic'; src: url('/fonts/NotoSansArabic-Regular.ttf') format('truetype'); font-style: normal; font-weight: 100 600; font-display: swap; }
@font-face { font-family: 'Noto Sans Arabic'; src: url('/fonts/NotoSansArabic-Bold.ttf') format('truetype'); font-style: normal; font-weight: 601 900; font-display: swap; }
:root {
  font-family: 'Noto Sans Arabic', 'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif;
  color: #262a26;
  background: #f7f6f2;
  --ink: #262a26;
  --muted: #646c62;
  --quiet: #687162;
  --brand: #286354;
  --brand-deep: #194d40;
  --brand-soft: #e9efe8;
  --surface: #ffffff;
  --canvas: #f7f6f2;
  --line: #dce0d6;
  --line-strong: #c7cfc1;
  --warm: #9e563b;
  --warm-soft: #f8ede4;
  --shadow: 0 14px 45px #252e2412;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
:root[data-accent='blue'] { --brand: #365a96; --brand-deep: #244575; --brand-soft: #eaf0f8; }
:root[data-accent='clay'] { --brand: #9b5a3f; --brand-deep: #7b432e; --brand-soft: #f5eae0; }
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; scrollbar-gutter: stable; }
body { margin: 0; min-height: 100vh; font-size: 14px; line-height: 1.75; }
button, input, select, textarea { font: inherit; }
button { color: inherit; border: 0; background: none; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, strong, button { letter-spacing: normal; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.icon-svg { width: 19px; height: 19px; display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.app-shell { min-height: 100vh; }

/* The former sidebar is now a quiet, single top navigation bar. */
.sidebar { width: 100%; min-height: 76px; padding: 12px clamp(24px,4vw,64px); display: flex; align-items: center; gap: 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; min-width: 170px; flex: 0 0 auto; }
.brand-mark { display: grid; place-items: center; width: 37px; height: 37px; flex: 0 0 37px; border: 1px solid var(--ink); border-radius: 9px 9px 3px 9px; background: var(--ink); color: white; font-size: 22px; font-weight: 700; line-height: 1; }
.brand strong, .mobile-brand strong { display: block; font-size: 15px; font-weight: 750; }
.brand small { display: block; margin-top: 0; font-size: 10px; color: var(--quiet); }
.nav-section-label, .sidebar-divider, .area-nav { display: none; }
.desktop-nav { display: flex; align-items: center; justify-content: center; flex: 1; gap: 3px; min-width: 0; }
.desktop-nav button { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 11px; font-size: 12px; color: var(--muted); white-space: nowrap; transition: color .16s, background .16s; border-radius: 5px; }
.desktop-nav button::after { content: ''; position: absolute; bottom: -16px; right: 12px; left: 12px; height: 2px; background: transparent; }
.desktop-nav button:hover { color: var(--ink); background: var(--canvas); }
.desktop-nav button.selected { color: var(--brand-deep); font-weight: 750; }
.desktop-nav button.selected::after { background: var(--brand); }
.nav-icon { display: none; }
.nav-count { font-size: 10px; font-weight: 700; line-height: 1.5; min-width: 16px; text-align: center; color: var(--quiet); }
.selected .nav-count { color: var(--brand); }
.connection { flex: 0 0 auto; max-width: 190px; min-width: 118px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 10px; line-height: 1.6; color: var(--muted); padding-inline-start: 17px; border-inline-start: 1px solid var(--line); }
.connection-indicator { width: 6px; height: 6px; border-radius: 50%; background: #a98347; display: inline-block; flex: 0 0 6px; }
.connection[data-status='ready'] .connection-indicator, .connection[data-status='saved'] .connection-indicator, .mobile-private[data-status='ready'] .connection-indicator, .mobile-private[data-status='saved'] .connection-indicator { background: #41835b; }
.connection[data-status='error'] .connection-indicator, .connection[data-status='conflict'] .connection-indicator, .mobile-private[data-status='error'] .connection-indicator, .mobile-private[data-status='conflict'] .connection-indicator { background: #ae5339; }
.connection small { display: block; width: 100%; font-size: 10px; line-height: 1.5; color: var(--quiet); overflow-wrap: anywhere; }
.connection button { min-height: 30px; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; padding: 0; font-size: 11px; }

/* Editorial masthead, date index and shared tools. */
.main-content { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,410px); grid-template-areas: 'header header' 'ribbon ribbon' 'areas toolbar' 'stage stage' 'footer footer'; column-gap: 24px; width: 100%; max-width: 1520px; margin-inline: auto; padding: 28px clamp(24px,4vw,64px) 26px; min-width: 0; }
.mobile-brand, .mobile-nav, .more-menu { display: none; }
.page-header { grid-area: header; display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 19px; min-width: 0; }
.page-header > div { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; }
.page-header > .header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 9px; flex: 0 0 auto; }
.header-actions > .secondary { min-height: 44px; white-space: nowrap; }
.page-header .eyebrow { display: none; }
.eyebrow { margin: 0; font-size: 11px; font-weight: 650; color: var(--quiet); line-height: 1.6; }
.page-header h1 { font-size: clamp(31px,3vw,43px); line-height: 1.45; font-weight: 750; margin: 0; }
.header-description { margin: 0; font-size: 13px; line-height: 1.75; color: var(--muted); max-width: 570px; }
.primary { min-height: 44px; padding: 9px 18px; background: var(--brand); border: 1px solid var(--brand); color: white; border-radius: 6px; font-size: 13px; font-weight: 650; white-space: nowrap; transition: background .16s, border-color .16s; }
.primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.add-button { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.add-button .add-icon { width: 16px; height: 16px; }
.secondary { min-height: 40px; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--brand-deep); background: var(--surface); font-size: 12px; font-weight: 600; }
.secondary:hover { background: var(--brand-soft); }
.date-ribbon { grid-area: ribbon; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); border-block: 1px solid var(--line); margin: 0 0 20px; min-width: 0; }
.date-ribbon button { position: relative; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; justify-content: center; gap: 0 10px; min-height: 71px; padding: 7px 12px; border-inline-start: 1px solid var(--line); color: var(--muted); }
.date-ribbon button:first-child { border-inline-start: 0; }
.date-ribbon button > span { font-size: 11px; line-height: 1.4; align-self: end; }
.date-ribbon button > strong { grid-column: 1; grid-row: 1 / 3; font-size: 27px; line-height: 1.4; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.date-ribbon button > small { font-size: 10px; line-height: 1.5; align-self: start; }
.date-ribbon button > em { position: absolute; top: -9px; inset-inline-end: 9px; padding: 0 6px; background: var(--canvas); font-style: normal; font-size: 9px; color: var(--brand-deep); }
.date-ribbon button:hover { background: #ffffff80; }
.date-ribbon button.selected, .date-ribbon button[aria-pressed='true'] { background: var(--brand-soft); color: var(--brand-deep); }
.date-ribbon button.selected::after, .date-ribbon button[aria-pressed='true']::after { content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--brand); }
.date-ribbon button.selected > strong, .date-ribbon button[aria-pressed='true'] > strong { color: var(--brand-deep); }
.workspace-toolbar { grid-area: toolbar; display: flex; gap: 9px; align-items: stretch; min-width: 0; margin-bottom: 27px; }
.search-wrap { min-width: 0; position: relative; flex: 1; }
.search-icon { width: 17px; height: 17px; position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--quiet); pointer-events: none; }
input, select, textarea { display: block; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--ink); min-height: 42px; padding: 8px 10px; max-width: 100%; min-width: 0; font-size: 13px; }
input::placeholder, textarea::placeholder { color: var(--quiet); opacity: 1; }
input[type='search'] { -webkit-appearance: none; appearance: none; }
.search-wrap input { width: 100%; height: 44px; padding-inline-start: 38px; background: transparent; font-size: 12px; }
.date-wrap { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0 6px; margin: 0; border: 1px solid var(--line-strong); border-radius: 5px; background: transparent; }
.date-wrap > span { display: none; }
.date-wrap input { width: 133px; min-height: 42px; padding: 3px 5px; border: 0; background: transparent; font-size: 12px; }
.mobile-areas { grid-area: areas; display: flex; gap: 3px; align-items: center; flex-wrap: wrap; min-width: 0; margin-bottom: 27px; }
.mobile-areas button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 7px 10px; white-space: nowrap; font-size: 12px; color: var(--muted); border-radius: 4px; }
.mobile-areas button::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #498568; flex: 0 0 5px; }
.mobile-areas button[data-area='all']::before { display: none; }
.mobile-areas button[data-area='marwan']::before { background: #5479aa; }
.mobile-areas button[data-area='crystal']::before { background: #8a69a2; }
.mobile-areas button[data-area='personal']::before { background: #b78245; }
.mobile-areas button:hover { color: var(--ink); background: #ffffff80; }
.mobile-areas button.selected { color: var(--brand-deep); font-weight: 750; background: #e9eae380; }

/* One work document, with a narrow time/focus margin rather than hero cards. */
.workstage { grid-area: stage; display: grid; grid-template-columns: minmax(0,1fr); min-width: 0; align-items: start; }
.workstage:has(> #overview:not([hidden])) { grid-template-columns: minmax(0,1fr) 267px; gap: 40px; }
.workstage > .collection { grid-column: 1; grid-row: 1; min-width: 0; }
.workstage > .overview { grid-column: 2; grid-row: 1; }
.overview { display: flex; flex-direction: column; gap: 26px; min-width: 0; padding-inline-start: 26px; border-inline-start: 1px solid var(--line); }
.appointments:empty { display: none; }
.appointments { order: 1; }
.capacity { order: 2; display: flex; flex-direction: column; gap: 15px; min-width: 0; }
.focus { order: 3; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px; padding-top: 22px; border-top: 1px solid var(--line); }
.appointment-heading { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px; }
.appointment-heading > span { font-size: 10px; color: var(--quiet); }
.appointment-list { display: flex; flex-direction: column; gap: 3px; }
.appointment-list button { display: flex; align-items: baseline; gap: 11px; width: 100%; min-height: 44px; text-align: start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.appointment-list b { font-size: 15px; font-weight: 650; color: var(--brand-deep); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.appointment-list button span { font-size: 12px; color: var(--ink); line-height: 1.7; overflow-wrap: anywhere; }
.appointment-list button:hover span { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.capacity-main h2 { margin: 5px 0 6px; font-size: 25px; font-weight: 650; line-height: 1.55; }
.capacity-main > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.9; }
.time-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 13px; border-top: 1px solid var(--line); }
.time-metrics > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.time-metrics span { color: var(--muted); font-size: 10px; line-height: 1.7; }
.time-metrics strong { color: var(--ink); font-size: 22px; font-weight: 650; line-height: 1.5; white-space: nowrap; }
.time-metrics small { color: var(--quiet); font-size: 10px; line-height: 1.8; overflow-wrap: anywhere; }
.bar { width: 100%; height: 3px; background: var(--line); overflow: hidden; }
.bar > div { height: 100%; background: var(--brand); transition: width .2s; }
.bar > div.over-capacity { background: var(--warm); }
.availability { padding-top: 0; min-width: 0; }
.availability summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; min-height: 36px; color: var(--brand-deep); font-size: 12px; font-weight: 650; }
.availability summary::-webkit-details-marker { display: none; }
.availability summary::after { content: '⌄'; line-height: 1; font-size: 17px; margin-inline-start: auto; }
.availability[open] summary::after { transform: rotate(180deg); }
.availability summary span { font-size: 10px; font-weight: 400; color: var(--quiet); }
.availability p { margin: 6px 0 13px; font-size: 11px; line-height: 1.9; color: var(--muted); }
.window-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 11px; }
.window-row { display: flex; gap: 7px; }
.window-row > label { flex: 1; min-width: 0; font-size: 11px; }
.window-row input { width: 100%; padding: 6px; font-size: 13px; }
.availability .secondary { margin-top: 13px; }
.focus-icon { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; color: var(--brand); }
.focus-ring { display: inline-block; width: 17px; height: 17px; border: 1.5px solid currentColor; border-radius: 50%; position: relative; }
.focus-ring::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: currentColor; }
.focus-copy { min-width: 0; flex: 1; }
.focus-copy .eyebrow { color: var(--brand-deep); }
.focus-copy strong { display: block; margin: 3px 0 5px; font-size: 14px; line-height: 1.8; font-weight: 650; overflow-wrap: anywhere; }
.focus-copy small { color: var(--quiet); font-size: 11px; line-height: 1.7; }
.focus > .secondary { margin-inline-start: 36px; min-height: 36px; font-size: 11px; }
#clearFocus { min-width: 36px; min-height: 36px; font-size: 21px; color: var(--muted); }

/* Continuous task ledger. Existing interaction hooks and status selects remain. */
.collection { min-width: 0; }
.collection-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; min-width: 0; margin: 0 0 18px; }
.collection-heading > div { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.collection-heading .eyebrow { display: none; }
.collection-heading h2 { margin: 0; font-size: 20px; font-weight: 650; line-height: 1.6; }
.list-count { color: var(--quiet); font-size: 11px; line-height: 1.8; text-align: end; }
.task-group { margin: 0 0 27px; }
.group-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 0; padding: 8px 0 10px; border-bottom: 1px solid var(--line-strong); }
.group-heading h3 { margin: 0; font-size: 12px; font-weight: 700; line-height: 1.8; color: var(--muted); }
.group-count { color: var(--quiet); font-size: 11px; line-height: 1.8; }
.cards, .archive-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; min-width: 0; }
.task-card { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: 'top actions' 'title actions' 'meta actions'; gap: 3px 20px; min-height: 112px; padding: 17px 0 15px; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: grab; position: relative; transition: background .15s; }
.task-card:hover { background: #ffffff80; }
.task-card:active { cursor: grabbing; }
.task-card[draggable='false'], .archive-card { cursor: default; }
.task-card-top { grid-area: top; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 13px; min-width: 0; }
.area-tag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 11px; font-weight: 500; color: var(--muted); line-height: 1.6; }
.area-dot { display: inline-block; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #498568; }
.area-dot.marwan { background: #5479aa; }
.area-dot.crystal { background: #8a69a2; }
.area-dot.personal { background: #b78245; }
.sync-state { font-size: 10px; color: var(--quiet); white-space: nowrap; }
.sync-state.saved, .sync-state:empty { display: none; }
.sync-state.pending { color: var(--warm); font-weight: 600; }
.task-card h3 { grid-area: title; min-width: 0; margin: 0; font-size: 16px; line-height: 1.8; font-weight: 650; }
.task-title { padding: 0; display: inline; text-align: start; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; overflow-wrap: anywhere; }
.task-title:hover { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 4px; }
.task-meta { grid-area: meta; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 13px; min-width: 0; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.task-meta > span { overflow-wrap: anywhere; }
.task-meta .overdue { color: var(--warm); font-weight: 650; }
.task-actions { grid-area: actions; display: flex; align-items: center; align-self: center; justify-content: flex-end; gap: 5px; flex-wrap: wrap; max-width: 215px; min-width: 0; }
.status-control { position: relative; }
.status-control select { max-width: 121px; min-height: 40px; font-size: 11px; color: var(--muted); padding: 5px 8px; background: transparent; border-color: var(--line); border-radius: 5px; }
.text-action { min-height: 40px; padding: 6px; color: var(--brand-deep); font-size: 11px; font-weight: 600; }
.text-action:hover { text-decoration: underline; text-underline-offset: 3px; }
.focus-action { display: inline-grid; place-items: center; width: 36px; height: 40px; color: var(--quiet); border-radius: 5px; }
.focus-action:hover, .focus-action.is-focused { background: var(--brand-soft); color: var(--brand); }
.focus-action .focus-ring { width: 15px; height: 15px; }
.focus-action .focus-ring::after { inset: 4px; }
.task-copy, .task-row-main { min-width: 0; }
.archive-card .task-actions { max-width: 230px; }
.archive-card .task-actions .text-action { text-align: end; }
.status-pill { font-size: 11px; color: var(--brand-deep); font-weight: 600; line-height: 1.7; }
.status-pill.abandoned { color: var(--warm); }
.empty-group { color: var(--quiet); font-size: 12px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.empty-board { min-height: 220px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-block: 1px solid var(--line); padding: 35px 18px; text-align: center; color: var(--muted); }
.empty-symbol { color: var(--line-strong); font-size: 38px; line-height: 1; }
.empty-board h3 { margin: 12px 0 5px; color: var(--ink); font-size: 18px; font-weight: 600; }
.empty-board p { margin: 0; max-width: 440px; font-size: 13px; line-height: 1.9; }
.compact-group { margin-bottom: 27px; padding: 0; }
.compact-group .group-heading h3 { font-size: 14px; color: var(--ink); }
.dropover { outline: 2px dashed var(--brand); outline-offset: 4px; background: var(--brand-soft); }
:root[data-density='compact'] .task-card { min-height: 91px; padding-block: 11px; gap-block: 0; }
:root[data-density='compact'] .task-card h3 { font-size: 15px; }
:root[data-density='compact'] .task-group { margin-bottom: 20px; }
:root[data-density='compact'] .timeline-task { padding-block: 9px; }

/* Filters retain their real date semantics without competing with the content. */
.list-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; margin: 0 0 22px; padding: 0 0 16px; border-bottom: 1px solid var(--line); min-width: 0; }
.filter-segment { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; }
.filter-segment button { min-height: 38px; padding: 6px 12px; font-size: 12px; color: var(--muted); border-radius: 4px; }
.filter-segment button[aria-pressed='true'] { background: var(--brand-soft); color: var(--brand-deep); font-weight: 650; }
.range-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--quiet); font-size: 12px; min-width: 0; }
.range-controls input { width: 145px; min-height: 38px; font-size: 12px; padding: 5px 7px; background: transparent; }
.range-controls button { min-height: 38px; padding: 5px 6px; font-size: 12px; color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; }
.filter-note { margin: 0; flex-basis: 100%; color: var(--muted); font-size: 11px; line-height: 1.8; }

/* Date-only horizontal timeline: a ruler with attached text slips, not hour blocks. */
.timeline-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 13px; min-width: 0; }
.timeline-mode { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 5px; }
.timeline-control-label { color: var(--muted); font-size: 12px; font-weight: 650; padding-inline: 7px; max-width: 100%; overflow-wrap: anywhere; }
.timeline-mode button { min-height: 38px; padding: 6px 13px; font-size: 12px; color: var(--muted); border-radius: 3px; }
.timeline-mode button[aria-pressed='true'] { background: var(--brand-soft); color: var(--brand-deep); font-weight: 650; }
.timeline-jump { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; }
.timeline-jump button { min-height: 40px; padding: 6px 11px; font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; }
.timeline-jump button:hover { color: var(--brand-deep); background: var(--brand-soft); }
.timeline-jump input { width: 144px; min-height: 40px; padding: 5px 8px; font-size: 12px; background: transparent; }
.timeline-caption { font-size: 12px; color: var(--muted); line-height: 1.8; margin-bottom: 14px; }
.due-timeline { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; border-block: 1px solid var(--line); background: #ffffff66; }
.timeline-track { position: relative; display: flex; align-items: stretch; min-width: max-content; padding: 10px 0 26px; }
.timeline-track::before { content: ''; position: absolute; top: 82px; left: 0; right: 0; height: 1px; background: var(--line-strong); }
.timeline-day { position: relative; flex: 0 0 240px; width: 240px; min-width: 0; padding: 0 15px; text-align: center; scroll-snap-align: center; }
.timeline-date { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 65px; gap: 1px; font-size: 16px; font-weight: 650; color: var(--muted); line-height: 1.7; }
.timeline-date b { font-size: 10px; font-weight: 650; color: var(--brand-deep); }
.timeline-day.today .timeline-date { color: var(--brand-deep); }
.timeline-day.past .timeline-date { color: #816855; }
.timeline-node { position: relative; z-index: 1; display: block; width: 11px; height: 11px; margin: 2px auto 0; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--canvas); }
.timeline-day.today .timeline-node { border-color: var(--brand); background: var(--brand); box-shadow: 0 0 0 5px var(--brand-soft); }
.timeline-day.past .timeline-node { border-color: #c2ac99; }
.timeline-branch { position: relative; min-height: 182px; padding-top: 26px; }
.timeline-stem { position: absolute; top: 0; inset-inline-start: calc(50% - .5px); height: 22px; border-inline-start: 1px solid var(--line-strong); }
.timeline-day.today .timeline-stem { border-color: var(--brand); }
.timeline-tasks { display: flex; flex-direction: column; gap: 10px; }
.timeline-task { display: block; width: 100%; min-width: 0; min-height: 68px; padding: 12px 13px; text-align: start; background: var(--surface); border: 1px solid var(--line); border-inline-start: 2px solid var(--brand); border-radius: 2px; transition: background .15s,border-color .15s; }
.timeline-task:hover { background: var(--brand-soft); border-color: var(--brand); }
.timeline-task strong { display: block; font-size: 13px; font-weight: 650; line-height: 1.85; overflow-wrap: anywhere; }
.timeline-task span { display: block; margin-top: 5px; font-size: 11px; color: var(--muted); line-height: 1.8; overflow-wrap: anywhere; }
.timeline-empty { display: block; padding: 11px 0; color: var(--quiet); font-size: 11px; }
.undated-section { padding-top: 25px; margin-top: 18px; border-top: 1px solid var(--line); }
.undated-section .group-heading { border-bottom: 0; padding-top: 0; }
.undated-section p { margin: 0 0 14px; font-size: 12px; color: var(--muted); line-height: 1.8; }
.undated-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }

/* Summary and settings are documents with sections, not more dashboard tiles. */
.dashboard-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding: 12px 0 26px; margin-bottom: 28px; border-block: 1px solid var(--line); }
.dashboard-metric { text-align: start; min-width: 0; padding: 12px 23px; border-inline-start: 1px solid var(--line); }
.dashboard-metric:first-child { border-inline-start: 0; padding-inline-start: 0; }
.dashboard-metric > span { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.dashboard-metric strong { display: block; margin: 7px 0 4px; font-size: 39px; font-weight: 550; line-height: 1.4; color: var(--ink); font-variant-numeric: tabular-nums; }
.dashboard-metric small { display: block; font-size: 11px; line-height: 1.8; color: var(--quiet); }
.dashboard-metric.late strong { color: var(--warm); }
button.dashboard-metric:hover { background: #ffffff80; }
button.dashboard-metric:hover strong { color: var(--brand-deep); }
.dashboard-panels { display: grid; grid-template-columns: 1.1fr 1fr; gap: 55px; }
.dashboard-panel { min-width: 0; }
.dashboard-panel h3, .settings-panel h3 { margin: 5px 0 19px; font-size: 22px; line-height: 1.6; font-weight: 650; }
.dashboard-time { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.dashboard-time > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 0; border-top: 1px solid var(--line); }
.dashboard-time span { font-size: 12px; color: var(--muted); }
.dashboard-time strong { font-size: 28px; color: var(--brand-deep); font-weight: 600; line-height: 1.5; }
.dashboard-time small { font-size: 11px; color: var(--quiet); line-height: 1.8; }
.dashboard-warning { margin: 15px 0 0; padding: 12px 15px; background: var(--warm-soft); border-inline-start: 2px solid var(--warm); font-size: 12px; line-height: 1.85; color: #814c30; }
.dashboard-upcoming { display: flex; flex-direction: column; margin-bottom: 12px; border-top: 1px solid var(--line); }
.dashboard-upcoming button { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; text-align: start; min-height: 52px; border-bottom: 1px solid var(--line); }
.dashboard-upcoming button:hover strong { color: var(--brand-deep); }
.dashboard-upcoming strong { min-width: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; line-height: 1.9; }
.dashboard-upcoming span { flex: 0 0 auto; font-size: 11px; color: var(--muted); }
.dashboard-muted { font-size: 13px; color: var(--quiet); }
.settings-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 60px; max-width: 1050px; }
.settings-panel { min-width: 0; border-top: 1px solid var(--line); padding-top: 22px; }
.settings-panel > label { margin: 17px 0; }
.settings-panel select { width: 100%; margin-top: 2px; background: transparent; min-height: 44px; }
.setting-toggle { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.setting-toggle input { width: 19px; height: 19px; min-height: 19px; flex: 0 0 19px; margin: 4px 0 0; accent-color: var(--brand); }
.setting-toggle strong { display: block; font-size: 13px; font-weight: 650; }
.setting-toggle small { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); line-height: 1.8; }
.settings-footnote { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--muted); line-height: 1.9; }
footer { grid-area: footer; padding: 38px 0 8px; font-size: 11px; color: var(--quiet); text-align: start; }

/* Native dialogs preserve completion dates, unknown durations, and editing. */
dialog { width: 680px; max-width: calc(100vw - 32px); max-height: min(90dvh,900px); padding: 0; border: 1px solid var(--line-strong); border-radius: 11px; color: var(--ink); background: var(--surface); box-shadow: 0 25px 90px #1d271f30; overflow: hidden; }
dialog::backdrop { background: #20292078; backdrop-filter: blur(3px); }
#taskForm { display: flex; flex-direction: column; max-height: min(90dvh,900px); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 25px 29px 18px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin: 3px 0 0; font-size: 25px; font-weight: 650; line-height: 1.5; }
.dialog-head > button { font-size: 27px; line-height: 1; min-width: 40px; min-height: 40px; color: var(--muted); border-radius: 5px; }
.dialog-head > button:hover { background: var(--canvas); }
.editor-body { overflow-y: auto; padding: 24px 29px; overscroll-behavior: contain; }
label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 500; min-width: 0; }
.editor-body > label:first-child input { font-size: 16px; font-weight: 600; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px 16px; margin: 19px 0; }
.form-grid input, .form-grid select { width: 100%; }
.form-note { margin: -3px 0 5px; color: var(--muted); font-size: 11px; line-height: 1.85; }
textarea { resize: vertical; min-height: 105px; line-height: 1.9; }
#eventLog { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 18px; max-height: 160px; overflow-y: auto; color: var(--quiet); font-size: 11px; }
#eventLog h3 { font-size: 13px; color: var(--muted); font-weight: 650; margin: 0 0 7px; }
#eventLog p { margin: 6px 0; line-height: 1.9; }
.dialog-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; padding: 17px 29px 22px; border-top: 1px solid var(--line); background: var(--surface); }
.execution-date-field { margin: 16px 0; padding: 14px; border-inline-start: 2px solid var(--brand); background: var(--brand-soft); }
.execution-date-field input { max-width: 230px; }
.execution-date-field small { font-size: 11px; line-height: 1.8; color: var(--muted); }
#completion { width: 495px; padding: 28px; }
#completion h2 { font-size: 25px; line-height: 1.5; margin: 0 0 9px; font-weight: 650; }
#completion p { font-size: 13px; color: var(--muted); line-height: 1.9; }
#completion label { margin-top: 17px; }
#completion input { font-size: 16px; }
#completion .dialog-actions { padding: 19px 0 0; border: 0; }
.completion-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 6px; }
#completion .completion-choices label { display: flex; flex-direction: row; align-items: center; gap: 7px; margin: 0; min-height: 44px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 5px; font-size: 12px; cursor: pointer; }
#completion .completion-choices input { width: 17px; height: 17px; min-height: 17px; margin: 0; accent-color: var(--brand); }
#completion #customExecutionField { margin: 13px 0; }
#toast { position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 30; max-width: min(440px,calc(100vw - 32px)); padding: 13px 18px; border-radius: 7px; background: #263b30; color: white; font-size: 12px; line-height: 1.8; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s,transform .2s; }
#toast.visible { opacity: 1; transform: translateY(0); }
.access-box { grid-column: 1 / -1; max-width: 530px; width: 100%; margin: clamp(20px,7vh,80px) auto; padding: 30px; border-block: 1px solid var(--line-strong); background: var(--surface); }
.access-box .brand-mark { margin-bottom: 24px; }
.access-box h1 { margin: 7px 0 11px; font-size: 31px; font-weight: 650; }
.access-box p:not(.eyebrow) { font-size: 13px; color: var(--muted); line-height: 1.9; }
.access-box label { margin: 24px 0 16px; }
.access-box input { width: 100%; }

/* Clickable chart bars keep their proportions; equally useful legend buttons
   provide a full-size target even for a very small numeric segment. */
.dashboard-charts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 27px 38px; margin: 0 0 31px; min-width: 0; }
.dashboard-chart { min-width: 0; padding: 19px 0 0; border-top: 1px solid var(--line); }
.dashboard-scope { margin: 0 0 20px; max-width: 950px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.dashboard-chart-head > small, .chart-note { display: block; margin: 0 0 12px; color: var(--muted); font-size: 11px; line-height: 1.85; }
.dashboard-chart h3, .dashboard-chart h4 { font-size: 16px; font-weight: 650; line-height: 1.75; margin: 0 0 5px; }
.dashboard-chart > p, .dashboard-chart > small { display: block; margin: 0 0 15px; font-size: 11px; line-height: 1.85; color: var(--muted); }
.chart-bar { display: flex; align-items: stretch; gap: 2px; width: 100%; min-height: 44px; margin: 13px 0 10px; background: var(--line); border-radius: 3px; isolation: isolate; }
.chart-segment { --segment-color: var(--brand); position: relative; display: flex; align-items: center; justify-content: center; flex: var(--share,1) 1 0; min-width: 0; min-height: 44px; padding: 3px 0; background: var(--segment-color); color: #fff; border-radius: 2px; font-size: 12px; font-weight: 650; line-height: 1.5; transition: filter .15s; overflow-wrap: anywhere; }
.chart-segment:nth-child(2) { --segment-color: #506b91; }
.chart-segment:nth-child(3) { --segment-color: #96603b; }
.chart-segment:nth-child(4) { --segment-color: #65705e; }
.chart-segment:nth-child(5) { --segment-color: #7c5e91; }
.chart-segment:nth-child(6) { --segment-color: #7a7660; }
.chart-segment.overdue, .chart-segment.late, .chart-segment[data-segment='overdue'], .chart-segment[data-dashboard-segment='overdue'] { --segment-color: var(--warm); }
.chart-segment:hover { filter: brightness(1.13); z-index: 2; }
.chart-segment[aria-pressed='true'] { box-shadow: inset 0 0 0 2px #ffffffd9; z-index: 1; }
.chart-segment:focus-visible { z-index: 3; outline: 3px solid var(--ink); outline-offset: 3px; }
.chart-segment > span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 3px; }
.chart-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 14px; min-width: 0; }
.chart-legend button { display: inline-flex; align-items: baseline; gap: 7px; min-height: 44px; padding: 7px 0; text-align: start; font-size: 11px; line-height: 1.85; color: var(--muted); border-bottom: 2px solid transparent; }
.chart-legend button:hover { color: var(--ink); }
.chart-legend button[aria-pressed='true'] { color: var(--brand-deep); border-bottom-color: var(--brand); font-weight: 650; }
.chart-legend i, .chart-legend .chart-swatch { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 1px; background: var(--segment-color,var(--brand)); }
.chart-legend button:nth-child(2) { --segment-color: #506b91; }
.chart-legend button:nth-child(3) { --segment-color: #96603b; }
.chart-legend button:nth-child(4) { --segment-color: #65705e; }
.chart-legend button:nth-child(5) { --segment-color: #7c5e91; }
.chart-legend button:nth-child(6) { --segment-color: #7a7660; }
.chart-legend button[data-dashboard-segment='overdue'] { --segment-color: var(--warm); }
.chart-legend strong { font-size: 12px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.chart-drilldown { min-width: 0; margin: 8px 0 30px; padding: 22px 0 0; border-top: 2px solid var(--brand); scroll-margin-top: 22px; }
.chart-drilldown > header { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; flex-wrap: wrap; margin-bottom: 12px; }
.chart-drilldown h3 { font-size: 20px; line-height: 1.7; font-weight: 650; margin: 0; }
.chart-drilldown > p, .chart-drilldown > small { display: block; color: var(--muted); font-size: 12px; line-height: 1.9; margin: 6px 0 15px; }
.chart-drilldown > button, .chart-drilldown > header > button { min-height: 40px; color: var(--brand-deep); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }

/* The daily clock is a positioning canvas. --start and --duration are minutes
   from the chosen beginning, --hours defaults to the 16:00–05:00 window. */
.day-timeline { min-width: 0; margin: 0 0 30px; }
.day-timeline-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 0 0 15px; }
.day-timeline-head h2, .day-timeline-head h3 { margin: 0; color: var(--ink); font-size: 20px; line-height: 1.65; font-weight: 650; }
.day-timeline-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.85; }
.day-timeline-head > span, .day-timeline-head > small { color: var(--muted); font-size: 11px; line-height: 1.8; }
.day-timeline-head button { min-height: 40px; padding: 7px 10px; color: var(--brand-deep); font-size: 12px; border: 1px solid var(--line); border-radius: 4px; }
.day-hours { --hour-height: 64px; --minute-height: 1.066666667px; --hours: 13; --timeline-origin: 12px; --clock-gutter: 69px; --end-gutter: 14px; --lane-gap: 6px; position: relative; height: calc(var(--hours) * var(--hour-height) + 24px); max-height: 520px; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: var(--timeline-origin) 0 12px; border-block: 1px solid var(--line-strong); background: #ffffff66; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; overscroll-behavior-y: contain; isolation: isolate; }
.day-hour { display: block; position: relative; height: var(--hour-height); min-height: var(--hour-height); width: 100%; padding: 0; border-top: 1px solid var(--line); text-align: start; border-radius: 0; background: transparent; }
.day-hour > span:first-child { position: relative; z-index: 1; display: inline-block; min-width: 56px; padding-inline: 0 10px; transform: translateY(-50%); direction: ltr; text-align: center; color: var(--muted); background: var(--canvas); font-size: 11px; line-height: 1.8; font-variant-numeric: tabular-nums; }
.day-hour > small { position: absolute; inset-inline-start: 1px; top: 12px; width: 54px; color: var(--quiet); font-size: 9px; line-height: 1.6; text-align: center; }
button.day-hour:hover { background: var(--brand-soft); }
button.day-hour:focus-visible { outline-offset: -3px; z-index: 3; }
.day-hour.outside, .day-hour.is-outside, .day-hour[data-work='false'], .day-hour[data-outside='true'] { background: #e9e8e280; }
.day-hour.outside > span:first-child, .day-hour.is-outside > span:first-child { color: var(--quiet); }
.day-block, .day-point { --lane-span: calc((100% - var(--clock-gutter) - var(--end-gutter) + var(--lane-gap)) / var(--lane-count,1)); position: absolute; inset-inline-start: calc(var(--clock-gutter) + var(--lane,0) * var(--lane-span)); inset-inline-end: auto; width: calc(var(--lane-span) - var(--lane-gap)); top: calc(var(--timeline-origin) + var(--start,0) * var(--minute-height)); min-width: 0; text-align: start; z-index: 2; font-size: 12px; line-height: 1.8; border-radius: 3px; }
.day-block { height: max(44px,calc(var(--duration,60) * var(--minute-height))); min-height: 44px; padding: 0 11px; border: 0; background: transparent; color: var(--ink); }
.day-block > .day-block-shape { position: absolute; z-index: -1; top: 0; inset-inline: 0; height: calc(var(--duration,60) * var(--minute-height)); max-height: none; min-height: 2px; padding: 0; border: 1px solid #becfbd; border-inline-start: 3px solid var(--brand); border-radius: 3px; background: var(--brand-soft); pointer-events: none; }
.day-block > strong, .day-block > span, .day-block > small { display: block; max-height: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-block > strong { position: relative; font-size: 12px; line-height: 1.8; font-weight: 650; padding-top: 4px; }
.day-block > span, .day-block > small { font-size: 10px; line-height: 1.8; color: var(--muted); }
.day-block::before { content: ''; position: absolute; inset-inline: 0; top: 50%; height: max(100%,44px); transform: translateY(-50%); }
.day-block:hover, .day-block:focus-visible { z-index: 6; }
.day-block:hover > .day-block-shape, .day-block:focus-visible > .day-block-shape { border-color: var(--brand); filter: brightness(.98); }
.day-block:focus-visible::after, .day-block:hover::after { content: attr(aria-label); position: absolute; inset-inline: -1px; top: calc(100% + 5px); min-height: 36px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); font-size: 11px; line-height: 1.8; white-space: normal; overflow-wrap: anywhere; pointer-events: none; }
.day-block.conflict > .day-block-shape, .day-block.is-conflict > .day-block-shape, .day-block[data-conflict='true'] > .day-block-shape { border-color: var(--warm); background: var(--warm-soft); }
.day-point { display: flex; align-items: center; overflow: hidden; gap: 8px; height: 44px; padding: 0 10px; transform: translateY(-22px); background: transparent; color: var(--ink); }
.day-point::before { content: ''; display: block; width: 8px; height: 8px; flex: 0 0 8px; border: 2px solid var(--brand); border-radius: 50%; background: var(--surface); }
.day-point > strong { display: block; min-width: 0; font-size: 12px; font-weight: 650; line-height: 1.8; background: var(--canvas); padding-inline: 4px; overflow-wrap: anywhere; }
.day-point > span, .day-point > small { font-size: 10px; line-height: 1.7; color: var(--muted); background: var(--canvas); }
.day-block > .day-block-label { position: relative; display: block; max-height: 100%; padding-top: 5px; color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.8; }
.day-point > .day-block-label { flex: 1; min-width: 0; max-width: none; color: var(--ink); font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-point > .day-block-shape { display: none; }
.day-warning { padding: 10px 12px; border-inline-start: 2px solid var(--warm); background: var(--warm-soft); color: #814c30; font-size: 11px; line-height: 1.9; margin: 0 0 13px; }
.day-chronology { display: flex; flex-direction: column; margin: 12px 0 16px; min-width: 0; }
.day-chronology > button { display: flex; align-items: baseline; gap: 8px 13px; min-height: 46px; padding: 11px 0; border-bottom: 1px solid var(--line); text-align: start; font-size: 12px; line-height: 1.8; }
.day-chronology > button > bdi { flex: 0 0 auto; color: var(--brand-deep); font-size: 12px; font-variant-numeric: tabular-nums; }
.day-chronology > button > span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.day-chronology > button > small { font-size: 11px; color: var(--muted); }
.day-chronology > button > em { font-size: 10px; color: var(--warm); font-style: normal; }
.day-chronology > button:hover { color: var(--brand-deep); }
.day-point:hover, .day-point:focus-visible { z-index: 7; background: #ffffffd9; }
.day-unscheduled, .day-outside { margin-top: 18px; padding: 16px 0 0; border-top: 1px solid var(--line); min-width: 0; }
.day-unscheduled > h3, .day-unscheduled > h4, .day-outside > h3, .day-outside > h4 { margin: 0 0 6px; font-size: 14px; font-weight: 650; line-height: 1.8; }
.day-unscheduled > p, .day-unscheduled > small, .day-outside > p, .day-outside > small { color: var(--muted); font-size: 11px; line-height: 1.85; margin: 0 0 11px; }
.day-unscheduled > button, .day-outside > button { display: flex; align-items: baseline; justify-content: space-between; gap: 13px; width: 100%; min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--line); text-align: start; font-size: 12px; line-height: 1.8; }
.day-unscheduled > button:hover, .day-outside > button:hover { color: var(--brand-deep); }
.day-unscheduled > button > span, .day-outside > button > span { font-size: 11px; color: var(--muted); }
.day-planner { display: grid; grid-template-columns: minmax(150px,1fr) minmax(100px,.6fr) auto; align-items: end; gap: 12px; min-width: 0; padding: 17px 0; border-top: 1px solid var(--line); }
.day-planner > div { grid-column: 1 / -1; }
.day-planner > div > strong { display: block; font-size: 15px; line-height: 1.75; font-weight: 650; }
.day-planner > div > small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.9; }
.day-planner h3, .day-planner h4 { grid-column: 1 / -1; font-size: 15px; font-weight: 650; line-height: 1.75; margin: 0; }
.day-planner > p, .day-planner > small, .day-planner > output, .day-planner > [role='status'], .day-planner > [role='alert'] { grid-column: 1 / -1; margin: 0; font-size: 11px; line-height: 1.9; color: var(--muted); }
.day-planner > [role='alert'] { color: var(--warm); }
.day-planner input, .day-planner select { width: 100%; min-height: 44px; font-size: 12px; }
.day-planner > button { min-height: 44px; font-size: 12px; }

/* Recurrence is explicit in forms and labels, never implied by a color alone. */
.recurrence-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px 16px; min-width: 0; min-inline-size: 0; margin: 21px 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--line); }
.recurrence-fields > legend, .recurrence-fields > h3 { grid-column: 1 / -1; font-size: 15px; line-height: 1.75; font-weight: 650; color: var(--ink); padding: 0 0 6px; margin: 0; }
.recurrence-fields > p, .recurrence-fields > small { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.9; }
.recurrence-fields > .form-grid, .recurrence-fields > label, .recurrence-fields > fieldset, #recurrenceExceptions { grid-column: 1 / -1; }
.editor-body.recurrence-fields { margin: 0; padding: 24px 29px; border-top: 0; }
#recurrenceForm { display: flex; flex-direction: column; max-height: min(90dvh,900px); }
#weekdaysField { display: flex; flex-wrap: wrap; gap: 5px 17px; min-width: 0; margin: 0; padding: 14px 0 4px; border: 0; border-top: 1px solid var(--line); }
#weekdaysField > legend { width: 100%; color: var(--muted); font-size: 12px; padding: 0 0 8px; }
#recurrenceExceptions:empty { display: none; }
#recurrenceExceptions { border-top: 1px solid var(--line); padding-top: 14px; font-size: 12px; line-height: 1.85; }
#recurrenceExceptions button { min-height: 44px; color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; font-size: 12px; }
.recurrence-fields input:not([type='checkbox']):not([type='radio']), .recurrence-fields select { width: 100%; min-height: 44px; }
.recurrence-fields input[type='checkbox'], .recurrence-fields input[type='radio'] { width: 18px; height: 18px; min-height: 18px; margin: 0; accent-color: var(--brand); flex: 0 0 18px; }
.recurrence-fields label:has(> input[type='checkbox']), .recurrence-fields label:has(> input[type='radio']) { display: flex; flex-direction: row; align-items: center; min-height: 44px; gap: 9px; }
.recurrence-fields .weekdays, .recurrence-fields .recurrence-weekdays { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.recurrence-badge { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 0 5px; color: var(--brand-deep); background: var(--brand-soft); border-radius: 3px; font-size: 10px; font-weight: 500; line-height: 1.9; vertical-align: middle; white-space: normal; }
.recurrence-badge::before { content: '↻'; font-family: Arial,sans-serif; font-size: 12px; line-height: 1; }
.recurrence-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; padding: 13px 0; border-block: 1px solid var(--line); margin: 15px 0; }
.recurrence-actions > button { min-height: 44px; padding: 8px 11px; color: var(--brand-deep); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; font-size: 12px; }
.recurrence-actions > button:hover { background: var(--brand-soft); }
.recurrence-actions > p, .recurrence-actions > small { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.9; }

/* Saved recurrence rules remain reachable even after their last occurrence. */
#recurrenceSeriesList { grid-column: 1 / -1; min-width: 0; margin: 0 0 8px; }
#recurrenceSeriesList:empty { display: none; }
.recurrence-series-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 15px; margin-bottom: 6px; }
.recurrence-series-heading > strong { font-size: 13px; font-weight: 650; line-height: 1.8; }
.recurrence-series-heading > button { min-height: 44px; padding: 6px 0; color: var(--brand-deep); font-size: 11px; line-height: 1.8; text-align: start; text-decoration: underline; text-underline-offset: 3px; }
.recurrence-series-list { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; max-height: 245px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-top: 1px solid var(--line); }
.recurrence-series-list > button { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; min-width: 0; min-height: 54px; padding: 10px 0; text-align: start; border-bottom: 1px solid var(--line); border-inline-start: 2px solid transparent; }
.recurrence-series-list > button > strong { font-size: 13px; font-weight: 600; line-height: 1.8; white-space: normal; overflow-wrap: anywhere; }
.recurrence-series-list > button > span { color: var(--muted); font-size: 11px; line-height: 1.9; white-space: normal; overflow-wrap: anywhere; }
.recurrence-series-list > button:hover { color: var(--brand-deep); background: #ffffff80; }
.recurrence-series-list > button[aria-current='true'] { padding-inline-start: 10px; background: var(--brand-soft); border-inline-start-color: var(--brand); }
.recurrence-series-list > button:focus-visible { outline-offset: -3px; }
.capacity-calendar-note { display: block; margin-top: 8px; color: var(--quiet); font-size: 10px; font-weight: 400; line-height: 1.9; }
.recurrence-scope { margin: 22px 0 12px; color: var(--muted); font-size: 12px; line-height: 1.9; max-width: 780px; }

/* Medium screens keep all seven desktop destinations and the ledger readable. */
@media (max-width: 1250px) {
  .sidebar { gap: 14px; padding-inline: 26px; }
  .brand { min-width: 145px; }
  .brand strong { font-size: 13px; }
  .brand small { font-size: 9px; }
  .desktop-nav button { padding-inline: 8px; font-size: 11px; }
  .connection { max-width: 158px; min-width: 100px; padding-inline-start: 13px; }
  .main-content { padding-inline: 32px; grid-template-columns: minmax(0,1fr) minmax(285px,365px); gap: 0 18px; }
  .mobile-areas { gap: 0; }
  .mobile-areas button { padding-inline: 8px; font-size: 11px; }
  .workstage:has(> #overview:not([hidden])) { grid-template-columns: minmax(0,1fr) 240px; gap: 30px; }
  .overview { padding-inline-start: 22px; }
  .task-card { gap: 3px 13px; }
  .task-actions { max-width: 165px; }
  .task-actions .text-action { order: 3; }
  .task-card h3 { font-size: 15px; }
  .dashboard-metric { padding-inline: 17px; }
  .dashboard-panels { gap: 35px; }
}
@media (min-width: 901px) and (max-width: 1050px) {
  .sidebar { flex-wrap: wrap; padding-block: 11px 0; gap: 6px 18px; }
  .brand { flex: 1; }
  .connection { max-width: 260px; border-inline-start: 0; }
  .connection small { font-size: 9px; }
  .desktop-nav { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .desktop-nav button { padding: 8px 17px; font-size: 12px; }
  .desktop-nav button::after { bottom: 0; }
  .workstage:has(> #overview:not([hidden])) { grid-template-columns: minmax(0,1fr) 223px; gap: 23px; }
  .main-content { padding-inline: 26px; }
  .task-actions { max-width: 130px; }
  .status-control select { max-width: 120px; }
  .task-actions .text-action { min-height: 32px; }
}

/* Mobile is the same document, not a squeezed desktop dashboard. */
@media (max-width: 900px) {
  html { scrollbar-gutter: auto; }
  .sidebar { display: none; }
  .main-content { display: flex; flex-direction: column; gap: 0; padding: 0 22px calc(91px + env(safe-area-inset-bottom)); max-width: 760px; }
  .main-content > * { width: 100%; min-width: 0; }
  .mobile-brand { display: flex; align-items: center; gap: 10px; margin: 0 -22px; width: calc(100% + 44px); padding: 14px 22px; border-bottom: 1px solid var(--line); background: var(--surface); }
  .mobile-brand .brand-mark { width: 29px; height: 29px; flex-basis: 29px; border-radius: 6px 6px 2px 6px; font-size: 18px; }
  .mobile-brand strong { font-size: 13px; }
  .mobile-private { display: flex; align-items: center; gap: 5px; margin-inline-start: auto; color: var(--quiet); font-size: 10px; white-space: nowrap; }
  .page-header { margin: 24px 0 17px; gap: 15px; align-items: center; }
  .page-header > div { display: block; }
  .page-header h1 { font-size: 32px; line-height: 1.5; margin: 0 0 4px; }
  .header-description { font-size: 12px; line-height: 1.8; }
  .add-button { font-size: 12px; padding: 8px 12px; }
  .date-ribbon { flex: 0 0 auto; margin-bottom: 18px; }
  .date-ribbon button { min-height: 75px; display: flex; flex-direction: column; gap: 0; padding: 8px 2px; }
  .date-ribbon button > span { align-self: auto; font-size: 10px; line-height: 1.5; }
  .date-ribbon button > strong { font-size: 23px; line-height: 1.4; }
  .date-ribbon button > small { align-self: auto; font-size: 9px; line-height: 1.5; }
  .date-ribbon button > em { font-size: 8px; inset-inline-end: 3px; padding-inline: 3px; }
  .workspace-toolbar { display: flex; flex: 0 0 auto; margin-bottom: 8px; gap: 9px; }
  .search-wrap input { height: 44px; font-size: 12px; }
  .date-wrap input { width: 133px; }
  .mobile-areas { display: flex; flex: 0 0 auto; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin: 0 -22px 19px; padding-inline: 22px; width: calc(100% + 44px); gap: 5px; }
  .mobile-areas::-webkit-scrollbar { display: none; }
  .mobile-areas button { font-size: 12px; min-height: 40px; padding: 7px 9px; flex: 0 0 auto; }
  .workstage, .workstage:has(> #overview:not([hidden])) { display: flex; flex-direction: column; gap: 22px; }
  .workstage > .collection { width: 100%; order: 1; }
  .workstage > .overview { width: 100%; order: 2; }
  .overview { gap: 18px; padding: 0 0 20px; border-inline-start: 0; border-bottom: 1px solid var(--line); }
  .capacity { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px 20px; }
  .capacity-main { min-width: 0; }
  .capacity-main h2 { font-size: 21px; margin-top: 3px; }
  .capacity-main > p:not(.eyebrow) { font-size: 11px; }
  .time-metrics { border-top: 0; padding-top: 0; gap: 14px; align-self: start; }
  .time-metrics strong { font-size: 21px; }
  .time-metrics span { font-size: 10px; }
  .time-metrics small { font-size: 10px; }
  .bar { grid-column: 1 / -1; }
  .availability { grid-column: 1 / -1; }
  .availability summary { min-height: 37px; }
  .window-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
  .focus { border-top: 1px solid var(--line); padding-top: 15px; gap: 8px; align-items: center; }
  .focus-copy strong { font-size: 13px; margin-block: 2px; }
  .focus-copy small { font-size: 10px; }
  .focus > .secondary { margin-inline-start: 0; min-height: 40px; }
  .collection-heading { margin-bottom: 14px; }
  .collection-heading h2 { font-size: 19px; }
  .list-count { font-size: 11px; }
  .task-card { min-height: 111px; gap: 2px 15px; padding-block: 15px; }
  .task-card h3 { font-size: 16px; }
  .task-actions { max-width: 165px; }
  .status-control select { min-height: 44px; max-width: 125px; font-size: 12px; }
  .focus-action, .text-action { min-height: 44px; }
  .focus-action { width: 39px; }
  .task-actions .text-action { order: 3; }
  .task-meta { font-size: 12px; gap: 2px 11px; }
  .area-tag, .sync-state { font-size: 11px; }
  .mobile-nav { position: fixed; display: flex; justify-content: space-around; align-items: stretch; gap: 0; z-index: 20; bottom: 0; inset-inline: 0; width: 100%; margin: 0; padding: 0 6px env(safe-area-inset-bottom); border-top: 1px solid var(--line-strong); background: var(--surface); box-shadow: 0 -5px 20px #2b342407; }
  .mobile-nav button { position: relative; flex: 1 1 20%; min-width: 0; min-height: 63px; font-size: 11px; line-height: 1.5; padding: 15px 3px 12px; text-align: center; color: var(--muted); white-space: normal; }
  .mobile-nav button::before { content: ''; position: absolute; top: -1px; inset-inline: 15%; height: 2px; background: transparent; }
  .mobile-nav button.selected { color: var(--brand-deep); font-weight: 750; }
  .mobile-nav button.selected::before { background: var(--brand); }
  .more-menu { position: fixed; inset-inline: 15px; bottom: calc(74px + env(safe-area-inset-bottom)); width: auto; max-width: 600px; margin-inline: auto; z-index: 25; display: block; padding: 7px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
  .more-menu button { display: block; width: 100%; min-height: 47px; padding: 9px 13px; text-align: start; font-size: 13px; border-radius: 4px; }
  .more-menu button:hover, .more-menu button.selected { background: var(--brand-soft); color: var(--brand-deep); }
  .timeline-controls { align-items: stretch; gap: 10px; }
  .timeline-mode { flex: 1 1 auto; }
  .timeline-mode button { flex: 1; min-height: 42px; }
  .timeline-jump { flex: 1 1 auto; }
  .timeline-jump button { flex: 1; min-height: 42px; padding-inline: 9px; }
  .timeline-jump input { min-height: 42px; }
  .timeline-day { flex-basis: 260px; width: 260px; }
  .timeline-task strong { font-size: 14px; }
  .timeline-task span { font-size: 12px; }
  .undated-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-grid { grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 16px; padding-bottom: 20px; }
  .dashboard-metric { padding: 7px 17px; }
  .dashboard-metric:nth-child(4) { border-inline-start: 0; padding-inline-start: 0; }
  .dashboard-metric strong { font-size: 34px; }
  .dashboard-panels { grid-template-columns: 1fr; gap: 30px; }
  .settings-layout { gap: 25px 30px; }
  footer { padding-top: 28px; }
  #toast { bottom: calc(79px + env(safe-area-inset-bottom)); inset-inline: 16px; max-width: 500px; margin-inline: auto; width: max-content; }
}
@media (max-width: 580px) {
  .main-content { padding-inline: 17px; }
  .mobile-brand { padding-inline: 17px; margin-inline: -17px; width: calc(100% + 34px); }
  .mobile-brand strong { font-size: 12px; }
  .mobile-private { font-size: 9px; }
  .page-header { align-items: flex-start; gap: 10px; margin-top: 21px; }
  .page-header h1 { font-size: 30px; }
  .header-description { font-size: 11px; }
  .add-button { min-height: 43px; font-size: 11px; padding: 8px 10px; margin-top: 3px; }
  .add-button .add-icon { width: 14px; height: 14px; }
  .date-ribbon { margin-bottom: 16px; }
  .date-ribbon button { min-height: 73px; }
  .date-ribbon button > span { font-size: 9px; }
  .date-ribbon button > strong { font-size: 23px; }
  .date-ribbon button > small { font-size: 8px; }
  .date-wrap input { width: 121px; padding-inline: 2px; font-size: 11px; }
  .search-wrap input { font-size: 11px; padding-inline-start: 32px; padding-inline-end: 6px; }
  .search-icon { inset-inline-start: 10px; width: 15px; height: 15px; }
  .mobile-areas { margin-inline: -17px; width: calc(100% + 34px); padding-inline: 17px; }
  .mobile-areas button { font-size: 11px; }
  .overview { gap: 15px; padding-bottom: 16px; }
  .capacity { gap: 10px 14px; }
  .capacity-main h2 { font-size: 19px; }
  .capacity-main .eyebrow { font-size: 10px; }
  .capacity-main > p:not(.eyebrow) { font-size: 10px; line-height: 1.9; }
  .time-metrics { gap: 9px; }
  .time-metrics strong { font-size: 19px; }
  .time-metrics span, .time-metrics small { font-size: 10px; line-height: 1.8; }
  .availability summary { font-size: 11px; }
  .window-grid { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .window-row input { font-size: 16px; }
  .focus-copy strong { font-size: 12px; }
  .focus-copy small { font-size: 10px; }
  .focus-icon { flex-basis: 23px; width: 23px; }
  .focus > .secondary { margin-inline-start: 31px; }
  .focus #clearFocus { margin-inline-start: auto; }
  .collection-heading { gap: 10px; margin-bottom: 12px; }
  .collection-heading h2 { font-size: 18px; }
  .list-count { font-size: 10px; }
  .group-heading h3 { font-size: 12px; }
  .task-group { margin-bottom: 23px; }
  .task-card { grid-template-columns: minmax(0,1fr); grid-template-areas: 'top' 'title' 'meta' 'actions'; min-height: 0; padding: 15px 0 13px; gap: 4px; }
  .task-card h3 { font-size: 16px; line-height: 1.85; }
  .task-meta { font-size: 11px; gap: 3px 12px; }
  .task-actions { justify-content: flex-start; max-width: none; width: 100%; gap: 5px; margin-top: 3px; }
  .status-control { margin-inline-end: auto; }
  .status-control select { min-height: 40px; max-width: 155px; font-size: 11px; }
  .task-actions .text-action { order: 0; padding-inline: 10px; font-size: 11px; min-height: 40px; }
  .focus-action { width: 40px; height: 40px; min-height: 40px; }
  .archive-card .task-actions { max-width: none; }
  .archive-card .task-actions .text-action { text-align: start; padding-inline-start: 0; }
  :root[data-density='compact'] .task-card { min-height: 0; padding-block: 11px; gap-block: 2px; }
  :root[data-density='compact'] .task-card h3 { font-size: 15px; }
  .filter-segment { width: 100%; gap: 2px; }
  .filter-segment button { flex: 1; padding: 7px 8px; font-size: 11px; }
  .range-controls { width: 100%; gap: 6px; }
  .range-controls input { flex: 1; min-width: 100px; width: auto; font-size: 11px; }
  .range-controls button { flex-basis: 100%; text-align: start; padding-inline: 0; }
  .filter-note { font-size: 11px; }
  .timeline-controls { gap: 10px; }
  .timeline-mode { width: 100%; }
  .timeline-mode button { font-size: 11px; padding-inline: 8px; }
  .timeline-jump { display: grid; width: 100%; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
  .timeline-jump button { font-size: 10px; padding-inline: 2px; }
  .timeline-jump input { width: 100%; grid-column: 1 / -1; font-size: 12px; }
  .timeline-caption { font-size: 11px; }
  .timeline-day { flex-basis: 255px; width: 255px; padding-inline: 11px; }
  .timeline-branch { min-height: 168px; }
  .timeline-task { padding: 11px 12px; }
  .timeline-task strong { font-size: 13px; }
  .timeline-task span { font-size: 11px; }
  .undated-grid { grid-template-columns: minmax(0,1fr); }
  .dashboard-grid { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 18px; }
  .dashboard-metric { padding: 5px 17px; }
  .dashboard-metric:nth-child(4) { border-inline-start: 1px solid var(--line); padding-inline-start: 17px; }
  .dashboard-metric:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .dashboard-metric > span { font-size: 11px; }
  .dashboard-metric strong { font-size: 34px; }
  .dashboard-metric small { font-size: 10px; }
  .dashboard-panel h3, .settings-panel h3 { font-size: 20px; }
  .dashboard-time { gap: 18px; }
  .dashboard-time strong { font-size: 24px; }
  .dashboard-upcoming button { flex-wrap: wrap; gap: 4px 12px; }
  .settings-layout { grid-template-columns: 1fr; gap: 28px; }
  .settings-footnote { grid-column: 1; }
  dialog { max-width: calc(100vw - 22px); max-height: calc(100dvh - 26px); border-radius: 9px; }
  #taskForm { max-height: calc(100dvh - 26px); }
  .dialog-head { padding: 19px 18px 15px; }
  .dialog-head h2 { font-size: 22px; }
  .editor-body { padding: 18px; }
  .form-grid { gap: 14px 10px; }
  .form-grid label { font-size: 11px; }
  .form-grid input, .form-grid select { padding-inline: 8px; font-size: 13px; min-height: 44px; }
  .editor-body input, .editor-body textarea { font-size: 16px; }
  .dialog-actions { padding: 14px 18px 18px; gap: 8px; }
  #completion { padding: 23px 18px; }
  #completion h2 { font-size: 23px; }
  #completion p { font-size: 12px; }
  #completion .completion-choices label { font-size: 11px; padding-inline: 8px; }
  #completion .dialog-actions .primary { flex: 1 1 auto; }
  .access-box { padding: 24px 19px; margin-top: 30px; }
  .access-box h1 { font-size: 27px; }
  .empty-board { padding-inline: 12px; }
}
@media (max-width: 360px) {
  .main-content { padding-inline: 14px; }
  .mobile-brand { margin-inline: -14px; padding-inline: 14px; width: calc(100% + 28px); }
  .mobile-private { font-size: 8px; }
  .page-header h1 { font-size: 27px; }
  .add-button { font-size: 10px; padding-inline: 8px; gap: 4px; }
  .date-wrap input { width: 109px; }
  .mobile-areas { margin-inline: -14px; padding-inline: 14px; width: calc(100% + 28px); }
  .time-metrics strong { font-size: 17px; }
  .capacity { gap: 10px; }
  .mobile-nav button { font-size: 10px; }
  .completion-choices { gap: 5px; }
}
/* Feature layouts remain legible without horizontal page scrolling. */
@media (max-width: 900px) {
  .dashboard-charts { gap: 25px 28px; }
  .day-hours { max-height: 490px; }
  .day-timeline-head { padding-bottom: 13px; }
  .day-planner { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .day-planner > button { grid-column: 1 / -1; justify-self: start; padding-inline: 18px; }
}
@media (max-width: 580px) {
  .dashboard-charts { grid-template-columns: minmax(0,1fr); gap: 25px; margin-bottom: 27px; }
  .dashboard-chart { padding-top: 16px; }
  .dashboard-chart h3, .dashboard-chart h4 { font-size: 16px; }
  .chart-segment { font-size: 11px; }
  .chart-legend { gap: 2px 14px; }
  .chart-legend button { min-height: 44px; font-size: 11px; }
  .chart-drilldown { padding-top: 18px; scroll-margin-top: 14px; }
  .chart-drilldown h3 { font-size: 18px; }
  .page-header > .header-actions { gap: 6px; flex-wrap: wrap; max-width: 178px; }
  .header-actions > .secondary { min-height: 40px; font-size: 10px; padding: 6px 8px; }
  .header-actions > .add-button { min-height: 40px; margin-top: 0; font-size: 10px; padding-inline: 9px; }
  .editor-body.recurrence-fields { padding: 18px; }
  #recurrenceForm { max-height: calc(100dvh - 26px); }
  .day-timeline { margin-bottom: 25px; }
  .day-timeline-head h2, .day-timeline-head h3 { font-size: 18px; }
  .day-timeline-head p, .day-timeline-head > span { font-size: 11px; }
  .day-hours { max-height: 440px; --clock-gutter: 54px; --end-gutter: 9px; --lane-gap: 4px; }
  .day-hour > span:first-child { min-width: 47px; font-size: 10px; padding-inline-end: 6px; }

  .day-block { padding-inline: 8px; }
  .day-block > strong, .day-point > strong { font-size: 11px; }
  .day-block > span, .day-block > small, .day-point > span, .day-point > small { font-size: 10px; }
  .day-point { gap: 5px; padding-inline: 7px; }
  .day-point > span, .day-point > small { max-width: 35%; }
  .day-point > .day-block-label { max-width: none; font-size: 11px; }
  .day-block > .day-block-label { font-size: 11px; }
  .day-hour > small { width: 44px; font-size: 8px; }
  .day-chronology > button { flex-wrap: wrap; gap: 3px 10px; }
  .day-chronology > button > span { flex-basis: calc(100% - 60px); }
  .day-chronology > button > small { margin-inline-start: 48px; }
  .day-planner { gap: 13px 10px; }
  .day-planner input, .day-planner select { min-height: 44px; font-size: 16px; }
  .day-unscheduled > button, .day-outside > button { flex-wrap: wrap; gap: 3px 12px; }
  .recurrence-fields { gap: 14px 10px; margin-block: 18px; }
  .recurrence-fields input:not([type='checkbox']):not([type='radio']), .recurrence-fields select { font-size: 16px; }
  .recurrence-actions { gap: 7px; }
  .recurrence-actions > button { font-size: 11px; padding-inline: 9px; }
}
@media (max-width: 360px) {
  .day-planner { grid-template-columns: minmax(0,1fr); }
  .day-planner > button { grid-column: 1; }
  .recurrence-fields { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media print {
  body { color: black; background: white; }
  .sidebar, .mobile-brand, .mobile-nav, .more-menu, .add-button, .workspace-toolbar, .mobile-areas, .task-actions, #toast, footer { display: none !important; }
  .main-content { display: block; max-width: none; padding: 0; }
  .workstage, .workstage:has(> #overview:not([hidden])) { display: block; }
  .overview { border: 0; margin-bottom: 25px; padding: 0; }
  .task-card { break-inside: avoid; }
}

/* Stage 4 · a colorful agenda. Color separates purpose; real task semantics,
   clock coordinates, horizontal date panning and all interaction hooks stay intact. */
:root {
  --ink: #29283b;
  --muted: #646176;
  --quiet: #706c82;
  --brand: #087b65;
  --brand-deep: #075d4d;
  --brand-soft: #e0f2eb;
  --canvas: #f5f4f9;
  --surface: #ffffff;
  --line: #e8e5ef;
  --line-strong: #d7d2e3;
  --warm: #a43c29;
  --warm-soft: #fff0e9;
  --plum: #343047;
  --violet: #6651c9;
  --lavender: #ede8ff;
  --mint: #ddf2e9;
  --butter: #ffedac;
  --peach: #ffe4d9;
  --shadow: 0 10px 32px #30244708;
  --shadow-raised: 0 14px 38px #30244713;
  color: var(--ink);
  background: var(--canvas);
}
:root[data-accent='blue'] { --brand: #3d62c7; --brand-deep: #294b9f; --brand-soft: #e8eefe; }
:root[data-accent='clay'] { --brand: #aa5136; --brand-deep: #873d27; --brand-soft: #fae9df; }
body { background: var(--canvas); line-height: 1.8; }
button, a, input, select, textarea, summary { transition: background-color .17s, color .17s, border-color .17s, box-shadow .17s, transform .17s; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #7359dc; outline-offset: 4px; }
button:disabled { transform: none; }
.app-shell { display: grid; grid-template-columns: 232px minmax(0,1fr); align-items: start; max-width: 1880px; margin-inline: auto; }
.sidebar { position: sticky; top: 16px; display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 208px; height: calc(100dvh - 32px); min-height: 640px; margin: 16px 16px 16px 8px; padding: 25px 15px 15px; border: 0; border-radius: 25px; color: #f8f7fe; background: var(--plum); box-shadow: 0 15px 40px #26203915; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #777084 transparent; }
.brand { min-width: 0; gap: 11px; padding: 0 8px 20px; }
.brand-mark { width: 42px; height: 42px; flex-basis: 42px; background: #e5efb9; color: #343d21; border: 0; border-radius: 15px; font-size: 25px; box-shadow: inset 0 -3px 0 #bdcc8d66; }
.brand strong { font-size: 14px; font-weight: 700; color: white; }
.brand small { font-size: 9px; color: #c1bccf; margin-top: 3px; }
.nav-section-label { display: block; padding: 14px 11px 9px; color: #b1aabd; font-size: 10px; }
.desktop-nav { display: flex; flex: 0 0 auto; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 5px; order: 0; width: 100%; }
.desktop-nav button { justify-content: flex-start; gap: 10px; min-height: 45px; padding: 10px 12px; border-radius: 13px; color: #d9d4e5; font-size: 12px; text-align: start; }
.desktop-nav button::after { display: none; }
.desktop-nav button[data-view='dashboard']::before, .desktop-nav button[data-view='settings']::before { display: inline-grid; place-items: center; width: 19px; height: 19px; font-size: 20px; line-height: 1; font-family: Arial,sans-serif; }
.desktop-nav button[data-view='dashboard']::before { content: '◫'; }
.desktop-nav button[data-view='settings']::before { content: '⚙'; }
.nav-icon { display: inline-flex; align-items: center; justify-content: center; }
.nav-task-planning { width: 100%; }
.nav-task-planning > summary { display: flex; align-items: center; gap: 10px; min-height: 45px; padding: 10px 12px; border-radius: 13px; color: #d9d4e5; font-size: 12px; cursor: pointer; list-style: none; white-space: nowrap; }
.nav-task-planning > summary::-webkit-details-marker { display: none; }
.nav-task-planning > summary::marker { content: ''; }
.nav-task-planning > summary:hover, .nav-task-planning.has-active > summary { background: #ffffff10; color: #fff; }
.nav-task-planning > summary:focus-visible { outline-color: #ffdf82; outline-offset: 2px; }
.nav-task-planning-chevron { width: 15px; height: 15px; margin-inline-start: auto; transition: transform .17s; }
.nav-task-planning[open] .nav-task-planning-chevron { transform: rotate(180deg); }
.nav-task-planning-items { display: flex; flex-direction: column; gap: 3px; padding-block: 3px 5px; padding-inline-start: 12px; }
.nav-task-planning:not([open]) .nav-task-planning-items { display: none; }
.desktop-nav .nav-task-planning-items button { min-height: 40px; font-size: 11px; }
.desktop-nav button:hover { background: #ffffff10; color: #ffffff; }
.desktop-nav button.selected { background: #e5efb9; color: #303b25; box-shadow: 0 4px 13px #16102219; font-weight: 750; }
.desktop-nav button:focus-visible, .area-nav button:focus-visible, .connection button:focus-visible { outline-color: #ffdf82; outline-offset: 2px; }
.nav-count { min-width: 22px; padding: 1px 5px; margin-inline-start: auto; font-size: 10px; border-radius: 7px; color: #e0dcea; background: #ffffff14; }
.selected .nav-count { color: #364523; background: #cadc8d; }
.sidebar-divider { display: block; height: 1px; flex: 0 0 1px; background: #ffffff13; margin: 18px 9px 0; }
.area-nav { display: flex; flex-direction: column; gap: 3px; padding-bottom: 22px; }
.area-nav button { min-height: 38px; display: flex; align-items: center; gap: 9px; padding: 6px 12px; text-align: start; font-size: 11px; color: #c8c2d4; border-radius: 11px; }
.area-nav button:hover, .area-nav button.selected { background: #ffffff0e; color: #fff; }
.area-nav button.selected { font-weight: 700; }
.area-nav .area-dot { width: 7px; height: 7px; flex-basis: 7px; }
.connection { flex: 0 0 auto; min-width: 0; max-width: none; width: 100%; margin-top: auto; padding: 12px; border: 1px solid #ffffff0d; border-radius: 14px; background: #ffffff08; color: #d4cfdf; font-size: 10px; }
.connection small { color: #c0b9ce; font-size: 9px; }
.connection button { color: #e6efbd; }
.connection-indicator { width: 7px; height: 7px; flex-basis: 7px; }
.connection[data-status='ready'] .connection-indicator, .connection[data-status='saved'] .connection-indicator { background: #a8dba8; box-shadow: 0 0 0 3px #a8dba811; }
.main-content { display: grid; grid-template-columns: minmax(0,1fr); grid-template-areas: 'header' 'ribbon' 'toolbar' 'stage' 'footer'; width: 100%; max-width: 1540px; padding: 38px 36px 24px 30px; gap: 0; margin: 0; }
.page-header { align-items: center; gap: 22px; margin-bottom: 26px; }
.page-header > div { display: block; }
.page-header .eyebrow { display: block; font-size: 10px; font-weight: 700; color: var(--violet); margin: 0 0 5px; }
.page-header h1 { font-size: clamp(28px,2.4vw,38px); line-height: 1.55; font-weight: 750; }
.header-description { margin-top: 5px; max-width: 720px; font-size: 12px; color: var(--muted); line-height: 1.9; }
.page-header > .header-actions { gap: 9px; }
.primary { border-radius: 13px; min-height: 46px; padding: 10px 18px; box-shadow: 0 5px 12px color-mix(in srgb,var(--brand) 15%,transparent); }
.primary:hover { box-shadow: 0 8px 17px color-mix(in srgb,var(--brand) 22%,transparent); transform: translateY(-1px); }
.secondary { min-height: 44px; padding: 9px 14px; border-radius: 12px; border-color: var(--line-strong); background: white; color: var(--ink); }
.secondary:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); }
.workspace-toolbar { margin-bottom: 25px; padding: 7px; gap: 10px; background: #eeecf4; border: 1px solid #e6e2ef; border-radius: 18px; max-width: 100%; }
.search-wrap input { border: 0; height: 44px; background: #fff; border-radius: 12px; padding-inline-start: 40px; font-size: 12px; box-shadow: 0 2px 5px #2f254504; }
.date-wrap { background: white; border: 0; padding: 0 10px; border-radius: 12px; }
.date-wrap input { width: 143px; background: transparent; font-size: 12px; }
input, select, textarea { min-height: 44px; background: #fcfbfe; border: 1px solid var(--line-strong); border-radius: 11px; padding: 9px 12px; }
input:hover, select:hover, textarea:hover { border-color: #b7abc9; }
.mobile-areas { display: none; }
.date-ribbon { display: grid; gap: 9px; padding: 0; border: 0; margin-bottom: 22px; }
.date-ribbon button { min-height: 83px; background: white; border: 1px solid var(--line); border-radius: 17px; gap: 0 9px; box-shadow: 0 4px 12px #2c234105; }
.date-ribbon button:first-child { border-inline-start: 1px solid var(--line); }
.date-ribbon button > span { font-size: 10px; }
.date-ribbon button > strong { font-size: 27px; }
.date-ribbon button > small { font-size: 9px; }
.date-ribbon button > em { top: -8px; border-radius: 6px; padding-inline: 7px; background: var(--butter); color: #69501d; font-size: 8px; }
.date-ribbon button:hover { background: var(--lavender); border-color: #c9bde9; transform: translateY(-2px); }
.date-ribbon button.selected, .date-ribbon button[aria-pressed='true'] { color: #fff; background: var(--plum); border-color: var(--plum); box-shadow: 0 6px 17px #342d4923; }
.date-ribbon button.selected > strong, .date-ribbon button[aria-pressed='true'] > strong { color: white; }
.date-ribbon button.selected::after, .date-ribbon button[aria-pressed='true']::after { display: none; }
.workstage:has(> #overview:not([hidden])) { grid-template-columns: minmax(0,1fr) 286px; gap: 22px; }
.overview { gap: 18px; padding: 0; border: 0; }
.overview > section { border-radius: 21px; box-shadow: var(--shadow); }
.appointments { padding: 21px; background: var(--lavender); border: 1px solid #e0d8f7; }
.appointment-heading { gap: 5px; margin-bottom: 11px; }
.appointment-heading .eyebrow { color: #5a4889; font-weight: 700; }
.appointment-heading > span { font-size: 9px; color: #6d5b90; }
.appointment-list { gap: 8px; }
.appointment-list button { padding: 11px 12px; gap: 10px; border: 1px solid #ffffff90; border-radius: 12px; background: #ffffff99; }
.appointment-list b { font-size: 14px; color: #5b448f; }
.appointment-list button span { font-size: 11px; }
.appointment-list button:hover { background: #fff; box-shadow: 0 3px 10px #5c438e0c; }
.capacity { gap: 17px; padding: 23px 21px; border: 1px solid #cce8db; background: var(--mint); }
.capacity-main .eyebrow { color: #275e4e; font-weight: 700; }
.capacity-main h2 { margin: 8px 0; font-size: 29px; line-height: 1.6; color: #224e40; font-weight: 750; }
.capacity-main > p:not(.eyebrow) { font-size: 11px; color: #3f6657; }
.capacity-calendar-note { color: #4d6c60; font-size: 9px; }
.time-metrics { gap: 12px; padding-top: 15px; border-color: #bedfce; }
.time-metrics strong { color: #285443; font-size: 24px; font-weight: 750; }
.time-metrics span, .time-metrics small { color: #456c5b; font-size: 10px; }
.bar { height: 7px; background: #bddfcf; border-radius: 20px; }
.bar > div { border-radius: 20px; background: #367c5e; }
.availability { padding-top: 1px; }
.availability summary { min-height: 42px; color: #24523f; font-size: 11px; }
.availability summary span, .availability p { color: #476e5b; font-size: 10px; }
.window-row input { border-color: #b8d2c3; border-radius: 9px; background: #ffffffb5; }
.capacity .secondary { border-color: #b0cfbd; background: #ffffffa6; color: #24523f; }
.focus { padding: 21px; border: 1px solid #edda93; background: var(--butter); gap: 10px; }
.focus-icon { width: 34px; height: 34px; flex-basis: 34px; border-radius: 12px; background: #ffffff90; color: #71540d; }
.focus-copy .eyebrow { font-size: 10px; color: #71540d; }
.focus-copy strong { color: #493b19; font-size: 14px; font-weight: 750; }
.focus-copy small { color: #77602e; font-size: 10px; }
.focus > .secondary { background: #fff8dc; color: #614a15; border-color: #e4cd7d; margin-inline-start: 44px; border-radius: 10px; }
#clearFocus { border-radius: 10px; color: #735c26; }
#clearFocus:hover { background: #ffffff70; }
.collection-heading { margin: 2px 0 18px; align-items: center; gap: 15px; }
.collection-heading > div { display: block; }
.collection-heading .eyebrow { display: block; font-size: 9px; color: var(--quiet); margin: 0 0 3px; }
.collection-heading h2 { font-size: 21px; font-weight: 750; }
.list-count { font-size: 10px; background: #ebe7f3; border: 1px solid #e0daeb; padding: 5px 10px; border-radius: 9px; color: #645a78; }
.task-group { padding: 19px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 21px; background: #eeebf6; }
.task-group[data-drop-priority='must'] { background: #fff0e9; border-color: #f5e0d5; }
.task-group[data-drop-priority='important'] { background: #efebfc; border-color: #e4ddf5; }
.task-group[data-drop-priority='optional'] { background: #eaf3ee; border-color: #dbe9df; }
.group-heading { padding: 0 1px 12px; gap: 9px; border: 0; }
.group-heading h3 { color: #4e435f; font-size: 13px; font-weight: 750; }
.task-group[data-drop-priority='must'] .group-heading h3 { color: #8e4c32; }
.task-group[data-drop-priority='optional'] .group-heading h3 { color: #3e6550; }
.group-count { display: inline-flex; justify-content: center; padding: 0 7px; background: #ffffffb0; border-radius: 7px; font-size: 10px; color: #6c627d; }
.cards, .archive-grid { gap: 11px; }
.task-card { padding: 16px 17px; gap: 4px 14px; min-height: 120px; border: 1px solid #e9e5ed; border-radius: 15px; background: white; box-shadow: 0 3px 9px #31234304; }
.task-card:hover { background: white; border-color: #c7bada; box-shadow: 0 6px 17px #3123430c; transform: translateY(-1px); }
.task-card-top { align-items: center; gap: 6px 9px; }
.task-card h3 { font-size: 15px; font-weight: 700; line-height: 1.9; }
.area-tag { padding: 2px 7px; border-radius: 7px; font-size: 10px; color: #356b51; background: #eef6f0; }
.area-tag.marwan { background: #edf1fe; color: #4b5fa0; }
.area-tag.crystal { background: #f4edfb; color: #775193; }
.area-tag.personal { background: #fff4d6; color: #8a6929; }
.area-dot { width: 6px; height: 6px; flex-basis: 6px; background: #499b73; }
.area-dot.marwan { background: #6d86d6; }
.area-dot.crystal { background: #aa7dcd; }
.area-dot.personal { background: #d6aa44; }
.task-meta { font-size: 10px; gap: 3px 11px; margin-top: 2px; }
.task-meta .overdue { color: #a3412a; }
.status-control select { min-height: 38px; max-width: 117px; padding: 5px 8px; background: #f7f5fb; border-color: #e5deee; border-radius: 9px; color: #635672; font-size: 10px; }
.task-actions { gap: 3px; max-width: 174px; }
.task-actions .text-action { order: 3; }
.text-action { border-radius: 9px; min-height: 40px; padding: 7px 9px; font-size: 11px; }
.text-action:hover { background: var(--brand-soft); color: var(--brand-deep); text-decoration: none; }
.focus-action { border-radius: 9px; color: #8a7d9c; width: 34px; }
.status-pill { color: #266143; border-radius: 7px; background: #e7f4e9; padding: 2px 8px; font-size: 10px; }
.status-pill.abandoned { color: #8d523e; background: #f9e9e2; }
.archive-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.archive-card { grid-template-columns: minmax(0,1fr); grid-template-areas: 'top' 'title' 'meta' 'actions'; gap: 8px; padding: 21px; }
.archive-card .task-actions { width: 100%; max-width: none; justify-content: flex-start; }
.archive-card .task-actions .text-action { background: #f6f3fb; text-align: start; }
.empty-group { padding: 20px 15px; border: 1px dashed #d5cddf; border-radius: 13px; background: #ffffff80; font-size: 11px; }
.empty-board { padding: 45px 22px; min-height: 250px; border: 1px dashed #cdc1de; border-radius: 22px; background: #ffffffab; }
.empty-symbol { width: 65px; height: 65px; display: grid; place-items: center; color: #8871b6; background: var(--lavender); border-radius: 22px; font-size: 40px; }
.empty-board h3 { margin-top: 17px; font-weight: 700; }
.compact-group { padding: 19px; }
.dropover { outline: 3px dashed var(--brand); background: var(--brand-soft); }
:root[data-density='compact'] .task-card { padding: 12px 15px; min-height: 98px; }
:root[data-density='compact'] .task-group { padding: 16px; }
.list-filters { padding: 14px; border: 1px solid var(--line); background: #fff; border-radius: 18px; margin-bottom: 20px; gap: 12px 20px; }
.filter-segment { padding: 3px; border-radius: 11px; background: #f2eff7; }
.filter-segment button { min-height: 38px; border-radius: 9px; }
.filter-segment button[aria-pressed='true'] { background: var(--plum); color: #fff; box-shadow: 0 2px 6px #2e244914; }
.range-controls input { background: #faf9fc; border-radius: 9px; min-height: 40px; }
.filter-note { padding-inline: 3px; color: var(--quiet); }

/* Today has its own large planning island, distinct from priority cards. */
.day-timeline { padding: 22px; border: 1px solid #e4deef; border-radius: 23px; background: #fff; box-shadow: var(--shadow); margin-bottom: 24px; }
.day-timeline-head { gap: 12px; padding-bottom: 19px; align-items: center; }
.day-timeline-head .eyebrow { color: #7c5fa7; font-size: 9px; margin-bottom: 4px; }
.day-timeline-head h3 { font-size: 18px; font-weight: 750; }
.day-timeline-head p { max-width: 500px; font-size: 10px; }
.day-timeline-head button { border-radius: 10px; background: #f3effb; border: 1px solid #e4daf5; color: #6d4a97; font-size: 10px; }
.day-hours { border: 1px solid #e6dff0; border-radius: 15px; background: #fbf9ff; scrollbar-color: #bdb0d2 transparent; }
.day-hour { border-color: #ebe5f3; }
.day-hour > span:first-child { color: #756486; background: #fbf9ff; border-radius: 0 5px 5px 0; }
.day-hour.outside, .day-hour.is-outside, .day-hour[data-work='false'], .day-hour[data-outside='true'] { background: #f0edf5; }
.day-block > .day-block-shape { border: 1px solid #ccc1ed; border-inline-start: 4px solid #8b70d3; border-radius: 9px; background: #eae3fc; box-shadow: 0 2px 5px #6b559112; }
.day-block > .day-block-label { color: #4b3b68; }
.day-block.conflict > .day-block-shape, .day-block.is-conflict > .day-block-shape, .day-block[data-conflict='true'] > .day-block-shape { border-color: #d88668; background: #ffe7dc; }
.day-block:hover::after, .day-block:focus-visible::after { border-radius: 10px; }
.day-point > strong, .day-point > span, .day-point > small { background: #fbf9ff; }
.day-point::before { border-color: #7a61ba; }
.day-chronology { gap: 5px; margin-block: 14px 18px; }
.day-chronology > button { padding: 10px 12px; border: 1px solid #eee9f4; background: #faf8fe; border-radius: 10px; font-size: 11px; }
.day-chronology > button > bdi { color: #7756a4; }
.day-chronology > button:hover { background: var(--lavender); }
.day-planner { grid-template-columns: minmax(0,1fr) minmax(0,.8fr); gap: 12px; padding: 18px; border: 1px solid #e7e0f0; border-radius: 15px; background: #f6f2fb; }
.day-planner > div > strong { color: #59466f; font-size: 14px; }
.day-planner > div > small { font-size: 10px; }
.day-planner label { font-size: 10px; }
.day-planner input, .day-planner select { background: #fff; font-size: 11px; }
.day-planner > button { min-height: 42px; font-size: 11px; }
.day-planner > button:last-child { grid-column: 1 / -1; justify-self: start; }
.day-unscheduled, .day-outside { padding: 16px; margin-top: 16px; border: 1px solid #ece6f3; border-radius: 13px; background: #faf8fd; }
.day-unscheduled > strong, .day-outside > strong { font-size: 12px; color: #5c4b73; }
.day-warning, .dashboard-warning { border-radius: 11px; border: 1px solid #f3d8c8; color: #88462c; font-size: 11px; }

/* The due view remains a real horizontally pannable date timeline. */
body[data-view='due'] #board { padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.timeline-controls { margin-bottom: 15px; gap: 14px; }
.timeline-mode { border: 0; padding: 4px; border-radius: 12px; background: #f0edf6; }
.timeline-mode button { border-radius: 9px; min-height: 40px; }
.timeline-mode button[aria-pressed='true'] { background: var(--plum); color: #fff; box-shadow: 0 3px 7px #2e244915; }
.timeline-jump { gap: 7px; }
.timeline-jump button { min-height: 42px; border-radius: 10px; background: #fff; border-color: var(--line-strong); }
.timeline-jump input { min-height: 42px; border-radius: 10px; background: #faf9fd; }
.timeline-caption { color: #6d627d; font-size: 11px; }
.due-timeline { border: 1px solid #e8e0f2; border-radius: 18px; background: #f8f5fd; scrollbar-color: #bfaed7 #f2edf9; }
.timeline-track { padding-top: 16px; padding-bottom: 24px; }
.timeline-track::before { top: 88px; height: 2px; background: #d9cde8; }
.timeline-day { flex-basis: 252px; width: 252px; padding-inline: 13px; }
.timeline-date { color: #76638e; min-height: 65px; font-size: 15px; }
.timeline-date b { color: #6e508e; font-size: 9px; }
.timeline-node { border-color: #b9a1d2; background: #f8f5fd; }
.timeline-day.today .timeline-node { background: #7960bb; border-color: #7960bb; box-shadow: 0 0 0 6px #e8dff7; }
.timeline-day.today .timeline-date { color: #6e4e99; }
.timeline-day.past .timeline-date { color: #9e634c; }
.timeline-day.past .timeline-node { border-color: #cba18c; }
.timeline-task { padding: 15px; min-height: 82px; border: 1px solid #e5ddee; border-inline-start: 4px solid #a38acb; border-radius: 13px; box-shadow: 0 5px 12px #4a336b06; }
.timeline-task:hover { background: #fff; border-color: #a58abf; box-shadow: 0 7px 16px #4a336b12; transform: translateY(-2px); }
.timeline-day.today .timeline-task { border-inline-start-color: #7a60bc; background: #fff; }
.timeline-day.past .timeline-task { border-inline-start-color: #db9b7e; background: #fffaf6; }
.timeline-task strong { font-size: 12px; color: #3d314f; }
.timeline-task span { color: #786981; font-size: 10px; }
.timeline-empty { font-size: 10px; color: #897798; }
.undated-section { margin-top: 24px; padding: 21px; border: 1px solid #ece7df; border-radius: 17px; background: #fbf8f2; }
.undated-section .group-heading h3 { color: #706146; }
.undated-section > p { font-size: 11px; color: #7b705c; }
.undated-grid { gap: 12px; }
.undated-grid .timeline-task { border-inline-start-color: #ccb46d; border-color: #e9e0c7; }

/* A clear dashboard focal area, then quieter supporting reports. */
.dashboard-lead { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.95fr); align-items: center; gap: 28px; min-width: 0; padding: 30px; margin: 0 0 20px; background: #514573; border: 1px solid #5b4e7f; border-radius: 25px; box-shadow: 0 12px 28px #45365c10; overflow: hidden; isolation: isolate; color: white; }
.dashboard-lead::after { content: ''; position: absolute; width: 230px; height: 230px; inset-inline-start: -58px; bottom: -150px; border: 35px solid #ffffff08; border-radius: 50%; pointer-events: none; z-index: -1; }
.dashboard-lead-copy { min-width: 0; }
.dashboard-lead-copy .eyebrow { color: #e7dda3; font-size: 10px; font-weight: 700; margin-bottom: 9px; }
.dashboard-lead-copy h2, .dashboard-lead-copy h3 { margin: 0 0 10px; color: white; font-size: clamp(22px,2vw,29px); font-weight: 750; line-height: 1.7; }
.dashboard-lead-copy p:not(.eyebrow) { margin: 0; color: #e3dded; font-size: 11px; line-height: 2; max-width: 590px; }
.dashboard-lead-aside { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; min-width: 0; }
.dashboard-grid { grid-template-columns: repeat(3,minmax(0,1fr)); padding: 0; margin: 0 0 26px; gap: 16px; border: 0; }
.dashboard-metric { display: flex; flex-direction: column; min-width: 0; text-align: start; padding: 20px 23px; border: 1px solid #d8eade; border-radius: 19px; background: #e4f2e8; box-shadow: var(--shadow); transition: transform .17s, box-shadow .17s, border-color .17s; }
.dashboard-metric:first-child { padding-inline-start: 23px; border-inline-start: 1px solid #d8eade; }
.dashboard-metric:nth-child(2) { border-color: #e0d7f0; background: #eee7fc; }
.dashboard-metric:nth-child(3) { border-color: #efdfd3; background: #f9ebe0; }
.dashboard-metric > span { color: #4f6254; font-size: 11px; font-weight: 650; }
.dashboard-metric:nth-child(2) > span { color: #66537c; }
.dashboard-metric:nth-child(3) > span { color: #7d604b; }
.dashboard-metric strong { color: #2d5038; font-size: 36px; font-weight: 750; margin: 8px 0 1px; line-height: 1.45; }
.dashboard-metric:nth-child(2) strong { color: #614083; }
.dashboard-metric:nth-child(3) strong { color: #805538; }
.dashboard-metric small { color: #667269; font-size: 10px; line-height: 1.9; }
button.dashboard-metric:hover { transform: translateY(-3px); background: #d9eddf; border-color: #a9c9b1; box-shadow: var(--shadow-raised); }
button.dashboard-metric:nth-child(2):hover { background: #e6dcfa; border-color: #bda8db; }
button.dashboard-metric:nth-child(3):hover { background: #f5e2d3; border-color: #d5b699; }
button.dashboard-metric:hover strong { color: inherit; }
.dashboard-lead .dashboard-metric { border: 1px solid #ffffff26; background: #fff0c0; border-radius: 17px; padding: 18px; box-shadow: 0 5px 15px #24183a12; }
.dashboard-lead .dashboard-metric.late { background: #ffcfbd; border-color: #ffd8ca; }
.dashboard-lead .dashboard-metric > span { color: #65522b; font-size: 10px; }
.dashboard-lead .dashboard-metric strong { color: #5a4222; font-size: 34px; margin: 9px 0 1px; }
.dashboard-lead .dashboard-metric small { color: #7b6943; font-size: 9px; }
.dashboard-lead .dashboard-metric.late > span, .dashboard-lead .dashboard-metric.late strong { color: #7b3a2a; }
.dashboard-lead .dashboard-metric.late small { color: #885243; }
.dashboard-lead .dashboard-metric:hover { background: #ffedab; border-color: white; }
.dashboard-lead .dashboard-metric.late:hover { background: #ffc3ab; }
.dashboard-lead .dashboard-metric:focus-visible { outline-color: #fff; outline-offset: 4px; }
.dashboard-scope { max-width: none; margin: 0 0 21px; padding: 12px 16px; color: #6d637a; font-size: 10px; line-height: 1.95; background: #ece8f3; border-radius: 12px; }
.dashboard-charts { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-bottom: 25px; }
.dashboard-chart { position: relative; padding: 24px; background: #fff; border: 1px solid #e5deed; border-radius: 22px; box-shadow: var(--shadow); }
.dashboard-chart:nth-child(2) { background: #fffaf5; border-color: #efe5d8; }
.dashboard-chart:nth-child(3) { background: #f9f7ff; border-color: #e6def5; }
.dashboard-chart:nth-child(4) { background: #f6fbf8; border-color: #deece2; }
.dashboard-chart-head { padding-bottom: 4px; }
.dashboard-chart h3, .dashboard-chart h4 { font-size: 16px; margin-bottom: 5px; font-weight: 750; color: #3f344f; }
.dashboard-chart-head > small { margin-bottom: 13px; font-size: 10px; color: #80738d; }
.chart-bar { gap: 3px; border-radius: 12px; background: #ebe6f2; min-height: 50px; padding: 4px; margin: 14px 0; }
.chart-segment { --segment-color: #7a61bc; min-height: 42px; border-radius: 8px; padding: 0; border: 1px solid #ffffff10; }
.chart-segment:nth-child(2) { --segment-color: #4776ba; }
.chart-segment:nth-child(3) { --segment-color: #b48824; }
.chart-segment:nth-child(4) { --segment-color: #418b6b; }
.chart-segment:nth-child(5) { --segment-color: #ab698e; }
.chart-segment:nth-child(6) { --segment-color: #878098; }
.chart-segment:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 4px 10px #3a294c22; }
.chart-segment:focus-visible { z-index: 4; outline: 3px solid #3e2d60; outline-offset: 3px; }
.chart-segment[aria-pressed='true'] { box-shadow: inset 0 0 0 2px #fff,0 0 0 2px #4f3c73; }
.chart-legend { gap: 7px; align-items: stretch; }
.chart-legend button { align-items: center; min-height: 40px; padding: 6px 10px; gap: 6px; background: #f5f2f9; border: 1px solid #e9e3f1; border-radius: 10px; font-size: 10px; color: #675d74; }
.chart-legend button:hover { color: #43324e; background: #eae2f7; border-color: #cbbadd; }
.chart-legend button[aria-pressed='true'] { color: #4f3276; background: #e6dcf7; border-color: #a58bc6; box-shadow: inset 0 0 0 1px #bba3d3; }
.chart-legend strong { font-size: 11px; color: #463653; }
.chart-legend i, .chart-legend .chart-swatch { width: 8px; height: 8px; flex-basis: 8px; border-radius: 50%; }
.chart-legend button:nth-child(2) { --segment-color: #4776ba; }
.chart-legend button:nth-child(3) { --segment-color: #b48824; }
.chart-legend button:nth-child(4) { --segment-color: #418b6b; }
.chart-legend button:nth-child(5) { --segment-color: #ab698e; }
.chart-legend button:nth-child(6) { --segment-color: #878098; }
.chart-segment[data-dashboard-segment='todo'], .chart-legend button[data-dashboard-segment='todo'] { --segment-color: #7a61bc; }
.chart-segment[data-dashboard-segment='doing'], .chart-legend button[data-dashboard-segment='doing'] { --segment-color: #4475c1; }
.chart-segment[data-dashboard-segment='waiting'], .chart-legend button[data-dashboard-segment='waiting'] { --segment-color: #bd922d; }
.chart-segment[data-dashboard-segment='completed'], .chart-legend button[data-dashboard-segment='completed'] { --segment-color: #418b6b; }
.chart-segment[data-dashboard-segment='abandoned'], .chart-legend button[data-dashboard-segment='abandoned'] { --segment-color: #a16a85; }
.chart-segment[data-dashboard-segment='overdue'], .chart-legend button[data-dashboard-segment='overdue'] { --segment-color: #c46c4f; }
.chart-segment[data-dashboard-segment='today'], .chart-legend button[data-dashboard-segment='today'] { --segment-color: #b58a27; }
.chart-segment[data-dashboard-segment='upcoming'], .chart-legend button[data-dashboard-segment='upcoming'] { --segment-color: #7a61bc; }
.chart-segment[data-dashboard-segment='undated'], .chart-legend button[data-dashboard-segment='undated'] { --segment-color: #98909f; }
.chart-segment[data-dashboard-segment='vixilia'], .chart-legend button[data-dashboard-segment='vixilia'] { --segment-color: #479773; }
.chart-segment[data-dashboard-segment='marwan'], .chart-legend button[data-dashboard-segment='marwan'] { --segment-color: #6684cf; }
.chart-segment[data-dashboard-segment='crystal'], .chart-legend button[data-dashboard-segment='crystal'] { --segment-color: #aa7bca; }
.chart-segment[data-dashboard-segment='personal'], .chart-legend button[data-dashboard-segment='personal'] { --segment-color: #c9a243; }
.chart-segment[data-dashboard-segment='recorded'], .chart-legend button[data-dashboard-segment='recorded'] { --segment-color: #4d9576; }
.chart-segment[data-dashboard-segment='unknown'], .chart-legend button[data-dashboard-segment='unknown'] { --segment-color: #9a8cb3; }
.dashboard-chart > p.chart-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #e7e3ed; font-size: 10px; line-height: 1.95; }
.dashboard-panels { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.dashboard-panel { padding: 25px; border: 1px solid #e3ddeb; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.dashboard-panel:last-child { background: #fff7e4; border-color: #efe0b6; }
.dashboard-panel > .eyebrow { font-size: 9px; color: #80629b; }
.dashboard-panel h3 { font-size: 21px; margin: 6px 0 19px; font-weight: 750; }
.dashboard-time { gap: 13px; }
.dashboard-time > div { padding: 15px; background: #f3eef9; border: 1px solid #e8deef; border-radius: 13px; }
.dashboard-time span { font-size: 10px; color: #786889; }
.dashboard-time strong { color: #6b4a8c; font-size: 23px; }
.dashboard-time small { font-size: 9px; color: #81718e; }
.dashboard-upcoming { border: 0; gap: 8px; }
.dashboard-upcoming button { padding: 13px; gap: 10px; min-height: 57px; border: 1px solid #eee3c5; border-radius: 12px; background: #fffdf6; }
.dashboard-upcoming button:hover { border-color: #d9c17d; background: white; }
.dashboard-upcoming strong { font-size: 12px; }
.dashboard-upcoming span { color: #8b743b; font-size: 10px; }
.dashboard-muted { font-size: 12px; line-height: 1.9; }

/* Preferences are two recognizable, lightly tinted sections. */
.settings-layout { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; max-width: none; }
.settings-panel { padding: 26px; border: 1px solid #e3d9f1; border-radius: 23px; background: #f0ebfb; box-shadow: var(--shadow); }
.settings-panel:nth-child(2) { background: #edf6ef; border-color: #d7e8da; }
.settings-panel > .eyebrow { font-size: 9px; color: #795f99; }
.settings-panel h3 { font-size: 22px; font-weight: 750; margin: 6px 0 23px; }
.settings-panel > label { margin: 18px 0; font-size: 11px; color: #6a587b; }
.settings-panel select { padding: 11px 13px; background: #ffffffd9; border-color: #d9cde7; min-height: 48px; }
.setting-toggle { padding: 14px 0; border-bottom-color: #d6e5d8; }
.setting-toggle strong { font-size: 12px; color: #3b5942; }
.setting-toggle small { color: #647969; font-size: 10px; }
.setting-toggle input { border-radius: 5px; }
.settings-panel .form-note { font-size: 10px; color: #647268; }
.settings-footnote { padding: 15px 18px; background: #ece9f2; border-radius: 13px; color: #786d85; font-size: 10px; }
footer { padding: 30px 3px 5px; font-size: 10px; color: #8d839a; }

/* Native dialogs are elevated workspaces, never inserted into the page flow. */
dialog { width: 710px; max-width: calc(100vw - 40px); max-height: min(90dvh,940px); border: 1px solid #e6deef; border-radius: 25px; box-shadow: 0 30px 100px #24173645; }
dialog::backdrop { background: #28203688; backdrop-filter: blur(6px); }
.dialog-head { padding: 25px 29px 22px; border-bottom: 1px solid #e5deef; background: #f1ebfb; }
.dialog-head .eyebrow { color: #8667a8; font-size: 10px; }
.dialog-head h2 { color: #49345f; font-size: 25px; font-weight: 750; }
.dialog-head > button { border-radius: 12px; background: #ffffffb0; color: #7b668d; }
.dialog-head > button:hover { background: #fff; color: #443151; }
#taskForm, #recurrenceForm { max-height: min(90dvh,940px); }
.editor-body { padding: 26px 29px; background: #fff; }
.editor-body > label:first-child input { min-height: 53px; background: #faf7fe; border-color: #d8c8e8; border-radius: 12px; font-size: 16px; }
label { color: #72627e; font-size: 11px; gap: 7px; }
.form-grid { gap: 17px 16px; margin-block: 22px; }
.form-note { font-size: 10px; line-height: 1.95; color: #85748f; }
.dialog-actions { padding: 18px 29px 22px; border-color: #e8e0ee; background: #fbf9fd; }
#eventLog { border-color: #e7deef; background: #f8f5fc; border-radius: 12px; padding: 17px; margin-top: 24px; font-size: 10px; }
.execution-date-field { padding: 16px; border: 1px solid #cce4d8; border-radius: 12px; background: var(--brand-soft); }
#completion { width: 520px; padding: 30px; background: #fffdf6; border-color: #eddfb8; }
#completion h2 { color: #66502b; font-weight: 750; }
#completion .completion-choices label { border-color: #e2d6b6; border-radius: 11px; background: white; }
#completion .completion-choices label:has(input:checked) { border-color: #8c7941; background: #ffefb8; color: #695423; }
#completion .dialog-actions { background: transparent; }
.recurrence-badge { border-radius: 6px; padding: 1px 6px; font-size: 9px; color: #6c4b94; background: #f0e9fb; }
.editor-body.recurrence-fields { padding: 26px 29px; }
#weekdaysField { gap: 8px; border-color: #e4dcec; padding-top: 16px; }
#weekdaysField label { min-height: 40px; padding: 7px 10px; border: 1px solid #e6deef; border-radius: 9px; background: #faf7fd; font-size: 10px; }
#weekdaysField label:has(input:checked) { border-color: #ad95c8; color: #634387; background: #eee4f9; }
.recurrence-series-list { gap: 7px; border: 0; padding: 3px; }
.recurrence-series-list > button { border: 1px solid #e7dff0; border-radius: 11px; padding: 11px 12px; background: #f8f5fc; }
.recurrence-series-list > button > strong { font-size: 12px; }
.recurrence-series-list > button > span { font-size: 10px; }
.recurrence-series-list > button[aria-current='true'] { padding-inline-start: 12px; border: 1px solid #bfa8d5; background: #eee6fa; }
.recurrence-series-list > button:hover { background: #f0e9f9; }
.recurrence-actions { padding: 12px; border: 1px solid #e4dcec; border-radius: 13px; background: #f7f3fb; }
.recurrence-actions > button { border-radius: 10px; }
.access-box { max-width: 530px; padding: 35px; border: 1px solid #e5dcef; border-radius: 25px; box-shadow: var(--shadow-raised); }
.access-box .brand-mark { margin-bottom: 23px; }
#toast { padding: 14px 19px; background: #3a304d; color: white; border: 1px solid #675577; border-radius: 14px; box-shadow: 0 9px 30px #30203e25; }
#dashboardReport { width: 850px; max-width: calc(100vw - 40px); padding: 0; background: #f8f5fc; }
#dashboardReport[open] { display: flex; flex-direction: column; }
.dashboard-report-head { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 27px 29px 23px; background: #eee7fa; border-bottom: 1px solid #dfd1ed; }
.dashboard-report-head .eyebrow { font-size: 10px; color: #805aa1; }
.dashboard-report-head h2, .dashboard-report-head h3 { margin: 5px 0 7px; color: #4b3264; font-size: 25px; font-weight: 750; line-height: 1.65; }
.dashboard-report-head p { margin: 0; color: #7b658d; font-size: 11px; line-height: 1.9; }
.report-close { display: grid; place-items: center; flex: 0 0 auto; min-width: 42px; min-height: 42px; padding: 3px; border-radius: 13px; background: #ffffffb0; color: #745889; font-size: 27px; line-height: 1; }
.report-close:hover { color: #3d2553; background: white; }
.dashboard-report-count { flex: 0 0 auto; margin: 0; padding: 17px 29px; color: #7b6b87; font-size: 11px; line-height: 1.9; }
.dashboard-report-list { padding: 0 29px 29px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.dashboard-report-list .cards { gap: 13px; }
.dashboard-report-list .task-card { box-shadow: 0 4px 10px #40294f05; }
.dashboard-report-list .empty-board { background: #fff; }

/* At laptop widths the navigation stays concise and cards keep room to breathe. */
@media (min-width: 901px) and (max-width: 1250px) {
  .app-shell { grid-template-columns: 202px minmax(0,1fr); }
  .sidebar { width: 183px; margin-inline: 12px 7px; padding: 23px 12px 13px; }
  .brand { gap: 9px; padding-inline: 4px; }
  .brand strong { font-size: 12px; }
  .brand small { font-size: 8px; }
  .brand-mark { width: 35px; height: 35px; flex-basis: 35px; border-radius: 12px; font-size: 22px; }
  .desktop-nav { flex-basis: auto; }
  .desktop-nav button { font-size: 11px; padding-inline: 10px; }
  .connection { max-width: none; border: 1px solid #ffffff0d; padding: 10px; }
  .main-content { padding: 31px 25px 22px 22px; grid-template-columns: minmax(0,1fr); }
  .workstage:has(> #overview:not([hidden])) { grid-template-columns: minmax(0,1fr) 250px; gap: 18px; }
  .overview { padding: 0; }
  .capacity, .appointments, .focus { padding: 19px 17px; }
  .capacity-main h2 { font-size: 26px; }
  .task-card { grid-template-columns: minmax(0,1fr); grid-template-areas: 'top' 'title' 'meta' 'actions'; gap: 6px; padding: 15px; }
  .task-actions { justify-content: flex-start; max-width: none; margin-top: 3px; }
  .status-control { margin-inline-end: auto; }
  .task-actions .text-action { order: 0; }
  .status-control select { max-width: 145px; }
  .task-group { padding: 16px; }
  .day-timeline { padding: 19px; }
  .dashboard-lead { grid-template-columns: minmax(0,1fr) minmax(275px,1fr); padding: 25px; gap: 20px; }
  .dashboard-lead .dashboard-metric { padding: 15px; }
  .dashboard-grid { gap: 13px; }
  .dashboard-metric, .dashboard-metric:first-child { padding: 18px; }
  .dashboard-chart, .dashboard-panel { padding: 21px; }
  .dashboard-time { grid-template-columns: minmax(0,1fr); }
}
@media (min-width: 901px) and (max-width: 1060px) {
  .sidebar { flex-wrap: nowrap; gap: 0; }
  .brand { flex: 0 0 auto; }
  .desktop-nav { order: 0; flex-basis: auto; }
  .workstage:has(> #overview:not([hidden])) { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .workstage > .overview { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .workstage > .collection { grid-column: 1; grid-row: 1; }
  .overview .capacity { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 23px; }
  .overview .capacity .bar, .overview .capacity .availability { grid-column: 1 / -1; }
  .overview .capacity .time-metrics { border: 0; padding-top: 0; }
  .overview .focus { align-content: start; }
  .overview .focus > .secondary { margin-inline-start: 0; }
  .dashboard-lead { grid-template-columns: minmax(0,1fr); }
  .dashboard-lead-copy p:not(.eyebrow) { max-width: 100%; }
  .dashboard-lead-aside { max-width: 100%; }
  .archive-grid { grid-template-columns: minmax(0,1fr); }
  .settings-panel { padding: 21px; }
}

/* Mobile is a lightweight agenda, with a floating, reachable navigation dock. */
@media (max-width: 900px) {
  .app-shell { display: block; }
  .sidebar { display: none; }
  .main-content { display: flex; flex-direction: column; max-width: 780px; padding: 0 23px calc(112px + env(safe-area-inset-bottom)); margin-inline: auto; }
  .mobile-brand { display: flex; align-items: center; gap: 10px; padding: 17px 1px 14px; border: 0; margin: 0; width: 100%; background: transparent; }
  .mobile-brand .brand-mark { width: 34px; height: 34px; flex-basis: 34px; border-radius: 12px; font-size: 22px; }
  .mobile-brand strong { font-size: 12px; }
  .mobile-private { padding: 5px 9px; border-radius: 8px; font-size: 9px; background: #ebe7f2; color: #7a6b8a; }
  .page-header { margin: 15px 0 20px; gap: 18px; align-items: center; }
  .page-header .eyebrow { font-size: 9px; }
  .page-header h1 { margin: 0; font-size: 31px; line-height: 1.55; }
  .header-description { font-size: 11px; margin-top: 5px; }
  .page-header > .header-actions { flex-wrap: wrap; justify-content: flex-end; max-width: 190px; gap: 7px; }
  .header-actions > .secondary, .header-actions > .add-button { min-height: 43px; border-radius: 11px; font-size: 11px; padding: 8px 12px; margin: 0; }
  .date-ribbon { gap: 7px; margin-bottom: 19px; }
  .date-ribbon button { display: flex; flex-direction: column; gap: 0; min-height: 88px; border-radius: 15px; padding: 10px 3px; }
  .date-ribbon button > span, .date-ribbon button > small { align-self: auto; }
  .date-ribbon button > strong { font-size: 25px; }
  .date-ribbon button > span { font-size: 10px; }
  .date-ribbon button > small { font-size: 9px; }
  .workspace-toolbar { margin-bottom: 12px; padding: 6px; border-radius: 16px; }
  .search-wrap input { border-radius: 10px; font-size: 11px; }
  .date-wrap { border-radius: 10px; padding-inline: 5px; }
  .date-wrap input { width: 130px; font-size: 11px; }
  .mobile-areas { display: flex; width: calc(100% + 46px); margin-inline: -23px; margin-bottom: 22px; padding-inline: 23px; gap: 7px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .mobile-areas button { flex: 0 0 auto; min-height: 38px; padding: 6px 11px; border: 1px solid #e2dbe9; border-radius: 10px; background: #fcfbfe; font-size: 11px; color: #7a6c88; }
  .mobile-areas button.selected { background: #e6deef; border-color: #c5b4d8; color: #5e4078; font-weight: 750; }
  .mobile-areas button::before { width: 6px; height: 6px; flex-basis: 6px; }
  .workstage, .workstage:has(> #overview:not([hidden])) { display: flex; flex-direction: column; gap: 22px; }
  .overview { display: grid; grid-template-columns: minmax(0,1fr); padding: 0; border: 0; gap: 15px; }
  .capacity { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 23px; gap: 16px 24px; }
  .capacity-main h2 { font-size: 27px; margin-top: 6px; }
  .capacity-main > p:not(.eyebrow) { font-size: 11px; }
  .time-metrics { padding-top: 0; border: 0; align-self: start; }
  .time-metrics strong { font-size: 24px; }
  .time-metrics span, .time-metrics small { font-size: 10px; }
  .bar, .availability { grid-column: 1 / -1; }
  .availability summary { font-size: 12px; }
  .window-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .appointments { padding: 21px 23px; }
  .appointment-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .appointment-list button { align-items: center; }
  .focus { padding: 20px 23px; align-items: center; gap: 10px; }
  .focus-copy strong { font-size: 14px; }
  .focus-copy small { font-size: 10px; }
  .focus > .secondary { margin-inline-start: 0; }
  .collection-heading { margin: 0 0 17px; }
  .collection-heading h2 { font-size: 21px; }
  .list-count { font-size: 10px; }
  .task-card { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: 'top actions' 'title actions' 'meta actions'; padding: 17px; gap: 5px 14px; }
  .task-card h3 { font-size: 15px; }
  .task-meta { font-size: 10px; }
  .task-actions { max-width: 174px; }
  .status-control select { font-size: 11px; min-height: 44px; max-width: 122px; }
  .focus-action { min-height: 44px; }
  .text-action { min-height: 44px; }
  .archive-card { grid-template-columns: minmax(0,1fr); grid-template-areas: 'top' 'title' 'meta' 'actions'; }
  .mobile-nav { display: flex; position: fixed; bottom: calc(12px + env(safe-area-inset-bottom)); inset-inline: 15px; z-index: 20; width: auto; max-width: 680px; margin-inline: auto; padding: 6px; gap: 4px; border: 1px solid #e1d9e9; border-radius: 20px; background: #ffffffed; backdrop-filter: blur(16px); box-shadow: 0 8px 32px #392a4f20; }
  .mobile-nav button { display: flex; align-items: center; justify-content: center; flex: 1 1 20%; min-height: 51px; padding: 9px 3px; border-radius: 13px; font-size: 11px; line-height: 1.5; color: #7a6c88; }
  .mobile-nav button::before { display: none; }
  .mobile-nav button.selected { color: #4d335e; background: #eee5f7; font-weight: 750; }
  .mobile-nav button:hover { background: #f4eef9; }
  .more-menu { bottom: calc(88px + env(safe-area-inset-bottom)); inset-inline: 16px; border-radius: 17px; border-color: #d9cde6; padding: 8px; box-shadow: 0 12px 35px #33204422; }
  .more-menu button { min-height: 48px; border-radius: 11px; }
  .day-timeline { padding: 22px; }
  .day-timeline-head h3 { font-size: 19px; }
  .day-timeline-head p { font-size: 10px; }
  .day-planner { grid-template-columns: minmax(0,1fr) minmax(0,.8fr); }
  .dashboard-lead { grid-template-columns: minmax(0,1fr) minmax(270px,.9fr); gap: 22px; padding: 25px; border-radius: 23px; }
  .dashboard-lead-copy h2, .dashboard-lead-copy h3 { font-size: 23px; }
  .dashboard-lead .dashboard-metric { padding: 16px; }
  .dashboard-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; padding: 0; margin-bottom: 22px; }
  .dashboard-metric, .dashboard-metric:first-child, .dashboard-metric:nth-child(4), .dashboard-metric:nth-child(odd) { border-inline-start: 1px solid #d8eade; padding: 18px; }
  .dashboard-metric:nth-child(2) { border-color: #e0d7f0; }
  .dashboard-metric:nth-child(3) { border-color: #efdfd3; }
  .dashboard-metric strong { font-size: 34px; }
  .dashboard-charts { gap: 17px; margin-bottom: 22px; }
  .dashboard-chart { padding: 22px; }
  .dashboard-panels { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .dashboard-time { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .settings-layout { gap: 18px; }
  .settings-panel { padding: 23px; }
  .settings-panel h3 { font-size: 21px; }
  #toast { bottom: calc(93px + env(safe-area-inset-bottom)); border-radius: 13px; }
}
@media (max-width: 650px) {
  .dashboard-lead { grid-template-columns: minmax(0,1fr); }
  .dashboard-lead-aside { gap: 11px; }
  .dashboard-charts { grid-template-columns: minmax(0,1fr); }
  .dashboard-chart { padding: 23px; }
  .settings-layout { grid-template-columns: minmax(0,1fr); }
  .settings-footnote { grid-column: 1; }
  .archive-grid { grid-template-columns: minmax(0,1fr); }
  .day-planner { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width: 580px) {
  .main-content { padding-inline: 17px; padding-bottom: calc(106px + env(safe-area-inset-bottom)); }
  .mobile-brand { margin-inline: 0; width: 100%; padding-inline: 1px; }
  .mobile-brand .brand-mark { width: 32px; height: 32px; flex-basis: 32px; font-size: 20px; }
  .mobile-brand strong { font-size: 11px; }
  .mobile-private { font-size: 8px; padding-inline: 7px; }
  .page-header { align-items: flex-start; gap: 12px; margin: 14px 0 21px; }
  .page-header h1 { font-size: 29px; }
  .page-header .eyebrow { font-size: 9px; }
  .header-description { font-size: 10px; line-height: 1.95; }
  .page-header > .header-actions { gap: 6px; max-width: 143px; }
  .header-actions > .secondary, .header-actions > .add-button { min-height: 41px; font-size: 10px; padding: 7px 10px; border-radius: 10px; }
  .add-button .add-icon { width: 14px; height: 14px; }
  .date-ribbon { gap: 5px; margin-bottom: 18px; }
  .date-ribbon button { min-height: 78px; border-radius: 12px; padding: 8px 1px; }
  .date-ribbon button > span { font-size: 8px; }
  .date-ribbon button > strong { font-size: 22px; }
  .date-ribbon button > small { font-size: 7px; }
  .date-ribbon button > em { inset-inline-end: 2px; padding-inline: 4px; font-size: 7px; }
  .workspace-toolbar { gap: 6px; padding: 5px; margin-bottom: 12px; border-radius: 14px; }
  .search-wrap input { padding-inline-start: 31px; padding-inline-end: 7px; height: 43px; font-size: 10px; }
  .search-icon { inset-inline-start: 10px; width: 14px; height: 14px; }
  .date-wrap { padding-inline: 3px; }
  .date-wrap input { width: 116px; font-size: 10px; padding-inline: 3px; min-height: 43px; }
  .mobile-areas { width: calc(100% + 34px); margin-inline: -17px; padding-inline: 17px; margin-bottom: 20px; gap: 6px; }
  .mobile-areas button { min-height: 37px; font-size: 10px; padding-inline: 10px; }
  .overview { gap: 14px; padding: 0; }
  .overview > section { border-radius: 19px; }
  .capacity { grid-template-columns: minmax(0,1fr); gap: 16px; padding: 21px; }
  .capacity-main h2 { font-size: 28px; }
  .capacity-main > p:not(.eyebrow) { font-size: 11px; }
  .capacity-main .eyebrow { font-size: 10px; }
  .capacity-calendar-note { font-size: 9px; max-width: 390px; }
  .time-metrics { padding-top: 14px; border-top: 1px solid #bedfce; gap: 18px; }
  .time-metrics strong { font-size: 25px; }
  .time-metrics span, .time-metrics small { font-size: 10px; }
  .window-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .window-row input { font-size: 16px; }
  .availability summary { min-height: 42px; font-size: 11px; }
  .appointments { padding: 20px; }
  .appointment-list { grid-template-columns: minmax(0,1fr); }
  .appointment-list b { font-size: 14px; }
  .appointment-list button span { font-size: 12px; }
  .focus { padding: 20px; }
  .focus-copy strong { font-size: 13px; }
  .focus-copy small { font-size: 10px; }
  .focus > .secondary { margin-inline-start: 44px; }
  .focus #clearFocus { margin-inline-start: auto; }
  .collection-heading { margin-bottom: 15px; gap: 9px; }
  .collection-heading h2 { font-size: 20px; }
  .collection-heading .eyebrow { font-size: 8px; }
  .list-count { padding: 4px 8px; border-radius: 8px; font-size: 9px; }
  .task-group { border-radius: 19px; padding: 15px; margin-bottom: 17px; }
  .group-heading { padding-bottom: 12px; }
  .group-heading h3 { font-size: 12px; }
  .task-card { grid-template-columns: minmax(0,1fr); grid-template-areas: 'top' 'title' 'meta' 'actions'; border-radius: 13px; padding: 15px; gap: 7px; }
  .task-card h3 { font-size: 15px; line-height: 1.9; }
  .task-meta { font-size: 10px; gap: 4px 10px; }
  .area-tag { font-size: 9px; }
  .task-actions { margin-top: 4px; justify-content: flex-start; max-width: none; gap: 5px; }
  .status-control { margin-inline-end: auto; }
  .status-control select { min-height: 44px; max-width: 145px; font-size: 11px; }
  .task-actions .text-action { order: 0; min-height: 44px; padding-inline: 9px; font-size: 11px; }
  .focus-action { width: 38px; min-height: 44px; }
  .archive-card { padding: 20px; }
  .archive-card .task-actions .text-action { padding-inline: 10px; font-size: 10px; }
  :root[data-density='compact'] .task-card { padding: 12px; min-height: 0; }
  :root[data-density='compact'] .task-group { padding: 13px; }
  .list-filters { padding: 12px; border-radius: 16px; }
  .filter-segment button { min-height: 40px; font-size: 10px; padding-inline: 7px; }
  .range-controls { gap: 6px; font-size: 10px; }
  .range-controls input { min-width: 90px; font-size: 10px; padding-inline: 5px; }
  .range-controls button { flex-basis: 100%; font-size: 10px; }
  .day-timeline { padding: 17px; border-radius: 21px; margin-bottom: 20px; }
  .day-timeline-head h3 { font-size: 17px; }
  .day-timeline-head p { font-size: 9px; }
  .day-timeline-head button { min-height: 40px; font-size: 9px; }
  .day-hours { max-height: 430px; border-radius: 12px; --clock-gutter: 49px; --end-gutter: 8px; --lane-gap: 4px; }
  .day-hour > span:first-child { min-width: 43px; padding-inline-end: 5px; font-size: 9px; }
  .day-block { padding-inline: 7px; }
  .day-block > .day-block-label, .day-point > .day-block-label { font-size: 10px; }
  .day-block > .day-block-shape { border-radius: 7px; border-inline-start-width: 3px; }
  .day-point { padding-inline: 6px; gap: 5px; }
  .day-chronology > button { gap: 4px 8px; padding: 10px; font-size: 10px; }
  .day-chronology > button > bdi { font-size: 10px; }
  .day-chronology > button > small { font-size: 9px; margin-inline-start: 40px; }
  .day-planner { padding: 15px; gap: 12px 9px; border-radius: 13px; }
  .day-planner > div > strong { font-size: 13px; }
  .day-planner > div > small { font-size: 9px; }
  .day-planner input, .day-planner select { font-size: 16px; padding-inline: 8px; }
  .day-planner > button { grid-column: auto; min-height: 44px; font-size: 10px; padding-inline: 7px; }
  .day-planner > button:last-child { grid-column: 1 / -1; }
  .day-unscheduled, .day-outside { padding: 14px; border-radius: 11px; }
  .day-unscheduled > p, .day-outside > p { font-size: 10px; }
  body[data-view='due'] #board { padding: 17px; border-radius: 21px; }
  .timeline-controls { gap: 12px; }
  .timeline-mode { width: 100%; }
  .timeline-mode button { min-height: 42px; font-size: 10px; }
  .timeline-jump { gap: 6px; }
  .timeline-jump button { font-size: 9px; border-radius: 9px; min-height: 42px; }
  .timeline-jump input { width: 100%; grid-column: 1 / -1; font-size: 12px; }
  .timeline-caption { font-size: 10px; margin-bottom: 15px; }
  .due-timeline { border-radius: 14px; }
  .timeline-day { flex-basis: 242px; width: 242px; padding-inline: 11px; }
  .timeline-task { padding: 14px; border-radius: 12px; }
  .timeline-task strong { font-size: 12px; }
  .timeline-task span { font-size: 10px; }
  .undated-section { padding: 16px; margin-top: 19px; }
  .undated-grid { grid-template-columns: minmax(0,1fr); }
  .dashboard-lead { padding: 22px; gap: 20px; border-radius: 21px; margin-bottom: 15px; }
  .dashboard-lead-copy .eyebrow { font-size: 9px; margin-bottom: 8px; }
  .dashboard-lead-copy h2, .dashboard-lead-copy h3 { font-size: 24px; margin-bottom: 9px; }
  .dashboard-lead-copy p:not(.eyebrow) { font-size: 10px; }
  .dashboard-lead-aside { gap: 10px; }
  .dashboard-lead .dashboard-metric { border-radius: 14px; padding: 15px 12px; }
  .dashboard-lead .dashboard-metric > span { font-size: 9px; }
  .dashboard-lead .dashboard-metric strong { font-size: 32px; }
  .dashboard-lead .dashboard-metric small { font-size: 8px; }
  .dashboard-grid { gap: 9px; margin-bottom: 19px; }
  .dashboard-metric, .dashboard-metric:first-child, .dashboard-metric:nth-child(odd), .dashboard-metric:nth-child(4) { padding: 16px 11px; border-radius: 14px; }
  .dashboard-metric > span { font-size: 9px; }
  .dashboard-metric strong { font-size: 29px; }
  .dashboard-metric small { font-size: 8px; line-height: 1.8; }
  .dashboard-scope { font-size: 9px; padding: 12px 14px; line-height: 2; margin-bottom: 18px; }
  .dashboard-charts { gap: 15px; }
  .dashboard-chart { padding: 21px; border-radius: 20px; }
  .dashboard-chart h3 { font-size: 16px; }
  .dashboard-chart-head > small { font-size: 9px; }
  .chart-bar { margin-block: 14px; min-height: 50px; }
  .chart-legend { gap: 7px; }
  .chart-legend button { min-height: 42px; font-size: 10px; padding: 7px 9px; }
  .chart-legend strong { font-size: 11px; }
  .dashboard-panel { padding: 22px; border-radius: 20px; }
  .dashboard-panel h3 { font-size: 20px; margin-bottom: 17px; }
  .dashboard-time { gap: 10px; }
  .dashboard-time > div { padding: 13px; border-radius: 12px; }
  .dashboard-time strong { font-size: 21px; }
  .dashboard-time span, .dashboard-time small { font-size: 9px; }
  .dashboard-upcoming button { gap: 5px; }
  .dashboard-upcoming strong { font-size: 11px; }
  .dashboard-upcoming span { font-size: 9px; }
  .settings-panel { padding: 23px; border-radius: 21px; }
  .settings-panel h3 { font-size: 22px; }
  .settings-panel select { font-size: 16px; }
  .setting-toggle strong { font-size: 12px; }
  .setting-toggle small { font-size: 10px; }
  .settings-panel .form-grid input { font-size: 16px; }
  .settings-footnote { padding: 15px; font-size: 9px; line-height: 2; }
  .mobile-nav { inset-inline: 11px; bottom: calc(9px + env(safe-area-inset-bottom)); border-radius: 18px; padding: 5px; gap: 2px; }
  .mobile-nav button { min-height: 49px; font-size: 10px; border-radius: 12px; }
  .more-menu { bottom: calc(82px + env(safe-area-inset-bottom)); }
  dialog { max-width: calc(100vw - 22px); border-radius: 21px; }
  #taskForm, #recurrenceForm { max-height: calc(100dvh - 26px); }
  .dialog-head { padding: 23px 21px 20px; }
  .dialog-head h2 { font-size: 23px; }
  .dialog-head > button { min-height: 40px; min-width: 40px; }
  .editor-body, .editor-body.recurrence-fields { padding: 22px 21px; }
  .form-grid { gap: 16px 12px; }
  .form-grid label { font-size: 10px; }
  .form-grid input, .form-grid select, .editor-body input, .editor-body textarea, .recurrence-fields input:not([type='checkbox']):not([type='radio']), .recurrence-fields select { font-size: 16px; }
  .dialog-actions { padding: 17px 21px 21px; }
  .dialog-actions .primary, .dialog-actions .secondary { min-height: 44px; font-size: 11px; }
  #completion { padding: 27px 23px; }
  #completion .completion-choices label { font-size: 11px; }
  #dashboardReport { position: fixed; inset: 0; margin: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .dashboard-report-head { padding: calc(24px + env(safe-area-inset-top)) 23px 22px; gap: 14px; }
  .dashboard-report-head h2, .dashboard-report-head h3 { font-size: 23px; }
  .dashboard-report-head p { font-size: 10px; }
  .dashboard-report-count { padding: 17px 23px; font-size: 10px; }
  .dashboard-report-list { padding: 0 18px calc(24px + env(safe-area-inset-bottom)); }
  .dashboard-report-list .task-card { padding: 19px; }
  .dashboard-report-list .task-actions { margin-top: 5px; }
  .report-close { min-height: 44px; min-width: 44px; font-size: 28px; }
}
@media (max-width: 360px) {
  .main-content { padding-inline: 13px; }
  .mobile-areas { width: calc(100% + 26px); margin-inline: -13px; padding-inline: 13px; }
  .page-header h1 { font-size: 26px; }
  .page-header > .header-actions { max-width: 125px; }
  .header-actions > .add-button, .header-actions > .secondary { font-size: 9px; padding-inline: 8px; }
  .mobile-private { font-size: 7px; }
  .date-wrap input { width: 105px; font-size: 9px; }
  .date-ribbon { gap: 4px; }
  .date-ribbon button > strong { font-size: 20px; }
  .date-ribbon button > small { font-size: 6px; }
  .dashboard-lead { padding: 19px; }
  .dashboard-lead .dashboard-metric { padding: 13px 10px; }
  .dashboard-grid { gap: 7px; }
  .dashboard-metric, .dashboard-metric:first-child, .dashboard-metric:nth-child(odd), .dashboard-metric:nth-child(4) { padding: 14px 9px; }
  .dashboard-metric > span { font-size: 8px; }
  .dashboard-metric strong { font-size: 27px; }
  .day-timeline { padding: 14px; }
  .day-planner { grid-template-columns: minmax(0,1fr); }
  .day-planner > button, .day-planner > button:last-child { grid-column: 1; }
  .recurrence-fields { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media print {
  .app-shell { display: block; }
  .main-content { display: block; padding: 0; }
  .sidebar, .mobile-brand, .mobile-nav, .mobile-areas, .workspace-toolbar, footer { display: none !important; }
  .workstage, .workstage:has(> #overview:not([hidden])) { display: block; }
  .overview { display: block; }
  .task-card, .dashboard-chart, .dashboard-panel, .task-group, .overview > section { box-shadow: none; break-inside: avoid; }
}

/* Final hierarchy and legibility pass. Labels remain readable, not decorative. */
:root { --brand: #7252be; --brand-deep: #573995; --brand-soft: #eee7fb; }
:root[data-accent='sage'] { --brand: #087b65; --brand-deep: #075d4d; --brand-soft: #e0f2eb; }
:root[data-accent='blue'] { --brand: #3d62c7; --brand-deep: #294b9f; --brand-soft: #e8eefe; }
:root[data-accent='clay'] { --brand: #aa5136; --brand-deep: #873d27; --brand-soft: #fae9df; }
.sidebar { min-height: 0; }
.header-description, .task-meta, .area-tag, .sync-state, .list-count,
.capacity-main > p:not(.eyebrow), .capacity-calendar-note,
.time-metrics span, .time-metrics small, .availability p, .availability summary span,
.focus-copy small, .appointment-list button span, .appointment-heading > span,
.timeline-caption, .timeline-task span, .timeline-empty, .undated-section > p,
.dashboard-scope, .dashboard-metric > span, .dashboard-metric small,
.dashboard-lead-copy p:not(.eyebrow), .dashboard-lead .dashboard-metric > span,
.dashboard-lead .dashboard-metric small, .dashboard-chart-head > small,
.chart-legend button, .chart-legend strong, .dashboard-chart > p.chart-note,
.dashboard-time span, .dashboard-time small, .dashboard-upcoming span,
.dashboard-report-head p, .dashboard-report-count, .setting-toggle small,
.settings-panel .form-note, .settings-footnote, .filter-note,
.day-timeline-head p, .day-planner > div > small, .day-unscheduled > p,
.day-outside > p, .day-chronology > button > small,
.form-note, .execution-date-field small, .recurrence-series-list > button > span { font-size: 12px; }
.dashboard-lead .text-action { margin-top: 15px; color: #fff5c8; padding-inline: 13px; background: #ffffff0d; border: 1px solid #ffffff26; border-radius: 10px; }
.dashboard-lead .text-action:hover { color: #fff; background: #ffffff20; border-color: #ffffff60; }
.dashboard-lead .text-action:focus-visible { outline-color: #ffedac; }
.dashboard-lead-aside { align-self: stretch; align-items: stretch; }
.dashboard-lead .dashboard-metric { justify-content: center; }
.dashboard-charts { grid-template-columns: repeat(6,minmax(0,1fr)); }
.dashboard-chart { grid-column: span 3; }
.dashboard-chart:first-child { grid-column: span 4; background: #ede7fb; border-color: #d9cbea; }
.dashboard-chart:nth-child(2) { grid-column: span 2; }
.dashboard-chart:first-child h3 { font-size: 20px; }
.dashboard-chart:first-child .chart-bar { min-height: 64px; padding: 5px; gap: 4px; margin-block: 20px; border-radius: 14px; background: #ded3ee; }
.dashboard-chart:first-child .chart-segment { min-height: 54px; border-radius: 10px; }
.dashboard-chart:first-child .chart-legend button { background: #ffffffa8; border-color: #dcd0eb; }
.chart-segment[data-dashboard-segment='both'], .chart-legend button[data-dashboard-segment='both'] { --segment-color: #7050ad; }
.chart-segment[data-dashboard-segment='planned_only'], .chart-legend button[data-dashboard-segment='planned_only'] { --segment-color: #5685c6; }
.chart-segment[data-dashboard-segment='due_only'], .chart-legend button[data-dashboard-segment='due_only'] { --segment-color: #c28d38; }
.chart-segment[data-dashboard-segment='neither'], .chart-legend button[data-dashboard-segment='neither'] { --segment-color: #9387a5; }
.dashboard-report-list { display: grid; grid-template-columns: minmax(0,1fr); gap: 13px; align-content: start; }
.dashboard-report-list .task-card { flex: 0 0 auto; }
@media (min-width: 901px) and (max-width: 1250px) {
  .dashboard-chart:first-child { grid-column: 1 / -1; }
  .dashboard-chart:nth-child(2) { grid-column: span 3; }
  .dashboard-chart:last-child { grid-column: 1 / -1; }
  .capacity-calendar-note { font-size: 11px; }
}
@media (max-width: 900px) {
  .dashboard-charts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-chart, .dashboard-chart:nth-child(2) { grid-column: span 1; }
  .dashboard-chart:first-child, .dashboard-chart:last-child { grid-column: 1 / -1; }
  .overview .capacity { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .capacity-calendar-note { font-size: 11px; }
}
@media (max-width: 650px) {
  .dashboard-charts { grid-template-columns: minmax(0,1fr); }
  .dashboard-chart, .dashboard-chart:first-child, .dashboard-chart:nth-child(2), .dashboard-chart:last-child { grid-column: 1; }
  .dashboard-chart:first-child h3 { font-size: 19px; }
}
@media (max-width: 580px) {
  .header-description { font-size: 11px; }
  .dashboard-lead-copy p:not(.eyebrow), .dashboard-scope { font-size: 12px; }
  .dashboard-lead .dashboard-metric > span { font-size: 12px; }
  .dashboard-lead .dashboard-metric small { font-size: 11px; }
  .dashboard-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dashboard-grid .dashboard-metric > span { font-size: 11px; }
  .dashboard-grid .dashboard-metric small { font-size: 11px; }
  .dashboard-metric, .dashboard-metric:first-child, .dashboard-metric:nth-child(odd) { padding-inline: 11px; }
  .task-meta { font-size: 12px; }
  .task-card .area-tag { font-size: 11px; }
  .capacity-main > p:not(.eyebrow), .time-metrics span, .time-metrics small,
  .focus-copy small, .availability p, .availability summary span { font-size: 12px; }
  .overview .capacity { grid-template-columns: minmax(0,1fr); }
  .day-timeline-head p, .day-planner > div > small { font-size: 11px; }
  .day-chronology > button > small { font-size: 11px; }
  .day-block > .day-block-label, .day-point > .day-block-label { font-size: 11px; }
  .dashboard-time { grid-template-columns: minmax(0,1fr); }
  .dashboard-time span, .dashboard-time small { font-size: 12px; }
  .dashboard-chart-head > small, .chart-legend button, .chart-legend strong,
  .dashboard-chart > p.chart-note, .dashboard-upcoming span { font-size: 12px; }
  .timeline-task span, .timeline-caption, .undated-section > p { font-size: 12px; }
  .dashboard-report-count, .dashboard-report-head p { font-size: 12px; }
}

/* Small-screen type must remain content, not microprint. */
body .brand small, body .connection, body .connection small,
body .nav-section-label, body .area-nav button, body .mobile-private,
body .eyebrow, body .collection-heading .eyebrow,
body .appointment-heading .eyebrow, body .dashboard-lead-copy .eyebrow,
body .dashboard-panel > .eyebrow, body .settings-panel > .eyebrow,
body .dialog-head .eyebrow, body .dashboard-report-head .eyebrow,
body .day-timeline-head .eyebrow, body .group-count,
body .recurrence-badge, body .status-pill { font-size: 11px; }
body .desktop-nav button, body .mobile-nav button, body .mobile-areas button,
body .status-control select, body .task-actions .text-action, body .text-action,
body .header-actions > .secondary, body .header-actions > .add-button,
body .timeline-jump button, body .timeline-mode button,
body .filter-segment button, body .range-controls, body .range-controls input,
body .range-controls button, body .settings-panel > label, body label,
body .form-grid label, body .recurrence-fields label,
body .day-planner label, body .day-planner > button { font-size: 12px; }
body .dashboard-lead .dashboard-metric > span,
body .dashboard-lead .dashboard-metric small,
body .dashboard-grid .dashboard-metric > span,
body .dashboard-grid .dashboard-metric small,
body .capacity-calendar-note, body .header-description,
body .form-note, body .settings-footnote, body .settings-panel .form-note,
body .day-timeline-head p, body .day-planner > div > small,
body .day-chronology > button > small, body .day-unscheduled > p,
body .day-outside > p { font-size: 12px; }
body .date-ribbon button > span, body .date-ribbon button > small { font-size: 11px; }
body .date-ribbon button > em { font-size: 10px; }
body .day-hour > span:first-child, body .day-hour > small { font-size: 11px; }
body .day-timeline-head button, body .day-chronology > button > bdi { font-size: 12px; }
body #weekdaysField label, body .recurrence-series-list > button > span,
body .recurrence-series-heading > button { font-size: 12px; }
body .search-wrap input, body .date-wrap input { font-size: 12px; }
@media (max-width: 580px) {
  .page-header > .header-actions { max-width: 146px; }
  body .header-actions > .add-button, body .header-actions > .secondary { font-size: 11px; }
  .mobile-brand { gap: 8px; }
  body .mobile-private { font-size: 10px; }
  .date-ribbon button { min-height: 92px; }
  .overview { gap: 11px; }
  .capacity { padding: 18px; gap: 13px; }
  .appointments, .focus { padding: 17px 18px; }
  .capacity-main h2 { font-size: 26px; margin-block: 5px; }
  .capacity-main > p:not(.eyebrow) { margin-bottom: 0; }
  .time-metrics { padding-top: 11px; gap: 12px; }
  .time-metrics strong { font-size: 23px; }
  .focus-icon { width: 31px; height: 31px; flex-basis: 31px; }
  .focus > .secondary { margin-inline-start: 41px; }
  .dashboard-lead .dashboard-metric { padding: 15px 12px; }
  .dashboard-grid { gap: 8px; }
  .dashboard-grid .dashboard-metric { padding-inline: 11px; }
  .dashboard-grid .dashboard-metric strong { font-size: 29px; }
}

/* Explicit status stages. Waiting and abandonment are separate branches,
   never additional progress percentages or extra points on the slider. */
.task-card:not(.archive-card) { grid-template-areas: 'top actions' 'title actions' 'meta actions' 'stage stage'; }
.status-stage { grid-area: stage; width: 100%; min-width: 0; margin-top: 12px; padding: 14px 15px 11px; border: 1px solid #e9e1f0; border-radius: 13px; background: #faf7fd; cursor: default; }
.status-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; margin-bottom: 2px; }
.status-stage-head > span { color: #7c6d8b; font-size: 12px; }
.status-stage-head output { min-width: 0; display: inline-block; padding: 3px 9px; border: 1px solid #e4d8ef; border-radius: 8px; background: #eee5f8; color: #684789; font-size: 12px; font-weight: 700; line-height: 1.8; overflow-wrap: anywhere; }
.status-stage[data-current-status='doing'] .status-stage-head output { color: #326d69; background: #e1f0eb; border-color: #c8e1d6; }
.status-stage[data-current-status='completed'] .status-stage-head output { color: #286348; background: #e1f0e4; border-color: #c8dfcf; }
.status-stage input[type='range'] { --status-fill-start: #8c6bc5; --status-fill-end: #4a967e; --status-rail: #e6dfed; appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 9px; background: transparent; cursor: pointer; direction: rtl; accent-color: #7c58b8; box-shadow: none; }
.status-stage input[type='range']::-webkit-slider-runnable-track { height: 8px; border-radius: 20px; border: 1px solid #e0d6e9; background: linear-gradient(to left,var(--status-fill-start) 0%,var(--status-fill-end) calc(var(--status-stop,0) * 50%),var(--status-rail) calc(var(--status-stop,0) * 50%),var(--status-rail) 100%); }
.status-stage input[type='range']::-moz-range-track { height: 8px; border-radius: 20px; border: 1px solid #e0d6e9; background: linear-gradient(to left,var(--status-fill-start) 0%,var(--status-fill-end) calc(var(--status-stop,0) * 50%),var(--status-rail) calc(var(--status-stop,0) * 50%),var(--status-rail) 100%); }
.status-stage input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -10px; border: 4px solid #fff; border-radius: 50%; background: #7a57b4; box-shadow: 0 0 0 1px #bca5d5,0 3px 9px #60407928; transition: background-color .17s,box-shadow .17s; }
.status-stage input[type='range']::-moz-range-thumb { appearance: none; width: 18px; height: 18px; border: 4px solid #fff; border-radius: 50%; background: #7a57b4; box-shadow: 0 0 0 1px #bca5d5,0 3px 9px #60407928; transition: background-color .17s,box-shadow .17s; }
.status-stage input[type='range']:hover::-webkit-slider-thumb { background: #664297; box-shadow: 0 0 0 4px #e6d7f4,0 3px 9px #60407928; }
.status-stage input[type='range']:hover::-moz-range-thumb { background: #664297; box-shadow: 0 0 0 4px #e6d7f4,0 3px 9px #60407928; }
.status-stage input[type='range']:focus-visible { outline: 3px solid #7956b2; outline-offset: 3px; background: #f3ebfc; }
.status-stage-labels { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; min-width: 0; }
.status-stage-labels button { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 6px 8px; border: 1px solid transparent; border-radius: 9px; color: #82728f; font-size: 12px; font-weight: 500; line-height: 1.65; white-space: normal; }
.status-stage-labels button:hover { color: #634184; background: #eee5f8; border-color: #dfd0ec; }
.status-stage-labels button[aria-pressed='true'] { color: #654087; background: #eee4f9; border-color: #ddcaed; font-weight: 750; }
.status-stage-labels button[data-status-step='completed'][aria-pressed='true'] { background: #e1efe6; border-color: #c7dfd0; color: #2e6648; }
.status-stage-labels button[data-status-step='doing'][aria-pressed='true'] { background: #e2efeb; border-color: #c5ddd6; color: #326e67; }
.status-branches { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 11px; border-top: 1px dashed #e1d6e9; }
.status-branches button { min-height: 44px; padding: 7px 12px; border: 1px solid #ded4e6; border-radius: 10px; background: #fff; color: #7c6d88; font-size: 12px; line-height: 1.8; }
.status-branches button:hover { color: #5c4475; border-color: #b7a0c9; background: #f2eafa; }
.status-branches button[data-status-branch='waiting'][aria-pressed='true'] { border-color: #d7c48c; color: #806328; background: #fff4cd; font-weight: 750; }
.status-branches button[data-status-branch='abandoned'] { margin-inline-start: auto; border-color: #ead8d2; color: #996252; background: #fffaf7; }
.status-branches button[data-status-branch='abandoned']:hover { color: #8c412d; border-color: #dca991; background: #fcece4; }
.status-stage[data-current-status='waiting'] { background: #fbf9f2; border-color: #e9e0c9; }
.status-stage[data-current-status='waiting'] .status-stage-head output { color: #806328; border-color: #e4d2a3; background: #fff0c5; }
.status-stage[data-current-status='waiting'] input[type='range'] { --status-fill-start: #d3cdbf; --status-fill-end: #d3cdbf; --status-rail: #e7e1d6; }
.status-stage[data-current-status='waiting'] input[type='range']::-webkit-slider-thumb { background: #ac9560; box-shadow: 0 0 0 1px #d0bb8b,0 3px 8px #6b551822; }
.status-stage[data-current-status='waiting'] input[type='range']::-moz-range-thumb { background: #ac9560; box-shadow: 0 0 0 1px #d0bb8b,0 3px 8px #6b551822; }
.status-stage button:focus-visible { outline: 3px solid #7c58b8; outline-offset: 2px; }
#dashboardReport .task-card:not(.archive-card) { grid-template-areas: 'top actions' 'title actions' 'meta actions' 'stage stage'; }
#dashboardReport .status-stage { margin-top: 10px; }
.dashboard-report-head .dashboard-report-count { padding: 0; margin: 6px 0 0; }
.dashboard-report-list { padding-top: 21px; }
#dashboardReportTitle:focus-visible { outline-offset: 5px; border-radius: 5px; }
#dashboardReport .status-stage-labels button, #dashboardReport .status-branches button { font-size: 12px; }
:root[data-density='compact'] .status-stage { margin-top: 8px; padding: 11px 12px 9px; }
:root[data-density='compact'] .status-stage-head { margin-bottom: 0; }
:root[data-density='compact'] .status-branches { margin-top: 6px; padding-top: 8px; }
:root[data-density='compact'] .status-stage-labels button, :root[data-density='compact'] .status-branches button { min-height: 44px; }
#abandonment { width: 520px; max-width: calc(100vw - 30px); background: #fffaf6; border-color: #e8d2c5; }
#abandonment .dialog-head { background: #f9e5da; border-color: #efd4c3; }
#abandonment .dialog-head .eyebrow { color: #a06c51; }
#abandonment .dialog-head h2 { color: #7d4a35; }
#abandonment > p { margin: 0; padding: 25px 29px; color: #7c6659; font-size: 14px; line-height: 2; }
#abandonment .dialog-actions { background: #fff7f0; border-color: #efddcf; }
#abandonment .primary { background: #9a593d; border-color: #9a593d; box-shadow: 0 4px 12px #9a593d1a; }
#abandonment .primary:hover { background: #7f432d; border-color: #7f432d; }
#abandonment .secondary { background: #fff; border-color: #dfc7b9; color: #70503d; }
@media (min-width: 901px) and (max-width: 1250px) {
  .task-card:not(.archive-card) { grid-template-areas: 'top' 'title' 'meta' 'stage' 'actions'; }
}
@media (max-width: 580px) {
  .task-card:not(.archive-card), #dashboardReport .task-card:not(.archive-card) { grid-template-areas: 'top' 'title' 'meta' 'stage' 'actions'; }
  .status-stage { margin-top: 7px; padding: 12px 11px 10px; border-radius: 11px; }
  .status-stage-head { gap: 8px; }
  .status-stage-head output { padding-inline: 8px; font-size: 12px; }
  .status-stage-head > span { font-size: 12px; }
  .status-stage-labels { gap: 3px; }
  .status-stage-labels button { min-height: 44px; padding-inline: 4px; font-size: 12px; border-radius: 8px; }
  .status-branches { gap: 7px; }
  .status-branches button { min-height: 44px; padding-inline: 11px; font-size: 12px; }
  .status-stage input[type='range'] { height: 46px; min-height: 46px; }
  .status-stage input[type='range']::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -11px; }
  .status-stage input[type='range']::-moz-range-thumb { width: 20px; height: 20px; }
  #dashboardReport .task-card { padding: 17px; }
  #dashboardReport .status-stage { padding-inline: 11px; }
  .dashboard-report-list { padding-top: 18px; }
  #abandonment { max-width: calc(100vw - 22px); border-radius: 21px; }
  #abandonment > p { padding: 24px 23px; font-size: 14px; }
  #abandonment .dialog-actions { padding: 18px 23px 23px; }
  #abandonment .dialog-actions > button { flex: 1 1 auto; min-height: 46px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .status-stage input[type='range']::-webkit-slider-thumb { transition: none; }
  .status-stage input[type='range']::-moz-range-thumb { transition: none; }
}

/* Task status is a compact native disclosure until the user chooses to edit it. */
details.status-stage { padding: 0; margin-top: 11px; overflow: visible; }
details.status-stage > summary.status-stage-head { display: flex; align-items: center; gap: 12px; min-height: 50px; margin: 0; padding: 9px 14px; border-radius: 12px; cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; }
details.status-stage > summary.status-stage-head::-webkit-details-marker { display: none; }
details.status-stage > summary.status-stage-head::marker { content: ''; }
details.status-stage > summary.status-stage-head::after { content: '⌄'; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px; background: #ece4f4; color: #8a70a1; font: 20px/1 Arial,sans-serif; transform: translateY(-2px); transition: transform .17s,background-color .17s; }
details.status-stage > summary.status-stage-head output { margin-inline-start: auto; }
details.status-stage > summary.status-stage-head:hover { background: #f0e9f8; }
details.status-stage > summary.status-stage-head:focus-visible { outline: 3px solid #7b58b7; outline-offset: 3px; background: #f0e7fa; }
details.status-stage[open] { padding: 0 14px 12px; border-color: #d8c8e8; background: #fbf8fe; box-shadow: 0 5px 13px #48305407; }
details.status-stage[open] > summary.status-stage-head { margin: 0 -14px 4px; border-radius: 12px 12px 0 0; border-bottom: 1px solid #e9dfef; background: #f4eefb; }
details.status-stage[open] > summary.status-stage-head::after { transform: translateY(2px) rotate(180deg); background: #e3d7ef; }
details.status-stage[data-current-status='waiting'] > summary.status-stage-head::after { color: #9b854f; background: #f3e9ca; }
details.status-stage[data-current-status='waiting'][open] { border-color: #e2d4ac; background: #fffdf7; }
details.status-stage[data-current-status='waiting'][open] > summary.status-stage-head { border-color: #e9dfc3; background: #faf5e6; }
:root[data-density='compact'] details.status-stage { padding: 0; margin-top: 7px; }
:root[data-density='compact'] details.status-stage > summary.status-stage-head { min-height: 46px; padding-block: 7px; }
:root[data-density='compact'] details.status-stage[open] { padding: 0 12px 10px; }
:root[data-density='compact'] details.status-stage[open] > summary.status-stage-head { margin-inline: -12px; }
#dashboardReport details.status-stage { padding: 0; }
#dashboardReport details.status-stage[open] { padding: 0 14px 12px; }
@media (max-width: 580px) {
  details.status-stage { margin-top: 7px; padding: 0; }
  details.status-stage > summary.status-stage-head { min-height: 50px; padding: 9px 12px; gap: 8px; border-radius: 10px; }
  details.status-stage > summary.status-stage-head output { padding-inline: 8px; }
  details.status-stage[open] { padding: 0 11px 11px; }
  details.status-stage[open] > summary.status-stage-head { margin-inline: -11px; padding-inline: 12px; border-radius: 10px 10px 0 0; }
  #dashboardReport details.status-stage { padding: 0; }
  #dashboardReport details.status-stage[open] { padding: 0 11px 11px; }
  :root[data-density='compact'] details.status-stage > summary.status-stage-head { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  details.status-stage > summary.status-stage-head::after { transition: none; }
}

/* AA contrast for inactive, but still actionable, stage text. */
.status-stage-labels button { color: #6d5c7b; }
.status-stage-head > span { color: #6b587b; }

/* A duration is one compound field, not two unrelated number boxes.
   Numeric semantics and any hour limits are exclusively owned by the inputs. */
.duration-field { width: 100%; min-width: 0; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.duration-field > legend { display: block; width: 100%; margin: 0; padding: 0 0 8px; color: #6d5d7c; font-size: 12px; font-weight: 500; line-height: 1.8; }
.duration-control { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; width: 100%; min-width: 0; min-height: 62px; border: 1px solid #d8cbe5; border-radius: 12px; background: #fcfafe; overflow: visible; direction: rtl; transition: border-color .17s,background-color .17s,box-shadow .17s; }
.duration-control:hover { border-color: #b8a0ce; }
.duration-control:focus-within { border-color: #8d6cb2; background: #fff; box-shadow: 0 0 0 3px #ece2f7; }
body .duration-control > label { display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-width: 0; min-height: 60px; margin: 0; padding: 8px 12px; gap: 8px; color: #85718f; font-size: 12px; font-weight: 500; }
.duration-control > label > span { flex: 0 0 auto; max-width: 60%; color: #7a6688; line-height: 1.7; }
body .duration-control input[type='number'], body .form-grid .duration-control input[type='number'], body .recurrence-fields .duration-control input[type='number'] { display: block; flex: 1 1 auto; width: 100%; min-width: 0; max-width: 100%; min-height: 44px; height: 44px; margin: 0; padding: 4px 2px; border: 0; border-radius: 7px; background: transparent; color: #4c375f; box-shadow: none; font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.5; text-align: center; direction: ltr; }
body .duration-control input[type='number']::placeholder { color: #a08daf; font-size: 14px; font-weight: 400; }
body .duration-control input[type='number']:hover { background: #f6f0fc; }
body .duration-control input[type='number']:focus-visible { outline: 2px solid #9974bd; outline-offset: 1px; background: #f5effb; }
.duration-separator { display: inline-block; width: 12px; flex: 0 0 12px; color: #ad97be; font: 22px/1.5 Arial,sans-serif; text-align: center; user-select: none; }
.duration-control > label:has(input:disabled) { color: #9b8ba8; opacity: .6; cursor: not-allowed; }
.duration-control:has(input:disabled):not(:has(input:enabled)) { border-color: #e5ddeb; background: #f0edf3; box-shadow: none; }
body .duration-control input[type='number']:disabled { background: transparent; color: #9a8da2; cursor: not-allowed; opacity: 1; }
.recurrence-fields > .duration-field { grid-column: 1 / -1; }
@media (max-width: 580px) {
  .duration-field > legend { font-size: 12px; padding-bottom: 8px; }
  .duration-control { min-height: 62px; border-radius: 11px; }
  body .duration-control > label { min-height: 60px; padding: 8px 9px; gap: 6px; font-size: 12px; }
  body .duration-control input[type='number'], body .form-grid .duration-control input[type='number'], body .recurrence-fields .duration-control input[type='number'] { min-height: 44px; height: 44px; font-size: 20px; }
  .duration-separator { width: 9px; font-size: 20px; }
}
@media (max-width: 380px) {
  .form-grid > .duration-field { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .duration-control { transition: none; }
}
@media (max-width: 580px) {
  .form-grid > .duration-field { grid-column: 1 / -1; }
}

/* Owner-defined closures are visible in planning, without moving existing work. */
.day-timeline-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.day-unavailable { position: absolute; z-index: 1; pointer-events: none; inset-inline-start: var(--clock-gutter); inset-inline-end: var(--end-gutter); top: calc(var(--timeline-origin) + var(--start) * var(--minute-height)); height: max(4px,calc(var(--duration) * var(--minute-height))); min-width: 0; overflow: hidden; border-inline-start: 3px solid #bd7453; border-radius: 7px; background: repeating-linear-gradient(135deg,#f8ddcdab 0 11px,#fff0e6bc 11px 22px); }
.day-unavailable span { display: inline-block; padding: 2px 10px; color: #864b32; background: #fff5edd9; font-size: 11px; font-weight: 700; line-height: 1.7; }
.unavailable-panel { grid-column: 1 / -1; background: #fff8f1; border-color: #eedbc8; }
.unavailable-panel > .eyebrow { color: #915c40; }
.unavailable-panel > .form-note { max-width: 760px; color: #715f57; font-size: 12px; }
#unavailableForm { display: grid; gap: 14px; padding: 19px; background: #fffdfb; border: 1px solid #ead9cd; border-radius: 17px; }
#unavailableForm .form-grid { gap: 12px; }
#unavailableForm .form-grid > label { min-width: 0; color: #695f62; font-size: 12px; }
#unavailableForm input, #unavailableForm select { width: 100%; min-height: 44px; margin-top: 4px; border-color: #dfd2cb; background: #fff; color: #423843; font-size: 13px; }
#unavailableForm > button { justify-self: start; min-height: 44px; }
.unavailable-list { margin-top: 25px; }
.unavailable-list h4 { margin: 0 0 10px; color: #594d56; font-size: 15px; }
.unavailable-list > p { margin: 0; color: #786c74; font-size: 12px; }
.unavailable-list ul { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0; }
.unavailable-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; border: 1px solid #eaded5; border-radius: 12px; background: #fffdfb; }
.unavailable-list li > div { display: grid; gap: 3px; min-width: 0; }
.unavailable-list li strong { color: #604c47; font-size: 13px; overflow-wrap: anywhere; }
.unavailable-list li span { color: #766c6b; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.unavailable-list li button { flex: 0 0 auto; min-height: 44px; padding: 7px 12px; border: 1px solid #e3c8bb; border-radius: 9px; color: #954b36; background: #fff5ef; font-size: 12px; }
.unavailable-list li button:hover { background: #fae6da; border-color: #c99780; }
.unavailable-list li button:focus-visible { outline: 3px solid #9865a6; outline-offset: 2px; }
@media (max-width: 580px) {
  .day-timeline-actions { width: 100%; }
  .day-timeline-actions button { flex: 1 1 auto; min-height: 44px; }
  .unavailable-panel { padding: 20px; }
  #unavailableForm { padding: 13px; }
  #unavailableForm .form-grid { grid-template-columns: minmax(0,1fr); }
  #unavailableForm input, #unavailableForm select { min-height: 46px; font-size: 16px; }
  .unavailable-list li { align-items: start; }
}

/* The daily map is a secondary planning tool, not a wall before today's tasks. */
.day-timeline-disclosure { margin-bottom: 16px; border: 1px solid #ddd3ee; border-radius: 18px; background: #fff; box-shadow: 0 4px 15px #30244708; overflow: hidden; }
.day-timeline-disclosure > summary { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 76px; padding: 12px 17px; list-style: none; cursor: pointer; }
.day-timeline-disclosure > summary::-webkit-details-marker { display: none; }
.day-timeline-disclosure > summary:hover { background: #f9f6ff; }
.day-timeline-disclosure > summary:focus-visible { outline-offset: -4px; }
.day-timeline-disclosure[open] > summary { border-bottom: 1px solid #e8e1f1; background: #f8f5fe; }
.day-timeline-disclosure-icon { display: block; position: relative; width: 36px; height: 36px; border-radius: 11px; background: #eee6fa; }
.day-timeline-disclosure-icon::before { content: ''; position: absolute; inset: 9px; border: 2px solid #7352a1; border-radius: 50%; }
.day-timeline-disclosure-icon::after { content: ''; position: absolute; width: 6px; height: 7px; inset-inline-start: 18px; top: 13px; border-inline-start: 2px solid #7352a1; border-bottom: 2px solid #7352a1; }
.day-timeline-disclosure-copy { display: grid; min-width: 0; gap: 1px; }
.day-timeline-disclosure-copy strong { color: #4c3c64; font-size: 14px; line-height: 1.6; }
.day-timeline-disclosure-copy small { color: #736681; font-size: 11px; line-height: 1.6; }
.day-timeline-disclosure-action { color: #68449b; font-size: 11px; font-weight: 750; white-space: nowrap; }
.day-timeline-disclosure-action .when-open, .day-timeline-disclosure[open] .when-closed { display: none; }
.day-timeline-disclosure[open] .when-open { display: inline; }
.day-timeline-disclosure .day-timeline { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.overview-title { display: none; }

/* Give the focus task its own readable row; actions may never squeeze Arabic words. */
body .overview .focus { display: grid; grid-template-columns: 34px minmax(0,1fr) 44px; grid-template-areas: 'icon copy close' 'action action action'; align-items: start; gap: 9px 11px; min-width: 0; }
body .focus-icon { grid-area: icon; }
body .focus-copy { grid-area: copy; min-width: 0; }
body .focus-copy strong { overflow-wrap: break-word; word-break: normal; line-height: 1.65; }
body .focus > .secondary { grid-area: action; justify-self: start; margin: 0; }
body .focus #clearFocus { grid-area: close; justify-self: end; margin: 0; width: 44px; min-height: 44px; }
body[data-view='today'] .task-group { padding: 0; overflow: hidden; }
body[data-view='today'] .task-group .group-heading { min-height: 52px; margin: 0; padding: 11px 17px; border-bottom: 1px solid #e9e2ea; }
body[data-view='today'] .task-group .cards { display: block; background: #fff; }
body[data-view='today'] .task-group .task-card { min-height: 0; margin: 0; padding: 14px 17px; border: 0; border-bottom: 1px solid #eeeaf1; border-radius: 0; box-shadow: none; transform: none; }
body[data-view='today'] .task-group .task-card:last-child { border-bottom: 0; }
body[data-view='today'] .task-group .task-card:hover { background: #fcfaff; box-shadow: none; }
body[data-view='today'] .task-card h3 { font-size: 16px; line-height: 1.65; }
body[data-view='today'] .task-card .task-meta { line-height: 1.6; }
body[data-view='today'] .task-card .planned-meta { display: none; }
body[data-view='today'] .task-card .status-stage { width: min(100%,320px); justify-self: start; }
body[data-view='today'] .task-group:has(.empty-group) { margin-bottom: 9px; }
body[data-view='today'] .task-group:has(.empty-group) .group-heading { border: 0; }
body[data-view='today'] .task-group:has(.empty-group) .cards { background: transparent; }
body[data-view='today'] .task-group .empty-group { padding: 0 17px 10px; border: 0; background: transparent; color: #6e6576; }
#unavailableConflict { width: 520px; max-width: calc(100vw - 30px); background: #fffcf7; border-color: #e8dcc8; }
#unavailableConflict .dialog-head { background: #fbf1e2; border-color: #ecdfca; }
#unavailableConflict .dialog-head .eyebrow { color: #835c31; }
#unavailableConflict .dialog-head h2 { color: #684624; }
#unavailableConflict > p { margin: 0; padding: 24px 29px; color: #5e5042; font-size: 14px; line-height: 1.9; }
#unavailableConflict .dialog-actions { background: #fff9f1; border-color: #efe3d3; }
@media (max-width: 580px) {
  .day-timeline-disclosure > summary { grid-template-columns: 36px minmax(0,1fr); gap: 8px 10px; padding: 12px 14px; }
  .day-timeline-disclosure-action { grid-column: 2; }
  .day-timeline-disclosure .day-timeline { padding: 14px; }
  body .overview .focus { grid-template-columns: 31px minmax(0,1fr) 44px; }
  body .focus-copy strong { font-size: 14px; }
  body[data-view='today'] .task-group .group-heading { padding: 10px 14px; }
  body[data-view='today'] .task-group .task-card { padding: 14px; }
  body[data-view='today'] .task-card .status-stage { width: 100%; }
  body[data-view='today'] .task-group .empty-group { padding: 0 14px 9px; }
  #unavailableConflict > p { padding: 20px; }
  #unavailableConflict .dialog-actions > button { flex: 1 1 auto; min-height: 46px; }
}
@media (max-width: 900px) {
  body[data-view='today'] .workstage > .collection { order: 1; }
  body[data-view='today'] .workstage > .overview { order: 2; margin-top: 8px; }
  body[data-view='today'] .overview-title { display: block; grid-column: 1 / -1; margin: 0 0 3px; color: var(--ink); font-size: 20px; line-height: 1.55; }
}

/* Theme choice changes the whole visual system. Meaningful status/overdue colors
   and the data chart legend remain stable across themes. The Vixilia green is
   taken from the earlier task-site palette, not inferred from its blue favicon. */
:root[data-accent='vixilia'] { --brand:#185d53; --brand-deep:#16473f; --brand-soft:#e2f0ea; --canvas:#f2f7f4; --ink:#223c35; --muted:#5b7069; --line:#dfe9e2; --line-strong:#c8d8ce; --plum:#153e38; --violet:#267b69; --lavender:#e4f1eb; --mint:#d8efe4; --butter:#f8edc5; --theme-nav:#d9ebc0; --theme-nav-ink:#193c31; --theme-group:#e8f3ed; --theme-group-line:#d8e8dd; --theme-hero:#185d53; --theme-chart:#e8f2ec; --theme-chart-line:#d4e4d9; --theme-settings:#e8f3ed; --theme-settings-two:#e6f1e8; --theme-summary:#e7f1eb; }
:root[data-accent='sage'] { --brand:#42745d; --brand-deep:#315844; --brand-soft:#e8f2e7; --canvas:#f5f7f3; --ink:#304238; --muted:#637267; --line:#e1e8dd; --line-strong:#ccd8ca; --plum:#30473d; --violet:#527b60; --lavender:#e9f1e8; --mint:#e2f0e5; --butter:#f7edcb; --theme-nav:#dceacb; --theme-nav-ink:#273e2e; --theme-group:#eaf2e9; --theme-group-line:#dbe9d9; --theme-hero:#405b4b; --theme-chart:#ecf3e9; --theme-chart-line:#dbe7d5; --theme-settings:#ecf3e9; --theme-settings-two:#e6f1e8; --theme-summary:#e9f1e8; }
:root[data-accent='blue'] { --brand:#365db7; --brand-deep:#25498f; --brand-soft:#e7eefc; --canvas:#f3f6fc; --ink:#253650; --muted:#647189; --line:#e0e6f0; --line-strong:#cbd4e5; --plum:#253b68; --violet:#4869bd; --lavender:#e7edfa; --mint:#e3f1ef; --butter:#fff0ca; --theme-nav:#dae5ff; --theme-nav-ink:#243d75; --theme-group:#e8eefa; --theme-group-line:#d7e1f4; --theme-hero:#304f84; --theme-chart:#e8edfa; --theme-chart-line:#d8e1f3; --theme-settings:#e9eefb; --theme-settings-two:#e8f2f1; --theme-summary:#eaf0fb; }
:root[data-accent='clay'] { --brand:#a34f3a; --brand-deep:#813b2a; --brand-soft:#faebe5; --canvas:#fbf6f2; --ink:#45342f; --muted:#76645d; --line:#ede2dc; --line-strong:#dccbc3; --plum:#513a39; --violet:#a65b48; --lavender:#f7e9e4; --mint:#e7f1e8; --butter:#ffebc8; --theme-nav:#f4ddcf; --theme-nav-ink:#633b2e; --theme-group:#f8ebe6; --theme-group-line:#eedbd3; --theme-hero:#704941; --theme-chart:#f8ece7; --theme-chart-line:#ebd9d2; --theme-settings:#f8ece7; --theme-settings-two:#eef3e9; --theme-summary:#f8ede8; }
:root:not([data-accent='violet']) .desktop-nav button.selected { background:var(--theme-nav); color:var(--theme-nav-ink); }
:root:not([data-accent='violet']) .selected .nav-count { color:var(--theme-nav-ink); background:#ffffffa3; }
:root:not([data-accent='violet']) .mobile-nav button.selected { background:var(--theme-nav); color:var(--theme-nav-ink); }
:root:not([data-accent='violet']) .mobile-areas button.selected { background:var(--brand-soft); color:var(--brand-deep); border-color:var(--line-strong); }
:root:not([data-accent='violet']) .task-group[data-drop-priority='important'] { background:var(--theme-group); border-color:var(--theme-group-line); }
:root:not([data-accent='violet']) .dashboard-lead { background:var(--theme-hero); border-color:var(--theme-hero); }
:root:not([data-accent='violet']) .dashboard-chart:first-child { background:var(--theme-chart); border-color:var(--theme-chart-line); }
:root:not([data-accent='violet']) .dashboard-chart:first-child .chart-bar { background:var(--theme-chart-line); }
:root:not([data-accent='violet']) .dashboard-scope { background:var(--theme-summary); color:var(--muted); }
:root:not([data-accent='violet']) .settings-panel:first-child { background:var(--theme-settings); border-color:var(--theme-group-line); }
:root:not([data-accent='violet']) .settings-panel:nth-child(2) { background:var(--theme-settings-two); }
:root:not([data-accent='violet']) .day-timeline-disclosure { border-color:var(--line-strong); }
:root:not([data-accent='violet']) .day-timeline-disclosure[open] > summary, :root:not([data-accent='violet']) .day-timeline-disclosure > summary:hover { background:var(--brand-soft); }
:root:not([data-accent='violet']) .day-timeline-disclosure-icon { background:var(--brand-soft); }
:root:not([data-accent='violet']) .day-timeline-disclosure-icon::before, :root:not([data-accent='violet']) .day-timeline-disclosure-icon::after { border-color:var(--brand-deep); }
:root:not([data-accent='violet']) .day-timeline-disclosure-copy strong { color:var(--ink); }
:root:not([data-accent='violet']) .day-timeline-disclosure-action { color:var(--brand-deep); }
:root:not([data-accent='violet']) .status-stage[data-current-status='todo'] > summary.status-stage-head output { color:var(--brand-deep); background:var(--brand-soft); border-color:var(--line-strong); }
:root:not([data-accent='violet']) .status-stage[data-current-status='todo'] input[type='range'] { --status-fill-start:var(--brand); }
:root[data-accent='vixilia'] .area-tag.vixilia { color:#185d53; background:#e0efe8; }
:root[data-accent='vixilia'] .area-dot.vixilia { background:#338c7a; }

.theme-picker { margin: 18px 0 22px; padding: 0; border: 0; min-width: 0; }
.theme-picker legend { margin-bottom: 11px; color:var(--ink); font-size:13px; font-weight:750; }
.theme-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.theme-option { display:grid; grid-template-columns:20px 33px minmax(0,1fr); align-items:center; gap:9px; min-height:52px; min-width:0; padding:8px 10px; border:1px solid var(--line-strong); border-radius:12px; background:#fffdfd; cursor:pointer; }
.theme-option:has(input:checked) { border-color:var(--brand); background:#fff; box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 15%,transparent); }
.theme-option:focus-within { outline:3px solid var(--brand); outline-offset:2px; }
.theme-option input[type='radio'] { width:19px; height:19px; min-height:19px; margin:0; padding:0; accent-color:var(--brand); }
.theme-option .theme-swatch { width:32px; height:32px; border:1px solid #ded9dc; border-radius:10px; background:linear-gradient(135deg,#514573 0 42%,#ede8ff 42% 72%,#ffedac 72%); }
.theme-option[data-theme-option='vixilia'] .theme-swatch { background:linear-gradient(135deg,#185d53 0 42%,#e4f1eb 42% 72%,#f8edc5 72%); }
.theme-option[data-theme-option='sage'] .theme-swatch { background:linear-gradient(135deg,#405b4b 0 42%,#e9f1e8 42% 72%,#f7edcb 72%); }
.theme-option[data-theme-option='blue'] .theme-swatch { background:linear-gradient(135deg,#304f84 0 42%,#e7edfa 42% 72%,#fff0ca 72%); }
.theme-option[data-theme-option='clay'] .theme-swatch { background:linear-gradient(135deg,#704941 0 42%,#f7e9e4 42% 72%,#ffebc8 72%); }
.theme-option .theme-name { color:var(--ink); font-size:12px; line-height:1.5; overflow-wrap:break-word; }
.theme-picker > p { margin:10px 0 0; color:var(--muted); font-size:11px; line-height:1.7; }
@media (max-width:580px) { .theme-options { grid-template-columns:minmax(0,1fr); } }

/* Today keeps concise signals first, then the full selected-focus card and tasks. */
body[data-view='today'] .workstage, body[data-view='today'] .workstage:has(> #overview:not([hidden])) { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }
body[data-view='today'] .workstage > #overview { display:grid; grid-column:1; grid-row:1; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:11px; padding:0; border:0; margin:0; min-width:0; }
body[data-view='today'] .workstage > #focus { grid-column:1; grid-row:2; display:grid; grid-template-columns:34px minmax(0,1fr) auto 44px; grid-template-areas:'icon copy action close'; align-items:center; gap:10px 13px; min-width:0; margin:0; padding:18px 20px; border-radius:18px; }
body[data-view='today'] .workstage > #focus .focus-copy { min-width:0; }
body[data-view='today'] .workstage > #focus .focus-copy strong { overflow-wrap:break-word; word-break:normal; }
body[data-view='today'] .workstage > #focus > .secondary { margin:0; }
body[data-view='today'] .workstage > #focus #clearFocus { min-width:44px; min-height:44px; margin:0; }
body[data-view='today'] .workstage > #collection { grid-column:1; grid-row:3; width:100%; order:initial; min-width:0; }
.today-summary-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; min-width:0; min-height:110px; padding:14px 16px; gap:3px; text-align:start; border:1px solid var(--line-strong); border-radius:17px; background:white; box-shadow:0 4px 12px #2c234108; overflow:hidden; }
.today-summary-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-raised); border-color:var(--brand); }
.today-summary-card > span { color:var(--muted); font-size:11px; font-weight:700; line-height:1.5; }
.today-summary-card > strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; width:100%; overflow:hidden; color:var(--ink); font-size:18px; line-height:1.5; overflow-wrap:break-word; word-break:normal; }
.today-summary-card > small { color:var(--muted); font-size:11px; line-height:1.5; }
.today-summary-card > i { position:absolute; inset-inline-end:15px; top:15px; width:9px; height:9px; color:var(--brand-deep); border-top:2px solid currentColor; border-inline-end:2px solid currentColor; transform:rotate(45deg); }
.today-summary-appointments { background:var(--lavender); }
.today-summary-budget { background:var(--mint); }
.today-summary-focus { background:var(--butter); }
.today-summary-agenda { background:var(--brand-soft); }
.today-summary-settings { align-self:center; justify-self:start; grid-column:1 / -1; min-height:44px; color:var(--brand-deep); font-size:11px; font-weight:700; padding:6px 0; }
.today-summary-settings:hover { text-decoration:underline; }
#todayDetail, #dayPlanDialog { width:min(800px,calc(100vw - 30px)); max-height:min(88dvh,920px); }
#todayDetail[open], #dayPlanDialog[open] { display:flex; flex-direction:column; }
#dayPlanDialog { width:min(500px,calc(100vw - 30px)); }
.today-detail-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 24px; background:var(--brand-soft); border-bottom:1px solid var(--line); }
.today-detail-head h2 { margin:0; color:var(--ink); font-size:22px; line-height:1.5; }
.today-detail-head .eyebrow { margin:0 0 2px; font-size:10px; color:var(--brand-deep); }
.today-detail-head > button { flex:0 0 44px; width:44px; min-height:44px; font-size:26px; color:var(--ink); border-radius:11px; }
.today-detail-head > button:hover { background:#ffffffa8; }
.today-detail-body, .day-plan-body { min-height:0; overflow-y:auto; padding:23px; overscroll-behavior:contain; }
.today-detail-body > section { width:100%; }
.today-detail-body .appointments, .today-detail-body .capacity, .today-detail-body .focus { padding:22px; border-radius:17px; box-shadow:none; }
.today-detail-body .focus { display:grid; grid-template-columns:34px minmax(0,1fr) 44px; grid-template-areas:'icon copy close' 'action action action'; align-items:start; gap:9px 11px; }
.today-detail-body .focus-icon { grid-area:icon; }
.today-detail-body .focus-copy { grid-area:copy; min-width:0; }
.today-detail-body .focus-copy strong { display:block; overflow-wrap:break-word; word-break:normal; }
.today-detail-body .focus > .secondary { grid-area:action; margin:0; justify-self:start; }
.today-detail-body .focus #clearFocus { grid-area:close; justify-self:end; margin:0; min-width:44px; min-height:44px; }
.today-detail-body .day-timeline { margin:0; box-shadow:none; }
.today-detail-body .day-hours { max-height:50dvh; }
.day-plan-body { display:grid; gap:16px; }
.day-plan-body > p { margin:0; color:var(--muted); font-size:12px; line-height:1.8; }
.day-plan-body > #dayPlanHint { padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--brand-soft); color:var(--ink); }
.day-plan-body > #dayPlanHint[data-error='true'] { border-color:#e9b69c; background:#fff0e8; color:#823c28; font-weight:700; }
.day-plan-body > label { display:grid; gap:6px; color:var(--ink); font-size:12px; font-weight:700; }
.day-plan-body select { width:100%; }
.day-plan-actions { display:flex; flex-wrap:wrap; gap:9px; }
.day-plan-actions > button { flex:1 1 180px; }
.day-plan-body > .text-action { justify-self:start; }
.task-group > summary.group-heading { cursor:pointer; list-style:none; }
.task-group > summary.group-heading::-webkit-details-marker, details.dashboard-section > summary::-webkit-details-marker, details.dashboard-lead > summary::-webkit-details-marker, details.dashboard-metrics-wrap > summary::-webkit-details-marker { display:none; }
.group-chevron { display:inline-block; flex:0 0 9px; width:9px; height:9px; margin-inline-start:auto; border-inline-end:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .16s; opacity:.72; }
details[open] > summary .group-chevron { transform:rotate(225deg); }
details.task-group:not([open]) { padding-bottom:0; }
details.task-group:not([open]) > summary.group-heading { border-bottom:0; }
.dashboard-metrics-wrap { margin:0 0 23px; }
.dashboard-metrics-wrap > h2 { display:flex; align-items:center; gap:12px; min-height:48px; padding:6px 2px 12px; margin:0; color:var(--ink); font-size:15px; font-weight:750; }
.dashboard-metrics-wrap > .dashboard-grid { margin-bottom:0; }
.dashboard-section { margin:0 0 24px; }
.dashboard-section-head { display:flex; align-items:center; gap:12px; min-height:50px; padding:9px 16px; border:1px solid var(--line-strong); border-radius:14px; background:var(--brand-soft); color:var(--brand-deep); font-size:16px; font-weight:750; cursor:pointer; list-style:none; }
.dashboard-section-head:hover { border-color:var(--brand); }
.dashboard-section-head:focus-visible { outline:3px solid var(--brand); outline-offset:3px; }
.dashboard-section[open] > .dashboard-section-head { margin-bottom:17px; }
.dashboard-charts-section > .dashboard-scope { margin-top:0; }
.dashboard-section .dashboard-charts, .dashboard-section .dashboard-panels { margin-bottom:0; }
.dashboard-chart-head { min-height:44px; }
.dashboard-chart-head h3, .dashboard-chart-head small { display:block; }
.dashboard-panel-head { min-height:58px; margin-bottom:17px; }
.dashboard-panel-head .eyebrow { margin:0; color:var(--brand-deep); font-size:10px; }
.dashboard-panel-head h3 { margin:5px 0 0; }
.dashboard-panels .focus-tracking-panel { grid-column:1 / -1; margin:0; }
.settings-panel > h4 { margin:20px 0 8px; color:var(--ink); font-size:13px; }
@media (max-width:900px) { body[data-view='today'] .workstage > #overview { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:580px) { body[data-view='today'] .workstage > #overview { gap:9px; } body[data-view='today'] .workstage > #focus { grid-template-columns:34px minmax(0,1fr) 44px; grid-template-areas:'icon copy close' 'action action action'; align-items:start; padding:15px; } body[data-view='today'] .workstage > #focus .focus-icon { grid-area:icon; } body[data-view='today'] .workstage > #focus .focus-copy { grid-area:copy; } body[data-view='today'] .workstage > #focus > .secondary { grid-area:action; justify-self:start; } body[data-view='today'] .workstage > #focus #clearFocus { grid-area:close; } .today-summary-card { min-height:104px; padding:12px; } .today-summary-card > strong { font-size:16px; } #todayDetail, #dayPlanDialog { inset:0; margin:0; width:100%; max-width:100%; height:100dvh; max-height:100dvh; border:0; border-radius:0; } .today-detail-head { padding:15px 18px; } .today-detail-body, .day-plan-body { padding:16px; } .today-detail-body .capacity { display:block; } .today-detail-body .time-metrics { padding-top:13px; } .dashboard-lead-aside { margin-top:17px; } }
@media (prefers-reduced-motion:reduce) { .today-summary-card, .group-chevron { transition:none; } }
.today-detail-notice:not([hidden]) { display:block; margin:0 24px 12px; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--brand-soft); color:var(--ink); font-weight:650; }

/* Additive focus-session entry; the timer never replaces the task list. */
#focusTimerLauncher { position:fixed; z-index:39; inset:auto auto 20px 20px; display:inline-flex; align-items:center; gap:9px; max-width:min(300px,calc(100vw - 32px)); min-height:48px; padding:9px 15px; border:1px solid var(--brand-deep); border-radius:999px; background:var(--brand); color:white; box-shadow:0 10px 26px #21173830; font-size:12px; font-weight:750; line-height:1.45; }
#focusTimerLauncher[hidden] { display:none !important; }
#focusTimerLauncher .icon-svg { width:19px; height:19px; }
#focusTimerLauncher:hover { background:var(--brand-deep); }
#focusTimerLauncher.needs-review { background:#8b4b1d; border-color:#6d3611; box-shadow:0 0 0 4px #f4be782e,0 10px 26px #41271130; }
#focusTimerLauncher.needs-review:hover { background:#6d3611; }
body .focus-widget.fw-floating { --accent:var(--brand); --text:var(--ink); --border:var(--line); inset:auto auto 20px 20px; z-index:40; }
body .focus-widget .fw-primary { background:var(--brand); }
body .focus-widget button, body .focus-widget select, body .focus-widget input:not([type=radio]):not([type=checkbox]) { min-height:44px; }
body .focus-widget .fw-modes [aria-pressed=true], body .focus-widget .fw-checkin { border-color:var(--line-strong); background:var(--brand-soft); }
body .focus-widget .fw-metric { background:var(--brand-soft); }
body .focus-analytics { background:var(--surface); color:var(--ink); border-color:var(--line); }
body .focus-analytics .fa-bar span { background:var(--brand); }
body .focus-analytics button { min-height:44px; overflow-wrap:anywhere; }
.focus-tracking-panel { margin:0 0 22px; }
.focus-tracking-panel > .focus-analytics { margin:10px 0 14px; }
@media (max-width:600px) {
  #focusTimerLauncher { bottom:calc(86px + env(safe-area-inset-bottom)); left:12px; min-height:46px; }
  body .focus-widget.fw-floating { inset:auto 8px calc(83px + env(safe-area-inset-bottom)) 8px; width:auto; max-height:calc(100dvh - 108px - env(safe-area-inset-bottom)); }
  .focus-tracking-panel .focus-analytics { padding:13px; }
  .focus-tracking-panel .focus-analytics .fa-row { grid-template-columns:minmax(0,1fr) repeat(2,minmax(49px,.55fr)); gap:4px; font-size:10px; }
}
@media print { #focusTimerLauncher, #focusTimerRoot { display:none !important; } }

/* The open timer is a separate, opaque surface on small screens; its mini state
   stays visible without covering the task page or the bottom navigation. */
#focusTimerBackdrop[hidden] { display:none !important; }
input:is([type=checkbox],[type=radio]) { padding:0; min-height:0; }
@media (max-width:900px) {
  body.focus-mobile-modal-open { overflow:hidden; }
  #focusTimerBackdrop:not([hidden]) { position:fixed; inset:0; z-index:43; background:#20162faa; backdrop-filter:blur(3px); }
  body .focus-widget.fw-floating.fw-panel-open { z-index:44; inset:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)) 8px; width:auto; max-width:none; max-height:none; overflow:auto; overscroll-behavior:contain; background:var(--surface,#fff); }
  body .focus-widget.fw-floating.fw-mini { z-index:44; inset:auto auto calc(84px + env(safe-area-inset-bottom)) 12px; width:min(280px,calc(100vw - 24px)); max-width:none; max-height:min(38dvh,330px); overflow:auto; background:var(--surface,#fff); }
  body.focus-mobile-mini-open .assistant-notice-toast { inset:max(12px,env(safe-area-inset-top)) 9px auto auto; max-height:min(30dvh,180px); overflow:auto; }
}

/* A chart opens its verified source intervals in a separate, focused report. */
#focusReport { width:760px; max-width:calc(100vw - 40px); padding:0; background:var(--surface); }
#focusReport[open] { display:flex; flex-direction:column; }
.focus-report-item { display:grid; gap:8px; min-width:0; padding:17px 19px; border:1px solid var(--line); border-radius:15px; background:var(--surface); }
.focus-report-item strong { color:var(--ink); font-size:15px; overflow-wrap:anywhere; }
.focus-report-item p { margin:0; color:var(--ink-muted); font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.focus-report-item time { font-variant-numeric:tabular-nums; }
.focus-report-item button { justify-self:start; min-height:44px; }
@media (max-width:580px) { #focusReport { position:fixed; inset:0; margin:0; width:100%; max-width:100%; height:100dvh; max-height:100dvh; border:0; border-radius:0; } }
@media print { #focusReport { display:none !important; } }

/* The assistant surfaces at most one quiet status and one transient prompt. */
#assistantStatus[hidden], #assistantNoticeToast[hidden], #assistantRulesDialog[hidden] { display:none !important; }
.assistant-status { display:flex; align-items:center; justify-content:space-between; gap:16px; min-width:0; margin:0 0 18px; padding:14px 17px; border:1px solid var(--line-strong); border-inline-start:4px solid var(--brand); border-radius:15px; background:var(--brand-soft); color:var(--ink); }
.assistant-status-copy { min-width:0; }
.assistant-status-copy .eyebrow { margin:0 0 3px; color:var(--brand-deep); font-size:11px; font-weight:750; }
.assistant-status-copy p { margin:0; font-size:12px; line-height:1.75; overflow-wrap:anywhere; }
.assistant-status-actions, .assistant-notice-actions { display:flex; flex-wrap:wrap; align-items:center; gap:7px; flex:0 0 auto; }
.assistant-status button, .assistant-notice-toast button { min-height:44px; padding:8px 11px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); color:var(--brand-deep); font-size:12px; font-weight:700; }
.assistant-status button:hover, .assistant-notice-toast button:hover { border-color:var(--brand); }
.assistant-notice-toast { position:fixed; z-index:38; inset:auto 20px 85px auto; display:grid; gap:10px; width:min(390px,calc(100vw - 32px)); padding:16px; border:1px solid var(--line-strong); border-radius:17px; background:var(--surface); box-shadow:var(--shadow-raised); color:var(--ink); }
.assistant-notice-toast p { margin:0; font-size:12px; line-height:1.75; overflow-wrap:anywhere; }
.assistant-notice-toast .eyebrow { color:var(--brand-deep); font-weight:750; }
.assistant-rules-dialog { width:780px; max-width:calc(100vw - 28px); max-height:90dvh; padding:0; background:var(--surface); }
.assistant-rules-dialog[open] { display:flex; flex-direction:column; }
.assistant-rules-body { display:grid; gap:14px; min-height:0; padding:20px 26px 26px; overflow-y:auto; }
.assistant-rules-body > p { margin:0; color:var(--ink-muted); font-size:12px; line-height:1.8; }
.assistant-rules-body > label { display:grid; gap:6px; font-size:12px; font-weight:750; }
.assistant-rules-body input[type='search'] { min-height:46px; }
.assistant-rule-group { margin:0 0 10px; padding:0 13px 8px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.assistant-rule-group > summary { min-height:48px; padding:11px 0; cursor:pointer; color:var(--ink); font-size:13px; font-weight:750; }
.assistant-rule-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
.assistant-rule-row label { display:flex; align-items:center; gap:9px; min-width:0; font-size:12px; font-weight:700; }
.assistant-rule-row label span { min-width:0; overflow-wrap:anywhere; }
.assistant-rule-row small { grid-column:1 / -1; color:var(--ink-muted); font-size:11px; line-height:1.6; }
.assistant-rule-row input:disabled + span { opacity:.65; }
.assistant-rule-row button { min-height:44px; padding:7px 10px; border:1px solid var(--line-strong); border-radius:9px; background:var(--brand-soft); color:var(--brand-deep); font-size:11px; }
.assistant-rules-open { min-height:44px; }
.assistant-detail-dialog { width:680px; max-width:calc(100vw - 28px); max-height:90dvh; padding:0; background:var(--surface); }
.assistant-detail-dialog[open] { display:flex; flex-direction:column; }
.assistant-detail-body { display:grid; gap:13px; min-height:0; overflow-y:auto; padding:20px 26px 26px; }
.assistant-detail-body > p { margin:0; color:var(--ink); font-size:12px; line-height:1.8; }
.assistant-detail-body > #assistantDetailReason { color:var(--ink-muted); }
.assistant-detail-body .task-card { box-shadow:none; }
.assistant-detail-tasks { display:grid; justify-items:start; gap:9px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-alt,var(--surface)); }
.assistant-detail-tasks > strong { font-size:12px; color:var(--ink); }
.assistant-detail-tasks > button { max-width:100%; min-height:44px; text-align:start; overflow-wrap:anywhere; }
.assistant-settings > .assistant-rules-open { justify-self:start; }
@media (max-width:600px) {
  .assistant-status { display:grid; gap:10px; padding:12px; }
  .assistant-status-actions { justify-content:flex-start; }
  .assistant-notice-toast { inset:auto 9px calc(143px + env(safe-area-inset-bottom)) 9px; width:auto; }
  .assistant-rules-dialog { position:fixed; inset:0; margin:0; width:100%; max-width:100%; height:100dvh; max-height:100dvh; border:0; border-radius:0; }
  .assistant-detail-dialog { position:fixed; inset:0; margin:0; width:100%; max-width:100%; height:100dvh; max-height:100dvh; border:0; border-radius:0; }
  .assistant-rules-body { padding:16px; }
  .assistant-detail-body { padding:16px; }
}
@media print { #assistantStatus, #assistantNoticeToast, #assistantRulesDialog, #assistantDetailDialog { display:none !important; } }

/* One light floating entry remains available even when no timer is running. */
.focus-floating-rail { position:fixed; z-index:39; inset:auto auto 20px 20px; display:flex; align-items:center; gap:8px; max-width:calc(100vw - 24px); direction:rtl; }
#focusFloatingRail #focusTimerLauncher { position:static; inset:auto; flex:0 1 auto; min-width:0; }
#focusTimerBadge { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#notificationLauncher { position:relative; flex:none; width:48px; height:48px; display:grid; place-items:center; padding:0; border:1px solid var(--line-strong); border-radius:50%; background:var(--surface); color:var(--brand-deep); box-shadow:0 8px 22px #21173820; }
#notificationLauncher[hidden] { display:none !important; }
#notificationLauncher .icon-svg { width:21px; height:21px; }
#notificationLauncher [data-nc-badge] { position:absolute; inset:-5px -5px auto auto; min-width:20px; height:20px; display:grid; place-items:center; padding:1px 4px; border:2px solid var(--surface); border-radius:999px; background:#a12638; color:white; font-size:10px; font-weight:800; line-height:1; }
#notificationLauncher:hover, #notificationLauncher[aria-expanded='true'] { border-color:var(--brand); background:var(--brand-soft); }
body.focus-mini-open .main-content { padding-bottom:max(90px,env(safe-area-inset-bottom)); }

/* The bell's compact non-modal inbox has its own scroll area, not a page overlay. */
.notification-center { position:fixed; z-index:50; display:flex; flex-direction:column; gap:0; max-width:calc(100vw - 24px); min-width:260px; overflow:hidden; border:1px solid var(--line-strong); border-radius:20px; background:var(--surface); color:var(--ink); box-shadow:0 22px 65px #261c3442; direction:rtl; }
.notification-center-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px; background:linear-gradient(120deg,var(--brand-soft),var(--surface)); border-bottom:1px solid var(--line); }
.notification-center-head small { display:block; color:var(--brand-deep); font-size:11px; font-weight:750; }
.notification-center-head h2 { margin:0; font-size:16px; line-height:1.4; }
.notification-center-head button { flex:none; width:44px; height:44px; padding:0; border:1px solid var(--line-strong); border-radius:12px; background:var(--surface); color:var(--ink); font-size:24px; line-height:1; }
.notification-center-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:9px 11px; }
.notification-center-tabs button { min-height:44px; border:1px solid transparent; border-radius:11px; background:var(--surface-alt,var(--brand-soft)); color:var(--ink-muted); font:inherit; font-size:12px; font-weight:750; }
.notification-center-tabs button[aria-pressed='true'] { border-color:var(--brand); background:var(--brand-soft); color:var(--brand-deep); }
.notification-center-list { min-height:80px; overflow:auto; overscroll-behavior:contain; padding:0 11px 12px; }
.notification-center-empty { margin:10px 4px; padding:24px 10px; border:1px dashed var(--line-strong); border-radius:12px; color:var(--ink-muted); text-align:center; font-size:13px; }
.notification-center-error { margin:4px 11px 10px; padding:9px 10px; border-radius:9px; background:#fff0f0; color:#9a232c; font-size:12px; line-height:1.6; }
.notification-item { display:grid; gap:7px; margin:0 0 8px; padding:11px 12px; border:1px solid var(--line); border-radius:13px; background:var(--surface); }
.notification-item.is-unread { border-inline-start:4px solid var(--brand); background:var(--brand-soft); }
.notification-item-head { display:flex; align-items:center; justify-content:space-between; gap:9px; color:var(--ink-muted); font-size:10px; line-height:1.35; }
.notification-item-head time { direction:ltr; white-space:nowrap; }
.notification-item-summary { min-height:44px; width:100%; padding:2px 0; border:0; background:transparent; color:var(--ink); font:inherit; font-size:13px; font-weight:750; line-height:1.55; text-align:start; overflow-wrap:anywhere; }
.notification-item-summary:hover { color:var(--brand-deep); }
.notification-task { display:block; min-width:0; color:var(--brand-deep); font-size:11px; overflow-wrap:anywhere; }
.notification-item-detail { display:grid; gap:9px; padding-top:8px; border-top:1px solid var(--line); }
.notification-item-detail p { margin:0; color:var(--ink); font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.notification-item-actions { display:flex; flex-wrap:wrap; gap:7px; }
.notification-item-actions button { min-height:44px; padding:6px 12px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); color:var(--brand-deep); font:inherit; font-size:12px; font-weight:700; }
.notification-item-actions button:hover { background:var(--brand-soft); }
@media (max-width:900px) {
  .focus-floating-rail { inset:auto auto calc(86px + env(safe-area-inset-bottom)) 12px; }
  body .focus-widget.fw-floating.fw-mini { max-height:none; overflow:visible; }
  body.focus-mini-open .main-content { padding-bottom:calc(155px + env(safe-area-inset-bottom)); }
}
@media (max-width:360px) { .notification-center { min-width:0; } }
@media print { #focusFloatingRail, #notificationCenter { display:none !important; } }
.task-timer-action { width:44px; height:44px; flex:none; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:12px; background:var(--brand-soft); color:var(--brand-deep); cursor:pointer; }
.task-timer-action:hover,.task-timer-action:focus-visible { border-color:var(--brand); background:var(--surface); }
.task-timer-action svg { width:20px; height:20px; fill:currentColor; }

/* Reports share the chosen site palette. Filtering is display-only and never a
   promise about schedule safety or unsaved work. */
.main-content { grid-template-areas:'header' 'ribbon' 'toolbar' 'scope' 'assistant' 'stage' 'footer'; }
.global-scope { grid-area:scope; min-width:0; margin:0 0 21px; border:1px solid var(--line-strong); border-radius:16px; background:var(--surface); box-shadow:0 5px 18px #1e263008; }
#assistantStatus { grid-area:assistant; }
.global-scope.active { border-color:var(--brand); background:color-mix(in srgb,var(--brand-soft) 38%,var(--surface)); }
.global-scope > summary { display:flex; align-items:center; gap:10px; min-height:48px; padding:10px 17px; cursor:pointer; list-style:none; }
.global-scope > summary::-webkit-details-marker { display:none; }
.global-scope > summary strong { color:var(--brand-deep); font-size:13px; white-space:nowrap; }
.global-scope > summary span { margin-inline-start:auto; min-width:0; color:var(--muted); font-size:11px; text-align:end; overflow-wrap:anywhere; }
.global-scope > summary i { width:8px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg); flex:0 0 auto; }
.global-scope[open] > summary i { transform:rotate(135deg); }
.global-scope-body { padding:0 18px 18px; border-top:1px solid var(--line); }
.global-scope-body > p { margin:10px 0 0; color:var(--muted); font-size:11px; line-height:1.75; }
.global-scope-controls { display:flex; align-items:end; gap:10px; flex-wrap:wrap; margin-top:12px; }
.global-scope-controls > label { display:grid; gap:4px; min-width:132px; font-size:11px; font-weight:700; color:var(--ink); }
.global-scope-controls input[type='date'] { min-height:44px; }
.global-scope-controls .scope-undated { display:flex; align-items:center; gap:7px; max-width:300px; flex:1 1 240px; line-height:1.55; }
.scope-undated input { min-width:18px; min-height:18px; width:18px; height:18px; margin:0; accent-color:var(--brand); }
.global-scope-controls button { min-height:44px; }
.scope-policy-note { font-weight:650; }
#scopeFeedback:empty { display:none; }
#scopeFeedback[data-error='true'] { color:#9a3d34; }
.daily-reports-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; min-width:0; margin:0 0 20px; }
.report-card { min-width:0; border:1px solid var(--line-strong); border-radius:17px; background:var(--surface); box-shadow:0 7px 20px #1e263009; overflow:hidden; }
.report-card:nth-child(4n+1) { background:color-mix(in srgb,var(--brand-soft) 48%,var(--surface)); }
.report-card:nth-child(4n+2) { background:color-mix(in srgb,var(--lavender,#ece8fa) 40%,var(--surface)); }
.report-card:nth-child(4n+3) { background:color-mix(in srgb,var(--butter,#fff0ca) 26%,var(--surface)); }
.report-card > button { display:grid; align-content:start; gap:8px; width:100%; min-height:174px; padding:17px; text-align:start; min-width:0; }
.report-card > button:hover { background:#ffffff55; }
.report-card > button > strong { color:var(--ink); font-size:14px; line-height:1.55; overflow-wrap:anywhere; }
.report-card > button > small { color:var(--muted); font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
.report-card-id { display:flex; align-items:center; justify-content:space-between; gap:7px; color:var(--brand-deep); font-size:10px; font-weight:750; }
.report-card-id > bdi { padding:2px 7px; border-radius:6px; background:var(--brand-soft); }
.report-card-id > span { color:var(--muted); font-weight:600; }
.report-card-preview { display:flex; align-items:end; gap:5px; height:48px; width:100%; padding:3px 0; }
.report-card-preview i { display:block; flex:1; min-width:0; height:var(--bar); max-height:100%; border-radius:5px 5px 2px 2px; background:var(--brand); opacity:.8; }
.report-card-preview i.unknown { height:100%; background:repeating-linear-gradient(-45deg,var(--line-strong) 0 3px,transparent 3px 6px); opacity:.7; }
.report-card-reason, .report-empty, .report-error { margin:0; color:var(--muted); font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.report-error { color:#963c31; }
.reports-intro { display:grid; gap:4px; padding:16px 19px; margin:0 0 18px; border-radius:16px; background:var(--brand-soft); color:var(--brand-deep); }
.reports-intro p { margin:0; font-size:12px; line-height:1.8; }
.report-groups, .report-group-chart-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; min-width:0; }
.report-group { display:grid; align-content:start; gap:7px; min-width:0; min-height:166px; padding:18px; border:1px solid var(--line-strong); border-radius:16px; text-align:start; background:var(--surface); }
.report-group:nth-child(3n+1) { background:color-mix(in srgb,var(--brand-soft) 45%,var(--surface)); }
.report-group:nth-child(3n+2) { background:color-mix(in srgb,var(--butter,#fff0ca) 20%,var(--surface)); }
.report-group:hover { border-color:var(--brand); transform:translateY(-1px); }
.report-group strong { color:var(--ink); font-size:15px; }
.report-group > span:not(.report-group-top) { color:var(--ink); font-size:12px; line-height:1.6; }
.report-group small { color:var(--muted); font-size:10px; line-height:1.55; }
.report-group-top { display:flex; justify-content:space-between; gap:7px; color:var(--brand-deep); font-size:10px; font-weight:800; }
.reports-dialog { width:min(920px,calc(100vw - 24px)); max-height:90dvh; padding:0; border:1px solid var(--line-strong); border-radius:19px; background:var(--surface); box-shadow:var(--shadow); color:var(--ink); }
.reports-dialog[open] { display:flex; flex-direction:column; }
.reports-dialog::backdrop { background:#20242cb3; }
.reports-dialog-head { display:flex; align-items:center; gap:12px; min-height:70px; padding:12px 20px; border-bottom:1px solid var(--line); background:var(--brand-soft); }
.reports-dialog-head h2 { min-width:0; flex:1; margin:0; color:var(--ink); font-size:18px; line-height:1.5; overflow-wrap:anywhere; }
.reports-dialog-head button { flex:0 0 auto; min-width:44px; min-height:44px; }
#reportsDialogClose { font-size:27px; color:var(--brand-deep); }
.reports-dialog-body { min-height:0; overflow:auto; padding:21px; }
.reports-dialog-body > p { font-size:12px; line-height:1.75; }
.report-status { display:inline-block; padding:5px 10px; border-radius:99px; background:var(--brand-soft); color:var(--brand-deep); font-weight:750; }
.report-status.unavailable { background:var(--warm-soft); color:var(--warm); }
.report-plot { margin:14px 0 20px; padding:13px; border:1px solid var(--line); border-radius:13px; background:color-mix(in srgb,var(--brand-soft) 35%,var(--surface)); }
.report-plot svg { display:block; width:100%; max-height:230px; overflow:visible; }
.report-plot svg polyline { fill:none; stroke:var(--brand); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.report-plot svg circle { fill:var(--brand); stroke:var(--surface); stroke-width:2; }
.report-plot svg .baseline { stroke:var(--line-strong); stroke-width:1; }
.report-plot p { margin:4px 0 0; color:var(--muted); font-size:10px; }
.report-observations { display:grid; gap:7px; margin:16px 0 23px; }
.report-observations button { display:grid; grid-template-columns:minmax(100px,1fr) minmax(70px,1.4fr) minmax(70px,auto); align-items:center; gap:11px; width:100%; min-height:48px; padding:8px 11px; border:1px solid var(--line); border-radius:11px; background:var(--surface); text-align:start; }
.report-observations button:hover { border-color:var(--brand); background:var(--brand-soft); }
.report-observation-label { display:grid; gap:2px; min-width:0; overflow-wrap:anywhere; font-size:11px; }
.report-observation-label b { font-weight:700; }
.report-observation-label small { color:var(--muted); font-size:10px; line-height:1.5; }
.report-observation-track { display:block; height:12px; border-radius:99px; background:var(--brand-soft); overflow:hidden; }
.report-observation-track i { display:block; height:100%; width:var(--bar); border-radius:inherit; background:var(--brand); }
.report-observation-track i.unknown { width:100%; background:repeating-linear-gradient(-45deg,var(--line-strong) 0 3px,transparent 3px 6px); }
.report-observations strong { color:var(--brand-deep); font-size:11px; text-align:end; white-space:nowrap; }
.report-help { display:grid; gap:4px; margin-top:17px; padding:16px; border:1px solid var(--line); border-radius:13px; background:var(--brand-soft); }
.report-help p { margin:0; color:var(--ink); font-size:11px; line-height:1.8; overflow-wrap:anywhere; }
.report-drill { display:grid; gap:15px; }
.report-drill-value { margin:0; color:var(--brand-deep); font-size:16px; font-weight:800; }
.report-drill-metrics { display:flex; flex-wrap:wrap; gap:6px; }
.report-drill-metrics span { padding:7px 9px; border:1px solid var(--line); border-radius:9px; background:var(--brand-soft); color:var(--ink); font-size:11px; }
.report-drill section { min-width:0; }
.report-drill section h3 { font-size:13px; }
.report-drill-list, .report-session-list { display:grid; gap:8px; }
.report-drill-list button, .report-session-list article { display:grid; gap:3px; min-width:0; padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:var(--surface); text-align:start; }
.report-drill-list button { min-height:50px; }
.report-drill-list button:hover { border-color:var(--brand); }
.report-drill-list strong, .report-session-list strong { font-size:12px; overflow-wrap:anywhere; }
.report-drill-list small, .report-session-list small, .report-intervals { color:var(--muted); font-size:11px; }
@media (max-width:900px) { .daily-reports-grid, .report-groups { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) {
  .global-scope { margin:10px 0 17px; }
  .global-scope > summary { padding:10px 12px; }
  .global-scope-body { padding:0 12px 15px; }
  .global-scope-controls > label:not(.scope-undated) { flex:1 1 130px; }
  .global-scope-controls > button { flex:1 1 115px; }
  .daily-reports-grid, .report-groups, .report-group-chart-grid { grid-template-columns:minmax(0,1fr); }
  .report-card > button { min-height:150px; }
  .reports-dialog { position:fixed; inset:0; margin:0; width:100%; max-width:100%; height:100dvh; max-height:100dvh; border:0; border-radius:0; }
  .reports-dialog-head { padding:12px; }
  .reports-dialog-head h2 { font-size:15px; }
  .reports-dialog-body { padding:14px 12px calc(22px + env(safe-area-inset-bottom)); }
  .report-observations button { grid-template-columns:minmax(0,1fr) minmax(60px,1fr); gap:5px 10px; }
  .report-observation-track { grid-column:1 / -1; grid-row:2; }
}
@media (prefers-reduced-motion:reduce) { .report-group:hover { transform:none; } }
@media print { .global-scope, .reports-dialog { display:none !important; } }

/* Compact, optional explanations. The native modal keeps keyboard focus in
   the help while leaving the underlying task editor visibly in context. */
.capacity-calendar-scope { display:block; margin-top:8px; color:var(--ink); font-size:12px; line-height:1.5; }
.context-help-heading {
  display:inline-flex; align-items:center; flex-wrap:nowrap; gap:2px;
  min-width:0; max-width:100%; vertical-align:middle;
}
.context-help-heading:is(div) { display:flex; width:fit-content; }
.context-help-heading > :not(.context-help-trigger) { min-width:0; overflow-wrap:anywhere; }
.availability summary > .context-help-heading { font-size:inherit; font-weight:inherit; color:inherit; }
.context-help-heading-local { color:var(--ink); font-size:13px; font-weight:700; line-height:1.5; }
.reports-intro > .context-help-heading-local { color:var(--brand-deep); }
.settings-layout > .context-help-heading-local { grid-column:1 / -1; }
.filter-pane > .context-help-heading-local { justify-self:start; }
.filters-open-copy > .context-help-heading,
.filter-kind-copy > .context-help-heading { justify-self:start; }
.reports-dialog-head > .context-help-heading { flex:1; }
.reports-dialog-head > .context-help-heading h2 { flex:1; }
.context-help-heading :is(h2,h3,p) { margin-block:0; }
.settings-panel > .context-help-heading { margin:6px 0 23px; }
#completionForm > .context-help-heading { margin-bottom:9px; }
.context-help-trigger {
  position:relative; display:inline-flex; align-items:center; justify-content:flex-start;
  vertical-align:middle; flex:none; width:44px; min-width:44px; height:44px;
  padding:0; padding-inline-start:7px; margin:0; border:0; border-radius:50%; background:transparent; isolation:isolate;
  color:var(--ink); font-size:13px; font-weight:700; line-height:1; cursor:pointer;
}
.context-help-trigger::before {
  content:''; position:absolute; inset-block:11px; inset-inline-start:0; width:22px; border:1px solid var(--line-strong);
  border-radius:50%; background:var(--surface); z-index:-1;
}
.context-help-trigger:hover::before { background:var(--brand-soft); border-color:var(--brand); }
.context-help-trigger:focus-visible, .context-help-close:focus-visible {
  outline:3px solid #7956b2; outline-offset:3px;
}
.context-help-dialog {
  position:fixed; inset:0; width:min(420px,calc(100vw - 28px));
  max-height:min(65dvh,520px); margin:auto; padding:0; overflow:hidden;
  border:1px solid var(--line-strong); border-radius:17px;
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow);
}
.context-help-dialog::backdrop { background:rgba(25,23,34,.4); }
.context-help-head { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--brand-soft); }
.context-help-head h2 { flex:1; min-width:0; margin:0; font-size:16px; line-height:1.5; }
.context-help-close { display:grid; place-items:center; width:44px; height:44px; flex:none; padding:0; border:0; border-radius:10px; background:transparent; color:var(--ink); font-size:25px; cursor:pointer; }
.context-help-close:hover { background:rgba(0,0,0,.07); }
.context-help-body { max-height:calc(min(65dvh,520px) - 69px); overflow:auto; overscroll-behavior:contain; padding:15px 18px 18px; }
.context-help-body p { margin:0 0 11px; font-size:14px; line-height:1.8; overflow-wrap:anywhere; white-space:pre-wrap; }
.context-help-body p:last-child { margin-bottom:0; }
.report-group-wrap { position:relative; min-width:0; }
.report-group-wrap > .report-group { width:100%; height:100%; min-height:128px; }
.report-group-wrap > .report-group > strong { padding-inline-end:46px; }
.report-group-wrap > .context-help-trigger { position:absolute; left:7px; top:52px; z-index:1; }
.report-group-wrap:nth-child(3n+1) > .report-group { background:color-mix(in srgb,var(--brand-soft) 45%,var(--surface)); }
.report-group-wrap:nth-child(3n+2) > .report-group { background:color-mix(in srgb,var(--butter,#fff0ca) 20%,var(--surface)); }
.report-group-wrap:nth-child(3n) > .report-group { background:var(--surface); }
@media (max-width:600px) {
  .context-help-dialog { width:calc(100vw - 24px); max-height:min(72dvh,540px); }
  .context-help-body { max-height:calc(min(72dvh,540px) - 69px); padding:14px; }
  .context-help-trigger { width:44px; min-width:44px; height:44px; }
}

/* Keep the task editor's actions reachable inside a short mobile viewport.
   Only the middle pane scrolls; header and save actions never shrink behind the
   dialog's clipped edge. The safe-area padding leaves the final row tappable. */
#editor #taskForm { max-height: calc(min(90dvh, 940px) - 2px); min-height: 0; overflow: hidden; }
#editor .dialog-head,
#editor .dialog-actions { flex-shrink: 0; }
#editor .editor-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@media (max-width: 600px), (pointer: coarse) {
  #editor .dialog-actions { padding-bottom: calc(21px + env(safe-area-inset-bottom)); }
}

/* Inline search and filter accordion. Native details keep keyboard and focus behavior. */
.main-content { grid-template-areas:'header' 'ribbon' 'toolbar' 'assistant' 'stage' 'footer'; }
.workspace-toolbar { display:block; margin:0 0 20px; min-width:0; }
.workspace-toolbar[hidden] { display:none; }
.filters-accordion { min-width:0; border:1px solid var(--line-strong); border-radius:17px; background:var(--surface); box-shadow:0 5px 18px #1e263008; }
.filters-open { display:flex; align-items:center; gap:13px; min-height:66px; padding:11px 16px; cursor:pointer; text-align:start; list-style:none; }
.filters-open::-webkit-details-marker, .filter-kind > summary::-webkit-details-marker { display:none; }
.filters-open::marker, .filter-kind > summary::marker { content:''; }
.filters-open:hover, .filter-kind > summary:hover { background:color-mix(in srgb,var(--brand-soft) 26%,var(--surface)); }
.filters-open:focus-visible, .filter-kind > summary:focus-visible { outline:3px solid var(--brand); outline-offset:2px; border-radius:12px; }
.filters-open-icon { flex:0 0 23px; width:23px; height:23px; color:var(--brand-deep); }
.filters-open-copy { display:grid; gap:1px; min-width:0; flex:1; }
.filters-open-copy strong { color:var(--ink); font-size:14px; line-height:1.55; }
.filters-open-copy small { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; color:var(--muted); font-size:11px; line-height:1.55; overflow-wrap:anywhere; }
.filters-count { flex:0 0 auto; padding:3px 9px; border-radius:99px; color:var(--brand-deep); background:var(--brand-soft); font-size:11px; font-weight:750; white-space:nowrap; }
.filters-chevron { flex:0 0 16px; width:16px; height:16px; color:var(--brand-deep); transition:transform .15s; }
.filters-accordion[open] .filters-chevron { transform:rotate(-90deg); }
.filters-accordion:not([open]) > .filters-content { display:none; }
.filters-content { display:grid; gap:10px; min-width:0; padding:16px; border-top:1px solid var(--line); }
.filters-intro, .filter-pane > p { margin:0; color:var(--muted); font-size:12px; line-height:1.8; }
.filters-notice { margin:0; padding:10px 13px; border-radius:10px; color:var(--brand-deep); background:var(--brand-soft); font-size:12px; line-height:1.7; }
.filters-notice[data-error='true'] { color:#8c3429; background:#fff1ed; }
.filter-kind { min-width:0; border:1px solid var(--line); border-radius:13px; background:var(--surface); }
.filter-kind[hidden], .filters-notice[hidden] { display:none; }
.filter-kind > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:62px; padding:10px 15px; cursor:pointer; text-align:start; list-style:none; }
.filter-kind-copy { display:grid; gap:0; min-width:0; }
.filter-kind-copy strong { color:var(--ink); font-size:13px; line-height:1.6; }
.filter-kind-copy small { color:var(--muted); font-size:11px; line-height:1.55; overflow-wrap:anywhere; }
.filter-kind-chevron { color:var(--brand-deep); font-size:22px; line-height:1; transition:transform .15s; }
.filter-kind[open] .filter-kind-chevron { transform:rotate(180deg); }
.filter-kind:not([open]) > .filter-pane { display:none; }
.filter-pane { display:grid; align-content:start; justify-items:start; gap:12px; min-width:0; padding:14px 15px 17px; border-top:1px solid var(--line); }
.filter-pane > label { display:grid; gap:7px; width:100%; color:var(--ink); font-size:12px; font-weight:700; }
.filter-pane > label input { width:100%; }
.filter-pane .global-scope-controls { width:100%; margin:0; }
.filter-pane .global-scope-controls > label:not(.scope-undated) { flex:1 1 180px; }
.filter-pane .global-scope-controls .scope-undated { max-width:none; flex-basis:100%; }
.filter-pane .global-scope-controls .scope-undated input { flex:0 0 auto; }
.filter-pane .global-scope-controls > button { flex:1 1 140px; }
.filter-pane .scope-policy-note, .filter-pane .filter-note, .filter-pane #scopeFeedback { margin:0; color:var(--muted); font-size:12px; line-height:1.75; }
.filter-pane #scopeFeedback[data-error='true'] { color:#9a3d34; }
.filter-area-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; }
.filter-area-options button { display:flex; align-items:center; justify-content:flex-start; gap:8px; min-height:48px; padding:10px 13px; border:1px solid var(--line-strong); border-radius:12px; background:var(--surface); text-align:start; font-size:12px; }
.filter-area-options button:hover { border-color:var(--brand); background:var(--brand-soft); }
.filter-area-options button.selected { border-color:var(--brand); background:var(--brand-soft); color:var(--brand-deep); font-weight:750; }
.filter-area-options .area-dot { flex:0 0 8px; width:8px; height:8px; }
.filter-pane .filter-segment { width:100%; gap:6px; padding:0; background:transparent; }
.filter-pane .filter-segment button { flex:1 1 100px; min-height:44px; border:1px solid var(--line-strong); background:var(--surface); font-size:12px; }
.filter-pane .filter-segment button[aria-pressed='true'] { border-color:var(--brand); color:var(--brand-deep); background:var(--brand-soft); box-shadow:none; }
.filter-reset-all { justify-self:start; min-height:44px; margin-top:4px; padding:8px 11px; border-radius:10px; color:var(--brand-deep); font-size:12px; font-weight:700; }
.filter-reset-all:hover { background:var(--brand-soft); }
@media (max-width:600px) {
  .workspace-toolbar { margin-bottom:16px; }
  .filters-open { min-height:64px; padding:10px 12px; gap:9px; }
  .filters-open-copy strong { font-size:13px; }
  .filters-count { padding:3px 6px; font-size:10px; }
  .filters-content { padding:12px; }
  .filter-area-options { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:360px) { .filters-count { white-space:normal; text-align:center; } .filter-kind > summary { padding-inline:11px; } .filter-pane { padding-inline:11px; } }
@media print { .workspace-toolbar { display:none !important; } }

/* Safari zooms the page when a focused text-like control is below 16px.
   Preserve pinch zoom while keeping small-screen form controls readable. */
@media (max-width: 600px), (pointer: coarse) {
  body input:not([type]),
  body input:is([type='text'],[type='search'],[type='date'],[type='time'],[type='datetime-local'],[type='number'],[type='email'],[type='tel'],[type='url'],[type='password']),
  body select,
  body textarea { font-size: 16px !important; }
  body .duration-control input[type='number'] { font-size: 20px !important; }
}

/* Responsive form containment. Native date/time controls have an intrinsic
   width on iOS; keep their internals inside the field and give phone forms
   one readable column instead of squeezing two date/choice fields together. */
.form-grid > *, .duration-field { min-width:0; max-width:100%; }
.form-grid > label { align-self:stretch; overflow-wrap:anywhere; }
.form-grid > label > :is(input,select) { margin-block-start:auto; }
.editor-body :is(input:not([type=checkbox]):not([type=radio]),select,textarea), .filter-pane :is(input:not([type=checkbox]):not([type=radio]),select),
.settings-pages :is(input:not([type=checkbox]):not([type=radio]),select) {
  box-sizing:border-box; width:100%; min-width:0; max-width:100%;
}
input:is([type=date],[type=time],[type=datetime-local]) {
  min-inline-size:0; max-inline-size:100%; direction:ltr; text-align:start;
}
input:is([type=date],[type=time],[type=datetime-local])::-webkit-date-and-time-value {
  min-width:0; text-align:start;
}
input:is([type=date],[type=time],[type=datetime-local])::-webkit-datetime-edit {
  min-width:0; padding:0;
}
.dialog-head > div, .dashboard-report-head > div, .today-detail-head > div,
.collection-heading > div, .settings-pages .sp-header > div { min-width:0; }
.dialog-head h2, .dashboard-report-head :is(h2,h3),
.collection-heading :is(h2,h3), .task-card h3 { overflow-wrap:anywhere; }
.dialog-head > button { flex-shrink:0; min-width:44px; min-height:44px; }

/* Match each form to its containing dialog. Only the middle pane scrolls.
   Includes the recurrence editor, which had the same clipping as task details. */
#editor #taskForm, #recurrenceEditor #recurrenceForm {
  max-height:calc(min(90dvh,940px) - 2px); min-height:0; overflow:hidden;
}
:is(#editor,#recurrenceEditor) :is(.dialog-head,.dialog-actions) { flex-shrink:0; }
:is(#editor,#recurrenceEditor) .editor-body {
  flex:1 1 auto; min-height:0; overflow-y:auto; scroll-padding-block:16px;
}
.dialog-inline-notice {
  flex:0 0 auto; margin:0; padding:11px 20px; max-height:20dvh; overflow:auto;
  border-block-start:1px solid #d5a66b; background:#fff4df; color:#69451e;
  font-size:14px; line-height:1.7; overflow-wrap:anywhere;
}
@media(max-width:600px) {
  :is(#taskForm,#recurrenceForm) .form-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  :is(#taskForm,#recurrenceForm) .duration-grid { gap:18px; }
  .editor-body :is(input:not([type=checkbox]):not([type=radio]),select) { min-height:48px; }
  .editor-body, .editor-body.recurrence-fields { padding-inline:18px; }
  :is(#editor,#recurrenceEditor) .dialog-head { padding:15px 18px; gap:12px; }
  :is(#editor,#recurrenceEditor) .dialog-head h2 { font-size:21px; line-height:1.5; }
  :is(#editor,#recurrenceEditor) .dialog-actions {
    padding:12px 18px calc(12px + env(safe-area-inset-bottom)); gap:8px;
  }
  :is(#editor,#recurrenceEditor) .dialog-actions > button {
    min-height:46px; max-width:100%; white-space:normal; overflow-wrap:anywhere;
  }
  #taskForm .dialog-actions > button[type=submit],
  #recurrenceForm .dialog-actions > button[type=submit] { flex:1 1 140px; }
  .dialog-inline-notice { padding-inline:18px; font-size:13px; }
}
@media(max-height:600px) {
  :is(#editor,#recurrenceEditor) .dialog-head { padding-block:9px; }
  :is(#editor,#recurrenceEditor) .dialog-head h2 { font-size:20px; }
  :is(#editor,#recurrenceEditor) .editor-body { padding-block:14px; }
  :is(#editor,#recurrenceEditor) .dialog-actions { padding-block:9px; }
}

/* Short confirmation forms also need a scroll path in landscape/with keyboard. */
:is(#completion,#abandonment,#unavailableConflict) { overflow-y:auto; overscroll-behavior:contain; }