/* Taste v2 framed-sheet, seed 621022970. Redrawn after the ledger treatment
   failed the user's visual review. A cool dispatch frame holds one white sheet.
   1440 = 228 sidebar + 1204 sheet + 8 inset; sheet inner = 1204 - 2 edge - 48 padding = 1154.
   One 24px content gutter. Mobile: 390 = 16 + 358 + 16. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('./assets/fonts/plex-sans-400.woff') format('woff')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('./assets/fonts/plex-sans-500.woff') format('woff')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('./assets/fonts/plex-sans-600.woff') format('woff')}
:root {
  color-scheme: light;
  --ground: #f0f4f4;
  --surface: #ffffff;
  --raised: #f4f7f7;
  --active: #e5ebec;
  --text: #202b2e;
  --muted: #5f6c70;
  --faint: #5f6b70;
  --border: #e6ebed;
  --rule: #f0f3f4;
  --control: #cdd7d9;
  --primary: #24363b;
  --accent: #1b6c80;
  --positive-bg: #edf6f0;
  --positive-ink: #24583e;
  --warning-bg: #fffbeb;
  --warning-ink: #78500f;
  --negative-bg: #fff1f0;
  --negative-ink: #9b292e;
  --radius: 8px;
  --control-radius: 6px;
  --gap: 24px;
  --sidebar: 228px;
  --font: 'IBM Plex Sans', 'Noto Sans CJK SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --mono: Consolas, 'SFMono-Regular', monospace;
}

* { box-sizing: border-box; }
html { scroll-padding-block: 24px; }
body { margin: 0; color: var(--text); background: var(--ground); font-family: var(--font); font-size: 14px; line-height: 1.6; font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: 3px; overflow-wrap: anywhere; }
.artifact-download { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 10px; margin-inline-start: 8px; }
button, input, textarea, select { font: inherit; }
button, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; max-width: 100%; padding: 8px 14px;
  border: 1px solid var(--control); border-radius: var(--control-radius);
  background: var(--surface); color: var(--text); line-height: 1.45;
  text-decoration: none; overflow-wrap: anywhere; cursor: pointer;
}
button:hover, .button:hover { border-color: #a8a8a8; background: #f2f2f2; }
button:active, .button:active { background: #e5e5e5; }
button:disabled, input:disabled, select:disabled, textarea:disabled {
  opacity: 1; color: var(--faint); background: #f2f2f2; cursor: not-allowed;
}
button:disabled { border-color: var(--border); }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--text); outline-offset: 3px;
}
.primary { border-color: var(--primary); color: var(--surface); background: var(--primary); }
.primary:hover { border-color: #333333; color: var(--surface); background: #333333; }
.primary:active { background: #454545; }
.danger { color: var(--negative-ink); }
.subtle { border-color: transparent; background: transparent; }
.subtle:hover { border-color: var(--border); }

h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4, p, dd, dt, li, [data-label] { overflow-wrap: anywhere; }
h1 { margin-bottom: 0; font-size: 22px; line-height: 1.35; font-weight: 600; }
h2 { margin-bottom: 16px; font-size: 16px; line-height: 1.45; font-weight: 600; }
h3 { margin-bottom: 8px; font-size: 16px; line-height: 1.5; font-weight: 600; }
h4 { margin-bottom: 8px; font-size: 14px; line-height: 1.5; font-weight: 600; }
p { margin-bottom: 12px; }
p:last-child { margin-bottom: 0; }
small, .small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.muted, .label, .breadcrumbs, .task-meta, .scope-note { color: var(--muted); }
.label, .breadcrumbs, .scope-note { font-size: 12px; }
.breadcrumbs { margin-bottom: 8px; }
.scope-note { margin-top: 8px; overflow-wrap: anywhere; }
.mono, code, pre { font-family: var(--mono); }
.mono, code { overflow-wrap: anywhere; }
pre { max-width: 100%; padding: 16px; border-radius: var(--control-radius); background: var(--raised); font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow: auto; overflow-wrap: anywhere; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ui-icon { display: block; flex: 0 0 18px; width: 18px; height: 18px; }
.icon-button { min-width: 44px; min-height: 44px; padding: 10px; }
.sidebar nav .ui-icon { color: var(--muted); }
.sidebar nav .active .ui-icon { color: var(--text); }

.shell, #shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.sidebar {
  position: sticky; top: 0; align-self: start; display: flex; flex-direction: column;
  min-width: 0; width: var(--sidebar); height: 100vh; height: 100dvh;
  padding: 20px 16px 16px; background: var(--ground); overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 20px; font-weight: 600; }
.brand > :not(.brand-mark) { min-width: 0; }
.brand strong { line-height: 1.4; font-weight: 600; }
.brand small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-mark { display: inline-grid; flex: 0 0 34px; place-items: center; width: 34px; height: 40px; color: var(--accent); }
.brand-mark .ui-icon { width: 30px; height: 30px; flex-basis: 30px; stroke-width: 1.9; }
.sidebar nav, nav.nav, div.nav { display: grid; gap: 24px; margin-top: 32px; }
.nav-group { display: grid; gap: 3px; }
.nav-group-label { margin: 0 12px 6px; font-size: 12px; color: var(--muted); }
.sidebar nav button, .sidebar nav a, button.nav, a.nav { justify-content: flex-start; width: 100%; min-height: 38px; border-color: transparent; background: transparent; padding: 8px 12px; text-align: left; text-decoration: none; }
.sidebar nav .active, .sidebar nav [aria-current='page'], button.nav.active, a.nav.active { background: var(--active); color: var(--text); font-weight: 500; }
.sidebar nav button:hover, .sidebar nav a:hover { border-color: transparent; background: #e9efef; }
.account { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; margin-top: auto; padding: 16px 4px 0; font-size: 12px; }
#account-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.account-copy { display: grid; min-width: 0; line-height: 1.6; }
.account-person { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; }
.account-role { color: var(--muted); font-size: 12px; }
.account button { flex: none; }
.person-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; font-size: 11px; line-height: 1; font-weight: 500; white-space:nowrap; overflow:hidden; }
.person-avatar-0 { color:#375d70; background:#e9f1f5; }
.person-avatar-1 { color:#49664d; background:#edf3eb; }
.person-avatar-2 { color:#835259; background:#f6edef; }
.person-avatar-3 { color:#775c2d; background:#f6f1e5; }
.person-avatar > svg { display:block; width:18px; height:18px; }
.person-identity { display:inline-flex; align-items:center; gap:9px; min-width:0; }
.mobile-nav, .mobile-menu { display: none; }
.main, #shell > main { min-width: 0; padding: 0 8px 8px 0; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); min-height: 64px; padding: 10px 28px; margin: 0; }
.page-header > div { min-width: 0; }
.page-header > div:first-child { flex: 1 1 180px; }
.page-header p { margin: 0; color: var(--muted); }
.header-actions { display: flex; flex: none; align-items: center; justify-content: flex-end; gap: 10px; }
.header-actions .icon-button { min-width:36px; min-height:36px; padding:8px; border-color:transparent; background:transparent; }
.workspace-sheet { min-width: 0; min-height: calc(100dvh - 72px); padding: 24px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
#content { min-width: 0; }
#content > * + *, .section-stack > * + * { margin-top: var(--gap); }

.toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.toolbar > div { min-width: 0; }
.toolbar label { margin-bottom: 0; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; min-width: 0; }
.row-actions > * { flex-shrink: 0; }
.row-actions .subtle { padding-inline: 8px; }

.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); }
.project-grid-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.project-card { min-width:0; padding:24px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.project-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.project-title { justify-content:flex-start; min-height:44px; margin:-8px 0 0; padding:8px 0; border:0; border-radius:0; background:none; text-align:left; font-size:16px; font-weight:500; }
.project-title:hover { background:none; color:var(--accent); }
.project-description { display:-webkit-box; min-height:44px; margin:8px 0 24px; color:var(--muted); font-size:13px; line-height:22px; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.project-progress { display:grid; gap:10px; margin-bottom:24px; }
.project-progress > div { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:12px; }
.project-progress .dashboard-value { color:var(--text); font-size:14px; }
.project-progress .dashboard-track { height:5px; }
.project-people { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.project-people strong { display:block; font-size:13px; font-weight:500; }
.project-people small { display:block; }
.avatar-stack { display:flex; padding-left:6px; }
.avatar-stack .person-avatar { margin-left:-6px; border:2px solid var(--surface); width:28px; height:28px; }
.avatar-more { align-content:center; min-width:24px; text-align:right; font-size:12px; color:var(--muted); }
.project-card-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; padding-top:12px; border-top:1px solid var(--rule); }
.project-card-actions button { min-height:36px; padding:6px 8px; font-size:12px; }
.availability { display:inline-flex; align-items:center; gap:7px; font-size:12px; }
.availability::before { content:''; flex:none; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.availability.inactive::before { background:var(--muted); }

.panel { min-width: 0; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-header > div { min-width: 0; }
.panel-header h2, .panel-header h3 { margin-bottom: 0; }
.panel-header p { margin: 4px 0 0; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); align-items: start; gap: var(--gap); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--gap); }
.grid > *, .grid-2 > * { min-width: 0; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.metric { min-width: 0; padding: 16px 20px; }
.metric + .metric { border-left: 1px solid var(--border); }
.metric .label, .metric > span:first-child { display: block; font-size: 12px; color: var(--muted); }
.metric strong, .metric .value { display: block; margin-top: 4px; font-size: 26px; line-height: 1.3; font-weight: 500; font-variant-numeric: tabular-nums; }
.metric small { display: block; margin-top: 4px; }
.metric .value small { display: inline; margin-left: 4px; font-size: 14px; }

.filters { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.filters > .field, .filters > label { flex: 1 1 150px; min-width: 0; margin: 0; }
.filters > .field:first-child { flex-basis: 240px; }
.filters input, .filters select { min-height: 40px; }
.filters button { flex: 0 0 auto; }
.toolbar:has(.filter-disclosure) { position:relative; }
.filter-disclosure > .filters { position:absolute; top:calc(100% + 8px); right:0; z-index:8; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; width:min(560px,100%); padding:20px; margin:0; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:0 8px 24px rgb(0 0 0 / 8%); }
.filter-disclosure > .filters > .field:first-child { grid-column:1/-1; }
.tab-list { display: flex; gap: 16px; max-width: 100%; margin-bottom: 20px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab-list .tab { flex: none; min-height: 44px; margin-bottom: -1px; padding: 8px 2px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); white-space: nowrap; }
.tab-list .tab.active, .tab-list .tab[aria-selected='true'] { border-bottom-color: var(--accent); color: var(--text); }

.table-wrap { max-width: 100%; overflow: auto; border-radius: var(--control-radius); }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { position: sticky; top: 0; z-index: 1; padding: 8px 12px; color: var(--muted); background: var(--surface); font-size: 12px; font-weight: 400; text-align: left; white-space: nowrap; }
.data-table td { min-width: 0; padding: 12px; border-top: 1px solid var(--rule); vertical-align: top; overflow-wrap: anywhere; }
.data-table th:first-child, .data-table td:first-child { padding-left: 0; }
.data-table th:last-child, .data-table td:last-child { padding-right: 0; }
.data-table th.num, .data-table td.num { text-align: right; }
.data-table td:first-child { width: 34%; }
.data-table td strong, .data-table td small { display: block; }
.data-table td small { margin-top: 3px; }
.data-table td .status { display: inline-flex; }
.data-table tbody tr:hover { outline: 1px solid var(--control); outline-offset: -1px; }
.data-table .row-actions { flex-wrap: nowrap; }
.task-list { min-width: 0; }
.task-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--gap); padding: 16px 0; border-top: 1px solid var(--rule); }
.task-row:first-child { border-top: 0; padding-top: 0; }
.task-row:last-child { padding-bottom: 0; }
.task-main { min-width: 0; }
.task-main h3 { margin-bottom: 6px; font-size: 15px; }
.task-main h3 > button { justify-content: flex-start; min-height: 32px; padding: 0; border: 0; text-align: left; background: transparent; font-weight: 600; }
.task-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12px; }
.task-meta > * { min-width: 0; overflow-wrap: anywhere; }
.task-meta .person-avatar { width:24px; height:24px; flex-basis:24px; font-size:11px; }
.task-meta .person-identity { gap:6px; }
.task-main > .task-title { justify-content:flex-start; min-height:44px; padding:8px 0; border:0; background:none; font-weight:500; text-align:left; }
#content:is([data-view='pool'],[data-view='mine']) .task-row { grid-template-columns:minmax(0,1fr) auto; gap:8px; }
#content:is([data-view='pool'],[data-view='mine']) .task-row > .status { margin-top:10px; }
#content:is([data-view='pool'],[data-view='mine'],[data-view='members'],[data-view='departments'],[data-view='resources'],[data-view='ai'],[data-view='notifications']) > .panel { padding:0; border:0; }
.data-table .row-actions button { min-height:36px; border-color:transparent; background:none; font-size:12px; }
.tab-list > button { min-height:44px; padding:8px 0; border:0; border-bottom:2px solid transparent; border-radius:0; background:none; color:var(--muted); }
.tab-list > button[aria-current='page'] { border-bottom-color:var(--accent); color:var(--text); }
.queue-toolbar { border-bottom:1px solid var(--border); padding-bottom:8px; }
.queue-toolbar > button { border-color:transparent; background:none; color:var(--muted); }
.queue-toolbar > button[aria-pressed='true'] { border-color:transparent; background:var(--raised); color:var(--text); }
.task-main > p { margin: 8px 0 0; }
.task-row .row-actions { max-width: 380px; }
.status { display: inline-flex; flex: none; align-items: center; width: max-content; max-width: 100%; min-height: 22px; padding: 2px 8px; border-radius: 4px; background: var(--raised); color: #3d3d3d; font-size: 12px; line-height: 1.5; font-weight: 500; white-space: nowrap; }
.status.done, .status.accepted, .status.in_progress, .status.positive, .status[data-status='done'], .status[data-status='in_progress'] { background: var(--positive-bg); color: var(--positive-ink); }
.status.review, .status.offered, .status.rework, .status.warning, .status[data-status='review'], .status[data-status='offered'] { background: var(--warning-bg); color: var(--warning-ink); }
.status.blocked, .status.negative, .status[data-status='blocked'] { background: var(--negative-bg); color: var(--negative-ink); }
.notice, .form-error, #flash:not(:empty) { min-width: 0; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--control-radius); background: var(--surface); color: var(--text); font-size: 14px; overflow-wrap: anywhere; }
.notice { background: var(--warning-bg); border-color: #ebd9ab; color: var(--warning-ink); }
.notice p + p { margin-top: 8px; }
.form-error, #flash.error, #feedback.error { border-color: #e6c5c2; color: var(--negative-ink); }
#flash:not(:empty) { margin-bottom: 16px; }
.empty { grid-column: 1 / -1; min-width: 0; padding: 16px; border: 1px dashed var(--control); border-radius: var(--control-radius); color: var(--muted); background: var(--surface); }
.empty > p { margin: 0; }
.empty .row-actions { justify-content: flex-start; margin-top: 12px; }
.loading-bar { display: inline-block; width: 8ch; height: 1em; border-radius: 2px; background: #e8e8e8; vertical-align: middle; }

form, .form-grid { display: grid; min-width: 0; gap: 16px; }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: grid; align-content: start; min-width: 0; gap: 8px; }
.field > label, label.field > span, .field > .label { display: block; color: var(--text); font-size: 14px; font-weight: 500; }
label { display: block; margin-bottom: 8px; color: var(--text); font-size: 14px; font-weight: 500; }
.field label { margin-bottom: 0; }
input, textarea, select { width: 100%; min-width: 0; min-height: 42px; padding: 10px 12px; border: 1px solid var(--control); border-radius: var(--control-radius); background: var(--surface); color: var(--text); line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
textarea { min-height: 112px; resize: vertical; }
textarea[readonly] { background: #f6f6f6; }
input[type='checkbox'], input[type='radio'] { flex: 0 0 18px; width: 18px; min-height: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--text); }
input[type='file'] { padding: 8px; }
input[type='file']::file-selector-button { min-height: 30px; margin-right: 12px; border: 1px solid var(--control); border-radius: 4px; background: var(--ground); color: var(--text); font: inherit; }
input[aria-invalid='true'], textarea[aria-invalid='true'], select[aria-invalid='true'] { border-color: var(--negative-ink); }
fieldset { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--control-radius); }
legend { padding-inline: 4px; font-weight: 500; }
.full { grid-column: 1 / -1; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 8px 16px; }
.check-label { display: flex; align-items: center; gap: 10px; min-height: 36px; margin-bottom: 0; padding-block: 4px; font-weight: 400; overflow-wrap: anywhere; }
.check-label > span { min-width: 0; }
.field-help { color: var(--muted); font-size: 12px; }
.preserve-lines { white-space: pre-wrap; overflow-wrap: anywhere; }
.proposal-task, .review-record { min-width: 0; padding-block: 16px; border-top: 1px solid var(--rule); }
.proposal-task h4, .review-record h4 { margin: 0 0 12px; font-size: 16px; }
.proposal-task h5 { margin: 16px 0 8px; font-size: 14px; }
.detail-grid { display: grid; grid-template-columns: minmax(88px, .32fr) minmax(0, 1fr); gap: 8px 16px; }
.detail-grid dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.artifact-meta { display: block; margin-top: 4px; color: var(--muted); }
.dependency-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dependency-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dependency-list button { max-width: 100%; text-align: left; }
.task-source-evidence { margin-block: 20px; padding-block: 16px; border-block: 1px solid var(--rule); }
.task-source-evidence .panel-header { margin-bottom: 8px; }
.task-source-evidence h3 { margin: 0; }
.task-source-evidence blockquote { margin: 4px 0 12px; padding: 8px 12px; border-left: 2px solid var(--accent); color: var(--muted); }
.queue-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.queue-toolbar button { min-height: 44px; }
.queue-toolbar button[aria-pressed='true'] { background:var(--raised); border-color:transparent; color:var(--text); }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; }
.active-filters p { flex: 1 1 240px; margin: 0; overflow-wrap: anywhere; }
.active-filters button { min-height: 44px; }
.split { display: grid; grid-template-columns: minmax(160px, .35fr) minmax(0, 1fr); align-items: start; gap: 24px; }
.settings-nav { display: grid; gap: 4px; }
.settings-nav button { justify-content: flex-start; border-color: transparent; background: transparent; text-align: left; }
.settings-nav .active { background: var(--raised); }
.settings-section { display: grid; grid-template-columns: minmax(180px, .55fr) minmax(0, 1fr); align-items: start; gap: 24px; padding-block: 24px; border-top: 1px solid var(--border); }
.settings-section:first-child { padding-top: 0; border-top: 0; }
.settings-section > * { min-width: 0; }
.settings-section h2 { margin-bottom: 8px; }
.settings-workspace { max-width:1108px; }
.settings-section { grid-template-columns:minmax(180px,.7fr) minmax(0,1.5fr); padding-block:32px; }
.settings-section > div:first-child > p { max-width:28ch; margin-bottom:16px; }
.settings-well { padding:20px 24px; border-radius:var(--radius); background:var(--raised); }
.settings-well .data-table th { background:var(--raised); }
.settings-well .data-table td { border-color:var(--border); }
.settings-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:16px; }
.settings-well .person-identity strong, .settings-well .person-identity small { display:block; }
.calendar-preview { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; max-width:260px; margin-top:20px; }
.calendar-preview > span { display:grid; justify-items:center; gap:6px; padding:10px 2px; border-radius:4px; background:var(--raised); color:var(--muted); font-size:12px; }
.calendar-preview > span.is-working { color:var(--text); }
.calendar-preview i { display:block; width:4px; height:4px; border-radius:50%; background:transparent; }
.calendar-preview .is-working i { background:var(--accent); }

dialog, #modal { width: min(760px, calc(100% - 48px)); max-width: calc(100% - 48px); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); background: var(--surface); box-shadow: 0 16px 48px rgb(0 0 0 / 16%); }
dialog[open], #modal[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: rgb(0 0 0 / 32%); }
dialog.wide, #modal.wide { width: min(1000px, calc(100% - 48px)); }
.dialog-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.dialog-head h2 { min-width: 0; margin: 0; font-size: 18px; }
.dialog-head > button { flex: 0 0 auto; min-width: 64px; min-height: 44px; padding-inline: 12px; white-space: nowrap; }
.dialog-head > .icon-button { min-width: 44px; }
.dialog-body, #modal-body { min-height: 0; min-width: 0; padding: 24px; overflow-y: auto; overscroll-behavior: contain; }
.dialog-body > * + *, #modal-body > * + * { margin-top: 16px; }
.dialog-body > form, #modal-body > form { margin-top: 0; }
.dialog-footer { display: flex; flex: none; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface); }
details { min-width: 0; }
summary { min-height: 40px; padding-block: 8px; color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
details[open] > summary { margin-bottom: 12px; }
details > textarea { margin-top: 8px; }
.login, #login { display:grid; grid-template-columns:minmax(0,1fr) minmax(400px,1fr); align-items:center; min-height:100vh; min-height:100dvh; padding:48px max(48px,calc((100vw - 1280px)/2)); gap:80px; }
.login-story { display:flex; flex-direction:column; align-items:flex-start; gap:40px; max-width:520px; padding:24px 0; }
.login-story h2 { margin:0 0 16px; font-size:32px; line-height:1.55; font-weight:500; }
.login-story p { margin:0; color:var(--muted); font-size:14px; }
.login-story > small { margin-top:-24px; }
.login-flow { display:block; width:100%; height:auto; overflow:visible; }
.login-flow-paper { fill:var(--surface); stroke:var(--border); }
.login-flow-lines { fill:none; stroke:#bdced2; stroke-width:1.5; }
.login-flow-text { fill:var(--muted); font-size:14px; }
.login-flow-node { fill:var(--accent); }
.login-flow-mark { fill:none; stroke:white; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.login-card { justify-self:center; width:min(420px,100%); min-width:0; padding:40px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.login-card .brand { margin-bottom: 28px; }
.login-card h1 { font-size: 24px; }
.login-card > p { margin-top: 8px; color: var(--muted); }
.login-card form { margin-top: 24px; }
.login-card form > button.primary { width: 100%; }
.login-card #feedback:not(:empty) { margin-top: 16px; }
meter, progress { width: 100%; height: 8px; accent-color: var(--accent); }
progress::-webkit-progress-bar { border-radius: 4px; background: var(--raised); }
progress::-webkit-progress-value { border-radius: 4px; background: var(--accent); }
progress::-moz-progress-bar { border-radius: 4px; background: var(--accent); }

/* Tablet: a complete top navigation row; data keeps useful column widths. */
@media (max-width: 1100px) {
  html { scroll-padding-block: 16px; }
  .login, #login { grid-template-columns:minmax(0,1fr); padding:24px; gap:0; }
  .login-story { display:none; }
  button, .button, input, select, textarea, summary { min-height: 44px; }
  button, .button { min-width:44px; }
  .shell, #shell { display: block; }
  .sidebar { position: static; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items:center; gap:8px; width:100%; height:auto; min-height:56px; padding:6px 20px; overflow:visible; }
  .sidebar .brand { grid-column:1; grid-row:1; }
  .sidebar .brand small { max-width:32ch; margin-top:0; }
  .sidebar .account { grid-column:2; grid-row:1; padding:0; margin:0; gap:4px; }
  .sidebar .account-copy { display:none; }
  .sidebar .account button { min-width:44px; min-height:44px; }
  .mobile-menu { display:inline-flex; grid-column:3; grid-row:1; padding:10px; min-width:44px; min-height:44px; }
  .sidebar nav, .sidebar nav.nav { display:none; grid-column:1/-1; grid-row:2; margin:8px 0; }
  .sidebar nav.open, .sidebar nav.nav.open { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
  .sidebar nav button, .sidebar nav a { min-height:44px; }
  .main, #shell > main { padding:0 12px 12px; }
  .workspace-sheet { min-height:calc(100dvh - 132px); padding:24px; border-radius:12px; }
  .page-header { min-height:64px; padding:10px 12px; }
  .header-actions .icon-button { min-width:44px; min-height:44px; }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(140px, .3fr) minmax(0, 1fr); gap: 16px; }
  .settings-section { grid-template-columns: 1fr; gap: 16px; }
  .task-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .task-row .row-actions { max-width: none; justify-content: flex-start; }
  .check-label { min-height: 44px; }
  .filters input, .filters select { min-height: 44px; }
  input[type='checkbox'], input[type='radio'] { min-height: 18px; }
  .dialog-head > button { min-width: 64px; }
  .data-table .row-actions { flex-wrap: wrap; }
  .project-grid-three { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .project-card-actions button, .data-table .row-actions button { min-width:44px; min-height:44px; }
}

/* Phone: title and first task stay close; long tables become complete row lists. */
@media (max-width: 640px) {
  .sidebar { min-height:56px; padding:6px 12px; gap:4px; }
  .brand { gap:8px; font-size:18px; }
  .brand-mark { flex-basis:28px; width:28px; height:32px; }
  .brand-mark .ui-icon { width:26px; height:26px; }
  .brand small { font-size:12px; }
  .sidebar .brand small { max-width:17ch; }
  .sidebar .account #account-name { display:none; }
  .sidebar .account button { padding:10px; }
  .sidebar nav.open, .sidebar nav.nav.open { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; padding:8px 0; }
  .nav-group { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .nav-group-label { grid-column:1/-1; }
  .sidebar nav button { min-width:0; padding-inline:10px; white-space:normal; }
  .main, #shell > main { padding:0; background:var(--surface); }
  .page-header { min-height:60px; padding:8px 16px; background:var(--ground); gap:8px; }
  .page-header > div:first-child { flex-basis:120px; }
  h1 { font-size:20px; }
  .header-actions { gap:4px; }
  .header-actions small { font-size:12px; }
  .workspace-sheet { min-height:calc(100dvh - 116px); padding:16px 16px 32px; border:0; border-radius:0; }
  .panel { padding: 16px; }
  .panel-header { gap: 8px; margin-bottom: 12px; }
  .panel-header h2 { font-size: 16px; }
  .panel-header .row-actions { gap: 4px; }
  .grid-2, .form-grid, .split { grid-template-columns: minmax(0, 1fr); }
  .project-grid, .project-grid-three { grid-template-columns:minmax(0,1fr); }
  .project-card { padding:20px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { padding: 12px 16px; }
  .metric + .metric { border-left: 0; }
  .metric:nth-child(even) { border-left: 1px solid var(--border); }
  .metric:nth-child(n+3) { border-top: 1px solid var(--border); }
  .metric:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .metric strong, .metric .value { font-size: 24px; }
  .filters { gap: 8px; }
  .filters > .field, .filters > label { flex-basis: calc(50% - 4px); }
  .filters > .field:first-child { flex-basis: 100%; }
  .filters .field > label { font-size: 12px; }
  .filters > button { width: 100%; }
  .toolbar { align-items: flex-start; gap: 8px; }
  .toolbar > .row-actions { justify-content: flex-start; }
  .task-main h3 { font-size: 15px; }
  .task-meta { font-size: 12px; }
  .task-row .row-actions { gap: 4px; }
  .task-row .row-actions > button { padding-inline: 10px; }
  .table-wrap { overflow: visible; }
  .data-table, .data-table tbody { display: block; }
  .data-table thead { display: none; }
  .data-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 16px 0; border-top: 1px solid var(--rule); }
  .data-table tbody tr:first-child { border-top: 0; padding-top: 0; }
  .data-table td { display: block; width: auto; min-width: 0; padding: 0; border-top: 0; }
  .data-table td:first-child { grid-column: 1 / -1; width: auto; padding: 0; }
  .data-table td:last-child { grid-column: 1 / -1; padding: 0; }
  .data-table td[data-label]::before { display: block; margin-bottom: 2px; color: var(--muted); font-size: 12px; font-weight: 400; content: attr(data-label); }
  .data-table td.num, .data-table th.num { text-align: left; }
  .data-table .row-actions { justify-content: flex-start; flex-wrap: wrap; }
  .data-table tbody tr:hover { outline: none; }
  .settings-nav { display: flex; gap: 4px; max-width: 100%; overflow-x: auto; }
  .settings-nav button { flex: none; white-space: nowrap; }
  dialog, #modal { width: calc(100% - 24px); max-width: calc(100% - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  dialog.wide, #modal.wide { width: calc(100% - 24px); }
  .dialog-head { padding: 16px; }
  .dialog-head h2 { font-size: 18px; }
  .dialog-body, #modal-body { padding: 16px; }
  .dialog-footer { padding: 12px 16px; }
  .dialog-footer > button.primary { flex: 1 1 auto; }
  .login, #login { padding: 16px; }
  .login-card { padding: 24px; }
}

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

/* Contextual explanations are native, touchable disclosures, not hover tips. */
.context-help{position:relative;display:inline-block;flex:none;vertical-align:middle;font-size:12px;font-weight:400}
.context-help>summary{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;list-style:none;cursor:pointer;color:var(--muted)}
.context-help>summary::-webkit-details-marker{display:none}.context-help>summary::marker{content:''}
.context-help>summary>span:first-child{display:flex;align-items:center;justify-content:center;width:19px;height:19px;border:1px solid var(--control);border-radius:50%;font-size:12px;line-height:1}
.context-help>summary:focus-visible,details.intake-source-detail>summary:focus-visible,details.intake-source-more>summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:5px}
.context-help[open]>summary{color:var(--accent)}
.context-help-body{position:absolute;right:0;top:100%;z-index:30;width:280px;max-width:calc(100vw - 48px);padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--surface);box-shadow:0 8px 26px #1a333318;color:var(--text);font-size:12px;line-height:1.8;text-align:left}
.context-help-body strong{display:block;font-size:13px;font-weight:600}.context-help-body p{margin:6px 0 0!important;line-height:1.8;color:var(--muted)}
.project-page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px}.project-page-heading>div{display:flex;align-items:center;gap:8px}.project-page-heading h2{margin:0;font-size:16px;font-weight:600}
.project-page-heading>div{position:relative;min-width:0}.project-page-heading .context-help{position:static}.project-page-heading .context-help-body{left:0;right:auto}
.project-grid .project-card{padding:20px}.project-card .project-description{margin:8px 0 16px;min-height:0;font-size:12px}
.project-health{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 12px}.project-health strong{font-size:24px;font-weight:500;font-variant-numeric:tabular-nums}.project-health strong small{font-size:12px;color:var(--muted);font-weight:400;margin-left:4px}
.project-state-track{display:flex;width:100%;height:6px;gap:3px;margin:0 0 14px;border-radius:3px;overflow:hidden}.project-state-track>span{min-width:0;background:var(--control)}.project-state-track>.is-done{background:var(--accent)}.project-state-track>.is-working{background:#6a9296}.project-state-track>.is-blocked{background:var(--negative-ink)}.project-state-track>.is-waiting{background:#d9e3e4}
.project-state-facts{display:flex;flex-wrap:wrap;gap:8px 14px;margin:0 0 20px;font-size:12px;color:var(--muted)}.project-state-facts strong{font-weight:500;color:var(--text)}.project-state-facts .has-blockers{color:var(--negative-ink)}
.project-card .project-people{margin:0 0 14px}.project-card .project-card-actions{justify-content:space-between;align-items:center;margin:0;padding-top:12px}.project-card-actions .project-next-action{min-height:44px;background:var(--text);border:1px solid var(--text);color:var(--surface);padding-inline:14px}
.project-more-actions{position:relative}.project-more-actions>summary{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;list-style:none;color:var(--muted);cursor:pointer}.project-more-actions>summary::-webkit-details-marker{display:none}.project-more-actions>summary::marker{content:''}
.project-more-actions>div{position:absolute;right:0;bottom:100%;z-index:8;display:grid;min-width:160px;padding:6px;border:1px solid var(--border);border-radius:8px;background:var(--surface);box-shadow:0 6px 22px #1a333318}.project-more-actions>div button{min-height:44px;border:0;justify-content:flex-start;background:transparent}
@media(max-width:640px){.project-page-heading{margin-bottom:12px}.project-grid .project-card{padding:16px}.project-health{margin-top:14px}.context-help-body{width:260px}}

.project-state-track>.is-done{fill:var(--accent)}.project-state-track>.is-review{fill:#3f6d73}.project-state-track>.is-working{fill:#8bacb0}.project-state-track>.is-blocked{fill:var(--negative-ink)}.project-state-track>.is-waiting{fill:#dce6e7}
.project-card-actions a.project-next-action{display:inline-flex;align-items:center;text-decoration:none;border-radius:6px}
.project-empty-state{margin:18px 0 24px;color:var(--muted);font-size:13px;line-height:1.8}
.project-empty-state p{margin:0}
.project-empty-state small{display:block;margin-top:4px}
.project-card.is-empty .project-people{margin-bottom:20px}