* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #f4f5f7;
  color: #20242b;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.shell {
  width: min(880px, calc(100% - 32px));
  margin: 40px auto;
}

header {
  margin-bottom: 24px;
}

h1 {
  margin: 6px 0 8px;
  font-size: clamp(32px, 5vw, 52px);
}

.eyebrow {
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.panel {
  margin: 16px 0;
  padding: 20px;
  border: 1px solid #d7dbe2;
  border-radius: 14px;
  background: white;
}

textarea {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  resize: vertical;
  font: inherit;
}

.actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

button {
  padding: 10px 18px;
  border: 0;
  border-radius: 9px;
  background: #20242b;
  color: white;
  cursor: pointer;
  font-weight: 700;
}

button.secondary {
  background: #e7e9ed;
  color: #20242b;
}

.choice {
  display: block;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid #d7dbe2;
  border-radius: 8px;
}

.hidden {
  display: none;
}

pre {
  max-height: 420px;
  overflow: auto;
  white-space: pre-wrap;
}

/* WFV_WORKING_SET_PICKER_PRESENTATION_V1 */

.picker-heading {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}

.picker-heading h2 {
  margin: 0;
}

.picker-eyebrow {
  margin: 0 0 4px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.picker-help {
  margin: 0;
  max-width: 62ch;
  color: #5c6470;
}

#selection-groups {
  display: grid;
  gap: 14px;
}

.working-set-group {
  margin: 0;
  padding: 16px;
  border: 1px solid #d7dbe2;
  border-radius: 12px;
  background: #fff;
}

.working-set-group--decision {
  border-color: #d7a928;
  background: #fffaf0;
}

.working-set-group--missing {
  border-color: #c74b4b;
  background: #fff5f5;
}

.working-set-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.working-set-group-heading h3 {
  margin: 0;
  font-size: 1rem;
  text-transform: capitalize;
}

.working-set-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.working-set-status--suggested {
  background: #e8f6ec;
  color: #1f6b38;
}

.working-set-status--decision {
  background: #fff0bd;
  color: #755600;
}

.working-set-status--missing {
  background: #fde2e2;
  color: #972d2d;
}

.working-set-option {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 9px;
  padding: 12px;
  border: 1px solid #dfe3e8;
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}

.working-set-option:hover {
  border-color: #929aa5;
}

.working-set-option:has(input:checked) {
  border-color: #4d8e61;
  background: #f3fbf5;
}

.working-set-group--decision
.working-set-option:has(input:checked) {
  border-color: #b58a14;
  background: #fff7dd;
}

.working-set-option input {
  margin-top: 3px;
  flex: 0 0 auto;
}

.working-set-option-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.working-set-option-name {
  overflow-wrap: anywhere;
}

.working-set-option-location {
  color: #69717d;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.working-set-empty {
  margin: 0;
  color: #972d2d;
}

.picker-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

#continue-selection {
  min-width: 170px;
}

/* WFV Browser Operation History Renderer V1 */

.operation-history {
  display: grid;
  gap: 1rem;
}

.operation-history-heading,
.operation-history-record-heading {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.operation-history-heading h2,
.operation-history-record-heading h3,
.operation-history-record h4 {
  margin: 0;
}

.operation-history-status,
#operation-history-empty {
  margin: 0;
}

.history-list {
  display: grid;
  gap: 1rem;
}

.operation-history-record {
  border: 1px solid var(--border, #d7dde5);
  border-radius: 0.75rem;
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.operation-history-details {
  display: block;
}

.operation-history-summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 0.35rem 1rem;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr)
    auto;
}

.operation-history-summary-primary {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}

.operation-history-summary-context {
  overflow-wrap: anywhere;
}

.operation-history-summary time {
  font-size: 0.875rem;
  text-align: right;
}

.operation-history-detail-body {
  display: grid;
  gap: 1rem;
  padding-top: 1rem;
}

.operation-history-record-heading time {
  font-size: 0.875rem;
  text-align: right;
}

.operation-history-facts {
  display: grid;
  gap: 0.35rem 1rem;
  grid-template-columns: max-content minmax(0, 1fr);
  margin: 0;
}

.operation-history-facts dt {
  font-weight: 700;
}

.operation-history-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.operation-history-outputs {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding-left: 1.25rem;
}

.operation-history-outputs li {
  display: grid;
  gap: 0.25rem;
}

.operation-history-outputs span {
  font-size: 0.875rem;
}

.operation-history-outputs code {
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (max-width: 640px) {
  .operation-history-heading,
  .operation-history-record-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .operation-history-record-heading time {
    text-align: left;
  }

  .operation-history-summary {
    grid-template-columns: 1fr;
  }

  .operation-history-summary time {
    text-align: left;
  }

  .operation-history-facts {
    grid-template-columns: 1fr;
  }

  .operation-history-facts dd + dt {
    margin-top: 0.5rem;
  }
}

/* WFV Browser Value Report Renderer V1 */

.value-report {
  display: grid;
  gap: 1rem;
}

.value-report-heading {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.value-report-heading h2,
.value-report-detail h3 {
  margin: 0;
}

.value-report-status,
#value-report-zero,
#value-report-latest {
  margin: 0;
}

.value-metrics {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(
    2,
    minmax(0, 1fr)
  );
}

.value-metric {
  border: 1px solid var(--border, #d7dde5);
  border-radius: 0.75rem;
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
}

.value-metric strong {
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  line-height: 1;
}

.value-metric span {
  font-size: 0.9rem;
}

.value-report-detail {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(
    2,
    minmax(0, 1fr)
  );
}

.value-report-detail > section {
  border: 1px solid var(--border, #d7dde5);
  border-radius: 0.75rem;
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
}

.value-operation-counts {
  display: grid;
  gap: 0.35rem 1rem;
  grid-template-columns: minmax(0, 1fr) max-content;
  margin: 0;
}

.value-operation-counts dt {
  overflow-wrap: anywhere;
}

.value-operation-counts dd {
  font-weight: 700;
  margin: 0;
  text-align: right;
}

@media (max-width: 720px) {
  .value-metrics,
  .value-report-detail {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .value-report-heading {
    align-items: stretch;
    flex-direction: column;
  }
}

/* WFV Browser Email Operation History V1 */

.operation-history-email {
  border-top: 1px solid var(--border, #d7dde5);
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}

.operation-history-delivery {
  display: grid;
  gap: 0.35rem 1rem;
  grid-template-columns: max-content minmax(0, 1fr);
  margin: 0;
}

.operation-history-delivery dt {
  font-weight: 700;
}

.operation-history-delivery dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.operation-history-email h4 {
  margin: 0;
}

.operation-history-email-attachments {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding-left: 1.25rem;
}

.operation-history-email-attachments li {
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .operation-history-delivery {
    grid-template-columns: 1fr;
  }

  .operation-history-delivery dd {
    margin-bottom: 0.35rem;
  }
}


/* WFV Browser Workflow Library Projection V1 */

.workflow-library {
  display: grid;
  gap: 0.85rem;
}

.workflow-library[hidden] {
  display: none;
}

.workflow-library-heading h2,
.workflow-library-help {
  margin: 0;
}

.workflow-library-list {
  display: grid;
  gap: 0.65rem;
}

.workflow-library-item {
  text-align: left;
  width: 100%;
}

/* WFV_SAVED_WORKFLOW_SAVE_DECLINE_AUTHORITY_V1 */
.saved-workflow-recommendation-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.saved-workflow-recommendation-actions.hidden,
.saved-workflow-recommendation-actions[hidden] {
  display: none;
}

/*
 * WFV_WORKFLOW_STATUS_TREATMENT_V1
 *
 * Presentation only. Visible state/message text remains authoritative;
 * color is supplemental and never controls workflow behavior.
 */

#status.workflow-status--neutral {
  border-color: #d7dbe2;
  background: #fff;
}

#status.workflow-status--attention {
  border-color: #d7a928;
  background: #fffaf0;
}

#status.workflow-status--success {
  border-color: #4d8e61;
  background: #f3fbf5;
}

#status.workflow-status--error {
  border-color: #c74b4b;
  background: #fff5f5;
}

#status #state {
  font-weight: 600;
}

/*
 * WFV_GUIDANCE_PROJECTION_AUTHORITY_V1
 *
 * Presentation only. Canonical workflow facts remain owned by
 * Runtime V2 and existing workflow-intelligence authorities.
 */

#workflow-guidance {
  display: grid;
  gap: 1rem;
}

#workflow-guidance.hidden {
  display: none;
}

.workflow-guidance-heading {
  align-items: end;
  display: flex;
  justify-content: space-between;
}

.workflow-guidance-content {
  display: grid;
  gap: 0.9rem;
}

.workflow-guidance-section {
  display: grid;
  gap: 0.35rem;
}

.workflow-guidance-section h3,
.workflow-guidance-section p,
.workflow-guidance-section ul {
  margin: 0;
}

.workflow-guidance-section ul {
  padding-left: 1.25rem;
}

.workflow-guidance-next {
  border-top: 1px solid currentColor;
  padding-top: 0.9rem;
}

/* WFV_BROWSER_SAVED_WORKFLOW_MUTATION_AUTHORITY_V1 */
.workflow-library-mutation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.85rem;
}

.workflow-library-mutation-actions.hidden {
  display: none;
}

/* =========================================================
   WFV_CUSTOMER_VISUAL_SYSTEM_AUTHORITY_V1
   Presentation only.
   ========================================================= */

:root {
  --wfv-bg: #f3f6f8;
  --wfv-surface: #ffffff;
  --wfv-surface-subtle: #f8fafb;

  --wfv-text: #17212b;
  --wfv-text-muted: #66727f;

  --wfv-border: #d9e1e7;

  --wfv-accent: #245f73;
  --wfv-accent-hover: #1d5061;
  --wfv-accent-soft: #edf6f8;

  --wfv-success: #2f7650;
  --wfv-success-soft: #edf7f1;

  --wfv-attention: #9a6b16;
  --wfv-attention-soft: #fff8e8;

  --wfv-error: #a84646;
  --wfv-error-soft: #fff1f1;

  --wfv-radius: 16px;
  --wfv-radius-small: 10px;

  --wfv-shadow:
    0 1px 2px rgba(23, 33, 43, 0.04),
    0 8px 28px rgba(23, 33, 43, 0.07);

  --wfv-shadow-soft:
    0 1px 2px rgba(23, 33, 43, 0.03),
    0 4px 16px rgba(23, 33, 43, 0.045);
}

/* ---------------------------------------------------------
   Page / typography
   --------------------------------------------------------- */

body {
  background: var(--wfv-bg);
  color: var(--wfv-text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  line-height: 1.5;
}

.shell {
  width: min(960px, calc(100% - 36px));
  margin: 48px auto 72px;
}

header {
  margin-bottom: 28px;
}

header h1 {
  color: var(--wfv-text);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.eyebrow,
.picker-eyebrow {
  color: var(--wfv-accent);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

header p,
.workflow-library-help,
.picker-help,
.value-report-status,
.operation-history-status,
#operation-history-empty,
#value-report-zero,
#value-report-latest {
  color: var(--wfv-text-muted);
}

/* ---------------------------------------------------------
   Shared surfaces
   --------------------------------------------------------- */

.panel {
  margin: 18px 0;
  padding: 24px;
  border: 1px solid var(--wfv-border);
  border-radius: var(--wfv-radius);
  background: var(--wfv-surface);
  box-shadow: var(--wfv-shadow-soft);
}

#workflow-guidance,
#selection,
#review,
#approved-recovery,
#completed {
  box-shadow: var(--wfv-shadow);
}

/* ---------------------------------------------------------
   Primary Prompt Box
   --------------------------------------------------------- */

textarea,
input,
select {
  color: var(--wfv-text);
  border: 1px solid var(--wfv-border);
  border-radius: var(--wfv-radius-small);
  background: var(--wfv-surface);
}

textarea {
  min-height: 138px;
  padding: 15px 16px;
  line-height: 1.5;
  resize: vertical;
}

textarea::placeholder {
  color: #8a949e;
}

textarea:hover,
input:hover,
select:hover {
  border-color: #b9c5ce;
}

textarea:focus-visible,
input:focus-visible,
select:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(36, 95, 115, 0.22);
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */

button {
  border-radius: var(--wfv-radius-small);
  background: var(--wfv-accent);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(23, 33, 43, 0.08);
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

button:hover:not(:disabled) {
  background: var(--wfv-accent-hover);
  box-shadow: 0 4px 12px rgba(23, 33, 43, 0.12);
}

button:active:not(:disabled) {
  transform: translateY(1px);
}

button.secondary {
  border: 1px solid var(--wfv-border);
  background: var(--wfv-surface-subtle);
  color: var(--wfv-text);
  box-shadow: none;
}

button.secondary:hover:not(:disabled) {
  border-color: #bcc8d1;
  background: #eef3f5;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* ---------------------------------------------------------
   Workflow Library
   --------------------------------------------------------- */

.workflow-library {
  background: var(--wfv-surface-subtle);
  border-color: #dfe7ec;
}

.workflow-library-item {
  padding: 12px 14px;
  border: 1px solid var(--wfv-border);
  background: var(--wfv-surface);
  color: var(--wfv-text);
  box-shadow: none;
}

.workflow-library-item:hover {
  border-color: #b9c8d0;
  background: #fbfcfd;
}

.workflow-library-mutation-actions {
  padding-top: 0.2rem;
}

/* ---------------------------------------------------------
   Workflow status
   --------------------------------------------------------- */

#status.workflow-status--neutral {
  border-color: var(--wfv-border);
  background: var(--wfv-surface-subtle);
}

#status.workflow-status--attention {
  border-color: #e6c66f;
  background: var(--wfv-attention-soft);
}

#status.workflow-status--success {
  border-color: #98c8aa;
  background: var(--wfv-success-soft);
}

#status.workflow-status--error {
  border-color: #e6aaaa;
  background: var(--wfv-error-soft);
}

#status #state {
  color: var(--wfv-text);
  font-weight: 700;
}

/* ---------------------------------------------------------
   Guidance
   --------------------------------------------------------- */

#workflow-guidance {
  border-color: #cadce3;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fbfc 100%
    );
}

.workflow-guidance-heading {
  gap: 1rem;
}

.workflow-guidance-section {
  padding: 0.15rem 0;
}

.workflow-guidance-section h3 {
  color: var(--wfv-text);
  font-size: 0.92rem;
}

.workflow-guidance-section p,
.workflow-guidance-section li {
  color: var(--wfv-text-muted);
}

.workflow-guidance-next {
  border-top: 1px solid var(--wfv-border);
}

/* ---------------------------------------------------------
   Picker
   --------------------------------------------------------- */

.working-set-group {
  padding: 18px;
  border-color: var(--wfv-border);
  background: var(--wfv-surface-subtle);
}

.working-set-group--decision {
  border-color: #e0c577;
  background: var(--wfv-attention-soft);
}

.working-set-option {
  border-color: var(--wfv-border);
  border-radius: var(--wfv-radius-small);
  background: var(--wfv-surface);
  transition:
    border-color 120ms ease,
    background-color 120ms ease,
    box-shadow 120ms ease;
}

.working-set-option:hover {
  border-color: #aebbc5;
  box-shadow: 0 3px 12px rgba(23, 33, 43, 0.05);
}

.working-set-option:has(input:checked) {
  border-color: #7fb194;
  background: var(--wfv-success-soft);
}

.working-set-group--decision
.working-set-option:has(input:checked) {
  border-color: #d4ae49;
  background: var(--wfv-attention-soft);
}

.working-set-option-location {
  color: var(--wfv-text-muted);
}

/* ---------------------------------------------------------
   Review / completion
   --------------------------------------------------------- */

