/*  dock.css  —  Aphexar Dock
 *
 *  Sits on top of flowstate.css and adds only what the Dock needs. Every
 *  colour comes from the Flowstate tokens, never a literal — so if the panel
 *  palette moves, this moves with it.
 *
 *  ── THE SCALE ───────────────────────────────────────────────────────────
 *  Every measurement in this file is a Fibonacci number:
 *
 *      1 · 2 · 3 · 5 · 8 · 13 · 21 · 34 · 55 · 89 · 144 · 233
 *
 *  Consecutive terms converge on the golden ratio, so each step is φ-related
 *  to the ones either side of it. Nothing is a round number that happened to
 *  look right — if a value is not on that list it is a bug, and there are no
 *  bare pixel values anywhere below outside the token block.
 *
 *  It reaches the layout, not just the padding: the column is 233, the gutter
 *  21, the curve graph 144, the anchor cells 34, the label swatches 21.
 */

:root{
  --f1:1px;     --f2:2px;   --f3:3px;   --f5:5px;   --f8:8px;
  --f13:13px;   --f21:21px; --f34:34px; --f55:55px; --f89:89px;
  --f144:144px; --f233:233px;
}

/* ═══════════════════════════════════════════════════════════════════════
   THE FLOW — sections reflow into as many columns as the panel is wide.

   WHY COLUMNS AND NOT GRID
   The sections are wildly different heights: Curve is tall, Comp is short.
   A grid aligns them into rows and leaves a dead gap under every short one.
   Multi-column packs them tight instead, and break-inside keeps a section
   whole rather than splitting Effects across a column boundary.

   Dock it narrow and it is one column; drag it wider and it becomes two,
   then three, with no breakpoints to maintain — the column width decides.
   ═══════════════════════════════════════════════════════════════════════ */
.dk-flow{
  columns:var(--f233);
  column-gap:var(--f21);
  padding:0 var(--f13) var(--f13);
}

/* Chromium only honours break-inside reliably when the item is an
   inline-block at full column width. Without this pair, Effects splits
   across the boundary mid-chip. */
.dk-flow > .fs-block{
  display:inline-block;
  width:100%;
  padding:0;
  margin:0 0 var(--f21);
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
}

.dk-status{
  padding:0 var(--f13) var(--f13);
  margin:0;
}

/* ── CURVE EDITOR ───────────────────────────────────────────────────────
   The one place the Dock spends real estate, because the shape of the ease
   is the whole point and a number field cannot show it.                  */
.dk-curve{
  display:block;
  width:100%;
  height:var(--f144);
  margin:0 0 var(--f8);
  background:var(--raised);
  border:var(--f1) solid var(--edge);
  border-radius:var(--f3);
  overflow:visible;          /* overshoot handles may sit outside the box */
  touch-action:none;         /* pointer capture needs this to drag cleanly */
}

.dk-c-grid{ stroke:var(--edge); stroke-width:1; fill:none; }

/* The corner-to-corner line — linear, for comparison. */
.dk-c-base{
  stroke:var(--dimmer); stroke-width:1; fill:none;
  opacity:.4; stroke-dasharray:3 3;
}
.dk-c-line{
  stroke:var(--acid); stroke-width:2.5; fill:none;
  vector-effect:non-scaling-stroke;
}
.dk-c-arm{
  stroke:var(--dimmer); stroke-width:1.2; opacity:.7;
  vector-effect:non-scaling-stroke;
}
.dk-c-h{
  fill:var(--raised-hi);
  stroke:var(--acid);
  stroke-width:2;
  cursor:grab;
  vector-effect:non-scaling-stroke;
}
.dk-c-h:hover{ fill:var(--acid); }
.dk-c-h.is-drag{ fill:var(--acid); cursor:grabbing; }

.dk-cread{ text-align:center; margin-bottom:var(--f8); }
.dk-cread code{
  font-family:var(--f-num); font-size:var(--f13);
  letter-spacing:.03em; color:var(--dimmer);
}

