.task-ui {
  --task-rule: var(--border);
  display: grid;
  gap: clamp(24px, 5vw, 62px);
  margin: 0 auto;
  max-width: 94rem;
  min-width: 0;
  padding: clamp(24px, 4vw, 64px) var(--margin) clamp(58px, 8vw, 120px);
}

.task-ui *, .task-ui *::before, .task-ui *::after { box-sizing: border-box; }
.task-ui [hidden] { display: none !important; }
.task-ui h2, .task-ui h3, .task-ui p { margin: 0; }
.task-ui h2 { font-size: clamp(1.6rem, 3.2vw, 2.9rem); letter-spacing: -.04em; line-height: 1.05; }
.task-ui h3 { font-size: 1.05rem; line-height: 1.2; }
.task-ui h2, .task-ui h3, .task-ui p, .task-ui dd, .task-ui li { overflow-wrap: anywhere; }
.task-ui button, .task-ui input, .task-ui select, .task-ui textarea { font: inherit; }
.task-ui button:focus-visible, .task-ui a:focus-visible, .task-ui summary:focus-visible, .task-ui .task-code:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}
.task-ui button:active:not(:disabled), .task-ui a.formant-button:active { transform: translateY(1px); }
.task-ui button:disabled { opacity: 1; cursor: not-allowed; }
.task-ui .formant-button:disabled {
  background: var(--surface-muted);
  border-color: var(--control-border);
  color: var(--muted-text);
}
.task-ui .formant-button, .task-ui summary { min-height: 44px; }
.task-ui .formant-button { max-width: 100%; text-align: left; white-space: normal; }
.task-ui .formant-field { align-content: start; }
.task-ui .formant-field textarea { min-height: 98px; resize: vertical; }
.task-ui [aria-invalid="true"] { border-color: var(--danger); }
.task-ui .task-field-error { color: var(--danger); }
.task-ui .task-warning { color: var(--warning); }
.task-ui .task-field-error:empty, .task-ui .task-status:empty { display: none; }
.task-ui .task-field-error { font-size: .84rem; line-height: 1.45; }
.task-ui .task-field-error:focus-visible { outline-offset: 2px; }
.task-ui .task-muted { color: var(--text); line-height: 1.55; }
.task-ui .task-note { color: var(--muted-text); font-size: .84rem; line-height: 1.5; }
.task-ui .task-status { color: var(--text); border-inline-start: 2px solid var(--brand); padding-inline-start: 12px; line-height: 1.45; }
.task-ui .task-topline, .task-ui .task-actions, .task-ui .task-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.task-ui .task-topline { justify-content: space-between; gap: 12px 22px; }
.task-ui .task-nav { gap: 6px; }
.task-ui .task-nav .formant-button { padding: 7px 12px; font-size: .8rem; }
.task-ui .task-nav [aria-current="page"] { background: var(--selected); color: var(--link); border-color: var(--brand); }
.task-ui .task-quiet { background: transparent; color: var(--link); border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.task-ui .task-quiet:is(:hover, :focus-visible) { background: var(--surface-muted); color: var(--link); border-color: var(--control-border); }
.task-ui .task-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.task-ui .task-pill { border: 1px solid var(--task-rule); padding: 4px 8px; color: var(--text); font-size: .76rem; line-height: 1.35; overflow-wrap: anywhere; }
.task-ui .task-pill[data-tone="highlight"] { color: var(--link); border-color: var(--brand); background: var(--selected); }
.task-ui [data-tone="success"] { color: var(--success); border-color: var(--success); }
.task-ui [data-tone="danger"] { color: var(--danger); border-color: var(--danger); }
.task-ui [data-tone="warning"] { color: var(--warning); border-color: var(--warning); }
.task-ui [data-tone="pending"] { color: var(--pending); border-color: var(--pending); }
.task-ui .task-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .75fr); gap: clamp(20px, 5vw, 72px); align-items: start; }
.task-ui .task-layout > *, .task-ui .task-stack > *, .task-ui .task-grid > *, .task-ui .task-two > * { min-width: 0; }
.task-ui .task-stack, .task-ui .task-block { display: grid; gap: 16px; min-width: 0; }
.task-ui .task-block { padding-block-start: 18px; border-block-start: 1px solid var(--task-rule); }
.task-ui .task-panel { border: 1px solid var(--task-rule); padding: clamp(14px, 2.2vw, 28px); background: var(--surface); min-width: 0; }
.task-ui .task-summary { position: sticky; top: calc(var(--header-height, 72px) + 16px); }
.task-ui[data-task-page="workspace"] { gap: 14px; padding-block-start: clamp(12px, 2vw, 28px); }
.task-ui[data-task-page="workspace"] > .task-topline > .task-pills { display: none; }
.task-ui .task-build-bar {
  position: sticky;
  top: calc(var(--header-height, 72px) + env(safe-area-inset-top));
  z-index: 6;
  display: grid;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-muted);
  border-block: 1px solid var(--task-rule);
}
.task-ui .task-build-bar .task-topline { gap: 4px 12px; }
.task-ui .task-build-bar .formant-button { font-size: .8rem; padding: 6px 12px; }
.task-ui .task-build-bar #task-build { min-width: 8rem; text-align: center; }
.task-ui .task-build-bar #task-save { min-width: 10rem; text-align: center; }
.task-ui .task-build-bar .task-status { font-size: .78rem; }
.task-ui #task-edit,
.task-ui #task-plan,
.task-ui .task-result [id] { scroll-margin-top: calc(var(--header-height, 72px) + 86px + env(safe-area-inset-top)); }
.task-ui .task-editor { border-inline: 0; border-block-end: 0; }
.task-ui .task-editor > .task-details-content { padding-inline: 0; padding-block: 5px 0; }
.task-ui .task-editor[open] > summary { padding-inline: 0; background: transparent; }
.task-ui .task-editor[open] > summary { position: absolute; width: 1px; min-height: 0; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); margin: 0; }
.task-ui .task-editor[open] > summary:focus { position: static; width: auto; min-height: 44px; height: auto; clip-path: none; }
.task-ui .task-editor .task-summary { top: calc(var(--header-height, 72px) + 86px); }
.task-ui .task-editor #task-workspace-form { gap: 12px; }
.task-ui .task-editor #workspace-objective { min-height: 70px; }
.task-ui .task-mobile-summary { display: none; }
.task-ui .task-mobile-summary summary > span { color: var(--muted-text); margin-inline-start: auto; font-size: .82rem; }
.task-ui .task-result-objective { font-size: clamp(1.05rem, 2vw, 1.45rem); line-height: 1.32; color: var(--ink); }
.task-ui .task-result-header { overflow-wrap: anywhere; }
.task-ui .task-result-header .task-pills .task-pill { font-size: .8rem; }
.task-ui .task-result-header h2:focus { outline: 0; }
.task-ui .task-two, .task-ui .task-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.task-ui .task-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.task-ui .task-template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.task-ui .task-template { border-radius: 0; display: grid; align-content: start; gap: 5px; background: var(--surface); color: var(--ink); border-color: var(--control-border); }
.task-ui .task-template-description { display: block; color: var(--muted-text); font-size: .77rem; line-height: 1.35; }
.task-ui .task-template-selected { color: var(--link); font-size: .72rem; font-weight: 700; }
.task-ui .task-template-head a { background: transparent; color: var(--link); border-color: transparent; padding-inline: 0; padding-block: 6px; min-height: 0; font-size: .78rem; line-height: 1.2; text-decoration: underline; text-underline-offset: 3px; }
.task-ui .task-template-head a:hover { color: var(--brand-active); }
.task-ui .task-choice { position: relative; min-width: 0; }
.task-ui .task-choice label { display: grid; gap: 6px; height: 100%; min-height: 52px; border: 1px solid var(--control-border); background: var(--surface); padding: 12px 12px 12px 38px; cursor: pointer; }
.task-ui .task-choice label:hover { background: var(--surface-muted); }
.task-ui .task-choice input { position: absolute; top: 15px; left: 13px; width: 16px; height: 16px; accent-color: var(--brand); }
.task-ui .task-choice label:has(:checked) { border-color: var(--brand); background: var(--selected); }
.task-ui .task-choice label:has(:checked) .task-note { color: var(--text); }
.task-ui .task-choice label:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.task-ui .task-check { display: flex; gap: 10px; align-items: start; cursor: pointer; min-height: 44px; padding-block: 8px; }
.task-ui .task-check input { flex: 0 0 auto; width: 18px; height: 18px; margin-block-start: 3px; accent-color: var(--brand); }
.task-ui .task-definition { display: grid; gap: 10px; margin: 0; }
.task-ui .task-definition > div { display: grid; gap: 3px; border-bottom: 1px solid var(--task-rule); padding-bottom: 10px; }
.task-ui .task-definition dt { color: var(--muted-text); font-size: .76rem; font-variation-settings: var(--semi-mono); text-transform: uppercase; letter-spacing: .04em; }
.task-ui .task-definition dd { margin: 0; line-height: 1.45; white-space: pre-wrap; }
.task-ui .task-progress { display: block; width: 100%; height: 7px; accent-color: var(--brand); appearance: none; border: 1px solid var(--control-border); background: var(--surface-muted); }
.task-ui .task-progress::-webkit-progress-bar { background: var(--surface-muted); }
.task-ui .task-progress::-webkit-progress-value { background: var(--brand); }
.task-ui .task-progress::-moz-progress-bar { background: var(--brand); }
.task-ui .task-details { border: 1px solid var(--control-border); min-width: 0; max-width: 100%; }
.task-ui .task-details summary { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--surface-muted); cursor: pointer; list-style: none; }
.task-ui .task-details summary::-webkit-details-marker { display: none; }
.task-ui .task-details summary::after { content: "+"; color: var(--link); flex: 0 0 auto; font-size: 1.25rem; }
.task-ui .task-details[open] > summary::after { content: "−"; }
.task-ui .task-details summary:hover { background: var(--selected); }
.task-ui .task-details-content { min-width: 0; max-width: 100%; padding: 14px; }
.task-ui .task-code { overflow: auto; white-space: pre; margin: 0; color: var(--ink); width: 100%; min-width: 0; max-width: 100%; max-height: 27rem; background: var(--surface-muted); padding: 14px; font-size: .77rem; line-height: 1.5; }
.task-ui .task-code code { white-space: inherit; }
.task-ui .task-result-nav a { color: var(--link); padding: 6px 0; text-decoration-color: var(--link); font-size: .84rem; }
.task-ui .task-result-nav a:hover { color: var(--brand-active); }
.task-ui .task-result-nav { gap: 8px 16px; }
.task-ui .task-list { padding-inline-start: 1.25rem; margin: 0; }
.task-ui .task-list li { padding-block: 3px; }
.task-ui .task-roles { justify-content: start; }
.task-ui .task-role-card { grid-template-rows: auto 1fr; }
.task-ui .task-role-card .task-definition { align-content: start; }
.task-ui .task-role-card dt { text-transform: none; }
.task-ui .task-role-graph { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0; padding: 0; list-style: none; }
.task-ui .task-role-graph li { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.task-ui .task-graph-arrow { color: var(--link); font-size: .84rem; }
.task-ui .task-budget-table { min-width: 0; border: 1px solid var(--task-rule); }
.task-ui .task-budget-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, 1fr); gap: 8px; border-block-end: 1px solid var(--task-rule); padding: 10px 12px; align-items: center; overflow-wrap: anywhere; }
.task-ui .task-budget-row > * { min-width: 0; }
.task-ui .task-budget-columns { font-size: .74rem; color: var(--muted-text); background: var(--surface-muted); }
.task-ui .task-budget-row:last-child { border-block-end: 0; }
.task-ui .task-budget-row > :last-child { text-align: end; overflow-wrap: anywhere; }
.task-ui .task-budget-row > .formant-field:last-child { text-align: start; }
.task-ui .task-budget-row input { padding: 10px 12px; }
.task-ui .task-history-entry { border-bottom: 1px solid var(--task-rule); padding-bottom: 16px; }
.task-ui .task-history-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.task-ui .task-history-entry code { display: block; overflow-wrap: anywhere; white-space: normal; }
.task-ui .task-native-dialog { border: 1px solid var(--control-border); background: var(--surface); color: var(--ink); padding: clamp(18px, 4vw, 32px); width: min(35rem, calc(100% - 24px)); max-height: min(75svh, calc(100% - 24px)); overflow: auto; margin: auto; }
.task-ui .task-native-dialog::backdrop { background: var(--scrim); backdrop-filter: blur(8px); }
.task-ui .task-disclosure-status { background: var(--surface-muted); padding: 12px; border-left: 2px solid var(--brand); }