#review {
  border-color: #c8dce4;
}

#completed {
  border-color: #a8cfb7;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f5fbf7 100%
    );
}

/* ---------------------------------------------------------
   Value
   --------------------------------------------------------- */

.value-report {
  background: var(--wfv-surface-subtle);
}

.value-metric {
  border-color: var(--wfv-border);
  background: var(--wfv-surface);
  box-shadow: 0 1px 2px rgba(23, 33, 43, 0.035);
}

.value-metric strong {
  color: var(--wfv-accent);
  letter-spacing: -0.025em;
}

.value-metric span {
  color: var(--wfv-text-muted);
}

.value-report-detail > section {
  border-color: var(--wfv-border);
  background: var(--wfv-surface);
}

/* ---------------------------------------------------------
   Operation History
   --------------------------------------------------------- */

.operation-history {
  background: var(--wfv-surface-subtle);
}

.operation-history-record {
  border-color: var(--wfv-border);
  background: var(--wfv-surface);
  box-shadow: 0 1px 2px rgba(23, 33, 43, 0.03);
}

.operation-history-summary {
  color: var(--wfv-text);
}

.operation-history-summary time,
.operation-history-record-heading time,
.operation-history-outputs span {
  color: var(--wfv-text-muted);
}

.operation-history-email {
  border-top-color: var(--wfv-border);
}

/* ---------------------------------------------------------
   Debug / raw JSON surface
   --------------------------------------------------------- */

#json-output {
  border-radius: var(--wfv-radius-small);
  background: #17212b;
  color: #dce6ec;
  border: 1px solid #24333f;
}

/* ---------------------------------------------------------
   Responsive refinement
   --------------------------------------------------------- */

@media (max-width: 720px) {
  .shell {
    width: min(100% - 24px, 960px);
    margin-top: 24px;
    margin-bottom: 48px;
  }

  .panel {
    padding: 18px;
    border-radius: 13px;
  }

  .actions,
  .picker-actions,
  .saved-workflow-recommendation-actions,
  .workflow-library-mutation-actions {
    gap: 0.6rem;
  }
}

@media (max-width: 520px) {
  button {
    min-height: 44px;
  }

  .actions {
    align-items: stretch;
    flex-direction: column;
  }

  .actions button {
    width: 100%;
  }
}

/* =========================================================
   WFV_CUSTOMER_VISUAL_DIRECTION_V2
   Darker foreground/background relationship.
   Operation History fixed-height internal scroll.
   Presentation only.
   ========================================================= */

:root {
  --wfv-bg: #dfe5e8;
  --wfv-surface: #f4f6f7;
  --wfv-surface-subtle: #e8edef;

  --wfv-text: #111a21;
  --wfv-text-muted: #4e5c66;

  --wfv-border: #aebac1;

  --wfv-accent: #174f63;
  --wfv-accent-hover: #103f50;
  --wfv-accent-soft: #d9e7eb;

  --wfv-success: #245f42;
  --wfv-success-soft: #dcebe2;

  --wfv-attention: #805814;
  --wfv-attention-soft: #efe4c9;

  --wfv-error: #8d3737;
  --wfv-error-soft: #eddada;

  --wfv-shadow:
    0 2px 4px rgba(17, 26, 33, 0.10),
    0 10px 30px rgba(17, 26, 33, 0.12);

  --wfv-shadow-soft:
    0 1px 3px rgba(17, 26, 33, 0.09),
    0 6px 18px rgba(17, 26, 33, 0.08);
}

body {
  background:
    linear-gradient(
      180deg,
      #d8dfe3 0%,
      var(--wfv-bg) 42%,
      #d5dde1 100%
    );
  color: var(--wfv-text);
}

.panel {
  border-color: var(--wfv-border);
  background: var(--wfv-surface);
}

header h1 {
  color: #0e171e;
}

header p {
  color: #43515b;
}

textarea,
input,
select {
  border-color: #9faeb7;
  background: #fafbfb;
}

textarea::placeholder {
  color: #687681;
}

button.secondary {
  border-color: #9facb4;
  background: #e2e8eb;
  color: #18232b;
}

button.secondary:hover:not(:disabled) {
  background: #d5dde1;
  border-color: #84959f;
}

.workflow-library {
  background: #e6ecef;
}

.workflow-library-item {
  border-color: #a8b5bc;
  background: #f7f8f9;
}

.value-report,
.operation-history {
  background: #e4eaed;
}

/* ---------------------------------------------------------
   Operation History
   Fixed customer location with internal scrolling records.
   --------------------------------------------------------- */

.operation-history {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  max-height: 620px;
  overflow: hidden;
}

#operation-history-list {
  display: grid;
  gap: 0.7rem;
  max-height: 470px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.15rem 0.45rem 0.3rem 0.05rem;
  scrollbar-gutter: stable;
}

.operation-history-record {
  flex: none;
  border: 1px solid #a9b6bd;
  background: #f7f8f9;
  box-shadow:
    0 1px 2px rgba(17, 26, 33, 0.08),
    0 3px 9px rgba(17, 26, 33, 0.05);
}

.operation-history-record:hover {
  border-color: #899aa4;
}

.operation-history-summary {
  min-height: 42px;
}

/* Firefox */
#operation-history-list {
  scrollbar-color: #81929c #d5dde1;
  scrollbar-width: thin;
}

/* Chromium/WebKit */
#operation-history-list::-webkit-scrollbar {
  width: 10px;
}

#operation-history-list::-webkit-scrollbar-track {
  background: #d5dde1;
  border-radius: 999px;
}

#operation-history-list::-webkit-scrollbar-thumb {
  background: #81929c;
  border: 2px solid #d5dde1;
  border-radius: 999px;
}

/* Supporting surfaces should remain quieter than active workflow. */

.value-metric,
.value-report-detail > section {
  border-color: #aebac1;
  background: #f4f6f7;
}

#workflow-guidance {
  border-color: #9fb6c0;
  background:
    linear-gradient(
      180deg,
      #f5f8f9 0%,
      #e8eff2 100%
    );
}

.working-set-group {
  border-color: #aebac1;
  background: #e8edef;
}

.working-set-option {
  border-color: #a5b2ba;
  background: #f6f8f9;
}

#review {
  border-color: #9eb4bd;
}

#completed {
  border-color: #91b59f;
  background: #e4eee8;
}

@media (max-width: 720px) {
  .operation-history {
    max-height: 540px;
  }

  #operation-history-list {
    max-height: 400px;
  }
}

/* =========================================================
   WFV_HIGH_CONTRAST_VISUAL_DIRECTION_V3

   Legacy-WFV-inspired visual character:
   dark application field + clearly differentiated customer
   surfaces.

   Presentation only.
   ========================================================= */

:root {
  /* Strong application field */
  --wfv-bg: #24343f;

  /* Core customer surfaces */
  --wfv-surface: #f7fafb;
  --wfv-surface-subtle: #e6edf1;

  /* Text */
  --wfv-text: #101820;
  --wfv-text-muted: #4b5b66;

  /* Structural contrast */
  --wfv-border: #8fa0aa;

  /* Primary WFV accent */
  --wfv-accent: #176d83;
  --wfv-accent-hover: #0f596d;
  --wfv-accent-soft: #d8edf2;

  /* Semantic colors */
  --wfv-success: #27704a;
  --wfv-success-soft: #dcefe4;

  --wfv-attention: #94661a;
  --wfv-attention-soft: #f4e5bd;

  --wfv-error: #9a3f46;
  --wfv-error-soft: #f1dadd;

  /* Stronger depth against dark field */
  --wfv-shadow:
    0 3px 8px rgba(0, 0, 0, 0.20),
    0 14px 32px rgba(0, 0, 0, 0.18);

  --wfv-shadow-soft:
    0 2px 5px rgba(0, 0, 0, 0.16),
    0 8px 20px rgba(0, 0, 0, 0.12);
}

/* ---------------------------------------------------------
   Application field
   --------------------------------------------------------- */

html {
  background: #1e2d36;
}

body {
  min-height: 100vh;
  background:
    linear-gradient(
      180deg,
      #1e2d36 0%,
      #273a46 48%,
      #20313b 100%
    );
  color: var(--wfv-text);
}

/* Header sits directly on dark application field. */

header h1 {
  color: #f4f8fa;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
}

header p {
  color: #cbd7dd;
}

header .eyebrow,
.eyebrow {
  color: #7fd0e0;
}

/* ---------------------------------------------------------
   Main working surfaces
   --------------------------------------------------------- */

.panel {
  border: 1px solid #82959f;
  background: #f7fafb;
  box-shadow: var(--wfv-shadow);
}

/* Request / PPB should visually dominate. */

#request {
  border: 2px solid #78929f;
  background: #ffffff;
}

#request:focus-visible {
  border-color: #176d83;
  outline-color: rgba(76, 176, 197, 0.45);
}

/* ---------------------------------------------------------
   Workflow Library — cool blue identity
   --------------------------------------------------------- */

.workflow-library {
  border-color: #7197aa;
  background:
    linear-gradient(
      180deg,
      #e1eef3 0%,
      #d4e5eb 100%
    );
}

.workflow-library .eyebrow,
.workflow-library .picker-eyebrow {
  color: #235f75;
}

.workflow-library-item {
  border-color: #86a5b3;
  background: #f4fafc;
}

.workflow-library-item:hover {
  border-color: #447d94;
  background: #eaf5f8;
}

/* ---------------------------------------------------------
   Primary buttons — stronger WFV teal
   --------------------------------------------------------- */

button {
  background:
    linear-gradient(
      180deg,
      #1d7d93 0%,
      #176d83 100%
    );
  border: 1px solid #0e566a;
  color: #ffffff;
}

button:hover:not(:disabled) {
  background:
    linear-gradient(
      180deg,
      #176d83 0%,
      #10586b 100%
    );
}

button.secondary {
  border: 1px solid #83949e;
  background: #dde5e9;
  color: #16232b;
}

button.secondary:hover:not(:disabled) {
  background: #cad6dc;
  border-color: #677d89;
}

/* ---------------------------------------------------------
   Workflow Guidance — blue/teal information surface
   --------------------------------------------------------- */

#workflow-guidance {
  border-color: #6493a5;
  background:
    linear-gradient(
      180deg,
      #e5f1f4 0%,
      #d7e8ed 100%
    );
}

#workflow-guidance h2,
#workflow-guidance h3 {
  color: #154e61;
}

/* ---------------------------------------------------------
   Selection — neutral until decision required
   --------------------------------------------------------- */

.working-set-group {
  border-color: #91a0a8;
  background: #e7ecef;
}

.working-set-option {
  border-color: #98aab3;
  background: #f8fafb;
}

.working-set-option:hover {
  border-color: #4f8497;
}

.working-set-option:has(input:checked) {
  border-color: #4c8b67;
  background: #dceee4;
}

/* Decision-required selection gets clearly distinct amber. */

.working-set-group--decision {
  border: 2px solid #c39235;
  background: #f2e3bd;
}

.working-set-group--decision
.working-set-option:has(input:checked) {
  border-color: #b87c14;
  background: #f7e6b7;
}

/* ---------------------------------------------------------
   Review — distinct controlled blue surface
   --------------------------------------------------------- */

#review {
  border: 2px solid #537f94;
  background:
    linear-gradient(
      180deg,
      #edf5f7 0%,
      #dcebef 100%
    );
}

/* ---------------------------------------------------------
   Completion / success — distinct green
   --------------------------------------------------------- */

#completed {
  border: 2px solid #4e8964;
  background:
    linear-gradient(
      180deg,
      #e4f2e9 0%,
      #d3e8db 100%
    );
}

/* ---------------------------------------------------------
   Workflow Value — clearly differentiated green-blue
   --------------------------------------------------------- */

.value-report {
  border-color: #638f7a;
  background:
    linear-gradient(
      180deg,
      #dcebe5 0%,
      #cddfd7 100%
    );
}

.value-report .eyebrow {
  color: #286044;
}

.value-metric {
  border: 1px solid #8ba99a;
  background: #f4f9f6;
}

.value-metric strong {
  color: #22684a;
}

.value-report-detail > section {
  border-color: #91aa9e;
  background: #eef5f1;
}

/* ---------------------------------------------------------
   Operation History — distinct blue-slate,
   fixed-height internal scroll remains authoritative.
   --------------------------------------------------------- */

.operation-history {
  border-color: #667f8e;
  background:
    linear-gradient(
      180deg,
      #dbe5ea 0%,
      #cbd8de 100%
    );

  max-height: 620px;
  overflow: hidden;
}

.operation-history .eyebrow {
  color: #315f74;
}

#operation-history-list {
  max-height: 470px;
  overflow-y: auto;
  background: #bccbd2;
  border: 1px solid #8298a3;
  border-radius: 12px;
  padding: 0.65rem;
}

.operation-history-record {
  border: 1px solid #748a96;
  background: #f5f8f9;
  box-shadow:
    0 1px 3px rgba(16, 24, 32, 0.12),
    0 4px 10px rgba(16, 24, 32, 0.07);
}

.operation-history-record + .operation-history-record {
  margin-top: 0.15rem;
}

.operation-history-record:hover {
  border-color: #356b82;
  background: #edf5f7;
}

/* ---------------------------------------------------------
   Workflow status state differentiation
   --------------------------------------------------------- */

#status.workflow-status--neutral {
  border-color: #7b929e;
  background: #dfe8ec;
}

#status.workflow-status--attention {
  border-color: #bd8927;
  background: #f3dfaa;
}

#status.workflow-status--success {
  border-color: #4d8c65;
  background: #d5ebdd;
}

#status.workflow-status--error {
  border-color: #b15158;
  background: #f0d6d8;
}

/* ---------------------------------------------------------
   Inputs / controls
   --------------------------------------------------------- */

textarea,
input,
select {
  border-color: #738a96;
  background: #ffffff;
  color: #101820;
}

textarea::placeholder,
input::placeholder {
  color: #667781;
}

/* ---------------------------------------------------------
   Strong visual separation between stacked sections
   --------------------------------------------------------- */

.shell > .panel + .panel,
.shell > section + section {
  margin-top: 24px;
}

/* ---------------------------------------------------------
   Mobile retains high contrast without excessive darkness
   --------------------------------------------------------- */

@media (max-width: 720px) {
  body {
    background:
      linear-gradient(
        180deg,
        #21323c 0%,
        #293d49 100%
      );
  }

  .panel {
    box-shadow:
      0 2px 7px rgba(0, 0, 0, 0.18);
  }

  .operation-history {
    max-height: 540px;
  }

  #operation-history-list {
    max-height: 400px;
  }
}

/* =========================================================
   WFV_CANONICAL_BRAND_PALETTE_V1

   Brand-board palette:
   Royal Blue  #2563EB
   Cyan        #38B6FF
   Deep Navy   #0A0F1A
   Charcoal    #111827
   Silver      #C8CDD6
   White       #FFFFFF

   Presentation only.
   ========================================================= */

:root {
  --wfv-brand-blue: #2563EB;
  --wfv-brand-cyan: #38B6FF;
  --wfv-brand-navy: #0A0F1A;
  --wfv-brand-charcoal: #111827;
  --wfv-brand-silver: #C8CDD6;
  --wfv-brand-white: #FFFFFF;

  --wfv-bg: #0A0F1A;

  --wfv-surface: #FFFFFF;
  --wfv-surface-subtle: #F3F6FA;

  --wfv-text: #111827;
  --wfv-text-muted: #53606E;

  --wfv-border: #AAB4C2;

  --wfv-accent: #2563EB;
  --wfv-accent-hover: #1D4ED8;
  --wfv-accent-soft: #E8F1FF;

  --wfv-success: #2E7D57;
  --wfv-success-soft: #E2F1E9;

  --wfv-attention: #A66A11;
  --wfv-attention-soft: #FFF0CC;

  --wfv-error: #A63F47;
  --wfv-error-soft: #F5DDE0;

  --wfv-shadow:
    0 4px 10px rgba(0, 0, 0, 0.24),
    0 18px 38px rgba(0, 0, 0, 0.20);

  --wfv-shadow-soft:
    0 2px 6px rgba(0, 0, 0, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.14);
}

