.workflow { background: #f1f5fa; }
.workflow-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 36px; }
.workflow-intro .section-heading { margin: 0; }
.workflow-intro > p { max-width: 480px; margin: 0 0 5px; color: var(--muted); }
.workflow-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 18px 54px rgba(16,33,63,.07); overflow: hidden; }
.workflow-nav { padding: 28px 16px; background: #f8fafd; border-right: 1px solid var(--line); }
.workflow-nav-title { padding: 0 12px; margin: 0 0 20px; color: var(--muted); font-size: .75rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.workflow-nav ol { list-style: none; padding: 0; margin: 0; }
.workflow-nav li + li { margin-top: 5px; }
.workflow-nav a { display: flex; gap: 12px; align-items: center; padding: 12px; color: var(--ink); border-radius: 7px; text-decoration: none; font-size: .88rem; font-weight: 650; }
.workflow-nav a:hover { background: var(--blue-100); }
.workflow-nav a[aria-current="step"] { background: var(--navy-900); color: #fff; }
.workflow-number { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: #e8eef6; color: var(--navy-900); font-size: .76rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.workflow-nav a[aria-current="step"] .workflow-number { background: var(--amber); color: var(--navy-950); }
.workflow-nav small { display: block; margin-top: 2px; color: var(--muted); font-size: .74rem; font-weight: 400; }
.workflow-nav a[aria-current="step"] small { color: #d5e0f1; }
.workflow-nav-note { margin: 24px 12px 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.workflow-main { min-width: 0; padding: 28px 34px 20px; }
.workflow-context { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-bottom: 20px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .7rem; letter-spacing: .06em; }
.workflow-context span:first-child { color: var(--navy-900); font-weight: 750; }
.workflow-step { padding-top: 24px; scroll-margin-top: 92px; }
.workflow-step + .workflow-step { margin-top: 36px; border-top: 1px solid var(--line); }
.workflow.is-enhanced .workflow-step { margin-top: 0; border-top: 0; }
.workflow-step-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: .75rem; }
.workflow-step-top > span:last-child { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.workflow-role { color: var(--blue-700); font-weight: 700; }
.workflow-step h3 { margin: 13px 0 12px; color: var(--navy-950); font-size: clamp(1.35rem, 2.1vw, 1.85rem); line-height: 1.22; letter-spacing: -.025em; scroll-margin-top: 110px; }
.workflow-lead { margin: 0 0 24px; color: var(--muted); font-size: .94rem; line-height: 1.65; }
.workflow-scene { padding: 24px; border: 1px solid #d8e2ef; border-radius: 8px; background: #f8fafd; }
.workflow-scene-label { margin: 0 0 15px; color: var(--muted); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.workflow-scene h4 { margin: 0; color: var(--navy-900); font-size: 1.12rem; line-height: 1.4; }
.workflow-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin: 24px 0; }
.workflow-fields dt, .workflow-quantities dt { color: var(--muted); font-size: .75rem; margin-bottom: 4px; }
.workflow-fields dd, .workflow-quantities dd { margin: 0; color: var(--ink); font-weight: 650; }
.workflow-state { display: flex; align-items: center; gap: 9px; padding-top: 18px; border-top: 1px solid var(--line); color: #216149; font-size: .82rem; font-weight: 650; }
.workflow-dot { width: 7px; height: 7px; border-radius: 50%; background: #2e805e; }
.workflow-result { display: flex; gap: 14px; margin: 22px 0 0; color: var(--muted); font-size: .83rem; line-height: 1.65; }
.workflow-result > strong { flex: 0 0 75px; color: var(--navy-900); }
.workflow-tree-root { padding: 16px; text-align: center; background: var(--navy-900); color: #fff; border-radius: 6px; font-weight: 650; }
.workflow-branches { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 30px; }
.workflow-branches::before { content: ""; position: absolute; left: 50%; top: 0; height: 16px; border-left: 1px solid #a5b7ce; }
.workflow-branches > div { position: relative; padding: 16px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; text-align: center; }
.workflow-branches > div::before { content: ""; position: absolute; bottom: 100%; height: 16px; border-top: 1px solid #a5b7ce; }
.workflow-branches > div:first-child::before { left: 50%; right: -10px; border-left: 1px solid #a5b7ce; }
.workflow-branches > div:last-child::before { right: 50%; left: -10px; border-right: 1px solid #a5b7ce; }
.workflow-branches span, .workflow-branches small { display: block; color: var(--muted); font-size: .72rem; }
.workflow-branches strong { display: block; margin: 8px 0; font-size: .92rem; color: var(--navy-900); }
.workflow-scene-note { margin: 18px 0 0; color: var(--muted); font-size: .78rem; }
.workflow-assignments, .workflow-approval-lanes { list-style: none; margin: 0; padding: 0; }
.workflow-assignments li, .workflow-approval-lanes li { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.workflow-assignments li + li, .workflow-approval-lanes li + li { border-top: 1px solid var(--line); }
.workflow-avatar { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 7px; background: #e8eef6; color: var(--navy-900); font-size: .7rem; font-weight: 750; }
.workflow-assignments li > span:nth-child(2), .workflow-approval-lanes li > span:nth-child(2) { flex: 1; min-width: 0; }
.workflow-assignments strong, .workflow-approval-lanes strong { display: block; font-size: .87rem; }
.workflow-assignments small, .workflow-approval-lanes small { display: block; color: var(--muted); font-size: .73rem; margin-top: 3px; }
.workflow-tag { display: inline-block; padding: 4px 8px; border-radius: 4px; color: var(--navy-900); background: #e6edf7; font-size: .68rem; font-weight: 650; text-align: center; }
.workflow-tag-wait { color: #79561a; background: #fff0ce; }
.workflow-tag-done { color: #216149; background: #e0f2e9; }
.workflow-table-wrap { overflow-x: auto; }
.workflow-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .83rem; }
.workflow-table th { padding: 10px 8px; color: var(--muted); font-size: .7rem; font-weight: 500; border-bottom: 1px solid var(--line); }
.workflow-table td { padding: 16px 8px; border-bottom: 1px solid var(--line); }
.workflow-table th:first-child, .workflow-table td:first-child { padding-left: 0; }
.workflow-table th:last-child, .workflow-table td:last-child { padding-right: 0; }
.workflow-table th:not(:first-child), .workflow-table td:not(:first-child) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.workflow-table td small { display: block; color: var(--muted); font-size: .73rem; margin-top: 3px; }
.workflow-total { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding-top: 20px; color: var(--navy-900); }
.workflow-total span { max-width: 230px; font-size: .8rem; }
.workflow-total strong { font-size: clamp(1rem, 1.8vw, 1.4rem); white-space: nowrap; font-variant-numeric: tabular-nums; }
.workflow-document-heading { display: flex; justify-content: space-between; align-items: start; gap: 14px; }
.workflow-document-heading .workflow-scene-label { margin-bottom: 6px; }
.workflow-document-heading > .workflow-tag { flex-shrink: 0; }
.workflow-period { margin: 10px 0 20px; color: var(--muted); font-size: .76rem; }
.workflow-calculation { padding: 16px; border-left: 3px solid var(--amber); background: #fff; }
.workflow-calculation span { display: block; color: var(--muted); font-size: .73rem; }
.workflow-calculation strong { display: block; margin-top: 7px; color: var(--navy-900); font-size: .98rem; font-variant-numeric: tabular-nums; }
.workflow-quantities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0; }
.workflow-quantities dd { font-size: .92rem; font-variant-numeric: tabular-nums; }
.workflow-sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .73rem; }
.workflow-review-start { padding: 12px; margin-bottom: 18px; background: #e8eef6; color: var(--navy-900); font-size: .9rem; font-weight: 650; text-align: center; border-radius: 5px; }
.workflow-review-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.workflow-review-paths h4 { margin-top: 12px; font-size: .96rem; }
.workflow-review-paths p { margin: 8px 0 0; color: var(--muted); font-size: .8rem; }
.workflow-review-paths a { display: inline-block; margin-top: 12px; color: var(--blue-700); font-size: .78rem; }
.workflow-contribution { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.workflow-contribution small { display: block; margin-top: 4px; color: var(--muted); font-size: .76rem; }
.workflow-contribution > strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.workflow-checklist { padding: 16px 0 0 20px; margin: 20px 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .79rem; }
.workflow-checklist li + li { margin-top: 7px; }
.workflow-approval-lanes li.is-current .workflow-number { background: var(--navy-900); color: #fff; }
.workflow-approval-lanes li.is-complete .workflow-number { background: #e0f2e9; color: #216149; }
.workflow-approval-demo { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 12px; }
.workflow-approval-demo p { color: var(--navy-900); font-size: .85rem; }
.workflow-approval-demo small { display: block; margin-top: 9px; color: var(--muted); font-size: .7rem; }
.workflow-document { background: #fff; box-shadow: 0 8px 24px rgba(16,33,63,.05); }
.workflow-document-parts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.workflow-document-parts span { padding: 5px 8px; background: var(--soft); border-radius: 3px; color: var(--muted); font-size: .7rem; }
.workflow-recording, .workflow-extra { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.workflow-recording summary, .workflow-extra summary { cursor: pointer; color: var(--blue-700); font-size: .83rem; font-weight: 650; padding: 7px 0; }
.workflow-recording p, .workflow-extra p { color: var(--muted); font-size: .79rem; margin: 8px 0 16px; }
.workflow-recording video { display: block; width: 100%; aspect-ratio: 16/9; background: #e9eff6; border-radius: 6px; }
.workflow-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); margin-top: 28px; padding-top: 20px; }
.workflow-primary, .workflow-secondary { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 10px 15px; border-radius: 5px; font-size: .82rem; font-weight: 650; cursor: pointer; }
.workflow-primary { background: var(--navy-900); color: #fff; border: 1px solid var(--navy-900); }
.workflow-primary:hover { background: var(--navy-800); }
.workflow-secondary { background: #fff; color: var(--navy-900); border: 1px solid #c9d5e5; }
.workflow-secondary:hover:not(:disabled) { background: var(--blue-100); }
.workflow-secondary:disabled { color: #7a8797; border-color: #e2e7ee; cursor: default; }
.workflow-counter { color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; }
.workflow-disclaimer { margin: 18px 0 0; color: var(--muted); font-size: .69rem; }
.workflow-mobile { margin-bottom: 20px; }
.workflow-mobile label { display: block; margin-bottom: 7px; color: var(--muted); font-size: .77rem; }
.workflow-mobile select { width: 100%; min-height: 46px; padding: 9px; border: 1px solid #c9d5e5; border-radius: 5px; color: var(--navy-900); background: #fff; font-size: 16px; }
.workflow a:focus-visible, .workflow button:focus-visible, .workflow select:focus-visible, .workflow summary:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 4px; }
@media (min-width: 821px) { .workflow-mobile { display: none; } }
@media (max-width: 1000px) { .workflow-shell { grid-template-columns: 240px minmax(0, 1fr); } .workflow-main { padding: 24px; } .workflow-nav { padding: 24px 10px; } }
@media (max-width: 820px) {
  .workflow-intro { grid-template-columns: 1fr; gap: 20px; }
  .workflow-intro > p { max-width: none; }
  .workflow-shell { grid-template-columns: 1fr; }
  .workflow.is-enhanced .workflow-nav { display: none; }
  .workflow-nav { border-right: 0; border-bottom: 1px solid var(--line); }
  .workflow-nav ol { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .workflow-main { padding: 20px 16px; }
  .workflow-scene { padding: 18px 14px; }
  .workflow-context { font-size: .65rem; }
  .workflow-fields { gap: 18px 12px; }
  .workflow-fields dd { font-size: .86rem; }
  .workflow-branches { gap: 12px; }
  .workflow-branches > div { padding: 14px 8px; }
  .workflow-branches strong { font-size: .85rem; }
  .workflow-assignments li, .workflow-approval-lanes li { flex-wrap: wrap; gap: 8px; }
  .workflow-assignments li > span:nth-child(2), .workflow-approval-lanes li > span:nth-child(2) { flex-basis: calc(100% - 44px); }
  .workflow-assignments li > .workflow-tag, .workflow-approval-lanes li > .workflow-tag { margin-left: 42px; }
  .workflow-result { display: block; }
  .workflow-result > strong { display: block; margin-bottom: 4px; }
  .workflow-total { align-items: start; flex-direction: column; gap: 5px; }
  .workflow-total span { max-width: none; }
  .workflow-review-paths { grid-template-columns: 1fr; }
  .workflow-review-paths > div + div { padding-top: 18px; border-top: 1px solid var(--line); }
  .workflow-contribution { align-items: start; flex-direction: column; gap: 5px; }
  .workflow-calculation { padding: 12px; }
  .workflow-calculation strong { font-size: .87rem; }
  .workflow-quantities { gap: 8px; }
  .workflow-quantities dd { font-size: .8rem; }
  .workflow-quantities dt { font-size: .68rem; }
  .workflow-document-heading { flex-direction: column; gap: 8px; }
  .workflow-controls { flex-wrap: wrap; }
  .workflow-counter { order: -1; width: 100%; text-align: center; }
  .workflow-controls button { flex: 1; padding: 10px 8px; }
  .workflow-approval-demo button { width: 100%; }
  .workflow-nav ol { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }