/* =========================================================
   mbrd - the drawer (deleted items) and the delete animation
   Split from overlays.css. Drawer button, undo/redo, autosave mark,
   the drawer window, and the exit animations that end at the button.
   ========================================================= */

#drawer-dock {
  position: fixed;
  z-index: var(--z-chrome);
  left: max(16px, env(safe-area-inset-left));
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + var(--dock));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity var(--dur-base) var(--ease), visibility 0s;
}

/* Sidebar covers this corner -- hide the whole dock. Visibility delayed
   by the fade duration so it hides only once faded. */
#sidebar.is-open ~ #drawer-dock {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease), visibility 0s var(--dur-base);
}

#drawer-btn {
  display: grid;
  place-items: center;
  width: var(--chrome-button-w);
  height: var(--chrome-button-h);
  border: var(--hairline) solid var(--rule-2);
  border-radius: var(--leaf);
  background: var(--paper-card);
  box-shadow: var(--shadow-1);
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              opacity var(--dur-base) var(--ease);
}
/* Empty drawer recedes -- faint ink, lighter hairline. Not disabled
   (it still opens), just quiet. Must precede :hover for source order. */
#drawer-btn:not(.has-things) { color: var(--ink-3); }
/* Desaturate the icon so an empty drawer on a coloured palette does
   not carry that hue. */
#drawer-btn:not(.has-things) svg { filter: saturate(0); }
#drawer-btn:hover { background: var(--paper-2); color: var(--accent-deep); }
#drawer-btn:not(.has-things):hover { border-color: var(--rule-2); }
#drawer-btn svg {
  width: 17px; height: 17px;
  transition: transform var(--dur-base) var(--ease-back);
}
#drawer-btn:hover svg { transform: scale(var(--btn-grow)) translateY(var(--btn-lift)); }
/* Something is in there -- full strength. */
#drawer-btn.has-things { color: var(--accent-deep); border-color: var(--accent-text); }
/* Wearing the bin: the press deletes what is selected, and the colour says so
   before the tooltip has to. An attribute weighs what a class does, so these
   two win on source order alone -- they must stay below both rules above, and
   below the empty drawer's desaturate: a selection is a delete either way. */
#drawer-btn[data-face="i-delete"] {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--rule-2));
}
#drawer-btn[data-face="i-delete"] svg { filter: none; }

/* The whole row out of the way while the drawer is up. The sheet arrives over
   this corner, and a button that opens what is already open is a press that
   does nothing. Off aria-expanded, which openDrawer()/closeDrawer() already
   keep in step - the alternative is a second flag saying what the attribute
   says. The undo pill follows by sibling combinator, which is why the button
   is written before it in index.html: move #history-ctl above #drawer-btn in
   that row and this half stops applying, silently and only while the drawer
   is open. Visibility delayed by the fade, as #drawer-dock's rule above does
   it, so each goes only once it has faded. The keyboard is unaffected
   throughout - Delete, Ctrl+Z and Ctrl+Shift+Z all still reach. */
#drawer-btn[aria-expanded="true"],
#drawer-btn[aria-expanded="true"] ~ #history-ctl {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease), visibility 0s var(--dur-base);
}

/* Autosave mark. Quietest thing in the corner -- no card, no shadow.
   Leaves slowly, arrives quickly. */
#saved {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 6px;
  border-radius: var(--leaf);
  background: color-mix(in oklab, var(--paper-card) 82%, transparent);
  color: var(--ink-3);
  font-size: var(--t-tiny);
  letter-spacing: calc(0.02em * var(--ls-scale));
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  /* Duration struck from --dur-travel so the whimsy axis compresses it. */
  transition: opacity calc(var(--dur-travel) * 1.6) var(--ease),
              visibility 0s calc(var(--dur-travel) * 1.6);
}
#saved.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-fast) var(--ease), visibility 0s;
}
#saved svg { width: 12px; height: 12px; color: var(--accent-text); }

/* Drawer button and history pair on one line. */
.drawer-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

/* Segmented undo/redo pill, matching #zoom-ctl. */
#history-ctl {
  display: flex;
  align-items: stretch;
  width: calc(var(--chrome-button-w) + var(--chrome-button-w));
  height: var(--chrome-button-h);
  /* The ring inside, over the two buttons, as on #zoom-ctl (chrome.css), so
     each half is a whole square button. */
  outline: var(--hairline) solid var(--rule-2);
  outline-offset: calc(-1 * var(--hairline));
  border-radius: var(--leaf);
  overflow: hidden;
  background: var(--paper-card);
  box-shadow: var(--shadow-1);
  transition: opacity var(--dur-base) var(--ease);
}
#history-ctl button {
  display: grid;
  place-items: center;
  flex: 1 1 50%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
