/* ============================================================
   GREENVILLE TRIUMPH — COMPONENT LIBRARY
   design.greenvilletriumph.club/components.css
   Depends on tokens.css. Link tokens FIRST, then this file.

   <link rel="stylesheet" href="https://design.greenvilletriumph.club/tokens.css">
   <link rel="stylesheet" href="https://design.greenvilletriumph.club/components.css">

   House rules:
   - Sharp edges by default. --radius-full only on badges, toggle thumb.
   - Lift on hover, never scale.
   - No gradients on backgrounds. No backdrop-filter on flat cards.
   - Status colors (success/warning/danger/info) are system signals only.
   ============================================================ */

/* ============================================================
   SECTION CHROME  (the canonical Triumph dashboard section)
   ------------------------------------------------------------
   Every section follows the same rhythm: numbered eyebrow,
   title, intro lede with left-rule paragraph. Subsections inside
   a section get an uppercase mono label.

   HTML:
   <section id="overview">
     <div class="container">
       <div class="section-header">
         <span class="section-number">01 · Overview</span>
         <h2 class="section-title">Match-day snapshot.</h2>
         <div class="section-intro">
           <span class="lede">One headline thought.</span>
           <p>Supporting paragraph with left-rule.</p>
         </div>
       </div>
       <span class="subsection-label">Revenue</span>
       <!-- KPIs, charts, etc. -->
     </div>
   </section>

   Alternate sections with class="bg-surface" for visual rhythm.
   ============================================================ */
.section-header { margin-bottom: 1.6rem; }
.section-number {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.65rem;
}
.section-title { margin-bottom: 0.7rem; }
.section-subtitle {
  font-size: 1.15rem;
  font-weight: var(--weight-regular);
  color: var(--color-text-soft);
  max-width: 62ch;
  line-height: 1.55;
}
.subsection-label + .section-subtitle { margin-bottom: 0.85rem; }
.section-intro { max-width: 62ch; margin-top: 0.2rem; }
.section-intro .lede {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.007em;
  line-height: 1.25;
  color: var(--color-text);
  margin-bottom: 0.65rem;
  text-transform: none;
}
.section-intro p {
  font-size: 0.95rem;
  color: var(--color-text-soft);
  line-height: 1.5;
  border-left: 3px solid var(--color-accent);
  padding: 0.1rem 0 0.1rem 1.1rem;
}
.section-intro p + p { margin-top: 0.5rem; }
.section-intro b, .section-intro strong { color: var(--color-text); font-weight: var(--weight-bold); }
.subsection-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin: 1.85rem 0 0.75rem;
}
.subsection-label:first-child { margin-top: 0; }

/* ============================================================
   LAYOUT UTILITIES
   ------------------------------------------------------------
   .we-row    horizontal flex row, wraps, centered cross-axis
   .we-note   small caption under a component, muted, max 62ch

   HTML:
   <div class="we-row"><button>One</button><button>Two</button></div>
   <p class="we-note">Outline is the default for in-app selection.</p>
   ============================================================ */
.we-row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: center;
}
.we-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  max-width: 62ch;
  line-height: 1.5;
}

/* ============================================================
   BUTTONS
   ------------------------------------------------------------
   .btn-solid    primary CTA — Triumph Green fill
   .btn-outline  default in-app action — bordered, transparent
   .btn-ghost    tertiary action — text-only

   HTML:
   <button class="btn btn-solid">Save changes</button>
   <button class="btn btn-outline">Cancel</button>
   <button class="btn btn-ghost">More options</button>

   Lift on hover (translateY -2px), never scale.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius-cta);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-solid {
  background: var(--color-accent);
  color: var(--brand-deep-night);
  border-color: var(--color-accent);
}
.btn-solid:hover { background: var(--color-pop); border-color: var(--color-pop); box-shadow: var(--shadow-md); }

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-emphasis);
}
.btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-soft);
  border-color: transparent;
}
.btn-ghost:hover { color: var(--color-text); background: var(--color-surface-alt); }

/* ============================================================
   INPUTS
   ------------------------------------------------------------
   Underline only. No boxed borders. Accent line grows from center on focus.

   HTML:
   <div class="input-wrap">
     <input class="input-underline" type="text" placeholder="Search…">
   </div>
   ============================================================ */
