/**
 * Scripts surfaces — chrome around the Splashline paper (editor bar, list,
 * view bar). This is the RESTYLABLE half; the paper itself lives in
 * components/paper.css under the pagination contract and must not change.
 * Phase 6 dresses this in the Sahtu house brand; for now it stays plain
 * and token-driven.
 */

/* Brand override for the engine's cosmetic accent. paper.css (upstream,
   do-not-edit) defines --accent as Splashline purple for the editor caret
   and comic panel badges. Overriding the VARIABLE here — this file loads
   after paper.css — recolors those to Sahtu Navy without touching the
   upstream copy or any pagination geometry. Navy, not orange: badges are
   information, not actions. */
:root {
    --accent: var(--color-navy);
}

/* The editor and the preview both own their whole top bar (the shared
   .script-nav), so their main-content is flush — the nav provides the top
   chrome and the .write wrapper handles the paper's own spacing. */
#script-editor .main-content,
#script-view .main-content {
    background: var(--color-background, #fff);
    padding: 0;
}

#scripts .main-content {
    padding-top: var(--spacing-xl, 2rem);
}

/* Override the upstream heavy drop-shadow with a softer treatment that
   suits the white-on-white page. Border + radius give the sheet a quiet
   edge without needing a dark backdrop for contrast. */
#script-editor .sheet,
#script-view .sheet {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 2px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--color-border, #e2e0da);
    border-radius: 4px;
}

/* --- Script nav (shared: editor + preview) ------------------------------ */
/* One flush sticky bar holding everything: the compact brand mark, the
   full-width title, and icon controls split editor-actions | account.
   Replaces the generic site header on both the editor and the preview. */
.script-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    padding: var(--spacing-sm, 0.75rem) var(--spacing-lg, 1.5rem);
    background: var(--color-background, #fff);
    /* Drop shadow that grows as the sheet scrolls under the bar. The scroll
       handler in scripts/partials/nav ramps --nav-shadow-alpha from 0 (at
       the top) to 1, so the shadow both appears and deepens as you scroll. */
    --nav-shadow-alpha: 0;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, calc(0.14 * var(--nav-shadow-alpha))),
        0 6px 18px rgba(0, 0, 0, calc(0.09 * var(--nav-shadow-alpha)));
}

/* Small mark, sized like the settings nav. Ink, not the orange link color. */
.script-nav-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--color-text) !important;
    font-size: var(--font-size-sm);
    line-height: 0;
}

/* Title sits right after the logo and stretches to fill the bar. In edit
   mode it reads as plain text until hovered/focused, then shows an input
   affordance; in preview it's a static label. */
.script-nav-title {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-family: var(--font-heading);
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    transition: border-color 0.2s ease, background 0.2s ease;
}

input.script-nav-title:hover { border-color: var(--color-border); }

input.script-nav-title:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-surface);
}

.script-nav-title.error { border-color: var(--color-error, #b3261e); }

/* Preview title: same slot, but a static, non-interactive label. */
.script-nav-title--static {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--font-weight-medium, 500);
}

/* "by @username" attribution after the title on the share view. Stays in the
   body font so it reads as metadata against the serif title. */
.script-nav-byline {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm, 0.95rem);
    color: var(--color-text-light, #777);
    font-weight: var(--font-weight-normal, 400);
}

.script-nav-byline a {
    color: inherit;
    font-style: italic;
    text-decoration: none;
}

.script-nav-byline a:hover {
    text-decoration: underline;
}

.script-nav-status {
    flex-shrink: 0;
}

.script-nav-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.5rem);
    flex-shrink: 0;
}

/* Pipe divider between the editor actions and the account actions. */
.script-nav-pipe {
    width: 1px;
    height: 1.4em;
    background: var(--color-border-dark);
    margin: 0 var(--spacing-xs, 0.5rem);
}

/* Icon-button tooltips: a label (plus a keyboard hint where one exists) that
   drops below the button on hover/focus. Custom, not native title=, so the
   shortcut can render as a real <kbd>. */
.script-nav-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.script-nav-tip-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    z-index: 1100;
    visibility: hidden;
    opacity: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: max-content;
    max-width: 220px;
    padding: 0.3rem 0.5rem;
    background: var(--color-neutral-900);
    color: var(--color-text-inverse);
    border-radius: var(--radius-tag);
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
}

/* Arrow pointing up at the button. */
.script-nav-tip-pop::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -4px;
    border: 4px solid transparent;
    border-bottom-color: var(--color-neutral-900);
}