#history-ctl button + button { border-left: 1px solid var(--rule); }
/* The ring's allowance at the two ends, as on #zoom-ctl (chrome.css). */
#history-ctl > button:first-child { border-left: var(--hairline) solid transparent; }
#history-ctl > button:last-child { border-right: var(--hairline) solid transparent; }
#history-ctl button:hover:not(:disabled) { background: var(--paper-2); color: var(--accent-deep); }
#history-ctl button:active:not(:disabled) { background: var(--paper-3); }
#history-ctl button:disabled { color: var(--ink-3); cursor: default; }
#history-ctl svg {
  width: 16px; height: 16px;
  /* Scale the glyph, not the button -- scaling the button drags the seam. */
  transition: transform var(--dur-base) var(--ease-back);
}
#history-ctl button:hover:not(:disabled) svg { transform: scale(var(--btn-grow)) translateY(var(--btn-lift)); }
#history-ctl button:active:not(:disabled) svg { transform: scale(calc(var(--btn-press) - 0.08)); }

/* ----------------------------------------------------------
   The drawer window (ui/drawer.ts)
   A panel anchored bottom-left, flying in from that edge the way #sidebar
   does - which also hides it. It cannot be moved or resized. Cards dealt
   three to a shelf.
   ---------------------------------------------------------- */
#drawer-window {
  position: fixed;
  /* One rung under the panels so the sidebar wins on overlap. */
  z-index: calc(var(--z-overlay) - 1);
  left: max(16px, env(safe-area-inset-left));
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + var(--dock));
  width: min(400px, calc(100vw - 32px));
  max-height: min(68vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--paper-card);
  border: var(--hairline) solid var(--rule-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  /* #sidebar's entrance, off the same edge. The 22px clears the shadow. */
  transform: translateX(calc(-100% - 22px));
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease-back),
              opacity var(--dur-fast) var(--ease),
              visibility 0s linear var(--dur-base);
}
#drawer-window.is-open {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
/* Card being dragged out -- window steps back but stays open so it can
   catch a cancel drop. */
#drawer-window.is-lifting {
  opacity: 0.3;
  transition: opacity var(--dur-fast) var(--ease);
}

/* Hidden behind the sidebar, same as the dock. */
#sidebar.is-open ~ #drawer-window {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease), visibility 0s var(--dur-base);
}
.drawer-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px 12px 18px;
  border-bottom: var(--hairline) solid var(--rule-2);
  -webkit-user-select: none;
  user-select: none;
}
.drawer-title {
  font-family: var(--font-display);
  font-size: var(--t-title);
  color: var(--ink);
}
.drawer-spacer { flex: 1 1 auto; }

/* The switch to the Special shelf, and the destructive button beside it. */
.drawer-special,
.drawer-empty {
  flex: none;
  padding: 2px 7px;
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-xs);
  background: none;
  font-size: var(--t-tiny);
  cursor: pointer;
}
.drawer-special {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-deep);
}
.drawer-special:hover { border-color: var(--accent-text); }
/* Held in while that shelf is the one on show. */
.drawer-special.is-on {
  border-color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.drawer-special[hidden],
.drawer-empty[hidden] { display: none; }
/* Destructive -- wears danger colour at rest. Asks before acting. */
.drawer-empty { color: var(--danger); }
.drawer-empty:hover { border-color: var(--danger); }
.drawer-empty:disabled { color: var(--ink-3); cursor: default; border-color: transparent; }

.drawer-close {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--icon-button);
  height: var(--icon-button);
  padding: 0;
  border: 0;
  border-radius: var(--leaf);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
/* --paper-2, not --paper-3 -- tokens.css names -3 as the press state. */
@media (hover: hover) {
  .drawer-close:hover { background: var(--paper-2); color: var(--accent-deep); }
}
.drawer-close:active { background: var(--paper-3); }
.drawer-close:focus-visible { background: var(--paper-2); color: var(--accent-deep); }
.drawer-close svg { width: var(--icon-glyph); height: var(--icon-glyph); }

/* ---------------------------------------------------------------------------
   The Special shelf: the same window, dressed for what it holds.

   Nothing moves - the head, the shelves and the slots are the ones above, so
   the switch changes what is in the drawer and not where anything is. What it
   adds is a warmer ground and a gilt edge, the difference between a drawer you
   throw things into and a case you keep things in. See fillSpecial()
   (ui/drawer.ts). --------------------------------------------------------- */
#drawer-window.is-special {
  border-color: var(--accent-text);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 42%),
    var(--paper-card);
  box-shadow: var(--shadow-2), inset 0 0 0 var(--hairline) color-mix(in srgb, var(--accent) 30%, transparent);
}
#drawer-window.is-special .drawer-head { border-bottom-color: var(--accent-text); }
#drawer-window.is-special .drawer-title { color: var(--accent-deep); }
#drawer-window.is-special .drawer-shelf {
  border-bottom-color: color-mix(in srgb, var(--accent) 45%, var(--rule-2));
}

.drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 12px 14px;
}

/* One shelf: three slots on a ledge. The ledge is a border -- the edge
   is all you see of a shelf from the front. */
.drawer-shelf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  justify-items: center;
  gap: 8px;
  padding-bottom: 7px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--rule-2);
  box-shadow: 0 2px 3px -2px var(--rule);
}
.drawer-shelf:last-of-type { margin-bottom: 8px; }