.input-wrap {
  position: relative;
  margin-bottom: var(--space-md);
  max-width: 360px;
}
.input-underline {
  width: 100%;
  padding: 0.7rem 0;
  border: 0;
  border-bottom: 1.5px solid var(--color-border-emphasis);
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.95rem;
  outline: 0;
  transition: border-color var(--duration) var(--ease-out);
}
.input-underline::placeholder { color: var(--color-text-muted); }
.input-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: all var(--duration) var(--ease-out);
}
.input-wrap:focus-within::after { left: 0; width: 100%; }

/* ============================================================
   TOGGLE
   ------------------------------------------------------------
   Checkbox styled as track + thumb. Thumb shifts to accent when active.

   HTML:
   <input type="checkbox" id="t1" class="toggle-input">
   <label for="t1" class="toggle-track"><span class="toggle-thumb"></span></label>
   ============================================================ */
.toggle-input { position: absolute; opacity: 0; pointer-events: none; }

.toggle-track {
  display: inline-block;
  vertical-align: middle;
  width: 46px;
  height: 24px;
  background: rgba(242, 250, 250, 0.08);
  border: 1px solid var(--color-border-emphasis);
  border-radius: var(--radius-full);
  position: relative;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--color-text-muted);
  border-radius: var(--radius-full);
  transition: left var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
}
.toggle-input:checked + .toggle-track {
  background: rgba(97, 166, 49, 0.22);
  border-color: var(--color-accent);
}
.toggle-input:checked + .toggle-track .toggle-thumb {
  left: 24px;
  background: var(--color-accent);
}

/* ============================================================
   STATUS BADGES
   ------------------------------------------------------------
   Semantic, never decorative. Use to communicate state.
     -sharp = rectangular (data tables, dense UI)
     -pill  = rounded (filter chips, accent labels)
   Variants: success / warning / danger / info / accent

   HTML:
   <span class="we-badge we-badge-sharp we-badge-success">Sold Out</span>
   <span class="we-badge we-badge-pill we-badge-info">In Review</span>
   ============================================================ */
.we-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  line-height: 1.3;
}
.we-badge-sharp { border-radius: 0; }
.we-badge-pill  { border-radius: var(--radius-full); }
.we-badge-success { background: var(--color-success-subtle); color: var(--color-success); }
.we-badge-warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.we-badge-danger  { background: var(--color-danger-subtle);  color: var(--color-danger); }
.we-badge-info    { background: var(--color-info-subtle);    color: var(--color-info); }
.we-badge-accent  { background: rgba(97, 166, 49, 0.14);     color: var(--color-accent); }

/* ============================================================
   DATA TABLE
   ------------------------------------------------------------
   Bare table, no card wrapper. Wrap in .table-scroll for overflow.
   Add .num to <td> for monospace tabular numbers.

   HTML:
   <div class="table-scroll">
     <table class="we-table">
       <thead><tr><th>Match</th><th>Tickets</th></tr></thead>
       <tbody><tr><td>6/3 vs Lex</td><td class="num">3,842</td></tr></tbody>
     </table>
   </div>
   ============================================================ */
.we-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.we-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--color-border-emphasis);
}
.we-table td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}
.we-table tr:hover td { background: rgba(97, 166, 49, 0.05); }
.we-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ============================================================
   KPI MARKERS
   ------------------------------------------------------------
   Left-border accent, no card wrapper. Each KPI cycles through
   accent → blue → light green → info via nth-child.

   HTML:
   <div class="we-kpi-grid">
     <div class="we-kpi"><div class="we-kpi-label">Revenue</div><div class="we-kpi-value">$2.4M</div></div>
     <div class="we-kpi"><div class="we-kpi-label">Sold</div><div class="we-kpi-value">18,472</div></div>
   </div>
   ============================================================ */
