/*
 * Herald — supplemental styles
 * Tailwind handles utility classes; these are bespoke overrides.
 */

/* Dot tracker component (shared with inline <style> in base.html via CDN) */
.dot-tracker {
  display: flex;
  align-items: center;
  gap: 3px;
}

.dot-tracker span {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--gold-400);
  margin: 0 2px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.dot-tracker span:hover {
  background: color-mix(in srgb, var(--gold-400) 30%, transparent);
}

.dot-tracker span.filled {
  background: var(--gold-400);
}

/* Page transitions */
[x-cloak] { display: none !important; }

/* ── Global nav — hover-caret affordance ──────────────────────────────────
   --nav-caret is a local alias scoped to the nav container only (not a new
   token in tokens.css). The ::before caret targets .nav-link elements only,
   not a global a::before, so body-copy links are unaffected. */
.site-nav {
  --nav-caret: var(--gold-500);
}

.nav-link {
  text-decoration: none;
  position: relative;
}
.nav-link::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--nav-caret);
  top: 100%;
  left: 50%;
  transform: translateX(-50%) scaleY(0);
  transition: transform 0.4s ease;
}
.nav-link:hover::before {
  transform: translateX(-50%) scaleY(1);
}

/* ── Inline specialty input (HTR sheet) ─────────────────────────────────── */
.specialty-inline-input {
  margin-top: 4px;
}

/* background/border/color/font-family/font-size and the :focus
   border-bottom-color below were dead: journal-theme.css's shared
   input[type="text"] rule (higher specificity — attribute selector beats
   a plain class) already sets all of those for every .specialty-input-field
   in the app (they're always <input type="text">), so these declarations
   never rendered. Removed rather than left looking functional. Confirmed
   via computed styles before removal that the visible result is unchanged
   (parchment background, Crimson Text serif, var(--accent) focus border —
   already coming from journal-theme.css). */
.specialty-input-field {
  outline: none;
  padding: 2px 4px;
  width: 100%;
  max-width: 160px;
}

/* ── Skeleton loading states ─────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.skeleton {
  background: linear-gradient(90deg, #1e1e1e 25%, #2a2a2a 50%, #1e1e1e 75%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}

.skeleton-line {
  height: 1em;
  margin-bottom: 0.5em;
  border-radius: 3px;
}

.skeleton-bar {
  height: 2.5rem;
  border-radius: 6px;
}

.skeleton-card {
  height: 7rem;
  border-radius: 8px;
}

/* ── Flash progress bar ──────────────────────────────────────────────────── */
@keyframes flash-progress {
  from { width: 100%; }
  to   { width: 0%; }
}

.flash-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(255,255,255,0.4);
  animation: flash-progress var(--flash-duration, 5s) linear forwards;
}

/* ── Badge — typewriter-stamped tag (game-line markers, role pills) ───────
   Ledger tab: a flat card-catalog file tab with a notched edge. Outline
   (color-mix into --parchment-800) is the default skin; .badge--solid
   fills with the flat variant color instead. See macros/badge.html. */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.5em 0.7em 0.5em 0.9em;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
}

.badge--default, .badge--tier {
  background: color-mix(in srgb, var(--gold-400) 26%, var(--parchment-800));
  color: color-mix(in srgb, var(--gold-400) 70%, white 30%);
}
.badge--default.badge--solid, .badge--tier.badge--solid {
  background: var(--gold-400);
  color: var(--ink-900);
}

.badge--htr {
  background: color-mix(in srgb, var(--htr-500) 26%, var(--parchment-800));
  color: color-mix(in srgb, var(--htr-500) 70%, white 30%);
}
.badge--htr.badge--solid {
  background: var(--htr-500);
  color: var(--ink-900);
}

.badge--vtm {
  background: color-mix(in srgb, var(--vtm-500) 26%, var(--parchment-800));
  color: color-mix(in srgb, var(--vtm-500) 70%, white 30%);
}
.badge--vtm.badge--solid {
  background: var(--vtm-500);
  color: var(--ink-900);
}

.badge--wta {
  background: color-mix(in srgb, var(--wta-500) 26%, var(--parchment-800));
  color: color-mix(in srgb, var(--wta-500) 70%, white 30%);
}
.badge--wta.badge--solid {
  background: var(--wta-500);
  color: var(--ink-900);
}