.script-nav-tip:hover .script-nav-tip-pop,
.script-nav-tip:focus-within .script-nav-tip-pop {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.script-nav-tip-pop kbd {
    font-family: var(--font-ui);
    font-size: 0.85em;
    padding: 0.1em 0.4em;
    border-radius: 4px;
    line-height: 1;
    background: color-mix(in srgb, var(--color-text-inverse) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text-inverse) 32%, transparent);
}

/* Public / private switch. Globe and lock sit in the gutter; the knob
   slides over the inactive one, so the exposed icon always names the current
   state (lock when private, globe when public). Public turns the track orange
   (a published script is a state worth flagging). */
.vis-switch {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.vis-switch-track {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    border-radius: var(--border-radius-pill);
    background: var(--color-border);
    border: 1px solid var(--color-border-dark);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.vis-switch.is-public .vis-switch-track {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.vis-switch-ico {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    line-height: 1;
    z-index: 1;
}

.vis-switch-ico--public  { left: 7px;  color: #fff; }
.vis-switch-ico--private { right: 7px; color: var(--color-text-light); }

.vis-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
    z-index: 2;
}

.vis-switch.is-public .vis-switch-knob {
    transform: translateX(22px);
}

.vis-switch:focus-visible {
    outline: none;
}

.vis-switch:focus-visible .vis-switch-track {
    box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-primary);
}

/* --- Script sheet (shared) ---------------------------------------------- */

.write {
    max-width: var(--page-width);
    margin: 0 auto;
    padding-top: var(--spacing-xl, 2rem);
    padding-bottom: var(--spacing-3xl, 3rem);
}

/* --- Reading view (mobile projection of the paper) ---------------------- */
/* A reflowed, screen-width reading surface built from the parser tokens (see
   App\Services\ReadingRenderer). The paper (.write) shows on desktop; this
   shows on narrow screens. Never touches the pagination contract. */
.reading-view { display: none; }

.reading {
    max-width: 42rem;
    margin: 0 auto;
    padding: var(--spacing-lg, 1.5rem) var(--spacing-md, 1rem) var(--spacing-3xl, 3rem);
    font-family: var(--font-family-mono);
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text);
}

.rf-titlepage {
    text-align: center;
    margin-bottom: var(--spacing-xl, 2rem);
}

.rf-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl, 2rem);
    margin: 0 0 var(--spacing-xs, 0.5rem);
}

.rf-byline {
    margin: 0.1rem 0;
    font-family: var(--font-primary);
    color: var(--color-text-light);
}

/* It's an h2, so the global heading rule would make it serif — a script is
   Courier throughout, scene headings included. Pin it back. */
.rf-scene {
    font-family: var(--font-family-mono);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 1.5em 0 0.6em;
}

.rf-action { margin: 0 0 1em; }

.rf-character {
    font-weight: 700;
    text-transform: uppercase;
    margin: 1.2em 0 0;
}

.rf-paren {
    font-style: italic;
    color: var(--color-text-light);
    margin: 0;
}

.rf-dialogue { margin: 0 0 0.3em; }

.rf-transition {
    text-transform: uppercase;
    text-align: right;
    color: var(--color-text-light);
    margin: 1.2em 0;
}

.rf-centered { text-align: center; margin: 1em 0; }
.rf-lyric { font-style: italic; margin: 0 0 0.5em; }

/* Real paper-page boundary: a "Page N" label between two rules. */
.rf-pagebreak {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    margin: var(--spacing-xl, 2rem) 0 var(--spacing-lg, 1.5rem);
    font-family: var(--font-primary);
    font-size: var(--font-size-xs, 0.875rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-light);
}

.rf-pagebreak::before,
.rf-pagebreak::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

/* --- Editor: desktop-only for now --------------------------------------- */
/* The live-formatting editor is paper-based and unusable at phone width, so a
   note stands in until a mobile editor ships. */
.editor-mobile-block { display: none; }

.editor-mobile-block-inner {
    max-width: 22rem;
    margin: 0 auto;
    text-align: center;
}

.editor-mobile-block-inner i {
    font-size: 2.5rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md, 1rem);
}

.editor-mobile-block-inner h1 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl, 1.5rem);
    margin: 0 0 var(--spacing-sm, 0.75rem);
}

.editor-mobile-block-inner p {
    color: var(--color-text-light);
    margin: 0 0 var(--spacing-lg, 1.5rem);
}

/* --- Reading view: comic beats ------------------------------------------ */

.rf-panel {
    margin: 1.4em 0 0.4em;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
}

