/* Dock panel. `.drawer-panel--dock` styles nothing on its own; it marks the
   panel so drawer.js leaves this always-present node out of its ephemeral
   reconcile. Because the node never leaves the DOM, a CLOSED panel still keeps
   its inputs and buttons in the tab order — translateX alone moves pixels, not
   focusability — so visibility is taken away too. It is a discrete property, so
   it flips at the far end of the slide rather than blanking the panel on its
   way out. Same recipe as `.settings-prop-def-drawer` in properties.css. The
   Naming drawer behind the gear is the page's second dock panel and wears
   the same rule. */
.settings-tmpl-drawer,
.settings-naming-drawer {
    transition: transform .2s ease, visibility .2s ease;
}

.settings-tmpl-drawer:not(.is-open),
.settings-naming-drawer:not(.is-open) {
    visibility: hidden;
}

/* The shelf under the body. It holds Save on a normal open and the remove
   confirmation when one is running, so it is one border and one rhythm rather
   than two footers that swap. */
.settings-tmpl-foot {
    padding: var(--spacing-md) var(--spacing-mdlg);
    border-top: 1px solid var(--color-border-subtle);
}

/* Remove, confirmed in place. Deliberately NOT a modal: the record being
   removed is the one filling the panel above, and a dialog over the top hides
   exactly the thing the admin is checking before they commit. Both branches —
   the refusal and the go-ahead — wear the same three rows (eyebrow, sentence,
   actions) so the shelf never jumps between them. */
.settings-tmpl-confirm {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* The eyebrow rides the shared `.settings-section-label` for its type; this
   only lays the icon beside it and drops the paragraph margin. */
.settings-tmpl-confirm__label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xsm);
    margin: 0;
}

/* Red is spent on the branch that actually destroys something. A refusal is not
   a failure — nothing went wrong, the record is simply still in use — so it
   keeps the muted eyebrow and says so in words. */
.settings-tmpl-confirm--danger .settings-tmpl-confirm__label {
    color: var(--color-error);
}

.settings-tmpl-confirm__body {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* The refusal sentence is the server's own words, verbatim — the same string
   the DELETE answers with. Set on a quiet ground so it reads as a verdict
   handed back rather than as more page copy, which is the difference between
   "the system checked" and "someone wrote a warning here". */
.settings-tmpl-confirm--blocked .settings-tmpl-confirm__body {
    padding: var(--spacing-sm) var(--spacing-sm);
    border-radius: var(--radius-sm);
    background: var(--color-surface-subtle);
}

/* What goes with it. Quieter than the sentence it trails, because it is the
   consequence rather than the question. */
.settings-tmpl-confirm__aside {
    color: var(--color-text-muted);
}

.settings-tmpl-confirm__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

/* The default-roles and required-abilities pickers. A scroll box rather than a
   free-growing list: an org with thirty roles would otherwise push Save off the
   bottom of the panel, and the drawer body scrolling instead means the field
   labels above scroll away with it. */
.settings-tmpl-picklist {
    max-height: 180px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

/* A skill requirement carries a level <select> and a remove button inside the
   chip, so it needs a little more vertical room than a resting `.global-chip`
   holding text alone. Padding only — the chip's own fill, radius and type stay
   the component's. */
.settings-tmpl-skill-chip {
    padding-block: var(--spacing-xs);
}

/* The tag-palette picker: one round button per --tag-* hue, replacing the free
   color wheel. Each button's fill is set inline from its token, so this file
   never repeats the palette. background-clip keeps the fill inside the border
   box, so the selected dot gains an ink ring with a clear gap around the
   fill — a mark that reads on every hue, which a check glyph or an accent
   border would not. */
.settings-tmpl-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.settings-tmpl-swatch {
    width: 28px;
    height: 28px;
    padding: var(--spacing-2xs);
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    background-clip: content-box;
    cursor: pointer;
}

.settings-tmpl-swatch.is-selected {
    border-color: var(--color-neutral-ink);
}

.settings-tmpl-swatch:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

/* ── Naming drawer (_naming_drawer.html + _naming.html) ─────────────── */

/* The body is four .settings-section blocks straight in the drawer body —
   the two piece lists, the join, the preview — and the sections space
   themselves (settings-controls.css), so there is no wrapper rule here. */
.settings-naming-list {
    display: flex;
    flex-direction: column;
}

/* One line per piece: grip, checkbox, name, and the kind of thing it is.
   The grip column stays in the off list too, so the names line up. */
.settings-naming-piece {
    display: grid;
    grid-template-columns: 1rem auto minmax(0, 1fr) max-content;
    align-items: center;
    column-gap: var(--spacing-sm);
    min-height: 2.5rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-top: 1px solid var(--color-border-hairline);
}

.settings-naming-piece:last-of-type {
    border-bottom: 1px solid var(--color-border-hairline);
}

.settings-naming-piece > .form-check-input {
    margin: 0;
}

.settings-naming-piece__label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

.settings-naming-piece__kind {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.settings-naming-piece__grip {
    width: 1rem;
    color: var(--color-text-muted);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.settings-naming-piece:hover .settings-naming-piece__grip {
    opacity: 1;
}

.settings-naming-piece.is-sortable-ghost {
    background: var(--color-action-tint);
}

.settings-naming__separator {
    max-width: 14rem;
}

/* The server's answer: each of the newest bookings, reference then name. */
.settings-naming-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-smd) var(--spacing-md);
    border: 1px solid var(--color-border-hairline);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.settings-naming-preview__spinner {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
}

.settings-naming-preview__row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--spacing-sm);
    align-items: baseline;
}

.settings-naming-preview__ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.settings-naming-preview__name {
    overflow-wrap: anywhere;
}