/* @Ownership(team = ProductTeam.NS_AI_PRODUCT_ENGINEERING_BRNO_A) */
/* One vertical sequence. Only the current task expands. */
.header { max-width:1040px; height:78px; }
main { max-width:1040px; padding:max(32px,calc(50svh - 330px)) 28px 50svh; min-height:calc(100svh - 140px); }
.workflow { max-width:740px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.flow-step { border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:17px 23px; min-width:0; transition:background 180ms,border-color 180ms; scroll-margin:24px; }
.flow-header { display:flex; align-items:center; gap:14px; min-width:0; }
.flow-marker { width:28px; height:28px; border:1px solid var(--line-strong); border-radius:50%; display:grid; place-items:center; flex-shrink:0; color:var(--muted); font-size:11px; font-weight:550; }
.flow-heading { min-width:0; flex:1; }
.flow-heading h2 { font-size:14px; font-weight:550; line-height:1.4; letter-spacing:-.15px; color:var(--muted); }
.flow-heading h2:focus { outline:none; }
.flow-summary { font-size:11px; color:var(--muted); margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.flow-status { font-size:10px; color:var(--muted); flex-shrink:0; }
.flow-edit { min-height:44px; padding:8px 0 8px 10px; font-size:11px; flex-shrink:0; }
.flow-step.is-active { background:var(--white); border:1.5px solid var(--brand); padding:28px 30px; }
.is-active>.flow-header { flex-direction:column; gap:12px; text-align:center; margin-bottom:23px; }
.is-active>.flow-header .flow-marker { width:30px; height:30px; color:var(--white); background:var(--brand); border-color:var(--brand); font-size:12px; }
.is-active>.flow-header .flow-heading { width:100%; }
.is-active>.flow-header h2 { font-size:26px; font-weight:620; letter-spacing:-.6px; line-height:1.2; color:var(--ink); }
.is-active>.flow-header .flow-summary { font-size:13px; white-space:normal; text-wrap:pretty; line-height:1.65; margin:10px auto 0; max-width:55ch; }
.is-active>.flow-header .flow-status { display:none; }
.is-complete .flow-marker { background:oklch(.95 .018 170); border-color:transparent; color:var(--success); font-size:14px; }
.is-complete .flow-status { display:none; }
.is-complete .flow-heading h2 { color:var(--muted); }
.is-upcoming { background:var(--surface); }
.step-content { min-width:0; }
.step-actions { display:flex; justify-content:center; }
.step-actions:has(>button[hidden]) { display:none; }
.step-body .upload-workspace { border:0; border-radius:0; padding:0; }
.document-drop { min-height:240px; padding:24px 16px; background:var(--surface); }
.document-symbol { width:45px; height:53px; margin-bottom:17px; }
.document-symbol>svg { width:40px; height:47px; }
.document-symbol>span { width:25px; height:25px; }
.document-drop h2 { font-size:16px; font-weight:550; }
.document-drop p { font-size:12px; }
.document-drop .primary,.document-drop .secondary { margin-top:19px; }
.document-drop .file-limit { display:none; }
.supported-formats { min-height:47px; font-size:10px; gap:18px; padding:12px 0; }
.sample-button { font-size:11px; margin:0 auto; padding:8px; }
#keep-document { margin:8px 0 12px; }
.signature-workspace { border:0; border-radius:0; overflow:visible; }
.tabs { padding:0 12px; gap:24px; justify-content:center; border-radius:6px 6px 0 0; }
.tabs button { padding:14px 0; font-size:12px; }
.method-panel { padding:18px 0; }
.method-heading { margin-bottom:11px; }
.drawing-wrap { height:190px; }
#drawing-hint { top:68px; font-size:15px; }
.signature-baseline { bottom:43px; }
.draw-options { margin-top:13px; }
.signature-actions { border:0; padding:5px 0 0; justify-content:center; }
#back-to-document { display:none; }
.signature-actions>.primary { min-width:190px; }
.signature-drop,.camera-intro { min-height:250px; }
.signature-cleanup { padding:18px 0; }
.signature-cleanup .checkerboard { height:155px; }
.cleanup-controls { margin-top:14px; }
.editor-layout { display:flex; flex-direction:column; border:0; border-radius:0; overflow:visible; }
.editor-tools { padding:16px 0 0; margin-top:16px; display:grid; grid-template-columns:90px minmax(0,1fr); gap:0 22px; border-top:1px solid var(--line); }
.tool-section h2,.tool-section>.text-button,.tool-hint,.start-over { display:none; }
.tool-section+.tool-section { border:0; margin:0; padding:0; }
.stamp-preview { height:55px; margin:0; padding:8px; }
.tool-section#placement-tools { display:grid; grid-template-columns:minmax(100px,1fr) auto; column-gap:20px; align-items:center; }
.tool-label { grid-column:1; margin:0; font-size:11px; }
#signature-size { grid-column:1; margin:0; }
.placement-actions { grid-column:2; grid-row:1/3; margin:0; gap:7px; }
.format-note { grid-column:1/-1; margin-top:12px; font-size:10px; }
.document-area { border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.document-toolbar { min-height:44px; padding:5px 13px; }
.page-scroll { padding:22px; max-height:min(52svh,460px); }
.page-surface { width:min(100%,calc(min(42svh,410px) * var(--page-ratio,.707))); max-width:none; }
.document-area.is-zoomed .page-surface { width:100%; max-width:640px; }
.zoom-button svg { width:16px; height:16px; }
.zoom-button[aria-pressed=true] { color:var(--brand); background:var(--brand-soft); }
.placement-continue { margin-top:20px; }
.placement-continue .primary { min-width:220px; }
.final-document { margin:0; border-radius:7px; max-height:50svh; overflow:auto; overscroll-behavior:contain; padding-bottom:20px; }
.final-toolbar { position:sticky; top:0; z-index:1; min-height:44px; padding:5px 13px; margin-bottom:20px; }
#final-canvas { max-width:none; width:min(calc(100% - 44px),calc(min(38svh,410px) * var(--page-ratio,.707))); }
.final-document.is-zoomed #final-canvas { width:calc(100% - 44px); max-width:640px; }
.complete-actions { margin-top:22px; display:flex; flex-direction:column; align-items:center; gap:11px; }
.complete-actions>.primary { min-width:220px; }
.download-details { margin:0; max-width:100%; font-size:10px; text-align:center; }
.complete-actions .text-button { padding:5px; font-size:11px; }
.sign-another { margin:10px auto 0; font-size:11px; }
.loading { width:100%; min-height:260px; }
.notice { margin-top:0; max-width:740px; }
@media(max-width:760px) {
  .header { height:72px; padding:0 24px; }
  main { padding-right:20px; padding-left:20px; }
  .flow-step { padding:15px 20px; }
  .flow-step.is-active { padding:26px 24px; }
  .flow-status { font-size:10px; }
}
@media(max-width:550px) {
  .header { height:72px; padding:0 20px; }
  main { padding-top:max(28px,calc(50svh - 330px)); padding-right:14px; padding-left:14px; }
  .workflow { gap:10px; }
  .flow-step { padding:13px 15px; }
  .flow-header { gap:11px; }
  .flow-marker { width:25px; height:25px; font-size:10px; }
  .flow-heading h2 { font-size:12px; }
  .flow-summary { font-size:10px; line-height:1.55; }
  .flow-status { display:none; }
  .flow-edit { font-size:10px; padding-left:5px; }
  .flow-step.is-active { padding:23px 16px; }
  .is-active>.flow-header { margin-bottom:20px; gap:11px; }
  .is-active>.flow-header h2 { font-size:23px; letter-spacing:-.45px; }
  .is-active>.flow-header .flow-summary { font-size:11px; max-width:34ch; margin-top:8px; }
  .document-drop { min-height:235px; padding:24px 12px; }
  .document-drop h2 { font-size:15px; }
  .supported-formats { gap:13px; font-size:9px; min-height:45px; }
  .sample-button { font-size:10px; gap:4px; }
  .tabs { gap:20px; padding:0 7px; }
  .tabs button { font-size:11px; gap:5px; min-height:48px; padding:12px 0; }
  .method-panel { padding:16px 0; }
  .method-heading p { font-size:10px; }
  .drawing-wrap { height:200px; }
  #drawing-hint { top:74px; font-size:14px; }
  .signature-actions { padding-top:5px; }
  .signature-actions>.primary { font-size:12px; }
  .signature-drop,.camera-intro { min-height:250px; padding:20px 12px; }
  .signature-drop strong,.camera-intro strong { font-size:12px; }
  .signature-drop p,.camera-intro p { font-size:11px; }
  .signature-cleanup { padding:16px 0; }
  .cleanup-heading strong { font-size:12px; }
  .cleanup-controls label { font-size:11px; }
  .editor-tools { grid-template-columns:60px minmax(0,1fr); gap:0 12px; padding-top:14px; margin-top:14px; }
  .stamp-preview { height:49px; padding:6px; }
  .tool-section#placement-tools { column-gap:8px; grid-template-columns:minmax(70px,1fr) auto; }
  .tool-label { font-size:10px; }
  .tool-label output { font-size:9px; }
  .placement-actions { gap:0; }
  .placement-actions .small { font-size:9px; min-height:40px; padding:8px; }
  .placement-actions .icon-button { min-width:32px; min-height:40px; }
  .format-note { font-size:9px; margin-top:10px; }
  .page-scroll { padding:18px 12px; max-height:48svh; }
  .document-toolbar { padding:5px 7px; }
  .document-toolbar>span { font-size:10px; }
  .page-controls select { font-size:10px; }
  .page-controls button { min-width:27px; min-height:34px; }
  .placement-continue { margin-top:18px; }
  .placement-continue .primary,.complete-actions>.primary { font-size:12px; min-width:210px; }
  .final-document { max-height:48svh; padding-bottom:15px; }
  .final-toolbar { margin-bottom:15px; padding:5px 9px; }
  #final-canvas { width:min(calc(100% - 26px),calc(38svh * var(--page-ratio,.707))); }
  .final-document.is-zoomed #final-canvas { width:calc(100% - 26px); }
  .complete-actions { margin-top:20px; }
  .download-details { font-size:9px; }
  .loading { min-height:245px; }
}
@media(prefers-reduced-motion:reduce) { .flow-step { transition:none; } }
.office-warning { margin:0 0 14px; padding:10px 13px; border:1px solid oklch(.86 .07 85); border-radius:7px; background:oklch(.97 .03 90); color:oklch(.42 .08 70); font-size:12px; line-height:1.55; }