/* Depth and motion for Mission Control.
 *
 * WHAT WAS WRONG, MEASURED
 *
 * Of 84 elements painted in the first screen, THREE had any box-shadow. The
 * whole interface sat on one plane, so nothing was above anything else and
 * every separation had to be drawn with a hairline -- 410 `1px solid` rules
 * across the stylesheets. That flatness, not the palette, is what reads as
 * old.
 *
 * Motion had the same shape of problem. 138 of the transitions in the first
 * screen animate `background`, `color` or `border-color` -- point at a thing
 * and it changes colour -- against 4 that touch `opacity` and 4 that touch a
 * dimension. Nothing arrives, nothing settles, nothing answers a press. The
 * vocabulary was hover-recolour, which is the interaction language of 2004.
 *
 * WHAT THIS IS NOT
 *
 * Not a repaint: this file sets no colour. The palette was not the complaint
 * and is not touched.
 *
 * SCOPE
 *
 * Mission Control only, on purpose. The elevation and motion scales below are
 * general, but they are applied to .mc-* and nothing else until they have been
 * looked at on a real screen. Four other views keep exactly the styling they
 * have today.
 */

/* ── the theme bridge ────────────────────────────────────────────────────
   Open Props derives all six shadow levels from two inputs and switches them
   on `prefers-color-scheme`. The engine's theme is a USER choice carried on
   [data-theme], so somebody running the dark theme on a light OS would get
   light-mode shadows: a pale grey smudge under a dark card instead of depth.
   Re-declare the two inputs against our switch -- with Open Props' own values,
   so the two systems cannot drift -- and its scale follows. The OS-default
   case needs nothing; Open Props already handles it. */
/* STRENGTH, not level. Open Props' light default is 1%, tuned for a card on
   a PURE WHITE page where almost nothing is needed to separate the two. This
   app's ground is off-white and the cards are white, so at 1% every level of
   the ramp under-read: measured live, a 680x180 card carried a shadow nobody
   could see, and raising the LEVEL only lengthened a blur that was still too
   faint. Raising the strength lifts the whole ramp at once and keeps the
   relationships between its six steps intact, which is the point of having a
   ramp. 4% on the light ground; dark keeps Open Props' own 25%.

   Three declarations, not two: the first covers the DEFAULT case, where the
   reader has expressed no preference and no [data-theme] attribute exists —
   without it, anyone who never touched the theme toggle keeps the invisible
   1%. The media query then restores dark for that same default case, because
   a bare :root here would otherwise beat Open Props' own dark block. */
:root { --shadow-strength: 4%; }
@media (prefers-color-scheme: dark) { :root { --shadow-strength: 25%; } }
:root[data-theme="light"] { --shadow-color: 220 3% 15%; --shadow-strength: 4%; }
:root[data-theme="dark"]  { --shadow-color: 220 40% 2%; --shadow-strength: 25%; }

/* ── elevation by role ───────────────────────────────────────────────────
   Height has to MEAN something or it is just decoration on every box. Three
   roles, and nothing else in Mission Control lifts:
     rest   (--shadow-2)  a card is an object sitting on the page
     raised (--shadow-4)  the pointer is on it and it can be acted on
     press  (--shadow-1)  it has been pushed back down into the page
   The 2px rise is small on purpose. A card that jumps is a card that was
   designed to be noticed rather than used. */
.mc-cx {
    box-shadow: var(--shadow-2);
    /* Explicit properties, never `transition: all`: `all` animates things we
       never chose -- including layout properties, which is where jank comes
       from -- and it is set on 177 elements in the first screen today. */
    transition: box-shadow var(--t-slow) var(--ease-3),
                transform var(--t-slow) var(--ease-3),
                border-color var(--t-fast) var(--ease-3);
}

@media (prefers-reduced-motion: no-preference) {
    .mc-cx:hover { transform: translateY(-2px); }
    /* The press answers in --t-fast: lift can be leisurely, but feedback to a
       finger cannot be, or the control feels like it missed the click. */
    .mc-cx:active {
        transform: translateY(0) scale(0.995);
        transition-duration: var(--t-fast);
    }
}
/* Depth still changes without motion -- somebody on reduced-motion should
   lose the movement, not the affordance. */
.mc-cx:hover { box-shadow: var(--shadow-4); }
.mc-cx:active { box-shadow: var(--shadow-1); }

/* A focus ring and an elevation live in the same property, so the ring has to
   carry the shadow with it or keyboard focus would flatten the card. */
