/* ==========================================================================
   App token bridge (Peter, 15 Sep 2026)
   --------------------------------------------------------------------------
   Signal reuses the customer app's real filter components, copied in verbatim
   from bullet-web-frontend/src/styles/components:
       filter-panel.css    the right-docked drawer
       filter-drawer.css   the .fgroup / .fseg fields inside it
       filter-summary.css  the .fsum active-filter card with removable chips
   Those files speak the app's token names. This maps them onto Signal's own
   tokens so the components render in Signal's palette without a single edit.
   When the app updates a component, copy the file over again. Do not fork it.
   ========================================================================== */
:root {
  --color-surface:          var(--surface);
  --color-bg-subtle:        var(--bg);
  --color-bg-translucent:   var(--chip-bg);
  --color-text:             var(--ink);
  --color-text-muted:       var(--muted);
  --color-border:           var(--hairline);
  --color-border-strong:    var(--hairline-strong);
  --color-border-pink:      var(--hairline-strong);
  --border-width: 1px;
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --space-3: 10px;
  --space-4: 14px;
  --space-6: 24px;
  --text-xs: 11.5px;
  --text-sm: 13px;
  --text-base: 14px;   /* the app runs 16px; Signal's density is its own (CLAUDE.md, 16 Sep) */
  --text-title: 22px;
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --shadow-panel:    0 10px 40px rgba(0,0,0,0.10);
  --shadow-drawer:   0 10px 40px rgba(0,0,0,0.12);
  --shadow-dropdown: 0 8px 28px rgba(0,0,0,0.12);
  --drawer-pad: 24px;
  --drawer-pad-bottom: 28px;
  --drawer-section-gap: 26px;
  /* for the copied tooltip, section title, page header, report and card grid (26 Sep 2026) */
  --space-1: 4px;
  --space-2: 8px;
  --text-section: 18px;   /* the app runs 20px; Signal's density */
  --text-heading: 20px;
  --leading-body: 1.45;
  --leading-footnote: 1.4;
  --color-bg-subtle-light: var(--chip-bg);
  --color-success: var(--good);
  --color-danger: var(--bad);
  /* for the copied pill and chip group (28 Sep 2026, the Tasks tab). The app's --color-bg is pink; Signal has no pink. */
  --color-bg: var(--chip-bg);
  --color-active: var(--warn);
}
/* The app's .btn is its own component; Signal's buttons are .btn-mini. The drawer's
   action row only needs these two, so map them rather than copy a whole button system. */
.filter-panel .btn {
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  border-radius: var(--r-md); padding: 10px 16px; cursor: pointer;
  border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--ink);
}
.filter-panel .btn:hover { border-color: var(--ink); }
.filter-panel .btn--primary { background: var(--ink); color: var(--ink-contrast); border-color: var(--ink); }
.filter-panel .btn--primary:hover { opacity: 0.9; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* The scrim behind a docked drawer, so the page reads as "behind" it. */
.drawer-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,0.18); animation: scrimIn .3s ease both; }
.drawer-scrim[hidden] { display: none; }
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }