/* ==========================================================================
   The Darkroom — creator tool pages (/darkroom/)

   Instrument chassis, sibling of the photography-tools dashboard: same
   --pt-* token palette, same theme behavior (localStorage 'pt-theme':
   dark / light / auto / night — darkroom-core.js resolves it to the
   body class .dk-dark), same flat machined chrome. Rendered photo
   content on <canvas> is the only glow allowed.

   Flat design only — no gradients, anywhere, ever.
   ========================================================================== */

/* --- Page-level instrument tokens (light) --------------------------------
   Mirrors .pt-scope in pt-instrument.css so page chrome outside the
   .pt-scope bench (breadcrumb, header, tiles, copy) speaks the same
   palette. Keep values in sync with pt-instrument.css. */
body.darkroom-page {
    --pt-font-ui: 'Inter', system-ui, sans-serif;
    --pt-font-display: 'Outfit', 'Inter', system-ui, sans-serif;
    --pt-font-mono: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
    --pt-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
    --pt-dur: 240ms;

    --pt-page-bg: #f4efe7;
    --pt-chrome-bg: #fffdf9;
    --pt-surface: #fbf6f0;
    --pt-surface-raised: #f0e8dc;
    --pt-border: #ede4d9;
    --pt-border-strong: #ddd0be;
    --pt-text: #1c1c1c;
    --pt-text-secondary: #3d3a35;
    --pt-text-muted: #6b6459;
    --pt-text-faint: #8a8174;
    --pt-accent: #d4922a;
    --pt-accent-bright: #a8721e;
    --pt-secondary: #3a9e8f;
    --pt-ok: #059669;
    --pt-bad: #dc2626;

    background: var(--pt-page-bg);
    color: var(--pt-text);
}

/* Dark chassis — .dk-dark is set on <body> by darkroom-core.js after
   resolving 'pt-theme' (dark/night → dark, auto → prefers-color-scheme).
   The one dark block covers page chrome AND the .pt-scope bench (the
   scope otherwise re-declares light values on itself). Values mirror
   .pt-scope[data-theme="dark"] in pt-instrument.css. */
body.darkroom-page.dk-dark,
body.darkroom-page.dk-dark .pt-scope {
    --pt-page-bg: #0f172a;
    --pt-chrome-bg: #111827;
    --pt-surface: #1f2937;
    --pt-surface-raised: #374151;
    --pt-border: #1f2937;
    --pt-border-strong: #374151;
    --pt-text: #f3f4f6;
    --pt-text-secondary: #d1d5db;
    --pt-text-muted: #9ca3af;
    --pt-text-faint: #6b7280;
    --pt-accent: #e0a23c;
    --pt-accent-bright: #edb25a;
    --pt-secondary: #4bb5a4;
    --pt-ok: #10b981;
    --pt-bad: #ef4444;
    --pt-illust-bg: #0f172a;
    --pt-illust-fill: #1e293b;
    --pt-illust-grid: #253044;

    color-scheme: dark;
}

/* The [hidden] attribute must always win — tool stages set their own
   display (grid/flex), which would otherwise override the UA default. */
.darkroom-bench [hidden],
.dk-stage[hidden] {
    display: none !important;
}

/* --- Breadcrumb ----------------------------------------------------------- */
.dk-breadcrumb {
    max-width: 1240px;
    margin: 0 auto;
    padding: 1rem 1.25rem 0;
}

.dk-breadcrumb ol {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--pt-font-ui);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
    list-style: none;
    margin: 0;
    padding: 0;
}

.dk-breadcrumb a:hover { color: var(--pt-accent); }
.dk-breadcrumb [aria-current] { color: var(--pt-text-secondary); }

/* --- Tool-page header: compact instrument nameplate ----------------------- */
.dk-header {
    max-width: 1240px;
    margin: 0 auto;
    padding: 1.25rem 1.25rem 1rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    text-align: left;
}

