/* ============================================================================
 * Administration -> Settings: the introduction editor and the company panel.
 *
 * Split out of app.css on 19-08-2026 (was lines 1174-1204, 1578-1635). Rules are the
 * originals, sliced not retyped.
 * ========================================================================== */

/* --------------------------------------------- Settings: the two groups */
/*
 * Company Information over its four screens, General on its own.
 *
 * The shared .tabs-row lays its children out side by side and pushes them
 * apart; here the two rows are stacked and left-aligned, because the second row
 * BELONGS TO the pill above it. Side by side they would read as eight peers.
 */
.tabs-row--grouped {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.5rem;
}

.tabs--sub { flex-wrap: wrap; }

/*
 * Quieter than the group above it: smaller, lighter, no uppercase. Same shape,
 * one step down — a sub-tab styled identically to its parent is a second row of
 * equals, which is the thing the grouping exists to stop saying.
 *
 * Indented by the width of a pill's own padding so the row visibly hangs off
 * the group rather than starting a new one.
 */
.tabs--sub { padding-left: 0.9rem; }

.tab-btn--sub {
    padding: 0.32rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

/* ------------------------------------- Settings: the introduction editor */
/* Prose, so it gets a prose measure and a comfortable line height rather than
   the tight single-line treatment the rest of the form fields use. */
.intro-editor {
    width: 100%;
    min-height: 22rem;
    font-family: inherit;
    font-size: 0.82rem;
    line-height: 1.6;
    resize: vertical;
}

/* The four markup rules, shown beside the box they apply to. */
.intro-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: var(--slate, #55648A);
}

.intro-legend code {
    background: var(--off-white, #F7F7F8);
    border: 1px solid var(--light-silver, #E3E4E9);
    border-radius: 3px;
    padding: 0 0.3rem;
    margin-right: 0.3rem;
    font-family: 'Courier New', monospace;
}

/* ====================================================== COMPANY SETTINGS */

/* Group heading inside a .form-grid — Identity / Statutory / Bank. Spans both
   columns so the fields below it read as belonging to it. */
.form-subhead {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--cyan-ink, #0A7A97);
    margin: 0.9rem 0 0;
}
.form-grid:first-of-type .form-subhead { margin-top: 0; }
.form-subhead__help { font-size: 0.72rem; color: var(--slate, #55648A); margin-bottom: 0.4rem; }
/* Pushes a note to the left of a right-aligned .form-actions row. */
.form-actions__note { margin-right: auto; }

/* A file picker dressed as a button. The input stays in the DOM and stays
   focusable — it is moved out of sight rather than display:none, which would
   take it off the keyboard tab order along with the label that triggers it. */
.upload-btn { position: relative; overflow: hidden; cursor: pointer; }
.upload-btn.is-busy { pointer-events: none; opacity: 0.7; }
.upload-btn.is-busy .fa-spinner { animation: spin 0.8s linear infinite; }
.upload-btn input[type="file"] {
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
    padding: 0; border: 0;
}

/* One singular document — the logo, the introduction PDF. */
.doc-slot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.doc-slot__body { flex: 1 1 260px; min-width: 0; }
.doc-slot__name {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem; font-weight: 600; color: var(--text-dark, #0F1E45);
}
.doc-slot__empty { font-size: 0.85rem; font-weight: 600; color: var(--slate, #55648A); }
.doc-slot__meta { font-size: 0.72rem; line-height: 1.5; color: var(--slate, #55648A); margin-top: 3px; }
.doc-slot__actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
/* Sized to roughly what the letterhead prints, so the preview is honest about
   how much detail actually survives. */
.doc-slot__logo {
    flex: none; width: 132px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    padding: 0.4rem;
    border: 1px solid var(--light-silver, #E3E4E9);
    border-radius: var(--radius-btn, 8px);
    background: #fff;
}
.doc-slot__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.cert-table__order { width: 4.5rem; white-space: nowrap; }
.cert-table__order .icon-btn + .icon-btn { margin-left: 0.25rem; }
.cert-table__title { padding: 0.35rem 0.5rem; font-size: 0.8rem; }
.cert-table__file { font-size: 0.74rem; color: var(--slate, #55648A); }
.cert-table__file .badge { margin-left: 0.4rem; }
.cert-table__actions { width: 9rem; white-space: nowrap; }
.cert-table__actions .btn + .btn { margin-left: 0.3rem; }
.cert-table .field__check { margin: 0; }

/* ------------------------------------------------------ Letterhead picker */
/*
 * The logo tiles show the artwork, because that is the whole question being
 * asked. A checkered ground behind it reveals transparency — the difference
 * between a mark that will sit on a navy cover and one that arrives as an
 * opaque white rectangle is invisible against a white card.
 */
.logo-pick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.7rem;
    margin-top: 0.7rem;
}
.logo-pick__tile {
    display: flex; flex-direction: column; gap: 0.55rem;
    padding: 0.7rem;
    border: 1px solid var(--light-silver, #E3E4E9);
    border-radius: var(--radius-btn, 8px);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.logo-pick__tile:hover { border-color: var(--cyan-ink, #0A7A97); }
.logo-pick__tile--on { background: var(--pale-cyan, #EAF7FA); border-color: var(--soft-cyan, #C3E7F0); }
.logo-pick__frame {
    display: flex; align-items: center; justify-content: center;
    height: 74px; border-radius: var(--radius-input, 6px);
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #EDEFF3 25%, transparent 25%, transparent 75%, #EDEFF3 75%),
        linear-gradient(45deg, #EDEFF3 25%, transparent 25%, transparent 75%, #EDEFF3 75%);
    background-size: 14px 14px;
    background-position: 0 0, 7px 7px;
    border: 1px solid var(--light-silver, #E3E4E9);
}
.logo-pick__frame img { max-height: 58px; max-width: 90%; object-fit: contain; }
.logo-pick__row { display: flex; align-items: center; gap: 0.5rem; }
.logo-pick__name { font-size: 0.8rem; font-weight: 600; }
.logo-pick__meta { font-size: 0.68rem; color: var(--slate, #55648A); }

/* -------------------------- the introduction and covering-letter libraries */
/*
 * What exists, above the editor for the one being written. A list rather than
 * a dropdown: which one is the default and which have been withdrawn are facts
 * an administrator needs to SEE, and a closed select shows neither.
 *
 * The two libraries share these rules rather than each having their own copy.
 * They are the same object to maintain, and a Letters screen that drifted a
 * pixel from the Introduction screen would be drift with nothing behind it.
 */
.intro-list,
.letter-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.75rem 0;
}
.intro-row,
.letter-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--light-silver, #E3E4E9);
    border-radius: var(--radius-btn, 8px);
    background: var(--white, #FFF);
}
/* The one open in the editor below, marked the same way an open section is on
   the publish screen — one idea, one visual language. */
.intro-row--open,
.letter-row--open {
    border-color: var(--cyan-ink, #0A7A97);
    box-shadow: inset 3px 0 0 var(--cyan-ink, #0A7A97);
}
/* Withdrawn: still here, still editable, no longer offered. Dimmed rather than
   hidden, because hiding it is how it becomes unrestorable. */
.intro-row--off,
.letter-row--off { background: var(--off-white, #F7F7F8); }
.intro-row--off .intro-row__title,
.letter-row--off .letter-row__title { color: var(--slate, #55648A); }

.intro-row__open,
.letter-row__open {
    flex: 1;
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: 0.6rem 0.75rem;
    background: none; border: 0; font: inherit; text-align: left; color: inherit;
    cursor: pointer;
    min-width: 0;
}
.intro-row__title,
.letter-row__title {
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
    font-size: 0.82rem; font-weight: 700; color: var(--text-dark, #0F1E45);
}
.intro-row__meta,
.letter-row__meta {
    font-size: 0.72rem; color: var(--slate, #55648A);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.intro-row__actions,
.letter-row__actions { display: flex; gap: 0.35rem; padding-right: 0.6rem; flex: none; }

/* The New button sits under the list, left-aligned with it, rather than in the
   right-aligned run of form actions at the foot of the card. */
.form-actions--left { justify-content: flex-start; }

/* ------------------------------------- the letter's {{placeholder}} fields */
/*
 * What may be written into a letter, offered as buttons that insert it.
 *
 * Used by two screens — Settings → Letters, where the template is written, and
 * the publish panel, where a proposal edits its own copy. It lives here because
 * this is where the letter library is maintained; every stylesheet loads on
 * every page, so the publish screen picks it up.
 *
 * Typed by hand these are easy to get subtly wrong — {{ site }} and {{Site}}
 * both fail — and the save refuses them rather than letting them print. Showing
 * the exact token beside what it means makes the right spelling the easy one.
 */
.field-chips { margin-top: 0.6rem; }

.field-chips__lead {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    color: var(--slate, #55648A);
}

.field-chips__list {
    display: grid;
    /* Two or three columns depending on the room; sixteen fields in one column
       is a wall, and in five they are unreadable. */
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.3rem;
}

.field-chip {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--light-silver, #E3E4E9);
    border-radius: var(--radius-btn, 8px);
    background: var(--white, #FFF);
    font: inherit;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}

.field-chip:hover { border-color: var(--cyan-ink, #0A7A97); }

.field-chip code {
    flex: none;
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    color: var(--cyan-ink, #0A7A97);
}

.field-chip span {
    font-size: 0.7rem;
    color: var(--slate, #55648A);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}