/* Controls, for both apps (v4.1.1). ONE spec for a button, a chip and a segmented control,
   so the dashboard and the pod cannot drift apart again (there were seven control heights:
   28, 30, 32, 34, 36, 38, 40, 42, 48). Loaded BEFORE each app's own <style>, which keeps
   only what is that app's own. It defines no tokens and reads the host's, and only tokens
   both apps define. DESIGN.md, "Controls":

     32   a chip; a button inside a row or a card (.btn.small); a button of a segmented control
     40   a button (.btn); every field and select pill; a segmented control's trough
     44   the one wide primary button of a form (.btn.wide)
     24   a chip inside a row (a badge beside a name), and .chip.tiny

   Text in a control is 13 px / 600. 12 px is for meta lines, and nothing is set under 12.
   A button never lifts on hover: cards do, controls do not. */

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;
     border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);
     font-family:var(--display);font-weight:600;font-size:var(--t-13);letter-spacing:-.01em;cursor:pointer;
     white-space:nowrap;text-decoration:none;
     transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),opacity var(--dur) var(--ease),
                transform var(--dur-press) ease-out}
.btn:hover:not(:disabled){background:var(--raised);box-shadow:var(--shadow)}
/* v4.1.3. Every press is answered at once: the button gives, 80 ms, and comes back. Only
   while it is held, never on hover (a button does not lift), never for a button that is off. */
.btn:active:not(:disabled):not([aria-disabled="true"]){transform:scale(.98)}
.btn:disabled{opacity:.4;cursor:not-allowed}
/* BUSY (library-ui.js busyButton): the action is on its way. The button keeps its width and
   its colour (it is not "off": it is working), shows a small ring before its words, and takes
   no second press. Then a check for a moment, or the error beside it. */
.btn[aria-busy="true"],.btn[aria-busy="true"]:disabled{opacity:1;cursor:progress}
.btn-ring{flex:none;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;
          animation:btn-ring .8s linear infinite}
.btn-done{flex:none;width:14px;height:14px}
/* v4.1.3 review. Busy: the words keep their room and go out of sight; the ring (then the
   check) is laid over the middle. The button's width does not move. */
.btn-busy{position:relative}
.btn-busy .btn-words{visibility:hidden;display:inline-flex;align-items:center;gap:8px}
.btn-busy .btn-ring,.btn-busy .btn-done{position:absolute;left:50%;top:50%;margin:-7px 0 0 -7px}
@keyframes btn-ring{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
  .btn:active:not(:disabled):not([aria-disabled="true"]){transform:none}
  .btn-ring{animation:none}
}
.btn.primary{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.btn.primary:hover:not(:disabled){background:var(--blue-hover)}
.btn.small{height:32px;padding:0 16px}
.btn.wide{width:100%;height:44px}
.btn.quiet{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.quiet:hover:not(:disabled){background:var(--surface);border-color:var(--line-2);color:var(--ink);box-shadow:none}

/* ---------------------------------------------------------------- chips */
.chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border:0;
      border-radius:var(--r-pill);background:var(--sunken);color:var(--ink-2);
      font-size:var(--t-12);font-weight:600;white-space:nowrap}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.chip.ok{background:var(--good-wash);color:var(--good)}
.chip.ok .dot{background:var(--good)}
/* Inside a row: a badge beside a name. */
.chip.tiny,.chip.in-row{height:24px;padding:0 8px;gap:4px}

/* ---------------------------------------------------------------- segmented controls
   A pill trough of 40 with pill buttons of 32. The chosen one is raised AND carries a blue
   edge: a shadow alone is not a selected state (DESIGN.md).

   v4.1.3 (E7). ONE spec, and four names for it: .seg and .pick (both apps), the Video page's
   .vroute (Start frame or Reference; Fast or Quality as .vroute.vtier) and the Library's
   .lib-kind (All, Images, Videos). Those two had copies of their own, in another face and
   on another ground; what is left with them is only where they sit (a full-width row, a
   margin), never how they look. */
.seg,.pick,.vroute,.lib-kind{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:4px;
           background:var(--well);border:0;border-radius:var(--r-pill)}
.seg button,.pick button,.vroute button,.lib-kind button{
           display:inline-flex;align-items:center;justify-content:center;gap:8px;height:32px;padding:0 16px;
           border:0;border-radius:var(--r-pill);background:none;color:var(--ink-2);cursor:pointer;white-space:nowrap;
           font-family:var(--body);font-weight:600;font-size:var(--t-13);
           transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.seg button:hover:not(:disabled),.pick button:hover:not(:disabled),
.vroute button:hover:not(:disabled),.lib-kind button:hover:not(:disabled){color:var(--ink)}
.seg button.on,.pick button.on,.seg button[aria-pressed="true"],.pick button[aria-pressed="true"],
.seg button[aria-checked="true"],.pick button[aria-checked="true"],
.vroute button[aria-checked="true"],.lib-kind button[aria-pressed="true"]{
           background:var(--raised);color:var(--ink);box-shadow:inset 0 0 0 1px var(--blue)}
.seg button:disabled,.pick button:disabled,.vroute button:disabled,.lib-kind button:disabled{opacity:.4;cursor:not-allowed}