.dk-header__icon {
    flex: 0 0 auto;
    width: 76px;
    height: 57px;
    padding: 0.5rem;
    color: var(--pt-text-muted);
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border-strong);
    border-radius: 0.625rem;
}

.dk-header__icon svg { width: 100%; height: 100%; display: block; }

.dk-header__body { flex: 1 1 320px; min-width: 0; }

.dk-eyebrow {
    font-family: var(--pt-font-ui);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pt-accent);
    margin-bottom: 0.25rem;
}

.dk-title {
    font-family: var(--font-display, 'Playfair Display', Georgia, serif);
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-transform: none;
    color: var(--pt-text);
    margin-bottom: 0.25rem;
}

.dk-dek {
    font-family: var(--pt-font-ui);
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--pt-text-muted);
    max-width: 60ch;
    margin: 0;
}

/* Privacy readouts — LABEL/VALUE instrument cells, honest and flat. */
.dk-header__readouts {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.dk-readout-chip {
    padding: 0.4375rem 0.6875rem;
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border-strong);
    border-radius: 0.5rem;
    text-align: center;
}

.dk-readout-chip__label {
    display: block;
    font-family: var(--pt-font-ui);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
}

.dk-readout-chip__value {
    display: block;
    font-family: var(--pt-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--pt-ok);
    white-space: nowrap;
}

/* --- Hub ------------------------------------------------------------------ */
.dk-header--hub {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 2rem;
    gap: 0.5rem;
}

.dk-header--hub .dk-title { font-size: clamp(2rem, 4vw, 2.75rem); }

.dk-header--hub .dk-dek {
    font-size: 0.9375rem;
    color: var(--pt-text-secondary);
    max-width: 640px;
    margin: 0.25rem auto 0.75rem;
}

.dk-hub-strip {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Tool tile grid — the dashboard's tile anatomy: preview on top,
   nameplate footer below a hairline. */
.dk-hub-grid {
    max-width: 1240px;
    margin: 1.25rem auto 0;
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.875rem;
    list-style: none;
}

.dk-tile a {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: border-color 200ms ease, transform 200ms ease;
}

.dk-tile a:hover,
.dk-tile a:focus-visible {
    border-color: var(--pt-accent);
    transform: translateY(-2px);
    outline: none;
}

.dk-tile__preview {
    aspect-ratio: 8 / 3.4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem;
    color: var(--pt-text-muted);
    background: var(--pt-surface);
    border-bottom: 1px solid var(--pt-border);
}

.dk-tile__preview svg { height: 100%; max-width: 132px; }

.dk-tile__footer { padding: 0.75rem 0.875rem 0.875rem; }

.dk-tile__eyebrow {
    display: block;
    font-family: var(--pt-font-ui);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pt-accent);
    margin-bottom: 0.25rem;
}

.dk-tile__name {
    display: block;
    font-family: var(--pt-font-ui);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pt-text);
    line-height: 1.25;
    margin-bottom: 0.3125rem;
}

.dk-tile__dek {
    display: block;
    font-family: var(--pt-font-ui);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--pt-text-muted);
}

/* --- Workbench (.pt-scope bench) ------------------------------------------ */
.darkroom-bench {
    max-width: 1240px;
    margin: 0.5rem auto 1.5rem;
    padding: 1rem;
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border-strong);
    border-radius: 0.875rem;
}

/* Drop zone — the film gate. */
.dk-drop {
    position: relative;
    border: 2px dashed var(--pt-border-strong);
    border-radius: 0.625rem;
    background: var(--pt-surface);
    padding: 3rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--pt-dur) var(--pt-ease),
                background-color var(--pt-dur) var(--pt-ease);
}

.dk-drop:hover,
.dk-drop:focus-within,
.dk-drop.is-dragover {
    border-color: var(--pt-accent);
    background: var(--pt-surface-raised);
    outline: none;
}

.dk-drop__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dk-drop__headline {
    font-family: var(--pt-font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--pt-text);
    margin-bottom: 0.375rem;
}