/* ---------------------------------------------------------
   Outer application field — canonical WFV navy
   --------------------------------------------------------- */

html {
  background: #0A0F1A;
}

body {
  background:
    radial-gradient(
      circle at 50% 0%,
      #102343 0%,
      #0A0F1A 38%,
      #070B12 100%
    );
}

/* ---------------------------------------------------------
   Header / brand character
   --------------------------------------------------------- */

header h1 {
  color: #FFFFFF;
}

header p {
  color: #C8CDD6;
}

header .eyebrow,
.eyebrow {
  color: #38B6FF;
}

/* ---------------------------------------------------------
   Generic working panels
   --------------------------------------------------------- */

.panel {
  background: #FFFFFF;
  border: 1px solid #8E9AAA;
  box-shadow: var(--wfv-shadow);
}

/* Strong blue top-edge cue gives WFV identity
   without turning every card dark. */

.panel {
  border-top: 3px solid #2563EB;
}

/* ---------------------------------------------------------
   Request / PPB — primary customer working surface
   --------------------------------------------------------- */

#request {
  background: #FFFFFF;
  border: 2px solid #8CA1BD;
}

#request:focus-visible {
  border-color: #2563EB;
  outline:
    3px solid rgba(56, 182, 255, 0.30);
}

/* ---------------------------------------------------------
   Workflow Library — WFV blue
   --------------------------------------------------------- */

.workflow-library {
  background:
    linear-gradient(
      180deg,
      #EEF5FF 0%,
      #DDEBFF 100%
    );

  border-color: #5F86C9;
  border-top-color: #2563EB;
}

.workflow-library .eyebrow {
  color: #2563EB;
}

.workflow-library-item {
  background: #FFFFFF;
  border-color: #8CA4C7;
}

.workflow-library-item:hover {
  background: #EDF6FF;
  border-color: #2563EB;
}

/* ---------------------------------------------------------
   Primary actions — canonical royal blue
   --------------------------------------------------------- */

button {
  background:
    linear-gradient(
      180deg,
      #2E73F5 0%,
      #2563EB 100%
    );

  border: 1px solid #1746B5;
  color: #FFFFFF;
}

button:hover:not(:disabled) {
  background:
    linear-gradient(
      180deg,
      #2563EB 0%,
      #1D4ED8 100%
    );
}

button.secondary {
  background: #E7EBF1;
  border-color: #9BA6B5;
  color: #111827;
}

button.secondary:hover:not(:disabled) {
  background: #D7DEE8;
  border-color: #7E8A9A;
}

/* ---------------------------------------------------------
   Guidance — cyan informational identity
   --------------------------------------------------------- */

#workflow-guidance {
  background:
    linear-gradient(
      180deg,
      #EDF9FF 0%,
      #DDF3FF 100%
    );

  border-color: #65B9E6;
  border-top-color: #38B6FF;
}

#workflow-guidance h2,
#workflow-guidance h3 {
  color: #124E78;
}

/* ---------------------------------------------------------
   Selection / decisions
   --------------------------------------------------------- */

.working-set-group {
  background: #EFF3F8;
  border-color: #A0AAB8;
}

.working-set-option {
  background: #FFFFFF;
  border-color: #A4AFBD;
}

.working-set-option:hover {
  border-color: #38B6FF;
}

.working-set-option:has(input:checked) {
  background: #E8F1FF;
  border-color: #2563EB;
}

.working-set-group--decision {
  background: #FFF0CC;
  border: 2px solid #D39B31;
}

.working-set-group--decision
.working-set-option:has(input:checked) {
  background: #FFE9AE;
  border-color: #B67813;
}

/* ---------------------------------------------------------
   Review — deep WFV blue
   --------------------------------------------------------- */

#review {
  background:
    linear-gradient(
      180deg,
      #EFF5FF 0%,
      #DCE9FF 100%
    );

  border-color: #557FC2;
  border-top-color: #2563EB;
}

/* ---------------------------------------------------------
   Completion — green stays semantic
   --------------------------------------------------------- */

#completed {
  background:
    linear-gradient(
      180deg,
      #E8F4ED 0%,
      #D9ECE2 100%
    );

  border-color: #679778;
  border-top-color: #2E7D57;
}

/* ---------------------------------------------------------
   Workflow Value — blue/cyan branded rather than green
   --------------------------------------------------------- */

.value-report {
  background:
    linear-gradient(
      180deg,
      #EEF7FF 0%,
      #DFEEFA 100%
    );

  border-color: #6C91B3;
  border-top-color: #38B6FF;
}

.value-report .eyebrow {
  color: #176B9D;
}

.value-metric {
  background: #FFFFFF;
  border-color: #92A8BB;
}

.value-metric strong {
  color: #2563EB;
}

.value-report-detail > section {
  background: #F8FBFE;
  border-color: #A5B5C4;
}

/* ---------------------------------------------------------
   Operation History — deep blue-slate brand panel
   --------------------------------------------------------- */

.operation-history {
  background:
    linear-gradient(
      180deg,
      #DCE7F3 0%,
      #CBD8E6 100%
    );

  border-color: #607B9A;
  border-top-color: #2563EB;

  max-height: 620px;
  overflow: hidden;
}

.operation-history .eyebrow {
  color: #225B94;
}

#operation-history-list {
  background: #AEBFD0;
  border: 1px solid #7289A0;
  border-radius: 12px;

  max-height: 470px;
  overflow-y: auto;
}

.operation-history-record {
  background: #FFFFFF;
  border: 1px solid #8194A7;
}

.operation-history-record:hover {
  background: #EDF6FF;
  border-color: #2563EB;
}

/* Branded scrollbar */

#operation-history-list {
  scrollbar-color:
    #2563EB
    #AEBFD0;
}

#operation-history-list::-webkit-scrollbar-track {
  background: #AEBFD0;
}

#operation-history-list::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      180deg,
      #38B6FF,
      #2563EB
    );

  border: 2px solid #AEBFD0;
}

/* ---------------------------------------------------------
   Workflow status
   --------------------------------------------------------- */

#status.workflow-status--neutral {
  background: #E7EDF5;
  border-color: #8393A7;
}

#status.workflow-status--attention {
  background: #FFF0CC;
  border-color: #C58B22;
}

#status.workflow-status--success {
  background: #DDEEE4;
  border-color: #4F8B67;
}

#status.workflow-status--error {
  background: #F3DDE0;
  border-color: #AF555C;
}

/* ---------------------------------------------------------
   Fine accent treatment
   --------------------------------------------------------- */

a {
  color: #2563EB;
}

code {
  color: #23334A;
}

::selection {
  background: #38B6FF;
  color: #0A0F1A;
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 720px) {
  body {
    background:
      linear-gradient(
        180deg,
        #0A0F1A 0%,
        #10213A 100%
      );
  }
}

/* ==========================================================
   WFV_BRAND_IDENTITY_PRESENTATION_V1

   Presentation only.
   Authoritative WFV artwork.
   No runtime, review, approval or execution authority.
   ========================================================== */

.wfv-brand-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  text-align: left;
}

.wfv-brand-banner {
  display: block;
  width: min(360px, 42%);
  height: auto;
  flex: 0 1 auto;
  object-fit: contain;
}

.wfv-brand-heading {
  min-width: 0;
  flex: 1 1 auto;
}

.wfv-brand-heading h1 {
  margin-top: 0;
  max-width: 18ch;
  text-wrap: balance;
}

.wfv-brand-heading p {
  margin-bottom: 0;
}

.wfv-conversation-heading {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.75rem;
}

.wfv-conversation-logo {
  display: block;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
}

.wfv-conversation-name {
  margin: 0 0 0.15rem;
  color: var(--wfv-brand-cyan);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wfv-conversation-heading h2 {
  margin: 0;
}

@media (max-width: 720px) {
  .wfv-brand-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.8rem;
  }

  .wfv-brand-banner {
    width: min(100%, 360px);
  }

  .wfv-brand-heading h1 {
    max-width: none;
  }
}


/* WFV_PPB_BOUNDED_WORKING_SET_INTERACTION_V1
 *
 * The PPB owns active workflow interaction.
 *
 * Keep the canonical selection heading and continuation action in normal
 * PPB flow. Only the variable-length candidate inventory receives internal
 * scrolling so a large working set cannot turn continuation into a
 * multi-page discovery problem.
 */



/* WFV_INFORMATIONAL_WORKFLOW_RAIL_V1
 *
 * Passive workflow understanding may sit beside the PPB on sufficiently
 * wide desktop viewports.
 *
 * Required customer actions remain in the centered PPB.
 */

@media (min-width: 1000px) {
  #status:not(.hidden) {
    position: fixed;
    left: max(18px, calc(50% - 690px));
    top: 180px;
    width: min(300px, calc(50vw - 510px));
    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 20;
  }

  #workflow-guidance:not(.hidden) {
    position: fixed;
    left: max(18px, calc(50% - 690px));
    top: 420px;
    width: min(300px, calc(50vw - 510px));
    max-height: calc(100vh - 450px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 20;
  }
}

@media (max-width: 999px) {
  #status:not(.hidden) {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    max-height: none;
    overflow: visible;
  }

  #workflow-guidance:not(.hidden) {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    max-height: none;
    overflow: visible;
  }
}


/* WFV_DESKTOP_PPB_WORKSPACE_GEOMETRY_V1
 *
 * Final owner for the #30G desktop presentation.
 *
 * Status and Guidance are passive context. Give them readable desktop
 * geometry without allowing them to become fixed rails.
 *
 * Required customer actions remain in the canonical center PPB.
 */

@media (min-width: 1000px) {

  /*
   * Widen the application shell enough to make room for a genuine
   * informational column while retaining the established center interaction
   * width.
   */
  body {
    --wfv-info-column: 270px;
    --wfv-workspace-gap: 18px;
  }

  #active-workflow-conversation {
    position: relative;
  }

  /*
   * Retire #30F fixed positioning.
   *
   * These remain canonical PPB children and projection owners, but on desktop
   * they occupy reserved space to the left of the active center interaction.
   */
  #status:not(.hidden),
  #workflow-guidance:not(.hidden) {
    position: static;
    left: auto;
    top: auto;
    width: 270px;
    min-width: 270px;
    max-width: 270px;
    max-height: none;
    overflow: visible;
    z-index: auto;

    margin-left: calc(-1 * (var(--wfv-info-column) + var(--wfv-workspace-gap)));
    margin-right: var(--wfv-workspace-gap);
  }

  /*
   * Status is compact. Guidance follows it as one readable informational
   * column rather than an independent floating viewport rail.
   */
  #status:not(.hidden) {
    margin-bottom: 12px;
  }

  #workflow-guidance:not(.hidden) {
    margin-top: 0;
    margin-bottom: 16px;
  }

  /*
   * Keep active action surfaces on the established center axis.
   * No selection/review/approval geometry is moved by this authority.
   */
}

@media (max-width: 999px) {
  #status:not(.hidden),
  #workflow-guidance:not(.hidden) {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: none;
    overflow: visible;
    margin-left: 0;
    margin-right: 0;
  }
}


/* WFV_NATIVE_PPB_TWO_COLUMN_GRID_V1
 *
 * Final #30 desktop interaction owner.
 *
 * Use the canonical PPB conversation container itself as the layout grid.
 * No fixed surfaces. No negative-margin rails. No overlays.
 */

@media (min-width: 1000px) {

  #active-workflow-conversation {
    display: grid;
    grid-template-columns: minmax(240px, 270px) minmax(0, 1fr);
    gap: 16px 18px;
    align-items: start;
    margin-top: 16px;
  }

  #status:not(.hidden) {
    grid-column: 1;
    grid-row: 1;

    position: static;
    left: auto;
    top: auto;

    width: auto;
    min-width: 0;
    max-width: none;
    max-height: none;

    margin: 0;

    overflow: visible;
    transform: none;
    z-index: auto;
  }

  #workflow-guidance:not(.hidden) {
    grid-column: 1;
    grid-row: 2 / span 4;

    position: static;
    left: auto;
    top: auto;

    width: auto;
    min-width: 0;
    max-width: none;
    max-height: none;

    margin: 0;

    overflow: visible;
    transform: none;
    z-index: auto;
  }

  #selection:not(.hidden),
  #review:not(.hidden),
  #approved-recovery:not(.hidden),
  #completed:not(.hidden) {
    grid-column: 2;
    position: static;
    left: auto;
    right: auto;
    top: auto;

    width: auto;
    max-width: none;

    margin: 0;

    transform: none;
    z-index: auto;
  }

  #selection:not(.hidden) {
    grid-row: 1 / span 5;
  }

  #review:not(.hidden),
  #approved-recovery:not(.hidden),
  #completed:not(.hidden) {
    grid-row: 1 / span 5;
  }
}

@media (max-width: 999px) {

  #active-workflow-conversation {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #status:not(.hidden),
  #workflow-guidance:not(.hidden),
  #selection:not(.hidden),
  #review:not(.hidden),
  #approved-recovery:not(.hidden),
  #completed:not(.hidden) {
    grid-column: 1;
    grid-row: auto;

    position: static;
    left: auto;
    right: auto;
    top: auto;

    width: auto;
    min-width: 0;
    max-width: none;
    max-height: none;

    margin: 0;

    transform: none;
    z-index: auto;
  }
}


/* WFV_UNIFIED_PPB_STRUCTURAL_SHELL_V1
 *
 * Runtime owns truth.
 * Status summarizes state.
 * PPB owns conversation.
 * Guidance is optional detail.
 * Action Area owns the customer's next permitted interaction.
 */

#active-workflow-conversation {
  display: block;
  margin-top: 14px;
}

#status:not(.hidden) {
  position: static;
  left: auto;
  right: auto;
  top: auto;

  width: 100%;
  min-width: 0;
  max-width: none;
  max-height: none;

  margin: 0 0 12px;
  padding: 12px 16px;

  overflow: visible;
  transform: none;
  z-index: auto;

  border-radius: 10px;
}

#status .wfv-conversation-heading {
  margin-bottom: 4px;
}

#status #state {
  margin: 0;
  font-weight: 800;
}

#status #message {
  margin: 3px 0 0;
}

#workflow-conversation {
  display: flex;
  flex-direction: column;
  gap: 14px;

  width: 100%;
  min-width: 0;

  padding: 16px;

  border: 1px solid var(--wfv-border, #c8d0da);
  border-radius: 12px;
  background: var(--wfv-surface, #ffffff);
}

.conversation-turn {
  display: block;
  min-width: 0;
}

.conversation-speaker {
  margin: 0 0 5px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.conversation-turn--user {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(45, 92, 160, 0.07);
}

.conversation-turn--wfv {
  padding: 12px 14px;
  border-left: 3px solid var(--wfv-primary, #2d5ca0);
  background: rgba(45, 92, 160, 0.035);
}

.conversation-turn-content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#conversation-workflow-content {
  display: block;
  min-width: 0;
}

#conversation-workflow-content > #selection:not(.hidden),
#conversation-workflow-content > #review:not(.hidden),
#conversation-workflow-content > #approved-recovery:not(.hidden),
#conversation-workflow-content > #completed:not(.hidden) {
  position: static;
  left: auto;
  right: auto;
  top: auto;

  width: 100%;
  min-width: 0;
  max-width: none;
  max-height: none;

  margin: 0;

  transform: none;
  z-index: auto;
}

#conversation-workflow-content > .panel:not(.hidden) {
  box-shadow: none;
}