.task-ui .task-reveal { animation: task-appear 220ms ease-out; }
@keyframes task-appear { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 850px) {
  .task-ui .task-layout { grid-template-columns: minmax(0, 1fr); }
  .task-ui .task-summary { position: static; }
  .task-ui .task-mobile-summary { display: block; }
  .task-ui .task-editor .task-summary { display: none; }
}
@media (max-width: 520px) {
  .task-ui .task-two { grid-template-columns: minmax(0, 1fr); }
  .task-ui .task-actions .formant-button { flex: 0 1 auto; padding-inline: 12px; }
  .task-ui .task-pills { gap: 6px; }
  .task-ui .task-template-grid { grid-template-columns: minmax(0, 1fr); }
  .task-ui .task-template { padding-block: 7px; gap: 3px; }
  .task-ui .task-template-head a { min-height: 44px; align-content: center; }
  .task-ui .task-budget-row { gap: 6px; padding-inline: 8px; }
  .task-ui .task-budget-row input { padding-inline: 7px; }
  .task-ui .task-build-bar { padding-inline: 8px; }
  .task-ui .task-build-bar #task-build,
  .task-ui .task-build-bar #task-save { min-width: 0; }
  .task-ui .task-build-bar .formant-button { padding-inline: 8px; }
  .task-ui #task-edit,
  .task-ui #task-plan,
  .task-ui .task-result [id] { scroll-margin-top: calc(var(--header-height, 72px) + 145px + env(safe-area-inset-top)); }
  .task-ui:has(:is(input, textarea, select):focus) .task-build-bar { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .task-ui .task-reveal { animation: none; }
}
.task-ui .task-template:is(:hover, :focus-visible) {
  background: var(--surface-muted);
  color: var(--ink);
  border-color: var(--brand);
}
.task-ui .task-template[data-primary][aria-pressed="true"] {
  background: var(--selected);
  color: var(--ink);
  border-color: var(--brand);
}
.task-ui .task-template[aria-pressed="true"] .task-template-description { color: var(--text); }