@font-face { font-family: Onest; src: url('./fonts/onest-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Onest; src: url('./fonts/onest-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Onest; src: url('./fonts/onest-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Unbounded; src: url('./fonts/unbounded-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Unbounded; src: url('./fonts/unbounded-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Unbounded; src: url('./fonts/unbounded-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --font-body: Onest, sans-serif;
  --font-heading: Unbounded, sans-serif;
  --type-small: 12px;
  --type-body: 14px;
  --type-control: 16px;
  --field-inset: 16px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --motion-fast: 160ms;
  --motion-normal: 220ms;
  --motion-ease: cubic-bezier(.22, .61, .36, 1);
  --page-gutter: 24px;
  --surface-inset: 24px;
  --surface-radius: 24px;
  --control-height: 48px;
  --button-height: 48px;
  --button-compact-height: 44px;
  --button-radius: 12px;
  --button-padding-x: 16px;
  --button-font-size: var(--type-body);
  --button-font-weight: 500;
  --button-primary-hover: #963f24;
  --button-primary-active: #87351f;
  --content-rail: calc(var(--surface-inset) + 1px);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358667a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --app-bg: #e9eff7;
  --app-surface: rgba(255, 255, 255, .7);
  --app-card: rgba(255, 255, 255, .84);
  --app-input: rgba(255, 255, 255, .86);
  --app-text: #202d42;
  --app-secondary: #58667a;
  --app-border: rgba(255, 255, 255, .95);
  --app-line: #d9e1ec;
  --app-accent: #a94f31;
  --app-accent-text: #fff;
  --app-soft: #e8edf4;
  --app-focus: #74402e;
  --app-shadow: 0 12px 38px rgba(35, 52, 76, .055), inset 0 1px 0 rgba(255, 255, 255, .9);
  font-family: var(--font-body);
  font-synthesis: none;
  font-weight: 400;
  background: var(--app-bg);
  color: var(--app-text);
  -webkit-text-size-adjust: 100%;
}
html[data-theme='dark'] {
  color-scheme: dark;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8c3d4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --app-bg: #17202e;
  --app-surface: rgba(37, 48, 65, .92);
  --app-card: #2a3648;
  --app-input: #202c3e;
  --app-text: #f0f3f8;
  --app-secondary: #b8c3d4;
  --app-border: #445066;
  --app-line: #425067;
  --app-accent: #e2a184;
  --app-accent-text: #241f1c;
  --button-primary-hover: #edb79e;
  --button-primary-active: #d78e6f;
  --app-soft: #334156;
  --app-focus: #f0b393;
  --app-shadow: 0 12px 38px rgba(0, 0, 0, .13), inset 0 1px 0 rgba(255, 255, 255, .035);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 0; scroll-padding-bottom: 120px; }
body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: radial-gradient(ellipse at 10% 0, rgba(255, 255, 255, .62), transparent 55%), var(--app-bg);
  font-size: var(--type-body);
  line-height: 1.5;
}
html[data-theme='dark'] body { background: radial-gradient(ellipse at 10% 0, #28354a, transparent 58%), var(--app-bg); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
button, a, summary { touch-action: manipulation; }
a { color: var(--app-accent); overflow-wrap: anywhere; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--app-focus);
  outline-offset: 4px;
}
h1, h2, h3, p { margin: 0; }
h1, h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
h1 { font-size: clamp(24px, 3.2vw, 28px); }
h2 { font-size: 24px; }
h3 { font-size: var(--type-control); font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
p { line-height: 24px; }
svg { display: block; flex-shrink: 0; }
.shell { width: min(100%, 1120px); margin: 0 auto; padding: var(--space-3) var(--page-gutter) max(var(--space-3), env(safe-area-inset-bottom)); }

/* Shared chrome stays compact, leaving the task itself as the main focus. */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 16px var(--surface-inset);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand > div { min-width: 0; }
.brand-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #202d42;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 23px;
  font-weight: 500;
  line-height: 1;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18);
}
.brand-name { display: block; font-size: var(--type-control); font-weight: 600; line-height: 1.4; letter-spacing: -.025em; }
.profile-chip { display: flex; align-items: center; gap: var(--space-1); min-width: 0; max-width: 260px; margin-left: auto; }
.header-tools { display: flex; align-items: center; gap: 12px; min-width: 0; margin-left: auto; }
.header-tools .profile-chip { margin-left: 0; }
.profile-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--app-soft);
  border: 1px solid var(--app-border);
  color: var(--app-text);
  font-size: var(--type-body);
  font-weight: 600;
}
.profile-chip > div { min-width: 0; }
.profile-name { display: block; max-width: 200px; font-size: var(--type-body); font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.profile-role { display: block; color: var(--app-secondary); font-size: var(--type-small); line-height: 1.5; }
.button.icon-button, .app-header #refresh { display: grid; place-items: center; flex: none; width: var(--button-compact-height); min-width: var(--button-compact-height); height: var(--button-compact-height); min-height: var(--button-compact-height); padding: 11px; border-radius: var(--button-radius); }
.icon-button { border-color: var(--app-line); background: var(--app-card); color: var(--app-text); }
.icon-button svg, .app-header #refresh svg { width: 20px; height: 20px; }
.app-nav, .view-switch {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--app-border);
  border-radius: 20px;
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.app-nav { width: 100%; margin: 22px auto 28px; }
.view-button {
  display: flex;
  flex: 1 1 0;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: var(--button-height);
  padding: 11px var(--button-padding-x);
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  background: transparent;
  color: var(--app-secondary);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1.35;
  transition: color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-normal) var(--motion-ease);
}
.view-button svg { width: 19px; height: 19px; }
.view-button span { min-width: 0; overflow-wrap: anywhere; }
.view-button[aria-pressed='true'], .view-button[aria-current='page'] {
  border-color: var(--app-line);
  background: var(--app-soft);
  color: var(--app-text);
  font-weight: 600;
  box-shadow: none;
}
.view-button[aria-pressed='true'] svg, .view-button[aria-current='page'] svg { color: var(--app-accent); }

.panel { min-width: 0; padding: var(--surface-inset); margin-bottom: var(--space-3); border: 1px solid var(--app-border); border-radius: var(--surface-radius); background: var(--app-surface); box-shadow: var(--app-shadow); }
.state-panel { width: 100%; margin: var(--space-3) 0; padding: var(--space-4) var(--surface-inset); text-align: center; }
.state-panel h1 { margin: 18px 0 14px; }
.state-panel > p { max-width: 490px; margin: 0 auto; color: var(--app-secondary); }
.state-panel > .button { margin-top: 28px; }
.eyebrow { display: block; color: var(--app-secondary); font-size: var(--type-small); font-weight: 500; letter-spacing: .075em; line-height: 20px; overflow-wrap: anywhere; }
.secondary-text { color: var(--app-secondary); font-size: var(--type-body); overflow-wrap: anywhere; }
.badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  min-height: 27px;
  padding: 5px 10px;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  background: var(--app-soft);
  color: var(--app-secondary);
  font-size: var(--type-small);
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.profile-panel { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px 2px; }
.profile-panel > div { min-width: 0; }
.profile-panel h1 { margin: 5px 0; }
.section-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-2); min-width: 0; }
.section-heading > div { min-width: 0; }
.section-heading p { margin-top: var(--space-1); color: var(--app-secondary); font-size: var(--type-body); overflow-wrap: anywhere; }
.page-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-2); align-items: center; margin: 0 0 var(--space-3); }
.page-heading .eyebrow { grid-column: 1 / -1; grid-row: 1; margin: 0; color: var(--app-accent); font-size: var(--type-small); font-weight: 600; letter-spacing: .075em; }
.page-heading h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); grid-column: 1; grid-row: 2; min-height: var(--control-height); margin: 0; font-size: 28px; }
.page-heading p:not(.eyebrow) { grid-column: 1 / -1; grid-row: 3; margin: 0; color: var(--app-secondary); font-size: var(--type-body); }
.settings-panels { display: block; }
.settings-panels > .panel { margin-bottom: var(--space-3); }
.workspace-navigation { padding: 0; margin: 0 0 var(--space-4); border: 0; background: transparent; box-shadow: none; }
.workspace-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.workspace-navigation .workspace-picker { display: grid; gap: var(--space-1); width: 100%; margin: 0; }
.workspace-select-control { position: relative; width: 100%; min-width: 0; }
.workspace-select-trigger { display: flex; align-items: center; width: 100%; height: var(--control-height); min-width: 0; padding: 11px calc(var(--surface-inset) + 32px) 11px var(--surface-inset); border: 1px solid var(--app-line); border-radius: var(--button-radius); background: var(--app-input) var(--select-chevron) no-repeat right var(--surface-inset) center / 20px 20px; color: var(--app-text); font-size: var(--type-control); line-height: 1.5; text-align: left; box-shadow: inset 0 1px 3px rgba(35, 53, 78, .025); }
.workspace-select-trigger [data-picker-value] { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-select-trigger[aria-expanded='true'] { border-color: var(--app-accent); }
.workspace-select-trigger:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.workspace-select-menu { position: absolute; z-index: 60; top: calc(100% + var(--space-1)); right: 0; left: 0; max-height: min(360px, calc(100dvh - 160px)); margin: 0; padding: 8px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--app-line); border-radius: 20px; background: #f8fafd; box-shadow: 0 16px 40px rgba(32, 45, 66, .16), 0 3px 10px rgba(32, 45, 66, .06); }
.workspace-select-control[data-side='top'] .workspace-select-menu { top: auto; bottom: calc(100% + var(--space-1)); }
.workspace-select-options { display: grid; gap: 4px; }
.workspace-select-option { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--control-height); min-width: 0; padding: 11px calc(var(--surface-inset) - 9px); border: 1px solid transparent; border-radius: var(--button-radius); color: var(--app-text); font-family: var(--font-body); font-size: var(--type-control); line-height: 1.5; cursor: pointer; -webkit-user-select: none; user-select: none; }
.workspace-select-option-title { min-width: 0; overflow-wrap: anywhere; }
.workspace-select-check { display: grid; place-items: center; flex: none; width: 20px; height: 20px; color: var(--app-accent); font-weight: 600; }
.workspace-select-option:hover, .workspace-select-option[data-active='true'] { background: var(--app-soft); }
.workspace-select-option[data-active='true'] { border-color: var(--app-line); }
.workspace-select-option[aria-selected='true'] { background: #f4e7df; color: #93472d; font-weight: 500; }
html[data-theme='dark'] .workspace-select-menu { background: #243145; border-color: var(--app-border); box-shadow: 0 16px 40px rgba(0, 0, 0, .32); }
html[data-theme='dark'] .workspace-select-option[aria-selected='true'] { background: #4d382f; color: #f4c5ae; }
.workspace-navigation label { display: block; margin: 0; padding-left: calc(var(--field-inset) + 1px); color: var(--app-secondary); font-size: var(--type-small); font-weight: 500; line-height: 20px; }
.workspace-navigation > .notice, .workspace-navigation > .empty-state, .workspace-navigation > .field-hint { flex-basis: 100%; }
.workspace-navigation .view-switch { margin-top: 14px; box-shadow: none; }
.workspace-notice { margin-top: var(--space-2); }


.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: var(--button-height);
  padding: 11px var(--button-padding-x);
  border: 1px solid var(--app-line);
  border-radius: var(--button-radius);
  background: var(--app-card);
  color: var(--app-text);
  font-family: var(--font-body);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: none;
  transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}
.button svg { width: 18px; height: 18px; }
.button.button-primary { background: var(--app-accent); border-color: var(--app-accent); color: var(--app-accent-text); font-weight: 600; }
.button-secondary { background: var(--app-card); color: var(--app-text); }
.button-quiet { background: var(--app-card); color: var(--app-secondary); }
.button:not(:disabled):active { border-color: var(--app-accent); }
.button-primary:not(:disabled):active { background: var(--button-primary-active); border-color: var(--button-primary-active); }
.cta-create { grid-column: 2; grid-row: 2; }
.button-plus { font-size: 21px; font-weight: 400; line-height: 1; }
.back-button { flex: none; }
.detail-panel > .back-button { width: fit-content; max-width: 100%; margin: 0 0 var(--space-3); }
.task-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); align-items: stretch; gap: 12px; margin-top: var(--space-3); }
.task-actions > .button { width: 100%; min-width: 0; height: 100%; }
#task-progress-start { order: -1; }

