/* ---------------------------------------------------------------------------
 * CONSUMER COPY — canonical source: asym-intel-commons:fe-commons/drawer.css
 * Do NOT edit here. Edit the commons canonical and re-sync. This copy exists
 * because artificial-intelligence-gi has no sparse-checkout of fe-commons yet
 * (future Fleet work: migrate to a shared-asset checkout). Synced @ faeded2b.
 * --------------------------------------------------------------------------- */
/*
 * fe-commons/drawer.css
 * Canonical fleet-wide right-drawer renderer — presentation layer.
 * Authority: operator 2026-06-05 ("use the renderer tool used by advennt to allow a
 *            right-hand panel to pop out when you click a clickable field");
 *            fleet-extraction of the advennt inlined drawer primitive
 *            (asym-intel/advennt:pipeline/tools/jurisdiction-template-v3.html, lines ~199-213, ~4360-4390).
 * Companion: fe-commons/drawer.js (behaviour layer).
 * Consumed by: advennt (target migration from inlined copy), artificial-intelligence-gi (AIM).
 * Generalises to >=2 Class B / consumer-surface repos per fe-commons §"Adding a primitive".
 *
 * THEMING CONTRACT — this file is palette-agnostic. Each consumer maps its own tokens
 * via the CSS custom properties below; every hook has a neutral fallback so the drawer
 * renders without any token map (degraded but functional). Do NOT fork this file to
 * change colours — set the variables in the consuming page's own stylesheet :root.
 *
 *   --drawer-surface      panel background        (advennt: var(--surface);   AIM: var(--surface))
 *   --drawer-surface-2    close-button / chip bg  (advennt: var(--surface-2); AIM: var(--card)/var(--line))
 *   --drawer-line         hairline borders        (advennt: var(--line);      AIM: var(--line))
 *   --drawer-text         body text               (advennt: var(--ink);       AIM: var(--text))
 *   --drawer-text-2       secondary text          (advennt: var(--ink-2);     AIM: var(--text-muted))
 *   --drawer-text-3       muted labels / crumbs   (advennt: var(--ink-3);     AIM: var(--text-muted))
 *   --drawer-accent       source-link accent      (advennt: var(--accent);    AIM: var(--acc))
 *   --drawer-accent-bg    source-link chip bg      (advennt: var(--accent-bg); AIM: rgba acc tint)
 *   --drawer-scrim        scrim overlay colour    (default rgba(16,24,40,.35))
 *   --drawer-width        panel width             (default min(540px,94vw))
 *   --drawer-z           base z-index             (default 50; drawer = base+10)
 *
 * Last seeded: 2026-06-05
 */

/* ---- overlay scrim ---- */
.scrim{
  position:fixed; inset:0;
  background:var(--drawer-scrim, rgba(16,24,40,.35));
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
  z-index:var(--drawer-z, 50);
}
.scrim.on{ opacity:1; pointer-events:auto; }

/* ---- the drawer panel ---- */
.drawer{
  position:fixed; top:0; right:0; height:100%;
  width:var(--drawer-width, min(540px,94vw));
  background:var(--drawer-surface, #fff);
  color:var(--drawer-text, #1a1814);
  box-shadow:-8px 0 30px rgba(16,24,40,.18);
  transform:translateX(100%);
  transition:transform .24s ease;
  z-index:calc(var(--drawer-z, 50) + 10);
  display:flex; flex-direction:column;
}
.drawer.on{ transform:translateX(0); }

/* ---- header ---- */
.dhead{
  padding:18px 22px;
  border-bottom:1px solid var(--drawer-line, #d4cfc4);
  display:flex; align-items:flex-start; gap:12px;
}
.dhead h3{
  margin:0; font-size:18px; letter-spacing:-.2px;
  color:var(--drawer-text, #1a1814);
}
.dhead .x{
  margin-left:auto; border:0;
  background:var(--drawer-surface-2, #f0ede4);
  width:30px; height:30px; border-radius:8px;
  cursor:pointer; font-size:17px; line-height:1;
  color:var(--drawer-text-2, #6b6559);
}
.dhead .x:hover{ filter:brightness(.95); }
.crumbs{ font-size:13px; color:var(--drawer-text-3, #6b6559); margin-top:2px; }

/* ---- body ---- */
.dbody{ flex:1; overflow:auto; padding:18px 22px; }
.dbody h4{ margin:0 0 8px; font-size:15px; letter-spacing:-.1px; }
.dbody h5{
  margin:18px 0 7px; font-size:11px; text-transform:uppercase;
  letter-spacing:.5px; color:var(--drawer-text-3, #6b6559);
}
.dbody p{ margin:0 0 10px; font-size:14px; line-height:1.55; }

/* ---- key/value grid ---- */
.kv{ display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:13px; }
.kv dt{ color:var(--drawer-text-3, #6b6559); font-weight:600; text-transform:capitalize; }
.kv dd{ margin:0; }

/* ---- source chips / links ---- */
.srcrow{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.srcl{
  display:inline-block; font-size:11px; font-weight:700;
  background:var(--drawer-accent-bg, rgba(29,59,94,.1));
  border:1px solid transparent;
  color:var(--drawer-accent, #1d3b5e);
  padding:2px 8px; border-radius:5px;
  text-decoration:none; white-space:nowrap; line-height:1.5;
}
.srcl:hover{ background:var(--drawer-accent, #1d3b5e); color:#fff; }
.tag{
  display:inline-block; font-size:10.5px; font-weight:700;
  background:var(--drawer-surface-2, #f0ede4);
  border:1px solid var(--drawer-line, #d4cfc4);
  color:var(--drawer-text-2, #6b6559);
  padding:2px 7px; border-radius:5px; white-space:nowrap;
}

/* ---- footnote ---- */
.footnote{
  margin-top:40px; padding-top:18px;
  border-top:1px solid var(--drawer-line, #d4cfc4);
  font-size:12px; color:var(--drawer-text-3, #6b6559);
}

/* ---- clickable-field affordance (host pages add [data-*] + role=button) ---- */
[data-drawer]{ cursor:pointer; }
[data-drawer]:focus-visible{ outline:2px solid var(--drawer-accent, #1d3b5e); outline-offset:2px; }

.hidden{ display:none !important; }