.rf-sfx {
    margin: 0 0 0.4em;
    font-style: italic;
    font-weight: 700;
}

.rf-caption {
    margin: 0 0 0.6em;
    padding-left: 0.7em;
    border-left: 2px solid var(--color-border);
    color: var(--color-text);
}

/* Swap paper -> reading on small screens (the view/share page only). Only
   swap when there IS a reading view to swap to, so a format without one can
   never leave a blank page. */
@media (max-width: 700px) {
    #script-view:has(.reading-view) .write { display: none; }
    #script-view .reading-view { display: block; }

    /* Editor: hide the paper surface + its nav, show the note. */
    #script-editor .script-nav,
    #script-editor .write { display: none; }
    #script-editor .editor-mobile-block {
        display: flex;
        min-height: 80vh;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-xl, 2rem) var(--spacing-lg, 1.5rem);
    }
}

.status {
    color: var(--color-text-light, #777);
    font-size: 0.85rem;
    white-space: nowrap;
}

.status.error { color: var(--color-error, #b3261e); }

/* Unsaved work on an unowned script: the Save control grows insistent.
   (The pressure is the point — saving is the reason to make an account.) */
.button.save-insistent {
    animation: save-pulse 2s ease-in-out infinite;
}

@keyframes save-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

/* --- List container ----------------------------------------------------- */

.listing {
    max-width: 44rem;
    margin: 0 auto;
    padding: var(--spacing-xl, 2rem) var(--spacing-md, 1rem);
}

.listing .muted { color: var(--color-text-light, #777); font-size: 0.85rem; }
.listing .empty { color: var(--color-text-light, #777); }

/* Section header: title left, add-actions at the tail end. */
.script-list-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm, 0.75rem);
    margin-bottom: var(--spacing-lg, 1.5rem);
}

.script-list-title {
    margin: 0 0 0 var(--spacing-xs);
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    font-style: italic;
}

.script-list-actions {
    display: flex;
    gap: var(--spacing-sm, 0.75rem);
    margin: 0;
}

/* --- Script grid: paper-thumbnail cards --------------------------------- */

.script-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg, 1.5rem);
}

/* A container so the title can size against the CARD, not the viewport —
   a vw-based size collapses to its floor on a phone. */
.script-card {
    min-width: 0;
    container-type: inline-size;
}

/* Positioning context for the stack: the lower sheets lie under the title
   page, which sits in flow on top of them. */
.script-card-link {
    position: relative;
    display: block;
    text-decoration: none;
}

/* Faux title page: the title centred on a paper-aspect sheet. */
.script-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 8.5 / 11;
    padding: 14% 12%;
    background: var(--color-script-paper, #fff);
    border: 1px solid var(--color-border, #e2e0da);
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 2px 12px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transform-origin: 0 100%;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* The pages under the title page, one element each so they can move on their
   own. Each lies 2px further down-right than the one above it. */
.script-sheet {
    position: absolute;
    inset: 0;
    border: 1px solid var(--color-border, #e2e0da);
    border-radius: 4px;
    background: var(--color-script-paper, #fff);
    transform-origin: 0 100%;
    transform: translate(calc(var(--i) * 2px), calc(var(--i) * 2px));
    transition: transform 0.15s ease;
}

/* Hover turns the whole stack, but not all at once: each sheet down the pile
   starts a beat later and turns a little less, so the pages fan rather than
   move as one slab. The title page itself has no delay. */
.script-card-link:hover .script-sheet {
    transform:
        translate(calc(var(--i) * 2px - 2px), calc(var(--i) * 2px - 2px))
        rotate(calc(-1.5deg + var(--i) * 0.3deg));
    transition-delay: calc(var(--i) * 0.04s);
}

/* Three-hole punch down the left edge, the way a screenplay comes out of the
   brads. Screenplays only; a comic script doesn't get bound that way.
   The offsets are cqw because the card is the container: on an 8.5:11 sheet the
   holes sit 35% of the height apart, and 35% of the height is 45.3% of the width. */
.script-card[data-format="screenplay"] .script-thumb::before {
    content: '';
    position: absolute;
    left: 4%;
    top: 15%;
    width: 3cqw;
    height: 3cqw;
    border-radius: 50%;
    background: var(--color-border, #e2e0da);
    box-shadow: 0 45.3cqw 0 var(--color-border, #e2e0da),
                0 90.6cqw 0 var(--color-border, #e2e0da);
}

/* Hover: the sheet tips off the desk, pivoting on its bottom-left corner. */
.script-card-link:hover .script-thumb {
    transform: translate(-2px, -2px) rotate(-1.5deg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10), 0 8px 22px rgba(0, 0, 0, 0.08);
}

.script-thumb-title {
    font-family: var(--font-family-mono);
    font-size: clamp(0.8rem, 8cqw, 1.15rem);
    line-height: 1.35;
    text-align: center;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--color-text, #222);
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.script-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: var(--spacing-xs, 0.5rem);
    min-height: 1.6rem;
}

.script-card-edited {
    font-size: var(--font-size-xxs, 0.75rem);
    color: var(--color-text-light, #777);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Owner-only visibility marker (globe = public, lock = hidden). Grey, so it
   reads as metadata beside the edited date rather than a warning. */
.script-card-vis {
    color: var(--color-text-light, #777);
    margin-right: 0.15rem;
}

/* Delete: hidden until the card is hovered (or the button is focused). */
/* Visible by default — touch has no hover, so it must never be hidden there. */
.script-card-delete {
    flex-shrink: 0;
    border: 0;
    background: none;
    padding: 0.15rem 0.25rem;
    font-size: var(--font-size-xxs, 0.75rem);
    cursor: pointer;
    color: var(--color-text-light, #777);
    transition: opacity 0.12s ease, color 0.12s ease;
}

/* Only fade it out until hover where hovering actually exists (mouse). */
@media (hover: hover) and (pointer: fine) {
    .script-card-delete { opacity: 0; }

    .script-card:hover .script-card-delete,
    .script-card-delete:focus-visible {
        opacity: 1;
    }
}

.script-card-delete:hover { color: var(--color-error, #b3261e); }

@media (max-width: 640px) {
    .script-grid { grid-template-columns: repeat(2, 1fr); }

    /* At this size there's no hover affordance to rely on (and a narrow
       desktop window still reports hover), so just show it. Comes after the
       hover block above, so it wins. */
    .script-card-delete { opacity: 1; }
}

@media (max-width: 380px) {
    .script-grid { grid-template-columns: 1fr; }
}

/* --- Profile: two columns (info | scripts) ------------------------------ */

.profile-layout {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4xl);
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-xl, 2rem) var(--spacing-md, 1rem);
}

.profile-sidebar {
    flex: 0 0 200px;
    width: 200px;
}

/* The scripts column reuses the .listing card styles; drop the standalone
   listing box (centering, max-width, padding) so it sits in the flex column. */
.profile-main {
    flex: 1 1 auto;
    min-width: 0;
}

.profile-layout .listing {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* isolate: the ink plates inside multiply against the portrait, not the page. */
.profile-avatar {
    isolation: isolate;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Taller than wide, like the corner box on a sixties Marvel cover. */
    aspect-ratio: 2 / 3;
    border-radius: var(--border-radius-xs);
    overflow: hidden;
    background: var(--color-neutral-200);
    border: 2px solid var(--color-ink-black);
}

/* Gravatar sits on top; the initial shows through when it fails to load. */
.profile-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Foil. One diagonal bar of light travelling across the portrait, white at
   the core with the colour splitting off either edge, the way a foil card
   throws a single band when you tilt it. It rides the pointer: --fx arrives
   from the script in scripts/partials/profile-aside, and with no pointer at
   all the bar just sits in the middle. */
.profile-avatar::before {
    content: '';
    position: absolute;
    inset: -15%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
        112deg,
        transparent 30%,
        rgba(120, 200, 255, 0.55) 42%,
        rgba(255, 255, 255, 0.95) 50%,
        rgba(255, 140, 190, 0.55) 58%,
        transparent 70%
    );
    /* The bar tracks the pointer across the frame, a touch faster than the
       cursor so the travel reads as a reflection rather than a cursor trail. */
    transform: translateX(calc((var(--fx, 50%) - 50%) * 0.8));
    mix-blend-mode: screen;
    filter: blur(2px);
    transition: opacity 0.25s ease;
}

.profile-avatar:hover::before { opacity: 1; }

/* The foil is decoration, so a writer who asked for less movement just gets
   the portrait. */
@media (prefers-reduced-motion: reduce) {
    .profile-avatar::before {
        display: none;
    }
}

.profile-avatar-fallback {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 600;
    font-style: italic;
    color: var(--color-text-light, #777);
}

.profile-name {
   padding-top: var(--spacing-lg);
   font-size: var(--font-size-xl);
   margin: 0;
}

.profile-handle {
    color: var(--color-text-light, #777);
    font-style: italic;
     margin: 0 0 var(--spacing-xs);
}

.profile-bio {
    margin: 0 0 var(--spacing-lg);
    font-size: var(--font-size-md);
    color: var(--color-text, #222);
}

.profile-edit-action {
    margin: var(--spacing-md, 1rem) 0 0;
}

/* --- Profile edit (the owner's account surface) ------------------------- */

.profile-edit {
    max-width: 34rem;
    margin: 0 auto;
    padding: var(--spacing-xl, 2rem) var(--spacing-md, 1rem) var(--spacing-3xl, 3rem);
}

.profile-edit-title {
    margin: 0 0 var(--spacing-lg, 1.5rem);
    font-family: var(--font-heading);
    font-size: var(--font-size-xl, 1.5rem);
    font-weight: var(--font-weight-medium, 500);
    font-style: italic;
}

/* settings.css sizes some inputs to content; a form reads better flush. */
.profile-edit .form-control {
    width: 100%;
    box-sizing: border-box;
}

.profile-edit-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    margin-top: var(--spacing-lg, 1.5rem);
}

/* Destructive, so it rides the far end of the row, away from Save. Red text on
   a ghost so it reads as a warning without competing with the primary action. */
.button.ghost.profile-edit-danger {
    margin-left: auto;
    color: var(--color-danger-dark);
}

.button.ghost.profile-edit-danger:hover:not(:disabled) {
    color: var(--color-danger-dark);
    background: var(--color-danger-light);
}

/* Editable fields: a dashed box that reads "fill me in", solid on focus. */
.profile-field {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    color: var(--color-text, #222);
    padding: 0.4rem 0.5rem;
    margin-bottom: var(--spacing-sm, 0.75rem);
    border: 1px dashed var(--color-border, #ccc);
    border-radius: 6px;
    background: transparent;
    resize: vertical;
}

.profile-field::placeholder {
    color: var(--color-text-light, #777);
}

.profile-field:focus {
    outline: none;
    border-style: solid;
    border-color: var(--color-primary, #2f6b4f);
}

.profile-field--name {
    font-size: 1.25rem;
    font-weight: 600;
}

.profile-handle-edit {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-text-light, #777);
}

.profile-handle-edit .profile-field {
    margin-bottom: var(--spacing-sm, 0.75rem);
}

@media (max-width: 640px) {
    /* Stacked, and stretched: in column direction align-items governs the
       horizontal axis, so flex-start would shrink the script grid to its
       content and strand the rest of the width. */
    .profile-layout {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-4xl);
    }

    /* Avatar left, the writer's details beside it. */
    .profile-sidebar {
        flex-basis: auto;
        width: 100%;
        max-width: none;
        display: flex;
        align-items: center;
        gap: var(--spacing-lg);
    }

    /* A full-width circle would eat the whole screen on a phone. */
    .profile-avatar {
        flex: 0 0 112px;
        width: 112px;
        margin-bottom: 0;
    }

    .profile-info {
        flex: 1 1 auto;
        min-width: 0;
    }

    .profile-avatar-fallback { font-size: 2.5rem; }
}

/* --- Print: chrome disappears, only the paper prints --------------------- */

@media print {
    .header,
    .static-footer,
    .script-nav,
    .cookie-banner { display: none !important; }

    #script-view .main-content { background: #fff; padding: 0; }
    #script-view .write { padding: 0; }
}

/* --- Export menu ----------------------------------------------------------
   A <details>, so it opens, closes and takes focus with no script. Two
   downloads need naming: "Export" alone never says what lands in the folder. */
.script-nav-menu {
    position: relative;
    display: inline-flex;
}

.script-nav-menu summary {
    list-style: none;
    cursor: pointer;
}

.script-nav-menu summary::-webkit-details-marker {
    display: none;
}

.script-nav-menu-items {
    position: absolute;
    right: 0;
    top: calc(100% + var(--spacing-xs, 0.5rem));
    min-width: 15rem;
    background: var(--color-background, #fff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    padding: var(--spacing-xs, 0.4rem);
    z-index: 20;
}

.script-nav-menu-items a,
.script-nav-menu-items button {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
    padding: var(--spacing-sm) var(--spacing-sm);
    border-radius: var(--radius-tag);
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.3;
}

.script-nav-menu-items a:hover,
.script-nav-menu-items button:hover {
    background: var(--color-paper);
}

/* The second line says what the item actually produces. */
.script-nav-menu-items a span,
.script-nav-menu-items button span {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

@media print {
    .script-nav-menu { display: none; }
}