/* Every field keeps a visible label and a comfortable mobile text size. */
.form-block { margin-top: var(--space-3); }
.form-block label { display: block; margin-bottom: var(--space-1); color: var(--app-text); font-size: var(--type-small); font-weight: 500; line-height: 20px; }
.form-block label:not(.reminder-toggle) { padding-left: calc(var(--field-inset) + 1px); }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) 180px; align-items: stretch; gap: 12px; }
.form-row > * { min-width: 0; }
input:not([type='checkbox']):not([type='radio']), select, textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--control-height);
  padding: 11px var(--field-inset);
  border: 1px solid var(--app-line);
  border-radius: 14px;
  background: var(--app-input);
  color: var(--app-text);
  font-size: var(--type-control);
  font-weight: 400;
  line-height: 1.5;
  box-shadow: inset 0 1px 3px rgba(35, 53, 78, .025);
}
input:not([type='checkbox']):not([type='radio']), select { height: var(--control-height); }
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 52px;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right var(--field-inset) center;
  background-size: 20px 20px;
  text-overflow: ellipsis;
  cursor: pointer;
}
@media (forced-colors: active) {
  select { appearance: auto; -webkit-appearance: auto; background-image: none; }
}
input::placeholder, textarea::placeholder { color: var(--app-secondary); opacity: .86; }
textarea { min-height: 128px; resize: vertical; }
input[readonly], textarea[readonly] { background: var(--app-soft); }
.field-hint { margin-top: var(--space-1); color: var(--app-secondary); font-size: var(--type-small); line-height: 20px; overflow-wrap: anywhere; }
.field-optional { margin-left: var(--space-1); color: var(--app-secondary); font-size: var(--type-small); font-weight: 400; }
.task-form label { margin-top: var(--space-3); }
.task-form label:first-child { margin-top: 0; }
.workspace-picker { margin-bottom: var(--space-3); }
#task-create-form label:not(:first-child) { margin-top: var(--space-3); }
#task-create-form textarea { min-height: 128px; }
.task-create-details { padding: 0; }
.task-create-details summary { padding: 4px 0; font-family: var(--font-heading); font-size: 21px; line-height: 1.5; cursor: pointer; }
.task-create-details[open] { margin-bottom: var(--space-3); padding: var(--surface-inset); border: 1px solid var(--app-border); border-radius: var(--surface-radius); background: var(--app-surface); box-shadow: var(--app-shadow); }
#task-mutation-restart { margin-top: 14px; }

/* Cards are fully clickable; the final line makes the destination explicit. */
.panel.page-view { padding: 0; border: 0; background: transparent; box-shadow: none; }
.task-list { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: var(--space-2); margin-top: var(--space-3); }
.task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  min-height: 112px;
  padding: var(--surface-inset);
  border: 1px solid var(--app-border);
  border-radius: var(--surface-radius);
  background: var(--app-card);
  color: var(--app-text);
  text-align: left;
  box-shadow: var(--app-shadow);
  transition: box-shadow var(--motion-normal) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}
