/* Tokens (base/root.css) are linked once site-wide — see fragments/header.html. */
/* Canonical text-field look + character counter — see base/field.css. The
   `.form-group input/select/textarea` block that used to live below was an
   almost-copy of it (2px border, hardcoded gold glow) and has been removed, so
   a form field and a popup field are now literally the same field. */
@import url(field.css);

/* ============================================================================
   FORM PANEL SYSTEM — the single source of truth for every item form.
   ----------------------------------------------------------------------------
   Generalised from the character creator (create/character.css), which was the
   reference implementation: a card-style panel whose title block is a ≥30px
   heading followed by a horizontal rule.

   Markup contract — every form panel is:

       <div class="form-section">
           <div class="section-header"><h2>Panel title</h2></div>
           …fields…
       </div>

   `.section` is kept as a legacy alias (cp-event / group used it) and
   `.section-title` as a legacy alias for the heading, so both spellings render
   identically. New markup should use `.form-section` + `<h2>`.

   These rules live here — not in the per-page stylesheets — because every
   create/*.css and page/*.css form stylesheet imports base/form.css. The flat
   duplicates that used to sit in ~8 of those files have been removed; what is
   left there is page-specific only.

   EVERYTHING BELOW IS SCOPED TO `.form-container`, which is used by the nine
   item forms and nothing else. base/form.css is also imported by page/admin,
   page/settings, page/profile, page/item/character … and those pages have
   their own unrelated `.section-header` blocks — unscoped rules here would
   silently restyle them.
   ========================================================================== */

.form-container .form-section,
.form-container .section {
    background: var(--panel-bg);
    padding: 2.5rem;
    border-radius: var(--radius-xl);
    border: var(--panel-border);
    box-shadow: var(--shadow-card);
    margin-bottom: 2rem;
}

.form-container .section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    /* The rule under the title — the "line after" that defines this system. */
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--overlay-xl, rgba(255, 255, 255, 0.2));
}

/* Panel titles are at least 30px. 1.9rem = 30.4px at the default root size. */
.form-container .section-header h2,
.form-container .section-header h3,
.form-container .section-header .section-title,
.form-container .form-section > .section-title,
.form-container .section > .section-title {
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
}

/* A bare `.section-title` used as the panel title (no .section-header wrapper)
   still needs the rule under it, otherwise those panels look headerless. */
.form-container .form-section > .section-title,
.form-container .section > .section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--overlay-xl, rgba(255, 255, 255, 0.2));
}

/* Optional leading icon chip. Kept for panels that still pass one. */
.form-container .section-icon {
    font-size: 2rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: 12px;
}

/* ── Form group ──────────────────────────────────────────────────── */

.form-group { margin-bottom: 1.5rem; }

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Field styling itself is base/field.css (imported above) — a `.form-group`
   only supplies the label/spacing wrapper around it. */

/* ── Layout helpers ──────────────────────────────────────────────── */

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }

/* A wide primary field with a narrow companion beside it — the media and
   gallery forms pair Title with the Category dropdown this way. Stacks to one
   column under 768px through the `.form-row` rule at the bottom of this file. */
.form-row-wide { grid-template-columns: 2fr 1fr; }

/* The character form's identity row: a free-text name, the narrow medium-type
   dropdown, and the main medium title that decides WHICH character of that name
   is meant. The title gets the name's width because it is free text with a
   suggestion menu under it, and a truncated series title is unreadable. */
.form-row-identity { grid-template-columns: 2fr 1fr 2fr; }

.form-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--overlay-xl);
}

/* RESPONSIVE FIX: on phones every form row stacks to a single column so
   each input is full-width and fully visible (applies to ALL item forms
   since they import this file). */
@media (max-width: 768px) {
    .form-row { grid-template-columns: 1fr; gap: 20px; }
    .form-row-3 { grid-template-columns: 1fr; }

    .form-actions { flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
}

/* ============================================================================
   SECTION HEADERS + SECTION BOXES — shared responsive treatment.
   ----------------------------------------------------------------------------
   Every item form is `.form-container > form > .form-section > .section-header
   > h2`. The styling for that chain used to be duplicated flat in ~8
   stylesheets (create/character.css, create/of-commission.css,
   create/event.css, create/group.css, create/commission-req.css,
   page/build.css, page/commission-req.css, page/group-manage.css …) — all as
   single-class selectors like `.section-header h2 { font-size: 1.8rem }`.
   Those duplicates are gone; the canonical rules are at the top of this file.

   Two pages load two of those files at once (build.html and media.html load
   create/character.css AND page/build.css), so a mobile override placed in
   one of them lost to the *unconditional* rule in the other purely on source
   order. Scoping to `.form-container` here raises the specificity to 0-2-x,
   which beats every flat 0-1-x rule regardless of which file loads last.
   base/form.css is imported by all of them, so this reaches every form.
   ========================================================================== */

/* The icon is a fixed-size chip; it must never be squeezed by a long title,
   and the title must be allowed to wrap inside whatever room is left
   (flex items default to min-width: auto, which blocks that). */
.form-container .section-header {
    min-width: 0;
    flex-wrap: wrap;
}

.form-container .section-icon {
    flex: 0 0 auto;
}

.form-container .section-header h2,
.form-container .section-header .section-title,
.form-container .form-section > .section-title,
.form-container .section > .section-title {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

@media (max-width: 768px) {
    /* 2.5rem of padding per side ate 80px of a 360px screen, which is what
       made the forms feel (and measure) far too wide for a phone. */
    .form-container .form-section,
    .form-container .section {
        padding: 1.25rem;
        border-radius: var(--radius-lg);
        margin-bottom: 1.25rem;
    }

    .form-container .section-header,
    .form-container .form-section > .section-title,
    .form-container .section > .section-title {
        gap: 0.75rem;
        margin-bottom: 1.25rem;
        padding-bottom: 0.75rem;
    }

    /* The 30px desktop size cannot survive a 360px screen: a single long word
       ("Personalisation") is already wider than the panel. Titles scale down
       here only — the ≥30px rule is a desktop rule. */
    .form-container .section-header h2,
    .form-container .section-header .section-title,
    .form-container .form-section > .section-title,
    .form-container .section > .section-title { font-size: 1.45rem; }

    .form-container .section-icon {
        font-size: 1.4rem;
        width: 38px;
        height: 38px;
    }

    /* Full-width stacked actions — easier to hit, and they cannot overflow. */
    .form-container .form-actions { flex-direction: column; }
    .form-container .form-actions .btn { width: 100%; padding: 0.9rem 1rem; }
}

@media (max-width: 480px) {
    .form-container .form-section,
    .form-container .section { padding: 1rem 0.85rem; }

    .form-container .section-header h2,
    .form-container .section-header .section-title,
    .form-container .form-section > .section-title,
    .form-container .section > .section-title { font-size: 1.25rem; }

    .form-container .section-icon {
        font-size: 1.2rem;
        width: 32px;
        height: 32px;
    }
}

/* ── Annotations ─────────────────────────────────────────────────── */

.help-text {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
    font-style: italic;
}

/* .required MOVED to base/field.css (one required-star for the whole site). */