/* V6: three stages, a readable article canvas, and contextual tools. */
:root { --sans: "Segoe UI", Arial, sans-serif; --paper: #fff; --orange: #a74c34; --orange-dark: #863c29; --focus: #166f7c; }
body { background: #f2f5f4; font-family: var(--sans); }
button, input, textarea, select { font-family: var(--sans); }
button, summary, input, textarea, select { touch-action: manipulation; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid #25848d; outline-offset: 3px; }
button:disabled { cursor: not-allowed; }
summary { cursor: pointer; }
select { max-width: 100%; }
.button { min-height: 43px; border-radius: 12px; font-size: 13px; line-height: 1.35; }
.button--primary { box-shadow: 0 3px 10px #a74c3421; }
.eyebrow { font-size: 10px; letter-spacing: .09em; line-height: 1.5; }
.topbar { display: flex; height: 76px; gap: 20px; padding: 0 24px; background: rgba(19,38,45,.97); backdrop-filter: blur(16px); }
.brand-lockup { flex-shrink: 0; }
.brand-lockup strong { max-width: 245px; font: 650 17px/1.3 var(--sans); }
.brand-lockup > div span { font-size: 9px; }
.brand-lockup .logo-tile { width: 65px; height: 43px; border-radius: 9px; }
.brand-divider { height: 28px; }
.topnav { margin-left: auto; flex-shrink: 0; }
.top-actions { margin-left: auto; gap: 12px; }
.connection-badge { display: none; }
.top-story-status { position: relative; }
.top-story-status summary { list-style: none; }
.top-story-status summary::after { content: "⌄"; margin-left: 7px; color: #c7d5d8; }
.status-pill { font-size: 10px; letter-spacing: .035em; padding: 7px 11px; }
.status-pill[data-status="draft"] { color: #716029; background: #fcf1cc; }
.status-pill[data-status="approved"] { color: #216146; background: #e0f3e8; }
.status-popover { position: absolute; width: 280px; right: 0; top: calc(100% + 16px); z-index: 40; padding: 20px; border: 1px solid #d4dfdf; border-radius: 16px; color: var(--ink); background: white; box-shadow: 0 12px 45px #122d4026; font-size: 13px; }
.status-popover label { display: block; font-weight: 650; margin-bottom: 9px; }
.status-popover select { width: 100%; min-height: 42px; padding: 8px; border: 1px solid #b4c8cc; border-radius: 8px; background: white; }
.status-popover p { color: #546970; line-height: 1.5; }
#wordpressHeaderStatus { color: #1d6c4c; font-weight: 600; }
.profile-button { cursor: pointer; }
.workspace-view { height: calc(100dvh - 76px); grid-template-columns: 360px minmax(0,1fr); }
.queue-column { background: #fff; }
.panel-heading { padding: 24px 22px 18px; }
.panel-heading .eyebrow { display: none; }
.queue-tools { padding-inline: 22px; }
.story-list { padding: 5px 14px 18px; }
.story-card { border-radius: 14px; padding: 18px; background: #fff; }
.story-card h3 { font: 650 16px/1.45 var(--sans); margin: 14px 0; }
.story-card small { font-size: 11px; color: #5b6d74; }
.story-card-publication { font-size: 10px !important; line-height: 1.5; }
.story-toolbar { min-height: 66px; flex-shrink: 0; padding: 10px 26px; gap: 20px; background: #fff; }
.story-identity { flex: 1; gap: 4px; }
#saveState { color: #4d6863; font-size: 11px; max-width: 390px; line-height: 1.4; }
.story-header-metrics { display: flex; align-items: center; gap: 22px; }
.story-header-metrics > span { border: 0; padding: 0; min-width: 0; }
.story-header-metrics small { font: 500 10px/1.4 var(--sans); text-transform: none; letter-spacing: 0; color: #607176; }
.story-header-metrics strong { font-size: 15px; font-weight: 650; }
.metric-details { position: relative; color: #5b7077; font-size: 11px; }
.metric-details > div { position: absolute; z-index: 22; top: 28px; right: 0; width: 250px; padding: 18px; border: 1px solid #d6e0df; background: #fff; border-radius: 12px; box-shadow: 0 10px 24px #13262d1a; }
.metric-details p { font-size: 13px; }
.metric-details strong { font-size: 13px; }
.metric-details small { line-height: 1.6; }
.quick-model { position: relative; font-size: 12px; }
.quick-model > summary { padding: 10px 13px; border: 1px solid #d6e0df; background: #f6f9f8; border-radius: 10px; font-weight: 600; }
.quick-model-panel { position: absolute; z-index: 22; top: calc(100% + 8px); right: 0; width: 310px; padding: 22px; border: 1px solid #d6e0df; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px #13262d24; }
.quick-model-panel label, #generationModelControls label { display: grid; gap: 7px; margin-bottom: 14px; font-size: 12px; font-weight: 600; }
.quick-model-panel select { min-height: 43px; width: 100%; padding: 10px; background: #fff; border: 1px solid #bbcbce; border-radius: 9px; }
.quick-model-panel p { font-size: 11px; color: #5b7077; line-height: 1.6; }
.step-banner { flex-shrink: 0; padding: 18px 28px; min-height: auto; background: #f7f9f8; border-bottom: 1px solid #dde6e4; }
.step-banner h2 { margin: 1px 0 4px; font: 650 27px/1.2 var(--sans); letter-spacing: -.035em; color: #1c3f31; }
.step-banner .eyebrow { color: #567464; }
.step-banner p { margin: 0; color: #5b7077; font-size: 12px; line-height: 1.5; }
.response-preference { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 280px; font-size: 11px; }
.response-preference label { color: #5b7077; }
.response-preference select { padding: 9px; border: 1px solid #d2dfdc; background: white; border-radius: 9px; }
#speechStatus { font-size: 11px; }
.story-workbench { --story-menu-width: 190px; grid-template-columns: var(--story-menu-width) 5px minmax(0,1fr); }
.story-menu { padding: 20px 12px; background: #f7f9f8; color: #253e48; border-right: 0; overflow-y: auto; }
.story-menu-divider { background: #e4ebe8; }
.story-menu-divider::after { left: 1px; width: 3px; background: #b7cac5; }
.story-menu-nav { flex: 0 0 auto; gap: 8px; padding: 0; overflow: visible; }
.story-menu-nav button { grid-template-columns: 28px minmax(0,1fr); color: #4c656c; padding: 12px 9px; min-height: 63px; border-radius: 12px; font-size: 14px; }
.story-menu-nav button:hover { background: #eaf0ed; color: #183f38; }
.story-menu-nav button span { color: #5b736e; background: #e7eeeb; border-radius: 50%; }
.story-menu-nav button b { font-size: 14px; font-weight: 650; }
.story-menu-nav button b small { display: block; margin-top: 4px; font-size: 10px; font-weight: 400; line-height: 1.45; }
.story-menu-nav button.is-active { color: #194e42; border: 1px solid #b4d4c8; background: #dfede6; box-shadow: none; }
.story-menu-nav button.is-active span { background: #286955; color: white; }
.story-menu-nav .story-menu-history { min-height: 42px; padding-left: 12px; margin-top: 14px; border-top: 1px solid #dee7e3; border-radius: 0; color: #536b71; font-size: 12px; }
.readiness { margin-top: 30px; padding: 0 10px; }
.readiness h3 { font-size: 12px; font-weight: 650; margin: 0 0 10px; }
.readiness > p { color: #61776f; font-size: 10px; line-height: 1.5; }
.readiness button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 46px; padding: 7px 0; border: 0; background: transparent; text-align: left; color: #536862; font-size: 11px; cursor: pointer; }
.readiness button > span:first-child { font-size: 16px; color: #80968c; width: 16px; flex-shrink: 0; }
.readiness button.ready > span:first-child { color: #26724e; }
.readiness button small { display: block; margin-top: 2px; font-size: 9px; color: #677d72; }
.editor-scroll { background: #eef2f0; padding: 24px 24px 95px; }
.story-panel { width: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.writing-layout { display: grid; grid-template-columns: minmax(350px, 1fr) 300px; gap: 24px; align-items: start; max-width: 1250px; margin: 0 auto; }
.writing-layout:has(.writing-assistant[hidden]) { grid-template-columns: minmax(0, 800px); justify-content: center; }
.article-canvas, .article-preview { background: white; border: 1px solid #dce5e0; border-radius: 16px; box-shadow: 0 5px 18px #17382505; padding: clamp(24px, 3vw, 44px); }
.canvas-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
.canvas-label .eyebrow { color: #6a7b72; }
.editor-field { margin-bottom: 20px; }
.editor-field > span { font: 600 11px/1.5 var(--sans); color: #5b7066; letter-spacing: .02em; text-transform: none; }
.editor-field--headline textarea { width: 100%; overflow: hidden; resize: none; min-height: 52px; font: 700 clamp(22px, 2vw, 30px)/1.25 Georgia, serif !important; padding: 12px 0 !important; border: 0 !important; border-bottom: 1px solid #e6ebe7 !important; border-radius: 0 !important; background: white; }
.editor-field--headline .voice-field-wrap { border-bottom: 1px solid #e6ebe7; }
.byline-field input { font-size: 13px !important; border-color: #e0e7e2; background: white; }
.story-canvas.rich-story-editor { border: 0; border-radius: 0; padding: 12px 0 !important; min-height: 420px; font: 17px/1.8 Georgia, serif !important; }
.rich-story-editor { white-space: normal; }
.rich-story-editor p, .preview-story-body p { line-height: 1.8; }
.edit-story-image { margin: 0 0 25px; border-radius: 10px; background: #f9faf9; }
.edit-story-image img { display: block; width: 100%; max-height: none; object-fit: cover; border-radius: 9px; }
figcaption { text-align: left; font: 400 12px/1.6 var(--sans); color: #56685e; }
figcaption small { display: block; font-size: 10px; color: #697c70; }
.edit-story-image figcaption { padding: 10px 2px; }
.story-details { margin-top: 25px; }
.more-options { border-top: 1px solid #e1e8e3; margin-top: 22px; padding-top: 14px; font-size: 12px; }
.more-options summary { color: #426555; font-weight: 600; margin-bottom: 12px; padding-block: 5px; }
.more-options p { color: #617169; font-size: 11px; line-height: 1.6; }
.story-meta-grid { grid-template-columns: 1fr 1fr; gap: 18px; margin-block: 22px; }
.story-meta-grid label { font: 600 11px var(--sans); color: #5b7066; }
.story-details small { font-weight: 400; color: #78877f; }
.writing-assistant { position: sticky; top: 0; max-height: calc(100dvh - 300px); overflow-y: auto; padding: 25px 22px; border: 1px solid #c9dbd3; background: #e5eee9; border-radius: 16px; scrollbar-width: thin; scrollbar-color: #9fbdaa transparent; }
.writing-assistant .eyebrow { color: #527361; font-size: 9px; letter-spacing: .045em; }
.writing-assistant h3 { font: 650 23px/1.2 var(--sans); color: #173d2e; letter-spacing: -.025em; margin: 10px 0; }
.writing-assistant > p { color: #54705f; font-size: 12px; line-height: 1.7; }
.writing-actions { display: grid; gap: 9px; margin: 22px 0 25px; }
.writing-assistant .button--primary { background: #285e48; box-shadow: none; }
.writing-assistant .button--primary:hover { background: #1e4d39; }
#revisionForm { padding-top: 24px; border-top: 1px solid #c6d8cc; }
#revisionForm > label { display: block; font-size: 13px; font-weight: 650; color: #294d3a; margin-bottom: 10px; line-height: 1.5; }
#revisionForm textarea { width: 100%; min-height: 135px; padding: 13px; font: 400 13px/1.6 var(--sans); border: 1px solid #b8cdbf; border-radius: 10px; background: white; resize: vertical; }
.suggested-changes { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 18px; }
.suggested-changes button, .term-suggestions button { color: #496356; border: 1px solid #cfddd4; border-radius: 20px; background: #f4f8f5; padding: 7px 10px; font-size: 10px; cursor: pointer; }
.suggested-changes button:hover, .term-suggestions button:hover { background: #d6e6db; }
#revisionStatus { min-height: 34px; color: #4c6858; font-size: 11px; line-height: 1.6; }
#revisionActions { display: grid; gap: 9px; margin: 16px 0; }
#undoRevision { width: 100%; }
.revision-history { font-size: 11px; color: #456452; max-height: 200px; overflow: auto; }
.revision-history p { border-top: 1px solid #cadace; padding-top: 12px; line-height: 1.5; }
.revision-preview { margin: 25px auto 0; max-width: 1250px; padding: 30px; border: 2px solid #78a68b; border-radius: 16px; background: #fff; }
.revision-preview h3 { font: 650 24px var(--sans); margin: 6px 0 0; }
#revisionChanges { font: 400 13px/1.7 var(--sans); color: #5a7060; }
#revisionWordCount { color: #577363; font-size: 12px; }
.revision-preview-footer { display: flex; gap: 18px; justify-content: space-between; align-items: center; margin-top: 20px; }
.revision-preview-footer p { color: #5a7060; font-size: 11px; line-height: 1.5; }
.prepare-layout, .send-layout { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(300px, 380px); align-items: start; gap: 24px; max-width: 1300px; margin: 0 auto; }
.article-preview { min-width: 0; overflow-wrap: anywhere; }
.article-preview h1 { font: 700 clamp(25px, 2.3vw, 36px)/1.18 Georgia, serif; letter-spacing: -.025em; margin: 22px 0 16px; }
.preview-byline { font: 400 12px var(--sans); color: #607468; margin-bottom: 22px; }
.article-preview figure { margin: 20px 0 28px; }
.article-preview figure img { display: block; width: 100%; border-radius: 8px; }
.article-preview figcaption { margin: 10px 0; }
.preview-story-body { font: 400 17px/1.8 Georgia, serif; }
.preview-story-body h2 { font: var(--story-subheading-weight, 400) 21px/1.4 Georgia, serif; margin: 1.4em 0 .6em; }
.preview-image-placeholder { display: grid; place-content: center; min-height: 110px; background: #f1f5f1; border: 1px dashed #ccd9d0; border-radius: 10px; color: #6d8173; font-size: 12px; margin-block: 24px; }
.prepare-controls { display: grid; gap: 20px; min-width: 0; }
.prepare-card, .send-controls { min-width: 0; background: #fff; padding: 24px; border: 1px solid #d7e2db; border-radius: 16px; }
.prepare-card h3, .send-controls h3 { font: 650 20px/1.3 var(--sans); letter-spacing: -.02em; margin: 6px 0 18px; }
.prepare-card .card-title-row { margin: 0; gap: 10px; }
.prepare-card label, .send-controls > label { display: grid; gap: 8px; font: 600 12px/1.4 var(--sans); margin: 17px 0 12px; color: #3e5c4d; }
.prepare-card input:not([type="hidden"]), .prepare-card textarea, .send-controls select, .story-details input, .story-details textarea, .story-details select { width: 100%; max-width: 100%; padding: 11px 12px; font: 400 13px/1.5 var(--sans); border: 1px solid #cbd9d0; border-radius: 9px; background: #fff; color: #243e2f; }
.prepare-card small { font-weight: 400; font-size: 10px; color: #697e6f; }
#selectedHeadlinePreview { font: 600 15px/1.5 var(--sans); color: #294d38; }
#prepareHeadline > .text-button { display: block; margin-bottom: 18px; }
#generateSeoHeadlines { margin: 0 0 16px; }
.seo-headline-option { padding: 14px; margin-top: 8px; }
.seo-headline-option b { font: 600 14px/1.5 var(--sans); }
.seo-headline-option small { font-size: 10px; }
.headline-list .panel-empty { padding: 12px; }
.image-action-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
.image-action { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 68px; padding: 14px 16px; border-radius: 12px; font: 400 13px/1.4 var(--sans); }
.image-action b { font: 650 14px/1.4 var(--sans); letter-spacing: 0; }
.image-action small { font: 400 11px/1.45 var(--sans); }
#generateFeaturedImage { background: #f2f7f3; border-color: #bad2c2; }
.current-image-card { display: block; padding: 0; border: 0; margin: 20px 0 0; background: transparent; }
.current-image-card img { display: block; width: 100%; height: auto; border-radius: 10px; }
.current-image-card figcaption { padding-top: 9px; }
.image-generation-status { font-size: 11px; line-height: 1.6; }
.caption-main { margin-top: 18px; }
.panel-empty b { font: 600 13px/1.5 var(--sans); }
.panel-empty span { font-size: 11px; line-height: 1.5; }
.field-help { font-size: 11px; color: #687c6d; line-height: 1.6; }
.search-result-preview { border: 1px solid #e0e7e2; background: #f9fbfa; border-radius: 10px; padding: 16px; margin-bottom: 18px; overflow-wrap: anywhere; }
.search-result-preview > small, .search-result-preview > span { display: block; color: #64796b; font-size: 10px; line-height: 1.5; margin-bottom: 9px; }
.search-result-preview > b { font: 500 17px/1.35 var(--sans); color: #2354a2; }
.search-result-preview p { font: 400 12px/1.6 var(--sans); color: #536557; margin-bottom: 0; }
.ai-status-card { padding: 10px 0; margin-block: 10px 0; border: 0; background: transparent; font-size: 11px; }
.ai-status-card small { font-size: 10px; }
.term-field { margin-top: 22px; }
.term-field > label { margin-bottom: 8px; }
.term-chips, .term-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 8px; }
.term-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px 4px 10px; color: #28533c; background: #eaf3ed; border: 1px solid #c6dccd; border-radius: 20px; font-size: 12px; overflow-wrap: anywhere; max-width: 100%; }
.term-chip button { display: grid; place-content: center; flex-shrink: 0; width: 28px; height: 28px; background: transparent; color: #35634a; border: 0; border-radius: 50%; font-size: 17px; cursor: pointer; }
.term-chip button:hover { background: #cbdfd1; }
.term-entry { display: flex; gap: 7px; }
.term-entry > input, .term-entry .voice-field { min-width: 0; flex: 1; }
.term-entry .button { padding-inline: 12px; }
.send-controls { position: sticky; top: 0; }
#publishConnectionStatus { font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; color: #425f4e; }
.send-readiness { padding: 16px; font-size: 12px; line-height: 1.6; color: #5c6c4b; background: #f4f6ed; border-radius: 10px; margin-top: 24px; }
#publishApprovalNote { font-size: 12px; color: #795423; line-height: 1.5; }
#approveStory { width: 100%; margin-bottom: 12px; }
#moveToWordPress { margin-top: 14px; background: #245c43; min-height: 49px; }
#moveToWordPress b { font: 650 14px/1.3 var(--sans); }
.download-menu { margin-top: 22px; }
.download-menu summary { width: 100%; border: 1px solid #cfdbd3; }
.download-menu summary::after { content: "⌄"; margin-left: 15px; }
.download-menu > div { display: grid; gap: 7px; padding: 10px 0; }
.download-menu button { justify-content: flex-start; font-size: 12px; }
.publish-result { display: grid; gap: 14px; margin-top: 22px; padding: 18px; border-radius: 12px; background: #e8f4ec; font-size: 12px; overflow-wrap: anywhere; }
.publish-result a { font-size: 12px; }
.publish-result small { font-size: 10px; line-height: 1.5; }
.wordpress-metadata p { font-size: 11px; line-height: 1.5; }
.story-action-dock { right: 30px; bottom: 20px; gap: 25px; padding: 10px 12px 10px 20px; border-radius: 15px; border: 1px solid #cbdcd2; background: rgba(255,255,255,.93); box-shadow: 0 8px 25px #17382a21; backdrop-filter: blur(14px); }
#nextStepHint { font-size: 11px; color: #607566; }
.story-action-dock #completeStep { min-width: 173px; min-height: 44px; font-size: 13px; background: #285e48; box-shadow: none; }
.reporting-toggle { display: flex !important; gap: 11px !important; align-items: center; padding: 15px; margin-top: 22px; background: #f0f5ef; border-radius: 10px; }
.reporting-toggle input { width: 18px !important; height: 18px; accent-color: #285e48; }
.generation-model-info { font-size: 13px; color: #446c53; margin-bottom: 6px; }
.generation-brief-group { display: grid; gap: 9px; min-width: 0; padding: 18px; border: 1px solid #d5e1d7; border-radius: 12px; background: #f8faf7; }
.generation-brief-group label { display: grid; gap: 4px; margin: 0; font: 650 16px/1.4 var(--sans); color: #193c31; }
.generation-brief-group label span { font-size: 12px; font-weight: 400; color: #53685d; }
.generation-brief-group p { margin: 0; font-size: 13px; line-height: 1.5; color: #53685d; }
.generation-brief-group textarea { width: 100%; min-height: 96px; resize: vertical; font: 14px/1.6 var(--sans); background: white; }
#changeGenerationModel { margin-bottom: 20px; }
#generationModelControls { padding: 15px; background: #f4f7f3; border-radius: 10px; margin-bottom: 20px; }
#generatedStoryPreview { border-top: 1px solid #d5e1d7; margin-top: 20px; padding-top: 20px; }
.voice-button { flex-shrink: 0; }
[hidden] { display: none !important; }
@media (min-width: 1600px) { .editor-scroll { padding-inline: 35px; } .writing-layout { grid-template-columns: minmax(0, 1fr) 335px; gap: 32px; } }
@media (max-width: 1200px) {
  .topbar { gap: 15px; padding-inline: 18px; }
  .brand-lockup { gap: 10px; }
  .profile-button > span:last-child { display: none; }
  .story-workbench { --story-menu-width: 165px; }
  .editor-scroll { padding: 20px 18px 95px; }
  .writing-layout { grid-template-columns: minmax(300px, 1fr) 275px; gap: 16px; }
  .prepare-layout, .send-layout { grid-template-columns: minmax(300px, 1fr) 310px; gap: 16px; }
  .article-canvas, .article-preview, .prepare-card, .send-controls { padding: 24px; }
  .writing-assistant { padding: 22px 18px; }
  .story-toolbar { gap: 15px; }
  .story-header-metrics { gap: 16px; }
  .metric-details summary { max-width: 50px; }
}
@media (max-width: 980px) {
  .topbar { display: flex; }
  .topnav { order: 0; position: static; transform: none; box-shadow: none; }
  .nav-button { padding-inline: 10px; }
  .brand-lockup > div { display: none; }
  .brand-divider { display: none; }
  .top-actions { gap: 8px; }
  .story-toolbar { flex-wrap: wrap; gap: 12px; }
  .story-header-metrics { margin-left: auto; }
  .quick-model { margin-left: auto; }
  .writing-layout, .prepare-layout, .send-layout { grid-template-columns: minmax(0,1fr); }
  .writing-assistant { order: -1; position: static; max-height: none; overflow: visible; }
  .writing-actions { display: flex; margin-block: 15px; }
  #revisionForm { padding-top: 15px; }
  #revisionForm textarea { min-height: 80px; }
  .prepare-controls { order: -1; }
  .image-action-row { grid-template-columns: repeat(3,1fr); }
  .send-controls { position: static; order: -1; }
  .story-action-dock { bottom: 16px; right: 20px; }
  #nextStepHint { display: none; }
}
@media (max-width: 700px) {
  .topbar { height: auto; min-height: 68px; gap: 10px; flex-wrap: wrap; padding: 10px 14px; }
  .topbar .logo-tile { width: 54px; height: 36px; }
  .top-actions { margin-left: auto; }
  .topnav { margin: 0; }
  .nav-button { font-size: 11px; padding: 8px; }
  .logout-button { font-size: 10px; padding: 6px 8px; min-height: 32px; }
  .profile-button { display: none; }
  .workspace-view { height: auto; min-height: calc(100dvh - 68px); overflow: visible; display: block; }
  .queue-column { display: flex; min-height: 70dvh; }
  .workspace-view:not(.story-is-open) .editor-column { display: none; }
  .workspace-view.story-is-open .queue-column { display: none; }
  #storyEditor { display: block; height: auto; overflow: visible; }
  .editor-column { overflow: visible; }
  .story-toolbar { padding: 15px; }
  .story-identity { flex-basis: 100%; }
  .story-header-metrics { margin-left: 0; gap: 18px; }
  .metric-details { display: none; }
  .quick-model { max-width: 100%; font-size: 11px; }
  .quick-model-panel { width: min(300px, calc(100vw - 32px)); }
  .step-banner { padding: 15px; gap: 10px; align-items: center; }
  .step-banner p { display: none; }
  .step-banner h2 { font-size: 23px; }
  .response-preference { max-width: 150px; font-size: 10px; }
  .response-preference select { padding: 6px; }
  .story-workbench { display: block; flex: none; overflow: visible; }
  .story-menu { padding: 10px 12px; height: auto; border-bottom: 1px solid #d2dfd6; overflow: visible; }
  .story-menu-nav { display: flex; overflow-x: auto; gap: 6px; }
  .story-menu-nav button { flex: 1 0 92px; display: flex; justify-content: center; min-height: 47px; padding: 8px; gap: 8px; }
  .story-menu-nav button b { font-size: 12px; }
  .story-menu-nav button b small { display: none; }
  .story-menu-nav button span { width: 23px; height: 23px; }
  .story-menu-nav .story-menu-history { flex: 0 0 auto; min-height: 47px; margin: 0; border: 0; padding: 8px; font-size: 11px; }
  .readiness { margin: 12px 0 0; padding: 0; }
  .readiness h3, .readiness > p { display: none; }
  #readinessChecklist { display: flex; gap: 10px; overflow-x: auto; }
  .readiness button { min-width: max-content; min-height: 30px; gap: 4px; font-size: 10px; padding: 4px; }
  .readiness button small { display: none; }
  .editor-scroll { padding: 15px 12px 90px; overflow: visible; }
  .article-canvas, .article-preview, .prepare-card, .send-controls, .revision-preview { padding: 22px 18px; }
  .article-preview h1 { font-size: 27px; }
  .story-canvas.rich-story-editor { font-size: 16px !important; }
  .image-action-row { grid-template-columns: 1fr; }
  .story-meta-grid { grid-template-columns: 1fr; }
  .story-action-dock { left: 12px; right: 12px; bottom: 10px; justify-content: flex-end; padding: 8px; }
  .story-action-dock #completeStep { flex: 1; }
  .page-view { padding-bottom: 40px; }
  .status-popover { position: fixed; top: 72px; right: 15px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* User access controls */
.user-actions { display: flex; flex-wrap: wrap; gap: .5rem; min-width: 140px; }
.user-actions .button { white-space: nowrap; }
.user-status[data-active="true"] { background: #e0f1e7; color: #20543e; }
.user-status[data-active="false"] { background: #f0f1f3; color: #565d67; }
#userFormError { color: #a52d21; }
#userFormError:empty { display: none; }

.cloudflare-settings { border:1px solid #cbdcd6; border-radius:12px; padding:18px; margin:16px 0; min-width:0; }
.cloudflare-settings legend { font-weight:700; padding:0 6px; }
#wpConnectionChecks { white-space:pre-line; font-weight:600; }