.mc-cx:focus-visible {
    box-shadow: var(--ring) var(--brand-ring), var(--shadow-4);
    outline: none;
}

/* ── the press on the primary action ─────────────────────────────────────
   The one control on this screen that starts work. It had a colour change and
   nothing else. */
@media (prefers-reduced-motion: no-preference) {
    .mc-enter-cta { transition: transform var(--t-fast) var(--ease-3),
                                box-shadow var(--t-fast) var(--ease-3),
                                background var(--t-fast) var(--ease),
                                color var(--t-fast) var(--ease); }
    .mc-enter-cta:hover { transform: translateY(-1px); }
    .mc-enter-cta:active { transform: translateY(0) scale(0.97); }
}
/* The filled CTA takes LESS than a card, not more. Its dark fill already
   separates it from the page; at the raised strength, a card-weight shadow
   under it reads as a sticker. */
.mc-enter-cta { box-shadow: var(--shadow-1); }
.mc-enter-cta:active { box-shadow: var(--shadow-1); }

/* ── entrance ────────────────────────────────────────────────────────────
   THE RULE THIS FILE MUST NOT BREAK: content is never parked invisible.
   Every animation here lives inside `prefers-reduced-motion: no-preference`
   and is applied by a class that app.js adds and then removes. If the CSS
   never loads, if the JS never runs, if the browser refuses the animation --
   the resting state is the finished state and the cards are simply there.
   An entrance that can strand a paying customer on a blank grid is worse than
   no entrance at all.

   It also runs ONCE, when the view is first populated. Mission Control
   repaints whenever work lands, and a grid that replays its arrival every
   time somebody saves is a grid that punishes you for working. */
@media (prefers-reduced-motion: no-preference) {
    .mc-grid.is-entering > * {
        /* `backwards` so the delay holds the start frame rather than showing
           the element, hiding it, then animating it in. */
        animation: mc-rise var(--t-slow) var(--ease-3) backwards;
    }
    /* Stagger, capped. Open Props' own slide-in-up travels 100%, which is
       right for a panel and wrong for a card in a grid, so the distance is
       ours; the easing is theirs. */
    .mc-grid.is-entering > *:nth-child(1) { animation-delay: 0ms; }
    .mc-grid.is-entering > *:nth-child(2) { animation-delay: 40ms; }
    .mc-grid.is-entering > *:nth-child(3) { animation-delay: 80ms; }
    .mc-grid.is-entering > *:nth-child(4) { animation-delay: 120ms; }
    .mc-grid.is-entering > *:nth-child(5) { animation-delay: 160ms; }
    /* Everything past the fifth arrives together. A stagger long enough to
       watch is a stagger that has become a loading screen. */
    .mc-grid.is-entering > *:nth-child(n+6) { animation-delay: 200ms; }
}

@keyframes mc-rise {
    from { opacity: 0; transform: translateY(8px); }
    /* No `to`: the resting state IS the destination, so this keyframe cannot
       disagree with the stylesheet about where the card ends up. */
}

/* ── the label leans toward its action ───────────────────────────────────
   "Review research →" is the thing the card is FOR, and it sat perfectly
   still while the card lit up around it. A 2px lean on hover is the oldest
   refined micro-interaction there is and it still works: the eye reads it as
   the card pointing at where the click goes.

   The nudge is on the whole label rather than the arrow alone because the
   arrow is a bare → inside the text node -- wrapping it would mean
   touching two markup sites in app.js for two pixels. */
@media (prefers-reduced-motion: no-preference) {
    .mc-cx-act-go { transition: transform var(--t-slow) var(--ease-3); }
    .mc-cx:hover .mc-cx-act-go { transform: translateX(2px); }
}

/* ── the secondary controls answer the same way ──────────────────────────
   The primary CTA got a press in the last pass and the two controls beside
   it did not, which reads worse than if none of them had: one button in a row
   behaving differently is a bug the eye notices before the mind does. */
@media (prefers-reduced-motion: no-preference) {
    .mc-enter-find,
    .ws-entry { transition: transform var(--t-fast) var(--ease-3),
                            box-shadow var(--t-fast) var(--ease-3),
                            border-color var(--t-fast) var(--ease-3),
                            color var(--t-fast) var(--ease); }
    .mc-enter-find:active,
    .ws-entry:active { transform: scale(0.97); }

    /* Nav items take the press but never the lift: a sidebar that rises under
       the pointer turns a list into a row of buttons competing with the work.
       The transition lives on .nav-item in app.css, alongside the hover fade
       it already had — declaring a second one here would have replaced that
       fade rather than extended it. */
    .nav-item:active { transform: scale(0.985); }
}

