/* The editor shell — 3e (post editor) and 7b (template editor) share it.

   Global rather than scoped to one component on purpose: a template IS a post with holes in it, and
   the two screens are the same tool. Duplicating 600 lines so the second one could have its own
   scope would guarantee they drift, and "the template editor looks nothing like the post editor" is
   exactly the complaint this file exists to answer.

   No ::deep rules here, which is what made the move from a scoped file safe. */

/* 3e — Post editor. Measurements from docs/design/SPEC.md. */

.ed {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 53px);
    min-height: 0;
}

/* Spec: breadcrumb row 14px 26px, border-bottom 1px. */
.ed-crumb {
    padding: 14px 26px;
    border-bottom: var(--rule-row) solid var(--color-divider);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.ed-crumb-link {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--tracking-label);
    color: var(--muted);
    text-decoration: none;
}

.ed-crumb-link:hover {
    color: var(--color-accent);
}

.ed-crumb-title {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 17px;
    background: transparent;
    border: 0;
    color: inherit;
    padding: 2px 4px;
    min-width: 18ch;
    width: min(48ch, 40vw);
}

.ed-crumb-title:hover {
    background: var(--tint-hover);
}

.ed-crumb-end {
    margin-left: auto;
    display: flex;
    gap: var(--space-2);
}

/* Spec: variant tabs, border-bottom 2px, padding-left 26px. */
.ed-tabs {
    display: flex;
    align-items: stretch;
    padding-left: 26px;
    border-bottom: var(--rule-section) solid var(--color-divider);
    overflow-x: auto;
}

.ed-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: var(--text-meta);
    letter-spacing: var(--tracking-label);
    color: var(--muted);
}

.ed-tab:hover {
    color: var(--color-text);
}

/* Spec: active tab is full-opacity text with a 3px accent underline; inactive sits at 55%. */
.ed-tab-on {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
}

/* A detached variant is marked on its tab, so the operator can see which versions have been taken
   over by hand without opening each one. */
.ed-tab-dot {
    width: 5px;
    height: 5px;
    background: var(--color-accent-2);
}

.ed-tabs-note {
    margin-left: auto;
    align-self: center;
    padding: 0 26px 0 var(--space-4);
    white-space: nowrap;
}

.ed-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

.ed-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: var(--rule-section) solid var(--color-divider);
}

/* Spec: editor pane 520px fixed. */
.ed-editor {
    width: 520px;
    flex: none;
}

.ed-preview {
    flex: 1;
}

/* Spec: pane header strip on surface, 11px mono. */
.ed-pane-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border-bottom: var(--rule-row) solid var(--color-divider);
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--tracking-label);
    color: var(--muted);
}

.ed-pane-head-end {
    margin-left: auto;
}

/* Spec: code at 12.5px/1.75 mono. A plain textarea rather than a syntax-highlighted editor: it is
   keyboard-native, works without JavaScript beyond the circuit, and never fights an IME. Syntax
   colouring would need an editor component and is not what makes this screen work. */
.ed-code {
    flex: 1;
    width: 100%;
    resize: none;
    border: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.75;
    tab-size: 2;
}

.ed-code:focus-visible {
    outline-offset: calc(var(--focus-ring-offset) * -1);
}

.ed-detached {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: color-mix(in srgb, var(--color-accent-2) 12%, transparent);
    border-bottom: var(--rule-row) solid var(--color-divider);
}

.ed-detached .meta {
    color: var(--color-accent-2-800);
}

.ed-warnings {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-top: var(--rule-row) solid var(--color-divider);
    flex-wrap: wrap;
}

/* Spec: preview body padding 24px 28px. */
.ed-preview-body {
    flex: 1;
    overflow: auto;
    padding: var(--space-6) 28px;
    background: var(--color-bg);
    color: var(--color-text);
}

.ed-preview-card {
    max-width: 680px;
    border: var(--rule-row) solid var(--color-divider);
    padding: var(--space-6);
    background: var(--color-bg);
}

.ed-preview-kicker {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--tracking-kicker);
    color: var(--color-accent);
    text-transform: uppercase;
}

.ed-preview-title {
    margin: 14px 0 0;
    font-size: 32px;
    line-height: 1.04;
    text-wrap: pretty;
}

.ed-preview-dek {
    margin-top: var(--space-3);
    font-size: 17px;
    color: var(--muted-strong);
}

/* A variant is plain text, not article HTML — line breaks are its structure (thread posts split
   on blank lines), so they must survive into the preview. */
.ed-preview-variant {
    margin-top: var(--space-3);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 15px;
}

/* The article body lives in its own document — see the comment at the iframe. The wrapper is what
   holds the height js/article-frame.js measures; the frame itself is grown to its content and
   scaled down when the content is wider than the column, so it never scrolls inside itself. */
.ed-preview-frame {
    margin-top: var(--space-4);
    width: 100%;
    overflow: hidden;
}

.ed-preview-frame iframe {
    display: block;
    border: 0;
    width: 100%;
}


/* — a platform version —
   Two sub-tabs over one pane: the words and the picture. Same 1px rules and zero radius as every
   other strip; the pane below them is the same editor either way. */
.ed-sub {
    display: flex;
    gap: var(--space-4);
    padding: 10px var(--space-4);
    border-bottom: var(--rule-row) solid var(--color-divider);
    background: var(--color-surface);
}

.ed-sub-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 0;
    border: 0;
    border-bottom: var(--rule-section) solid transparent;
    background: none;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--tracking-kicker);
    cursor: pointer;
}

.ed-sub-tab:hover {
    color: var(--color-text);
}

.ed-sub-on {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
}

.ed-rail-head {
    padding: var(--space-4) var(--space-4) 0;
    color: var(--color-accent);
}

