/* ============================================================
   URBINO · DRAWER
   Molecule. Side-anchored panel (manager only).

   Most-used for detail-view sidebars and triage panels. Reuses
   the .u-overlay primitive — apply .u-overlay--right or
   .u-overlay--left to anchor the panel.

   For citizen "from-the-bottom" surfaces, use Dialog --sheet
   instead. There is no citizen variant of Drawer.

   Composition:
     .u-overlay .u-overlay--right
       └─ .u-drawer
            ├─ .u-drawer__header
            │    ├─ .u-drawer__title
            │    └─ .u-drawer__close
            ├─ .u-drawer__body            — scrollable
            └─ .u-drawer__footer          — optional action row

   Sizes: --sm (320) / --md (420, default) / --lg (560).
   ============================================================ */


/* ============================================================
   THE PANEL
   ============================================================ */

.u-drawer {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--u-drawer-bg);
  color: var(--u-drawer-fg);
  box-shadow: var(--u-drawer-shadow);
  width: var(--u-drawer-width-md);
  max-width: 100%;
  height: 100vh;
  max-height: 100vh;
  font-family: var(--u-font-sans);
  outline: none;
  overflow: hidden;
  box-sizing: border-box;
  transition:
    opacity var(--u-dur-base) var(--u-ease-out),
    transform var(--u-dur-base) var(--u-ease-out);
}


/* ============================================================
   SIZES
   ============================================================ */

.u-drawer--sm { width: var(--u-drawer-width-sm); }
.u-drawer--md { width: var(--u-drawer-width-md); }
.u-drawer--lg { width: var(--u-drawer-width-lg); }


/* ============================================================
   HEADER
   ============================================================ */

.u-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u-space-3);
  padding: var(--u-drawer-header-py) var(--u-drawer-header-px);
  border-bottom: 1px solid var(--u-divider);
  flex-shrink: 0;
}
.u-drawer__title {
  font-family: var(--u-font-display);
  font-size: var(--u-drawer-title-font-size);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--u-fg-1);
  margin: 0;
  flex: 1;
  min-width: 0;
}
.u-drawer__subtitle {
  font-size: 13px;
  color: var(--u-fg-3);
  margin: var(--u-space-1) 0 0;
  line-height: 1.5;
}
.u-drawer__close {
  flex-shrink: 0;
  width: var(--u-drawer-close-size);
  height: var(--u-drawer-close-size);
  border-radius: var(--u-radius-sm);
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--u-fg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: calc(var(--u-space-1) * -1);
  transition: background var(--u-dur-fast) var(--u-ease-out), color var(--u-dur-fast) var(--u-ease-out);
}
.u-drawer__close:hover { background: var(--u-surface-sunk); color: var(--u-fg-1); }
.u-drawer__close:focus-visible {
  outline: none;
  box-shadow: var(--u-focus-ring);
}
.u-drawer__close img,
.u-drawer__close svg { width: 18px; height: 18px; display: block; }


/* ============================================================
   BODY — scrollable region
   ============================================================ */

.u-drawer__body {
  padding: var(--u-drawer-body-py) var(--u-drawer-body-px);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--u-fg-1);
}
.u-drawer__body > * + * { margin-top: var(--u-space-3); }


/* ============================================================
   FOOTER — action row (optional)
   ============================================================ */

.u-drawer__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--u-drawer-footer-gap);
  padding: var(--u-drawer-footer-py) var(--u-drawer-footer-px);
  border-top: 1px solid var(--u-divider);
  background: var(--u-surface-alt);
  flex-shrink: 0;
}
.u-drawer__destructive { margin-right: auto; }


/* ============================================================
   ENTRY / EXIT ANIMATION HOOKS
   The slide direction comes from the overlay's anchor.
   ============================================================ */

.u-overlay--right .u-drawer--enter { opacity: 0; transform: translateX(16px); }
.u-overlay--left  .u-drawer--enter { opacity: 0; transform: translateX(-16px); }
.u-drawer--leave  { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .u-drawer { transition: opacity var(--u-dur-fast); }
  .u-drawer--enter, .u-drawer--leave { transform: none; }
}