/* Content Studio · scoped UI only. Galaxy inspiration: see docs/article-studio-design.md. */
.article-studio {
  --studio-yellow: #ffc83d;
  --studio-ink: #252522;
  --studio-muted: #686864;
  --studio-line: #deded8;
  background: transparent;
  color: var(--studio-ink);
}
.article-studio .wf-pane {max-width:1520px;padding:20px 28px 110px;background:transparent}
.article-studio .article-studio-header {align-items:center;margin-bottom:16px;gap:18px}
.article-studio .article-studio-eyebrow {color:#71716c;font-size:10px;letter-spacing:.15em;margin-bottom:8px}
.article-studio-eyebrow span {letter-spacing:0;margin-left:10px;padding-left:10px;border-left:1px solid #c7c7c1;font-weight:450}
.article-studio .article-studio-title {font-size:21px;letter-spacing:-.025em;font-weight:650}
.article-studio .article-studio-deck {font-size:12px;margin-top:8px;color:var(--studio-muted)}
.article-studio .article-studio-header-actions {gap:8px;flex-wrap:wrap;justify-content:flex-end}
.article-studio .article-studio-save {border:0;background:transparent;padding:0;font-size:11px;margin-right:6px}
.article-studio .article-studio-save::before {background:#787871;width:5px;height:5px}
.article-studio .btn {min-height:40px;border-radius:9px;font-size:12px;box-shadow:none;transition:background-color 140ms,border-color 140ms,box-shadow 140ms}
.article-studio .btn-primary {background:var(--studio-yellow);border-color:var(--studio-yellow);color:#24221b}
.article-studio .btn-primary:hover:not(:disabled) {background:#f6bb29;border-color:#f6bb29;box-shadow:0 2px 5px #27230d12}
.article-studio .btn-outline {background:#ffffffa6;border-color:var(--studio-line)}
.article-studio .btn-outline:hover:not(:disabled) {background:#f1f1ed;border-color:#bfbfb8}
.article-studio :is(button,input,select,textarea,summary,[contenteditable]):focus-visible {outline:2px solid #706021;outline-offset:3px}
.article-studio .input {border-radius:9px;border-color:var(--studio-line);background:#fff;min-height:42px}
.article-studio .wf-steps {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:0;margin-bottom:24px;background:#f3f3f3f5;border:0;border-bottom:1px solid #dcdcdc;border-radius:0;box-shadow:none;backdrop-filter:blur(10px);top:0}
.article-studio .wf-step {min-width:0;min-height:50px;padding:8px 14px;border:0;border-bottom:2px solid transparent;border-radius:0;color:var(--studio-muted);gap:11px;transform:none;justify-content:flex-start}
.article-studio .wf-step.active {background:transparent;color:var(--studio-ink);border-color:var(--studio-yellow);box-shadow:none}
.article-studio .wf-step.active .wf-step-num {background:var(--studio-yellow);color:#24221b;border-color:var(--studio-yellow)}
.article-studio .wf-step.done {color:#55554f}
.article-studio .wf-step.done .wf-step-num {background:#363631;color:#fff;border-color:#363631}
.article-studio .wf-step-num {width:27px;height:27px;font-size:11px;font-variant-numeric:tabular-nums;border:1px solid #cfcfc8;background:transparent;color:#77776e}
.article-studio .wf-step-label {font-size:12px;font-weight:650}
.article-studio .wf-step-sub {display:none}
.article-studio .wf-step:disabled {cursor:not-allowed;opacity:.5}
.article-studio .wf-step.error {border-color:#c64e35;color:#973522}
.article-studio .wf-modelbar {grid-template-columns:minmax(200px,280px) minmax(0,1fr);align-items:center;background:transparent;border:0;border-bottom:1px solid var(--studio-line);padding:0 0 18px;margin-bottom:20px;border-radius:0}
.article-studio .wf-model-status {font-size:12px}
.article-studio .wf-model-meta {font-size:11px;line-height:1.7;max-width:680px}
.article-studio .article-studio-grid {grid-template-columns:minmax(0,1fr) 240px;gap:24px}
.article-studio[data-stage="3"] .article-studio-grid {grid-template-columns:minmax(0,1fr)}
.article-studio .wf-card {border:1px solid var(--studio-line);border-radius:14px;box-shadow:0 3px 12px #22221804;background:rgba(255,255,255,.86);padding:24px;margin:0 0 18px;backdrop-filter:blur(.65px)}
.article-studio[data-stage="3"] #wf-card-3 {border:0;padding:0;background:transparent;box-shadow:none;backdrop-filter:none}
.article-studio .wf-card-title {align-items:baseline;flex-wrap:wrap;font-size:15px;margin-bottom:14px;gap:8px}
.article-studio .wf-card-title-sub {font-size:11px;color:var(--studio-muted)}
.article-studio .article-field-help {font-size:11px;line-height:1.75;color:var(--studio-muted)}
.article-studio .article-brief-grid {gap:22px}
.article-studio .article-field>label {font-size:12px;margin-bottom:9px}
.article-studio .article-research-panel {border-radius:9px;border:1px solid var(--studio-line);background:#f5f5f0;padding:16px}
.article-studio .article-research-panel summary {font-size:12px;min-height:24px;cursor:pointer}
.article-studio input[type=checkbox] {accent-color:#34342f;width:16px;height:16px}
.article-studio .article-studio-aside {top:100px;gap:0;grid-row:auto}
.article-studio .article-studio-grid>.article-studio-aside {display:flex}
.article-studio .article-side-card {border:0;border-bottom:1px solid var(--studio-line);box-shadow:none;border-radius:0;background:transparent;padding:8px 0 22px;margin-bottom:18px}
.article-studio .article-side-card:last-child {border-bottom:0}
.article-studio .article-side-label {font-size:10px;font-weight:600;letter-spacing:.07em;color:#72726c;margin-bottom:12px}
.article-studio .article-side-title {font-size:14px;line-height:1.65;font-weight:600;overflow-wrap:anywhere}
.article-studio .article-side-progress {margin:18px 0}
.article-studio .article-side-progress-ring {background:conic-gradient(#4a4a43 calc(var(--p)*1%),#e6e6df 0)}
.article-studio .article-ready-row {padding:8px 0;font-size:12px;line-height:1.65}
.article-studio .article-ready-detail {font-size:10px;line-height:1.7;color:#76766e}
.article-studio .article-publish-summary {background:#fff9e6;border:1px solid #e9dfbb;border-radius:8px;line-height:1.8}
.article-studio .article-side-action {width:100%;min-height:44px}
.article-studio .article-side-note {font-size:10px;line-height:1.8;color:#74746e}
.article-studio .article-release-status {display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:16px 20px}
.article-studio .article-release-status strong {font-size:13px}
.article-studio .article-release-status p {flex:1;min-width:220px;margin:0}
.article-studio .article-release-status .wf-error-actions {margin:0}
.article-studio .article-editor-split {grid-template-columns:minmax(0,1fr);gap:0}
.article-studio .article-editor-main {min-width:0}
.article-studio .article-document-meta {padding:0 0 10px;display:grid;gap:0}
.article-studio .article-document-meta>div>label {display:none!important}
.article-studio .article-title-input {display:block;width:100%;font-size:25px;font-weight:650;letter-spacing:-.025em;line-height:1.45;padding:0 0 8px;border-radius:0;border:0;background:transparent;box-shadow:none;min-height:44px;resize:vertical;field-sizing:content;max-height:180px}
.article-studio .article-seo-fields>summary {display:flex;align-items:center;gap:10px;min-height:40px;font-size:11px;font-weight:600;cursor:pointer;list-style:none}
.article-studio .article-seo-fields>summary::before {content:'+';font-size:16px;font-weight:400;width:16px;color:#6d6d66}
.article-studio .article-seo-fields[open]>summary::before {content:'−'}
.article-studio .article-seo-fields>summary>span {font-size:10px;font-weight:400;color:#787870}
.article-studio .article-seo-fields[open] {padding:0 14px 14px;background:#f7f7f2;border:1px solid #e6e6df;border-radius:9px}
.article-studio .article-seo-fields>div {margin-top:10px}
.article-studio .article-editor-toolbar {position:static;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 0 14px;background:transparent;border:0;box-shadow:none;flex-wrap:wrap}
.article-studio .article-character-count {font-size:11px;color:var(--studio-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.article-studio .article-edit-hint {font-size:11px;color:var(--studio-muted)}
.article-studio .article-view-controls {display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
/* Segmented selection inspired by Galaxy; real buttons retain Vue and keyboard semantics. */
.article-studio .article-view-switch {display:flex;gap:2px;padding:3px;background:#e9e9e9;border:1px solid #dedede;border-radius:9px;max-width:100%}
.article-studio .article-view-switch .btn {min-height:38px;padding:6px 14px;background:transparent;color:#595959;border:1px solid transparent;border-radius:6px;box-shadow:none;font-size:12px}
.article-studio .article-view-switch .btn[aria-pressed="true"] {background:#fff;color:#24241f;border-color:#dcdcd4;box-shadow:0 1px 3px #00000009}
.article-studio .article-editor-canvas {background:#fff;border:1px solid var(--studio-line);border-radius:10px;padding:28px;min-height:560px;font-size:15px;line-height:1.9}
/* Reserve the bottom-right corner for the global assistant launcher. */
.article-studio .article-editor-footer {position:sticky;bottom:0;z-index:8;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 174px 12px 18px;margin-top:16px;flex-wrap:wrap;background:#fafafaf5;border:1px solid #dedede;border-radius:10px;box-shadow:0 -4px 18px #00000006;backdrop-filter:blur(12px)}
.article-studio .article-editor-footer>span {margin-right:auto;font-size:11px;color:var(--studio-muted)}
.article-studio .article-draft-sync {display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:11px;color:var(--studio-muted);line-height:1.8}
.article-studio .article-sync-error {color:#a33e24;overflow-wrap:anywhere}
.article-studio .article-editor-footer .btn-primary span {display:inline-block;margin-left:10px;transition:transform 140ms}
.article-studio .article-editor-footer .btn-primary:hover span {transform:translateX(2px)}
.article-studio .article-cover-block {border:1px dashed #c9c9c1;background:#f8f8f3;border-radius:10px;padding:20px;margin:0 0 22px}
.article-studio .article-review-side {position:static;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;border:0;padding-top:0}
.article-studio .editorial-review {border:0;background:transparent;padding:0;min-width:0}
.article-studio .article-publish-actions {border-top:1px solid var(--studio-line);padding-top:20px;gap:10px;display:flex;flex-wrap:wrap;flex-direction:row}
.article-studio .article-block-editor {--abe-yellow:var(--studio-yellow);--abe-line:#e3e3e3;--abe-muted:#686868;border-radius:12px;background:#fff;overflow:visible;box-shadow:0 4px 20px #00000003}
.article-studio .abe-top {background:#fff;padding:7px 18px;border-radius:12px 12px 0 0;min-height:46px}
.article-studio .abe-top strong {font-size:12px;font-weight:600}
.article-studio .abe-top>span {font-size:10px}
.article-studio .abe-layout {grid-template-columns:208px minmax(0,1fr);min-height:540px}
.article-studio .abe-outline {display:block;position:sticky;top:62px;max-height:calc(100vh - 240px);padding:20px 10px;border:0;border-right:1px solid #eeeeee;background:#f8f8f8;border-radius:0 0 0 11px;overflow:auto}
.article-studio .abe-outline-title {display:block;font-size:11px;letter-spacing:.02em;padding:0 10px 14px;color:#555}
.article-studio .abe-outline button {width:100%;min-width:0;max-width:none;min-height:54px;border-radius:7px;padding:9px 10px;margin-bottom:6px;border:1px solid transparent;box-shadow:none}
.article-studio .abe-outline button.selected {background:#fff3c3;border-color:#ead99a}
.article-studio .abe-outline button span {font-size:9px;letter-spacing:.02em;margin-bottom:6px}
.article-studio .abe-outline-item {background:transparent;border-color:transparent;margin-bottom:4px;border-radius:7px}
.article-studio .abe-outline-item.selected {background:#fff4cf;border-color:#ead798;box-shadow:inset 2px 0 var(--studio-yellow)}
.article-studio .abe-outline button strong {font-size:12px;font-weight:500;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.5}
.article-studio .abe-outline-list {display:block;width:auto}
.article-studio .abe-outline-row {width:auto}
.article-studio .abe-outline .abe-grip {width:44px;min-width:44px;max-width:44px;flex:0 0 44px;min-height:44px;padding:0;margin:0}
.article-studio .abe-outline .abe-outline-link {min-width:0;max-width:none;flex:1;padding:9px 4px;margin:0}
.article-studio .abe-canvas {padding:18px 28px 32px;min-width:0}
.article-studio .abe-block {padding:0 8px;margin:0 auto 12px;max-width:820px;border-radius:8px;transition:border-color 140ms,background-color 140ms}
.article-studio .abe-block.abe-sort-moving {transition:transform 160ms cubic-bezier(.2,.7,.3,1);transform:translate3d(var(--abe-sort-x,0px),var(--abe-sort-y,0px),0)}
.article-studio .abe-block.selected {border-color:#e7dfc6;background:#fffefa}
.article-studio .abe-block-bar {min-height:44px;font-size:10px;gap:8px;padding:0 2px;flex-wrap:nowrap;color:#727272}
.article-studio .abe-block-bar>span {font-variant-numeric:tabular-nums}
.article-studio .abe-tools {opacity:0;pointer-events:none;gap:4px;flex-wrap:nowrap;transition:opacity 120ms}
.article-studio .abe-block:hover .abe-tools,.article-studio .abe-block:focus-within .abe-tools,.article-studio .abe-block.selected .abe-tools {opacity:1;pointer-events:auto}
.article-studio .abe-tools>button {color:#595446;font-size:11px;border:1px solid #e5e0cf;background:#fffdf4;border-radius:6px;min-height:40px}
.article-studio .abe-block-bar>.abe-grip {min-height:44px;min-width:44px;color:#777}
.article-studio .abe-content {font-size:16px;line-height:1.85;padding:0 10px 14px;max-width:820px;overflow-x:auto}
.article-studio .abe-content table {display:table;width:100%;max-width:none}
.article-studio .abe-content h2 {font-size:23px;font-weight:650;letter-spacing:-.025em;line-height:1.5}
.article-studio .abe-content :is(td,th) {font-size:12px;padding:12px 14px}
.article-studio .abe-content th {background:#f2f2ec}
.article-studio .abe-more {position:relative}
.article-studio .abe-more>summary {list-style:none;display:flex;align-items:center;justify-content:center;width:40px;min-height:40px;border:1px solid transparent;border-radius:6px;cursor:pointer;font-size:18px;color:#66665e}
.article-studio .abe-more>summary::-webkit-details-marker {display:none}
.article-studio .abe-more[open]>summary,.article-studio .abe-more>summary:hover {background:#eeeee8;border-color:#d9d9d0}
.article-studio .abe-more-popover {position:absolute;right:0;top:calc(100% + 4px);z-index:6;display:grid;grid-template-columns:1fr 1fr;width:214px;padding:6px;gap:4px;background:#fff;border:1px solid #deded6;border-radius:9px;box-shadow:0 8px 24px #00000014}
.article-studio .abe-more-popover button {min-height:40px;text-align:left;font-size:11px}
.article-studio .abe-panel {border:1px solid #ded6b9;border-radius:8px;background:#f8f7ef;margin:0 4px 12px;padding:18px}
.article-studio .abe-panel label {font-size:12px;margin-bottom:12px}
.article-studio .abe-panel textarea {border-radius:8px;font-size:13px;min-height:98px}
.article-studio .abe-shortcuts {gap:6px;margin-bottom:12px}
.article-studio .abe-shortcuts button {background:#fff;border-color:#dfdfd6;border-radius:6px;padding:5px 10px;min-height:32px}
.article-studio .abe-actions button {min-height:38px;padding:8px 12px}
.article-studio .abe-diff {gap:16px}
.article-studio .abe-diff section {background:#fff;border:1px solid #e4e1d3;border-radius:8px;padding:14px}
.article-studio .abe-diff section:last-child {border-color:#d8c990}
.article-studio .abe-notice {padding:12px 18px;background:#fafaf7;border-radius:0 0 11px 11px}
.article-studio .abe-add {padding:20px 0 0;gap:8px}
.article-studio .abe-add select,.article-studio .abe-add button {min-height:40px;border-radius:8px;background:#fafaf6}
@media (max-width:1200px) {
  .article-studio .wf-pane {padding:22px 20px 110px}
  .article-studio .article-studio-header {align-items:flex-start}
  .article-studio .article-studio-save {width:100%;justify-content:flex-end;min-height:20px}
  .article-studio .article-studio-grid {grid-template-columns:minmax(0,1fr) 210px;gap:20px}
  .article-studio .abe-layout {grid-template-columns:190px minmax(0,1fr)}
  .article-studio .abe-canvas {padding:18px}
  .article-studio .wf-step {padding:9px;gap:8px}
  .article-studio .wf-step-sub {display:none}
}
@media (max-width:1000px) {
  .article-studio .article-studio-grid {grid-template-columns:minmax(0,1fr)}
  .article-studio .article-studio-grid>.article-studio-aside {display:none}
}
@media (max-width:820px), (max-width:1024px) and (max-height:500px) {
  .article-studio .wf-pane {padding:20px 14px 150px}
  .article-studio .article-studio-header {gap:10px;flex-direction:column;align-items:stretch;margin-bottom:14px}
  .article-studio .article-studio-title {font-size:20px}
  .article-studio .article-studio-eyebrow {display:none}
  .article-studio .article-studio-deck {margin-top:5px;font-size:11px}
  .article-studio .article-studio-header-actions {justify-content:flex-start;gap:8px}
  .article-studio .article-studio-save {width:auto;justify-content:flex-start;margin-right:auto}
  .article-studio .article-task-trigger {order:0}
  .article-studio .wf-steps {margin-inline:0;gap:0;padding:0;border-radius:0;margin-bottom:18px}
  .article-studio .wf-step {flex-direction:column;gap:5px;min-width:0;min-height:62px;padding:7px 2px;text-align:center;border-radius:0}
  .article-studio .wf-step-num {width:21px;height:21px;font-size:10px}
  .article-studio .wf-step-label {font-size:10px;white-space:normal;line-height:1.4;overflow:visible}
  .article-studio .wf-modelbar {grid-template-columns:1fr;gap:10px}
  .article-studio .wf-model-meta:not(.wf-model-empty)>div:not(.wf-model-status) {display:none}
  .article-studio .wf-card {padding:18px 14px;border-radius:11px}
  .article-studio .wf-card-title {margin-bottom:18px}
  .article-studio .wf-card-title-sub {margin-left:0;flex-basis:100%}
  .article-studio .article-title-input {font-size:21px;min-height:48px}
  .article-studio .article-view-controls {gap:8px}
  .article-studio .article-edit-hint {flex-basis:100%;line-height:1.6}
  .article-studio .article-view-switch .btn {padding:7px 10px;min-height:40px}
  .article-studio .abe-layout {grid-template-columns:minmax(0,1fr)}
  .article-studio .abe-outline {display:flex;position:static;gap:6px;padding:10px;max-height:100px;border-bottom:1px solid #deded7;border-radius:0;overflow:auto}
  .article-studio .abe-outline-title {display:none}
  .article-studio .abe-outline button {min-width:130px;max-width:160px;flex-shrink:0;margin:0}
  .article-studio .abe-outline-list {display:flex;flex-direction:row;gap:6px;width:max-content}
  .article-studio .abe-outline-row {width:178px;flex:0 0 178px}
  .article-studio .abe-canvas {padding:14px 8px}
  .article-studio .abe-block {padding:0 3px;margin-bottom:14px}
  .article-studio .abe-tools {opacity:1;pointer-events:auto}
  .article-studio .abe-content {font-size:15px;padding:4px 7px 14px;line-height:1.85}
  .article-studio .abe-content h2 {font-size:21px}
  .article-studio :is(.abe-grip,.abe-tools>button,.abe-more>summary,.abe-actions button,.abe-shortcuts button,.abe-add button,.abe-history button) {min-height:44px}
  .article-studio :is(.abe-grip,.abe-more>summary) {min-width:44px}
  .article-studio .abe-top {padding:10px}
  .article-studio .abe-top>strong {display:none}
  .article-studio .abe-panel {padding:12px;margin-inline:0}
  .article-studio .abe-panel textarea,.article-studio .input {font-size:16px}
  .article-studio .abe-diff {grid-template-columns:1fr}
  .article-studio .abe-add small {flex-basis:100%;line-height:1.7}
  .article-studio .article-editor-footer>span {flex-basis:100%;margin-bottom:4px}
  .article-studio .article-editor-footer {padding:10px;gap:6px;position:static;box-shadow:none}
  .article-studio .article-editor-footer .btn {flex:1;min-height:44px;font-size:11px}
  .article-studio .article-editor-canvas {padding:16px;min-height:420px}
  .article-studio .article-cover-block {padding:16px}
}
@media (hover:none), (pointer:coarse) {
  .article-studio .abe-tools {opacity:1;pointer-events:auto}
}
.article-studio .article-language-panel{padding:20px;min-width:0}
.article-language-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.article-language-heading strong{font-size:16px}.article-language-heading span{font-size:13px;color:var(--muted)}
.article-language-panel p{line-height:1.7;margin:10px 0;max-width:75ch}
.article-language-panel.needs-attention{border-color:#b77900}
.article-language-panel .wf-error-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.article-language-panel .btn,.article-language-panel summary{min-height:44px}
.article-language-panel summary{display:list-item;padding:12px 0;cursor:pointer;font-weight:500}
.article-language-panel :is(button,summary,[tabindex]):focus-visible{outline:2px solid var(--text);outline-offset:3px}
.article-language-comparison{margin-top:24px;border-top:1px solid var(--border);padding-top:20px}
.article-language-comparison h3{font-size:18px;margin:0 0 8px}
.article-language-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:18px}
.article-language-columns section{min-width:0}.article-language-columns h4{margin:0 0 10px;font-size:14px}
.article-language-columns strong{display:block;overflow-wrap:anywhere;margin-bottom:12px}
.article-language-original,.article-language-preview{max-height:340px;overflow:auto;overflow-wrap:anywhere;line-height:1.8;padding:14px;background:var(--surface-soft);border-radius:10px;scrollbar-color:#777 transparent}
.article-language-columns img{max-width:100%;height:auto}.article-language-columns table{display:block;max-width:100%;overflow:auto}
.article-language-backup{display:flex;align-items:center;flex-wrap:wrap;gap:12px;border-top:1px solid var(--border);margin-top:18px;padding-top:14px;font-size:13px}
.article-language-backup details{flex-basis:100%}.article-language-help{margin-top:12px;font-size:13px;color:var(--muted)}
@media(max-width:640px){.article-studio .article-language-panel{padding:16px}.article-language-columns{grid-template-columns:minmax(0,1fr);gap:20px}.article-language-panel .wf-error-actions .btn{width:100%;white-space:normal}.article-language-original,.article-language-preview{max-height:260px}}
@media (prefers-reduced-motion:reduce) {
  .article-studio :is(.btn,.wf-step,.abe-block,.abe-tools,.article-editor-footer .btn-primary span) {transition:none;transform:none}
  .article-studio .abe-block.abe-sort-moving {transition:none;transform:translate3d(var(--abe-sort-x,0px),var(--abe-sort-y,0px),0)}
}