@azure-id/orc 1.9.1 → 1.9.2

package/bin/webui/css/04-motion.css

@@ -1,152 +1,162 @@
-/* 04-motion.css — orc ui
-   The panel entrance, the staggered block entrance, and THE ONE
-   @media (prefers-reduced-motion) block.
-   
-   LOADED LAST, and that is load-bearing. Several reduced-motion rules are
-   plain declarations rather than !important (.vault-pulse and .step-flow are
-   removed with `display: none`, because capping an infinite animation to one
-   iteration freezes it mid-cycle). An equal-specificity rule in a panel file
-   loading afterwards would win on order and quietly switch the animation back
-   on. A test asserts this media query appears here and in no panels/*.css.
-
-   The <link> ORDER in app.html is the cascade order, and the numeric
-   prefix is that order. No @import: it would carry no session token and
-   401. */
-
-/* Panel swap: 180ms slide + fade, ease-out. */
-.panel { animation: panel-in var(--dur) var(--ease); }
-@keyframes panel-in {
-  from { opacity: 0; transform: translateY(6px); }
-  to   { opacity: 1; transform: none; }
-}
-
-/* Staggered entrance. The blocks of a panel arrive in reading order rather than
-   all at once, which makes a panel of six cards parse as a sequence instead of
-   a flash. Capped at 8 so a long list never becomes a slow one — every child
-   past the cap shares the last delay. */
-.stack > * { animation: block-in var(--dur) var(--ease) backwards; }
-.stack > *:nth-child(1) { animation-delay: 0ms; }
-.stack > *:nth-child(2) { animation-delay: 30ms; }
-.stack > *:nth-child(3) { animation-delay: 60ms; }
-.stack > *:nth-child(4) { animation-delay: 90ms; }
-.stack > *:nth-child(5) { animation-delay: 120ms; }
-.stack > *:nth-child(6) { animation-delay: 150ms; }
-.stack > *:nth-child(7) { animation-delay: 180ms; }
-.stack > *:nth-child(n+8) { animation-delay: 210ms; }
-@keyframes block-in {
-  from { opacity: 0; transform: translateY(8px); }
-  to   { opacity: 1; transform: none; }
-}
-/* ── the CLI Hook Interface (v1.4.1) ─────────────────────────────────────── */
-/* The board is a thing you BUILD, so it moves the way a thing you build moves:
-   a chip arrives, a chip you just staged breathes once so you can find it, and
-   a row in the part picker slides in as the list narrows under your typing.
-   Every one of them is a FINITE animation with a real end state, so the cap in
-   the reduced-motion block below leaves each one at rest rather than frozen
-   part-way. */
-.hk-chip { animation: hk-chip-in 200ms var(--ease) backwards; }
-@keyframes hk-chip-in {
-  from { opacity: 0; transform: translateY(6px) scale(0.97); }
-  to   { opacity: 1; transform: none; }
-}
-/* Staged, not written — and the one thing on the board that has to be findable
-   the instant it appears. Three pulses and it stops: an infinite one would have
-   to be REMOVED below rather than capped, and this one reads correctly at rest.
-   */
-.hk-chip-new { animation: hk-chip-in 200ms var(--ease) backwards, hk-chip-mark 900ms var(--ease) 3; }
-@keyframes hk-chip-mark {
-  0%, 100% { box-shadow: inset 0 0 0 0 var(--accent); }
-  50%      { box-shadow: inset 0 0 0 2px var(--accent); }
-}
-/* Position, drop marker, and the zone's own border: transitions rather than
-   animations, so an interrupted drag never leaves a chip mid-flight. */
-.hk-chip, .hk-zone, .hk-add, .hk-act, .hk-pick-row, .hk-theme, .hk-sample {
-  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
-              box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease),
-              transform var(--dur) var(--ease);
-}
-.hk-chip:hover:not(.hk-chip-dragging) { transform: translateY(-2px); }
-.hk-add:hover:not(:disabled) { transform: translateY(-2px); }
-.hk-pick-row { animation: hk-row-in 160ms var(--ease) backwards; }
-@keyframes hk-row-in {
-  from { opacity: 0; transform: translateX(-6px); }
-  to   { opacity: 1; transform: none; }
-}
-button.hk-pick-row:hover { transform: translateX(3px); }
-
-/* NOTHING ARRIVES ON A REPAINT (v1.4.2). The CLI Hook Interface rebuilds its
-   whole panel when a change is STAGED — no request, no navigation, the same
-   cards with one value different — and the entrance animations above replayed
-   every time, on a 30ms stagger. With the network tab empty it read exactly
-   like the page reloading, on every keystroke.
-
-   `hk-quiet` is added by `hkPaint` from the SECOND paint onward and by the part
-   editor before every rebuild. It removes the ENTRANCES only: the transitions
-   further up are about the pointer rather than about arriving, so hover, the
-   drop marker and the staged edge are untouched. It must load after the rules
-   it switches off, which is why it is here and not in the panel's own file. */
-.hk-quiet > *,
-.hk-quiet .hk-chip,
-.hk-quiet .hk-chip-new,
-.hk-quiet .hk-pick-row {
-  animation: none;
-}
-
-/* ---------------------------------------------------------- REDUCED MOTION */
-/* Non-negotiable: every animation and transition above is off. */
-
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 1ms !important;
-    animation-iteration-count: 1 !important;
-    /* Load-bearing, not tidiness: the staggered entrance fills `backwards`, so
-       a delay that survives here leaves a block sitting at opacity 0 for its
-       whole delay — reduced motion would mean things simply do not appear. */
-    animation-delay: 0ms !important;
-    transition-duration: 1ms !important;
-    scroll-behavior: auto !important;
-  }
-  /* Reduced motion means no movement, not fast movement — the hover and press
-     nudges are removed outright rather than sped up. */
-  .nav a:hover, .btn:active:not(:disabled), .action:hover,
-  .todo:hover, .stat-link:hover, button.step:hover { transform: none !important; }
-  /* The board's own nudges, removed rather than shortened — a chip that lifts
-     under the pointer is an affordance, and a fast lift is still a lift. The
-     border and box-shadow changes stay: THEY are what says where a drop lands,
-     and a drop marker carried by motion alone would not exist here at all. */
-  .hk-chip:hover:not(.hk-chip-dragging), .hk-add:hover:not(:disabled),
-  button.hk-pick-row:hover { transform: none !important; }
-  /* The vault pulse is one of two INFINITE animations on the page. Capping it to
-     a single 1ms run would still leave a dash frozen mid-edge, so it is removed
-     outright and the edge reads as a plain line. */
-  .vault-pulse { display: none; }
-  /* The other one: the looping flow sweep. `animation-iteration-count: 1` above
-     would still fire it once and then leave the connector segment collapsed at
-     its final keyframe, so both halves are removed outright — the rail is drawn
-     in its resting state and the hairlines read as plain connectors. */
-  .step, .step::before { animation: none !important; }
-  .step-flow { display: none; }
-  /* The cost bar grows in two dimensions (the stack's width, each segment's
-     flex-grow). Both are removed rather than shortened, so the bar is simply
-     drawn at its final proportions. */
-  .bar-stack, .bar-seg { transition: none !important; }
-  /* The challenge timeline and its convergence bar. Both are removed rather
-     than shortened: a capped `ch-grow` leaves a segment frozen part-way, which
-     misreports the count it is drawn from — worse than no animation at all. */
-  .ch-rail-node, .ch-conv-seg { animation: none !important; }
-  /* The Docs ribbon (v0.48.0). Three animations, all REMOVED rather than
-     capped: `doc-seg-in` capped at one iteration would still leave a segment
-     mid-`scaleY`, and the two INFINITE ones (the written sheen and the
-     user-edited pulse) would freeze at whatever opacity the single run stopped
-     on — a segment drawn at 40% height misreports the line count it is drawn
-     from, which is worse than no animation at all. The wave rows and the health
-     bars go the same way: a bar frozen part-way is a wrong number. */
-  .doc-seg, .doc-seg-box, .doc-wave, .doc-bar-seg { animation: none !important; }
-  /* The Extra connect pulse (v0.50.0). A probe has no known duration, so the
-     dot loops until an answer arrives — the third INFINITE animation on the
-     page, and removed outright for the same reason as the other two: capped at
-     one iteration it would stop half way across the wire, which reads as a
-     request that hung. The wire itself still turns green or red, so the RESULT
-     of the test is never carried by motion alone. */
-  .ex-wire-dot { display: none; }
-}
+/* 04-motion.css — orc ui
+   The panel entrance, the staggered block entrance, and THE ONE
+   @media (prefers-reduced-motion) block.
+   
+   LOADED LAST, and that is load-bearing. Several reduced-motion rules are
+   plain declarations rather than !important (.vault-pulse and .step-flow are
+   removed with `display: none`, because capping an infinite animation to one
+   iteration freezes it mid-cycle). An equal-specificity rule in a panel file
+   loading afterwards would win on order and quietly switch the animation back
+   on. A test asserts this media query appears here and in no panels/*.css.
+
+   The <link> ORDER in app.html is the cascade order, and the numeric
+   prefix is that order. No @import: it would carry no session token and
+   401. */
+
+/* Panel swap: 180ms slide + fade, ease-out. */
+.panel { animation: panel-in var(--dur) var(--ease); }
+@keyframes panel-in {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: none; }
+}
+
+/* Staggered entrance. The blocks of a panel arrive in reading order rather than
+   all at once, which makes a panel of six cards parse as a sequence instead of
+   a flash. Capped at 8 so a long list never becomes a slow one — every child
+   past the cap shares the last delay. */
+.stack > * { animation: block-in var(--dur) var(--ease) backwards; }
+.stack > *:nth-child(1) { animation-delay: 0ms; }
+.stack > *:nth-child(2) { animation-delay: 30ms; }
+.stack > *:nth-child(3) { animation-delay: 60ms; }
+.stack > *:nth-child(4) { animation-delay: 90ms; }
+.stack > *:nth-child(5) { animation-delay: 120ms; }
+.stack > *:nth-child(6) { animation-delay: 150ms; }
+.stack > *:nth-child(7) { animation-delay: 180ms; }
+.stack > *:nth-child(n+8) { animation-delay: 210ms; }
+@keyframes block-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: none; }
+}
+/* ── the CLI Hook Interface (v1.4.1) ─────────────────────────────────────── */
+/* The board is a thing you BUILD, so it moves the way a thing you build moves:
+   a chip arrives, a chip you just staged breathes once so you can find it, and
+   a row in the part picker slides in as the list narrows under your typing.
+   Every one of them is a FINITE animation with a real end state, so the cap in
+   the reduced-motion block below leaves each one at rest rather than frozen
+   part-way. */
+.hk-chip { animation: hk-chip-in 200ms var(--ease) backwards; }
+@keyframes hk-chip-in {
+  from { opacity: 0; transform: translateY(6px) scale(0.97); }
+  to   { opacity: 1; transform: none; }
+}
+/* Staged, not written — and the one thing on the board that has to be findable
+   the instant it appears. Three pulses and it stops: an infinite one would have
+   to be REMOVED below rather than capped, and this one reads correctly at rest.
+   */
+.hk-chip-new { animation: hk-chip-in 200ms var(--ease) backwards, hk-chip-mark 900ms var(--ease) 3; }
+@keyframes hk-chip-mark {
+  0%, 100% { box-shadow: inset 0 0 0 0 var(--accent); }
+  50%      { box-shadow: inset 0 0 0 2px var(--accent); }
+}
+/* Position, drop marker, and the zone's own border: transitions rather than
+   animations, so an interrupted drag never leaves a chip mid-flight. */
+.hk-chip, .hk-zone, .hk-add, .hk-act, .hk-pick-row, .hk-theme, .hk-sample {
+  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
+              box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease),
+              transform var(--dur) var(--ease);
+}
+.hk-chip:hover:not(.hk-chip-dragging) { transform: translateY(-2px); }
+.hk-add:hover:not(:disabled) { transform: translateY(-2px); }
+.hk-pick-row { animation: hk-row-in 160ms var(--ease) backwards; }
+@keyframes hk-row-in {
+  from { opacity: 0; transform: translateX(-6px); }
+  to   { opacity: 1; transform: none; }
+}
+button.hk-pick-row:hover { transform: translateX(3px); }
+
+/* NOTHING ARRIVES ON A REPAINT (v1.4.2). The CLI Hook Interface rebuilds its
+   whole panel when a change is STAGED — no request, no navigation, the same
+   cards with one value different — and the entrance animations above replayed
+   every time, on a 30ms stagger. With the network tab empty it read exactly
+   like the page reloading, on every keystroke.
+
+   `hk-quiet` is added by `hkPaint` from the SECOND paint onward and by the part
+   editor before every rebuild. It removes the ENTRANCES only: the transitions
+   further up are about the pointer rather than about arriving, so hover, the
+   drop marker and the staged edge are untouched. It must load after the rules
+   it switches off, which is why it is here and not in the panel's own file. */
+.hk-quiet > *,
+.hk-quiet .hk-chip,
+.hk-quiet .hk-chip-new,
+.hk-quiet .hk-pick-row {
+  animation: none;
+}
+
+/* ---------------------------------------------------------- REDUCED MOTION */
+/* Non-negotiable: every animation and transition above is off. */
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    /* Load-bearing, not tidiness: the staggered entrance fills `backwards`, so
+       a delay that survives here leaves a block sitting at opacity 0 for its
+       whole delay — reduced motion would mean things simply do not appear. */
+    animation-delay: 0ms !important;
+    transition-duration: 1ms !important;
+    scroll-behavior: auto !important;
+  }
+  /* Reduced motion means no movement, not fast movement — the hover and press
+     nudges are removed outright rather than sped up. */
+  .nav a:hover, .btn:active:not(:disabled), .action:hover,
+  .todo:hover, .stat-link:hover, button.step:hover { transform: none !important; }
+  /* The board's own nudges, removed rather than shortened — a chip that lifts
+     under the pointer is an affordance, and a fast lift is still a lift. The
+     border and box-shadow changes stay: THEY are what says where a drop lands,
+     and a drop marker carried by motion alone would not exist here at all. */
+  .hk-chip:hover:not(.hk-chip-dragging), .hk-add:hover:not(:disabled),
+  button.hk-pick-row:hover { transform: none !important; }
+  /* The vault pulse is one of two INFINITE animations on the page. Capping it to
+     a single 1ms run would still leave a dash frozen mid-edge, so it is removed
+     outright and the edge reads as a plain line. */
+  .vault-pulse { display: none; }
+  /* The other one: the looping flow sweep. `animation-iteration-count: 1` above
+     would still fire it once and then leave the connector segment collapsed at
+     its final keyframe, so both halves are removed outright — the rail is drawn
+     in its resting state and the hairlines read as plain connectors. */
+  .step, .step::before { animation: none !important; }
+  .step-flow { display: none; }
+  /* The cost bar grows in two dimensions (the stack's width, each segment's
+     flex-grow). Both are removed rather than shortened, so the bar is simply
+     drawn at its final proportions. */
+  .bar-stack, .bar-seg { transition: none !important; }
+  /* The challenge timeline and its convergence bar. Both are removed rather
+     than shortened: a capped `ch-grow` leaves a segment frozen part-way, which
+     misreports the count it is drawn from — worse than no animation at all. */
+  .ch-rail-node, .ch-conv-seg { animation: none !important; }
+  /* The Docs ribbon (v0.48.0). Three animations, all REMOVED rather than
+     capped: `doc-seg-in` capped at one iteration would still leave a segment
+     mid-`scaleY`, and the two INFINITE ones (the written sheen and the
+     user-edited pulse) would freeze at whatever opacity the single run stopped
+     on — a segment drawn at 40% height misreports the line count it is drawn
+     from, which is worse than no animation at all. The wave rows and the health
+     bars go the same way: a bar frozen part-way is a wrong number. */
+  .doc-seg, .doc-seg-box, .doc-wave, .doc-bar-seg { animation: none !important; }
+  /* The Extra connect pulse (v0.50.0). A probe has no known duration, so the
+     dot loops until an answer arrives — the third INFINITE animation on the
+     page, and removed outright for the same reason as the other two: capped at
+     one iteration it would stop half way across the wire, which reads as a
+     request that hung. The wire itself still turns green or red, so the RESULT
+     of the test is never carried by motion alone. */
+  .ex-wire-dot { display: none; }
+  /* The Knowledge ▸ Code graph tab (v1.9.2). Three INFINITE animations — the
+     state beacon, the pipeline dots and the call-edge pulses — are REMOVED, not
+     capped: a capped one stops half way along its path, which reads as a dot
+     that belongs there. Every finite one is removed too, so each bar is drawn
+     at its final width at once: a bar frozen part-way is a wrong number. The
+     tiles already skip their count-up here (cgStill() in the panel). */
+  .cg-beacon, .cg-link-dot, .cg-pulse { display: none; }
+  .cg-step, .cg-step-line, .cg-station, .cg-file, .cg-sym, .cg-edge-line,
+  .cg-seg, .cg-tile, .cg-bchip, .cg-lang, .cg-read, .cg-gloss-group { animation: none !important; }
+  .cg-station:hover { transform: none !important; }
+}