/* =========================================================
   Quick Adjust — Section Studio (System A / website chrome)
   A right-side drawer for the 5-knob token panel. Sits above the focus modal
   (z-index 1000). QA-M1: shell only (open/close); knob controls arrive in QA-M2.
========================================================= */
/* Always rendered (never display:none) so the enter/leave transitions play
   reliably — toggling display breaks transform transitions in Chromium. Closed =
   off-screen + transparent + pointer-events:none; open = the is-open class. */
.qa-root { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }
.qa-root.is-open { pointer-events: auto; }

/* Identity-strip trigger: the .ss-id-adjust affordance is now a <button> that
   opens Quick Adjust (was an <a> to DLS). Reset UA button chrome; the existing
   .ss-id-adjust rule in section-studio.css still supplies colour/padding/size. */
button.ss-id-adjust { background: none; border: 0; cursor: pointer; font-family: inherit; }
button.ss-id-adjust:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 6px; }

/* Reveal is driven by keyframe animations, NOT transitions: transform/opacity
   transitions freeze their computed value in Chromium here (same quirk the focus
   modal avoids with @keyframes). The is-open rules set the final state statically
   (always correct); the animations add the slide/fade flourish. */
.qa-backdrop {
    position: absolute;
    inset: 0;
    background: var(--overlay, rgba(15, 23, 42, 0.5));
    opacity: 0;
}
.qa-root.is-open .qa-backdrop { opacity: 1; }

.qa-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 360px;
    max-width: 92vw;
    display: flex;
    flex-direction: column;
    background: var(--surface-primary);
    border-left: 1px solid var(--border-primary);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    outline: none;
}
.qa-root.is-open .qa-panel { transform: translateX(0); }

@media (prefers-reduced-motion: no-preference) {
    .qa-root.is-open .qa-panel { animation: qaSlideIn 0.22s cubic-bezier(0.4, 0, 0.2, 1); }
    .qa-root.is-open .qa-backdrop { animation: qaFadeIn 0.2s ease; }
}
@keyframes qaSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes qaFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Header */
.qa-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}
.qa-title { margin: 0; font-size: var(--text-lg); font-weight: var(--font-semi-bold); color: var(--text-primary); }
.qa-note { margin: var(--space-1) 0 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-muted); }
.qa-x {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--surface-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition-fast, 0.18s ease), border-color var(--transition-fast, 0.18s ease);
}
.qa-x:hover { color: var(--text-primary); border-color: var(--border-secondary); }
.qa-x:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Body — knob rows */
.qa-body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }

/* Global actions row: Surprise me (primary) + Reset (secondary) */
.qa-actions { display: flex; align-items: stretch; gap: var(--space-2); }
.qa-actions .qa-surprise { flex: 1 1 auto; }
.qa-actions .qa-revert { flex: 0 0 auto; }

/* Surprise me — the one-click "whole new look" (palette + type + radius + shadow) */
.qa-surprise {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semi-bold);
    color: var(--text-inverse);
    background: var(--color-primary);
    border: 0;
    border-radius: 10px;
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background var(--transition-fast, 0.18s ease), box-shadow var(--transition-fast, 0.18s ease);
}
.qa-surprise:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-md); }
.qa-surprise:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.qa-knob { display: flex; flex-direction: column; gap: var(--space-2); }
.qa-knob-label { font-size: var(--text-sm); font-weight: var(--font-semi-bold); color: var(--text-primary); }
.qa-knob-ctrl { min-height: 38px; display: flex; align-items: center; }
.qa-knob-soon {
    font-size: var(--text-sm);
    color: var(--text-disabled);
    padding: var(--space-2) var(--space-3);
    border: 1px dashed var(--border-primary);
    border-radius: 8px;
    width: 100%;
}

