/* ============================================================================
   SYNTHESIZE BOTTOM RAIL

   One place to commit, on every Synthesize screen. Context on the left (what
   you have), the screen's primary action on the right (what happens next).

   Before this, the action you needed lived somewhere different on every
   screen: intake's "Start synthesis" sat inside the right-hand artifacts rail,
   review's "build the synthesis" at the end of a long scroll, the recap's in
   its own #recap-send section. The rail gives all of them one address.

   Its own stylesheet rather than a block in synthesize.css, because the picker
   page (/app/?view=synthesize&step=home) is a server-rendered page that does
   not load the tool's stylesheet, and two copies of these rules would drift.
   app/index.php loads it for both steps.

   Not fixed-position: .synth-shell is already a flex column whose .synth-stage
   scrolls (synthesize.css), so the rail is simply that column's last child. It
   sits at the bottom of the tool without ever covering the content above it,
   and needs no scroll padding to compensate.
   ============================================================================ */

.synth-rail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    flex-shrink: 0;
    padding: var(--space-3, 12px) var(--space-6, 24px);
    background: var(--bg-surface, #FFFFFF);
    /* The border carries the separation on its own. An upward lift was tried
       and dropped: every --shadow-* token casts downward, so it would fall
       behind the rail instead of above it, and inventing a one-off inverted
       shadow is exactly the hardcoded value the token system exists to stop. */
    border-top: 1px solid var(--gray-200, #E7E5E4);
}

.synth-rail[hidden] { display: none; }

/* ---- left: what you have ------------------------------------------------ */

.synth-rail__ctx {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: var(--text-small, 0.875rem);
    color: var(--color-ink-secondary, #57534E);
}

.synth-rail__ctx strong {
    color: var(--color-ink, #2C2416);
    font-weight: var(--font-semibold, 600);
}

.synth-rail__hint {
    font-size: var(--text-caption, 0.75rem);
    color: var(--color-ink-muted, #78716C);
    line-height: 1.4;
}

/* ---- right: what happens next ------------------------------------------- */

.synth-rail__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    flex-shrink: 0;
}

/* The tool sizes its own type with a px-times-scale system (see the --tscale
   note in synthesize.css); the rail's buttons are platform ws-btn components,
   so they are left on the platform scale rather than pulled into that one. */
.synth-rail .ws-btn { white-space: nowrap; }

@media (max-width: 720px) {
    .synth-rail {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2, 8px);
        padding: var(--space-3, 12px) var(--space-4, 16px);
    }
    .synth-rail__actions { justify-content: flex-end; }
    /* The commit action goes full-width on a phone: it is the one thing the
       screen is asking for, and a thumb should not have to aim for it. */
    .synth-rail__actions .ws-btn--primary { flex: 1; justify-content: center; }
}