.we-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
}
.we-kpi {
  border-left: 3px solid var(--color-accent);
  padding: 0.4rem 0 0.4rem 1.1rem;
}
.we-kpi:nth-child(2) { border-left-color: var(--color-blue); }
.we-kpi:nth-child(3) { border-left-color: var(--color-pop); }
.we-kpi:nth-child(4) { border-left-color: var(--color-info); }
.we-kpi-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}
.we-kpi-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.85rem);
  font-weight: var(--weight-extra);
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.05;
}

/* ============================================================
   DELTA CHIPS
   ------------------------------------------------------------
   Pair with stats to show period-over-period change. Up/down/flat.

   HTML:
   <span class="delta-chip delta-up">+12.4%</span>
   <span class="delta-chip delta-down">−3.1%</span>
   <span class="delta-chip delta-flat">0.0%</span>
   ============================================================ */
.delta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  font-weight: var(--weight-bold);
  padding: 0.15rem 0.5rem;
  letter-spacing: 0.02em;
}
.delta-up   { background: var(--color-success-subtle); color: var(--color-success); }
.delta-down { background: var(--color-danger-subtle);  color: var(--color-danger); }
.delta-flat { background: var(--color-surface-alt);    color: var(--color-text-muted); }

/* ============================================================
   PROGRESS BAR
   ------------------------------------------------------------
   Sell-through, capacity, completion. Bare 6px track + fill.
   Add .warning or .danger to .progress-fill for state colors.

   HTML:
   <div class="progress"><div class="progress-fill" style="width: 73%"></div></div>
   ============================================================ */
.progress {
  width: 100%;
  height: 6px;
  background: var(--color-surface-alt);
  position: relative;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--color-accent);
  transition: width var(--duration) var(--ease-out);
}
.progress-fill.warning { background: var(--color-warning); }
.progress-fill.danger  { background: var(--color-danger); }

/* ============================================================
   HOVER AFFORDANCES
   ------------------------------------------------------------
   .hover-lift   translateY -3px + shadow + border tint (cards, KPI tiles)
   .hover-border border-color → accent (subtle, links, table rows)
   .hover-glow   accent ring + diffuse shadow (CTAs, featured cards)
   Never scale. Triumph lifts; it does not scale.

   HTML:
   <div class="hover-card hover-lift">…</div>
   ============================================================ */
.hover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
}
.hover-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 1.5rem 1.25rem;
  text-align: center;
  font-size: 0.82rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text-soft);
}
.hover-card .hover-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.55rem;
}
.hover-lift {
  transition:
    transform var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out);
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}
.hover-border { transition: border-color var(--duration) var(--ease-out); }
.hover-border:hover { border-color: var(--color-accent); }
.hover-glow {
  transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
.hover-glow:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent), 0 0 24px rgba(97, 166, 49, 0.25);
}

/* ============================================================
   SKELETON LOADING
   ------------------------------------------------------------
   Shimmer on surface tokens. Use for any loading state.
   Set height inline per slot.

   HTML:
   <div class="skeleton" style="height: 1.5rem;"></div>
   ============================================================ */
.skeleton-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(242, 250, 250, 0.04) 25%,
    rgba(242, 250, 250, 0.10) 50%,
    rgba(242, 250, 250, 0.04) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation-duration: 0.01ms; }
}

/* ============================================================
   FROSTED GLASS
   ------------------------------------------------------------
   Only on sticky nav or glass overlays. Never on flat cards.
   Use sparingly. Once per surface, never stacked.

   HTML:
   <div class="frosted"><div class="frosted-title">Title</div><div class="frosted-body">…</div></div>
   ============================================================ */
.frosted {
  background: rgba(2, 0, 34, 0.55);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--color-border-emphasis);
  padding: 1.25rem 1.4rem;
}
.frosted-title { font-weight: var(--weight-bold); margin-bottom: 0.4rem; color: var(--color-text); }
.frosted-body  { font-size: 0.85rem; color: var(--color-text-soft); line-height: 1.5; }

