/* ===================================================================
   Primitives

   The handful of visual patterns that recur across otherwise unrelated
   parts of the site -- a floating panel, a micro-label, a pill, a button.
   Each one used to be redeclared per component (.corpus-dropdown,
   .cite-popover, .prov-menu, .amendments-popover ... all the same panel;
   .corpus-tag, .badge-soon, .history-flag ... all the same pill). They are
   named here once and composed onto the component's own class, which keeps
   only what is actually specific to it: position, size, spacing.
   ================================================================== */

/* A panel that floats above the page: a dropdown, a popover, a context
   menu. Position, sizing, offset and z-index are the component's own --
   different panels stack at different layers on purpose (a corpus dropdown
   under a context menu under a popover), so this carries only what every
   floating panel looks like, never where it sits. */
.panel-float {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* A resting surface: a card sitting in the flow of the page rather than
   floating above it, so it gets the quieter shadow. */
.card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* The small uppercase heading that titles a piece of furniture -- an
   outline panel, a footnote list, a sidebar section -- as opposed to a
   piece of law. Size and margin stay with the component, since a compact
   panel and a wider one want different weight. */
.eyebrow {
  font-family: var(--sans);
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* A fully-rounded chip: a note count, a "current" flag, a cited-here tag.
   Weight, size, padding and color are the component's own -- a count reads
   bold and tight, a citation chip reads quiet -- so only the shape (and the
   line-height it needs to stay round rather than oval) is shared. */
.pill {
  display: inline-block;
  border-radius: var(--radius-pill);
  line-height: 1;
}

/* A small rectangular label: a corpus abbreviation, a "Coming soon" flag, a
   diff's ADDED/REMOVED kind. Smaller radius than `.pill`, and square enough
   to sit beside text rather than float above it. */
.tag {
  display: inline-block;
  border-radius: var(--radius-sm);
  line-height: 1;
}

/* A button with a visible edge -- the default across editors, forms and
   action rows. `.btn-primary` inverts it for the one action per surface
   that should read as the affirmative choice. */
.btn {
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover { border-color: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.btn-primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.btn-primary:hover { filter: brightness(1.08); }

/* The small "hint" chip that rides beside a copy button naming what it
   copies -- a citation, a permalink. */
.copy-hint {
  font-family: var(--sans);
  font-size: var(--text-3xs);
  font-weight: 600;
  color: var(--faint);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--panel);
  border: 1px solid var(--rule);
  line-height: 1.2;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

/* `lib/clipboard.js` flashes `.copied` on the button itself after a
   successful copy. On a plain button (`.copy-cite-btn`) that flash is the
   button's own background; on one built around a `.copy-hint` chip the
   confirmation belongs to the chip alone -- the button around it is a
   citation or piece of text, not part of the "copied" affordance. */
.copied:not(:has(.copy-hint)) {
  background: var(--good) !important;
  color: #ffffff !important;
  border-color: var(--good) !important;
}
.copied .copy-hint {
  background: var(--good);
  color: #ffffff;
  border-color: var(--good);
}