/* ── ANCHOR GRID ────────────────────────────────────────────────────────
   Drawn from divs, not images — nothing to lose, and it scales. Three 34s
   with two 3s between them, so the block itself lands on the scale.      */
.dk-grid{
  display:grid;
  grid-template-columns:repeat(3, var(--f34));
  gap:var(--f3);
  justify-content:center;
  margin:0 auto var(--f13);
}

.dk-cell{
  position:relative;
  height:var(--f34);
  border:var(--f1) solid var(--edge);
  border-radius:var(--f3);
  background:var(--raised);
  cursor:pointer;
  padding:0;
  transition:background .12s var(--ease), border-color .12s var(--ease);
}
.dk-cell:hover{ background:var(--raised-hi); border-color:var(--dimmer); }
.dk-cell:active{ background:var(--raised-hi); border-color:var(--acid); }
.dk-cell:focus-visible{ outline:var(--f1) solid var(--acid); outline-offset:var(--f1); }

/* The ghost outline of the layer inside each cell. */
.dk-cell::before{
  content:"";
  position:absolute; inset:var(--f8);
  border:var(--f1) solid var(--dimmer);
  opacity:.55;
}

/* The dot — where the anchor lands. Positioned per cell by --x / --y. */
.dk-cell::after{
  content:"";
  position:absolute;
  left:calc(var(--f8) + (100% - var(--f8) * 2) * var(--x));
  top: calc(var(--f8) + (100% - var(--f8) * 2) * var(--y));
  width:var(--f5); height:var(--f5);
  margin:calc(var(--f5) / -2) 0 0 calc(var(--f5) / -2);
  border-radius:50%;
  background:var(--acid);
}

/* ═══════════════════════════════════════════════════════════════════════
   UNIFORM GRIDS

   Chips and swatches used to size to their own content and wrap wherever
   they landed, leaving every row a different length. These are grids: one
   cell size per group, every cell identical, every row flush to both edges.

   Counts divide exactly — sixteen label colours into two rows of eight, six
   presets into three rows of two — so no row is left half empty. The clear-
   label button sits outside its grid for exactly that reason.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── LABEL SWATCHES — 8 x 2, flush to both edges ─────────────────────── */
.dk-labels{
  display:grid;
  grid-template-columns:repeat(8, var(--f21));
  justify-content:space-between;
  gap:var(--f5);
  margin:var(--f13) 0 var(--f8);
}
.dk-swatch{
  width:var(--f21); height:var(--f21);
  margin:0; padding:0;
  border:var(--f1) solid var(--edge);
  border-radius:var(--f3);
  cursor:pointer;
  transition:transform .1s var(--ease), border-color .1s var(--ease);
}
.dk-swatch:hover{ transform:scale(1.18); border-color:var(--bone); }
.dk-swatch:focus-visible{ outline:var(--f1) solid var(--acid); outline-offset:var(--f1); }

/* Full-width actions. A button that hugs its own text and floats right reads
   as secondary — these are the primary action of their section, so they take
   the whole width the way CLEAR MATTE and NO LABEL do. */
.dk-clearlabel,
.dk-wide{
  width:100%;
  margin-top:var(--f5);
}

/* ── CHIP GRIDS ──────────────────────────────────────────────────────────
   auto-fill rather than auto-fit: empty trailing tracks are kept, so the
   last row's chips stay the same width as every other row's.             */