/* ── focus, everywhere the press went ────────────────────────────────────
   Keyboard users get the same geometry as the mouse: one ring, carried on
   var(--ring) so test_shape_scale stays true, and never `outline: none`
   without a replacement. */
.mc-enter-cta:focus-visible,
.mc-enter-find:focus-visible,
.ws-entry:focus-visible {
    box-shadow: var(--ring) var(--brand-ring);
    outline: none;
}

/* ══ ENGINE-WIDE INTERACTION ═════════════════════════════════════════════
   Mission Control was the pilot. This extends the same vocabulary to the
   rest of the engine — and the operative word is VOCABULARY, not coverage.

   There are 357 rules in these stylesheets that draw a bordered, filled,
   rounded box. Elevating all of them would raise everything, and a page
   where everything is raised reads exactly like a page where nothing is:
   depth only means something while most things stay on the ground.

   So: two roles, assigned by what the thing DOES, and nothing else gets
   touched.

     A CARD is content you open. It lifts under the pointer and presses in.
     A CONTROL is a thing you press. It presses, and never lifts — a toolbar
       that rises under the cursor turns into a row of hovering chiclets.

   Floating surfaces (.modal-panel, .acct-menu, .toast) already carry their
   own elevation and are deliberately absent: they are never pressed, and
   restating their shadow here would fight the sheet that owns them. */

/* ── cards: lift, then press ─────────────────────────────────────────────
   Gated on being ACTIVATABLE, not on carrying a card-ish class name.
   Measured on the live engine: `.card` is 23 <section> elements and NONE of
   them is clickable — it is a layout container. Lifting it would be a false
   affordance, content that rises under the pointer and then does nothing
   when you press it, which is worse than no motion at all.

   `:is(button, a, [role=button])` makes that rule structural instead of a
   list I maintain by hand: a class only gets the lift on the routes where it
   is actually a control, and a future <section class="card"> never does. */
:is(button, a, [role="button"]):is(.mc-recent, .card, .model-card, .primer-card, .cp-eg, .lib-row, .hist-item, .cds-item):hover { box-shadow: var(--shadow-4); }
:is(button, a, [role="button"]):is(.mc-recent, .card, .model-card, .primer-card, .cp-eg, .lib-row, .hist-item, .cds-item) { transition: box-shadow var(--t-slow) var(--ease-3),
                     transform var(--t-slow) var(--ease-3),
                     border-color var(--t-fast) var(--ease-3); }
:is(button, a, [role="button"]):is(.mc-recent, .card, .model-card, .primer-card, .cp-eg, .lib-row, .hist-item, .cds-item):active { box-shadow: var(--shadow-1); }
@media (prefers-reduced-motion: no-preference) {
    :is(button, a, [role="button"]):is(.mc-recent, .card, .model-card, .primer-card, .cp-eg, .lib-row, .hist-item, .cds-item):hover { transform: translateY(-2px); }
    :is(button, a, [role="button"]):is(.mc-recent, .card, .model-card, .primer-card, .cp-eg, .lib-row, .hist-item, .cds-item):active { transform: translateY(0) scale(0.995);
                    transition-duration: var(--t-fast); }
}
:is(button, a, [role="button"]):is(.mc-recent, .card, .model-card, .primer-card, .cp-eg, .lib-row, .hist-item, .cds-item):focus-visible {
    box-shadow: var(--ring) var(--brand-ring), var(--shadow-4);
    outline: none;
}

/* ── controls: press only ────────────────────────────────────────────────
   Every one of these already transitions its own colours; the property
   lists in app.css were widened to include `transform` in the same change
   that retired `transition: all`, so this adds the state and not a second,
   competing shorthand. */
@media (prefers-reduced-motion: no-preference) {
    .primary:not(:disabled):active,
    .primary-ghost:not(:disabled):active,
    .ghost:not(:disabled):active,
    .identify-btn:not(:disabled):active,
    .copy-btn:active, .expand-toggle:active, .modal-close:active,
    .nav-toggle:active, .theme-toggle:active, .cmd-trigger:active,
    .acct-trigger:active, .filter-clear:active,
    .crispr-vendor-btn:not(:disabled):active,
    .crispr-struct-mini:active,
    .tab:active {
        transform: scale(0.97);
    }
}