/* Reusable components: hamburger, back-btn, color-picker, segmented toggle, buttons. */

/* ─── CHROME BUTTONS (hamburger, top-right PARTS) ───────
   1:1 Reverie: index.html:196-207.
   These sit inside a .home-header flex container or a toolbar — no
   absolute positioning on the button itself. */

.chrome-btn {
  background: none;
  border: none;
  color: var(--fg-dim);
  font-size: 1.3rem;
  cursor: pointer;
  padding: var(--space-xs);
  transition: color var(--t-fast);
}

.chrome-btn:hover { color: var(--fg); }

/* Top-right PARTS button — 1:1 Reverie chrome-library-word mode
   (index.html:225-235). Overrides the base font-size to the small
   uppercase-label look. */

.top-right-btn {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  height: 1.82rem;
  display: inline-flex;
  align-items: flex-end;
}

/* ─── BACK BUTTON (←) — 1:1 Reverie: index.html:927-935 ── */

.coll-info-back {
  background: none;
  border: none;
  color: var(--fg-dim);
  font-size: 1.2rem;
  cursor: pointer;
  padding: var(--space-xs);
  transition: color var(--t-fast);
}

.coll-info-back:hover { color: var(--fg); }

/* ─── ICON BUTTON — neutral chrome icon (layout toggle, etc.) ─── */

.icon-btn {
  background: none;
  border: none;
  color: var(--fg-dim);
  font-size: 1rem;
  cursor: pointer;
  padding: var(--space-xs);
  transition: color var(--t-fast);
}

.icon-btn:hover { color: var(--fg); }

/* Disabled version of top-right-btn */
.top-right-btn[disabled] {
  opacity: 0.35;
  cursor: default;
}
.top-right-btn[disabled]:hover {
  color: var(--fg-dim);
}

/* Two-line variant for labels that don't fit comfortably on a
   single line ("PARTS &\nDIALOGS"). Locale string carries a literal
   \n; white-space: pre-line lets the browser render that as a hard
   break. text-align: right keeps the label visually anchored to
   the page edge. The base height: 1.82rem from .top-right-btn would
   clip the second line, so it's lifted to auto with a comfortable
   line-height. */
.top-right-btn-2line {
  white-space: pre-line;
  text-align: right;
  height: auto;
  line-height: 1.3;
  align-items: flex-start;
}

/* ─── CTRL-TOGGLE + SETTINGS-INPUT — 1:1 Reverie reverie.css:945-960 and 588-599 ── */

.ctrl-toggle,
.settings-input {
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.2s;
}

.ctrl-toggle:hover,
.settings-input:hover {
  background: var(--control-hover);
}

.ctrl-toggle.active {
  background: var(--control-active);
  border-color: var(--border-strong);
}

.settings-input {
  font-size: 0.8rem;
  outline: none;
  max-width: 200px;
}

.settings-input:focus {
  border-color: var(--border-strong);
}

/* ─── COLOR PICKER (dots row) ────────────────────────── */

.color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.color-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  /* Base border kept transparent so dot dimensions stay stable when
     toggling .is-sel — only the color changes, no layout shift. */
  border: 1px solid transparent;
  transition: transform var(--t-fast), border-color var(--t-fast);
  flex-shrink: 0;
}

.color-dot:hover {
  transform: scale(1.1);
}

/* Selected: high-contrast neutral (dark in day mode, light in night)
   so the ring reads cleanly against any swatch color underneath.
   Single ring, no gap — gold was avoided because it competes with
   the colors being outlined. */
.color-dot.is-sel {
  border-color: var(--fg-strong);
}

/* ─── SEGMENTED TOGGLE ───────────────────────────────── */

.segmented {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 6px;
}

.segmented button {
  flex: 1;
  padding: 7px 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: background-color var(--t-fast), color var(--t-fast);
  border-right: 1px solid var(--border);
}

.segmented button:last-child {
  border-right: none;
}

.segmented button.is-active {
  background: var(--gold-faint);
  color: var(--gold);
}

/* ─── GHOST BUTTON (gold outline, CTA) ───────────────── */

.ghost-btn {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  padding: 12px 36px;
  border-radius: 3px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: background-color var(--t-fast), border-color var(--t-fast);
  background: transparent;
}

.ghost-btn:hover {
  background: var(--gold-faint);
  border-color: var(--gold);
}

.ghost-btn.small {
  font-size: 11px;
  padding: 10px 24px;
  letter-spacing: 0.12em;
}

/* Disabled — color/border-based dim instead of opacity, so a parent's
   opacity animation (e.g. the greet submit's reveal) doesn't override
   the disabled visual. */
