/* Layout and typography of the composer's form come from the global form
   theme (assets/styles/form.css); only the page-band framing lives here. */
@layer block {
    .story-composer {
        padding-block: var(--space-4);
        padding-inline: max(var(--space-page-mobile), calc((100% - var(--content-max-width)) / 2));
        border-bottom: 1px solid var(--color-border);

        /* The story is the loudest thing on the page — a display-sized font in
           a field padded like an e-mail input would read as cramped. */
        & .form .form__control {
            padding: var(--space-3);
        }

        /* The label and the switch that changes it, on one line. */
        & .story-composer__prompt {
            justify-content: space-between;
            --cluster-space: var(--space-2);
        }

        /* Both labels ship in the markup and the checkbox decides which one is
           on screen, so the switch needs no JavaScript and no page load. The
           hidden one is `display: none`, which also keeps it out of the
           accessibility tree — a screen reader hears one label, not two. */
        & .story-composer__mode ~ .story-composer__label .story-composer__label-text[data-mode="free"] {
            display: none;
        }

        & .story-composer__mode:checked ~ .story-composer__label {
            & .story-composer__label-text[data-mode="theme"] {
                display: none;
            }

            & .story-composer__label-text[data-mode="free"] {
                display: inline;
            }
        }

        /* A chip, not a button: pressing it changes what the composer is, it
           does not submit anything. */
        & .story-composer__mode-toggle {
            padding: var(--space-1) var(--space-2);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            background: none;
            color: var(--color-text-muted);
            font-family: var(--font-ui);
            font-size: var(--text-label-caps);
            font-weight: var(--weight-label);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            cursor: pointer;
            user-select: none;
            transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);

            &:hover {
                border-color: var(--color-accent);
                color: var(--color-text);
            }
        }

        & .story-composer__mode:checked ~ .story-composer__mode-toggle {
            border-color: var(--color-accent);
            background: var(--color-accent);
            color: var(--color-accent-on);
        }

        /* The checkbox itself is visually hidden, so the focus ring it would
           have drawn has to land on the chip standing in for it. */
        & .story-composer__mode:focus-visible ~ .story-composer__mode-toggle {
            outline: 2px solid var(--color-accent);
            outline-offset: 2px;
        }
    }
}