/* ==========================================================================
   The Caption — text-on-photo specific chrome.

   Extends darkroom.css (do not edit that file). Everything here is flat and
   token-driven (--pt-* / --color-*) to match the light instrument bench.
   No gradients — solid swatches and borders only.
   ========================================================================== */

.dk-cap-panel { align-items: flex-start; }

.dk-cap-addwrap { margin-left: auto; }

/* --- Layer list — instrument channel strip ------------------------------- */
.dk-cap-layers {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
    counter-reset: dk-cap-ch;
}

.dk-cap-layer {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--pt-border-strong);
    border-radius: 0.375rem;
    background: var(--pt-chrome-bg);
    overflow: hidden;
    counter-increment: dk-cap-ch;
    transition: border-color var(--pt-dur) var(--pt-ease);
}

.dk-cap-layer.is-active { border-color: var(--pt-accent); }

/* Mono channel tag (01 / 02 / 03) — the uppercase micro-label that reads as
   an instrument channel; turns amber on the active row. */
.dk-cap-layer::before {
    content: counter(dk-cap-ch, decimal-leading-zero);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 0.625rem;
    font-family: var(--pt-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--pt-text-faint);
    background: var(--pt-surface);
    border-right: 1px solid var(--pt-border);
}

.dk-cap-layer.is-active::before { color: var(--pt-accent); }

.dk-cap-layer__label {
    flex: 1 1 auto;
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-family: var(--pt-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pt-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dk-cap-layer.is-active .dk-cap-layer__label { color: var(--pt-text); }

.dk-cap-layer__remove {
    flex: 0 0 auto;
    width: 2rem;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--pt-text-faint);
    background: transparent;
    border: none;
    border-left: 1px solid var(--pt-border);
    cursor: pointer;
    transition: color var(--pt-dur) var(--pt-ease),
                background-color var(--pt-dur) var(--pt-ease);
}

.dk-cap-layer__remove:hover { color: var(--pt-bad); background: var(--pt-surface-raised); }

/* --- Textarea ------------------------------------------------------------ */
.dk-cap-textwrap { width: 100%; }

.dk-cap-textarea {
    width: 100%;
    resize: vertical;
    min-height: 3rem;
    padding: 0.5rem 0.625rem;
    font-family: var(--pt-font-ui);
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--pt-text);
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border-strong);
    border-radius: 0.375rem;
    outline: none;
    transition: border-color var(--pt-dur) var(--pt-ease);
}

.dk-cap-textarea:focus { border-color: var(--pt-accent); }

/* --- Font chips render in their own typeface ----------------------------- */
/* Drop the chip's uppercase/tracking so each label shows the real letterforms
   of the face it selects. */
#dk-cap-font .dk-chip {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8125rem;
}

#dk-cap-font .dk-chip[data-font="serif"] {
    font-family: var(--font-display, 'Playfair Display', Georgia, serif);
}

#dk-cap-font .dk-chip[data-font="bold"] {
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 700;
}

#dk-cap-font .dk-chip[data-font="light"] {
    font-family: 'Inter', system-ui, sans-serif;
}

/* --- Colour swatches ----------------------------------------------------- */
.dk-cap-swatches { display: inline-flex; gap: 0.375rem; }

.dk-cap-swatch {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 2px solid var(--pt-border-strong);
    cursor: pointer;
    padding: 0;
    transition: border-color var(--pt-dur) var(--pt-ease),
                outline-color var(--pt-dur) var(--pt-ease),
                transform var(--pt-dur) var(--pt-ease);
}

.dk-cap-swatch:hover { transform: scale(1.08); }

/* Active ring is a flat outline (no shadow, no glow — house flat rule). */
.dk-cap-swatch.is-active {
    border-color: var(--pt-chrome-bg);
    outline: 2px solid var(--pt-accent);
    outline-offset: 1px;
}

/* Solid fills — flat, no gradients. */
.dk-cap-swatch--white  { background: #ffffff; }
.dk-cap-swatch--black  { background: #181818; }
.dk-cap-swatch--amber  { background: #F0A05A; }
.dk-cap-swatch--yellow { background: #FFD34D; }

/* --- Disabled controls (no active layer) --------------------------------- */
.dk-cap-panel.is-disabled { opacity: 0.5; pointer-events: none; }

/* --- Mobile ---------------------------------------------------------------
   Controls stack under the canvas (dk-panel already wraps); give every
   tappable control a ≥40px touch target on narrow screens. */
@media (max-width: 640px) {
    .dk-cap-swatch { width: 2.5rem; height: 2.5rem; }

    .dk-cap-swatches { gap: 0.5rem; }

    .dk-cap-layer__label { padding: 0.75rem; }

    .dk-cap-layer__remove { width: 2.75rem; }

    #dk-cap-controls .dk-chip,
    #dk-cap-font .dk-chip,
    #dk-cap-ratio .dk-chip,
    #dk-cap-format .dk-chip {
        display: inline-flex;
        align-items: center;
        min-height: 2.5rem;
    }
}