.fs-chips{
  display:grid;
  gap:var(--f5);
  /* flowstate.css gives .fs-chips a 16px side margin for its own padded
     blocks. The flow container owns padding here, so that inset has to go or
     the chips sit 16px in from every other control in the section. */
  margin:0 0 var(--f8);
}
.fs-chips .fs-chip{
  width:100%;
  margin:0;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Six presets, two across — three exact rows. Three across fitted at full
   width and truncated "Slow out" at the dock's own minimum. */
#cPresets{ grid-template-columns:repeat(2, 1fr); }

/* 89 is the step that clears the longest effect name at this type size. */
#fxChips{ grid-template-columns:repeat(auto-fill, minmax(var(--f89), 1fr)); }

/* One tracking value for every control in the flow. Flowstate's .09em is
   right in a 320px panel two buttons wide; at three across in a 233 column
   it is what pushed "Un-comp" over the edge. */
.dk-flow .fs-btn,
.dk-flow .fs-chip{
  letter-spacing:.03em;
  padding-left:var(--f5);
  padding-right:var(--f5);
}

/* ── INLINE ROWS (number + unit + button) ───────────────────────────────
   .fs-input and .fs-btn are both full-width in flowstate.css, which is right
   everywhere else and wrong inside a flex row — three side by side overflowed
   the dock by 143px at every width. Every child gets an explicit width, and
   the row wraps rather than spilling when dragged narrower than it fits.  */
.dk-inline{
  display:flex; align-items:center; gap:var(--f5);
  flex-wrap:wrap;
}
.dk-inline .fs-input{ width:auto; }

.dk-num{
  width:var(--f55); flex:0 0 auto;
  font-family:var(--f-num);
  text-align:right;
}
.dk-sel{
  width:var(--f55); flex:0 0 auto;
  font-family:var(--f-body); font-size:var(--f13);
  padding:var(--f3) var(--f5);
}
.dk-unit{
  flex:none;
  font-family:var(--f-body); font-size:var(--f13);
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--dimmer);
}
.dk-go{
  margin-left:auto;
  flex:0 0 auto;
  width:auto;
  min-width:var(--f55);
}

/* Chromium draws number spinners that are useless at this size. */
.dk-num::-webkit-inner-spin-button,
.dk-num::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }

/* ── SUB-LABEL ──────────────────────────────────────────────────────────
   A quiet line inside a block, for the bit of context a button cannot say. */
.dk-sub{
  font-family:var(--f-body); font-size:var(--f13);
  letter-spacing:.04em;
  color:var(--dimmer);
  margin:var(--f8) 0 var(--f5);
}
.fs-hint.dk-sub{ margin-bottom:0; }

/* ── STATUS ─────────────────────────────────────────────────────────────
   Failures are meant to be seen, so they get colour and the rest does not. */
.fs-hint.is-err{  color:var(--err); }
.fs-hint.is-busy{ color:var(--busy); }
.fs-hint.is-ok{   color:var(--dim); }

/* ── PLACE GRID ─────────────────────────────────────────────────────────
   Identical cells to Anchor, deliberately — it is the same nine positions.
   The ghost inside is the difference: Anchor shows a layer with its pivot
   marked, Place shows a comp frame with the layer pushed into a corner, so
   the two grids are never mistaken for each other at a glance. */
.dk-grid-place .dk-cell::before{
  inset:var(--f3);
  border-style:dashed;
  opacity:.45;
}
.dk-grid-place .dk-cell::after{
  /* a small plate, not a pivot dot */
  width:var(--f8); height:var(--f8);
  border-radius:var(--f1);
  margin:calc(var(--f8) / -2) 0 0 calc(var(--f8) / -2);
  left:calc(var(--f8) + (100% - var(--f8) * 2) * var(--x));
  top: calc(var(--f8) + (100% - var(--f8) * 2) * var(--y));
}

/* ── SCRUB ──────────────────────────────────────────────────────────────
   A drag surface, not a slider — there is no track, because the value is
   relative and has no ends. The number is the feedback. */
.dk-scrub{
  display:flex; align-items:center; justify-content:center;
  height:var(--f34);
  margin-bottom:var(--f8);
  border:var(--f1) solid var(--edge);
  border-radius:var(--f3);
  background:var(--raised);
  cursor:ew-resize;
  user-select:none;
  touch-action:none;
  transition:border-color .12s var(--ease), background .12s var(--ease);
}
.dk-scrub:hover{ background:var(--raised-hi); border-color:var(--dimmer); }
.dk-scrub.is-drag{ border-color:var(--acid); background:var(--raised-hi); }

.dk-scrub-val{
  font-family:var(--f-num); font-size:var(--f13);
  letter-spacing:.04em;
  color:var(--dim);
}
.dk-scrub.is-drag .dk-scrub-val{ color:var(--acid); }