/* Palette generate */
.qa-gen { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; }
.qa-gen-sw { display: inline-flex; gap: 4px; }
.qa-gsw { width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
.qa-gen-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semi-bold);
    color: var(--text-inverse);
    background: var(--color-primary);
    border: 0;
    border-radius: 8px;
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background var(--transition-fast, 0.18s ease);
}
.qa-gen-btn:hover { background: var(--color-primary-hover); }
.qa-gen-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Select (font pairing) */
.qa-select {
    width: 100%;
    font-size: var(--text-sm);
    color: var(--text-primary);
    background: var(--surface-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
}
.qa-select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Segmented pills (radius) + theme segment */
.qa-pills, .qa-seg { display: flex; gap: var(--space-1); width: 100%; background: var(--surface-secondary); border: 1px solid var(--border-primary); border-radius: 10px; padding: 3px; }
.qa-pill, .qa-seg-btn {
    flex: 1 1 0;
    font-size: var(--text-sm);
    font-weight: var(--font-semi-bold);
    color: var(--text-secondary);
    background: transparent;
    border: 0;
    border-radius: 7px;
    padding: var(--space-2) var(--space-1);
    cursor: pointer;
}
.qa-pill.is-on, .qa-seg-btn.is-on { background: var(--surface-primary); color: var(--color-primary); box-shadow: var(--shadow-sm); }
.qa-pill:focus-visible, .qa-seg-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Range (shadow) */
.qa-range { flex: 1 1 auto; accent-color: var(--color-primary); cursor: pointer; }
.qa-range-val { flex: 0 0 auto; min-width: 2ch; text-align: right; font-size: var(--text-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.qa-knob[data-knob="shadow"] .qa-knob-ctrl { gap: var(--space-3); }

/* Reset (secondary global action) */
.qa-revert {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semi-bold);
    color: var(--text-secondary);
    background: var(--surface-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    transition: color var(--transition-fast, 0.18s ease), border-color var(--transition-fast, 0.18s ease);
}
.qa-revert:disabled { opacity: 0.5; cursor: default; }
.qa-revert:not(:disabled):hover { color: var(--text-primary); border-color: var(--border-secondary); }

/* Footer — DLS escape-hatch hint (question on line 1, link on line 2) */
.qa-foot { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-subtle); }
.qa-foot-hint { display: flex; flex-direction: column; gap: var(--space-1); }
.qa-foot-q { font-size: var(--text-sm); color: var(--text-muted); }
.qa-dls {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    align-self: flex-start;
    font-size: var(--text-sm);
    font-weight: var(--font-semi-bold);
    color: var(--color-primary);
    text-decoration: none;
}
.qa-dls:hover { color: var(--color-primary-hover); text-decoration: underline; }
.qa-dls:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 560px) {
    .qa-panel { width: 100%; max-width: 100%; }
}


/* =========================================================
   Floating rail — bottom-docked, appears when the hero strip scrolls away.

   A segmented toolbar, not a pill of loose controls: every element is its own
   cell with a hard divider, so nothing floats unanchored. Purpose is carried
   two ways at once —
     • material: a RECESSED tinted cell is something you read, a flush white
       cell is something you press;
     • words: each readout carries a caption naming what its value is.
   Earlier versions failed because every element looked alike, so a status and
   a button were indistinguishable.

   Centered via margin:auto so `transform` only does translateY (keyframe
   reveal, not a transition — transitions freeze on transform in this
   Chromium/pane). z-index below the focus modal (1000) so a modal hides it.
========================================================= */
.ss-floatbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 22px;
    margin: 0 auto;
    width: fit-content;
    max-width: calc(100vw - 2rem);
    z-index: 900;
    display: flex;
    align-items: stretch;
    /* Same chrome as the Palette Builder's sticky bar (.pp-sticky-controls in
       pages/palette-builder.css) — white surface token, border-primary edge,
       1.25rem radius and its two-part shadow (wide ambient + tight 1px ring).
       One floating-bar treatment across the tools; all of it theme-aware. */
    background: var(--surface-primary);
    border: 1px solid var(--border-primary);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    transform: translateY(calc(100% + 40px));
    opacity: 0;
    pointer-events: none;
}
[data-theme="dark"] .ss-floatbar {
    /* Surface and border tokens flip themselves; only the shadow deepens, the
       same way the rest of the site's floating chrome does on dark. */
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.25);
}
/* No transition on transform/opacity — they freeze in this Chromium/pane. The
   keyframe below animates the reveal; is-visible sets the final state statically. */
