/* ============================================================================
   Composer: a document written on the whole window
   ----------------------------------------------------------------------------
   components-writing.css is an index card. A decision record is pages long,
   so this is the other shape: the title typed at the size of a page heading,
   markdown on the left, the rendered page on the right, and one quiet bar
   holding the way out, the last commit line, the modes and Save.

   The layout leaves the sidebar out for it (.app-main[data-ckwm-focus], in the
   layout sheet), so the composer owns the viewport. It is a column of rows and
   only the last one, the panes, scrolls, each pane inside itself. A page that
   scrolled as a whole would carry the title off with the first paragraph.

   The source is set in the mono face because it is source: a table's pipes and
   a fence's indentation line up. The page beside it is .md-content at the
   document measure, which is how the document page reads it once saved.

   While somebody types, the script marks the composer and the bar and the meta
   row fade until the pointer moves or focus enters the bar. That fade is the
   only motion here.
   ========================================================================== */

.composer {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--surface);
    color: var(--text);
}

/* === The bar =============================================================== */

/* The status line takes the slack and truncates, so a long commit line never
   pushes Save past the edge. */
.composer-bar {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-5) var(--space-12);
    border-bottom: var(--border-width) solid var(--border-subtle);
    font-size: var(--text-sm);
    transition: opacity var(--transition-slow) var(--ease-out);
}
.composer-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-muted);
    white-space: nowrap;
    transition: color var(--transition);
}
.composer-back:hover { color: var(--text); }
.composer-back:focus-visible {
    outline: none;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 var(--border-accent) var(--brand-ring);
}

/* A commit line is a commit line, so it is set the way git prints one. */
.composer-status {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.composer-status[data-refused] { color: var(--danger-on-soft); }

/* Three modes as one segmented control: a sunken track with the chosen one
   raised out of it. */
.composer-modes {
    display: inline-flex;
    flex-shrink: 0;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}
.composer-mode {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-5);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.composer-mode:hover { color: var(--text); }
.composer-mode[aria-pressed="true"] {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
.composer-mode:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--border-accent) var(--brand-ring);
}

.composer-refusal { padding: var(--space-8) var(--space-12) 0; }

/* === The head ============================================================== */

.composer-head { padding: var(--space-14) var(--space-12) var(--space-8); }

/* The record's number, then its status and what it replaces, at the size of a
   caption. Each select looks like the word it holds until the pointer finds it,
   because a row of bordered boxes above a heading reads as a form. */
.composer-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-12);
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
    color: var(--text-muted);
    transition: opacity var(--transition-slow) var(--ease-out);
}
.composer-marker {
    font-family: var(--font-mono);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    color: var(--text-body);
}
.composer-field {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.composer-select,
.composer-input {
    max-width: 24rem;
    padding: var(--space-1) var(--space-3);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
/* The arrow stays at rest: it is the one mark that says the word opens a list. */
.composer-select {
    padding-right: var(--space-16);
    background: var(--select-arrow), transparent;
}
/* background-color, not the shorthand, which would take the arrow away on hover. */
.composer-select:hover,
.composer-input:hover {
    border-color: var(--border);
    background-color: var(--surface-alt);
}
.composer-select:focus,
.composer-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 var(--border-accent) var(--brand-ring);
}
/* The title is the page heading, typed at that size. A textarea so a long
   decision wraps; field-sizing grows it a line at a time, and the script does the
   same in a browser without it. */
.composer-title {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    resize: none;
    overflow: hidden;
    field-sizing: content;
    font-size: var(--text-6xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--text);
}
.composer-title::placeholder { color: var(--text-subtle); }
.composer-title:focus { outline: none; }

/* === The panes ============================================================= */

.composer-panes {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-top: var(--border-width) solid var(--border-subtle);
}

/* The desk: one step off the page's own ground, so the two panes read as the
   source and the sheet it prints to. */
.composer-source {
    display: block;
    width: 100%;
    height: 100%;
    padding: var(--space-12) var(--space-12) var(--space-24);
    border: none;
    border-right: var(--border-width) solid var(--border-subtle);
    border-radius: 0;
    background: var(--surface-alt);
    color: var(--text-body);
    font-family: var(--font-mono);
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    tab-size: 4;
    resize: none;
    overflow-y: auto;
}
.composer-source::placeholder { color: var(--text-subtle); }
.composer-source:focus { outline: none; }

.composer-preview {
    min-width: 0;
    overflow-y: auto;
    padding: var(--space-12) var(--space-12) var(--space-24);
}
/* The rendered page sits at the document measure, centred in whatever width the
   mode leaves it. */
.composer-preview > * { margin-inline: auto; }

/* === The modes ============================================================= */

.composer[data-mode="write"] .composer-panes,
.composer[data-mode="preview"] .composer-panes { grid-template-columns: minmax(0, 1fr); }
.composer[data-mode="write"] .composer-preview,
.composer[data-mode="preview"] .composer-source { display: none; }

/* One pane: the source and the title move into the reading column, so writing
   alone looks like the page it will be. */
.composer[data-mode="write"] .composer-source {
    border-right: none;
    background: var(--surface);
    padding-inline: max(var(--space-12), calc((100% - var(--measure-document)) / 2));
}
.composer[data-mode="write"] .composer-head,
.composer[data-mode="preview"] .composer-head {
    padding-inline: max(var(--space-12), calc((100% - var(--measure-document)) / 2));
}

/* === Typing ================================================================ */

.composer[data-typing] .composer-bar,
.composer[data-typing] .composer-meta { opacity: 0.3; }
.composer[data-typing] .composer-bar:focus-within { opacity: 1; }