/* ============================================================
   SHADOW UTILITIES
   ------------------------------------------------------------
   Three elevation levels. Hierarchy, not decoration. Use sparingly.

   HTML:
   <div class="shadow-md">…</div>
   ============================================================ */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ============================================================
   STAT BAND
   ------------------------------------------------------------
   Bordered row of metric blocks. Used at top of dashboards and
   inside proposal decks for "headline numbers."

   HTML:
   <div class="stat-band">
     <div class="stat-item"><div class="stat-value">3,842</div><div class="stat-label">Tickets sold</div></div>
     <div class="stat-item"><div class="stat-value">$112K</div><div class="stat-label">Revenue</div></div>
   </div>
   ============================================================ */
.stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-border-emphasis);
  border-bottom: 1px solid var(--color-border-emphasis);
  margin: var(--space-sm) 0;
}
.stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  font-weight: var(--weight-extra);
  letter-spacing: -0.025em;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.stat-item:nth-child(even) .stat-value { color: var(--color-blue); }
.stat-label { font-size: 0.84rem; color: var(--color-text-soft); line-height: 1.45; }

/* ============================================================
   PHASE HEADER  (proposal kit)
   ------------------------------------------------------------
   Outlined oversize number + meta block. Used to introduce a
   sequenced section ("Phase One", "Step Two", "Year 1").

   HTML:
   <div class="phase-header">
     <div class="phase-num">01</div>
     <div class="phase-meta"><h3>The pilot</h3><p>What we ship in the first 90 days.</p></div>
   </div>
   ============================================================ */
.phase-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-lg);
  align-items: start;
  margin: var(--space-sm) 0;
}
.phase-num {
  font-family: var(--font-mono);
  font-size: clamp(3.5rem, 2.5rem + 3.5vw, 7rem);
  font-weight: var(--weight-extra);
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 2px var(--color-accent);
  letter-spacing: -0.04em;
}
.phase-meta h3 { color: var(--color-text); margin-top: 0.45rem; }
.phase-meta p  { color: var(--color-text-soft); max-width: 60ch; line-height: 1.5; margin-top: 0.55rem; }
@media (max-width: 640px) {
  .phase-header { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* ============================================================
   PILLAR ROW  (proposal kit)
   ------------------------------------------------------------
   Three-column row: index label, body, optional side slot.
   Used in stacked lists where each item has a category and prose.

   HTML:
   <div class="pillar">
     <div class="pillar-index">01 · Reach</div>
     <div class="pillar-body"><h3>Match-day audience</h3><p>…</p></div>
     <div></div>
   </div>
   ============================================================ */
.pillar {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: var(--space-lg);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: start;
}
.pillar:last-of-type { border-bottom: none; }
.pillar-index {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  padding-top: 0.35rem;
}
.pillar-body h3 { color: var(--color-text); margin-bottom: 0.55rem; }
.pillar-body p  { color: var(--color-text-soft); line-height: 1.5; margin-bottom: 0.5rem; }
@media (max-width: 720px) {
  .pillar { grid-template-columns: 1fr; gap: var(--space-sm); }
}

/* ============================================================
   GUIDELINE CARD  (do / don't pairs)
   ------------------------------------------------------------
   Two cards side by side documenting an anti-pattern. .do gets
   accent border-top + '+' bullets; .dont gets blue + '×' bullets.

   HTML:
   <div class="guideline-grid">
     <div class="guideline-card do">
       <div class="guideline-label">Do</div>
       <ul><li>Use var(--color-accent) for the brand green.</li></ul>
     </div>
     <div class="guideline-card dont">
       <div class="guideline-label">Don't</div>
       <ul><li>Hardcode #61a631 anywhere.</li></ul>
     </div>
   </div>
   ============================================================ */
.guideline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-md);
}
.guideline-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  padding: 1.2rem 1.35rem;
}
.guideline-card.dont { border-top-color: var(--color-blue); }
.guideline-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.guideline-card.do   .guideline-label { color: var(--color-accent); }
.guideline-card.dont .guideline-label { color: var(--color-blue); }
.guideline-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.guideline-card li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--color-text-soft);
}
.guideline-card.do   li::before { content: '+'; position: absolute; left: 0; top: 0; color: var(--color-accent); font-weight: var(--weight-bold); }
.guideline-card.dont li::before { content: '×'; position: absolute; left: 0; top: 0; color: var(--color-blue);   font-weight: var(--weight-bold); }