#workflow-action-area {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;

  min-height: 48px;
  margin-top: 2px;
  padding-top: 12px;

  border-top: 1px solid var(--wfv-border, #c8d0da);
}

#workflow-action-area[hidden] {
  display: none;
}

#workflow-action-area button {
  margin: 0;
}

#workflow-guidance-disclosure {
  position: static;

  width: 100%;
  min-width: 0;
  max-width: none;

  margin: 10px 0 0;

  transform: none;
  z-index: auto;

  border: 1px solid var(--wfv-border, #c8d0da);
  border-radius: 10px;
  background: var(--wfv-surface, #ffffff);
}

#workflow-guidance-disclosure[hidden] {
  display: none;
}

#workflow-guidance-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 11px 14px;

  cursor: pointer;
  font-weight: 700;
}

.workflow-guidance-availability::after {
  content: "Information available";
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.72;
}

#workflow-guidance-disclosure.workflow-guidance-disclosure--available {
  border-color: var(--wfv-primary, #2d5ca0);
}

#workflow-guidance {
  position: static;

  width: auto;
  min-width: 0;
  max-width: none;
  max-height: none;

  margin: 0;
  padding: 0 14px 14px;

  overflow: visible;
  transform: none;
  z-index: auto;

  border: 0;
  box-shadow: none;
}

#workflow-guidance.hidden {
  display: block;
}

@media (max-width: 640px) {
  #workflow-conversation {
    padding: 12px;
  }

  #workflow-action-area {
    justify-content: stretch;
  }

  #workflow-action-area button:not([hidden]) {
    width: 100%;
  }
}


/* WFV_SINGLE_PPB_CONTINUATION_V1
 *
 * Workflow Status precedes the editable Request.
 * Request remains the sole user prompt projection.
 * Canonical workflow selection/review/completion continues below Request.
 * Required workflow actions remain in the stable Action Area.
 *
 * Runtime, approval, and execution authority are unchanged.
 */

#status:not(.hidden) {
  margin: 0 0 12px;
}

#workflow-conversation {
  margin-top: 14px;
}

/* ============================================================
   WFV_FINAL_PPB_SELECTION_INTERACTION_V1

   Presentation only.

   Requested-document groups are visually distinct working-set
   cards. Candidate controls remain subordinate within each card.

   Confirm Requested Files remains visible at the natural end of
   the workflow action area. Disabled is deliberately neutral;
   enabled uses the existing positive/action visual language.

   This block does not own runtime state, selection validity,
   workflow progression, approval, or execution.
   ============================================================ */

#selection-groups .working-set-group {
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.035);
}

#selection-groups .working-set-group:last-child {
  margin-bottom: 0;
}

#selection-groups .working-set-group > :first-child {
  margin-top: 0;
}

#selection-groups .working-set-group > :last-child {
  margin-bottom: 0;
}

#selection-groups .working-set-group--decision {
  border-width: 2px;
}

#selection-groups .working-set-group--missing {
  border-width: 2px;
}

#workflow-action-area #continue-selection {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  margin-top: 0.85rem;
}

#workflow-action-area #continue-selection:disabled,
#workflow-action-area #continue-selection[aria-disabled="true"] {
  opacity: 0.48;
  cursor: not-allowed;
  filter: saturate(0.35);
}

#workflow-action-area #continue-selection:not(:disabled) {
  opacity: 1;
  cursor: pointer;
}


/* ============================================================
   WFV_STATUS_VISUAL_EMPHASIS_V1

   Presentation only.

   Workflow Status is the primary at-a-glance lifecycle signal.
   Runtime remains the sole lifecycle/state authority.

   Color supplements explicit state/message text and never
   independently determines workflow behavior.
   ============================================================ */

#status {
  position: relative;
  overflow: hidden;

  padding: 1rem 1.1rem 1rem 1.25rem;

  border-width: 1px;
  border-style: solid;
  border-radius: 0.9rem;

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);

  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

#status::before {
  content: "";

  position: absolute;
  inset: 0 auto 0 0;

  width: 0.34rem;

  background: currentColor;

  opacity: 0.9;
}

#status #state {
  margin: 0;

  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.25;

  letter-spacing: 0.015em;
}

#status #message {
  margin: 0.35rem 0 0;

  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.45;
}

#status.workflow-status--neutral {
  color: #cbd8e8;

  border-color: rgba(145, 171, 202, 0.38);

  background:
    linear-gradient(
      135deg,
      rgba(65, 88, 116, 0.28),
      rgba(34, 47, 64, 0.18)
    );
}

#status.workflow-status--attention {
  color: #ffd978;

  border-color: rgba(255, 193, 71, 0.62);

  background:
    linear-gradient(
      135deg,
      rgba(116, 78, 16, 0.44),
      rgba(68, 48, 16, 0.24)
    );

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 193, 71, 0.08),
    inset 0 1px 0 rgba(255, 235, 185, 0.08);
}

#status.workflow-status--success {
  color: #8ee6b2;

  border-color: rgba(78, 204, 132, 0.58);

  background:
    linear-gradient(
      135deg,
      rgba(27, 100, 62, 0.42),
      rgba(20, 61, 43, 0.23)
    );

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(78, 204, 132, 0.07),
    inset 0 1px 0 rgba(205, 255, 226, 0.07);
}

#status.workflow-status--error {
  color: #ffaaa5;

  border-color: rgba(239, 100, 92, 0.62);

  background:
    linear-gradient(
      135deg,
      rgba(115, 38, 35, 0.46),
      rgba(67, 28, 28, 0.24)
    );

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(239, 100, 92, 0.08),
    inset 0 1px 0 rgba(255, 211, 208, 0.07);
}

#status.workflow-status--neutral #message,
#status.workflow-status--attention #message,
#status.workflow-status--success #message,
#status.workflow-status--error #message {
  color: rgba(245, 248, 252, 0.92);
}


/* ============================================================
   WFV_ACTION_SELECTION_VISUAL_HIERARCHY_V1

   Presentation only.

   1. The Status instruction is the dominant actionable sentence.
   2. Every requested-document selection group reads as a clearly
      separate visual unit.

   Runtime, picker validity, continuation, approval, and execution
   authority are unchanged.
   ============================================================ */

/* ------------------------------------------------------------
   Primary workflow instruction
   ------------------------------------------------------------ */

#status #state {
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.025em;
  opacity: 0.9;
}

#status #message {
  margin-top: 0.48rem;

  font-size: clamp(1.08rem, 1.7vw, 1.28rem);
  font-weight: 850;
  line-height: 1.3;
  letter-spacing: -0.012em;

  color: #ffffff;

  text-wrap: balance;
}

#status.workflow-status--attention #message {
  color: #fff4ce;

  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.18),
    0 0 18px rgba(255, 205, 91, 0.14);
}

#status.workflow-status--success #message {
  color: #e9fff1;
}

#status.workflow-status--error #message {
  color: #fff0ef;
}

/* ------------------------------------------------------------
   Requested-document group separation

   The outer group represents one requested document/role.
   Candidate rows remain subordinate inside that group.
   ------------------------------------------------------------ */

#selection-groups {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

#selection-groups .working-set-group {
  position: relative;

  margin: 0;
  padding: 1.05rem 1rem 1rem;

  border-width: 2px;
  border-style: solid;
  border-color: rgba(91, 122, 157, 0.42);
  border-radius: 0.9rem;

  background:
    linear-gradient(
      180deg,
      rgba(241, 246, 251, 0.96),
      rgba(229, 237, 246, 0.88)
    );

  box-shadow:
    0 7px 18px rgba(27, 44, 64, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

#selection-groups .working-set-group + .working-set-group {
  margin-top: 0.3rem;
}

#selection-groups .working-set-group::before {
  content: "";

  position: absolute;
  left: -2px;
  top: 0.7rem;
  bottom: 0.7rem;

  width: 0.3rem;

  border-radius: 0 0.25rem 0.25rem 0;

  background: rgba(47, 103, 164, 0.82);
}

#selection-groups .working-set-group--decision {
  border-color: rgba(197, 139, 34, 0.72);

  background:
    linear-gradient(
      180deg,
      rgba(255, 248, 228, 0.98),
      rgba(250, 239, 204, 0.88)
    );
}

#selection-groups .working-set-group--decision::before {
  background: rgba(197, 139, 34, 0.95);
}

#selection-groups .working-set-group--missing {
  border-color: rgba(177, 81, 88, 0.66);

  background:
    linear-gradient(
      180deg,
      rgba(253, 239, 240, 0.98),
      rgba(247, 224, 226, 0.9)
    );
}

#selection-groups .working-set-group--missing::before {
  background: rgba(177, 81, 88, 0.94);
}

/*
 * Make the first textual heading inside each requested-document
 * group read as the beginning of a new selection area.
 */
#selection-groups .working-set-group > :first-child {
  margin-top: 0;
  margin-bottom: 0.75rem;

  font-weight: 850;
}

/*
 * Candidate controls stay visually subordinate to the outer
 * requested-document card.
 */
#selection-groups .working-set-group label,
#selection-groups .working-set-group button {
  position: relative;
}

/*
 * On narrow screens preserve the same section boundaries without
 * excessive padding.
 */
@media (max-width: 700px) {
  #status #message {
    font-size: 1.08rem;
  }

  #selection-groups {
    gap: 0.9rem;
  }

  #selection-groups .working-set-group {
    padding: 0.9rem 0.8rem 0.85rem;
  }
}


/* ============================================================
   WFV_FINAL_VISUAL_HIERARCHY_V1

   Final customer-facing visual hierarchy authority.

   Model:
     DARK SHELL
       -> BLUE-GRAY STRUCTURE
         -> NEAR-WHITE WORK SURFACES
           -> HIGH-CONTRAST CONTENT
             -> BRIGHT WFV SIGNALS

   Canonical WFV palette:
     Royal Blue  #2563EB
     Cyan        #38B6FF
     Deep Navy   #0A0F1A
     Charcoal    #111827
     Silver      #C8CDD6
     White       #FFFFFF

   Presentation only.

   Runtime, lifecycle, picker validity, selection continuation,
   approval, execution, history, value, and API authority remain
   unchanged.
   ============================================================ */

:root {
  --wfv-final-shell: var(--wfv-brand-navy, #0A0F1A);
  --wfv-final-shell-deep: #070B12;

  --wfv-final-frame: #26384A;
  --wfv-final-frame-strong: #344B61;
  --wfv-final-frame-soft: #41586D;

  --wfv-final-surface: #FFFFFF;
  --wfv-final-surface-soft: #F5F8FC;
  --wfv-final-surface-blue: #EEF5FC;

  --wfv-final-text: #111827;
  --wfv-final-text-secondary: #425466;
  --wfv-final-text-on-dark: #E8EEF6;
  --wfv-final-text-muted-dark: #AEBBCB;

  --wfv-final-request-text: #173A68;

  --wfv-final-blue: var(--wfv-brand-blue, #2563EB);
  --wfv-final-cyan: var(--wfv-brand-cyan, #38B6FF);

  --wfv-final-attention: #FFD166;
  --wfv-final-success: #59D98E;
  --wfv-final-error: #FF7676;
}

/* ------------------------------------------------------------
   1. DARK APPLICATION FIELD
   ------------------------------------------------------------ */

html {
  background: var(--wfv-final-shell);
}

body {
  color: var(--wfv-final-text-on-dark);

  background:
    radial-gradient(
      circle at 50% -12%,
      rgba(56, 182, 255, 0.12),
      transparent 34rem
    ),
    linear-gradient(
      180deg,
      #101B2D 0%,
      var(--wfv-final-shell) 28%,
      var(--wfv-final-shell-deep) 100%
    );

  background-attachment: fixed;
}

.shell {
  color: var(--wfv-final-text-on-dark);
}

/* ------------------------------------------------------------
   2. STRUCTURAL FRAME / CHROME
   ------------------------------------------------------------ */

.wfv-brand-header {
  color: var(--wfv-final-text-on-dark);

  border-color: rgba(56, 182, 255, 0.34);

  background:
    linear-gradient(
      135deg,
      rgba(38, 56, 74, 0.96),
      rgba(17, 24, 39, 0.97)
    );

  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.wfv-brand-heading h1 {
  color: #FFFFFF;
}

.wfv-brand-heading p {
  color: var(--wfv-final-text-muted-dark);
}

/*
 * Major customer surfaces remain light working/reading areas.
 * The surrounding dark field creates the primary hierarchy.
 */
.panel,
.workflow-guidance-disclosure {
  border-color: var(--wfv-final-frame-soft);

  background: var(--wfv-final-surface);

  color: var(--wfv-final-text);

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.19),
    0 0 0 1px rgba(255, 255, 255, 0.035);
}

/*
 * Structural sections that are not themselves reading cards
 * remain transparent to the dark application field.
 */
#workflow-conversation,
.active-workflow-conversation,
.conversation-workflow-content,
#workflow-action-area {
  color: inherit;
}

/* ------------------------------------------------------------
   3. ORDINARY CONTENT CONTRAST
   ------------------------------------------------------------ */

.panel h1,
.panel h2,
.panel h3,
.panel h4,
.panel strong,
.panel dt {
  color: var(--wfv-final-text);
}

.panel p,
.panel li,
.panel dd,
.panel span,
.panel label {
  color: var(--wfv-final-text-secondary);
}

.eyebrow,
.picker-eyebrow,
.workflow-library-help,
.picker-help,
.value-report-status,
.operation-history-status {
  color: #52667A;
}

/* ------------------------------------------------------------
   4. REQUEST / PRIMARY PROMPT WORK SURFACE
   ------------------------------------------------------------ */

#request {
  color: var(--wfv-final-request-text);

  background:
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      var(--wfv-final-surface-soft) 100%
    );

  border: 2px solid #8FA6BD;

  box-shadow:
    inset 0 1px 3px rgba(18, 43, 70, 0.08),
    0 5px 14px rgba(0, 0, 0, 0.08);

  font-weight: 600;
}

#request::placeholder {
  color: #70869D;
  opacity: 1;
}

#request:focus {
  outline: none;

  border-color: var(--wfv-final-cyan);

  box-shadow:
    0 0 0 3px rgba(56, 182, 255, 0.2),
    inset 0 1px 3px rgba(18, 43, 70, 0.08);
}

/* ------------------------------------------------------------
   5. WORKFLOW STATUS — BRIGHT SIGNAL SURFACE
   ------------------------------------------------------------ */

#status {
  border-width: 2px;

  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

#status #state {
  color: var(--wfv-final-cyan);

  text-transform: none;
}

#status #message {
  color: #FFFFFF;

  font-size: clamp(1.18rem, 1.9vw, 1.42rem);
  font-weight: 900;

  letter-spacing: -0.014em;
}

#status.workflow-status--neutral {
  color: var(--wfv-final-cyan);

  border-color: #42617B;

  background:
    linear-gradient(
      135deg,
      #22374B,
      #172638
    );
}

#status.workflow-status--neutral #message {
  color: #F4F8FD;
}

#status.workflow-status--attention {
  color: var(--wfv-final-attention);

  border-color: #E6B84F;

  background:
    linear-gradient(
      135deg,
      #40351C 0%,
      #202B38 68%,
      #172434 100%
    );

  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 209, 102, 0.12),
    inset 0 1px 0 rgba(255, 240, 200, 0.08);
}

#status.workflow-status--attention #state {
  color: #FFE08A;
}

#status.workflow-status--attention #message {
  color: #FFF3C8;

  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.3),
    0 0 18px rgba(255, 209, 102, 0.12);
}

#status.workflow-status--success {
  color: var(--wfv-final-success);

  border-color: #45B978;

  background:
    linear-gradient(
      135deg,
      #183C2D,
      #172C31
    );
}

