@import url('./assets/fonts/fonts.css');

/* Shared visual primitives. All fonts and icons ship with the static site. */
:root {
  color-scheme: light;
  --canvas: #f5f5f7;
  --surface: #ffffff;
  --surface-inset: #f2f2f4;
  --ink: #1d1d1f;
  --secondary: #515157;
  --muted: #6e6e73;
  --border: rgba(29, 29, 31, .1);
  --border-strong: rgba(29, 29, 31, .19);
  --blue: #0066cc;
  --blue-hover: #0057b0;
  --blue-light: #edf5ff;
  --green: #267345;
  --green-light: #eff7f1;
  --amber-light: #fff5e4;
  --red-light: #fff1f2;
  --rail: #f1f1f4;
  --amber: #8c5b17;
  --red: #b4232d;
  --radius-control: 9px;
  --radius-panel: 16px;
  --radius-sheet: 20px;
  --shadow-control: 0 1px 3px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
  --shadow-sheet: 0 24px 80px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.08);
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-sheet: cubic-bezier(.16,1,.3,1);
  --duration-fast: 140ms;
  --duration-control: 200ms;
  --duration-sheet: 280ms;
  --header-height: 76px;
  --bg: var(--canvas);
  --panel: var(--surface);
}
* { box-sizing: border-box; }
html, body, #app { height: 100%; overflow: hidden; }
body { margin: 0; color: var(--ink); background: var(--canvas); font: 16px/1.6 'Workspace Sans', sans-serif; -webkit-font-smoothing: antialiased; font-synthesis: none; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button, summary { touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: .42; }
button, a { color: inherit; }
a { color: var(--blue); text-underline-offset: 3px; }
button { transition: background-color var(--duration-control) var(--ease-out), color var(--duration-control) var(--ease-out), box-shadow var(--duration-control) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
button:active:not(:disabled), .button:active:not(:disabled) { transform: scale(.975); }
:where(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid rgba(0,102,204,.55); outline-offset: 3px; }
::selection { background: #cce4ff; color: var(--ink); }
input, textarea { caret-color: var(--blue); }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3 { text-wrap: balance; }
.icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; display: inline-block; flex-shrink: 0; vertical-align: middle; }
.screen-reader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--muted); font-weight: 400; }

