/* A <dialog> anchored to the right edge instead of Pico's centered
   dialog>article shell. Pico's bare `dialog` selector (0,0,1) sets
   position:fixed/inset:0/display:flex/backdrop-color — `.lc-drawer` (0,1,0)
   already beats it for every property re-asserted here, so there is no
   Pico specificity trap to work around (unlike Patterns 2/3, which fight
   Pico on <button>). Opened/closed via the same generic `dialog` Stimulus
   controller used by every centered modal (see modal.css) — it only calls
   showModal()/close(), so it's shell-agnostic. */

.lc-drawer {
  /* Stays the full-viewport transparent frame (Pico's own inset:0/flex),
     so the dimmed backdrop still covers the whole page — only the visible
     .lc-drawer__panel child below is sized to the drawer's actual width.
     Width lived here in an earlier revision instead of on the panel, which
     silently decoupled the two: widening this did nothing visible, since
     the panel was sizing to its own content, not this frame. */
  justify-content: flex-end;
  background: transparent;
  /* Pico's `dialog` rule sets these for its own centered overlay; .lc-drawer
     (0,1,0) beats bare `dialog` (0,0,1) for any property declared here, but
     backdrop-filter was never re-declared, so Pico's blur kept applying
     across the whole (mostly transparent) dialog box — visible as a blur
     over the page to the drawer's left, not just a dim tint. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* The dialog element is itself the full-viewport flex frame Pico positions;
   its content box is what actually needs the panel's visual treatment, so
   that lives on a dedicated child rather than fighting the frame's own
   background/transform for the same box. Width lives here (not on
   .lc-drawer) because this is the element that's actually visible. */
.lc-drawer__panel {
  position: relative;
  width: min(37.4rem, 100vw);
  height: 100%;
  max-height: none;
  margin: 0;
  flex-shrink: 0;
  /* Top padding clears the absolutely-positioned close button (top: sp-5,
     height: control-h-sm = 32px, so its own bottom edge sits at 56px) with
     real breathing room before the title starts, not just past it. */
  padding: var(--sp-9) var(--sp-5) var(--sp-5);
  overflow-y: auto;
  background: var(--color-paper);
  border-left: 1px solid var(--color-rule);
  box-shadow: -8px 0 24px rgb(0 0 0 / 0.08);
  transform: translateX(100%);
  transition: transform var(--dur-2) var(--ease-out);
}

.lc-drawer[open] .lc-drawer__panel {
  transform: translateX(0);
}

@starting-style {
  .lc-drawer[open] .lc-drawer__panel {
    transform: translateX(100%);
  }
}

.lc-drawer::backdrop {
  background: rgb(0 0 0 / 0);
  transition: background var(--dur-2) var(--ease-out), overlay var(--dur-2) var(--ease-out) allow-discrete,
    display var(--dur-2) var(--ease-out) allow-discrete;
}

.lc-drawer[open]::backdrop {
  background: rgb(0 0 0 / 0.32);
}

@starting-style {
  .lc-drawer[open]::backdrop {
    background: rgb(0 0 0 / 0);
  }
}

/* Descendant compound (0,2,0), not a bare .lc-drawer__close (0,1,0) — the
   button also carries .lc-bare-btn (button.lc-bare-btn, 0,1,1), whose reset
   sets border/background on purpose, and a bare class here would only tie
   (not beat) it; same reasoning as .dropdown__menu .dropdown__item in
   dropdown.css (v2 design-system pattern #3). */
.lc-drawer__panel .lc-drawer__close {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  border: 1px solid var(--color-rule);
  border-radius: var(--r-pill);
  background: var(--color-paper);
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

.lc-drawer__panel .lc-drawer__close:hover {
  background: var(--color-surface);
  border-color: var(--color-rule-strong);
}

.lc-drawer__close-icon {
  display: block;
  width: 1.1em;
  height: 1.1em;
}

/* The drawer's own picker-slot-list card no longer needs its own right-align
   or width cap — the drawer shell already is the narrow right-anchored panel. */
.lc-drawer .picker-slot-list {
  max-width: none;
  margin-inline-start: 0;
  border: none;
  padding: 0;
  background: transparent;
}