#status.workflow-status--success #state,
#status.workflow-status--success #message {
  color: #DFFFF0;
}

#status.workflow-status--error {
  color: var(--wfv-final-error);

  border-color: #D85C5C;

  background:
    linear-gradient(
      135deg,
      #482426,
      #2A222B
    );
}

#status.workflow-status--error #state,
#status.workflow-status--error #message {
  color: #FFE3E3;
}

/* ------------------------------------------------------------
   6. WORKFLOW LIBRARY
   ------------------------------------------------------------ */

#workflow-library {
  border-color: #42617B;
  border-top-color: var(--wfv-final-blue);

  background:
    linear-gradient(
      180deg,
      #F7FAFE,
      #EDF4FB
    );
}

#workflow-library .eyebrow {
  color: var(--wfv-final-blue);
}

/* ------------------------------------------------------------
   7. REQUESTED WORKING SET / SELECTION AREAS
   ------------------------------------------------------------ */

#selection {
  border-color: #48637D;

  background:
    linear-gradient(
      180deg,
      #F8FAFD,
      #EEF3F8
    );
}

#selection .picker-eyebrow {
  color: var(--wfv-final-blue);

  font-weight: 800;
}

#selection .picker-heading h2,
#selection .picker-heading strong {
  color: var(--wfv-final-text);
}

#selection-groups {
  scrollbar-color:
    var(--wfv-final-blue)
    #D9E3EC;
}

#selection-groups .working-set-group {
  border-color: #718AA3;

  background:
    linear-gradient(
      180deg,
      #FFFFFF,
      #F2F6FA
    );

  box-shadow:
    0 9px 22px rgba(17, 37, 59, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

#selection-groups .working-set-group::before {
  width: 0.34rem;

  background: var(--wfv-final-blue);
}

#selection-groups .working-set-group > :first-child {
  color: #173A68;

  font-size: 1.02rem;
  font-weight: 900;
}

#selection-groups .working-set-group--decision {
  border-color: #D5A63D;

  background:
    linear-gradient(
      180deg,
      #FFFCF2,
      #FFF5D8
    );
}

#selection-groups .working-set-group--decision::before {
  background: #F0B429;
}

#selection-groups .working-set-group--missing {
  border-color: #CE656A;

  background:
    linear-gradient(
      180deg,
      #FFF8F8,
      #FCEBEC
    );
}

#selection-groups .working-set-group--missing::before {
  background: #D85C63;
}

/*
 * Required-choice / attention language receives stronger
 * contrast without making all ordinary picker text bright.
 */
#selection-groups .working-set-group--decision strong,
#selection-groups .working-set-group--decision .working-set-status {
  color: #8A5A00;
}

/* ------------------------------------------------------------
   8. REQUIRED ACTION AREA
   ------------------------------------------------------------ */

#workflow-action-area {
  margin-top: 1rem;
  padding-top: 0.95rem;

  border-top: 2px solid rgba(56, 182, 255, 0.32);
}

#workflow-action-area button:not(.secondary),
.actions button:not(.secondary) {
  color: #FFFFFF;

  border-color: #1746B5;

  background:
    linear-gradient(
      180deg,
      #3478F6,
      var(--wfv-final-blue)
    );

  box-shadow:
    0 7px 18px rgba(37, 99, 235, 0.24);
}

#workflow-action-area button:not(.secondary):hover,
.actions button:not(.secondary):hover {
  background:
    linear-gradient(
      180deg,
      var(--wfv-final-blue),
      #1D4ED8
    );
}

#continue-selection:disabled {
  color: #758395;

  border-color: #AEB9C5;

  background: #DCE3EA;

  box-shadow: none;
}

#continue-selection:not(:disabled) {
  color: #06111C;

  border-color: #20A5EC;

  background:
    linear-gradient(
      180deg,
      #62CAFF,
      var(--wfv-final-cyan)
    );

  box-shadow:
    0 7px 20px rgba(56, 182, 255, 0.28);

  font-weight: 850;
}

/* ------------------------------------------------------------
   9. GUIDANCE — SECONDARY INFORMATION
   ------------------------------------------------------------ */

#workflow-guidance-disclosure {
  border-color: #59738B;

  background:
    linear-gradient(
      180deg,
      #F5FAFE,
      #EAF3FA
    );
}

#workflow-guidance-disclosure summary {
  color: #174E78;

  font-weight: 800;
}

.workflow-guidance-availability {
  color: var(--wfv-final-blue);
}

/* ------------------------------------------------------------
   10. REVIEW / COMPLETION
   ------------------------------------------------------------ */

#review,
#approved-recovery {
  border-color: #547493;
  border-top-color: var(--wfv-final-blue);

  background:
    linear-gradient(
      180deg,
      #FFFFFF,
      #F1F6FC
    );
}

#completed {
  border-color: #4D9B72;

  background:
    linear-gradient(
      180deg,
      #FBFFFD,
      #EEF9F3
    );
}

/* ------------------------------------------------------------
   11. VALUE + OPERATION HISTORY
   ------------------------------------------------------------ */

#value-report {
  border-color: #4C6983;
  border-top-color: var(--wfv-final-cyan);

  background:
    linear-gradient(
      180deg,
      #FFFFFF,
      #F1F7FC
    );
}

#value-report .eyebrow,
#value-report-title {
  color: #176B9D;
}

.value-metric {
  border-color: #B6C7D8;

  background: #F8FBFE;
}

.value-metric strong {
  color: var(--wfv-final-blue);
}

#operation-history {
  border-color: #4B647C;
  border-top-color: var(--wfv-final-blue);

  background:
    linear-gradient(
      180deg,
      #FFFFFF,
      #EEF4FA
    );
}

#operation-history .eyebrow,
#operation-history-title {
  color: #225B94;
}

.history-list > * {
  border-color: #C0CEDB;

  background: #F9FBFD;
}

/* ------------------------------------------------------------
   12. SECONDARY CONTROLS
   ------------------------------------------------------------ */

button.secondary {
  color: #263C51;

  border-color: #8EA2B5;

  background:
    linear-gradient(
      180deg,
      #FFFFFF,
      #EAF0F5
    );
}

button.secondary:hover {
  color: #14283A;

  border-color: #647E96;

  background: #F4F8FB;
}

/* ------------------------------------------------------------
   13. FOCUS VISIBILITY
   ------------------------------------------------------------ */

button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(56, 182, 255, 0.56);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   14. MOBILE PRESERVATION
   ------------------------------------------------------------ */

@media (max-width: 700px) {
  #status #message {
    font-size: 1.14rem;
  }

  .panel,
  .workflow-guidance-disclosure {
    border-radius: 0.78rem;
  }

  #selection-groups .working-set-group {
    border-width: 2px;
  }
}


/* ============================================================
   WFV_DARK_SURFACE_AUTHORITY_V1

   Customer visual rule:

   White is NOT a general WFV surface color.

   White is reserved primarily for:
     1. Request / prompt working surface.
     2. Text where white is required for contrast.

   All other application surfaces use WFV:
     Deep Navy
     Charcoal
     Blue-gray

   Bright Royal Blue / Cyan identify WFV interaction and focus.
   Amber / Green / Red retain semantic state meaning.

   Presentation only.
   No runtime, selection, approval, or execution authority.
   ============================================================ */

:root {
  --wfv-dark-page: #070B12;
  --wfv-dark-shell: #0A0F1A;

  --wfv-dark-panel: #111C2A;
  --wfv-dark-panel-raised: #172638;
  --wfv-dark-panel-soft: #1D3043;

  --wfv-dark-frame: #344B61;
  --wfv-dark-frame-bright: #4C6983;

  --wfv-dark-text: #E8EEF6;
  --wfv-dark-text-secondary: #B7C4D2;
  --wfv-dark-text-muted: #8FA2B5;

  --wfv-dark-blue: #2563EB;
  --wfv-dark-cyan: #38B6FF;

  --wfv-prompt-surface: #FFFFFF;
  --wfv-prompt-text: #173A68;
}

/* ------------------------------------------------------------
   OUTER APPLICATION
   ------------------------------------------------------------ */

html,
body {
  background-color: var(--wfv-dark-page);
}

body {
  color: var(--wfv-dark-text);

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(56, 182, 255, 0.12),
      transparent 34rem
    ),
    linear-gradient(
      180deg,
      #101B2D 0%,
      var(--wfv-dark-shell) 32%,
      var(--wfv-dark-page) 100%
    );

  background-attachment: fixed;
}

.shell {
  color: var(--wfv-dark-text);
  background: transparent;
}

/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */

.wfv-brand-header {
  color: var(--wfv-dark-text);

  border-color: var(--wfv-dark-frame);

  background:
    linear-gradient(
      135deg,
      #1D3043,
      #111827
    );

  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.wfv-brand-heading h1 {
  color: #FFFFFF;
}

.wfv-brand-heading p {
  color: var(--wfv-dark-text-secondary);
}

/* ------------------------------------------------------------
   GENERAL WFV PANELS
   ------------------------------------------------------------ */

.panel,
.workflow-guidance-disclosure {
  color: var(--wfv-dark-text);

  border-color: var(--wfv-dark-frame);

  background:
    linear-gradient(
      180deg,
      var(--wfv-dark-panel-raised),
      var(--wfv-dark-panel)
    );

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.panel h1,
.panel h2,
.panel h3,
.panel h4,
.panel strong,
.panel dt {
  color: var(--wfv-dark-text);
}

.panel p,
.panel li,
.panel dd,
.panel span,
.panel label {
  color: var(--wfv-dark-text-secondary);
}

.eyebrow,
.picker-eyebrow,
.workflow-library-help,
.picker-help,
.value-report-status,
.operation-history-status {
  color: var(--wfv-dark-cyan);
}

/* ------------------------------------------------------------
   WORKFLOW LIBRARY
   ------------------------------------------------------------ */

#workflow-library {
  color: var(--wfv-dark-text);

  border-color: var(--wfv-dark-frame);
  border-top-color: var(--wfv-dark-blue);

  background:
    linear-gradient(
      180deg,
      #192A3C,
      #111D2B
    );
}

#workflow-library .eyebrow {
  color: var(--wfv-dark-cyan);
}

#workflow-library h2,
#workflow-library strong {
  color: var(--wfv-dark-text);
}

#workflow-library p,
#workflow-library span {
  color: var(--wfv-dark-text-secondary);
}

/*
 * Saved workflow controls are not white surfaces.
 */
#workflow-library button,
#workflow-library select,
#workflow-library input {
  color: var(--wfv-dark-text);

  border-color: #526D86;

  background: #203449;
}

/* ------------------------------------------------------------
   REQUEST — PRIMARY WHITE WORK SURFACE
   ------------------------------------------------------------ */

#request {
  color: var(--wfv-prompt-text);

  background: var(--wfv-prompt-surface);

  border: 2px solid #7897B5;

  box-shadow:
    inset 0 1px 3px rgba(18, 43, 70, 0.08),
    0 7px 18px rgba(0, 0, 0, 0.24);

  font-weight: 600;
}

#request::placeholder {
  color: #667F98;
  opacity: 1;
}

#request:focus {
  border-color: var(--wfv-dark-cyan);

  box-shadow:
    0 0 0 3px rgba(56, 182, 255, 0.22),
    inset 0 1px 3px rgba(18, 43, 70, 0.08);
}

/* ------------------------------------------------------------
   STATUS
   ------------------------------------------------------------ */

#status {
  border-color: #496A85;

  background:
    linear-gradient(
      135deg,
      #20374B,
      #142536
    );
}

#status #state {
  color: var(--wfv-dark-cyan);
}

#status #message {
  color: #FFFFFF;
}

#status.workflow-status--neutral {
  border-color: #496A85;

  background:
    linear-gradient(
      135deg,
      #20374B,
      #142536
    );
}

#status.workflow-status--attention {
  border-color: #E6B84F;

  background:
    linear-gradient(
      135deg,
      #43371D,
      #1A2A3A 72%
    );
}

#status.workflow-status--attention #state {
  color: #FFD166;
}

#status.workflow-status--attention #message {
  color: #FFF0B8;
}

#status.workflow-status--success {
  border-color: #45B978;

  background:
    linear-gradient(
      135deg,
      #173C2B,
      #142B31
    );
}

#status.workflow-status--success #message {
  color: #DFFFF0;
}

#status.workflow-status--error {
  border-color: #D85C5C;

  background:
    linear-gradient(
      135deg,
      #472326,
      #29212B
    );
}

#status.workflow-status--error #message {
  color: #FFE3E3;
}

/* ------------------------------------------------------------
   SELECTION SURFACE
   ------------------------------------------------------------ */

#selection {
  color: var(--wfv-dark-text);

  border-color: var(--wfv-dark-frame);

  background:
    linear-gradient(
      180deg,
      #192B3D,
      #111D2B
    );
}

#selection .picker-eyebrow {
  color: var(--wfv-dark-cyan);
}

#selection .picker-heading h2,
#selection .picker-heading strong {
  color: var(--wfv-dark-text);
}

#selection .picker-help {
  color: var(--wfv-dark-text-secondary);
}

/*
 * Requested-document cards are dark blue-gray, not white.
 */
#selection-groups .working-set-group {
  color: var(--wfv-dark-text);

  border-color: #49657F;

  background:
    linear-gradient(
      180deg,
      #22384C,
      #192A3B
    );

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#selection-groups .working-set-group::before {
  background: var(--wfv-dark-blue);
}

#selection-groups .working-set-group > :first-child {
  color: var(--wfv-dark-cyan);
}

#selection-groups .working-set-group label,
#selection-groups .working-set-group span,
#selection-groups .working-set-group p {
  color: var(--wfv-dark-text-secondary);
}

/*
 * Candidate rows/controls remain dark.
 */
#selection-groups button,
#selection-groups input,
#selection-groups select {
  color: var(--wfv-dark-text);

  border-color: #526E87;

  background: #263D52;
}

#selection-groups .working-set-group--decision {
  border-color: #D6A63D;

  background:
    linear-gradient(
      180deg,
      #3B351F,
      #252C31
    );
}

#selection-groups .working-set-group--decision::before {
  background: #F0B429;
}

#selection-groups .working-set-group--decision > :first-child,
#selection-groups .working-set-group--decision strong,
#selection-groups .working-set-group--decision .working-set-status {
  color: #FFD166;
}

#selection-groups .working-set-group--missing {
  border-color: #C85F65;

  background:
    linear-gradient(
      180deg,
      #3A252B,
      #27232C
    );
}

#selection-groups .working-set-group--missing::before {
  background: #E66B72;
}

/* ------------------------------------------------------------
   GUIDANCE
   ------------------------------------------------------------ */

#workflow-guidance-disclosure {
  color: var(--wfv-dark-text);

  border-color: #405C75;

  background:
    linear-gradient(
      180deg,
      #172A3C,
      #111D2A
    );
}

#workflow-guidance-disclosure summary {
  color: var(--wfv-dark-cyan);
}

.workflow-guidance-availability {
  color: #7BCFFF;
}

/* ------------------------------------------------------------
   REVIEW / RECOVERY / COMPLETION
   ------------------------------------------------------------ */

#review,
#approved-recovery {
  color: var(--wfv-dark-text);

  border-color: #486680;
  border-top-color: var(--wfv-dark-blue);

  background:
    linear-gradient(
      180deg,
      #1C3043,
      #121F2D
    );
}

#completed {
  color: var(--wfv-dark-text);

  border-color: #418765;

  background:
    linear-gradient(
      180deg,
      #18372B,
      #11251F
    );
}

/* ------------------------------------------------------------
   WORKFLOW VALUE
   ------------------------------------------------------------ */

