/* dock.css, the quick action dock.

   ROUND 7. Anand, 2026-08-12: "what happened to the thing at the bottom of
   the quick buttons, a little pillow shape thing, when you hover over maybe
   it gets bigger, has quick buttons, one of the quick buttons could be to
   take a tour. They could just be intuitive and native."

   It was removed in round five for a real reason, recorded in shell.py: it
   was a fixed pill sitting at the bottom CENTRE of every screen and it
   covered a table row in every screenshot taken that round. So this is not a
   revert. Three things changed so both facts can be true at once:

     1. bottom RIGHT, not bottom centre, so it sits in the page gutter rather
        than over the middle of a table.
     2. 40px at rest and it carries no labels, so the footprint is a circle
        and a word, not a bar. It grows on hover, focus or keyboard, which is
        exactly what he described.
     3. it yields. `.dock--yield` drops it to 30% opacity while a panel, a
        sheet or the tour is up, so it never competes with the thing you just
        opened.

   Class names are deliberately the OLD ones. roles.js already binds the
   number keys, draws the pinned slots into `.hotbar__slots` and owns the
   hide and restore flow against `[data-hot-off]`. None of that is rewritten,
   only redrawn. */

.hotbar.dock {
  position: fixed;
  right: 22px;
  bottom: 20px;
  left: auto;
  transform: none;
  z-index: 700;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: var(--r-full, 999px);
  background: rgba(30, 22, 38, 0.94);
  backdrop-filter: saturate(1.4) blur(9px);
  -webkit-backdrop-filter: saturate(1.4) blur(9px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 34px rgba(20, 12, 28, 0.28);
  max-width: calc(100vw - 44px);
  transition:
    box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s;
}
.hotbar.dock.gone {
  display: none;
}

/* the grip is the whole control at rest: a 30px circle carrying the mark */
.hotbar.dock .hotbar__grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full, 999px);
  background: linear-gradient(140deg, #6b4a86, #3f7d8c);
  color: #fff;
  cursor: pointer;
}
.hotbar.dock .hotbar__grip svg {
  width: 15px;
  height: 15px;
}
.hotbar.dock .hotbar__grip > span {
  display: none;
}
.hotbar.dock .hotbar__grip:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ROUND 8. This folded to 0fr at rest and opened on hover. Anand:
   "right now I can't actually hover over and click in the presets, I have
   to hover over the flash icon in the bottom right, then see my different
   views." A shortcut that costs a hover before it costs a click is not a
   shortcut. So the fold is OPEN by default and only `.dock--min`, set by
   the Hide button, closes it. The grid-template-columns transition is kept
   because it animates a real width with no magic number to go stale. */
.hotbar.dock .dock__fold {
  display: grid;
  grid-template-columns: 1fr;
  transition: grid-template-columns 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.hotbar.dock .dock__inner {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}
.hotbar.dock.dock--min .dock__fold {
  grid-template-columns: 0fr;
}
.hotbar.dock:hover {
  box-shadow: 0 14px 44px rgba(20, 12, 28, 0.36);
}
/* hidden means SMALLER. The grip is the whole control and the way back. */
.hotbar.dock.dock--min {
  padding: 4px;
  gap: 0;
}

/* one action. Same geometry as a small button everywhere else in the
   product, which is the rule CRAFT.md section 7 sets: a clickable thing is
   shaped like the other clickable things. */
.hotbar.dock .dock__act,
.hotbar.dock .hot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--r-full, 999px);
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  font-size: var(--t-1, 11px);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.hotbar.dock .dock__act svg {
  width: 13px;
  height: 13px;
  flex: none;
  opacity: 0.85;
}

/* ROUND 8, second pass. Unfolding the bar by default and then unfolding the
   pin labels inside it took the dock from 54px to 672px, and at that width
   it lay across a table row on every screen. That is the exact fault round
   five deleted the original bar for, arriving by a different route.

   So the bar earns its width back. Jump to a screen and Ask EYT lose their
   labels and keep their icons and their titles, because both already have a
   labelled door elsewhere on the same screen: Jump is the rail's own search
   control at the top of the sidebar, and Ask EYT is a labelled button in the
   topbar. A second labelled copy of a control that is already labelled six
   inches away is width spent on nothing.

   Take a tour keeps its label, because he asked for it by name at the
   bottom of the screen, and the pins keep theirs, because a pin without its
   name is the numbered bar he complained about. */
