/* Shared workflow presentation. Domain renderers own fields, stages and actions. */
#view[data-workflow] { --workspace-accent: var(--navigation-accent); min-width: 0; }
#view[data-workflow-tone="rose"] { --workspace-accent: #bd3869; }
#view[data-workflow-tone="emerald"] { --workspace-accent: #158069; }
#view[data-workflow-tone="lime"] { --workspace-accent: #248748; }
#view[data-workflow-tone="violet"] { --workspace-accent: #7654d8; }
#view[data-workflow-tone="orange"] { --workspace-accent: #b46321; }
#view[data-workflow-tone="cyan"] { --workspace-accent: #087b8b; }
[data-theme="dark"] #view[data-workflow-tone="rose"] { --workspace-accent: #f7a2be; }
[data-theme="dark"] #view[data-workflow-tone="emerald"] { --workspace-accent: #8addbc; }
[data-theme="dark"] #view[data-workflow-tone="lime"] { --workspace-accent: #abe3a0; }
[data-theme="dark"] #view[data-workflow-tone="violet"] { --workspace-accent: #c1b2f5; }
[data-theme="dark"] #view[data-workflow-tone="orange"] { --workspace-accent: #ebc777; }
[data-theme="dark"] #view[data-workflow-tone="cyan"] { --workspace-accent: #8bd5e9; }

#view .workflow-heading { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px 12px; align-items: center; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
#view .workflow-back {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
}
#view .workflow-back svg { width: 20px; height: 20px; }
#view .workflow-back:hover { border-color: var(--navigation-accent); background: var(--strong); }
#view .workflow-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
#view .workflow-identity > div { min-width: 0; }
#view .workflow-heading-icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 44px; border: 1px solid var(--line2); border-radius: 6px; background: var(--panel); color: var(--workspace-accent); }
#view .workflow-heading-icon svg { width: 24px; height: 24px; }
#view .workflow-heading h1 { margin: 0; font-size: 24px; line-height: 1.4; letter-spacing: 0; overflow-wrap: anywhere; }
#view .workflow-heading .eyebrow { margin: 0 0 2px; font-size: 12px; color: var(--workspace-accent); letter-spacing: 0; }
#view .workflow-description { grid-column: 2; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

#view[data-workflow] .flow-steps {
  display: grid;
  grid-template-columns: repeat(var(--workflow-step-count, 3), minmax(0, 1fr));
  gap: 0;
  margin: 0 0 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
#view[data-workflow] .flow-steps > li {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  gap: 2px 10px;
  padding: 10px 10px 12px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  min-width: 0;
}
#view[data-workflow] .flow-steps > li.active { color: var(--ink); border-bottom: 2px solid var(--workspace-accent); padding-bottom: 10px; background: color-mix(in srgb, var(--workspace-accent) 5%, var(--panel)); }
#view[data-workflow] .source-flow-steps > li { display: block; padding: 0; }
#view[data-workflow] .source-flow-steps > li.active { padding: 0; }
#view[data-workflow] .source-flow-steps > li > button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 10px;
  align-content: center;
  width: 100%;
  min-height: 64px;
  padding: 10px;
  color: inherit;
  border-radius: 6px 6px 0 0;
}
#view[data-workflow] .flow-steps :is(li > span, li > button > span) {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  align-self: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line2);
  border-radius: 50%;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#view[data-workflow] .flow-steps li.active > span,
#view[data-workflow] .flow-steps li.active > button > span { border-color: var(--workspace-accent); background: var(--workspace-accent); color: #fff; }
[data-theme="dark"] #view[data-workflow] .flow-steps li.active > span,
[data-theme="dark"] #view[data-workflow] .flow-steps li.active > button > span { color: #142323; }
#view[data-workflow] .flow-steps li.complete > span,
#view[data-workflow] .flow-steps li.complete > button > span { border-color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--panel)); color: var(--success); }
#view[data-workflow] .flow-steps b { align-self: end; font-size: 14px; line-height: 1.4; letter-spacing: 0; overflow-wrap: anywhere; }
#view[data-workflow] .flow-steps small { grid-column: 2; font-size: 11px; line-height: 1.5; color: var(--muted); }