/* A quiet, native-style toolbar and segmented navigation. */
.topbar { height: var(--header-height); padding: 0 32px; display: flex; align-items: center; gap: 40px; background: rgba(250,250,252,.96); border-bottom: 1px solid var(--border); position: relative; z-index: 5; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 620; letter-spacing: -.03em; white-space: nowrap; }
.brand-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ink); color: white; }
.brand-icon .icon { width: 22px; height: 22px; stroke-width: 1.5; }
.topnav { display: flex; align-items: center; gap: 4px; background: #eaeaed; border-radius: 10px; padding: 4px; }
.topnav button { border: 0; background: transparent; border-radius: 7px; padding: 7px 18px; min-height: 36px; color: var(--secondary); font-size: 14px; font-weight: 500; position: relative; white-space: nowrap; isolation: isolate; }
.topnav button.active { color: var(--ink); }
.topnav button.active .selection-fill { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--surface); box-shadow: var(--shadow-control); z-index: -1; }
.topnav button:hover:not(.active) { background: rgba(255,255,255,.45); }
.account { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.local-chip { color: var(--muted); font-size: 12px; white-space: nowrap; }
.account-select { display: flex; align-items: center; gap: 8px; }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; background: #e8e8ed; color: var(--secondary); border-radius: 50%; font-size: 13px; font-weight: 500; }
.account-select select { max-width: 225px; font-size: 14px; border-color: transparent; background-color: transparent; }
.icon-button { display: inline-grid; place-items: center; border: 0; color: var(--secondary); border-radius: var(--radius-control); width: 36px; height: 36px; padding: 0; background: transparent; flex-shrink: 0; }
.icon-button:hover { background: #e8e8ed; color: var(--ink); }
.button { border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-control); min-height: 40px; padding: 8px 16px; white-space: nowrap; font-size: 14px; font-weight: 500; line-height: 1.5; }
.button:hover { background: #f3f3f5; }
.button.primary { color: white; background: var(--blue); border-color: transparent; }
.button.primary:hover { background: var(--blue-hover); }
.button.danger { color: var(--red); border-color: rgba(180,35,45,.22); }
.button.danger:hover { background: #fff2f2; }
.button.small { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.button.ghost { background: transparent; border-color: transparent; color: var(--secondary); }
.button.ghost:hover { background: #e8e8ed; }
.button .icon { width: 17px; height: 17px; }
.link-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; background: transparent; border: 0; border-radius: 6px; padding: 5px 4px; color: var(--blue); font-size: 14px; font-weight: 450; text-align: left; }
.link-button:hover { color: var(--blue-hover); background: var(--blue-light); }
.link-button .icon { width: 15px; height: 15px; }

/* Lists share one grouped surface, with controls attached to their content. */
.app-shell { height: calc(100dvh - var(--header-height)); display: grid; grid-template-columns: minmax(0,1fr); min-height: 0; }
.page-shell { min-width: 0; min-height: 0; overflow: auto; }
.page { width: 100%; max-width: 1440px; margin: 0 auto; padding: 44px 48px 32px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.page-head h1 { font-size: 30px; line-height: 1.35; font-weight: 650; letter-spacing: -.035em; margin: 0 0 8px; }
.page-head .sub { font-size: 14px; color: var(--muted); line-height: 1.6; }
.data-panel { background: var(--surface); border-radius: var(--radius-panel); border: 1px solid var(--border); overflow: hidden; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.tabs { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tabs button { display: flex; align-items: center; justify-content: center; gap: 6px; position: relative; isolation: isolate; border: 0; background: transparent; color: var(--muted); border-radius: 8px; padding: 8px 12px; min-height: 38px; font-size: 14px; white-space: nowrap; }
.tabs button.active { color: var(--ink); font-weight: 550; }
.tabs button.active .selection-fill { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--surface-inset); z-index: -1; }
.tabs button:hover:not(.active) { background: #f7f7f9; color: var(--ink); }
.tabs .count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.tabs button.active .count { color: var(--secondary); }
.search { position: relative; display: flex; align-items: center; }
.search .icon { position: absolute; left: 12px; color: var(--muted); width: 16px; height: 16px; pointer-events: none; }
.search input { width: 240px; min-height: 38px; background: var(--surface-inset); border-color: transparent; padding: 8px 12px 8px 36px; font-size: 14px; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; text-align: left; font-size: 14px; font-variant-numeric: tabular-nums; }
th { padding: 14px 24px; font-size: 12px; color: var(--muted); font-weight: 500; white-space: nowrap; background: #fcfcfd; border-bottom: 1px solid var(--border); }
td { padding: 24px; color: var(--secondary); border-bottom: 1px solid rgba(29,29,31,.07); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color var(--duration-control) var(--ease-out); }
tbody tr:hover { background: #fafafd; }
td:last-child { text-align: right; white-space: nowrap; }
.title-link { display: inline-block; border: 0; padding: 0; background: transparent; color: var(--ink); font-size: 16px; font-weight: 560; line-height: 1.65; text-align: left; }
.title-link:hover { color: var(--blue); }
.cell-sub { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 6px; }
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; padding: 4px 8px; font-size: 12px; color: var(--secondary); background: var(--surface-inset); white-space: nowrap; font-weight: 450; line-height: 1.5; }
.pill .dot { width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.pill.blue { color: #005db5; background: #edf5ff; }
.pill.green { color: var(--green); background: #eff7f1; }
.pill.amber { color: var(--amber); background: #fff5e4; }
.pill.red { color: var(--red); background: #fff1f2; }
.progress { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.progress-track { width: 64px; height: 4px; overflow: hidden; border-radius: 3px; background: #e9e9ee; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: #5b82b4; }
.due { color: var(--amber); font-size: 13px; }
.bottom-line { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 12px; color: var(--muted); padding: 18px 4px; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 260px; padding: 40px 24px; gap: 16px; color: var(--muted); font-size: 14px; text-align: center; }
.empty > .icon { width: 36px; height: 36px; color: #86868b; stroke-width: 1.2; }
.empty p { margin: 0; }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin-bottom: 16px; }
.breadcrumb button { border: 0; background: none; padding: 4px 0; color: var(--secondary); font-size: inherit; }
.breadcrumb button:hover { color: var(--blue); }
.breadcrumb .sep { color: #a1a1a6; }

/* A compact workflow ledger: current work leads, completion records stay legible. */
.app-shell.with-flow { grid-template-columns: 308px minmax(0,1fr); }
.flow-rail { display: flex; flex-direction: column; min-height: 0; background: var(--rail); border-right: 1px solid var(--border); }
.flow-rail-head { padding: 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.rail-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.rail-title > .link-button { justify-content: flex-start; color: var(--ink); font-size: 14px; font-weight: 550; padding-left: 0; line-height: 1.5; }
.flow-rail select { width: 100%; height: 42px; background-color: var(--surface); font-size: 13px; }
.rail-progress { margin-top: 16px; }
.rail-progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--secondary); margin-bottom: 10px; }
.rail-progress-heading strong { margin-left: 6px; color: var(--ink); font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.rail-progress-heading small { color: var(--muted); font-size: 12px; font-weight: 400; }
.rail-progress .progress-track { width: 100%; }
.rail-progress:has(.pill.green) .progress-track>span { background: var(--green); }
.rail-completion { margin-top: 12px; display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.rail-completion>span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rail-completion time,.rail-completion strong { font-variant-numeric: tabular-nums; color: var(--ink); font-size: 13px; font-weight: 550; }
.rail-current-node { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-radius: 6px; background: transparent; padding: 12px 0 0; color: var(--blue); font-size: 14px; font-weight: 600; text-align: left; }
.rail-current-node .icon { width: 16px; }
.flow-toggle { display: none; }
.flow-steps { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; padding: 12px 12px 20px; }
.flow-step { display: flex; position: relative; align-items: flex-start; gap: 12px; width: 100%; padding: 12px; margin-bottom: 4px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--secondary); text-align: left; }
.flow-step:not(:last-child)::before { content: ''; position: absolute; left: 25px; top: 42px; bottom: -16px; width: 1px; background: var(--border-strong); }
.flow-step:hover { background: var(--surface); }
.flow-dot { display: grid; place-items: center; position: relative; z-index: 1; width: 26px; height: 26px; flex: 0 0 26px; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--rail); color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.flow-dot .icon { width: 15px; height: 15px; stroke-width: 2; }
.flow-step-body { flex: 1; min-width: 0; }
.flow-step-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; padding-top: 1px; font-size: 15px; line-height: 1.5; color: var(--ink); font-weight: 600; }
.flow-step-name em { color: var(--blue); font-style: normal; font-size: 10px; white-space: nowrap; padding: 1px 5px; border-radius: 4px; background: var(--surface); }
.flow-role,.flow-date,.flow-wait,.flow-pending { display: block; font-size: 12px; line-height: 1.7; color: var(--muted); font-variant-numeric: tabular-nums; }
.flow-role { margin: 4px 0 6px; }
.flow-wait { color: var(--blue); margin-top: 4px; font-weight: 550; }
.flow-date.overdue { color: var(--red); }
.flow-step-times { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin-top: 8px; font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.flow-step-times>span { color: var(--muted); }
.flow-step-times time { color: var(--secondary); white-space: nowrap; }
.flow-step-times strong { color: var(--ink); font-weight: 600; white-space: nowrap; }
.flow-step.current { background: var(--blue-light); border-color: var(--blue); }
.flow-step.current .flow-dot { color: var(--surface); background: var(--blue); border-color: transparent; }
.flow-step.current .flow-step-name { color: var(--blue); }
.flow-step.done .flow-dot { color: var(--green); background: var(--green-light); border-color: var(--green); }
.flow-step.viewing { background: var(--surface); border-color: var(--border-strong); }
.flow-step.viewing .flow-step-name { color: var(--ink); }
.flow-step.current, .flow-step.current.viewing { background: var(--blue-light); border-color: var(--blue); }
.flow-step.current .flow-step-name, .flow-step.current.viewing .flow-step-name { color: var(--blue); }
.schedule-current-text { color: var(--blue); }
.schedule-guidance { margin: 0 0 16px; color: var(--secondary); font-size: 13px; line-height: 1.6; }
.rail-time-note { flex-shrink: 0; border-top: 1px solid var(--border); padding: 10px 20px; font-size: 11px; color: var(--muted); }
.case-page, .builder { height: 100%; display: flex; flex-direction: column; padding: 24px 32px 28px; }
.case-page .page-head, .builder .page-head { margin-bottom: 24px; flex-shrink: 0; }
.case-page .page-head h1, .builder .page-head h1 { font-size: 25px; }
.case-page .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 12px; }
.case-layout { min-height: 0; flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); overflow: hidden; }
.task-workspace { display: flex; flex-direction: column; min-width: 0; height: 100%; min-height: 0; }
.task-heading { padding: 28px 32px 20px; flex-shrink: 0; }
.task-path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.step-index { font-variant-numeric: tabular-nums; background: var(--surface-inset); border-radius: 5px; padding: 2px 6px; }
.task-title-line { display: flex; align-items: center; gap: 16px; justify-content: space-between; }
.task-title-line h2 { font-size: 23px; letter-spacing: -.025em; font-weight: 600; margin: 0; line-height: 1.4; }
.task-title-line > .pill { margin-right: auto; }
.assignee { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--secondary); white-space: nowrap; }
.assignee .avatar { width: 26px; height: 26px; font-size: 11px; }
.task-tabs { padding: 0 32px 16px; border-bottom: 1px solid var(--border); gap: 4px; flex-shrink: 0; }
.task-tabs button { min-width: 80px; }
.task-scroll { min-height: 0; flex: 1; overflow: auto; padding: 28px 32px; }
.task-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 32px; border-top: 1px solid var(--border); background: #fcfcfd; flex-shrink: 0; }
.task-footer .hint { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.action-group { display: flex; align-items: center; gap: 10px; }

/* Native controls, deliberately styled and independent of the host OS. */
input:not([type=checkbox]):not([type=file]), select, textarea { min-width: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background-color: #fdfdfd; color: var(--ink); padding: 10px 12px; min-height: 42px; font-size: 14px; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
select { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m5 6 3 3 3-3' stroke='%236e6e73' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; cursor: pointer; }
select option { color: var(--ink); background: var(--surface); }
input:not([type=checkbox]):not([type=file]):focus, select:focus, textarea:focus { border-color: var(--blue); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:disabled, select:disabled, textarea:disabled { color: var(--muted); background-color: #f4f4f6; border-color: var(--border); opacity: 1; cursor: default; }
input[type=checkbox] { appearance: none; display: inline-grid; place-items: center; width: 18px; height: 18px; min-height: 18px; padding: 0; margin: 0; border: 1px solid #a8a8ae; border-radius: 5px; background: var(--surface); vertical-align: middle; flex-shrink: 0; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
input[type=checkbox]:checked { background: var(--blue); border-color: var(--blue); }
input[type=checkbox]:checked::after { content: ''; width: 8px; height: 5px; border-left: 1.6px solid white; border-bottom: 1.6px solid white; transform: translateY(-1px) rotate(-45deg); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 13px; color: var(--secondary); }
.field.full { grid-column: 1/-1; }
.field label { display: flex; align-items: center; gap: 4px; font-weight: 500; line-height: 1.5; }
.field input:not([type=checkbox]), .field select, .field textarea { width: 100%; }
.field textarea { resize: vertical; min-height: 100px; line-height: 1.8; }
.required { color: var(--red); }
.field-help, .config-help { color: var(--muted); font-size: 12px; line-height: 1.75; margin: 8px 0; }
.info-strip { display: flex; flex-wrap: wrap; gap: 12px 32px; padding: 16px 20px; margin-bottom: 28px; background: #f5f5f7; border-radius: 10px; font-size: 13px; }
.info-strip span { color: var(--muted); }
.info-strip b { color: var(--ink); font-weight: 500; margin-left: 10px; }
.section-label { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--ink); font-weight: 550; margin: 0 0 16px; }
.upload-item { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: white; margin-bottom: 12px; }
.file-symbol { display: grid; place-items: center; width: 40px; height: 44px; border-radius: 8px; color: var(--muted); background: var(--surface-inset); flex-shrink: 0; }
.file-symbol .icon { width: 22px; height: 22px; stroke-width: 1.4; }
.file-symbol.done { color: var(--green); background: #eff7f1; }
.upload-body { min-width: 0; flex: 1; }
.upload-name { color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.7; }
.upload-meta { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.upload-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-shrink: 0; }
.upload-actions .button, .upload-actions .link-button { font-size: 13px; }
.upload-hint { margin-top: 16px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.template-download { white-space: nowrap; }
.campaign-note { background: #f5f5f7; border-radius: 10px; padding: 16px 20px; margin-bottom: 24px; }
.campaign-note small { color: var(--muted); font-size: 12px; }
.campaign-note p { color: var(--secondary); margin: 4px 0 0; font-size: 14px; white-space: pre-wrap; line-height: 1.8; }
.return-note { background: #fff7e9; color: #79501c; border-radius: 10px; padding: 16px 20px; margin-bottom: 24px; font-size: 14px; line-height: 1.8; }
.return-note small { display: block; font-size: 12px; margin-bottom: 5px; }
.read-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
.read-item.full { grid-column: 1/-1; }
.read-item small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.read-item p { margin: 0; color: var(--ink); font-size: 15px; white-space: pre-wrap; line-height: 1.8; }
.review-source { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--muted); margin-bottom: 24px; }
.archive-state { text-align: center; padding: 24px 0 40px; }
.archive-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: auto; border-radius: 50%; background: #eff7f1; color: var(--green); }
.archive-state h3 { font-size: 21px; font-weight: 600; margin: 20px 0 8px; }
.archive-state p { color: var(--muted); font-size: 13px; margin-bottom: 20px; }

/* Sheets: one elevation, with a fast, quiet arrival and a shorter exit. */
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 32px; background: rgba(20,20,24,.25); animation: backdrop-in 180ms var(--ease-out); }
.modal { display: flex; flex-direction: column; width: 620px; max-width: 100%; max-height: calc(100dvh - 64px); overflow: hidden; border-radius: var(--radius-sheet); background: var(--surface); box-shadow: var(--shadow-sheet); animation: sheet-in var(--duration-sheet) var(--ease-sheet); }
.modal.wide { width: 1000px; }
.modal.narrow { width: 520px; }
.modal-backdrop.updating, .modal-backdrop.updating .modal { animation: none; }
.modal-backdrop.closing { pointer-events: none; animation: backdrop-out 150ms var(--ease-out) forwards; }
.modal-backdrop.closing .modal { animation: sheet-out 150ms var(--ease-out) forwards; }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 32px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.modal-head h2 { margin: 0; font-size: 23px; font-weight: 600; letter-spacing: -.025em; }
.modal-head .sub { color: var(--muted); font-size: 13px; margin-top: 6px; }
.modal-head .icon-button { border-radius: 50%; width: 30px; height: 30px; background: var(--surface-inset); }
.modal-head .icon-button .icon { width: 14px; height: 14px; stroke-width: 2; }
.modal-body { overflow: auto; min-height: 0; padding: 28px 32px; overscroll-behavior: contain; }
.modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 32px; border-top: 1px solid var(--border); background: #fafafc; flex-shrink: 0; }
.modal-footer > div { display: flex; align-items: center; gap: 10px; }
.form-section { margin: 0 0 32px; }
.form-section + .form-section { padding-top: 28px; border-top: 1px solid var(--border); }
.form-section:last-child { margin-bottom: 0; }
.form-section h3 { font-size: 15px; color: var(--ink); font-weight: 600; margin: 0 0 20px; }
.track-toggles { display: flex; align-items: center; gap: 12px; min-height: 42px; }
.track-toggles label { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; background: var(--surface-inset); font-size: 14px; font-weight: 400; cursor: pointer; }
.track-toggles label:has(:checked) { background: var(--blue-light); color: var(--blue); }
.allocation-labels, .allocation { display: grid; grid-template-columns: minmax(135px,1.2fr) 108px minmax(140px,1.4fr) 72px minmax(95px,.8fr) 32px; gap: 12px; align-items: center; }
.allocation-labels { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.allocation { padding: 12px 0; border-bottom: 1px solid var(--border); }
.allocation-cell { display: block; min-width: 0; }
.allocation-cell > span:not(.select-control) { display: none; }
.allocation input, .allocation select { width: 100%; font-size: 13px; padding-left: 10px; }
.allocation .icon-button { width: 32px; height: 36px; }
.track-schedule { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.track-schedule summary { display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; color: var(--ink); font-size: 14px; list-style: none; background: #fafafc; }
.track-schedule summary::-webkit-details-marker { display: none; }
.track-schedule summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform var(--duration-control) var(--ease-out); }
.track-schedule[open] summary::before { transform: rotate(45deg); }
.track-schedule summary strong { font-weight: 550; }
.track-schedule summary span { margin-left: auto; font-size: 12px; color: var(--muted); }
.track-template { display: flex; align-items: center; gap: 20px; padding: 20px; color: var(--secondary); font-size: 13px; }
.track-template select { flex: 1; }
.schedule-table { padding: 0 20px 16px; }
.schedule-row { display: grid; grid-template-columns: minmax(200px,1.1fr) 1fr 1fr; gap: 12px; padding: 12px 0; align-items: center; border-top: 1px solid var(--border); font-size: 13px; color: var(--secondary); }
.schedule-row b { display: inline-block; width: 28px; color: var(--muted); font-size: 11px; font-weight: 450; font-variant-numeric: tabular-nums; }
.schedule-row input { width: 100%; font-size: 12px!important; }
.schedule-labels { color: var(--muted); font-size: 12px; border: 0; }

/* Template editing uses the same list, field and inspector vocabulary. */
.builder-layout { display: grid; grid-template-columns: 300px minmax(0,1fr); min-height: 0; flex: 1; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); overflow: hidden; }
.node-list { padding: 20px 12px; overflow: auto; background: #f1f1f4; border-right: 1px solid var(--border); }
.node-toolbar { display: flex; align-items: center; justify-content: space-between; margin: 0 12px 16px; color: var(--muted); font-size: 12px; }
.node-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 12px; border: 0; border-radius: 9px; text-align: left; background: transparent; margin-bottom: 4px; }
.node-item:hover { background: rgba(255,255,255,.65); }
.node-item.active { background: var(--surface); box-shadow: var(--shadow-control); }
.node-type { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; color: var(--muted); }
.node-type .icon { width: 19px; height: 19px; }
.node-item.active .node-type { color: var(--blue); }
.node-item strong { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
.node-item small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.node-index { color: var(--muted); font-size: 11px; margin-left: auto; font-variant-numeric: tabular-nums; }
.node-list > .button { margin-top: 12px; }
.node-config { padding: 28px 36px; overflow: auto; }
.config-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.config-head h2 { font-size: 22px; font-weight: 600; margin: 0; }
.config-head > div { display: flex; gap: 6px; }
.config-section { border-top: 1px solid var(--border); padding-top: 28px; margin-top: 32px; }
.config-section h3 { font-size: 15px; font-weight: 600; margin: 0 0 18px; }
.compact-row { display: grid; grid-template-columns: minmax(120px,1fr) 120px auto 32px; align-items: center; gap: 12px; margin: 12px 0; }
.compact-row input:not([type=checkbox]), .compact-row select { width: 100%; }
.compact-row > label { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.branch-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.template-source { display: flex!important; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 8px 0 16px; color: var(--muted); font-size: 12px!important; border-bottom: 1px solid var(--border); }
.template-source input { width: auto!important; max-width: 100%; border: 0!important; font-size: 12px!important; }
input::file-selector-button { border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); border-radius: 7px; padding: 6px 10px; margin-right: 10px; font: inherit; cursor: pointer; }
.flow-preview-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.flow-preview-row:last-child { border: 0; }
.node-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-inset); color: var(--secondary); font-size: 12px; }
.node-num .icon { width: 16px; height: 16px; }
.flow-preview-row strong { font-size: 14px; font-weight: 500; }
.flow-preview-row small { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.node-badge { margin-left: auto; }
.flow-preview-row.current .node-num { background: var(--blue); color: white; }
.flow-preview-row.done .node-num { background: #eff7f1; color: var(--green); }
.export-history { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--secondary); margin: 24px 0; }
.export-summary { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.export-summary strong { font-size: 20px; color: var(--ink); font-weight: 600; }
.export-cases { max-height: 240px; overflow: auto; }
.export-cases > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); padding: 16px 0; font-size: 12px; color: var(--muted); }
.export-cases b { display: block; font-size: 14px; font-weight: 500; color: var(--ink); margin-top: 4px; }
.export-help, #exportProgress { font-size: 12px; line-height: 1.8; color: var(--muted); margin-bottom: 0; }
#exportProgress { color: var(--blue); margin-top: 12px; }
.about-list { color: var(--secondary); font-size: 14px; line-height: 1.9; }
.about-list strong { color: var(--ink); font-weight: 550; }
.about-list p:first-child { margin-top: 0; }
.preview-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--secondary); font: 14px/1.8 'Workspace Sans',sans-serif; background: var(--canvas); border-radius: 10px; padding: 20px; max-height: 60vh; overflow: auto; }
.file-frame { width: 100%; height: 60vh; border: 0; border-radius: 8px; }
.loading { display: grid; place-items: center; height: 100dvh; color: var(--muted); font-size: 14px; }
#toast { position: fixed; bottom: 28px; left: 50%; z-index: 70; max-width: min(90vw,640px); padding: 13px 20px; color: white; background: #303034; border-radius: 12px; font-size: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.14); opacity: 0; transform: translate(-50%,8px); pointer-events: none; transition: transform 220ms var(--ease-sheet), opacity 180ms var(--ease-out); }
#toast.show { opacity: 1; transform: translate(-50%,0); }
.is-busy::after { content: ''; display: inline-block; width: 13px; height: 13px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 600ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes sheet-out { to { opacity: 0; transform: translateY(6px) scale(.99); } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-out { to { opacity: 0; } }

@media (max-width: 1180px) {
  .topbar { padding: 0 24px; gap: 24px; }
  .local-chip { display: none; }
  .page { padding: 32px 28px; }
  .toolbar { padding: 16px; gap: 12px; }
  .tabs button { padding: 8px 10px; }
  .search input { width: 210px; }
  th, td { padding-left: 20px; padding-right: 20px; }
  .app-shell.with-flow { grid-template-columns: 280px minmax(0,1fr); }
  .case-page, .builder { padding: 24px; }
  .case-page .page-head, .builder .page-head { align-items: flex-start; gap: 16px; }
  .task-heading, .task-scroll { padding: 24px; }
  .task-tabs { padding-left: 24px; padding-right: 24px; }
  .task-footer { padding: 16px 24px; }
  .task-title-line { flex-wrap: wrap; gap: 12px; }
  .assignee { font-size: 12px; }
  .upload-item { flex-wrap: wrap; }
  .upload-actions { margin-left: auto; }
  .builder-layout { grid-template-columns: 260px minmax(0,1fr); }
  .node-config { padding: 24px; }
  .schedule-row { grid-template-columns: minmax(160px,1fr) 1fr 1fr; }
}
@media (max-width: 900px) {
  :root { --header-height: 68px; }
  .topbar { gap: 20px; padding: 0 20px; }
  .brand { font-size: 18px; gap: 8px; }
  .brand-icon { width: 30px; height: 30px; border-radius: 8px; }
  .brand-icon .icon { width: 19px; height: 19px; }
  .topnav button { padding: 7px 12px; }
  .account { gap: 8px; }
  .account .avatar { display: none; }
  .account-select select { max-width: 180px; font-size: 13px; }
  .toolbar { flex-wrap: wrap; }
  .toolbar .search { flex: 1; }
  .toolbar .search input { width: 100%; }
  .allocation-labels { display: none; }
  .allocation { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 40px; gap: 16px 12px; align-items: end; padding: 20px 0; }
  .allocation-cell > span:not(.select-control) { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
  .allocation-cell:nth-child(3) { grid-column: 1; }
  .allocation-cell:nth-child(5) { grid-column: 1/3; }
  .allocation > .remove-allocation { grid-column: 3; grid-row: 1; }
  .modal-backdrop { padding: 24px; }
  .modal { max-height: calc(100dvh - 48px); }
}
@media (max-width: 760px) {
  :root { --header-height: 112px; }
  .topbar { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 56px 44px; gap: 0 12px; padding: 0 16px 12px; }
  .brand { grid-column: 1; }
  .topnav { grid-row: 2; grid-column: 1/-1; justify-self: start; padding: 3px; }
  .topnav button { min-height: 34px; padding: 5px 20px; font-size: 13px; }
  .account { grid-row: 1; grid-column: 2; gap: 4px; }
  .account-select select { max-width: 172px; padding-left: 4px; }
  .account > .icon-button { width: 28px; }
  .page { padding: 28px 16px; }
  .page-head { gap: 16px; margin-bottom: 24px; }
  .page-head h1 { font-size: 26px; }
  .page-head .sub { font-size: 12px; }
  .page-head > .button { padding: 8px 12px; }
  .toolbar { padding: 12px; gap: 12px; }
  .toolbar .tabs { width: 100%; overflow: auto; scrollbar-width: none; gap: 0; }
  .toolbar .tabs button { flex: 1; font-size: 12px; padding: 8px; gap: 4px; }
  .toolbar .tabs .count { font-size: 11px; }
  .toolbar .search { width: 100%; flex-basis: 100%; }
  .search input { min-height: 38px!important; }
  .data-panel table, .data-panel tbody { display: block; }
  .data-panel thead { display: none; }
  .data-panel tr { display: grid; grid-template-columns: 1fr 1fr; padding: 20px; gap: 14px 20px; border-bottom: 1px solid var(--border); }
  .data-panel tr:last-child { border-bottom: 0; }
  .data-panel td { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 0; border: 0; font-size: 13px; }
  .data-panel td::before { content: attr(data-label); font-size: 11px; color: var(--muted); }
  .data-panel td:first-child { grid-column: 1/-1; margin-bottom: 2px; }
  .data-panel td:first-child::before, .data-panel td:last-child::before { display: none; }
  .data-panel td:last-child { align-self: end; align-items: flex-end; }
  .data-panel .cell-sub { margin: 0; }
  .title-link { font-size: 16px; }
  .bottom-line { font-size: 11px; }
  .app-shell.with-flow { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); }
  .flow-rail { border-right: 0; border-bottom: 1px solid var(--border); }
  .flow-rail-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; padding: 12px 16px; border-bottom: 0; }
  .flow-rail .rail-title, .flow-rail .rail-current { display: none; }
  .flow-rail select { grid-column: 1; grid-row: 1; height: 40px; min-height: 40px; font-size: 12px; }
  .flow-toggle { display: inline-flex; grid-column: 2; grid-row: 1; padding: 8px 10px; }
  .flow-toggle .icon { width: 12px; transform: rotate(90deg); transition: transform 180ms var(--ease-out); }
  .flow-expanded .flow-toggle .icon { transform: rotate(-90deg); }
  .rail-current-node { grid-column: 1/-1; font-size: 12px; padding: 0; }
  .flow-steps { display: none; padding: 8px 16px 16px; }
  .flow-expanded .flow-steps { display: block; max-height: 36dvh; border-top: 1px solid var(--border); }
  .case-page, .builder { padding: 20px 16px 16px; min-height: 640px; }
  .case-page .breadcrumb { font-size: 11px; margin-bottom: 12px; }
  .case-page .page-head, .builder .page-head { flex-wrap: wrap; margin-bottom: 20px; gap: 12px; }
  .case-page .page-head h1, .builder .page-head h1 { font-size: 22px; }
  .case-page .sub { font-size: 11px; gap: 4px 12px; }
  .case-layout { min-height: 420px; }
  .task-heading { padding: 20px 20px 16px; }
  .task-path { font-size: 11px; gap: 6px; }
  .task-title-line h2 { font-size: 21px; }
  .task-title-line { flex-wrap: wrap; }
  .task-tabs { padding: 0 20px 16px; }
  .task-tabs button { font-size: 13px; min-width: 72px; }
  .task-scroll { padding: 20px; }
  .task-footer { flex-wrap: wrap; padding: 16px 20px; gap: 12px; }
  .task-footer .hint { font-size: 12px; }
  .task-footer .action-group { margin-left: auto; }
  .field-grid, .read-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .field.full, .read-item.full { grid-column: auto; }
  .info-strip { gap: 8px 20px; font-size: 12px; padding: 16px; }
  .upload-item { gap: 12px; padding: 16px; }
  .upload-name { font-size: 14px; }
  .upload-actions { flex-wrap: wrap; justify-content: flex-start; width: 100%; margin: 0; gap: 8px 12px; }
  .upload-actions > .button { margin-left: auto; }
  .modal-backdrop { padding: 12px; }
  .modal { max-height: calc(100dvh - 24px); border-radius: 18px; }
  .modal-head { padding: 20px; }
  .modal-head h2 { font-size: 21px; }
  .modal-body { padding: 24px 20px; }
  .modal-footer { padding: 16px 20px; gap: 8px; }
  .modal-footer .button { font-size: 13px; padding: 8px 12px; }
  .modal-footer > div { gap: 8px; }
  .form-section + .form-section { padding-top: 24px; }
  .track-toggles { gap: 12px; }
  .track-toggles label { flex: 1; }
  .allocation { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 28px; }
  .allocation .icon-button { width: 28px; }
  .track-schedule summary { padding: 16px; gap: 10px; }
  .track-schedule summary span { font-size: 10px; }
  .track-template { flex-direction: column; align-items: stretch; padding: 16px; gap: 8px; }
  .schedule-table { padding: 0 16px 12px; }
  .schedule-row { grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 0; }
  .schedule-row > span { grid-column: 1/-1; }
  .schedule-row input { padding: 8px!important; font-size: 11px!important; }
  .schedule-labels { display: none; }
  .schedule-row input::before { font-size: 10px; }
  .builder { min-height: 760px; }
  .builder-layout { grid-template-columns: minmax(0,1fr); grid-template-rows: 112px minmax(0,1fr); }
  .node-list { display: flex; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 12px; border-right: 0; border-bottom: 1px solid var(--border); }
  .node-toolbar { display: none; }
  .node-item { flex: 0 0 220px; min-height: 74px; margin: 0; }
  .node-list > .button { width: auto!important; flex-shrink: 0; margin: 0; }
  .node-config { padding: 24px 20px; }
  .config-head h2 { font-size: 21px; }
  .compact-row { grid-template-columns: minmax(0,1fr) auto 32px; gap: 10px; }
  .compact-row > input { grid-column: 1/-1; }
  .compact-row > select { grid-column: 1; font-size: 12px; }
  .branch-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms!important; transition-duration: 1ms!important; scroll-behavior: auto!important; }
  button:active:not(:disabled), .button:active:not(:disabled) { transform: none; }
  #toast, #toast.show { transform: translateX(-50%); }
}

.selection-fill { pointer-events: none; transform-origin: left center; }
.toolbar .search input { background: var(--surface-inset); border-color: transparent; padding: 8px 12px 8px 36px; min-height: 38px; font-size: 14px; }

/* Chinese administration screens retain a comfortable reading size. */
@media (min-width: 761px) {
  table { font-size: 15px; }
  th { font-size: 13px; }
  .cell-sub, .bottom-line { font-size: 13px; }
  .button, .link-button { font-size: 15px; }
  .button.small { font-size: 14px; }
  .tabs button, .field, .form-section h3 { font-size: 14px; }
  .field input:not([type=checkbox]), .field select, .field textarea { font-size: 15px; }
  .flow-step-name, .rail-current-node, .upload-name { font-size: 15px; }
  .allocation input, .allocation select { font-size: 14px; }
  .upload-meta, .upload-hint, .flow-role, .flow-date, .flow-actual, .flow-wait { font-size: 13px; }
}

/* Materials form a flat list within their workspace. */
.upload-item { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 20px 0; margin: 0; }
.upload-item:last-child { border-bottom: 0; }
.schedule-date { display: block; min-width: 0; }
.schedule-date > span { display: none; }
@media (max-width: 760px) {
  .schedule-date > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; }
}

/* A dedicated workspace always exposes its way back to the list. */
.workspace-back { position: sticky; top: 0; z-index: 3; background: var(--canvas); padding: 0 0 12px; margin-bottom: 8px; }
.breadcrumb .back-button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 500; }
.breadcrumb .back-button:hover { background: #ececef; }
.back-button .icon { width: 16px; height: 16px; }
.rail-batch-title { color: var(--ink); font-size: 14px; font-weight: 550; line-height: 1.5; }

/* Shared rounded menus, including options rendered above dialog clipping. */
.select-control { display: block; min-width: 0; width: 100%; position: relative; }
.select-control > select[hidden] { display: none!important; }
.select-trigger { width: 100%; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font-size: 15px; line-height: 1.5; text-align: left; }
.select-trigger:hover:not(:disabled) { background: #fafafa; border-color: #a6a6ac; }
.select-trigger[aria-expanded=true] { border-color: var(--blue); background: var(--surface); }
.select-trigger[aria-invalid=true] { border-color: var(--red); }
.select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1.5em; }
.select-chevrons { display: flex; flex-shrink: 0; color: var(--muted); }
.select-chevrons svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.select-error { display: block; color: var(--red); font-size: 12px; margin-top: 5px; }
.select-menu { position: fixed; inset: auto; margin: 0; z-index: 200; overflow: auto; overscroll-behavior: contain; padding: 6px; border: 0; border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 12px 36px rgba(20,20,24,.18),0 3px 10px rgba(20,20,24,.1); scrollbar-width: thin; font: 14px/1.5 'Workspace Sans',sans-serif; }
.select-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.select-option > span:first-child { overflow-wrap: anywhere; }
.select-option[aria-selected=true] { font-weight: 550; }
.select-option.is-highlighted { background: var(--blue-light); color: var(--blue); }
.select-option[aria-disabled=true] { opacity: .45; cursor: not-allowed; }
.select-option-check { display: flex; width: 16px; flex-shrink: 0; }
.select-option-check svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account-select .select-control { width: 225px; }
.account-select .select-trigger { min-height: 36px; background: transparent; border-color: transparent; font-size: 14px; padding: 6px 8px; }
.account-select .select-trigger:hover, .account-select .select-trigger[aria-expanded=true] { background: #eaeaed; }
.flow-rail .select-trigger { font-size: 13px; min-height: 42px; }
.allocation .select-trigger { min-height: 42px; padding: 9px 10px; font-size: 14px; gap: 6px; }
.track-template > .select-control { flex: 1; }
.compact-row .select-trigger { font-size: 13px; }

/* Additional responsibilities and linked screening use the existing desktop system. */
@media (min-width: 901px) {
 .modal.wide { width: 1160px; }
 .allocation-labels, .allocation { grid-template-columns: minmax(135px,1.1fr) 108px minmax(140px,1.2fr) 64px minmax(100px,.8fr) minmax(155px,1fr) 32px; }
}
.field-help { display: block; color: var(--muted); font-size: 13px; line-height: 1.7; margin-top: 6px; }
.page-actions { display: flex; align-items: center; gap: 8px; }
.stage-context { margin: 0 0 24px; padding: 0 0 24px; border-bottom: 1px solid var(--border); }
.stage-context-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.stage-context strong { font-size: 16px; font-weight: 600; }
.stage-context p { color: var(--secondary); font-size: 14px; line-height: 1.8; margin: 6px 0 10px; }
.stage-context small { display: block; color: var(--muted); font-size: 13px; line-height: 1.8; }
.stage-context .button { flex-shrink: 0; text-decoration: none; }
.stage-context .button.ghost { margin-top: 8px; }
.review-approval { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--green); font-size: 14px; }
.review-approval .icon { width: 17px; margin-right: 8px; }
.review-approval p { color: var(--secondary); margin: 8px 0 0 25px; }

/* Process supervision uses the same document workspace and read-only details. */
.process-intro,.process-round-head{display:flex;align-items:center;justify-content:space-between;gap:20px}
.process-intro h3,.process-round h3{margin:0;font-size:20px}
.process-intro p,.process-note{font-size:14px;color:var(--secondary);line-height:1.7}
.process-intro p{margin:0}
.process-metrics{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--border);margin-bottom:16px}
.process-metrics span{display:block;font-size:14px;color:var(--secondary);margin-bottom:8px}
.process-metrics strong{display:block;font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.process-metrics strong span{font-size:inherit;color:inherit;margin:0}
.process-metrics small{font-size:14px;font-weight:400;color:var(--muted)}
.process-table-wrap{border:1px solid var(--border);border-radius:12px;overflow-x:auto;margin-top:20px}
.process-table-wrap table{width:100%;font-size:14px}
.process-table-wrap th,.process-table-wrap td{padding:15px 14px}
.process-table td:first-child{display:flex;align-items:flex-start;gap:10px;min-width:230px}
.process-table td strong{font-size:15px;font-weight:500}
.process-table small{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.process-table small.overdue{color:var(--red)}
.process-table .link-button{white-space:nowrap;font-size:14px}
.process-index{color:var(--muted);font-variant-numeric:tabular-nums;margin-top:2px}
.process-current{background:var(--blue-light)}
.process-duration{font-variant-numeric:tabular-nums;white-space:nowrap}
.process-section-title{font-size:18px;margin:30px 0 8px}
.process-events{padding:0;margin:20px 0;list-style:none}
.process-events li{display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px;padding:16px 0;border-bottom:1px solid var(--border)}
.process-events time{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.process-events li strong{font-size:14px;margin-right:12px}
.process-events li span,.process-events li p{font-size:14px;line-height:1.7}
.process-events li p{margin:8px 0 0;white-space:pre-wrap}
.process-events li small{display:block;color:var(--secondary);line-height:1.7;margin-top:8px;white-space:pre-wrap;overflow-wrap:anywhere}
.process-round{padding:24px 0;border-bottom:1px solid var(--border)}
.process-round:last-child{border-bottom:0}
.process-round-times{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin:22px 0}
.process-round dt,.process-values dt{font-size:13px;color:var(--muted);margin-bottom:8px}
.process-round dd,.process-values dd{margin:0;font-size:15px;line-height:1.6;font-variant-numeric:tabular-nums;white-space:pre-wrap;overflow-wrap:anywhere}
.process-comment{padding:16px 18px;background:var(--surface-inset);border-radius:12px;font-size:15px}
.process-comment p{white-space:pre-wrap;margin:8px 0 0;line-height:1.7;overflow-wrap:anywhere}
.process-submission h4{font-size:16px;margin:22px 0 6px}
.process-values{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}
.process-values div{min-width:0}

.recording-preview video{display:block;width:100%;max-height:52vh;border-radius:12px;background:#1d1d1f}
.recording-preview audio{display:block;width:100%;margin:24px 0}
.recording-preview>p{overflow-wrap:anywhere}

.meeting-notice{margin:0 0 20px;padding:18px 22px;background:#f8f9fb;border:1px solid #dce1e8;border-radius:16px;color:#333b47}
.meeting-notice.is-upcoming{background:#fff8e8;border-color:#d7ad55;border-left:5px solid #b98015}
.meeting-notice-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.meeting-notice-title>strong{font-size:17px}.meeting-notice-title>.pill{margin-left:auto}
.meeting-notice dl{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 12px}
.meeting-notice dt{font-size:13px;margin-bottom:6px;color:#695a3b}.meeting-notice dd{font-size:20px;font-weight:650;margin:0;overflow-wrap:anywhere}
.meeting-notice p{font-size:14px;line-height:1.6;white-space:pre-wrap;margin:8px 0;overflow-wrap:anywhere}
.meeting-notice-foot{display:flex;align-items:center;gap:16px;justify-content:space-between;margin-top:14px;font-size:13px;line-height:1.7}
.meeting-unread{display:inline-block;color:#895500;background:#fff0c9;border-radius:6px;padding:2px 7px;margin-left:8px;font-weight:600}
@media(max-width:700px){.meeting-notice{padding:16px}.meeting-notice dl{grid-template-columns:1fr;gap:12px}.meeting-notice dd{font-size:18px}.meeting-notice-foot{align-items:flex-start;flex-direction:column}}

.meeting-notice{padding:16px 18px}.meeting-notice dl{margin:14px 0 12px}.meeting-notice dd{font-size:18px}.meeting-notice-foot{margin-top:10px}
.meeting-details summary,.meeting-history>summary{font-size:13px;cursor:pointer;color:#695a3b;line-height:1.6}.meeting-history{margin-bottom:20px}.meeting-history .meeting-notice{margin-top:12px}.meeting-history>summary{color:var(--muted)}
.task-workspace:has(.meeting-notice) .task-heading{padding:18px 24px 14px}
.task-workspace:has(.meeting-notice) .task-path{margin-bottom:8px}
.task-workspace:has(.meeting-notice) .task-tabs{padding:0 24px 12px}
.task-workspace:has(.meeting-notice) .task-scroll{padding:18px 24px}
.meeting-notice-title>strong{font-size:15px}.meeting-notice dl{gap:12px}.meeting-notice dt{font-size:12px}.meeting-notice dd{font-size:16px}.meeting-notice .button{min-height:32px;padding:6px 12px}

/* The HR batch overview is one spreadsheet-like surface. */
.stage-page{height:100%;max-width:none;min-height:460px;display:flex;flex-direction:column;padding:24px 28px}
.stage-page .page-head{flex-shrink:0;margin-bottom:20px;gap:20px}.stage-page .page-head h1{font-size:23px;margin-bottom:4px}.stage-page .page-head .sub{font-size:12px}
.stage-batch-heading{display:flex;gap:12px;align-items:center;min-width:0}.stage-batch-heading>.icon-button{flex-shrink:0}.stage-page .page-actions{flex-shrink:0;gap:8px}
.batch-view-switch{align-self:flex-start;background:var(--surface-inset);padding:4px;border-radius:var(--radius-control);margin-bottom:16px;flex-shrink:0}
.batch-view-switch button{padding:8px 16px;min-height:40px}.batch-view-switch button.active{background:var(--surface);box-shadow:var(--shadow-control)}
.case-page>.batch-view-switch{margin-top:-8px;margin-bottom:12px}.workspace-back{display:flex;gap:12px;flex-wrap:wrap}
.stage-sheet{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;overflow:hidden}
.sheet-toolbar{display:flex;align-items:center;gap:12px;padding:12px 16px;min-height:64px;flex-shrink:0;border-bottom:1px solid var(--border)}
.sheet-stage-picker{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--secondary)}.sheet-stage-picker>.select-control{width:172px}.sheet-stage-picker .select-trigger{color:var(--ink);font-weight:600}
.sheet-toolbar .select-trigger{min-height:36px;height:36px;font-size:13px;padding:6px 10px;border-color:var(--border);box-shadow:none}
.sheet-control>.select-control{width:116px}.sheet-status-filter>.select-control{width:160px}.sheet-toolbar-divider{width:1px;height:24px;background:var(--border);margin:0 4px}
.sheet-toolbar>.button{font-size:12px;padding:6px 8px;min-height:36px}
.sheet-search{width:230px;margin-left:auto;flex-shrink:0}.sheet-search input{width:100%;min-height:36px;height:36px;font-size:13px;padding:6px 10px 6px 32px;background:var(--surface-inset);border-color:transparent}.sheet-search>.icon{left:10px;width:16px;height:16px}
.stage-table-scroll{min-height:0;overflow:auto;flex:1;overscroll-behavior:contain}.stage-table-scroll:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.stage-table{min-width:1152px;table-layout:fixed;width:100%;font-size:14px;border-collapse:separate;border-spacing:0}
.stage-table th,.stage-table td{padding:10px 12px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);vertical-align:middle;background:var(--surface);overflow-wrap:anywhere}
.stage-table th:last-child,.stage-table td:last-child{border-right:0}.stage-table thead th{position:sticky;top:0;z-index:2;font-size:13px;line-height:20px;font-weight:500;background:var(--surface-inset);color:var(--secondary);white-space:nowrap}
.stage-table tbody tr{height:62px}.stage-table tbody tr:hover>td,.stage-table tbody tr:hover>th{background:var(--blue-light)}
.stage-table .sheet-index{width:44px;padding:10px 4px;text-align:center;color:var(--muted);font-weight:400;font-size:12px;font-variant-numeric:tabular-nums;background:var(--surface-inset)}
.stage-table .sheet-department{position:sticky;left:0;z-index:1;border-right-color:var(--border-strong)}.stage-table thead .sheet-index,.stage-table thead .sheet-department{z-index:3}
.stage-table td>strong{font-size:14px;font-weight:550;color:var(--ink)}.stage-table td>small{display:block;line-height:1.5;font-size:12px;color:var(--muted);margin-top:4px}.stage-table td>small.overdue{color:var(--red)}.stage-table td>.sheet-return-note{color:var(--amber)}
.stage-table .pill{font-size:12px;white-space:nowrap}.stage-table .link-button{font-size:13px;min-height:32px;padding:3px 0;white-space:nowrap;justify-content:flex-start}.stage-table .link-button:hover{background:transparent;text-decoration:underline;text-underline-offset:4px}.sheet-material-link .icon{width:15px;height:15px}.sheet-row-action .icon{width:12px;height:12px}.sheet-row-action.is-pending{font-weight:650}.sheet-time{font-variant-numeric:tabular-nums;white-space:nowrap}
.sheet-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0;min-height:40px;padding:10px 16px;border-top:1px solid var(--border);font-size:11px;color:var(--muted);background:var(--surface)}.sheet-footer-separator{margin:0 8px}
@media(max-width:1100px){.sheet-toolbar{gap:8px;flex-wrap:wrap}.sheet-search{width:200px}.stage-page .page-head{flex-wrap:wrap}.stage-page .page-actions{margin-left:auto}}

/* Completion facts share the same hierarchy in the ledger, report, and archive. */
.process-metrics .process-completed-at{font-size:20px;line-height:1.9;color:var(--green)}
.process-table thead th{background:var(--surface-inset);color:var(--secondary)}
.process-table td strong{font-weight:600}
.process-duration time{color:var(--ink);font-weight:550}
.process-duration>small{font-size:12px;color:var(--secondary)}
.archive-timing{display:flex;justify-content:center;gap:40px;margin:24px 0}
.archive-timing dt{font-size:13px;color:var(--muted);margin-bottom:6px}
.archive-timing dd{margin:0;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}

/* Compact task desk: the form, materials and actions share one viewport. */
.case-page{max-width:none;padding:12px 24px 20px;min-height:0}
.case-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0;margin-bottom:12px}
.case-toolbar .workspace-back{position:static;background:none;margin:0;padding:0;gap:8px;flex-wrap:wrap}
.case-toolbar .back-button{min-height:32px;padding:4px 8px;font-size:12px;border-color:transparent;background:transparent}
.case-toolbar .page-actions{display:flex;gap:8px;flex-shrink:0}.case-toolbar .button.small{min-height:32px;font-size:12px;padding:5px 10px}
.case-batch-line{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;flex-shrink:0;margin:0 0 12px}
.case-batch-line h1{font-size:18px;font-weight:600;line-height:1.5;letter-spacing:-.02em;margin:0}
.case-batch-line .sub{font-size:12px;gap:4px 12px}
.case-page .case-layout{min-height:0;border-radius:12px}
.case-page .task-heading{padding:12px 20px 8px}
.case-page .task-path{font-size:12px;margin-bottom:4px;gap:8px;min-height:24px}
.case-page .task-path .link-button{min-height:24px;font-size:12px;padding:0 4px}
.case-page .task-title-line{gap:12px;flex-wrap:wrap}
.case-page .task-title-line h2{font-size:19px;line-height:1.5;letter-spacing:-.02em}
.case-page .assignee{font-size:12px}.case-page .assignee .avatar{width:24px;height:24px}
.case-page .task-tabs{padding:0 20px 8px;gap:4px}
.case-page .task-tabs button{min-width:64px;min-height:30px;font-size:13px;padding:4px 12px}
.case-page .task-scroll{padding:16px 20px}
.case-page .task-scroll--form{display:flex;flex-direction:column;overflow:auto}
.work-content{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}
.work-notices{flex-shrink:0;max-height:38%;overflow:auto;margin-bottom:12px}
.work-notices .campaign-note,.work-notices .return-note{font-size:13px;padding:8px 12px;margin-bottom:8px;border-radius:6px}
.work-notices .campaign-note p{font-size:13px;line-height:1.6}
.work-notices .stage-context{padding:0 0 8px;margin-bottom:8px}
.work-notices .stage-context strong{font-size:14px}
.work-notices .stage-context p{font-size:12px;line-height:1.6;margin:4px 0 6px}
.work-notices .stage-context small{font-size:11px;line-height:1.6}
.work-notices .stage-context .button{font-size:12px;min-height:32px;padding:5px 10px}
.work-notices .info-strip{font-size:12px;padding:0;background:none;margin:0;gap:8px 20px;border-radius:0}
.work-notices .info-strip b{margin-left:6px}
.work-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;flex:1;min-height:0}
.work-grid.has-materials{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.work-pane{min-width:0;min-height:0;overflow:auto;padding:0 4px 0 0;scrollbar-gutter:stable}
.work-grid.has-materials .work-materials{border-left:1px solid var(--border);padding-left:24px}
.work-pane .section-label{font-size:13px;min-height:24px;margin-bottom:8px;gap:12px}
.work-pane .section-label>.muted{font-size:12px;white-space:nowrap}
.case-page .work-pane .field-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.case-page .work-pane .field{font-size:12px;gap:4px}
.case-page .work-fields .field:has([data-case-field="position"]){grid-column:1/-1}
.case-page .work-pane input:not([type=checkbox]):not([type=file]),.case-page .work-pane select,.case-page .work-pane .select-trigger,.case-page .work-pane textarea{font-size:13px;min-height:36px;padding:7px 10px;line-height:1.6}
.case-page .work-pane textarea{height:88px;min-height:72px;resize:vertical}
.case-page .work-notices+.work-grid textarea{height:80px;min-height:64px}
.work-owner{font-size:12px;color:var(--muted);margin:12px 0 0}
.case-page .upload-list .upload-item{padding:6px 0;gap:10px;margin:0;border:0;border-bottom:1px solid var(--border);border-radius:0;background:none;flex-wrap:nowrap;min-height:52px}
.case-page .upload-list .upload-item:first-child{padding-top:0}
.case-page .upload-list .file-symbol{width:28px;height:32px;border-radius:6px}.case-page .upload-list .file-symbol .icon{width:18px;height:18px}
.case-page .upload-list .upload-name{font-size:13px;line-height:1.5}.case-page .upload-list .upload-meta{font-size:12px;line-height:1.4;margin-top:2px}
.case-page .upload-list .upload-actions{gap:8px;margin-left:0;flex-wrap:nowrap;max-width:none}
.case-page .upload-list .upload-actions .button,.case-page .upload-list .upload-actions .link-button{font-size:12px;min-height:32px;padding:4px 8px}
.case-page .upload-list .template-download{padding:4px 0}.case-page .upload-list .button .icon{width:14px;height:14px}
.case-page .work-materials .upload-hint{margin:8px 0 0;font-size:11px;line-height:1.6}
.case-page .task-footer{padding:10px 20px;min-height:58px;gap:12px}
.case-page .task-footer .button{min-height:36px;padding:6px 16px;font-size:13px}
.case-page .task-footer .hint{font-size:12px}
@media(min-width:761px) and (max-width:1400px){
 .app-shell.with-flow{grid-template-columns:260px minmax(0,1fr)}
 .case-page{padding:12px 16px 16px}.work-grid{gap:16px}.work-grid.has-materials .work-materials{padding-left:16px}
}
@media(max-width:1000px){
 .work-grid.has-materials{grid-template-columns:minmax(0,1fr)}
 .case-page .task-scroll--form{display:block}.work-content{display:block}.work-grid{display:block}
 .work-notices{max-height:none;overflow:visible}.work-pane{overflow:visible;padding-right:0;scrollbar-gutter:auto}
 .work-grid.has-materials .work-materials{border-left:0;border-top:1px solid var(--border);padding:16px 0 0;margin-top:20px}
 .work-grid.has-materials .upload-item{display:flex}.work-grid.has-materials .upload-actions{margin-left:auto;justify-content:flex-end}
 .case-batch-line{gap:4px 12px}.case-toolbar{gap:8px;flex-wrap:wrap}.case-toolbar .page-actions{margin-left:auto}
}
@media(max-width:760px){
 .case-page{height:100%;min-height:0;padding:12px}.case-page .case-layout{min-height:0}
 .case-page .task-heading{padding:12px 16px 8px}.case-page .task-tabs{padding:0 16px 8px}.case-page .task-scroll{padding:16px}
 .case-page .task-title-line h2{font-size:18px}.case-page .task-footer{padding:10px 16px;flex-wrap:wrap}
 .case-page .work-pane .field-grid{grid-template-columns:minmax(0,1fr)}
 .case-page .upload-list .upload-item{flex-wrap:wrap}.case-page .upload-list .upload-actions{margin-left:38px}
 .case-page .work-pane input:not([type=checkbox]):not([type=file]),.case-page .work-pane textarea{font-size:16px}
}

/* The numbered flow remains a quiet, connected diagram. Blue always means active. */
.stage-overview-page{height:100%;max-width:none;padding:24px 32px;display:flex;flex-direction:column;min-height:0;--flow-gap:32px;--flow-row-gap:24px;--flow-line:#858b95}
.stage-overview-page .page-head{flex-shrink:0;margin-bottom:20px;gap:20px}.stage-overview-page .page-head h1{font-size:23px;margin-bottom:4px}.stage-overview-page .page-head .sub{font-size:12px}
.stage-overview-page .page-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.stage-overview-page .sheet-control>.select-control{width:120px}.stage-overview-page .select-trigger{min-height:36px;font-size:13px}
.stage-now-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-shrink:0;padding:12px 16px;margin-bottom:24px;background:var(--surface);border:1px solid var(--border);border-radius:14px}
.stage-now-status{display:flex;align-items:center;gap:12px;min-width:0}
.stage-now-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--blue-light);color:var(--blue);flex-shrink:0}.stage-now-icon>.icon{width:20px;height:20px}.is-finished .stage-now-icon{background:var(--green-light);color:var(--green)}
.stage-now-status>div{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}.stage-now-status strong{font-size:14px;font-weight:600}.stage-now-status>div>span{font-size:12px;color:var(--muted)}
.stage-asof{display:flex;align-items:center;gap:12px;flex-shrink:0;font-size:12px;color:var(--muted)}.stage-asof time{font-variant-numeric:tabular-nums}.stage-asof .button{min-height:30px;padding:4px 8px;font-size:12px}.stage-asof .icon{width:14px;height:14px}.is-refreshing .icon{animation:spin 700ms linear infinite}
.stage-map-viewport{min-height:0;flex:1;padding:6px;container:stage-map / size}
.stage-map-grid{--flow-rows:var(--flow-wide-rows);display:grid;height:min(100%,calc(var(--flow-rows)*150px + (var(--flow-rows) - 1)*var(--flow-row-gap)));grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(var(--flow-rows),minmax(0,1fr));column-gap:var(--flow-gap);row-gap:var(--flow-row-gap);list-style:none;padding:0;margin:0;align-content:start}
.stage-map-item{position:relative;min-width:0;min-height:0;grid-row:var(--flow-row);grid-column:var(--flow-column)}
.stage-node{display:flex;flex-direction:column;align-items:stretch;text-align:left;width:100%;height:100%;min-height:0;padding:clamp(6px,2cqh,14px) 14px;background:var(--surface);border:1px solid var(--border-strong);border-radius:14px;color:var(--ink);line-height:1.5;position:relative;z-index:1;transition:border-color 160ms var(--ease-out),background-color 160ms var(--ease-out),transform 120ms var(--ease-out)}
.stage-node:hover{border-color:var(--blue);background:var(--surface)}
.stage-node:active:not(:disabled){transform:scale(.985);background:var(--blue-light)}
.stage-node:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.stage-node-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px;font-size:11px;color:var(--muted)}
.stage-node-index{display:grid;place-items:center;width:24px;height:22px;border-radius:6px;background:var(--surface-inset);color:var(--secondary);font-variant-numeric:tabular-nums;font-size:11px;font-weight:600}
.stage-node-state{display:flex;align-items:center;gap:4px;white-space:nowrap;line-height:20px}.stage-node-state .icon{width:12px;height:12px}
.stage-node-title{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0}.stage-node-title>strong{display:inline-block;width:max-content;max-width:calc(100% - 18px);font-size:17px;line-height:1.4;font-weight:620;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-node-open{display:grid;place-items:center;color:var(--muted);opacity:.45;transform:translateX(-2px);transition:transform 180ms var(--ease-out),opacity 180ms var(--ease-out),color 180ms var(--ease-out)}.stage-node-open .icon{width:14px;height:14px}
.stage-node:hover .stage-node-open,.stage-node:focus-visible .stage-node-open{color:var(--blue);opacity:1;transform:translateX(1px)}
.stage-node-progress{display:flex;align-items:baseline;justify-content:space-between;gap:6px;font-size:11px;color:var(--muted);margin-top:auto;font-variant-numeric:tabular-nums}
.stage-node-progress>strong{font-size:17px;font-weight:650;color:var(--ink);letter-spacing:-.02em}.stage-node-progress>strong>span{font-size:12px;font-weight:450;color:var(--muted);letter-spacing:0}
.stage-node-meter{display:block;height:3px;border-radius:2px;background:var(--surface-inset);margin-top:5px;overflow:hidden}.stage-node-meter>span{display:block;width:100%;height:100%;border-radius:inherit;background:#7e8793;transform-origin:left center}
.stage-node-meta{display:flex;justify-content:space-between;gap:6px;font-size:11px;color:var(--muted);margin-top:6px;white-space:nowrap}
.stage-node.is-active{border-color:var(--blue);background:var(--blue-light)}.stage-node.is-active:hover{border-color:var(--blue-hover);background:#e3f0ff}
.stage-node.is-active .stage-node-title>strong,.stage-node.is-active .stage-node-open,.stage-node.is-active .stage-node-progress>strong{color:var(--blue)}
.stage-node.is-active .stage-node-index{color:var(--blue);background:#dcecff}.stage-node.is-active .stage-node-state{color:var(--surface);background:var(--blue);padding:0 6px;border-radius:5px}
.stage-node.is-active .stage-node-progress,.stage-node.is-active .stage-node-progress>strong>span,.stage-node.is-active .stage-node-meta{color:#41678f}.stage-node.is-active .stage-node-meter{background:#d1e3f7}.stage-node.is-active .stage-node-meter>span{background:var(--blue)}
.current-node-dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.stage-node.is-complete .stage-node-state{color:var(--green)}.stage-node.is-complete .stage-node-index{background:var(--green-light);color:var(--green)}.stage-node.is-complete .stage-node-meter>span{background:var(--green)}
.stage-map-connector{position:absolute;left:100%;top:50%;width:var(--flow-gap);height:16px;transform:translateY(-50%);display:grid;place-items:center;color:var(--flow-line);pointer-events:none;transition:color 180ms var(--ease-out)}
.stage-connector-line{position:absolute;left:0;right:0;top:calc(50% - .75px);height:1.5px;background:currentColor}
.stage-connector-arrow{position:relative;width:12px;height:12px;fill:var(--canvas);stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;background:var(--canvas);transition:transform 180ms var(--ease-out)}
.stage-map-connector.is-reverse{left:auto;right:100%;transform:translateY(-50%) rotate(180deg)}
.stage-map-connector.is-turn{left:50%;top:100%;width:16px;height:var(--flow-row-gap);transform:translateX(-50%)}
.stage-map-connector.is-turn .stage-connector-line{left:calc(50% - .75px);right:auto;top:0;bottom:0;width:1.5px;height:auto}.stage-map-connector.is-turn .stage-connector-arrow{transform:rotate(90deg)}
.stage-map-item:has(.stage-node:hover)>.stage-map-connector,.stage-map-item:has(.stage-node:focus-visible)>.stage-map-connector{color:var(--blue)}
.stage-map-item:has(.stage-node:hover) .stage-connector-arrow{transform:translateX(2px)}.stage-map-item:has(.stage-node:hover) .is-turn .stage-connector-arrow{transform:translateY(2px) rotate(90deg)}


.stage-stat-line{display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--secondary);margin:-4px 0 20px;flex-shrink:0}.stage-stat-line strong{font-size:15px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}.stage-stat-line .overdue strong{color:var(--red)}
.heading-divider{color:var(--border-strong);font-weight:400;margin:0 4px}
.department-table{width:100%;min-width:980px;border-collapse:separate;border-spacing:0;font-size:14px}
.department-table th,.department-table td{padding:14px 12px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);text-align:center;vertical-align:middle;background:var(--surface)}
.department-table th:first-child{min-width:160px;text-align:left;padding-left:20px}.department-table td:nth-child(2){min-width:140px}.department-table th:last-child,.department-table td:last-child{border-right:0}
.department-table thead th{position:sticky;top:0;z-index:2;font-size:12px;color:var(--secondary);font-weight:500;white-space:nowrap;background:var(--surface-inset)}.department-table tbody th{font-weight:550}
.department-table tbody tr:hover>th,.department-table tbody tr:hover>td{background:var(--blue-light)}
.department-progress{font-size:15px;font-weight:650;font-variant-numeric:tabular-nums}.department-progress>span{font-weight:400;color:var(--muted)}.department-progress.is-complete{color:var(--green)}
.department-table td>small{display:block;font-size:11px;color:var(--muted);line-height:1.6;margin-top:3px}
.department-count{font-variant-numeric:tabular-nums;font-weight:550}.department-count.is-zero{font-weight:400;color:var(--muted)}
.department-table .link-button{font-size:13px;min-height:32px;white-space:nowrap}.department-table .link-button .icon{width:13px;height:13px}
@media(max-height:780px) and (min-width:1101px){
 .stage-overview-page{padding:16px 28px;--flow-row-gap:20px;--flow-gap:28px}.stage-overview-page .page-head{margin-bottom:14px}
 .stage-node{padding:clamp(6px,2cqh,10px) 14px}.stage-node-top{margin-bottom:4px}.stage-node-index{height:18px;width:22px;font-size:10px}.stage-node-state{font-size:10px;line-height:18px}.stage-node-title>strong{font-size:16px}.stage-node-progress>strong{font-size:15px}.stage-node-meta{font-size:10px;margin-top:4px}.stage-node-meter{margin-top:3px}
 .stage-now-strip{margin-bottom:16px;padding:10px 14px}.stage-now-icon{width:30px;height:30px}
}
@media(max-width:1100px){
 .stage-overview-page{padding:20px;--flow-gap:20px;--flow-row-gap:16px}.stage-overview-page .page-head{flex-wrap:wrap;gap:12px}.stage-overview-page .page-actions{margin-left:auto}
 .stage-node{padding:clamp(6px,2cqh,12px) 10px}.stage-node-title>strong{font-size:15px}.stage-node-progress>strong{font-size:15px}.stage-node-progress,.stage-node-top,.stage-node-meta{font-size:10px}
 .stage-now-status>div{gap:2px 12px}.stage-stat-line{gap:12px}
}
@container stage-map (max-height:360px){
 .stage-node-meta{display:none}.stage-node-top{margin-bottom:3px}.stage-node-index{height:18px}.stage-node-meter{margin-top:3px}
}
@container stage-map (max-height:250px){
 .stage-node{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;gap:2px 4px;padding:4px 8px}
 .stage-node-title{grid-column:1/-1;grid-row:1}.stage-node-title>strong{font-size:14px}
 .stage-node-top{grid-column:1;grid-row:2;justify-content:flex-start;gap:4px;margin:0;font-size:10px}.stage-node-index{width:18px;height:16px;font-size:10px}
 .stage-node-state{font-size:10px;line-height:16px}.stage-node-progress{grid-column:2;grid-row:2;margin:0}.stage-node-progress>strong{font-size:12px}
 .stage-node-progress>span,.stage-node-meter{display:none}
}
@media(max-width:760px){
 .stage-overview-page{padding:12px;--flow-gap:16px;--flow-row-gap:12px}
 .stage-overview-page .page-head{gap:8px;margin-bottom:10px}.stage-overview-page .page-head h1{font-size:18px}.stage-overview-page .page-head .sub{font-size:11px}
 .stage-overview-page .page-actions{width:100%;margin:0;justify-content:flex-end;gap:4px}.stage-overview-page .page-actions>.sheet-control{margin-right:auto}.stage-overview-page .page-actions .button{font-size:12px;padding:5px 8px;min-height:32px}
 .stage-overview-page .sheet-control>.select-control{width:106px}.stage-overview-page .select-trigger{min-height:32px;font-size:12px}
 .stage-map-grid{--flow-rows:var(--flow-compact-rows);grid-template-columns:repeat(3,minmax(0,1fr))}.stage-map-item{grid-row:var(--flow-compact-row);grid-column:var(--flow-compact-column)}
 .stage-node{padding:5px 7px;gap:0;border-radius:12px}.stage-node-top{margin-bottom:3px;font-size:10px;gap:3px}.stage-node-index{width:18px;height:16px;font-size:10px}.stage-node-state{font-size:10px;line-height:16px;gap:2px}.stage-node-state .icon{width:10px;height:10px}.stage-node.is-active .stage-node-state{padding:0 3px}
 .stage-node-title>strong{font-size:13px;max-width:100%}.stage-node-open{display:none}.stage-node-progress{font-size:10px;margin-top:auto}.stage-node-progress>strong{font-size:13px}.stage-node-progress>strong>span{font-size:10px}.stage-node-progress>span{font-size:0}.stage-node-progress>span::after{content:'完成';font-size:10px}.stage-node-meter{margin-top:3px;height:2px}.stage-node-meta{display:none}
 .stage-map-connector,.stage-map-connector.is-reverse,.stage-map-connector.is-turn{left:100%;right:auto;top:50%;width:var(--flow-gap);height:16px;transform:translateY(-50%)}
 .stage-map-connector .stage-connector-line,.stage-map-connector.is-turn .stage-connector-line{left:0;right:0;top:calc(50% - .75px);bottom:auto;width:auto;height:1.5px}.stage-map-connector .stage-connector-arrow,.stage-map-connector.is-turn .stage-connector-arrow{transform:none}
 .stage-map-connector.is-compact-reverse{left:auto;right:100%;transform:translateY(-50%) rotate(180deg)}
 .stage-map-connector.is-compact-turn{left:50%;top:100%;width:16px;height:var(--flow-row-gap);transform:translateX(-50%)}
 .stage-map-connector.is-compact-turn .stage-connector-line{left:calc(50% - .75px);right:auto;top:0;bottom:0;width:1.5px;height:auto}.stage-map-connector.is-compact-turn .stage-connector-arrow{transform:rotate(90deg)}
 .stage-map-item:has(.stage-node:hover) .stage-connector-arrow{transform:none}.stage-map-item:has(.stage-node:hover) .is-compact-turn .stage-connector-arrow{transform:rotate(90deg)}
 .stage-now-strip{gap:8px;padding:7px 10px;margin-bottom:10px}.stage-now-icon,.stage-now-status>div>span,.stage-asof>span{display:none}.stage-now-status strong{font-size:12px}.stage-asof .button{font-size:11px;padding:3px 5px;min-height:26px}

 @container stage-map (max-height:400px){
  .stage-node{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;gap:2px 4px;padding:4px 7px}
  .stage-node-title{grid-column:1/-1;grid-row:1}.stage-node-top{grid-column:1;grid-row:2;margin:0}.stage-node-progress{grid-column:2;grid-row:2;margin:0}
  .stage-node-index,.stage-node-meter,.stage-node-progress>span{display:none}.stage-node-progress>strong{font-size:11px}
 }
}
@media(max-height:560px) and (min-width:761px){
 .stage-overview-page{padding:8px 16px;--flow-row-gap:12px;--flow-gap:20px}.stage-overview-page .page-head{margin-bottom:8px;gap:12px}.stage-overview-page .page-head h1{font-size:18px}.stage-overview-page .page-head .sub{font-size:11px}
 .stage-now-strip{padding:6px 10px;margin-bottom:8px;gap:8px}.stage-now-status strong{font-size:12px}.stage-now-status>div>span,.stage-now-icon{display:none}.stage-asof{font-size:11px}

}
@media(prefers-reduced-motion:reduce){
 .stage-node:active:not(:disabled),.stage-node-open,.stage-node:hover .stage-node-open,.stage-node:focus-visible .stage-node-open{transform:none}
 .stage-map-item:has(.stage-node:hover) .stage-connector-arrow{transform:none}.stage-map-item:has(.stage-node:hover) .is-turn .stage-connector-arrow{transform:rotate(90deg)}
 .is-refreshing .icon{animation:none}
}

/* Keep the search text clear of its icon and urgent counts visibly distinct. */
.sheet-search input:not([type=checkbox]):not([type=file]){padding-left:32px}
.stage-node-meta .overdue,.stage-stat-line .overdue,.department-count.overdue{color:var(--red)}

/* Termination is an independent, opt-in branch of each position's workflow. */
.termination-route{display:flex;list-style:none;align-items:center;margin:0 0 12px;padding:0;gap:24px;max-width:720px}
.termination-route li{display:flex;align-items:center;gap:8px;flex:1;font-size:13px;color:var(--muted)}.termination-route li:not(:last-child)::after{content:'';height:1px;flex:1;background:var(--border-strong);margin-left:8px}
.termination-step{width:24px;height:24px;display:grid;place-items:center;flex-shrink:0;background:var(--surface-inset);border-radius:50%;font-size:12px;font-variant-numeric:tabular-nums}.termination-step>.icon{width:14px;height:14px}
.termination-route .is-current{color:var(--blue);font-weight:550}.termination-route .is-current .termination-step{color:var(--surface);background:var(--blue)}.termination-route .is-done{color:var(--ink)}.termination-route .is-done .termination-step{color:var(--green);background:var(--green-light)}
.termination-guidance{font-size:13px;color:var(--secondary);margin:0 0 14px;line-height:1.7}
.termination-context{display:flex;gap:12px 32px;flex-wrap:wrap;padding:10px 0 14px;border-bottom:1px solid var(--border);font-size:12px;color:var(--muted);margin-bottom:16px}.termination-context strong{font-weight:500;color:var(--ink);margin-left:8px}
.termination-record{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;font-size:13px;margin:0 0 16px}.termination-record>.full{grid-column:1/-1}.termination-record dt{font-size:12px;color:var(--muted);margin-bottom:3px}.termination-record dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65}
.termination-field{max-width:820px}.termination-field>label{font-size:13px}.termination-field>textarea{min-height:80px;height:96px;font-size:13px;line-height:1.6;padding:10px 12px;resize:vertical}.termination-field>small{font-size:12px;color:var(--muted)}
.termination-error{color:var(--red);font-size:13px;margin:8px 0 0;min-height:0}.termination-error:empty{display:none}.termination-field textarea[aria-invalid=true]{border-color:var(--red)}
.termination-history{font-size:13px;border-top:1px solid var(--border);padding-top:12px;margin-top:16px}.termination-history summary{cursor:pointer;color:var(--secondary);min-height:32px;padding:4px 0}.termination-history section{padding:12px 0;border-bottom:1px solid var(--border)}
.termination-notice{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;margin-bottom:12px;border:1px solid var(--border);border-radius:9px;background:var(--surface-inset);font-size:12px;color:var(--secondary)}.termination-notice .link-button{font-size:12px;white-space:nowrap}
.termination-workspace .task-footer .hint{min-width:0}.termination-workspace .task-footer .action-group{flex-shrink:0}

/* Two peer views start directly from each campaign on the home page. */
.campaign-view-actions{display:flex;flex-direction:column;align-items:flex-start;gap:4px;white-space:nowrap}.campaign-view-actions .link-button{font-size:13px;min-height:30px;padding:3px 0}
.page-actions .batch-view-switch{margin:0;align-self:center}.page-actions .batch-view-switch button{font-size:13px;min-height:34px;padding:6px 12px}
.position-table{min-width:950px}.position-table tbody tr{height:70px}.positions-page .page-head{margin-bottom:18px}

/* Judge roster changes share the existing task workspace and form language. */
.judge-scroll{padding-bottom:32px}.judge-kind-tabs{display:flex;gap:8px;margin-bottom:24px}.judge-kind-tabs .active{color:var(--blue);background:var(--blue-light);border-color:var(--blue)}
.judge-heading{display:flex;align-items:center;gap:16px;margin-bottom:18px}.judge-heading>div{flex:1}.judge-heading h3,.judge-form h3,.judge-history h3{font-size:16px;margin:0 0 8px;font-weight:600}.judge-heading p,.judge-help{color:var(--muted);font-size:13px;line-height:1.7;margin:0 0 12px}.judge-heading p{margin:0}.judge-roster-row{display:grid;grid-template-columns:128px minmax(0,1fr);gap:20px;padding:16px 0;border-top:1px solid var(--border)}.judge-roster-label{display:flex;flex-direction:column;gap:8px;font-size:13px;padding-top:10px}.judge-roster-label span{color:var(--muted);font-variant-numeric:tabular-nums}.judge-roster-row .upload-item{padding:10px 12px}.judge-form,.judge-review-form{padding:24px 0;border-top:1px solid var(--border);margin-top:12px}.judge-form h3{margin-bottom:20px}.judge-form .field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.judge-form .field small{line-height:1.7;color:var(--muted)}.judge-form input[type=file]{padding:8px;font-size:13px}.judge-form-actions{margin-top:16px;display:flex;justify-content:flex-end;gap:10px}.judge-history{margin-top:28px}.judge-record{border-top:1px solid var(--border);padding:16px 0}.judge-record:last-child{border-bottom:1px solid var(--border)}.judge-record summary{cursor:pointer;font-size:13px;line-height:1.7}.judge-record summary>span:last-child{float:right;color:var(--muted);font-variant-numeric:tabular-nums}.judge-record-body{padding-top:12px}.judge-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;margin:0 0 16px;font-size:13px}.judge-facts .full{grid-column:1/-1}.judge-facts dt{color:var(--muted);margin-bottom:4px}.judge-facts dd{margin:0;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}.judge-review-result{font-size:13px;line-height:1.7;color:var(--ink);margin-bottom:0}.judge-notice{display:flex;align-items:center;gap:16px}.judge-notice p{flex:1;margin:0}.judge-notice .button{flex:none}.judge-form .form-error:empty,.judge-review-form .form-error:empty{display:none}

.judge-form .form-error,.judge-review-form .form-error{font-size:13px;color:var(--red);line-height:1.6}

.judge-inline-reason textarea{min-height:130px;resize:vertical}.judge-inline-reason .field-help{line-height:1.6}.judge-simple-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.judge-simple-grid .field{margin:0}.judge-submission-reason{margin:0 0 20px}.judge-submission-reason p{white-space:pre-wrap}


/* Roster details share the left result pane; records are expanded in place. */
.judge-inline-panel{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.judge-inline-panel .judge-heading{align-items:flex-start;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.judge-inline-panel .judge-heading>div{min-width:180px}
.judge-inline-panel .judge-heading h3,.judge-inline-panel .judge-history h3,.judge-inline-panel .judge-form h3{font-size:13px;margin:0 0 6px}
.judge-inline-panel .judge-heading p,.judge-inline-panel .judge-help{font-size:12px;line-height:1.6}
.judge-inline-panel .judge-roster-row{display:block;padding:10px 0}
.judge-inline-panel .judge-roster-label{flex-direction:row;justify-content:space-between;gap:8px;padding:0;font-size:12px}
.judge-inline-panel .judge-roster-row .muted{font-size:12px;margin:8px 0 0}
.judge-inline-panel .upload-item{padding:8px 0;gap:8px;margin:0;border:0;border-radius:0;background:none;flex-wrap:nowrap}
.judge-inline-panel .file-symbol{width:26px;height:30px;flex-shrink:0}
.judge-inline-panel .file-symbol .icon{width:16px;height:16px}
.judge-inline-panel .upload-name{font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.judge-inline-panel .upload-meta{font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.judge-inline-panel .upload-actions{flex-shrink:0;gap:4px;margin-left:0;flex-wrap:nowrap}
.judge-inline-panel .upload-actions .link-button{font-size:12px;padding:4px}
.judge-inline-panel .judge-history{margin-top:16px}
.judge-inline-panel .judge-record{padding:12px 0}
.judge-record-heading{display:flex;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;font-size:12px;line-height:1.6}
.judge-record-heading>span:last-child{color:var(--muted);font-variant-numeric:tabular-nums}
.judge-inline-panel .judge-record-body{padding-top:8px}
.judge-inline-panel .judge-facts{font-size:12px;gap:8px 16px;margin-bottom:8px}
.judge-inline-panel .judge-review-result{font-size:12px}
.judge-inline-panel .judge-form,.judge-inline-panel .judge-review-form{padding:16px 0 0;margin-top:12px}
.judge-inline-panel .judge-simple-grid{grid-template-columns:minmax(0,1fr);gap:12px}
.judge-inline-panel .judge-form-actions{gap:8px;margin-top:12px;flex-wrap:wrap}
.judge-inline-panel .judge-form-actions .button{font-size:12px;padding:6px 10px;min-height:32px}