/* =========================================================
   BRSLDN Drawer – Core Styles
   ========================================================= */

:root{
  --brsldn-bg: #ffffff;
  --brsldn-fg: #111111;
  --brsldn-accent: #0a84ff;
  --brsldn-border: rgba(0,0,0,.1);
}

/* ---------- FAB ---------- */

.brsldn-fab{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10001;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--brsldn-accent);
  color: #fff;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

/* ---------- Overlay ---------- */

.brsldn-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 9999;
}

/* ---------- Drawer ---------- */

.brsldn-drawer{
  position: fixed;
  inset: 0;
  background: var(--brsldn-bg);
  color: var(--brsldn-fg);
  z-index: 10000;
  display: none;
}

.brsldn-drawer[aria-hidden="false"]{
  display: block;
}

.brsldn-drawer__inner{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 32px;
}

/* ---------- Columns ---------- */

.brsldn-col{
  border: 1px solid var(--brsldn-border);
  border-radius: 16px;
  padding: 16px;
}

.brsldn-col__title{
  font-weight: 600;
  margin-bottom: 12px;
}

/* ---------- Pills ---------- */

.brsldn-btngrid{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.brsldn-pill{
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--brsldn-border);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  font-size: 14px;
  transition: background .15s ease, color .15s ease;
}

.brsldn-pill:hover{
  border-color: var(--brsldn-accent);
}

/* ---------- Active State (ONE definition only) ---------- */

.brsldn-pill.is-active{
  background: var(--brsldn-fg);
  color: var(--brsldn-bg);
  border-color: transparent;
}

/* ---------- Ghost ---------- */

.brsldn-pill-ghost{
  opacity: .6;
}

/* ---------- Hints ---------- */

.brsldn-hint{
  margin-top: 10px;
  font-size: 12px;
  opacity: .6;
}