#value-report {
  color: var(--wfv-dark-text);

  border-color: var(--wfv-dark-frame);
  border-top-color: var(--wfv-dark-cyan);

  background:
    linear-gradient(
      180deg,
      #182A3B,
      #101C29
    );
}

#value-report .eyebrow,
#value-report-title {
  color: var(--wfv-dark-cyan);
}

.value-metric {
  color: var(--wfv-dark-text);

  border-color: #3E5971;

  background: #1C3043;
}

.value-metric strong {
  color: #6BCBFF;
}

.value-metric span,
.value-report-status {
  color: var(--wfv-dark-text-secondary);
}

/* ------------------------------------------------------------
   OPERATION HISTORY
   ------------------------------------------------------------ */

#operation-history {
  color: var(--wfv-dark-text);

  border-color: var(--wfv-dark-frame);
  border-top-color: var(--wfv-dark-blue);

  background:
    linear-gradient(
      180deg,
      #182A3B,
      #101C29
    );
}

#operation-history .eyebrow,
#operation-history-title {
  color: var(--wfv-dark-cyan);
}

.history-list > * {
  color: var(--wfv-dark-text);

  border-color: #3E5870;

  background: #1C3043;
}

.history-list strong {
  color: var(--wfv-dark-text);
}

.history-list span,
.operation-history-status {
  color: var(--wfv-dark-text-secondary);
}

/* ------------------------------------------------------------
   BUTTONS / ACTIONS
   ------------------------------------------------------------ */

#workflow-action-area button:not(.secondary),
.actions button:not(.secondary) {
  color: #FFFFFF;

  border-color: #1C57D1;

  background:
    linear-gradient(
      180deg,
      #3478F6,
      var(--wfv-dark-blue)
    );
}

button.secondary {
  color: var(--wfv-dark-text);

  border-color: #526D86;

  background:
    linear-gradient(
      180deg,
      #263D52,
      #1D3043
    );
}

button.secondary:hover {
  color: #FFFFFF;

  border-color: #6888A5;

  background: #2B455D;
}

#continue-selection:disabled {
  color: #8797A7;

  border-color: #44596D;

  background: #263440;

  box-shadow: none;
}

#continue-selection:not(:disabled) {
  color: #06111C;

  border-color: #1EA8F2;

  background:
    linear-gradient(
      180deg,
      #69D0FF,
      var(--wfv-dark-cyan)
    );

  font-weight: 900;
}

/* ------------------------------------------------------------
   KEEP WHITE SCARCE

   The Request remains the primary intentionally white rectangle.
   ------------------------------------------------------------ */

#request {
  background-color: #FFFFFF;
}


/* ============================================================
   WFV_OPERATION_HISTORY_DARK_CONTRAST_V1

   Operation History contrast correction.

   Authority:
   - History background is dark WFV navy / blue-gray.
   - Individual history rows are dark raised surfaces.
   - Primary history text is bright near-white.
   - Secondary metadata is silver/light blue-gray.
   - WFV cyan identifies the section.
   - No white history cards.
   - No white-on-white history text.

   Presentation only.
   History data/runtime authority unchanged.
   ============================================================ */

#operation-history {
  color: #E8EEF6 !important;

  border-color: #405D78 !important;
  border-top-color: #2563EB !important;

  background:
    linear-gradient(
      180deg,
      #172A3C 0%,
      #101D2B 55%,
      #0D1824 100%
    ) !important;

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#operation-history .eyebrow {
  color: #38B6FF !important;
}

#operation-history-title {
  color: #73CEFF !important;
}

#operation-history .operation-history-status,
#operation-history > p,
#operation-history > span {
  color: #B7C4D2 !important;
}

/*
 * The scrolling history viewport itself must remain dark.
 */
#operation-history .history-list {
  color: #E8EEF6 !important;

  background: #0D1824 !important;

  border-color: #344F69 !important;

  scrollbar-color:
    #2563EB
    #172638;
}

/*
 * Every operation row is a dark raised card.
 */
#operation-history .history-list > * {
  color: #E8EEF6 !important;

  border: 1px solid #496780 !important;

  background:
    linear-gradient(
      180deg,
      #21384C,
      #192B3D
    ) !important;

  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

/*
 * Explicit descendant ownership prevents inherited historical
 * light-surface rules from producing white-on-white content.
 */
#operation-history .history-list > * strong,
#operation-history .history-list > * b {
  color: #FFFFFF !important;
}

#operation-history .history-list > * span,
#operation-history .history-list > * p,
#operation-history .history-list > * div,
#operation-history .history-list > * time {
  color: #C8D4E0 !important;
}

/*
 * First/primary text inside a row gets stronger contrast.
 */
#operation-history .history-list > * > :first-child {
  color: #F4F8FC !important;
}

/*
 * Refresh remains a dark secondary control rather than
 * introducing another white rectangle.
 */
#operation-history button,
#operation-history .secondary {
  color: #E8EEF6 !important;

  border-color: #58738C !important;

  background:
    linear-gradient(
      180deg,
      #294258,
      #203448
    ) !important;
}

#operation-history button:hover,
#operation-history .secondary:hover {
  color: #FFFFFF !important;

  border-color: #38B6FF !important;

  background: #2B4B65 !important;
}

/*
 * Selected/focused/active history content remains dark with
 * unmistakable foreground contrast.
 */
#operation-history .history-list > *:focus,
#operation-history .history-list > *:focus-visible,
#operation-history .history-list > *.selected,
#operation-history .history-list > *[aria-selected="true"] {
  color: #FFFFFF !important;

  border-color: #38B6FF !important;

  background:
    linear-gradient(
      180deg,
      #28516D,
      #1D3B51
    ) !important;

  outline: 2px solid rgba(56, 182, 255, 0.42);
  outline-offset: 1px;
}

#operation-history .history-list > *:focus *,
#operation-history .history-list > *:focus-visible *,
#operation-history .history-list > *.selected *,
#operation-history .history-list > *[aria-selected="true"] * {
  color: #FFFFFF !important;
}


/* ============================================================
   WFV_STATUS_MODEL_PAGE_CONTRAST_V1

   Browser reference:
   Workflow Status dark navy / blue-gray treatment.

   Governing visual rule:
   - major WFV surfaces follow the Status contrast model;
   - Request remains the primary white working surface;
   - ordinary text contrasts clearly with its immediate surface;
   - cyan / royal blue identify WFV information and interaction;
   - workflow-response text follows the current semantic stage color.

   Presentation only.
   No runtime / lifecycle / picker / approval / execution changes.
   ============================================================ */

/* ------------------------------------------------------------
   STATUS RESPONSE FOLLOWS CURRENT WORKFLOW STAGE
   ------------------------------------------------------------ */

#status #message {
  color: inherit !important;
}

/* neutral */
#status.workflow-status--neutral {
  color: #73CEFF !important;
}

#status.workflow-status--neutral #state,
#status.workflow-status--neutral #message {
  color: inherit !important;
}

/* action / selection / approval required */
#status.workflow-status--attention {
  color: #FFD166 !important;
}

#status.workflow-status--attention #state,
#status.workflow-status--attention #message {
  color: inherit !important;
}

/* completed */
#status.workflow-status--success {
  color: #59D98E !important;
}

#status.workflow-status--success #state,
#status.workflow-status--success #message {
  color: inherit !important;
}

/* error */
#status.workflow-status--error {
  color: #FF7676 !important;
}

#status.workflow-status--error #state,
#status.workflow-status--error #message {
  color: inherit !important;
}

/* ------------------------------------------------------------
   REQUESTED WORKING SET
   Match the accepted Status dark-surface model.
   ------------------------------------------------------------ */

#selection {
  color: #E8EEF6 !important;

  border-color: #405D78 !important;

  background:
    linear-gradient(
      180deg,
      #172A3C,
      #101D2B
    ) !important;
}

#selection .picker-heading,
#selection .picker-heading * {
  color: #E8EEF6 !important;
}

#selection .picker-eyebrow {
  color: #38B6FF !important;

  font-weight: 850;
}

#selection .picker-help {
  color: #C8D4E0 !important;

  font-weight: 600;
}

#selection-groups {
  background: #0D1824 !important;
}

/*
 * Requested-role outer cards.
 */
#selection-groups .working-set-group {
  color: #E8EEF6 !important;

  border-color: #496780 !important;

  background:
    linear-gradient(
      180deg,
      #21384C,
      #192B3D
    ) !important;
}

/*
 * Group heading / role name.
 */
#selection-groups .working-set-group-heading,
#selection-groups .working-set-group-heading h3 {
  color: #73CEFF !important;
}

#selection-groups .working-set-group-heading h3 {
  font-weight: 900;
}

/*
 * Ordinary candidate text.
 */
#selection-groups .working-set-group p,
#selection-groups .working-set-group label,
#selection-groups .working-set-group span {
  color: #C8D4E0 !important;
}

/*
 * Candidate filename / primary content should be clearly readable.
 */
#selection-groups .working-set-group strong,
#selection-groups .working-set-group b {
  color: #F4F8FC !important;
}

/*
 * Choice-required stage remains amber.
 */
#selection-groups .working-set-group--decision {
  border-color: #D6A63D !important;

  background:
    linear-gradient(
      180deg,
      #3B351F,
      #252C31
    ) !important;
}

#selection-groups .working-set-group--decision
.working-set-group-heading,
#selection-groups .working-set-group--decision
.working-set-group-heading h3,
#selection-groups .working-set-group--decision
.working-set-status {
  color: #FFD166 !important;
}

/*
 * Missing state stays semantic red.
 */
#selection-groups .working-set-group--missing {
  border-color: #C85F65 !important;

  background:
    linear-gradient(
      180deg,
      #3A252B,
      #27232C
    ) !important;
}

#selection-groups .working-set-group--missing
.working-set-group-heading,
#selection-groups .working-set-group--missing
.working-set-status {
  color: #FF8A8F !important;
}

/* ------------------------------------------------------------
   CANDIDATE ROWS
   ------------------------------------------------------------ */

#selection-groups .working-set-option,
#selection-groups .candidate,
#selection-groups label {
  color: #E8EEF6 !important;

  border-color: #526E87 !important;

  background:
    linear-gradient(
      180deg,
      #294258,
      #203448
    ) !important;
}

/*
 * Any nested text gets explicit contrast ownership.
 */
#selection-groups label strong,
#selection-groups label b,
#selection-groups label > span:first-of-type {
  color: #F4F8FC !important;
}

#selection-groups label small,
#selection-groups label p,
#selection-groups label span:not(:first-of-type) {
  color: #B7C4D2 !important;
}

/* ------------------------------------------------------------
   WORKFLOW VALUE
   Use the same model proven by Operation History.
   ------------------------------------------------------------ */

#value-report {
  color: #E8EEF6 !important;

  border-color: #405D78 !important;
  border-top-color: #38B6FF !important;

  background:
    linear-gradient(
      180deg,
      #172A3C,
      #101D2B
    ) !important;
}

#value-report .eyebrow {
  color: #38B6FF !important;
}

#value-report-title {
  color: #73CEFF !important;
}

#value-report .value-report-status,
#value-report > p {
  color: #B7C4D2 !important;
}

/*
 * Metric boxes.
 */
#value-report .value-metric {
  color: #E8EEF6 !important;

  border-color: #496780 !important;

  background:
    linear-gradient(
      180deg,
      #21384C,
      #192B3D
    ) !important;
}

#value-report .value-metric strong {
  color: #73CEFF !important;
}

#value-report .value-metric span,
#value-report .value-metric p {
  color: #C8D4E0 !important;
}

/*
 * Operations by type / latest activity.
 */
#value-report .value-report-detail {
  color: #E8EEF6 !important;

  border-color: #496780 !important;

  background:
    linear-gradient(
      180deg,
      #21384C,
      #192B3D
    ) !important;
}

#value-report .value-report-detail h3,
#value-report .value-report-detail strong,
#value-report .value-report-detail dt {
  color: #F4F8FC !important;
}

#value-report .value-report-detail p,
#value-report .value-report-detail span,
#value-report .value-report-detail dd {
  color: #C8D4E0 !important;
}

/*
 * Numeric operation counts can use brighter WFV cyan.
 */
#value-report .value-operation-counts dd {
  color: #73CEFF !important;

  font-weight: 800;
}

/* ------------------------------------------------------------
   WORKFLOW LIBRARY
   ------------------------------------------------------------ */

#workflow-library {
  color: #E8EEF6 !important;

  background:
    linear-gradient(
      180deg,
      #172A3C,
      #101D2B
    ) !important;
}

#workflow-library h2 {
  color: #73CEFF !important;
}

#workflow-library .eyebrow {
  color: #38B6FF !important;
}

#workflow-library p,
#workflow-library span {
  color: #C8D4E0 !important;
}

/* ------------------------------------------------------------
   GUIDANCE
   ------------------------------------------------------------ */

#workflow-guidance-disclosure {
  color: #E8EEF6 !important;

  background:
    linear-gradient(
      180deg,
      #172A3C,
      #101D2B
    ) !important;
}

#workflow-guidance-disclosure summary {
  color: #73CEFF !important;
}

.workflow-guidance-availability {
  color: #38B6FF !important;
}

/* ------------------------------------------------------------
   SECONDARY BUTTONS — NO WHITE CARDS
   ------------------------------------------------------------ */

button.secondary {
  color: #E8EEF6 !important;

  border-color: #58738C !important;

  background:
    linear-gradient(
      180deg,
      #294258,
      #203448
    ) !important;
}

/* ------------------------------------------------------------
   REQUEST REMAINS THE WHITE EXCEPTION
   ------------------------------------------------------------ */

#request {
  color: #173A68 !important;
  background: #FFFFFF !important;
}

#request::placeholder {
  color: #667F98 !important;
}


/* ============================================================
   WFV_SECTION_IDENTITY_CONTRAST_FINISH_V1

   Final visual distinction / readability correction.

   Governing rules:

   1. Request:
      White primary user work surface.

   2. Workflow Status:
      Accepted dark semantic signal surface.

   3. Requested Working Set:
      Distinct deeper WFV blue/navy work section so file
      confirmation never visually merges with the Request area.

   4. Guidance:
      Dark WFV information surface with explicit high-contrast
      text ownership.

   5. Workflow Value:
      Dark WFV measured-work surface with explicit readable
      labels, values and activity text.

   6. Operation History:
      Existing accepted #31G.4 contrast authority is retained
      and intentionally not overridden here.

   Presentation only.
   Runtime / selection / approval / execution unchanged.
   ============================================================ */

/* ------------------------------------------------------------
   REQUEST — WHITE WORK SURFACE REMAINS UNIQUE
   ------------------------------------------------------------ */

#request {
  color: #173A68 !important;
  background: #FFFFFF !important;

  border-color: #6F91B2 !important;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.26),
    inset 0 1px 2px rgba(17, 56, 92, 0.08) !important;
}

#request::placeholder {
  color: #5D7690 !important;
}

/* ------------------------------------------------------------
   FILE-SELECTION CONFIRMATION
   Distinct from Request but still canonical WFV family.
   ------------------------------------------------------------ */

#selection {
  color: #ECF5FF !important;

  border: 2px solid #315C84 !important;

  background:
    linear-gradient(
      180deg,
      #102B43 0%,
      #0B2033 58%,
      #081A2A 100%
    ) !important;

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.31),
    inset 0 1px 0 rgba(89, 190, 255, 0.06) !important;
}

#selection .picker-heading {
  color: #ECF5FF !important;
}

#selection .picker-eyebrow {
  color: #38B6FF !important;
}

#selection .picker-heading h2,
#selection .picker-heading strong {
  color: #FFFFFF !important;
}

#selection .picker-help {
  color: #D5E3F0 !important;
}

/*
 * Inventory gets a subtly deeper internal field, making the
 * whole file-confirmation task read as one discrete section.
 */
#selection-groups {
  background:
    linear-gradient(
      180deg,
      #091D2F,
      #071725
    ) !important;

  border: 1px solid #284B6A;
  border-radius: 0.8rem;
}

/*
 * Each requested document remains its own card.
 */
#selection-groups .working-set-group {
  color: #EDF6FF !important;

  border-color: #456F91 !important;

  background:
    linear-gradient(
      180deg,
      #1B3A54,
      #132D43
    ) !important;
}

#selection-groups .working-set-group-heading h3 {
  color: #8ED9FF !important;
}

/*
 * Candidate rows use another distinct depth inside the
 * requested-document card.
 */
#selection-groups label,
#selection-groups .working-set-option,
#selection-groups .candidate {
  color: #F2F7FC !important;

  border-color: #5C7E99 !important;

  background:
    linear-gradient(
      180deg,
      #294A63,
      #203D54
    ) !important;
}

#selection-groups label strong,
#selection-groups label b,
#selection-groups label > span:first-of-type {
  color: #FFFFFF !important;
}

#selection-groups label small,
#selection-groups label p,
#selection-groups label span:not(:first-of-type) {
  color: #D1DEEA !important;
}

/*
 * Semantic decision card remains visually distinct.
 */
#selection-groups .working-set-group--decision {
  border-color: #D7A93C !important;

  background:
    linear-gradient(
      180deg,
      #493A1B,
      #2E2E2A
    ) !important;
}

#selection-groups .working-set-group--decision
.working-set-group-heading h3,
#selection-groups .working-set-group--decision
.working-set-status {
  color: #FFD166 !important;
}

/* ------------------------------------------------------------
   GUIDANCE — EXPLICIT HIGH-CONTRAST TEXT OWNERSHIP
   ------------------------------------------------------------ */

#workflow-guidance-disclosure {
  color: #EEF6FD !important;

  border-color: #365D7A !important;

  background:
    linear-gradient(
      180deg,
      #17334A,
      #102638
    ) !important;
}

#workflow-guidance-disclosure summary {
  color: #8ED9FF !important;
}

.workflow-guidance-availability {
  color: #59C6FF !important;
}

#workflow-guidance,
#workflow-guidance-content {
  color: #EEF6FD !important;

  background: #102638 !important;
}

/*
 * Headings identify categories clearly.
 */
#workflow-guidance h1,
#workflow-guidance h2,
#workflow-guidance h3,
#workflow-guidance h4,
#workflow-guidance strong,
#workflow-guidance-content h1,
#workflow-guidance-content h2,
#workflow-guidance-content h3,
#workflow-guidance-content h4,
#workflow-guidance-content strong {
  color: #8ED9FF !important;
}

/*
 * Actual guidance sentences — including:
 * "copy driver license, insurance certificate..."
 * — receive near-white foreground.
 */
#workflow-guidance p,
#workflow-guidance li,
#workflow-guidance span,
#workflow-guidance div,
#workflow-guidance dd,
#workflow-guidance-content p,
#workflow-guidance-content li,
#workflow-guidance-content span,
#workflow-guidance-content div,
#workflow-guidance-content dd {
  color: #E6F0F8 !important;
}

/*
 * Lists / decision content slightly stronger.
 */
#workflow-guidance li,
#workflow-guidance-content li {
  color: #F1F6FB !important;
}

/* ------------------------------------------------------------
   WORKFLOW VALUE — EXPLICIT HIGH-CONTRAST DETAIL
   ------------------------------------------------------------ */

#value-report {
  color: #EEF6FD !important;

  border-color: #385F7C !important;
  border-top-color: #38B6FF !important;

  background:
    linear-gradient(
      180deg,
      #17334A,
      #102638
    ) !important;
}

#value-report .eyebrow {
  color: #38B6FF !important;
}

#value-report-title {
  color: #8ED9FF !important;
}

#value-report .value-report-status,
#value-report > p {
  color: #D1DEEA !important;
}

/*
 * Top measured totals.
 */
#value-report .value-metric {
  color: #EEF6FD !important;

  border-color: #486C88 !important;

  background:
    linear-gradient(
      180deg,
      #1E405A,
      #17334A
    ) !important;
}

#value-report .value-metric strong {
  color: #7ED4FF !important;
}

#value-report .value-metric span,
#value-report .value-metric p {
  color: #E0EAF3 !important;
}

/*
 * Operations by type + Latest recorded activity.
 */
#value-report .value-report-detail {
  color: #F2F7FC !important;

  border-color: #486C88 !important;

  background:
    linear-gradient(
      180deg,
      #1E405A,
      #17334A
    ) !important;
}

#value-report .value-report-detail h3 {
  color: #FFFFFF !important;

  font-weight: 850;
}

#value-report .value-report-detail strong,
#value-report .value-report-detail dt {
  color: #F4F8FC !important;
}

#value-report .value-report-detail p,
#value-report .value-report-detail span,
#value-report .value-report-detail dd {
  color: #E3ECF4 !important;
}

/*
 * Specific operation list:
 * Copy / Email / Move + their numbers.
 */
#value-report .value-operation-counts,
#value-report .value-operation-counts dt,
#value-report .value-operation-counts dd {
  color: #EEF6FD !important;
}

#value-report .value-operation-counts dt {
  font-weight: 650;
}

#value-report .value-operation-counts dd {
  color: #8ED9FF !important;

  font-weight: 900;
}

/*
 * Latest activity is important measured information and should
 * never render as low-contrast muted copy.
 */
#value-report-latest {
  color: #F2F7FC !important;

  font-weight: 650;
}

/* ------------------------------------------------------------
   LIBRARY — MATCH GENERAL DARK SYSTEM, NOT SELECTION DEPTH
   ------------------------------------------------------------ */

#workflow-library {
  color: #EEF6FD !important;

  background:
    linear-gradient(
      180deg,
      #172F44,
      #102638
    ) !important;
}

#workflow-library h2 {
  color: #8ED9FF !important;
}

#workflow-library p,
#workflow-library span {
  color: #D5E2ED !important;
}

/* ------------------------------------------------------------
   STATUS RESPONSE REMAINS CURRENT-STAGE COLOR
   ------------------------------------------------------------ */

#status.workflow-status--neutral #message {
  color: #73CEFF !important;
}

#status.workflow-status--attention #message {
  color: #FFD166 !important;
}

#status.workflow-status--success #message {
  color: #59D98E !important;
}

#status.workflow-status--error #message {
  color: #FF7676 !important;
}


/* ============================================================
   WFV_PRINT_PDF_CONTRAST_FALLBACK_V1

   Screen/browser visual authority remains unchanged.

   Some browser print/PDF engines suppress dark background
   graphics while preserving light foreground colors. That can
   produce unreadable light-on-white printed output.

   Print fallback therefore uses dark WFV text on white/light
   print surfaces where backgrounds cannot be relied upon.

   Presentation/export only.
   No runtime, picker, approval, execution, Value, or History
   data authority changes.
   ============================================================ */

html,
body,
.shell,
.panel,
#selection,
#value-report,
#operation-history,
#workflow-guidance-disclosure,
#workflow-library {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

@media print {

  /*
   * Print/PDF is an independent contrast context.
   * Do not depend on browser background-gradient rendering.
   */

  #value-report,
  #value-report .value-metric,
  #value-report .value-report-detail {
    color: #111827 !important;
    background: #FFFFFF !important;
  }

  #value-report .eyebrow {
    color: #176B9D !important;
  }

  #value-report-title {
    color: #174F8A !important;
  }

  #value-report .value-report-status,
  #value-report > p {
    color: #425466 !important;
  }

  /*
   * Operations by type.
   */
  #value-report .value-report-detail h3,
  #value-report .value-report-detail strong,
  #value-report .value-report-detail dt {
    color: #111827 !important;
  }

  #value-report .value-report-detail p,
  #value-report .value-report-detail span,
  #value-report .value-report-detail dd {
    color: #25384A !important;
  }

  #value-report .value-operation-counts,
  #value-report .value-operation-counts dt {
    color: #17212B !important;
  }

  #value-report .value-operation-counts dd {
    color: #174F8A !important;
    font-weight: 900 !important;
  }

  /*
   * Latest recorded activity.
   */
  #value-report-latest {
    color: #17212B !important;
    font-weight: 700 !important;
  }

  /*
   * Guidance print fallback.
   */
  #workflow-guidance-disclosure,
  #workflow-guidance,
  #workflow-guidance-content {
    color: #17212B !important;
    background: #FFFFFF !important;
  }

  #workflow-guidance-disclosure summary,
  #workflow-guidance h1,
  #workflow-guidance h2,
  #workflow-guidance h3,
  #workflow-guidance h4,
  #workflow-guidance strong,
  #workflow-guidance-content h1,
  #workflow-guidance-content h2,
  #workflow-guidance-content h3,
  #workflow-guidance-content h4,
  #workflow-guidance-content strong {
    color: #174F8A !important;
  }

  #workflow-guidance p,
  #workflow-guidance li,
  #workflow-guidance span,
  #workflow-guidance div,
  #workflow-guidance dd,
  #workflow-guidance-content p,
  #workflow-guidance-content li,
  #workflow-guidance-content span,
  #workflow-guidance-content div,
  #workflow-guidance-content dd {
    color: #25384A !important;
  }

  /*
   * Operation History already has good browser contrast, but
   * printed output must remain readable if dark fills disappear.
   */
  #operation-history,
  #operation-history .history-list,
  #operation-history .history-list > * {
    color: #17212B !important;
    background: #FFFFFF !important;
  }

  #operation-history-title {
    color: #174F8A !important;
  }

  #operation-history .eyebrow {
    color: #176B9D !important;
  }

  #operation-history .history-list > * strong,
  #operation-history .history-list > * b {
    color: #111827 !important;
  }

  #operation-history .history-list > * span,
  #operation-history .history-list > * p,
  #operation-history .history-list > * div,
  #operation-history .history-list > * time {
    color: #25384A !important;
  }

  /*
   * Request remains readable in its naturally white print
   * surface.
   */
  #request {
    color: #173A68 !important;
    background: #FFFFFF !important;
  }
}


/* ============================================================
   WFV_FINAL_LOCAL_CONTRAST_CORRECTION_V1

   Two narrow browser contrast corrections only:

   1. Workflow Value lower detail cards:
      Current browser fill is light/white, therefore foreground
      must use strong dark WFV text rather than light-on-light.

   2. Choice-required indicator:
      White pill + amber semantic foreground/border for maximum
      legibility while preserving workflow-stage meaning.

   No layout, runtime, picker, approval, execution, Value-data,
   History-data, or lifecycle authority changes.
   ============================================================ */

/* ------------------------------------------------------------
   WORKFLOW VALUE LOWER DETAIL CARDS

   Operations by type
   Latest recorded activity
   ------------------------------------------------------------ */

#value-report .value-report-detail {
  color: #111827 !important;

  background: #FFFFFF !important;

  border-color: #6E879E !important;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/*
 * Headings must be unmistakably dark on white.
 */
#value-report .value-report-detail h1,
#value-report .value-report-detail h2,
#value-report .value-report-detail h3,
#value-report .value-report-detail h4,
#value-report .value-report-detail strong,
#value-report .value-report-detail b {
  color: #111827 !important;
}

/*
 * Normal detail text gets dark blue-gray rather than pale
 * silver/white.
 */
#value-report .value-report-detail p,
#value-report .value-report-detail span,
#value-report .value-report-detail div,
#value-report .value-report-detail dt,
#value-report .value-report-detail dd,
#value-report .value-report-detail time {
  color: #24384B !important;
}

/*
 * Operation names.
 */
#value-report .value-operation-counts,
#value-report .value-operation-counts dt {
  color: #17212B !important;
}

#value-report .value-operation-counts dt {
  font-weight: 700 !important;
}

/*
 * Counts keep a strong WFV blue identity but become darker
 * than the current cyan so they remain crisp on white.
 */
#value-report .value-operation-counts dd {
  color: #1859A9 !important;

  font-weight: 900 !important;
}

/*
 * Latest activity gets explicit dark ownership.
 */
#value-report-latest {
  color: #17212B !important;

  font-weight: 750 !important;
}

/*
 * Defensive ownership for any nested Value detail descendants.
 */
#value-report .value-report-detail * {
  text-shadow: none !important;
}

/* ------------------------------------------------------------
   CHOICE REQUIRED INDICATOR

   White fill / amber semantic foreground.
   ------------------------------------------------------------ */

#selection-groups .working-set-status--decision {
  color: #A96700 !important;

  background: #FFFFFF !important;

  border: 1px solid #E6B84F !important;

  box-shadow:
    0 2px 7px rgba(0, 0, 0, 0.14) !important;

  font-weight: 900 !important;
}

/*
 * Catch generic decision-status ownership if a historical rule
 * targets the broader status class.
 */
#selection-groups
.working-set-group--decision
.working-set-status {
  color: #A96700 !important;

  background: #FFFFFF !important;

  border-color: #E6B84F !important;
}

/*
 * Keep the requested-document heading itself amber on its dark
 * decision card. Only the pill switches to white fill.
 */
#selection-groups
.working-set-group--decision
.working-set-group-heading h3 {
  color: #FFD166 !important;
}


/* WFV_CENTRALIZED_PPB_CORRESPONDENCE_SCROLLING_V1
 *
 * Request remains the sole editable user-instruction surface.
 *
 * Workflow Valet correspondence and the active lifecycle surface
 * share one bounded central PPB viewport.
 *
 * Large workflows scroll here rather than inside candidate inventory.
 *
 * Presentation only:
 * runtime, selection, review, approval and execution authorities
 * remain unchanged.
 */

#workflow-conversation {
  max-height: min(58vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 0.45rem;
}

#selection-groups {
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
  scrollbar-gutter: auto;
}

@media (max-width: 640px) {
  #workflow-conversation {
    max-height: min(56vh, 520px);
  }
}


/* ============================================================
   WFV_PRIMARY_PROMPT_BOX_SINGLE_VISUAL_WORKSPACE_V1

   The editable Request and active Workflow Valet continuation
   compose one customer-visible Primary Prompt Box workspace.

   #workflow-conversation remains the bounded internal workflow
   scroll owner, but must not paint a second card beneath Request.

   Presentation only.
   No runtime, picker, review, approval, or execution authority.
   ============================================================ */

#workflow-conversation {
  border: none;
  border-radius: 0;
  background: transparent;
}

/*
 * Keep the continuation visually attached to the Request/actions
 * rather than presenting it as an independent card.
 *
 * Existing bounded max-height / overflow-y rules remain authoritative
 * and are intentionally not changed here.
 */


/* ============================================================
   WFV_COMPLETE_PRIMARY_PROMPT_BOX_PROVISIONAL_V1

   PROVISIONAL — browser UAT required before durable registration.

   One customer-visible Primary Prompt Box owns:
   Request -> Run/Clear -> WFV response -> active lifecycle ->
   Confirm/Review/Approve/Recovery.

   The complete PPB owns bounded vertical scrolling.

   Status remains above.
   Guidance remains outside/below.
   Value and Operation History remain reporting surfaces.

   Presentation/DOM ownership only.
   Runtime, picker, review, approval and execution semantics unchanged.
   ============================================================ */

#active-workflow-conversation {
  display: block;

  max-height: min(68vh, 760px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;

  margin-top: 12px;
  padding: 16px;

  border: 2px solid #8FA6BD;
  border-radius: 14px;

  background:
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #F5F8FC 100%
    );

  color: #152637;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.80);
}

/*
 * Request is now the editable opening contribution inside the PPB,
 * rather than being the PPB boundary itself.
 */
