/* The processing stages use the same neutral surfaces and blue accent in both themes. */
.processing-heading { align-items: flex-start; gap: 18px 24px; margin-bottom: 18px; }
.processing-heading > div { min-width: 0; }
.processing-heading p { max-width: 760px; line-height: 1.65; }
.processing-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
.processing-heading .processing-mode { flex-shrink: 0; margin: 0; }
.processing-mode .report-mode, .processing-mode#report-mode { margin-bottom: 0; }
.workflow-help { color: var(--muted); font-size: 12px; line-height: 1.6; }
.processing-mode > .workflow-help { max-width: 560px; }

.workflow-nav { margin: 0 0 20px; }
.workflow-nav > ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.workflow-nav > ol:has(> li[hidden]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.workflow-nav li { min-width: 0; }
.workflow-step { display: flex; align-items: flex-start; gap: 11px; width: 100%; height: 100%; min-height: 82px; padding: 15px; text-align: left; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink); }
.workflow-step:disabled { opacity: 1; cursor: default; }
.workflow-step:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--line-strong); }
.workflow-step-number { display: inline-grid; place-items: center; flex-shrink: 0; width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.workflow-step-copy { display: grid; gap: 5px; min-width: 0; padding-top: 2px; }
.workflow-step-copy > strong { color: var(--ink); font-size: 13px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.workflow-step-detail { color: var(--muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.workflow-step[data-state="current"], .workflow-step[aria-current="step"] { border-color: var(--teal); background: var(--accent-surface); box-shadow: inset 0 0 0 1px var(--teal); }
.workflow-step[data-state="current"] .workflow-step-number, .workflow-step[aria-current="step"] .workflow-step-number { background: var(--teal); border-color: var(--teal); color: var(--on-accent); }
.workflow-step[data-state="current"] .workflow-step-copy > strong, .workflow-step[aria-current="step"] .workflow-step-copy > strong { color: var(--accent-ink); }
.workflow-step[data-state="done"] .workflow-step-number { background: var(--accent-surface); border-color: var(--line); color: var(--accent-ink); }
.workflow-step[data-state="waiting"] .workflow-step-copy > strong { color: var(--text-secondary); }
.workflow-step[data-state="error"] { background: var(--error-bg); border-color: var(--error-line); }
.workflow-step[data-state="error"] .workflow-step-number { color: var(--error-ink); border-color: var(--error-line); background: var(--error-bg); }
.workflow-step[data-state="error"] .workflow-step-copy > strong, .workflow-step[data-state="error"] .workflow-step-detail { color: var(--error-ink); }
.workflow-nav > .workflow-help { margin-top: 9px; }

.filter-step-heading { display: flex; align-items: center; gap: 9px; min-width: 0; }
.filter-step-heading h2 { min-width: 0; color: var(--ink); font-size: 14px; font-weight: 600; }
.filter-step-heading .step-number, .task-stage-heading .step-number { display: inline-grid; place-items: center; flex-shrink: 0; width: 25px; height: 25px; border: 1px solid var(--line); border-radius: 6px; background: var(--accent-surface); color: var(--accent-ink); font-size: 11px; letter-spacing: 0; }
.filter-panel:has(.filter-context) .filter-heading { padding-bottom: 10px; border-bottom: 0; }
.filter-context { margin: 0; padding: 0 18px 15px; color: var(--muted); font-size: 12px; line-height: 1.6; border-bottom: 1px solid var(--line); }
.filter-context strong { color: var(--ink); font-weight: 600; }

.results-column > .task-controls { margin: 0 0 18px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.task-stage-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.task-stage-heading h2 { color: var(--ink); font-size: 16px; line-height: 1.4; font-weight: 600; }
.task-stage-heading + .workflow-help, .task-stage-heading + .task-format-note { margin-top: 0; }
.results-column > .task-controls .price-picker { background: var(--surface-soft); }
.results-column > .task-controls .price-heading .button { border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); }
.results-column > .task-controls .price-heading .button:hover { background: var(--surface-hover); }
.results-column > .task-controls .task-preview { font-size: 12px; }
#task-controls, #task-selection-summary, .filter-panel, .results-panel, .upload-section { scroll-margin-top: 18px; }

.selection-summary { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.selection-summary-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 13px; }
.selection-summary-heading h3 { color: var(--ink); font-size: 14px; line-height: 1.4; font-weight: 600; }
.selection-state, .output-state { display: inline-flex; align-items: center; max-width: 100%; padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--accent-surface); color: var(--accent-ink); font-size: 11px; line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; }
.selection-state[data-state="waiting"], .output-state[data-state="waiting"] { background: var(--paper); color: var(--muted); }
.selection-state[data-state="error"], .output-state[data-state="error"] { background: var(--error-bg); border-color: var(--error-line); color: var(--error-ink); }
.selection-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.selection-metrics > div { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; padding: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 7px; }
.selection-metrics > div:last-child { background: var(--accent-surface); }
.selection-metrics span { color: var(--text-secondary); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.selection-metrics strong { color: var(--ink); font-size: 25px; line-height: 1.2; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.selection-metrics small { color: var(--muted); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.selection-context { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 8px 14px; margin-bottom: 14px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.selection-context > div, .selection-context > p { display: grid; grid-template-columns: minmax(95px, .7fr) minmax(0, 2fr); gap: 8px 14px; margin: 0; }
.selection-context label, .selection-context span { color: var(--muted); }
.selection-context strong { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }

.task-date-rule { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: 7px; background: var(--accent-surface); }
.date-rule-heading { display: flex; flex-direction: column; gap: 4px; color: var(--accent-ink); font-size: 12px; line-height: 1.5; font-weight: 650; }
.date-rule-heading > span { color: var(--text-secondary); font-weight: 400; }
.date-example { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.date-example > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.date-example strong { display: block; color: var(--ink); font-size: 12px; line-height: 1.5; font-weight: 600; overflow-wrap: anywhere; }
.date-rule-note { margin-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.65; }
#task-filter-cta.button { min-height: 30px; padding: 4px 0; border: 0; background: transparent; color: var(--accent-ink); font-size: 12px; text-align: left; justify-content: flex-start; text-decoration: underline; text-underline-offset: 3px; }
#task-filter-cta.button:hover { color: var(--teal); }
.results-panel .output-state { margin-top: 8px; }
.results-panel > .workflow-help { margin-top: 10px; }
.month-card .month-days { margin-top: 6px; color: var(--text-secondary); font-size: 12px; line-height: 1.55; font-weight: 500; }

@media (max-width: 1100px) {
  .workflow-step { padding: 13px 11px; gap: 9px; }
  .workflow-step-copy > strong { font-size: 12px; }
  .results-column > .task-controls { padding: 18px; }
  .selection-summary { padding: 14px; }
  .selection-metrics { gap: 8px; }
  .selection-metrics > div { padding: 10px; }
  .selection-context > div, .selection-context > p { grid-template-columns: minmax(85px, .7fr) minmax(0, 2fr); gap: 7px 10px; }
}
@media (max-width: 900px) {
  .workflow-nav > ol, .workflow-nav > ol:has(> li[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-step { min-height: 75px; }
  .processing-heading { flex-wrap: wrap; gap: 14px; }
  .processing-heading .processing-mode { flex-shrink: 1; }
}
@media (max-width: 640px) {
  .processing-heading { margin-bottom: 15px; }
  .processing-mode { gap: 8px; margin-bottom: 14px; }
  .processing-mode .report-mode, .processing-mode#report-mode { width: 100%; }
  .processing-heading .processing-mode { width: 100%; }
  .workflow-nav { margin-bottom: 16px; }
  .workflow-nav > ol { gap: 8px; }
  .workflow-step { min-height: 87px; padding: 12px 10px; gap: 8px; }
  .workflow-step-number { width: 23px; height: 23px; font-size: 11px; border-radius: 6px; }
  .workflow-step-copy { gap: 4px; padding-top: 1px; }
  .workflow-step-detail { font-size: 11px; }
  .workflow-help { font-size: 11px; }
  .filter-context { padding: 0 17px 13px; font-size: 11px; }
  .results-column > .task-controls { padding: 16px 14px; margin-bottom: 16px; border-radius: 12px; }
  .task-stage-heading h2 { font-size: 15px; }
  .selection-summary { padding: 13px 11px; }
  .selection-summary-heading { margin-bottom: 11px; }
  .selection-summary-heading h3 { font-size: 13px; }
  .selection-metrics { gap: 6px; }
  .selection-metrics > div { gap: 5px; padding: 10px 8px; }
  .selection-metrics span { font-size: 11px; }
  .selection-metrics strong { font-size: 22px; }
  .selection-context { grid-template-columns: auto minmax(0, 1fr); font-size: 11px; }
  #task-filter-cta { grid-column: 1 / -1; }
  .selection-context > div, .selection-context > p { grid-template-columns: minmax(72px, .7fr) minmax(0, 2fr); gap: 6px 9px; }
  .task-date-rule { padding: 12px 10px; }
  .date-example { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .date-example > span { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: baseline; gap: 8px; }
  .date-example strong { font-size: 11px; }
  .results-panel .results-heading { flex-wrap: wrap; gap: 12px; }
  .results-panel .results-heading > div { min-width: 0; flex: 1 1 200px; }
  .results-panel .results-heading p { max-width: none; font-size: 11px; }
  .results-panel .results-heading .button { min-height: 36px; font-size: 11px; padding: 9px 11px; }
  .month-card .month-days { font-size: 11px; }
}
@media (max-width: 360px) {
  .workflow-nav > ol, .workflow-nav > ol:has(> li[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .workflow-step { min-height: 68px; }
  .selection-metrics strong { font-size: 20px; }
  .selection-context > div, .selection-context > p { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .date-example { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .date-example > span { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 3px 9px; }
}