.dk-drop__hint {
    font-family: var(--pt-font-ui);
    font-size: 0.8125rem;
    color: var(--pt-text-muted);
    margin-bottom: 0.75rem;
}

.dk-drop__privacy {
    display: inline-block;
    font-family: var(--pt-font-ui);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pt-ok);
    padding: 0.3125rem 0.625rem;
    border: 1px solid var(--pt-border-strong);
    border-radius: 999px;
    background: var(--pt-chrome-bg);
}

/* Stage: canvas + control panel */
.dk-stage__canvas-wrap {
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: 0.625rem;
    padding: 0.75rem;
    display: flex;
    justify-content: center;
    overflow-x: auto;
}

.dk-stage__canvas {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 0.25rem;
    touch-action: none;
}

.dk-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.25rem;
    margin-top: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: 0.625rem;
}

.dk-panel__group { min-width: 0; }
.dk-panel__group--grow { flex: 1 1 180px; }

.dk-panel__label {
    display: block;
    font-family: var(--pt-font-ui);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
    margin-bottom: 0.4375rem;
}

.dk-panel__label output {
    font-family: var(--pt-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--pt-text);
    margin-left: 0.25rem;
}

.dk-panel__actions {
    display: flex;
    gap: 0.625rem;
    margin-left: auto;
}

/* Stepper — machined +/- block with mono readout */
.dk-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--pt-border-strong);
    border-radius: 0.5rem;
    background: var(--pt-chrome-bg);
    overflow: hidden;
}

.dk-stepper__btn {
    width: 2.375rem;
    height: 2.375rem;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--pt-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color var(--pt-dur) var(--pt-ease);
}

.dk-stepper__btn:hover { background: var(--pt-surface-raised); color: var(--pt-text); }

.dk-stepper__value {
    min-width: 2.75rem;
    text-align: center;
    font-family: var(--pt-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--pt-accent);
}

/* Chips — dashboard tab language */
.dk-chips { display: inline-flex; gap: 0.3125rem; flex-wrap: wrap; }

.dk-chip {
    padding: 0.4375rem 0.6875rem;
    font-family: var(--pt-font-ui);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pt-text-secondary);
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border-strong);
    border-radius: 999px;
    cursor: pointer;
    transition: color var(--pt-dur) var(--pt-ease),
                border-color var(--pt-dur) var(--pt-ease),
                background-color var(--pt-dur) var(--pt-ease);
}

.dk-chip:hover { border-color: var(--pt-accent); color: var(--pt-text); }

.dk-chip.is-active {
    background: var(--pt-accent);
    border-color: var(--pt-accent);
    color: #1c1408;
}

/* Range — flat solid track with a machined thumb (no gradient fills) */
.dk-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--pt-border-strong);
    outline: none;
}

.dk-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--pt-accent);
    border: 3px solid var(--pt-chrome-bg);
    box-shadow: 0 0 0 1px var(--pt-border-strong);
    cursor: pointer;
}

.dk-range::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pt-accent);
    border: 3px solid var(--pt-chrome-bg);
    cursor: pointer;
}

.dk-range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 2px var(--pt-accent);
}

/* Checkbox */
.dk-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--pt-font-ui);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--pt-text-secondary);
    cursor: pointer;
}

.dk-check input { accent-color: var(--pt-accent); width: 1rem; height: 1rem; }

/* Buttons — flat solids */
.dk-btn {
    padding: 0.625rem 1.125rem;
    font-family: var(--pt-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--pt-dur) var(--pt-ease),
                color var(--pt-dur) var(--pt-ease),
                border-color var(--pt-dur) var(--pt-ease);
}

