/* drawer.css: Drawer (component 24). Owner: group D (P2.T7). Tokens only (L-01), logical properties only (L-04), box-shadow only
   var(--shadow-overlay) on overlays (L-03). 480 from the inline-end, full height, slides over --duration-base and leaves over
   --duration-fast; right to left opens from the left (a paired [dir="rtl"] rule for the translate). */

[data-component="drawer"] {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(var(--size-drawer), 100%);
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  color: var(--text);
  border-inline-start: var(--border-width) solid var(--border-strong);
  border-start-start-radius: var(--radius-overlay);
  border-end-start-radius: var(--radius-overlay);
  box-shadow: var(--shadow-overlay);
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-standard);
}
[dir="rtl"] [data-component="drawer"] { transform: translateX(calc(-1 * 100%)); }
[data-component="drawer"][data-state="open"] { transform: none; }
[dir="rtl"] [data-component="drawer"][data-state="open"] { transform: none; }
[data-component="drawer"][data-state="closing"] { transition-duration: var(--duration-fast); }
/* A drawer drawn in the kitchen sink as a preview, not an overlay. */
[data-component="drawer"][data-static] { position: relative; inset: auto; inline-size: min(var(--size-drawer), 100%); block-size: var(--size-results-max-h); transform: none; box-shadow: none; border: var(--border-width) solid var(--border-strong); }
[dir="rtl"] [data-component="drawer"][data-static] { transform: none; }

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex: none;
  min-block-size: var(--size-header);
  padding-inline: var(--space-7);
  border-block-end: var(--border-width) solid var(--border);
}
.drawer__title { font: var(--type-sub); margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
.drawer__actions { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.drawer__body {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  padding: var(--space-7);
  display: grid;
  gap: var(--space-7);
  align-content: start;
  grid-auto-rows: max-content; /* a block with overflow hidden (a Data table) is never squeezed to fit the drawer's height: the body scrolls instead (CL-P4-11) */
  font: var(--type-body);
}
.drawer__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
  min-block-size: var(--size-footer);
  padding-inline: var(--space-7);
  border-block-start: var(--border-width) solid var(--border);
  background: var(--surface-raised);
}
/* A drawer's body is edge to edge for a list (the notifications drawer): the entries carry their own padding. */
[data-component="drawer"][data-variant="notifications"] .drawer__body { padding: 0; gap: 0; }

@media (width < 1024px) {
  [data-component="drawer"] { inline-size: 100%; }
}

/* Building blocks of the quick view layout and the notifications list (02 Drawer, Shell parts and panels). */
.drawer__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.drawer__summary h3 { margin: 0; font: var(--type-section); }
.drawer__facts { margin: 0; display: grid; gap: var(--space-4); }
.drawer__fact { display: grid; grid-template-columns: var(--size-skeleton-label-w) minmax(0, 1fr); gap: var(--space-4); padding-block-end: var(--space-4); border-block-end: var(--border-width) solid var(--border); }
.drawer__fact dt { font: var(--type-label); color: var(--text-secondary); }
.drawer__fact dd { margin: 0; font: var(--type-body); overflow-wrap: anywhere; }
.drawer__section { display: grid; gap: var(--space-3); }
.drawer__section h3 { margin: 0; font: var(--type-sub); }
.drawer__entries, .drawer__notes { list-style: none; margin: 0; padding: 0; display: grid; }
.drawer__entry { display: grid; gap: var(--space-1); padding-block: var(--space-3); border-block-end: var(--border-width) solid var(--border); max-inline-size: none; }
.drawer__entry-time { display: block; font: var(--type-caption); color: var(--text-secondary); }
.drawer__note { display: flex; align-items: flex-start; gap: var(--space-4); min-block-size: calc(var(--space-10) + var(--space-5)); padding: var(--space-5); border-block-end: var(--border-width) solid var(--border); max-inline-size: none; }
.drawer__dot { flex: none; inline-size: var(--size-dot); block-size: var(--size-dot); margin-block-start: var(--space-3); border-radius: var(--radius-round); background: transparent; }
.drawer__dot[data-unread="true"] { background: var(--brand); }
.drawer__note-text { display: grid; gap: var(--space-1); min-inline-size: 0; }
.drawer__note-text p { margin: 0; max-inline-size: none; }
.drawer__note-title { font: var(--type-body); font-weight: 500; }
.drawer__note-detail, .drawer__note-time { font: var(--type-caption); color: var(--text-secondary); }

.drawer__body:focus-visible { outline: var(--border-width-thick) solid var(--focus-ring); outline-offset: calc(-1 * var(--border-width-thick)); }