/* Drawer divergences — skeleton-owned, NOT a copy of an app stylesheet.
 *
 * css/drawer.css is a verbatim copy of the app's
 * apps/web/src/features/home/drawer/drawer.css and has to stay re-copyable, so
 * this branch's deliberate changes to it live here instead.
 *
 * Loaded after theme.css AND drawer.css in index.html — the shadow block below
 * needs the first, the gutter block needs the second.
 */

/* ---------------------------------------------------------------------------
   1. Softer panel shadow
   ---------------------------------------------------------------------------
   --shadow-drawer-panel was the only elevation token in the system cast as a
   SINGLE layer at high alpha (0.4 light / 0.65 dark). Every other soft
   elevation here is two layers at low alpha — see --shadow-float-bar
   (0.08 + 0.16) and --shadow-bulk-bar (0.30 + 0.08). One steep layer is what
   made the drawer's edge read as a hard band rather than a falloff.

   These follow --shadow-float-bar's structure — a tight contact layer plus a
   wide ambient one — rotated to cast leftward off the panel's edge, and keep
   the drawer's own wider geometry, since it is a full-height edge rather than
   a small floating pill.

   theme.css defines the token in unlayered `:root` / `.dark` blocks (they sit
   after its @layer blocks close), so matching those selectors from a later
   stylesheet wins on source order. drawer.css reads it through var() at use
   time, so only the DEFINITION order matters. */
:root {
  --shadow-drawer-panel:
    -2px 0 8px rgba(16, 17, 26, 0.06),
    -18px 0 48px -12px rgba(16, 17, 26, 0.16);
}

/* Dark keeps more presence than light — there is less contrast between the
   panel and the surface behind it — but still lands well under the 0.65 it
   replaces, and gains the contact layer. */
.dark {
  --shadow-drawer-panel:
    -2px 0 8px rgba(0, 0, 0, 0.22),
    -20px 0 52px -12px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------------------------
   2. Wider content gutter on desktop (16px -> 24px)
   ---------------------------------------------------------------------------
   drawer.css hardcodes 16px in five coordinated places: the header and footer
   pad by it, and the full-bleed section bands CANCEL it with a negative margin
   before re-adding it as their own padding. Changing one without the others
   breaks the alignment between a band's label and the content beneath it, so
   the number becomes a variable here and every consumer reads it.

   The step happens at `md` (48rem), matching MainLayout's `p-4 md:p-6` — the
   app already treats that breakpoint as the 16 -> 24 shell step, and below it
   the drawer is full-bleed against a phone screen where 24px is too generous.

   Not affected, and deliberately left alone: `.hdw-au-people`'s -11.5px
   pull-back, which aligns the row checkbox's centre with the group avatar's.
   Its derivation cancels the gutter out —
     checkbox centre = gutter - 11.5 + 14 + 15/2
     avatar centre   = gutter + 20/2
   are equal for ANY gutter — so it stays correct at 24px. */
.hdw {
  --hdw-gutter: 16px;
}
@media (width >= 48rem) {
  .hdw {
    --hdw-gutter: 24px;
  }
}

/* Scrolling content. The class is ours: DrawerBody carried the gutter as a
   Tailwind `px-4`, which cannot read a custom property, so the horizontal
   padding moved to CSS here and the utility came off. See drawers.jsx. */
.hdw-body {
  padding-inline: var(--hdw-gutter);
}

/* Header and footer pad by the gutter. `.hdw`-prefixed for specificity over
   drawer.css's own `.hdw-head` / `.hdw-foot`; `padding-inline` so each rule's
   vertical padding (13px / 11px) is untouched. */
.hdw .hdw-head,
.hdw .hdw-foot {
  padding-inline: var(--hdw-gutter);
}

/* Full-bleed section bands: cancel the body's gutter, then re-add it as their
   own padding so the label sits on the same left edge as the content below.
   Both halves have to move together or the band's text drifts off that edge. */
.hdw .hdw-ph,
.hdw .hdw-au-ghead {
  margin-inline: calc(var(--hdw-gutter) * -1);
  padding-inline: var(--hdw-gutter);
}