.task-row > .badge { order: -1; align-self: flex-start; }
.task-row-main, .task-row .item-main { display: block; min-width: 0; width: 100%; }
.task-row-title { display: block; color: var(--app-text); font-size: var(--type-control); font-weight: 600; line-height: 1.5; letter-spacing: -.015em; overflow-wrap: anywhere; }
.task-row .item-meta { display: block; margin-top: var(--space-1); font-size: var(--type-small); line-height: 20px; }
.task-row-main .badge { margin-bottom: 12px; }
.task-row-open { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--app-line); color: var(--app-accent); font-size: var(--type-body); font-weight: 600; }
.task-row-open svg { width: 16px; height: 16px; }
.task-row-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); margin: 0; padding: 0; }
.task-row-side > .badge { justify-self: start; }
.task-row-side .task-row-open { margin: 0; padding: 0; border: 0; }
.task-row-with-status { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.task-row-open-target { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; width: 100%; min-height: 48px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; text-align: left; }
.task-row-open-target .task-row-title, .task-row-open-target .item-meta { grid-column: 1; }
.task-row-open-target .task-row-open { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; padding: 0; border: 0; white-space: nowrap; font-size: var(--type-small); }
.task-row-statuses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; padding-top: 16px; border-top: 1px solid var(--app-line); }
.task-row-status-icon, .task-status-option:not(.task-row-status)::before { content: ''; width: 18px; height: 18px; flex: 0 0 18px; background: currentColor; mask-image: var(--status-icon); mask-position: center; mask-size: contain; mask-repeat: no-repeat; }
.task-status-option[data-status='NEW'] { --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 12h6'/%3E%3C/svg%3E"); }
.task-status-option[data-status='IN_PROGRESS'] { --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m10 8 6 4-6 4z'/%3E%3C/svg%3E"); }
.task-status-option[data-status='BLOCKED'] { --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 10 18H2zM12 9v5m0 3h.01'/%3E%3C/svg%3E"); }
.task-status-option[data-status='DONE'] { --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E"); }
@media (hover: hover) {
  .task-status-option:not(:disabled):hover { border-color: var(--status-border); background: var(--status-background); color: var(--status-color); }
}

.proposal-row { grid-template-columns: minmax(0, 1fr) 180px; min-height: 112px; }
.proposal-row > .item-meta { margin: 0; padding: 0; text-align: right; }
.task-row[data-status='DONE'] .badge, .badge[data-status='DONE'], .badge.status-done { color: #336149; background: #e4efe6; border-color: #c9dfce; }
.task-row[data-status='BLOCKED'] .badge, .badge[data-status='BLOCKED'], .badge.status-blocked { color: #8c462e; background: #f4e7df; border-color: #e8cfc1; }
.task-row[data-status='IN_PROGRESS'] .badge, .badge[data-status='IN_PROGRESS'], .badge.status-in-progress { color: #465a79; background: #e6edf8; border-color: #d0dcef; }

.item-list { margin-top: var(--space-3); }
.item { display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--app-line); }
.item-main { min-width: 0; }
.item-title { font-size: var(--type-body); font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.item-subtitle { margin-top: 4px; color: var(--app-secondary); font-size: var(--type-body); overflow-wrap: anywhere; }
.item-meta { margin-top: 5px; color: var(--app-secondary); font-size: var(--type-small); overflow-wrap: anywhere; }
.item-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); min-width: 0; }
.item-side .button { width: 100%; }
.empty-state { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-2); min-height: 112px; padding: var(--surface-inset); margin-top: var(--space-3); border: 1px dashed var(--app-line); border-radius: var(--surface-radius); background: var(--app-surface); color: var(--app-secondary); font-size: var(--type-body); line-height: 1.65; overflow-wrap: anywhere; }
.empty-state .button { margin-top: 0; }
.connect-details { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--app-line); }
.connect-details summary { display: list-item; list-style-position: inside; width: fit-content; max-width: 100%; min-height: var(--button-height); padding: 11px var(--button-padding-x); border: 1px solid var(--app-line); border-radius: var(--button-radius); background: var(--app-card); color: var(--app-text); font-size: var(--button-font-size); font-weight: var(--button-font-weight); line-height: 24px; cursor: pointer; }
.connect-details .form-block { margin-top: var(--space-2); }
.invite-form { padding-bottom: 24px; }
.identity-details { display: grid; gap: 12px; max-width: 360px; margin: 28px auto 0; font-size: var(--type-body); text-align: left; }
.identity-details div { display: flex; justify-content: space-between; gap: 18px; }
.identity-details dt { color: var(--app-secondary); }
.identity-details dd { min-width: 0; margin: 0; text-align: right; overflow-wrap: anywhere; }
.notice { margin-bottom: var(--space-2); padding: var(--surface-inset); border: 1px solid var(--app-line); border-radius: 16px; background: var(--app-card); font-size: var(--type-body); line-height: 1.65; overflow-wrap: anywhere; }
.notice-error { border-color: #c47b6c; color: var(--app-text); }
.mutation-notice { margin-top: var(--space-2); background: var(--app-soft); }

.task-card-toolbar { --toolbar-surface: #f8fafd; position: sticky; top: max(8px, env(safe-area-inset-top)); z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: var(--space-3); padding: 8px 0; border-radius: 16px; background: var(--toolbar-surface); box-shadow: 0 0 0 8px var(--toolbar-surface); }
html[data-theme='dark'] .task-card-toolbar { --toolbar-surface: #253041; }
.task-card-toolbar .back-button { width: auto; min-width: 0; margin: 0; }
.task-card-toolbar .icon-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 10px; }
.task-card h2 { margin-top: var(--space-1); font-size: 24px; line-height: 1.4; }
.task-status-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--space-1); margin-top: var(--space-3); }
.task-status-option { width: 100%; height: 100%; min-height: var(--button-compact-height); padding: 9px 8px; color: var(--app-secondary); font-size: var(--type-small); line-height: 18px; white-space: nowrap; }
.task-status-option[data-status='NEW'] { --status-color: #40516a; --status-background: #edf1f6; --status-border: #8594a8; }
.task-status-option[data-status='IN_PROGRESS'] { --status-color: #315c92; --status-background: #e5edf8; --status-border: #6489b8; }
.task-status-option[data-status='BLOCKED'] { --status-color: #93472d; --status-background: #f6e6dc; --status-border: #bc795b; }
.task-status-option[data-status='DONE'] { --status-color: #2d6848; --status-background: #e1efe6; --status-border: #649a79; }
/* Pending operations block input without fading the existing interface. */
html:has(#workspace-view[aria-busy='true']) :is(button, input, textarea, select):disabled,
html[data-dragging='true'] :is(button, input, textarea, select):disabled { opacity: 1; }
.task-status-option[aria-pressed='true'] { border-color: var(--status-border); background: var(--status-background); color: var(--status-color); box-shadow: inset 0 0 0 1px var(--status-border); font-weight: 600; opacity: 1; }
html[data-theme='dark'] .task-status-option[data-status='NEW'] { --status-color: #e0e8f3; --status-background: #354258; --status-border: #8192ad; }
html[data-theme='dark'] .task-status-option[data-status='IN_PROGRESS'] { --status-color: #d2e0f4; --status-background: #34465f; --status-border: #7899c3; }
html[data-theme='dark'] .task-status-option[data-status='BLOCKED'] { --status-color: #f4c5ae; --status-background: #4d382f; --status-border: #b8886d; }
html[data-theme='dark'] .task-status-option[data-status='DONE'] { --status-color: #c3e4d1; --status-background: #28463c; --status-border: #70a989; }
.task-card > .badge { margin-top: var(--space-2); }
.task-section { margin-top: var(--space-3); }
.task-section h3 { margin-bottom: var(--space-1); font-size: var(--type-body); font-weight: 600; }
.task-prose { font-size: var(--type-body); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-3) 0 0; font-size: var(--type-body); }
.task-meta > div { min-width: 0; }
.task-meta dt { margin-bottom: var(--space-1); color: var(--app-secondary); font-size: var(--type-small); }
.task-meta dd { margin: 0; line-height: 1.65; overflow-wrap: anywhere; }
.work-log { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.work-entry { margin: 0; padding: var(--space-2) 0; border-top: 1px solid var(--app-line); }
.work-entry::before { display: none; }
.work-entry:last-child { padding-bottom: 0; }
.work-entry .item-meta { margin-top: 0; margin-bottom: 8px; font-size: var(--type-small); }
.change-details { margin-top: 12px; font-size: var(--type-body); }
.change-details summary { list-style-position: inside; width: fit-content; max-width: 100%; min-height: var(--button-compact-height); padding: 9px 12px; border: 1px solid var(--app-line); border-radius: var(--button-radius); background: var(--app-card); color: var(--app-text); font-size: var(--button-font-size); font-weight: var(--button-font-weight); line-height: 24px; cursor: pointer; }
.change-list { margin: var(--space-1) 0 0; padding: var(--space-2); border-radius: 16px; background: var(--app-soft); }
.change-list > div + div { margin-top: 18px; }
.change-list dt { margin-bottom: 6px; font-weight: 600; }
.change-list dd { margin: 5px 0; font-size: var(--type-body); }
.change-label { color: var(--app-secondary); }
.task-mutation-panel h2, .reminder-panel h2 { margin-top: 8px; }
.reminder-panel > .badge, #reminder-summary > .badge { margin-top: 20px; }
#reminder-context, #team-workspace-context, #proposal-draft-context, #proposal-card-context { overflow-wrap: anywhere; }
#reminder-form .reminder-toggle { display: flex; align-items: center; gap: 12px; min-height: var(--control-height); margin: 0 0 var(--space-3); cursor: pointer; }
#reminder-enabled { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--app-accent); }
#reminder-custom { margin-top: var(--space-3); }
#reminder-custom label { display: block; margin-bottom: var(--space-1); }
#reminder-bot-link { margin-top: 14px; }
/* Employee overview uses the same outer edges and text insets as task cards. */
.team-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.team-summary-item { display: flex; flex-direction: column; gap: 4px; padding: 18px var(--surface-inset); border: 1px solid var(--app-border); border-radius: 20px; background: var(--app-surface); }
.team-summary-value { font-size: 24px; font-weight: 600; line-height: 1.3; }
.team-summary-label { color: var(--app-secondary); }
.team-people-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; margin-top: 24px; }
.team-person-card { display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: var(--surface-inset); border: 1px solid var(--app-border); border-radius: var(--surface-radius); background: var(--app-card); box-shadow: var(--app-shadow); text-align: left; transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.team-person-header { display: flex; align-items: center; gap: 12px; min-width: 0; }
.team-person-avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--app-soft); color: var(--app-secondary); font-size: 16px; font-weight: 600; }
.team-person-identity { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.team-person-name { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.team-person-username { color: var(--app-secondary); font-size: 12px; overflow-wrap: anywhere; }
.team-person-completion { display: flex; flex-direction: column; gap: 10px; }
.team-person-completion-label { font-weight: 500; }
.team-person-progress { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: 99px; overflow: hidden; background: var(--app-soft); color: #408364; }
.team-person-progress::-webkit-progress-bar { border-radius: 99px; background: var(--app-soft); }
.team-person-progress::-webkit-progress-value { border-radius: 99px; background: #408364; }
.team-person-progress::-moz-progress-bar { border-radius: 99px; background: #408364; }
.team-person-counts { display: flex; flex-wrap: wrap; gap: 6px; }
.team-person-count { padding: 4px 8px; border-radius: 8px; background: var(--app-soft); color: var(--app-secondary); font-size: 12px; line-height: 20px; }
.team-person-count[data-status='BLOCKED'] { background: #f6e7dd; color: #98492e; }
html[data-theme='dark'] .team-person-count[data-status='BLOCKED'] { background: #4d382f; color: #f4c5ae; }
.team-person-work { display: flex; flex-direction: column; gap: 10px; }
.team-person-work-label { color: var(--app-secondary); font-size: 12px; }
.team-person-task { display: flex; flex-direction: column; gap: 2px; padding-left: 10px; border-left: 2px solid var(--app-line); }
.team-person-task[data-status='IN_PROGRESS'] { border-color: #6b8cab; }
.team-person-task[data-status='BLOCKED'] { border-color: #c47957; }
.team-person-task[data-status='DONE'] { border-color: #408364; }
.team-person-task-title { font-weight: 500; overflow-wrap: anywhere; }
.team-person-task-status { color: var(--app-secondary); font-size: 12px; }
.team-person-footer { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--app-line); }
.team-person-updated { color: var(--app-secondary); font-size: 12px; }
.team-person-open { color: var(--app-accent); font-weight: 600; }
.team-overview-back { margin-top: 24px; }
@media (hover: hover) { .team-person-card:not(:disabled):hover { border-color: #d7b7a8; box-shadow: 0 12px 30px rgba(35, 52, 76, .09); } }
@media (max-width: 540px) { .team-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .team-summary-item { padding-top: 14px; padding-bottom: 14px; } }
#team-members-picker { margin-top: var(--space-3); }
#team-member-details { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--app-line); }
#team-member-name { font-size: var(--type-control); }
#team-member-username { margin-top: var(--space-1); font-size: var(--type-body); }
.proposal-cta { margin: 0; }
.proposal-list-section { margin-top: var(--space-3); }
.proposal-list-section h3 { font-size: var(--type-body); }
.bot-connection { margin-top: var(--space-3); }
.bot-connection .button { margin-top: 12px; }
#proposal-card > .badge { margin-top: var(--space-2); }
#proposal-card .notice { line-height: 1.7; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (hover: hover) {
  .button-primary:not(:disabled):hover { background: var(--button-primary-hover); border-color: var(--button-primary-hover); }
  .button-secondary:not(:disabled):hover, .button-quiet:not(:disabled):hover, .view-button:not(:disabled):hover, .icon-button:not(:disabled):hover, .connect-details summary:hover, .change-details summary:hover { background: var(--app-soft); border-color: var(--app-line); }
  .task-row:not(:disabled):hover { transform: translateY(-2px); border-color: #d7b7a8; box-shadow: 0 13px 30px rgba(35, 52, 76, .085); }
}
html[data-theme='dark'] .task-row[data-status='DONE'] .badge, html[data-theme='dark'] .badge[data-status='DONE'], html[data-theme='dark'] .badge.status-done { background: #28463c; color: #c3e4d1; border-color: #426a56; }
html[data-theme='dark'] .task-row[data-status='BLOCKED'] .badge, html[data-theme='dark'] .badge[data-status='BLOCKED'], html[data-theme='dark'] .badge.status-blocked { background: #4d382f; color: #f4c5ae; border-color: #795344; }
html[data-theme='dark'] .task-row[data-status='IN_PROGRESS'] .badge, html[data-theme='dark'] .badge[data-status='IN_PROGRESS'], html[data-theme='dark'] .badge.status-in-progress { background: #34465f; color: #d2e0f4; border-color: #536986; }
input:not([type='checkbox']):not([type='radio']), select, textarea,
.workspace-select-trigger, .workspace-select-option {
  transition: border-color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-normal) var(--motion-ease);
}


/* All screens use the same content rails and spacing scale. */
.page-heading > div { display: contents; }
.page-heading { padding-right: var(--content-rail); padding-left: var(--content-rail); }
.task-list-heading { padding-right: 0; }
.workspace-navigation label { padding-left: var(--content-rail); }
.workspace-navigation select { padding-left: var(--surface-inset); background-position: right var(--surface-inset) center; }
.page-view > .field-hint, .page-view > .bot-connection, .proposal-list-section > h3,
#team-member-details > .section-heading { padding-right: var(--content-rail); padding-left: var(--content-rail); }
.page-view > .workspace-picker label { padding-left: var(--content-rail); }
.page-view > .workspace-picker select { padding-left: var(--surface-inset); background-position: right var(--surface-inset) center; }
/* Nested field borders sit 8px inside their surface; their text stays on its rail. */
:where(.panel:not(.page-view), .task-create-details[open]) { --field-inset: calc(var(--surface-inset) - 8px); }
:where(.panel:not(.page-view), .task-create-details[open]) .form-block :is(input:not([type='checkbox']):not([type='radio']), select, textarea):not(.form-row > *),
:where(.panel:not(.page-view), .task-create-details[open]) .form-row,
:where(.panel:not(.page-view), .task-create-details[open]) .form-block .task-actions {
  width: calc(100% + 2 * (var(--field-inset) + 1px));
  margin-right: calc(-1 * (var(--field-inset) + 1px));
  margin-left: calc(-1 * (var(--field-inset) + 1px));
}
.form-row input { width: 100%; margin-right: 0; margin-left: 0; }
:where(.panel:not(.page-view), .task-create-details[open]) .form-block label:not(.reminder-toggle),
:where(.panel:not(.page-view), .task-create-details[open]) .form-block .field-hint { padding-left: 0; }
:where(.panel:not(.page-view), .task-create-details[open]) :where(.notice) {
  width: calc(100% + 2 * (var(--field-inset) + 1px));
  margin-right: calc(-1 * (var(--field-inset) + 1px));
  margin-left: calc(-1 * (var(--field-inset) + 1px));
  padding: var(--field-inset);
}
.page-heading > .button { grid-column: 2; grid-row: 2; }
.task-list-heading h2, .task-list-heading > .button { grid-row: 1; }
.task-list-heading > .button, #team-propose { min-width: 0; }
.task-list-heading > .button { justify-self: end; }
.task-order-list { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.task-order-row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--app-line); }
.task-order-main { display: flex; align-items: baseline; gap: var(--space-1); min-width: 0; }
.task-order-position { flex: none; min-width: 24px; color: var(--app-secondary); font-size: var(--type-small); }
.task-order-title { min-width: 0; font-size: var(--type-control); overflow-wrap: anywhere; }
.task-row, .task-order-row { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.task-drag-chosen { cursor: grabbing; }
.task-drag-ghost { opacity: .28; }
/* Pointer transforms must be immediate, including a clone made during a row animation. */
.task-drag-floating { cursor: grabbing; opacity: 1 !important; transition: none !important; animation: none !important; box-shadow: 0 16px 36px rgba(32, 45, 66, .18); }
html[data-dragging='true'] .task-row:hover { transform: none; }
#task-order-panel h2 { margin-top: var(--space-1); }
#task-order-restart { width: 100%; margin-top: var(--space-2); }
.page-view > .form-block .field-hint { padding-left: var(--content-rail); }
.form-row .button { width: 100%; }
.task-list:empty, .item-list:empty { display: none; }
.workspace-toolbar > :not(.workspace-picker) { margin: 0; }
.item > .badge { justify-self: end; }
.detail-panel > .eyebrow + h2 { margin-top: var(--space-1); }
.reminder-toggle + label { margin-top: 0; }
.settings-panels > .panel:last-child { margin-bottom: 0; }

@media (min-width: 701px) {
  .task-card-toolbar { top: 96px; }
  .app-nav { position: sticky; top: var(--space-2); z-index: 30; margin: var(--space-2) 0 var(--space-3); }
  .panel, #settings-panels, #task-create-details { scroll-margin-top: 96px; }
}
@media (max-width: 700px) {
  :root { --page-gutter: 16px; --surface-inset: 16px; }
  .task-status-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell { padding-top: var(--space-2); padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  .app-header { gap: var(--space-1); padding: 12px var(--surface-inset); border-radius: var(--surface-radius); }
  .brand { gap: var(--space-1); }
  .brand-mark { width: 40px; height: 40px; font-size: 21px; }
  .brand-name { font-size: var(--type-body); }
  .profile-chip { gap: var(--space-1); max-width: 160px; }
  .profile-name { font-size: var(--type-small); }
  .profile-role { font-size: 10px; }
  .profile-avatar { width: 32px; height: 32px; font-size: var(--type-small); }
  .header-tools { gap: var(--space-1); }
  .app-nav {
    position: fixed;
    z-index: 30;
    right: var(--page-gutter);
    bottom: max(12px, env(safe-area-inset-bottom));
    left: var(--page-gutter);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: auto;
    margin: 0;
    padding: 4px;
    gap: 0;
    border-radius: var(--surface-radius);
    box-shadow: 0 6px 30px rgba(26, 42, 64, .15);
  }
  .app-nav .view-button { flex-direction: column; gap: 4px; min-height: 60px; padding: 8px 0; border-radius: var(--button-radius); font-size: 11px; line-height: 16px; }
  .app-nav .view-button svg { width: 20px; height: 20px; }
  .app-nav .view-button span { white-space: nowrap; overflow-wrap: normal; }
  .workspace-navigation { margin-top: var(--space-3); margin-bottom: var(--space-3); }
  .panel, #settings-panels, #task-create-details { scroll-margin-top: var(--space-2); }
  .page-heading { grid-template-columns: minmax(0, 1fr); }
  .page-heading h2 { font-size: 24px; }
  .page-heading > .button { grid-column: 1; grid-row: 4; width: 100%; margin-top: var(--space-1); }
  .task-list-heading > .button { grid-row: 2; margin-top: 0; }
  .task-list { grid-template-columns: minmax(0, 1fr); }
  .task-row, .proposal-row { grid-template-columns: minmax(0, 1fr); align-items: stretch; min-height: 160px; }
  .task-row-side { margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--app-line); }
  .proposal-row > .item-meta { margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--app-line); text-align: left; }
  .section-heading { grid-template-columns: minmax(0, 1fr); }
  .section-heading > .button, .detail-panel > .back-button, .connect-details summary { width: 100%; }
  .task-actions { grid-template-columns: minmax(0, 1fr); }
  .button { padding-right: var(--space-2); padding-left: var(--space-2); }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .empty-state > .button { width: 100%; }
  .item { grid-template-columns: minmax(0, 1fr); }
  .item-side { align-items: flex-start; gap: var(--space-2); }
  .item-side .button { width: 100%; }
  .item > .badge { justify-self: start; }
  .task-meta { gap: var(--space-2); }
}
@media (max-width: 480px) {
  .task-row-statuses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-row-open-target { grid-template-columns: minmax(0, 1fr); }
  .task-row-open-target .task-row-open { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 8px; }
  .task-row-with-status { gap: 12px; }
  .task-row-statuses { padding-top: 12px; }
  .profile-chip { max-width: 32px; }
  .profile-chip > div:not(.profile-avatar) { display: none; }
  .identity-details div { flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
  .identity-details dd { text-align: left; }
}
@media (max-width: 350px) {
  .task-status-option { gap: 4px; padding-right: 4px; padding-left: 4px; }
  .app-nav .view-button { font-size: 10px; }
  .task-meta { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 300px) {
  .task-row-statuses, .task-status-options { grid-template-columns: minmax(0, 1fr); }
  :root { --page-gutter: 12px; }
  .profile-chip { display: none; }
  .app-nav .view-button { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .task-row:not(:disabled):hover { transform: none; }
}

.proposal-review-actions { flex-wrap: wrap; }


/* Personal rules are part of Settings; approvals stay in their own tab. */
#assistant-panel .form-block { margin-top: 0; }
#assistant-panel > .notice { width: 100%; margin: 16px 0; }
.assistant-help { color: var(--app-secondary); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.assistant-help { margin-top: 8px; }
.personal-rules h4 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.assistant-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; min-width: 0; }
.assistant-columns > * { min-width: 0; }
#assistant-panel .form-block :is(input:not([type='checkbox']), select, textarea),
#assistant-panel .form-block .task-actions { width: 100%; margin-right: 0; margin-left: 0; }
#assistant-panel .form-block :is(input:not([type='checkbox']), select, textarea) { padding-left: 14px; }
#assistant-panel .form-block label:not(.assistant-toggle) { margin-top: 20px; }
#assistant-panel .form-block > label:first-child, #assistant-panel .assistant-columns > div > label:first-child { margin-top: 0; }
.assistant-settings-group { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--app-line); }
.assistant-reminder-fields { margin-top: 16px; align-items: start; }
#assistant-panel .assistant-toggle { display: flex; align-items: center; gap: 12px; min-height: var(--control-height); margin: 0; padding: 0; cursor: pointer; }
.assistant-toggle input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--app-accent); }
.assistant-output { min-width: 0; padding: 20px; border: 1px solid var(--app-line); border-radius: 16px; background: var(--app-input); }
.assistant-label { margin-bottom: 8px; color: var(--app-secondary); font-size: 12px; font-weight: 500; line-height: 1.5; }
#assistant-review-source-label { margin-top: 24px; }
.assistant-source { padding: 14px; border-left: 2px solid var(--app-line); border-radius: 12px; background: var(--app-soft); }
.assistant-row { min-height: 88px; grid-template-columns: minmax(0, 1fr); }
.assistant-row .task-row-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#assistant-retry, #assistant-restart, #assistant-load-retry { margin-top: 16px; }
@media (max-width: 700px) {
  .assistant-columns { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .assistant-output { padding: 16px; }
}
@media (max-width: 400px) {
  .assistant-output { padding: 14px; }
}

#assistant-review .form-block :is(select, textarea), #assistant-review .form-block .task-actions { width: 100%; margin-right: 0; margin-left: 0; }
#assistant-review > .section-heading { margin-top: 24px; }
#assistant-review > .notice { width: 100%; margin: 16px 0; }
.approval-report-card > .task-actions:not(:has(> button:not([hidden]))) { display: none; }
.proposal-list-section + .proposal-list-section { margin-top: 32px; }

/* A single team needs no workspace picker in the regular application. */
.task-notices:has(> :not([hidden])) { margin-bottom: 24px; }
.assistant-auto-setting { padding-top: 20px; }
@media (max-width: 700px) { .assistant-auto-setting { padding-top: 0; } }

/* Each approval has separate, equally sized view and accept actions. */
.approval-row { display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-height: 0; padding: 20px; }
.approval-row h4 { margin: 0; }
.approval-row .item-meta { margin: 0; }
.approval-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.approval-row-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 4px; }
.approval-date { color: var(--app-secondary); font-size: var(--type-small); line-height: 20px; white-space: nowrap; }
.approval-row-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; min-width: 260px; }
.approval-row:hover { transform: none; box-shadow: var(--app-shadow); }
@media (max-width: 600px) { .approval-row { padding: 16px; } .approval-row-actions { min-width: 0; width: 100%; } }