/* ── SLIDERS ────────────────────────────────────────────────────────────
   Bounded to the composition, so the right-hand end of the track is the last
   frame. Chromium's default range control is chrome-heavy and light-themed,
   so the track and thumb are drawn from the panel tokens instead. */
.dk-slider{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:var(--f13);
  margin:0 0 var(--f8);
  background:transparent;
  cursor:ew-resize;
}
.dk-slider::-webkit-slider-runnable-track{
  height:var(--f5);
  border-radius:var(--f3);
  background:var(--raised);
  border:var(--f1) solid var(--edge);
}
.dk-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:var(--f13); height:var(--f13);
  margin-top:calc((var(--f5) - var(--f13)) / 2);
  border-radius:50%;
  background:var(--acid);
  border:none;
  cursor:grab;
}
.dk-slider:active::-webkit-slider-thumb{ cursor:grabbing; }
.dk-slider:focus-visible::-webkit-slider-thumb{ outline:var(--f1) solid var(--bone); outline-offset:var(--f2); }

/* Disabled means "nothing selected to move" — dim it rather than hide it, so
   the control does not appear and vanish as the selection changes. */
.dk-slider:disabled{ cursor:default; opacity:.4; }
.dk-slider:disabled::-webkit-slider-thumb{ background:var(--dimmer); cursor:default; }

/* The frame read-out rides on the right of its own sub-label. */
.dk-read{
  float:right;
  font-family:var(--f-num);
  color:var(--dim);
}

/* ── KEYFRAME LIST ──────────────────────────────────────────────────────
   One row per keyframed property, its keys as frame-numbered chips. Ticking
   a chip selects that key in After Effects, so the Curve above acts on the
   choice made here rather than on whatever is highlighted in the timeline. */
.dk-keys{
  max-height:var(--f233);
  overflow-y:auto;
  border:var(--f1) solid var(--edge);
  border-radius:var(--f3);
  background:var(--raised);
  padding:var(--f5);
}

.dk-krow{
  padding:var(--f5) 0 var(--f8);
  border-bottom:var(--f1) solid var(--edge-soft);
}
.dk-krow:last-child{ border-bottom:none; padding-bottom:var(--f3); }

.dk-khead{ display:flex; align-items:baseline; gap:var(--f5); margin-bottom:var(--f5); }

.dk-kname{
  font-family:var(--f-body); font-size:var(--f13);
  color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dk-kall{
  margin-left:auto; flex:none;
  background:transparent; border:var(--f1) solid var(--edge);
  border-radius:var(--f2); color:var(--dimmer);
  font-family:var(--f-num); font-size:var(--f13);
  padding:0 var(--f5); cursor:pointer;
}
.dk-kall:hover{ color:var(--acid); border-color:var(--dimmer); }

/* The keys themselves. Frame number on each, because "which key" is always
   answered with a frame and never with an index. */
.dk-kstrip{ display:flex; flex-wrap:wrap; gap:var(--f3); margin-bottom:var(--f5); }

/* A key is its glyph with the frame number beneath. Same shapes After
   Effects draws in the timeline, so the two read as the same thing. */
.dk-key{
  display:flex; flex-direction:column; align-items:center; gap:var(--f1);
  min-width:var(--f34);
  padding:var(--f3) var(--f5) var(--f2);
  border:var(--f1) solid var(--edge);
  border-radius:var(--f2);
  background:var(--raised-hi);
  color:var(--dim);
  cursor:pointer;
  transition:border-color .1s var(--ease), color .1s var(--ease),
             background .1s var(--ease);
}
.dk-key:hover{ border-color:var(--dimmer); color:var(--ink); }
.dk-key.is-on{ border-color:var(--acid); color:var(--acid); background:var(--raised); }

/* fill:currentColor is what lets the glyph follow the selected state —
   the same trick the section marks use. */
.dk-kf{
  width:var(--f13); height:var(--f13);
  display:block;
  fill:currentColor; stroke:none;
}
.dk-kfn{
  font-family:var(--f-num); font-size:var(--f8);
  letter-spacing:.02em;
  line-height:1;
}

.dk-kdel{ width:100%; }