/* The image preview: the canvas at its real pixel size, scaled to the pane by
   js/article-frame.js — not re-laid-out at preview width, which would show an image the rasterizer
   will never produce. */
.ed-canvas-frame {
    margin-top: var(--space-4);
    width: 100%;
    overflow: hidden;
    border: var(--rule-row) solid var(--color-divider);
}

.ed-canvas-frame iframe {
    display: block;
    border: 0;
}

/* The video preview's transport: play, scrub, elapsed. Inside the canvas frame so the controls and
   the picture read as one instrument. */
.ed-video-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: var(--rule-row) solid var(--color-divider);
    border-top: none;
    background: var(--color-surface);
}

.ed-video-bar input[type="range"] {
    flex: 1;
    min-width: 0;
    accent-color: var(--color-accent-800, currentColor);
}

.ed-video-render {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: var(--rule-row) solid var(--color-divider);
}

.ed-video-player {
    width: 100%;
    max-height: 360px;
    /* No painted backdrop: the element letterboxes itself in black, as video elements do. */
    border: var(--rule-row) solid var(--color-divider);
}

.ed-preview-post .ed-preview-variant {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ed-preview-count {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--rule-row) solid var(--color-divider);
    color: var(--muted);
}

/* Spec: settings rail 290px on surface. */
.ed-rail {
    width: 290px;
    flex: none;
    background: var(--color-surface);
    padding: var(--space-4);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ed-field {
    display: flex;
    flex-direction: column;
}

.ed-dek {
    min-height: 64px;
}

.ed-field-error {
    margin-top: var(--space-1);
    color: var(--color-accent-2-800);
}

/* The rail's duration · fps pair, on one line the way the drawing sets compound values. */
.ed-video-timing {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.ed-video-timing .input {
    width: 64px;
}

.ed-drop {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    border: var(--rule-row) dashed var(--color-divider);
    min-height: 80px;
    text-align: center;
}

.ed-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

.ed-tag-remove {
    margin-left: 6px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    line-height: 1;
}

.ed-tag-add {
    display: flex;
    gap: var(--space-2);
}

/* Spec: publish footer, border-top 2px, surface, padding 14px 26px. Docked rather than modal so a
   blocked target surfaces its blocker while writing, not at publish time. */
.ed-publish {
    border-top: var(--rule-section) solid var(--color-divider);
    background: var(--color-surface);
    padding: 14px 26px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.ed-targets {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.ed-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: var(--text-meta);
}

/* Spec: a selected chip is 1px solid accent with accent text. */
.ed-chip-on {
    border: var(--rule-row) solid var(--color-accent);
    color: var(--color-accent);
}

/* Spec: a blocked chip is divider-bordered at opacity .6 and states its reason inline. */
.ed-chip-blocked {
    border: var(--rule-row) solid var(--color-divider);
    opacity: 0.6;
}

.ed-chip-reason {
    color: var(--muted);
}

.ed-state {
    padding: var(--space-8) var(--space-4);
}

@media (max-width: 1200px) {
    .ed-body {
        flex-direction: column;
        overflow-y: auto;
    }

    .ed-editor,
    .ed-rail {
        width: 100%;
    }

    .ed-editor {
        min-height: 320px;
    }
}

/* A platform that is off for this post: the tab stays — the operator has to be able to turn it back
   on — but reads as inactive, and says so rather than relying on the dimming alone. */
.ed-tab-off {
    opacity: .5;
}

.ed-tab-off-mark {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: var(--tracking-kicker);
    color: var(--muted);
}

.ed-disabled {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-6);
}

/* Publishing one platform's version, from the rail: pick accounts, send, read the steps back.
   Monospace throughout — these are IDs, timestamps and status lines, which is the interface
   metadata register, not chrome. */
.ed-pub-accounts {
    display: grid;
    gap: var(--rule-row);
    background: var(--color-divider);
    border: var(--rule-row) solid var(--color-divider);
    max-height: 180px;
    overflow-y: auto;
    margin-bottom: var(--space-2);
}

.ed-pub-account {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 8px;
    background: var(--color-bg);
    cursor: pointer;
}

.ed-pub-account:hover {
    background: var(--tint-hover);
}

/* An account that cannot be published to stays listed with its reason. Hiding it would read as
   "there is nothing there", and the operator would assume it went out. */
.ed-pub-account-off {
    opacity: .45;
    cursor: default;
}

.ed-pub-handle {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
}

.ed-pub-account .meta {
    margin-left: auto;
}

.ed-pub-pick,
.ed-pub-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.ed-pub-actions {
    margin-bottom: var(--space-4);
}

.ed-pub-link {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--tracking-label);
    color: var(--color-accent);
}

.ed-pub-log {
    display: flex;
    flex-direction: column;
    gap: var(--rule-row);
    background: var(--color-divider);
    border: var(--rule-row) solid var(--color-divider);
}

.ed-job {
    background: var(--color-bg);
    padding: 8px;
}

.ed-job-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.ed-job-handle {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
}

.ed-job-head .tag {
    margin-left: auto;
}

.ed-job-sub {
    display: block;
    margin-top: 4px;
}

.ed-job-error {
    color: var(--color-accent-2);
    margin: var(--space-2) 0 0;
}

.ed-job-result {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}

.ed-job-id {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    background: var(--color-surface);
    padding: 2px 6px;
}

.ed-job-log {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: var(--space-2);
}

.ed-job-line {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-mono);
}

.ed-job-what {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--muted);
}

.ed-job-failure {
    color: var(--color-accent-2);
}

.ed-job-status {
    margin-left: auto;
}

.ed-job-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-3);
}

/* The publishing panel is one block at the foot of the rail — its own element so it can be scrolled
   to, and reviewed, as one thing. */
.ed-pub {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}