/* ============================================================================
 * S21 Section Drawer — pull-tab + parchment drawer
 *
 * LAYER-02 (PRD: /home/milodennison/Dev/S21_Drawer_PRD.md §7).
 * Pure CSS surface. JS wiring lands in LAYER-03 (section-drawer.js).
 *
 * Token consumption:
 *   --paper-2  drawer + tab background      (LAYER-00, decorative parchment)
 *   --ink      text content color           (registry — text-bearing)
 *   --gilt     decorative accent (§, numerals, leader dots, hover/focus
 *              outline) — WCAG 1.4.11 3:1 only, never used on text content
 *              per plan-doc Correction 4
 *   --rule     thin separators inside the drawer
 *
 * Geometry tokens declared inline in :root because they are scalar layout
 * constants, not theme colors — registry holds color tokens only.
 *
 * No selectors that overlap with the legacy fisheye dock (`.section-dock-*`,
 * `.dock-blur-*`) — those surfaces die in LAYER-07.
 * ============================================================================ */

:root {
  --scrim: rgba(21, 19, 15, 0.18);
  --drawer-w: 300px;
  --tab-w: 30px;
  --tab-h: 120px;
}

/* ---------------------------------------------------------------------------
 * Pull tab — vertical handle on the right edge, always visible at ≥769px.
 * --------------------------------------------------------------------------- */

.section-drawer-tab {
  position: fixed;
  bottom: 44px;
  right: 0;
  width: var(--tab-w);
  height: var(--tab-h);
  padding: 0;
  margin: 0;
  /* Stacks above the drawer (z=111) and scrim (z=110) so the tab is the
   * topmost surface at its coordinates when visible. Must exceed
   * .sticky-header (z=100) so the closed tab remains pickable over the
   * masthead's pinned band; must stay below .site-nav (z=120) so nav
   * controls remain interactive. While the drawer is open the tab is
   * `display: none` (visual-fix #3 — mutual exclusion), so the z-index
   * is only load-bearing during the close-transition window and as
   * defence in depth against an authored override of display:none.
   */
  z-index: 112;

  /* Spec-mandated bottom-to-top reading direction (book-spine
   * convention) — the SECTIONS label runs upward along the right edge,
   * "S" near the bottom of the tab, the final "S" just below the § at
   * the top. `sideways-lr` is the single-property mechanism: rotates
   * text 90° counter-clockwise so the inline axis flows bottom→top.
   * Pure CSS — NO `transform: rotate(...)`.
   *
   * Under `sideways-lr` the inline axis runs bottom→top, which inverts
   * the flex `row` mapping from the previous `vertical-rl` build:
   *   row         — first DOM child at the BOTTOM of the tab
   *   row-reverse — first DOM child at the TOP of the tab
   * DOM order is [§ mark, SECTIONS label]; we need § at the top, so
   * `row-reverse` is the matching flex direction. (`text-orientation`
   * is irrelevant under `sideways-lr` — characters are uniformly
   * rotated — so the property is omitted rather than left dangling.) */
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;

  writing-mode: sideways-lr;

  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-right: none;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;

  cursor: pointer;

  /* Visual-fix #4: spec mandates `background .25s, color .25s` — no
   * transform transition, no movement on hover. */
  transition: background 250ms ease, color 250ms ease;
}

.section-drawer-tab__mark {
  /* The § glyph — decorative accent. S21 spec: serif display face
   * (Libre Bodoni 500 in design source → project's --font-headline
   * serif stack), 18px, muted at rest and gilt-toned on tab-hover. */
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--text-muted);
  /* No additional letter-spacing; the glyph stands alone. */
  letter-spacing: 0;
}

.section-drawer-tab__label {
  /* "SECTIONS" label — text content. Correction 4: keys on --ink for
   * the 4.5:1 text-contrast threshold (the glyph shifts on hover; the
   * label intentionally does not, so this stays high-contrast in every
   * theme). S21 spec: Inter 600 / 9px / 0.24em letter-spacing /
   * uppercase → project's --font-ui sans stack. */
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.5625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
}

.section-drawer-tab:hover {
  /* Hover affordance: gilt-tinted background. The label stays on --ink
   * for contrast safety (Correction 4); the glyph shifts to --gilt via
   * the nested rule below — together they communicate hover without
   * compromising text contrast. */
  background: color-mix(in srgb, var(--gilt) 18%, var(--paper-2));
  color: var(--ink);
}

.section-drawer-tab:hover .section-drawer-tab__mark {
  /* Glyph hover: idle muted → gilt on hover, the gold-on-paper
   * affordance the S21 spec describes. Explicit `background:
   * transparent` satisfies the gist/state-pseudo-pairing stylelint
   * rule — we're shifting the glyph's color only, not its background
   * (which inherits the tinted .section-drawer-tab:hover surface). */
  background: transparent;
  color: var(--gilt);
}