.hotbar.dock .dock__act[data-dock-jump],
.hotbar.dock .dock__act[data-dock-ask] {
  padding: 0 8px;
  gap: 0;
}
.hotbar.dock .dock__act[data-dock-jump] .dock__lab,
.hotbar.dock .dock__act[data-dock-ask] .dock__lab {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hotbar.dock .dock__act:hover,
.hotbar.dock .hot:hover {
  background: rgba(255, 255, 255, 0.19);
  color: #fff;
}
.hotbar.dock .dock__act:focus-visible,
.hotbar.dock .hot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}
.hotbar.dock .hot kbd {
  font-family: inherit;
  font-size: 10px;
  opacity: 0.6;
}
.hotbar.dock .hotbar__slots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ROUND 8. THE PINNED VIEWS SHOW THEIR NAMES.

   v2.css folds `.hot > span` to max-width 0 and opens it on hover of the
   bar, which is the same hover gate the fold above just came off, applied a
   second time one level down. Measured: the three pins painted at 55px each
   carrying "Studios", "Pipeline" and "Revenue & royalties" at ZERO width,
   so the bar read as the numbers 1, 2, 3 and nothing else.

   Anand: "right now I can't actually hover over and click in the presets, I
   have to hover over the flash icon in the bottom right, then see my
   different views." A shortcut whose label is behind a hover is a shortcut
   you have to go looking for. They fold only when the whole dock does. */
.hotbar.dock .hot > span {
  max-width: 150px;
  opacity: 1;
}
.hotbar.dock.dock--min .hot > span {
  max-width: 0;
  opacity: 0;
}
/* the remove control stays on hover. It is destructive and it is not the
   reason the pin is there. */
.hotbar.dock .hot__x {
  opacity: 0;
  transition: opacity 0.16s;
}
.hotbar.dock .hot:hover .hot__x,
.hotbar.dock .hot:focus-within .hot__x {
  opacity: 1;
}
.hotbar.dock .hotbar__slots:empty {
  display: none;
}

/* a thin divider between the three fixed actions and whatever the owner
   pinned herself. Stripe keeps pinned and recent in one section and calls
   the result Shortcuts; the divider is what stops the two reading as one
   undifferentiated row. */
.hotbar.dock .dock__sep {
  width: 1px;
  height: 18px;
  flex: none;
  background: rgba(255, 255, 255, 0.16);
  margin: 0 2px;
}
.hotbar.dock .dock__sep:last-child,
.hotbar.dock .dock__sep:first-child {
  display: none;
}

/* ROUND 8. This carried `width: 24px` while a later rule folded it with
   `max-width: 0 -> 60px`. Two declarations fighting over one box, and the
   word lost: measured on live it painted at 0x24 while needing 31px, which
   is the "-lide" in his screenshot. It is sized by its own content now, so
   there is nothing left to disagree with. */
.hotbar.dock .hotbar__off {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 9px;
  flex: none;
  border: 0;
  border-radius: var(--r-full, 999px);
  background: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--t-1, 11px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.hotbar.dock .hotbar__off:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* Yield. A fixed control that stays at full strength while a sheet, a panel
   or the tour is open is a control competing with the thing you just asked
   for. It does not disappear, because then it is not findable.

   ROUND 8, and this was a serious defect. `body.tour-offer-on` was in this
   list, and the tour offers itself on every session. So on first paint the
   dock was pointer-events: none, and `elementFromPoint` at the dock's own
   centre returned `A.rank__row`: the click fell THROUGH the dock and
   activated the studio row underneath it. Playwright found it before I did,
   timing out on hover with "subtree intercepts pointer events".

   The offer is a nudge, not a modal. It is dismissed by a pointerdown
   anywhere, including on the dock, so it never needed to disable anything.
   A panel or a sheet is modal and genuinely should trap the pointer, so
   those three stay. The offer only dims. */
body.panel-open .hotbar.dock,
body.tour-on .hotbar.dock,
body.sheet-open .hotbar.dock {
  opacity: 0.28;
  pointer-events: none;
}
body.tour-offer-on .hotbar.dock {
  opacity: 0.5;
}

@media (max-width: 720px) {
  .hotbar.dock {
    right: 12px;
    bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hotbar.dock,
  .hotbar.dock .dock__fold {
    transition: none;
  }
}

/* the hide control goes away with the rest, and only when minimised */
.hotbar.dock .hotbar__off {
  max-width: 70px;
  opacity: 1;
  overflow: hidden;
  transition:
    max-width 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.16s;
}
.hotbar.dock.dock--min .hotbar__off {
  max-width: 0;
  padding: 0;
  opacity: 0;
}

/* No bottom padding is added here, and that is deliberate. `.app .main`
   already carries 108px, measured, which clears the dock's 42px plus its
   20px offset with room to spare, so the end of the document was never the
   problem. Adding another 78px only made dead space that density.mjs would
   correctly fail. Mid-scroll the bar covers what is under it, which is true
   of every fixed toolbar and is not fixable with padding. */