.dk-btn--primary { background: var(--pt-accent); color: #1c1408; }
.dk-btn--primary:hover { background: var(--pt-accent-bright); }

.dk-btn--primary:disabled {
    background: var(--pt-border-strong);
    color: var(--pt-text-faint);
    cursor: not-allowed;
}

.dk-btn--ghost {
    background: transparent;
    color: var(--pt-text-secondary);
    border-color: var(--pt-border-strong);
}

.dk-btn--ghost:hover { color: var(--pt-text); border-color: var(--pt-text-muted); }

/* Note + status */
.dk-note {
    margin-top: 0.75rem;
    font-family: var(--pt-font-ui);
    font-size: 0.75rem;
    color: var(--pt-text-faint);
}

.dk-status {
    margin-top: 0.75rem;
    font-family: var(--pt-font-ui);
    font-size: 0.8125rem;
    color: var(--pt-text-muted);
}

/* --- Continuity dock ("Send to…") ----------------------------------------- */
.dk-continuity {
    position: sticky;
    bottom: 0.75rem;
    z-index: 30;
    max-width: 1240px;
    margin: 0 auto 1rem;
    padding: 0.5rem 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border-strong);
    border-radius: 0.75rem;
    overflow-x: auto;
}

.dk-continuity__label {
    font-family: var(--pt-font-ui);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
    white-space: nowrap;
}

.dk-continuity__list {
    display: flex;
    gap: 0.3125rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dk-continuity__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.6875rem;
    font-family: var(--pt-font-ui);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--pt-text-secondary);
    border: 1px solid var(--pt-border-strong);
    border-radius: 999px;
    white-space: nowrap;
    transition: border-color var(--pt-dur) var(--pt-ease), color var(--pt-dur) var(--pt-ease);
}

.dk-continuity__link svg { width: 20px; height: 15px; color: var(--pt-text-faint); }

.dk-continuity__link:hover {
    color: var(--pt-text);
    border-color: var(--pt-accent);
}

.dk-continuity__link:hover svg { color: var(--pt-accent); }

/* --- SEO copy — quiet notes panel, not a broadsheet ------------------------ */
.dk-copy {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0.5rem 1.25rem 1.5rem;
}

.dk-copy__inner {
    max-width: 70ch;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border);
    border-radius: 0.75rem;
}

.dk-copy h2 {
    font-family: var(--pt-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
    margin-bottom: 0.75rem;
}

.dk-copy p {
    font-family: var(--pt-font-ui);
    font-size: 0.8125rem;
    line-height: 1.65;
    color: var(--pt-text-muted);
    margin-bottom: 0.875rem;
}

.dk-copy p:last-child { margin-bottom: 0; }

.dk-copy a { color: var(--pt-accent); }
.dk-copy a:hover { text-decoration: underline; }

/* --- Related tools --------------------------------------------------------- */
.dk-related {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.25rem 2.5rem;
}

.dk-related__title {
    font-family: var(--pt-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
    margin-bottom: 0.875rem;
}

.dk-related__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.875rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dk-related__cross {
    margin-top: 1.25rem;
    font-family: var(--pt-font-ui);
    font-size: 0.8125rem;
    color: var(--pt-text-muted);
}

.dk-related__cross a { color: var(--pt-accent); }

/* --- Mobile ---------------------------------------------------------------- */
@media (max-width: 640px) {
    .dk-header {
        gap: 0.875rem;
        padding: 1rem 1rem 0.75rem;
    }

    .dk-header__icon { width: 60px; height: 45px; }

    .dk-header__readouts {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }

    .darkroom-bench {
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 0.75rem;
        margin-bottom: 1rem;
    }

    .dk-drop { padding: 2.25rem 1rem; }

    .dk-panel { padding: 0.75rem; gap: 0.875rem 1rem; }

    .dk-panel__actions {
        margin-left: 0;
        width: 100%;
    }

    .dk-panel__actions .dk-btn { flex: 1 1 auto; }

    .dk-btn { padding: 0.6875rem 1rem; }

    .dk-stepper__btn { width: 2.75rem; height: 2.75rem; }

    .dk-continuity {
        border-radius: 0.75rem 0.75rem 0 0;
        bottom: 0;
        margin-bottom: 0;
    }

    .dk-hub-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.625rem; }

    .dk-tile__dek { display: none; }

    .dk-copy__inner { padding: 1rem; }
}