.ghost-btn[disabled] {
  color: var(--fg-muted);
  border-color: var(--fg-muted);
  cursor: default;
}

.ghost-btn[disabled]:hover {
  background: transparent;
  color: var(--fg-muted);
  border-color: var(--fg-muted);
}

/* ─── NEUTRAL TEXT BUTTON (secondary CTA) ────────────── */

.text-btn {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 3px;
  border: 1px solid var(--fg-muted);
  color: var(--fg);
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  background: transparent;
}

.text-btn:hover {
  border-color: var(--fg-dim);
  color: var(--fg-strong);
}

.text-btn.is-danger {
  color: var(--fg-dim);
}

.text-btn.is-danger:hover {
  color: rgba(220, 120, 120, 0.9);
  border-color: rgba(220, 120, 120, 0.4);
}

.text-btn.is-accent {
  color: var(--gold);
  border-color: var(--gold-dim);
}

.text-btn.is-accent:hover {
  background: var(--gold-faint);
  border-color: var(--gold);
}

.text-btn[disabled] {
  opacity: 0.35;
  cursor: default;
}

.text-btn[disabled]:hover {
  background: transparent;
  border-color: var(--fg-muted);
  color: var(--fg);
}

.text-btn.is-accent[disabled]:hover {
  background: transparent;
  border-color: var(--gold-dim);
  color: var(--gold);
}

/* ─── TAG CHIPS ─────────────────────────────────────────────
   Variant B from prototypes/phase-c-tag-mockup.html — Cormorant text,
   breathing pill shape, neutral border, tinted background for selected.
   Used by tagpicker.js (renderTagPicker) in End-Screen, Part-Edit, and
   the Browse filter toolbar.

   Three size scales:
     .tag-chip          — picker (full size, interactive)
     .tag-mini-chip     — read-only display on tiles (smaller, no hover)
     .tag-chip-add      — "+ create new" pill (dashed border)
*/

.tag-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.tag-chip {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  padding: 4px 12px 5px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  color: var(--fg-dim);
  background: transparent;
  cursor: pointer;
  transition:
    color var(--t-fast),
    border-color var(--t-fast),
    background-color var(--t-fast);
  white-space: nowrap;
}

/* Hover changes BOTH border and text — the text-only-border variant
   read as too subtle ("only the border changes"). The earlier deselect-
   glitch (visible flicker via fg-dim → fg-strong → fg-dim) is solved
   here by hovering only to var(--fg), not var(--fg-strong) — the gap
   between idle's fg-dim and hover's fg is small enough that any
   transient lerp through the deselect is barely visible.
   (hover: hover) gates the rule so touch devices don't keep a sticky
   hover state after tap. */
@media (hover: hover) {
  .tag-chip:hover {
    color: var(--fg);
    border-color: var(--fg-dim);
  }
}

.tag-chip.is-sel {
  color: var(--fg-strong);
  border-color: var(--fg-strong);
  background: rgba(58, 53, 45, 0.04);
}

.tag-chip-add {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  font-weight: 400;
  padding: 4px 12px 5px;
  border: 1px dashed var(--border-soft);
  border-radius: 14px;
  color: var(--fg-muted);
  background: transparent;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}

@media (hover: hover) {
  .tag-chip-add:hover {
    color: var(--fg);
    border-color: var(--fg-dim);
  }
}

.tag-chip-add-input {
  font-family: var(--font-display);
  font-size: 14px;
  padding: 4px 12px;
  border: 1px solid var(--fg-strong);
  border-radius: 14px;
  background: transparent;
  color: var(--fg-strong);
  letter-spacing: 0.01em;
  outline: none;
  width: 140px;
}

/* Mini-chips for tile rendering — non-interactive tag display.
   Default alignment is flex-start (left) for list/row mode where tags
   sit under left-aligned content. Grid/tile mode overrides to centre
   to match the centred tile rhythm — see screens.css for that rule. */
.tag-mini-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  width: 100%;
  flex-basis: 100%;
  justify-content: flex-start;
}

/* Default mini-chip = the tile variant (12px / fg / fg-faint border).
   This is the single source of truth for tile-pills used by both
   .part-tile and .dialog-tile in row + grid modes. The view variant
   (.rv-tags / .pd-tags, 13px + a touch more padding) overrides this
   in screens.css. */
.tag-mini-chip {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  padding: 1px 9px 2px;
  border: 1px solid var(--fg-faint);
  border-radius: 10px;
  color: var(--fg);
  background: transparent;
  white-space: nowrap;
  letter-spacing: 0.01em;
}