.drawer-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  padding: 4px 0 0;
  border-radius: var(--radius-xs);
  cursor: grab;
  /* pan-y, not none -- slots fill most of a shelf, so `none` would make
     the drawer unscrollable by finger. */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.drawer-slot:hover { background: var(--paper-2); }
.drawer-slot:focus-visible { outline: 2px solid var(--select); outline-offset: -2px; }
.drawer-slot.is-lifting { opacity: 0.4; cursor: grabbing; }

/* Pile container, sized in px by standPile(). Overflow visible so the
   resting lean does not clip corners. */
.drawer-card, .drawer-ghost-card {
  position: relative;
  flex: none;
}

/* Board properties not inherited here (body child, not #world child).
   Without these, var(--board-hairline) resolves to nothing and cards
   silently lose their inset edge. */
.drawer-card, .drawer-ghost-card {
  --iz: 1;
  --board-hairline: var(--hairline);
}

/* World-scale patch shrunk by a single `scale`. Everything inside keeps
   its world size. Pinned by centre so the resting lean pivots correctly. */
.drawer-pile {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--pile-w);
  height: var(--pile-h);
  margin-left: calc(var(--pile-w) / -2);
  margin-top: calc(var(--pile-h) / -2);
  scale: var(--card-k);
}

/* Board cards reused as-is. --grow (the hover swell) is left at 1 so
   the shelf does not move while you aim. The lean stays. */
.drawer-pile > .item {
  box-shadow: var(--item-shadow);
}
/* Far-zoom headline has no meaning here. */
.drawer-card .far-head,
.drawer-ghost-card .far-head { display: none; }

/* Sub-tiny caption register -- see .ctx-item kbd in menu.css. */
.drawer-when {
  flex: none;
  font-size: 10px;
  color: var(--ink-3);
  font-family: var(--font-mono);
}

.drawer-none, .drawer-hint {
  margin: 10px 2px 4px;
  font-size: var(--t-tiny);
  font-style: var(--display-italic);
  color: var(--ink-3);
}

/* Ghost following the pointer out of the window. */
#drawer-ghost {
  position: fixed;
  z-index: var(--z-menu);
  translate: -50% -50%;
  pointer-events: none;
  opacity: 0.9;
  rotate: -4deg;
}
/* Heavier shadow than a shelf card -- this one is being carried. */
.drawer-ghost-card .drawer-pile > .item { box-shadow: var(--shadow-2); }

/* ----------------------------------------------------------
   Delete exit animations (canvas/exit-anim.ts)
   Clone lifted into a screen-space overlay. Four feels: fall, dissolve,
   shatter (by whimsy tier), and the title card's chip toss.
   ---------------------------------------------------------- */
#exit-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-sweep);
  pointer-events: none;
  overflow: hidden;
}
.exit-anim {
  will-change: transform, opacity, filter;
  transform-origin: center;
}
.exit-dissolve { animation: exit-dissolve var(--dur-base) var(--ease) forwards; }
.exit-fall    { animation: exit-fall     var(--dur-base) var(--ease-in) forwards; }
.exit-shatter { animation: exit-shatter  var(--dur-base) var(--ease) forwards; }

/* Title card chip: appears above the drawer button, tosses up, and
   drops in. Parabolic motion via linear timing and curved stops. */
.exit-chip {
  position: fixed;
  width: 46px;
  height: 30px;
  margin-left: -23px;
  margin-top: -15px;
  background: var(--paper-card);
  border: var(--hairline) solid var(--rule-2);
  border-radius: var(--leaf);
  box-shadow: var(--item-shadow);
  animation: exit-chip-fall calc(var(--dur-base) * 1.6) linear forwards;
}
/* Projectile: stops sample u(t) = 40 + 100.5t - 140.5t^2 under
   constant gravity. Apex at ~36%, shrinks and fades on landing. */
@keyframes exit-chip-fall {
  0%   { opacity: 0; transform: translateY(-40px) scale(1); }
  6%   { opacity: 1; transform: translateY(-45px) scale(1); }
  20%  {            transform: translateY(-54px) scale(1); }
  36%  {            transform: translateY(-58px) scale(1); }
  50%  {            transform: translateY(-55px) scale(1); }
  60%  {            transform: translateY(-50px) scale(1); }
  70%  {            transform: translateY(-41px) scale(0.96); }
  80%  {            transform: translateY(-30px) scale(0.88); }
  90%  { opacity: 1; transform: translateY(-16px) scale(0.74); }
  100% { opacity: 0; transform: translateY(0)     scale(0.5); }
}
@keyframes exit-dissolve {
  to { transform: scale(0.9); opacity: 0; }
}
@keyframes exit-fall {
  to { transform: translateY(90px) rotate(7deg); opacity: 0; }
}
@keyframes exit-shatter {
  0%   { transform: scale(1); filter: blur(0); }
  20%  { transform: scale(1.06); filter: blur(0); }
  100% { transform: scale(0); filter: blur(6px); opacity: 0; }
}

/* Fallback without color-mix() -- see tokens.css section 7. */
@supports not (color: color-mix(in srgb, red, blue)) {
  #saved { background: rgb(var(--paper-card-c) / 82%); }
}