/* Wide screens show the roster as a drawer beside the board. These rules
   apply only while js/dock.js adds the dock classes; narrow screens keep
   the modal roster styling from style.css. */

/* Built by js/dock.js and parked in the playfield on both Stats pages;
   shown only at the width the dock runs at (the media query below). */
.dock-tab {
  display: none;
}

.dock-resize-edge {
  display: none;
}

body.dock-capable {
  --dock-tab-h: 2.4rem;
  --dock-gap: var(--sp-2);
  /* Long enough to read as a side dock rather than a popup window:
     from just under the button down to near the viewport's bottom
     edge, capped so it doesn't sprawl on a tall monitor. */
  --dock-height: max(20rem, calc(100vh - 20rem));
  /* As wide as the right margin allows, up to a comfortable reading
     width. The board's right edge is at 50vw + 31.5rem, so the room
     left for the drawer is 50vw - 31.5rem - gap - page padding. */
  --dock-w: clamp(12rem, calc(50vw - 33rem), 20rem);
  /* The panel surface: the site's own raised tint (hue 80), one step
     brighter than `--bg-raised` so the dock reads as its own lit thing
     without drifting off the palette. */
  --dock-surface: oklch(99% 0.012 80);
}

:root[data-theme="dark"] body.dock {
  --dock-surface: oklch(32% 0.02 55);
}