.ss-floatbar.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) {
    .ss-floatbar.is-visible { animation: ssFloatIn 0.4s cubic-bezier(0.22, 1.1, 0.36, 1); }
}
@keyframes ssFloatIn {
    from { transform: translateY(calc(100% + 40px)); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Readout cell — recessed, captioned, not pressable. */
.ss-fb-read {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.5rem var(--space-4);
    /* Readouts step down the surface ramp from the action cells, so a status
       still reads differently from a control inside a white bar. */
    background: var(--surface-secondary);
    border-right: 1px solid var(--border-primary);
    text-decoration: none;
    white-space: nowrap;
}
.ss-fb-meta { display: flex; flex-direction: column; gap: 3px; }
.ss-fb-cap {
    font-size: 0.62rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ss-fb-val { font-size: var(--text-sm); line-height: 1; color: var(--text-primary); }
.ss-fb-val--dim { color: var(--text-secondary); }
.ss-fb-count { font-weight: var(--font-semi-bold); }

/* The page readout doubles as a link to the studio, so the count is an object
   you can act on rather than a number you can only look at. */
a.ss-fb-read { transition: background var(--transition-fast, 0.18s ease); }
a.ss-fb-read:hover { background: var(--surface-hover); }
a.ss-fb-read:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

/* Ring on the ribbon as a whole, not per-swatch: without it a white or
   near-white role in the palette vanishes into the cell behind it. */
.ss-fb-ribbon {
    display: inline-flex;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--border-secondary);
}
.ss-fb-sw { width: 12px; height: 18px; display: block; }

/* Action cell — flush with the rail surface, so it reads as pressable. */
.ss-fb-act {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.5rem var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
    background: var(--surface-primary);
    border: 0;
    border-right: 1px solid var(--border-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast, 0.18s ease);
}
.ss-fb-act:hover { background: var(--surface-hover); }
.ss-fb-act:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.ss-fb-act i { font-size: 0.9em; color: var(--text-muted); }

/* Destructive: dimmest cell in the rail. Arming it (first click) reveals the
   word and turns the cell red; the second click commits. */
.ss-fb-clear { color: var(--text-muted); padding: 0.5rem var(--space-3); }
.ss-fb-clear-txt { display: none; }
.ss-fb-clear:hover { color: var(--text-primary); }
.ss-fb-clear.is-armed {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, var(--surface-primary));
}
.ss-fb-clear.is-armed i { color: var(--danger); }
.ss-fb-clear.is-armed .ss-fb-clear-txt { display: inline; }

@media (prefers-reduced-motion: no-preference) {
    .ss-fb-count.is-bumped { display: inline-block; animation: ssCountBump 0.4s cubic-bezier(0.34, 1.4, 0.64, 1); }
}
@keyframes ssCountBump {
    0% { transform: scale(1); }
    45% { transform: scale(1.16); }
    100% { transform: scale(1); }
}

/* Terminal cell: the one filled element, and the only way out of the rail. */
.ss-fb-open {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.5rem var(--space-5);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-inverse);
    background: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-fast, 0.18s ease);
}
/* color repeated (not just background) — .ss-fb-open is an <a>, and the global
   `a:hover { color: var(--color-primary) }` in typography.css otherwise wins. */
.ss-fb-open:hover { background: var(--color-primary-hover); color: var(--text-inverse); }
.ss-fb-open:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -3px; }
.ss-fb-open i { transition: transform var(--transition-fast, 0.18s ease); }
.ss-fb-open:hover i { transform: translateX(2px); }

/* Narrow: captions and the Adjust word drop, values and cells stay. */
@media (max-width: 720px) {
    .ss-fb-cap, .ss-fb-adjust-txt { display: none; }
    .ss-fb-read, .ss-fb-act { padding: 0.6rem var(--space-3); }
}
@media (max-width: 430px) {
    .ss-fb-open-txt { display: none; }
    .ss-fb-lang-val { display: none; }
}