#view[data-workflow] .workspace { display: block; min-width: 0; max-width: 1060px; margin-inline: auto; }
#view[data-workflow] .workspace-form {
  min-width: 0;
  max-width: 900px;
  margin-inline: auto;
  padding: 20px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--workspace-accent);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: none;
}
#view[data-workflow="ai-detail-page-designer"] .workspace-form { max-width: none; }
#view[data-workflow] .workflow-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#view[data-workflow] .workflow-fields > :is(.field-wide, .workflow-materials, .source-detail-input-layout) { grid-column: 1 / -1; }
#view[data-workflow] .workspace-form .textarea { min-height: 104px; background: var(--field-surface); line-height: 1.75; }
#view[data-workflow] .workspace-form .form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  position: static;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#view[data-workflow] .cost { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
#view[data-workflow] .cost b { font-size: 18px; font-variant-numeric: tabular-nums; }
#view[data-workflow] #resultPanel:has(> .result-empty) { display: none; }
#view[data-workflow] .workspace-result { max-width: 100%; min-width: 0; margin: 24px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#view[data-workflow] .source-active-workspace .workspace-result { margin-top: 0; }
#view .source-input-summary { margin: 0 0 18px; border-block: 1px solid var(--line); background: transparent; }
#view .source-input-summary .workspace-form { max-width: none; border: 0; background: transparent; }
#view .source-plan-editor { min-width: 0; max-width: 100%; margin: 18px 0; }
#view .source-plan-editor :is(h3, legend) { font-size: 19px; line-height: 1.5; }
#view .source-plan-editor .field { gap: 8px; }
#view .source-plan-editor textarea { background: var(--panel); line-height: 1.75; }
#view .source-section-heading { gap: 10px; flex-wrap: wrap; padding: 6px 0 6px 10px; border-left: 2px solid var(--workspace-accent); }
#view .source-section-heading h3 { font-size: 19px; line-height: 1.5; }
#view .result-toolbar { gap: 12px; padding: 12px 14px; margin-bottom: 16px; border-left: 2px solid var(--workspace-accent, var(--section-green)); background: var(--panel); }
#view .result-toolbar > div { min-width: 0; }
#view .result-toolbar b { font-size: 17px; color: var(--ink); overflow-wrap: anywhere; }
#view .result-toolbar small { font-size: 12px; }
#view .source-confirmation { padding: 18px; background: var(--panel); border-block: 1px solid var(--line); }
#view .source-confirmation > div:last-child { border: 0; padding: 0; }
#view .source-confirmation dd { font-size: 15px; line-height: 1.75; }
#view .source-step-actions { gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
#view .source-step-actions > .primary:last-child { margin-left: auto; }
#view :is(.source-talking-actions, .source-publish-actions, .source-book-export-options) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#view :is(.source-talking-actions, .source-publish-actions, .source-book-export-options) > .button { min-width: 0; width: 100%; }
#view .source-book-ai-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#view .source-book-ai-actions > :is([data-book-draft], [data-book-undo]) { grid-column: 1 / -1; }
#view .source-book-ai-actions > .text-button { padding-inline: 6px; }
#view .source-book-versions > .text-button { display: flex; width: 100%; justify-content: flex-start; margin-top: 8px; text-align: left; }
#view .source-title-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
#view .source-title-choices > .button { justify-content: flex-start; text-align: left; }
#view .result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#view .result-actions > :is(.button, .text-button) { min-width: 0; width: 100%; }
#view .source-detail-cost { background: var(--soft); border-radius: 6px; }
#view :is(.source-ppt-page, .source-book-outline-row, .source-detail-plan-item) { background: var(--panel); border-radius: 8px; }
#view .source-ppt-template img { border-radius: 4px; }
#view .source-writing-format { flex-wrap: wrap; }
#view .source-ppt-viewer-toolbar { gap: 12px; flex-wrap: wrap; }
#view .source-ppt-viewer-toolbar > b { min-width: 0; overflow-wrap: anywhere; }
#view .source-poster-empty { min-height: 260px; border: 1px dashed var(--line2); background: transparent; }
#view .source-poster-empty b { font-size: 17px; }
#view .source-poster-empty p { font-size: 14px; }
#view .archived-project :is(img, video) { max-width: 100%; max-height: 70vh; object-fit: contain; }
#view .archived-project > figure { margin: 0 0 24px; }
#view .archived-project figcaption { padding-block: 14px; }
#view :is(.source-writing-gallery, .source-detail-image, .source-ppt-slide) figcaption { gap: 10px; }
#view :is(.source-writing-gallery, .source-detail-image, .source-ppt-slide) .image-save-hint { flex-basis: 100%; margin-top: 0; }
#view .source-poster-delivery > .image-save-hint { margin: 10px 0 18px; }
#view .source-cover-delivery > .image-save-hint { margin-bottom: 18px; }
#view .source-detail-long { margin-top: 16px; }

