/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* TipTap inline entity nodes — #topic and @mention pills */
.inline-tag {
  display: inline;
  padding: 1px 6px;
  border-radius: 9999px;
  font-size: 0.875em;
  font-weight: 500;
  white-space: nowrap;
  cursor: default;
  user-select: all;
}

/* SIGIL-COLOUR-1 Phase 1 (2026-05-15): pill colours unified to the
   sigil-type palette. Entity sigils (&, #, ¶, :, ★, ⊛) render in the
   slate-blue family; people sigils (@) render in brick. The three
   *-tag-pill class names are kept (no JS / helper churn); only their
   CSS bodies change. Old values for context:
     .topic-tag-pill   was bg #2c2c2c / fg #f0ebe0 (dark mono)
     .mention-tag-pill was bg #f5e6cc / fg #5c3a24 (warm cream/brown)
     .circle-tag-pill  already slate-blue family — unchanged.
   Audit: docs/SIGIL-COLOUR-1-audit.md. */
.topic-tag-pill,
.circle-tag-pill,
.pill-entity {
  background-color: color-mix(in srgb, var(--color-slate-blue) 18%, transparent);
  color: var(--color-slate-blue-dark);
  border: 1px solid color-mix(in srgb, var(--color-slate-blue) 25%, transparent);
}

.mention-tag-pill,
.pill-person {
  background-color: color-mix(in srgb, var(--color-brick) 10%, transparent);
  color: var(--color-brick);
  border: 1px solid color-mix(in srgb, var(--color-brick) 25%, transparent);
}

/* NAMESPACE-3b: outline-only variant of .circle-tag-pill for non-member
   stance mentions. Filled (.circle-tag-pill) reads as "this is the
   speaker's home"; outline reads as "this name is being pointed at, not
   claimed." Stance written at compose time per NAMESPACE-3a §8.2. */
.circle-tag-pill--outline {
  background-color: transparent;
  color: var(--color-slate-blue);
  border: 1px solid var(--color-slate-blue);
}

/* Inline-text sigil references (non-pill). Used by SigilColourHelper's
   entity_ref / handle_ref for body text and Gazette sentences. */
.ref-entity {
  color: var(--color-slate-blue-dark);
  font-weight: 500;
}

.handle {
  color: var(--color-brick);
  font-weight: 600;
}

/* Popularity indicators — visual weight via colour from brand palette */
.popularity-buzzing {
  color: #c8944a; /* brand-amber — warm gold, high energy */
}

.popularity-rising {
  color: #4b7040; /* forest — growth, upward */
}

.popularity-falling {
  color: #7a8b96; /* slate-blue — cooling, muted */
}

.popularity-lonely {
  color: #b0bec5; /* slate-blue-light — barely there */
}

/* Inline topic pills: popularity accent border */
.topic-tag-pill[data-popularity="buzzing"] {
  border: 1px solid #c8944a;
}

.topic-tag-pill[data-popularity="rising"] {
  border: 1px solid #4b7040;
}

.topic-tag-pill[data-popularity="falling"] {
  border: 1px solid rgba(122, 139, 150, 0.4);
}

/* Dropdown popularity labels */
.popularity-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ——— SIGIL-PICKER — universal sigil-insertion affordance ———
   Button shows the three most-recognised sigils (@#&) in mono. Tapping
   reveals a 2×3 grid; tapping a card inserts the sigil into the host
   input and closes the grid. See app/javascript/controllers/sigil_picker_controller.js
   and docs/SIGIL-PICKER-plan.md.

   Rules below sit in @layer components so Tailwind's utility layer can
   still override (e.g. `hidden` on .sigil-picker-button must win to
   suppress the desktop button on mobile). */
@layer components {
.sigil-picker-button {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #6b4a33;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  letter-spacing: -1px;
  transition: border-color 0.1s ease, background-color 0.1s ease, color 0.1s ease;
}
.sigil-picker-button:hover,
.sigil-picker-button:focus-visible {
  background: rgba(200, 148, 74, 0.12);
  color: #3d2615;
  outline: none;
}
.sigil-picker-button.open {
  background: #f5e6cc;
  color: #3d2615;
  border-color: rgba(200, 148, 74, 0.3);
}

.sigil-picker-panel {
  background: #faf7f2;
  border-bottom: 1px solid #e4ddd0;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.sigil-picker-panel.hidden { display: none; }

.sigil-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  border: 1px solid #e4ddd0;
  border-radius: 8px;
  background: #faf7f2;
  cursor: pointer;
  transition: border-color 0.1s ease, background-color 0.1s ease;
}
.sigil-card:hover,
.sigil-card:focus-visible {
  border-color: #c8944a;
  background: #f5e6cc;
  outline: none;
}
.sigil-card-glyph {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px;
  line-height: 1;
  color: #3d2615;
  margin-bottom: 4px;
}
.sigil-card-label {
  font-size: 11px;
  color: #6b4a33;
  text-transform: lowercase;
}

/* ——— SEARCH-DELIGHT — full-screen mobile search overlay ———
   On mobile (< sm) the overlay covers the viewport so the on-screen
   keyboard can't push the input off-screen (BUG-32 fix). The overlay's
   own input sits in a pinned bar at the top; results scroll below it.
   On desktop (≥ sm) the panel's Tailwind sm:* utilities make it a
   drop-down — CSS here resets the flex/overflow defaults so the body
   doesn't double-scroll inside the panel. */

.search-overlay-input-bar {
  flex-shrink: 0;
  background: #faf7f2;
  border-bottom: 1px solid #e4ddd0;
  padding: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.search-overlay-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

@media (min-width: 640px) {
  /* Desktop drop-down: the panel itself scrolls (sm:overflow-y-auto +
     sm:max-h on the panel target). The body inside is plain block with
     padding; no nested scrollbar. */
  .search-overlay-input-bar { display: none; }
  .search-overlay-body { flex: initial; overflow-y: visible; }
}
} /* end @layer components */