@media (min-width: 100rem) {
  /* The drawer overhangs the right margin; on a viewport just wide
     enough to trip the query but not to hold the whole drawer, this is
     what keeps that overhang from raising a horizontal scrollbar. */
  html:has(body.dock),
  body.dock {
    overflow-x: clip;
  }

  /* Anchor for the tab and drawer. `.playfield` wraps the board alone,
     so its box is the board's box -- `left: 100%` is the board's right
     edge. */
  body.dock-capable .playfield {
    position: relative;
  }

  /* The tab: a small horizontal button at the board's top-right corner,
     level with the RELEASE column header. It is the only way in and out
     here; the guess-box trigger is hidden below. */
  body.dock-capable .lexicon-trigger {
    display: none;
  }

  body.dock-capable .dock-tab {
    position: absolute;
    top: 0;
    left: calc(100% + var(--dock-gap));
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--dock-tab-h);
    padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
    color: var(--ink);
    font: 600 var(--step--1) / 1 var(--font-ui);
    white-space: nowrap;
    cursor: pointer;
  }

  body.dock-open .dock-tab {
    border-color: var(--ink);
    background: var(--bg-raised);
  }

  .dock-tab:hover {
    border-color: var(--muted);
  }

  .dock-tab > img {
    width: 1.4rem;
    height: 1.4rem;
    object-fit: contain;
  }

  /* Collapsed the roster has no [open]; keep the empty element out of
     the flow so nothing paints beside the board. */
  body.dock:not(.dock-open) details.lexicon {
    display: none;
  }

  /* The drawer, hung under the tab, off the board's right edge. No
     scrim: the board stays lit and clickable and nothing on the page
     goes inert. Absolutely placed, so it neither moves the board nor
     takes part in the page's height. */
  body.dock-open details.lexicon[open] {
    position: absolute;
    /* Flush under the button, so button + drawer read as one piece
       hanging off the board rather than two floating panes. */
    top: calc(var(--dock-tab-h) + 1px);
    left: calc(100% + var(--dock-gap));
    right: auto;
    bottom: auto;
    width: var(--dock-w);
    min-width: 15rem;
    max-width: calc(50vw - 32.5rem);
    height: var(--dock-height);
    overflow: hidden;
    z-index: 5;
    animation: dock-drawer-in 180ms var(--ease-out) both;
    container-type: inline-size;
  }

  @media (prefers-reduced-motion: reduce) {
    body.dock-open details.lexicon[open] {
      animation: none;
    }
  }

  body.dock-open details.lexicon[open]::before {
    display: none;
  }

  body.dock-open .dock-resize-edge {
    position: absolute;
    z-index: 7;
    display: block;
    touch-action: none;
  }

  .dock-resize-right {
    top: 0;
    right: 0;
    bottom: 0;
    width: 0.5rem;
    cursor: ew-resize;
  }

  .dock-resize-bottom {
    right: 0;
    bottom: 0;
    left: 0;
    height: 0.5rem;
    cursor: ns-resize;
  }

  body.dock-resizing {
    user-select: none;
  }

  body.dock-open .sheet-panel.lexicon-panel {
    position: absolute;
    inset: 0;
    flex-direction: column;
    width: auto;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    /* Square where it meets the board, rounded on the outer edge -- a
       panel that extends from the board, not a card dropped near it.
       A defined edge (`--muted`), not the sheet's heavier `--ink`
       outline, so it frames without reading as a modal window. */
    border: 1px solid var(--muted);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--dock-surface);
    overflow: hidden;
  }

  /* Inside a narrow drawer the roster is the single-column drill-in the
     phone sheet already is: the rail fills the panel, a row opens the
     grid, the back chevron returns. Same [data-view] js/lexicon.js
     writes for the phone -- nothing new to keep in step. */
  body.dock-open .lexicon-rail {
    flex: 1;
    width: auto;
    min-height: 0;
    border-right: 0;
    background: var(--dock-surface);
  }

  body.dock-open .lexicon-rail .lexicon-close {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    min-height: 0;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--muted);
    font-size: var(--step-1);
    line-height: 1;
    cursor: pointer;
  }

  body.dock-open .lexicon-group {
    min-height: 3rem;
    padding: var(--sp-2);
    margin-bottom: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--line-inset);
    color: var(--ink);
    font-size: var(--step--1);
  }

  body.dock-open .lexicon-group[aria-selected="true"] {
    background: transparent;
    font-weight: 500;
  }

  body.dock-open .lexicon-group:active {
    background: var(--bg-sunken);
  }

  body.dock-open .lexicon-group::after {
    content: "";
    flex: none;
    width: 0.4rem;
    height: 0.4rem;
    margin-left: var(--sp-1);
    border-top: 1.5px solid var(--muted);
    border-right: 1.5px solid var(--muted);
    transform: rotate(45deg);
  }

  body.dock-open .lexicon-panel[data-view="index"] .lexicon-main {
    display: none;
  }

  body.dock-open .lexicon-panel[data-view="page"] .lexicon-rail {
    display: none;
  }

  body.dock-open .lexicon-panel[data-view="page"] .lexicon-back {
    display: grid;
  }

  body.dock-open .lexicon-members-scroll {
    padding: var(--sp-3);
  }

  body.dock-open .lexicon-members {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4) var(--sp-2);
  }

  @container (min-width: 23rem) {
    body.dock-open .lexicon-members {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @container (min-width: 28rem) {
    body.dock-open .lexicon-members {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  body.dock-open .lexicon-selection {
    padding: var(--sp-3);
    background: var(--dock-surface);
  }

  body.dock-open .lexicon-member-name {
    font-size: 0.75rem;
  }

  /* The drawer runs as narrow as ~12rem on a 1440-wide screen, so the
     grid's header sheds what it can: the "N characters" count goes and
     the row tightens. */
  body.dock-open .lexicon-main-head {
    gap: var(--sp-2);
    padding: var(--sp-3);
  }

  body.dock-open .lexicon-main-count {
    display: none;
  }

  body.dock-open .lexicon-rail-head {
    padding: var(--sp-3) var(--sp-3) 0;
  }

  body.dock-open .lexicon-rail-head .sheet-title {
    font-size: var(--step-0);
  }

  body.dock-open .lexicon-axis {
    padding: var(--sp-3);
  }

  body.dock-open .lexicon-axis-menu {
    left: var(--sp-3);
    right: var(--sp-3);
  }
}

@keyframes dock-drawer-in {
  from {
    opacity: 0;
    transform: translateX(0.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}