#view .workflow-materials { min-width: 0; margin-top: 0; padding-top: 16px; border-top: 1px solid var(--line); }
#view .workflow-materials > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#view .workflow-materials h2 { margin: 0; padding-left: 10px; border-left: 3px solid var(--workspace-accent); font-size: 15px; color: var(--ink); }
#view .workflow-materials > header > span { font-size: 12px; color: var(--muted); }
#view .workflow-reference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#view .source-upload-field { min-width: 0; }
#view .workspace-form .source-upload-field > .upload-zone,
#view .source-upload-field > .upload-zone {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
  padding: 14px;
  gap: 12px;
  border: 1px dashed var(--line2);
  border-radius: 6px;
  background: var(--soft);
  text-align: left;
  cursor: default;
}
#view .source-upload-field > .upload-zone.has-files { border-style: solid; border-color: var(--success); }
#view .workspace-form .source-upload-caption,
#view .source-upload-caption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; order: 0; text-align: left; }
#view .source-upload-caption b { font-size: 13px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
#view .source-upload-caption small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; line-height: 1.6; }
#view .source-upload-count { align-self: start; color: var(--muted); font-size: 11px; line-height: 1.9; white-space: nowrap; }
#view .has-files .source-upload-count { color: var(--success); }
#view .workspace-form .source-upload-actions,
#view .source-upload-actions { display: flex; flex-wrap: wrap; gap: 8px; order: 2; margin-top: auto; }
#view .source-upload-actions .button {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  min-height: 44px;
  padding: 8px;
  background: var(--panel);
  color: var(--navigation-accent);
  border: 1px solid var(--line2);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}
#view .source-upload-actions .button > span { white-space: nowrap; font-size: inherit; }
#view .source-upload-actions .button > svg { display: block; width: 17px; height: 17px; flex: none; }
#view .source-file-previews { order: 1; width: 100%; }
#view .workspace-form .source-file-preview,
#view .source-file-preview { display: grid; grid-template-columns: 48px minmax(0, 1fr) 44px; padding: 0 0 8px; gap: 8px; align-items: center; }
#view .workspace-form .source-file-preview > img,
#view .source-file-preview > img { grid-column: 1; width: 48px; height: 48px; object-fit: contain; background: var(--panel); }
#view .source-file-preview b { font-size: 12px; overflow-wrap: anywhere; }
#view .source-file-preview small { font-size: 11px; }
#view .workspace-form .source-file-preview > button { grid-column: 3; min-height: 44px; }

#view .resume-notice {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
  padding: 12px 0;
  border-block: 1px solid var(--line);
  border-left: 3px solid var(--navigation-accent);
  padding-left: 12px;
  background: transparent;
}
#view .resume-notice > div:first-child { display: grid; gap: 4px; min-width: 0; }
#view .resume-notice b { font-size: 13px; font-weight: 600; color: var(--ink); }
#view .resume-notice small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
#view .resume-actions { display: flex; align-items: center; flex: none; gap: 6px; }
#view .resume-actions :is(.button, .text-button) { min-height: 44px; padding: 8px 10px; font-size: 12px; }

@media (max-width: 1100px) {
  #view[data-workflow] .flow-steps > li,
  #view[data-workflow] .source-flow-steps > li > button { column-gap: 6px; padding-inline: 6px; }
}
@media (max-width: 820px) {
  #view[data-workflow] { padding-bottom: 12px; }
  #view[data-page="tool"][data-workspace-kind="workflow"] { padding-bottom: calc(var(--workflow-action-height, 90px) + 20px); }
  #view[data-workflow] :is(input, textarea, select, button, [contenteditable="true"]) {
    scroll-margin-top: calc(var(--shell-topbar-height, 64px) + var(--current-step-height, 0px) + 12px);
    scroll-margin-bottom: calc(var(--workflow-action-height, 90px) + 16px);
  }
  #view .workflow-heading { gap: 6px 9px; margin-bottom: 12px; padding-bottom: 10px; }
  #view .workflow-heading h1 { font-size: 21px; line-height: 1.4; }
  #view .workflow-heading-icon { flex-basis: 34px; width: 34px; height: 38px; }
  #view .workflow-heading-icon svg { width: 22px; height: 22px; }
  #view .workflow-identity { gap: 9px; }
  #view .workflow-description { grid-column: 1 / -1; font-size: 13px; }
  #view[data-workflow] .flow-steps { margin-bottom: 12px; }
  #view[data-workflow] .flow-steps > li,
  #view[data-workflow] .source-flow-steps > li > button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    min-height: 66px;
    padding: 8px 3px;
    text-align: center;
  }
  #view[data-workflow] .source-flow-steps > li,
  #view[data-workflow] .source-flow-steps > li.active { display: block; padding: 0; }
  #view[data-workflow] .flow-steps > li.active { padding-bottom: 6px; }
  #view[data-workflow] .flow-steps :is(li > span, li > button > span) { width: 24px; height: 24px; font-size: 11px; flex: none; }
  #view[data-workflow] .flow-steps b { max-width: 5em; align-self: auto; font-size: 12px; line-height: 1.5; }
  #view[data-workflow] .flow-steps small { display: none; }
  #view[data-workflow] .workspace-form { padding: 16px 14px; }
  #view[data-workflow] .workspace-form > .form-grid { gap: 16px; }
  #view[data-workflow] .source-input-summary .workspace-form { padding: 12px 0; }
  #view[data-page="tool"] .workspace-form > .form-actions {
    position: fixed;
    z-index: 24;
    left: 0;
    right: 0;
    bottom: var(--shell-nav-height, calc(var(--mobile-nav-height, 78px) + env(safe-area-inset-bottom)));
    margin: 0;
    padding: 12px 18px;
    min-height: 74px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: var(--panel);
    box-shadow: 0 -3px 12px color-mix(in srgb, var(--ink) 4%, transparent);
  }
  #view[data-page="tool"] .workspace-form > .form-actions > .button {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 11em;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
  }
  #view :is(.source-step-actions, .source-publish-actions, .source-book-export-options) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #view :is(.source-step-actions, .source-publish-actions, .source-book-export-options) > :is(.button, .text-button) { min-width: 0; width: 100%; margin-left: 0; font-size: 14px; }
  #view :is(.source-step-actions, .source-publish-actions, .source-book-export-options) > :last-child:nth-child(odd),
  #view .source-step-actions > small { grid-column: 1 / -1; }
  #view .result-actions > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  #view .resume-notice { flex-wrap: wrap; }
  #view .resume-actions { width: auto; }
}
.current-step { display: none; }
.current-step[hidden] { display: none !important; }
@media (max-width: 820px) {
  #view .current-step {
    position: fixed;
    z-index: 23;
    display: flex;
    align-items: center;
    gap: 4px 10px;
    flex-wrap: wrap;
    min-height: 44px;
    max-width: 100%;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--line2);
    border-radius: 0;
    background: var(--panel);
    color: var(--ink);
    text-align: left;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--ink) 6%, transparent);
    line-height: 1.5;
  }
  #view .current-step > span { font-size: .75rem; color: var(--muted); }
  #view .current-step > b { min-width: 0; flex: 1; font-size: .875rem; overflow-wrap: anywhere; }
  #view .current-step > svg { flex: none; width: 18px; height: 18px; }
}
@media (max-width: 600px) {
  #view[data-workflow] .workflow-fields { grid-template-columns: minmax(0, 1fr); }
  #view .workflow-reference-grid { grid-template-columns: minmax(0, 1fr); }
  #view .source-field-row { grid-template-columns: minmax(0, 1fr); }
  #view .source-section-heading h3 { font-size: 18px; }
  #view .result-toolbar { align-items: flex-start; gap: 10px; }
  #view .result-toolbar b { font-size: 16px; }
  #view .result-toolbar > .text-button { padding: 8px 10px; flex: none; }
  #view .source-talking-actions { grid-template-columns: minmax(0, 1fr); }
  #view .source-talking-actions > .button { justify-content: space-between; }
  #view .source-ppt-viewer-toolbar > b { flex-basis: 100%; }
  #view .source-writing-gallery { grid-template-columns: minmax(0, 1fr); }
  #view .source-cover-previews.dual { grid-template-columns: minmax(0, 1fr); }
  #view .source-cover-crop { max-width: 320px; margin-inline: auto; }
  #view .source-book-toolbar { gap: 4px; }
}
@media (min-width: 821px) {
  #view .result-actions:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) and (max-height: 520px) {
  #view[data-page="tool"] .workspace-form > .form-actions { position: static; margin-top: 24px; padding: 16px 0 0; box-shadow: none; }
}