.section-drawer-tab:focus-visible {
  outline: 2px solid var(--gilt);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Scrim — only rendered in click mode (body.drawer-mode-click).
 * --------------------------------------------------------------------------- */

.section-drawer__scrim {
  position: fixed;
  /* Cover the page area BELOW the nav — the nav must remain interactive
   * (B4). `inset: 0` previously swallowed nav clicks. */
  top: var(--site-nav-height, 2.125rem);
  left: 0;
  right: 0;
  bottom: 0;
  /* Must exceed .sticky-header (z-index: 100, the masthead container) so
   * the scrim PAINTS OVER the masthead band, not behind it. Stays below
   * .site-nav (z-index: 120) so the nav remains interactive while the
   * drawer is open. Geometry alone was correct here pre-fix; the prior
   * z-index of 8 buried the scrim under the opaque masthead, which is
   * what an elementFromPoint test would catch but a getBoundingClientRect
   * test cannot. */
  z-index: 110;
  background: var(--scrim);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

body.drawer-mode-click .section-drawer__scrim,
.section-drawer__scrim.open {
  opacity: 1;
  pointer-events: auto;
}

/* ---------------------------------------------------------------------------
 * Drawer — parchment panel, slides in from the right edge.
 * --------------------------------------------------------------------------- */

/* The drawer carries a slide `transform` in its closed state, which
 * establishes a containing block — `position: fixed` descendants would
 * end up positioned relative to the drawer, not the viewport. Keep
 * children flow-positioned. */
.section-drawer {
  position: fixed;
  top: var(--site-nav-height, 2.125rem);
  bottom: 0;
  right: 0;
  width: var(--drawer-w);
  /* PRD-E LAYER-01: the section cap was removed, so an edition may
   * have an arbitrary number of sections. Clip the panel to the
   * viewport (minus the masthead) and let it scroll instead of
   * overflowing past the bottom edge. */
  max-height: calc(100vh - var(--site-nav-height, 2.125rem));
  overflow-y: auto;
  /* Stacks above .section-drawer__scrim (z=110) and above the masthead
   * container .sticky-header (z=100) so the parchment panel paints over
   * the masthead band rather than being buried by it. Stays below
   * .site-nav (z=120) so the nav remains the topmost surface. */
  z-index: 111;

  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem;

  background: var(--paper-2);
  border-left: 1px solid var(--rule);

  transform: translateX(100%);
  opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
  pointer-events: none;
}

.section-drawer.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* Visual-fix #3 — the tab and the open drawer are mutually exclusive.
 * Pure-CSS sibling rule: in `templates/components/section_drawer.html`
 * the drawer aside is the first sibling and `.section-drawer-tab` is
 * the second, so the general-sibling combinator `~` matches forward.
 * No JS state mirror needed; both hover-open and click-open paths set
 * `.open` on the drawer, so this rule covers them uniformly. The tab
 * returns the instant `.open` is removed on close.
 *
 * `display: none` (no transition) per spec: the tab should disappear
 * immediately, not fade or slide. */
.section-drawer.open ~ .section-drawer-tab {
  display: none;
}

/* Heading — text content; keys on --ink. */
.section-drawer__title {
  margin: 0 0 1rem 0;
  font-family: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
}

.section-drawer__mark {
  /* The leading § glyph — decorative accent. */
  color: var(--gilt);
  margin-right: 0.35em;
}

/* List rows. */
.section-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.section-drawer__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.4rem 0;

  text-decoration: none;
  color: var(--ink);
  font-size: 1rem;

  border-bottom: 1px solid transparent;
  transition: border-color 140ms ease, background 140ms ease;
}

.section-drawer__row:hover {
  background: color-mix(in srgb, var(--gilt) 8%, transparent);
  color: var(--ink);
}

.section-drawer__row:focus-visible {
  outline: 2px solid var(--gilt);
  outline-offset: 2px;
}

/* Roman numeral — decorative accent. */
.section-drawer__numeral {
  color: var(--gilt);
  font-variant-numeric: oldstyle-nums;
  font-size: 0.875rem;
  min-width: 2ch;
}

/* Dotted leader between numeral and name — decorative. */
.section-drawer__leader {
  align-self: end;
  height: 1px;
  border-bottom: 1px dotted var(--gilt);
  margin: 0 0.25rem 0.3em 0.25rem;
}

/* Section name — text content. Correction 4: keys on --ink. */
.section-drawer__name {
  color: var(--ink);
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
 * Reduced motion — drop the slide; keep the opacity fade so the
 * presence/absence of the drawer is still perceptible.
 * --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* Both the resting (closed) and open states use transform: none so the
   * drawer fades in/out without sliding. The `.section-drawer.open` rule
   * above has higher specificity than `.section-drawer`; restate the
   * cascade here for the open state so reduced-motion wins. */
  .section-drawer,
  .section-drawer.open {
    transform: none;
    transition: opacity 180ms ease;
  }

  .section-drawer-tab {
    transition: background 140ms ease, color 140ms ease;
  }

  .section-drawer__scrim {
    transition: opacity 180ms ease;
  }
}

/* ---------------------------------------------------------------------------
 * Mobile breakpoint — at ≤768px the Speed Dial FAB takes over; hide the
 * pull-tab so it doesn't double up with the FAB.
 * --------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .section-drawer-tab {
    display: none;
  }
}