#active-workflow-conversation > #request {
  width: 100%;
  margin-top: 0;

  color: #152637;
  background: #FFFFFF;

  box-shadow:
    inset 0 1px 3px rgba(18, 43, 70, 0.08);
}

/*
 * Run / Clear belong to the same workspace.
 */
#active-workflow-conversation > .actions {
  margin-bottom: 14px;
}

/*
 * The inner workflow continuation is no longer an independent
 * viewport or independent card. It flows naturally within PPB.
 */
#workflow-conversation {
  max-height: none;
  overflow-y: visible;
  overflow-x: visible;
  overscroll-behavior: auto;
  scrollbar-gutter: auto;

  margin-top: 0;
  padding: 12px 0 0;

  border: none;
  border-radius: 0;
  background: transparent;
}

/*
 * Ensure the retained Workflow Valet conversational response is
 * readable on the PPB work surface.
 */
#conversation-wfv,
#conversation-wfv .conversation-speaker,
#conversation-wfv .conversation-turn-content {
  color: #152637;
}

#conversation-wfv .conversation-speaker {
  color: #1D5E8A;
}

/*
 * The lifecycle cards remain inside the PPB; their internal
 * functionality and IDs are untouched.
 */
#conversation-workflow-content {
  width: 100%;
  min-width: 0;
}

/*
 * Required continuation controls remain at the natural end of
 * workflow content and therefore scroll with the whole PPB.
 */
#workflow-action-area {
  position: static;
  width: 100%;
}

@media (max-width: 640px) {
  #active-workflow-conversation {
    max-height: min(72vh, 680px);
    padding: 12px;
  }
}

/* =========================================================
   WFV_ACTUAL_PROMPT_SURFACE_PROVISIONAL_V1

   Product model:
   - the visible prompt/conversation surface owns all live interaction
   - Request + WFV response + selection + Confirm + Review +
     Approve/Run + recovery/completion remain in this surface
   - this surface owns bounded internal scrolling
   - Status / Guidance / Value / History remain outside
   - no separate outer PPB scrolling box
   ========================================================= */

#primary-prompt-surface {
  display: block;
  width: 100%;
  box-sizing: border-box;

  max-height: min(68vh, 760px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;

  margin: 0;
  padding: 16px;

  border: 2px solid rgba(30, 64, 175, 0.22);
  border-radius: 14px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.99),
      rgba(248,250,252,0.99)
    );

  color: #172033;
  box-shadow: 0 8px 24px rgba(15,23,42,0.08);
}

/*
 * The editable Request belongs to the prompt surface.
 * It must not visually become a second nested workspace.
 */
#primary-prompt-surface #request {
  width: 100%;
  box-sizing: border-box;
  color: #172033;
}

/*
 * Workflow continuation flows naturally inside the same prompt surface.
 * It must not become another independently scrolling card.
 */
#primary-prompt-surface #workflow-conversation {
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: visible !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  width: 100%;
  min-width: 0;
}

/*
 * Live workflow actions are correspondence/interaction and therefore
 * remain in the prompt surface at their natural lifecycle position.
 */
#primary-prompt-surface #workflow-action-area {
  position: static !important;
  width: 100%;
  box-sizing: border-box;
}

/*
 * WFV's response must read as part of the prompt conversation rather
 * than as an external status/reporting card.
 */
#primary-prompt-surface #conversation-wfv,
#primary-prompt-surface #conversation-wfv-content {
  color: #172033;
}

/*
 * Retire the provisional big-box selector completely.
 * There must be no active outer scrolling owner with this identity.
 */
#active-workflow-conversation {
  max-height: none !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  #primary-prompt-surface {
    max-height: min(72vh, 680px);
  }
}


/* =========================================================
   WFV_EXACT_REQUEST_BOX_LIVE_SURFACE_V1

   Browser-defined provisional authority.

   The exact visible Request-box boundary is the WFV live
   conversation/workflow viewport.

   INSIDE:
   Request, WFV responses, working set, choices,
   Confirm, Review, Approve, recovery, completion.

   OUTSIDE:
   Status, Run/Clear, Guidance, Value, History/reporting.

   Workflow Packet/Wedge remains a separate staging exception.
   ========================================================= */

#primary-prompt-surface {
  display: block;
  width: 100%;
  box-sizing: border-box;

  max-height: min(68vh, 760px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;

  margin: 0;
  padding: 0;

  border: 2px solid #6f9dcc;
  border-radius: 10px;

  background: #ffffff;
  color: #172033;

  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
}


/*
 * Preserve #request as the real editable textarea and therefore
 * preserve all existing request.value behavior.
 *
 * Its former independent border disappears because the surrounding
 * exact Request-box surface now paints that same visible boundary.
 */
#primary-prompt-surface #request {
  display: block;
  width: 100%;
  box-sizing: border-box;

  min-height: 145px;

  margin: 0;
  padding: 16px;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  color: #173a67;

  box-shadow: none !important;

  resize: none;
}


/*
 * All WFV correspondence follows Request inside the same box.
 */
#primary-prompt-surface #workflow-conversation {
  display: block;

  width: 100%;
  min-width: 0;

  max-height: none !important;
  overflow: visible !important;

  margin: 0;
  padding: 0 16px 16px;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;
}


#primary-prompt-surface #conversation-wfv,
#primary-prompt-surface #conversation-wfv-content,
#primary-prompt-surface #conversation-workflow-content {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}


/*
 * Confirm / Review / Approve / recovery controls are live workflow
 * interaction and remain in this same scrolling prompt.
 */
#primary-prompt-surface #workflow-action-area {
  position: static !important;
  width: 100%;
  box-sizing: border-box;
}


/*
 * Run/Clear start/reset the conversation and remain immediately below
 * the exact prompt boundary.
 */
#request-controls-outside-prompt {
  display: block;
  width: 100%;
  box-sizing: border-box;

  margin-top: 12px;
  margin-bottom: 10px;
}


/*
 * Retired outer-owner selector may never regain a second visible box.
 */
#active-workflow-conversation {
  max-height: none !important;
  overflow: visible !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


@media (max-width: 760px) {
  #primary-prompt-surface {
    max-height: min(72vh, 680px);
  }
}

/* WFV_CONVERSATIONAL_PPB_RESTORATION_V1
   Restore visible USER <-> Workflow Valet conversation semantics
   inside the existing PPB. Presentation only.
*/

#primary-prompt-surface .conversation-turn{
  display:flex;
  align-items:flex-start;
  gap:12px;
  width:100%;
  box-sizing:border-box;
  margin:0 0 14px 0;
}

#primary-prompt-surface .conversation-turn.hidden{
  display:none;
}

#primary-prompt-surface .conversation-avatar{
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:50%;
  box-sizing:border-box;
}

#primary-prompt-surface .conversation-avatar--user{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(51,65,85,.96);
  color:#fff;
}

#primary-prompt-surface .conversation-user-icon{
  font-size:.62rem;
  font-weight:800;
  line-height:1;
  letter-spacing:.04em;
}

#primary-prompt-surface .conversation-avatar--wfv{
  object-fit:contain;
  padding:3px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(15,23,42,.94);
}

#primary-prompt-surface .conversation-turn-body{
  flex:1 1 auto;
  min-width:0;
}

#primary-prompt-surface .conversation-speaker{
  margin:0 0 4px 0;
  font-size:.78rem;
  font-weight:800;
}

#primary-prompt-surface .conversation-turn-content{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  line-height:1.5;
}

#primary-prompt-surface .conversation-turn--user{
  padding-top:4px;
}

#primary-prompt-surface .conversation-turn--wfv{
  padding-top:2px;
}



/* ============================================================
   WFV_TRUE_PPB_APPEND_THREAD_BOTTOM_COMPOSER_V1

   Restored conversational PPB behavior:

   - accumulated conversation/workflow content above;
   - newest interaction remains the current bottom context;
   - canonical editable Request follows prior exchanges;
   - old exchanges remain available by scrolling upward;
   - no second workflow surface;
   - no runtime/selection/review/approval/execution authority change.
   ============================================================ */

#primary-prompt-surface {
  display: flex !important;
  flex-direction: column !important;

  max-height: min(68vh, 760px);

  overflow-y: auto !important;
  overflow-x: hidden !important;

  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#primary-prompt-surface #workflow-conversation {
  display: flex !important;
  flex-direction: column !important;

  flex: 0 0 auto;

  width: 100%;
  min-width: 0;

  max-height: none !important;

  overflow: visible !important;

  margin: 0;
  padding: 16px 16px 0;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;
}

#primary-prompt-surface #conversation-workflow-content {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}

#primary-prompt-surface #workflow-action-area {
  flex: 0 0 auto;

  position: static !important;

  width: 100%;
  box-sizing: border-box;
}

#primary-prompt-surface #ppb-composer {
  position: sticky;
  bottom: 0;
  z-index: 5;

  flex: 0 0 auto;

  width: 100%;
  box-sizing: border-box;

  margin-top: 14px;
  padding: 10px 16px 16px;

  background: #ffffff;

  border-top: 1px solid rgba(111, 157, 204, 0.28);
}

#primary-prompt-surface #ppb-composer #request {
  display: block;

  width: 100%;
  box-sizing: border-box;

  min-height: 76px;
  max-height: 180px;

  margin: 0;
  padding: 12px 14px;

  overflow-y: auto;

  border: 1px solid #8fa6bd !important;
  border-radius: 10px !important;

  background: #ffffff !important;
  color: #173a67;

  box-shadow:
    inset 0 1px 3px rgba(18, 43, 70, 0.08) !important;

  resize: vertical;
}

#primary-prompt-surface .conversation-turn {
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  #primary-prompt-surface {
    max-height: min(72vh, 680px);
  }

  #primary-prompt-surface #workflow-conversation {
    padding: 12px 12px 0;
  }

  #primary-prompt-surface #ppb-composer {
    padding: 10px 12px 12px;
  }
}


/* ============================================================
   WFV_PPB_BOTTOM_DOWN_USER_RIGHT_V1

   Browser-UAT correction.

   Conversation advances visually downward:
   USER -> WFV -> workflow interaction -> current composer.

   The composer participates in normal PPB flow instead of
   remaining visually pinned while content grows above it.

   Conversational identity:
   - Workflow Valet = left
   - User = right

   Presentation only.
   No runtime, selection, review, approval or execution changes.
   ============================================================ */

#primary-prompt-surface #ppb-composer {
  position: static !important;
  bottom: auto !important;
  z-index: auto !important;

  flex: 0 0 auto;

  margin-top: 14px;
}

/* USER stays on the right. */
#primary-prompt-surface .conversation-turn--user {
  display: flex !important;
  flex-direction: row-reverse !important;

  align-items: flex-start;

  width: 100%;
}

#primary-prompt-surface .conversation-turn--user .conversation-turn-body {
  margin-left: auto;
  margin-right: 10px;

  text-align: right;
}

#primary-prompt-surface .conversation-turn--user .conversation-turn-content {
  text-align: left;
}

/* Workflow Valet stays on the left. */
#primary-prompt-surface .conversation-turn--wfv {
  display: flex !important;
  flex-direction: row !important;

  align-items: flex-start;

  width: 100%;
}

#primary-prompt-surface .conversation-turn--wfv .conversation-turn-body {
  margin-left: 10px;
  margin-right: auto;

  text-align: left;
}

/*
 * WFV_SINGLE_REQUEST_CONTINUATION_AUTHORITY_V1
 *
 * The canonical #request textarea is the sole editable PPB continuation
 * authority. The provisional #ppb-composer wrapper is retired.
 * Conversation history, WFV workflow interaction, review, approval,
 * and continuation remain owned by the Primary Prompt Box.
 */

/*
 * WFV_REQUEST_VISUAL_AFFORDANCE_V1
 *
 * Restore a clearly discernible chat/input box around the single canonical
 * #request textarea without restoring the retired ppb-composer wrapper.
 *
 * This is visual treatment only:
 * - no new input authority;
 * - no DOM relocation;
 * - no workflow ownership change;
 * - no Review / Approve ownership change.
 */

#primary-prompt-surface #request {
  display: block;
  width: 100%;
  box-sizing: border-box;

  min-height: 88px;
  max-height: 180px;

  margin: 14px 0 10px 0;
  padding: 14px 16px;

  border: 1px solid rgba(74, 110, 155, 0.72);
  border-radius: 8px;

  background: #ffffff;
  color: #172033;

  font: inherit;
  line-height: 1.45;

  resize: vertical;
  overflow-y: auto;

  outline: none;
}

#primary-prompt-surface #request::placeholder {
  color: rgba(44, 63, 88, 0.62);
  opacity: 1;
}

#primary-prompt-surface #request:focus {
  border-color: rgba(47, 112, 220, 0.95);
  box-shadow: 0 0 0 2px rgba(47, 112, 220, 0.14);
}

/*
 * WFV_CONVERSATION_ROLE_CONTRAST_V1
 *
 * Make USER and Workflow Valet turns distinguishable even when the
 * identity icon is outside the reader's immediate focus.
 *
 * Visual treatment only. No DOM, lifecycle, workflow, or runtime change.
 */

#primary-prompt-surface .conversation-turn--user .conversation-turn-body {
  background: #e8eef8;
  border: 1px solid rgba(74, 96, 132, 0.34);
  border-radius: 8px;
}

#primary-prompt-surface .conversation-turn--wfv .conversation-turn-body {
  background: #f7f9fc;
  border-left: 3px solid rgba(35, 105, 180, 0.82);
  border-radius: 0 7px 7px 0;
}

#primary-prompt-surface .conversation-turn--user {
  font-weight: 500;
}

#primary-prompt-surface .conversation-turn--wfv {
  font-weight: 400;
}


/* ============================================================
   WFV_PHASE3_FINAL_PPB_PRESENTATION_CLEANUP_V1

   Final Phase 3 conversation-first presentation correction.

   Scope:
   - preserve the subordinate file-selection capability;
   - enforce its hidden presentation contract;
   - remove legacy nested-card styling from USER/WFV turns;
   - preserve avatars, speaker identity, PPB structure, Review,
     approval, execution, Runtime V2, and all workflow authority.

   Presentation only.
   ============================================================ */

/*
 * A subordinate capability that JavaScript marks hidden must remain
 * visually hidden. This does not remove or disable the capability.
 */
#continue-selection[hidden] {
  display: none !important;
}

/*
 * USER correspondence belongs directly to the PPB conversation.
 * Do not render each user turn as another nested input/card.
 */
#primary-prompt-surface
.conversation-turn--user
.conversation-turn-body {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/*
 * Workflow Valet correspondence belongs directly to the same PPB.
 * Retire the historical vertical rail / response-card treatment.
 */
#primary-prompt-surface
.conversation-turn--wfv
.conversation-turn-body {
  background: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   WFV_OPTIONAL_RELATED_RESOURCE_PPB_PRESENTATION_V1

   Subordinate "I also found these" capability pocket.
   Kept visually inside the PPB workflow surface.
   Never styled as required-selection / decision state.
   ========================================================= */

.optional-resource-recommendations {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--wfv-border);
  border-radius: var(--wfv-radius-small);
  background: var(--wfv-surface-subtle);
}

.optional-resource-recommendations h3 {
  margin: 0;
}

.optional-resource-recommendations-help {
  margin: 0;
  color: var(--wfv-text-muted);
}

.optional-resource-recommendation-choices {
  display: grid;
  gap: 8px;
}

.optional-resource-recommendation-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--wfv-border);
  border-radius: var(--wfv-radius-small);
  background: var(--wfv-surface);
  cursor: pointer;
}

.optional-resource-recommendation-choice input {
  flex: 0 0 auto;
  margin-top: 3px;
}

.optional-resource-recommendation-actions {
  display: flex;
  justify-content: flex-end;
}