/* =============================================================================
   File: /assets/tg/tg.core.css
   Updated: 2025-09-21 15:22 PT
   Purpose:
     - Global tokens, layout, header/nav, hero, cards, tiles, CTAs, utilities.
     - Consistent hero overlay (fixed size), with image-only pan/zoom shims.
     - Level-1 page consistency (spacing, borders, tile accents).
     - THREE global markers for titles/links sizing:
         1) --tg-section-header-size  → Section Card Header <h2>
         2) --tg-mini-title-size      → Mini Card Title (.qs-card .title)
         3) --tg-accent-link-size     → Link Arrow text (.qs-card .accent)
     - Card border color coding helpers (default/info/success/warn/danger).
     - Shared form system (.tg-form, .form-grid).
     - Mobile header stack: Hamburger → Brand → Menu.

   Additions in this update:
     - Global hero/overlay clearance controls (—hero-overhang, .tg-wrap).
     - Tight layout: wider container, slimmer left nav, compact minis.
     - NEW: All .qs-grid mini-card sections are 7-up at laptop/desktop (≥992px).
       CITADEL sections (#philosophy, #mind) keep extra-compact tile typography.

   Note:
     - Sections 22–26 were added to centralize Level-2 page layout/density
       (grid rows, compact inputs, mini-panels, small buttons, stopwatch readout).
       Remove page-local duplicates and use these globals instead.
   =============================================================================

   TABLE OF CONTENTS
   01) Reset / Base helpers
   02) Tokens / Root variables
   03) Base / Typography
   04) Header / Top navigation
   05) Hero (variable-driven + enforced layering)
   06) Buttons
   07) Layout: wrapper + leftnav + content
   08) Content cards (sections)
   09) Quick tile grid + cards
   10) Card border color variants
   11) Evaluation alerts
   12) Forms (global)
   13) Utilities / Misc
   14) Print
   15) Page-specific tweaks (Join)
   16) Tables (global, compact & numeric alignment)
   17) Pills / small toggles
   18) Notices / placeholders
   19) Tiny sparkline placeholder
   20) Button rows (utility)
   21) Overflow guards (grid children, tables, iframes)
   22) Compact grid utilities (Level-2 helpers)      ← NEW
   23) Density utilities (text + inputs)             ← NEW
   24) Mini info panels (Live Results cards)         ← NEW
   25) Small buttons / compact button rows           ← NEW
   26) Stopwatch readout (shared)                    ← NEW
*/

/* ============================================================================
   01) RESET / BASE HELPERS
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

/* ============================================================================
   02) TOKENS / ROOT VARIABLES
   ========================================================================== */
:root{
  /* Brand palette */
  --tg-blue:#002058;
  --tg-red:#BA0C2F;
  --tg-gold:#D4AF37;

  /* Text palette */
  --tg-dark:#111318;
  --tg-text:#0b1e33;
  --tg-muted:#475569;

  /* Surfaces & lines */
  --bg-page:#F5F7FB;
  --card:#ffffff;
  --line:#E2E8F0;
  --line-strong:#C3CAD7;

  /* Shadows & radii */
  --shadow-sm:0 6px 16px rgba(0,0,0,.05);
  --shadow:0 10px 28px rgba(0,0,0,.06);
  --shadow-lg:0 12px 24px rgba(0,0,0,.08);
  --radius-lg:18px;
  --radius-md:14px;

  /* HERO */
  --tg-hero-min-h-sm: 360px;
  --tg-hero-min-h-md: 420px;
  --tg-hero-min-h-lg: 520px;

  --tg-hero-pad-y-sm: 56px;
  --tg-hero-pad-y-md: 72px;
  --tg-hero-pad-y-lg: 96px;

  --tg-hero-title-size: clamp(28px, 4.2vw, 56px);
  --tg-hero-motto-size: clamp(16px, 1.6vw, 22px);

  --tg-hero-overlay-top: rgba(0,0,0,.34);
  --tg-hero-overlay-bottom: rgba(0,0,0,.58);
  --tg-hero-img-brightness: 0.86;

  --tg-hero-align: center;
  --tg-hero-cta-gap: 12px;
  --tg-hero-shim-y: 0px;

  /* Titles / links */
  --tg-section-header-size: 1.25rem;
  --tg-mini-title-size: 0.75rem;
  --tg-accent-link-size: 0.85rem;

  /* Card border colors */
  --tg-card-border-default: var(--line-strong);
  --tg-card-border-info:    #60a5fa;
  --tg-card-border-success: #34d399;
  --tg-card-border-warn:    #f59e0b;
  --tg-card-border-danger:  #ef4444;

  /* Global hero clearance */
  --tg-hero-overhang: 64px;
  --tg-hero-overhang-mobile: 104px;
  --tg-wrap-top-extra: 8px;
  --tg-wrap-x: 16px;
  --tg-wrap-bottom: 28px;
}
@media (max-width: 960px){
  :root{ --tg-hero-overhang: var(--tg-hero-overhang-mobile); }
}

/* ============================================================================
   03) BASE / TYPOGRAPHY
   ========================================================================== */
html{ scroll-behavior:smooth; }
body{
  background:var(--bg-page);
  color:var(--tg-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  margin:0;
}
a{ color:var(--tg-blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
.lead-muted{ color:#334155; }
.form-note{ font-size:.9rem; color:#555; }
.req{ color:#ef4444; font-weight:800; }

/* Container — widened for more minis per row */
.container{
  max-width:1280px;            /* was 1140px: allows 7-up mini-cards */
  margin:0 auto;
  padding:0 16px;
}

/* ============================================================================
   04) HEADER / TOP NAVIGATION
   ========================================================================== */
.tg-topbar{
  background:#fff;
  border-bottom:1px solid #e6e8ee;
  font-size:75%;               /* compact header */
}
.tg-topbar .row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px;
}
.tg-brand{ font-weight:800; letter-spacing:.02em; color:#002058; text-decoration:none; white-space:nowrap; }
.tg-nav-toggle{
  appearance:none; border:0; background:#002058; color:#fff;
  border-radius:10px; padding:10px 12px; font-weight:700;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
}
.tg-nav-toggle .icon{ display:inline-block; width:18px; height:2px; background:#fff; position:relative; }
.tg-nav-toggle .icon::before,
.tg-nav-toggle .icon::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:#fff; }
.tg-nav-toggle .icon::before{ top:-6px; }
.tg-nav-toggle .icon::after{ top:6px; }

nav.tg-nav{ display:none; }
nav.tg-nav.open{ display:block; }
nav.tg-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
nav.tg-nav a{ text-decoration:none; color:#002058; font-weight:700; padding:8px 10px; border-radius:8px; }
nav.tg-nav a:hover{ background:#f2f4f8; }

@media (min-width:992px){
  .tg-nav-toggle{ display:none; }
  nav.tg-nav{ display:block; }
  nav.tg-nav ul{ flex-direction:row; gap:14px; }
}

/* Mobile: Hamburger → Brand → Menu */
@media (max-width:991.98px){
  .tg-topbar .row{ flex-direction:column; align-items:stretch; gap:8px; }
  .tg-nav-toggle{ order:1; align-self:flex-end; }
  .tg-brand{ order:2; align-self:flex-start; }
  nav.tg-nav{ order:3; width:100%; margin-top:4px; border-top:1px solid #e6e8ee; padding-top:8px; }
}

/* ============================================================================
   05) HERO
   ========================================================================== */
.tg-hero{
  position:relative; overflow:hidden;
  min-height: var(--tg-hero-min-h-sm);
  margin-bottom:40px; background:#0d1b2a;
}
@media (min-width:768px){  .tg-hero{ min-height: var(--tg-hero-min-h-md); } }
@media (min-width:1200px){ .tg-hero{ min-height: var(--tg-hero-min-h-lg); } }

.tg-hero .img-bg{
  position:absolute; inset:0; z-index:1;
  background-size:cover; background-position:center;
  filter: brightness(var(--tg-hero-img-brightness));
}
.tg-hero .overlay{
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; color:#fff;
  background: linear-gradient(180deg, var(--tg-hero-overlay-top), var(--tg-hero-overlay-bottom));
}
.tg-hero .wrap{
  padding-block: var(--tg-hero-pad-y-sm); text-align: var(--tg-hero-align);
  transform: translateY(var(--tg-hero-shim-y));
}
@media (min-width:768px){  .tg-hero .wrap{ padding-block: var(--tg-hero-pad-y-md); } }
@media (min-width:1200px){ .tg-hero .wrap{ padding-block: var(--tg-hero-pad-y-lg); } }

.tg-hero h1{
  font-weight:800; letter-spacing:.01em; margin:0 0 .35rem;
  font-size: var(--tg-hero-title-size); color:#fff !important;
  text-shadow:0 2px 8px rgba(0,0,0,.45); margin-left:auto; margin-right:auto; max-width:72ch;
}
.tg-hero .motto{
  margin:0 0 1rem; opacity:.98; font-size: var(--tg-hero-motto-size); color:#fff !important;
  text-shadow:0 2px 8px rgba(0,0,0,.45); margin-left:auto; margin-right:auto; max-width:72ch;
}
.tg-hero .cta-row{ display:flex; gap: var(--tg-hero-cta-gap); flex-wrap:wrap; justify-content:center; }

/* ============================================================================
   06) BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; border-radius:10px; padding:12px 18px; line-height:1.2;
  border:1px solid transparent; transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.btn:active{ transform:translateY(0); }
.btn.gold{ background:var(--tg-gold); color:#111; border-color:#9b7f1f; }
.btn.ghost{ background:#ffffff; color:#111; border-color:var(--line-strong); }
.btn.white{ background:#fff; color:#111; border:1px solid var(--line-strong); }
.btn.ghost:hover,.btn.white:hover,.btn.gold:hover{ box-shadow:var(--shadow); }

/* ============================================================================
   07) LAYOUT: WRAPPER + LEFT NAV + CONTENT
   ========================================================================== */
.tg-wrap{
  max-width:1100px; margin:0 auto;
  padding: calc(var(--tg-hero-overhang) + var(--tg-wrap-top-extra)) var(--tg-wrap-x) var(--tg-wrap-bottom) !important;
  position: relative; z-index: 1;
}
/* Pull first section closer to hero for tighter feel */
.tg-wrap .section:first-of-type{ margin-top: -6px; }
@media (max-width: 960px){ .tg-wrap .section:first-of-type{ margin-top: -2px; } }
/* Remove any injected hero spacer */
.tg-hero + .spacer, .hero-spacer{ height:0 !important; margin:0 !important; padding:0 !important; }

/* Optional sticky utility */
.tg-leftcard{ top:24px; }  /* requires position:sticky in page CSS */

/* Per-page hero spacing controls */
[data-hero-size="tall"]{ --tg-hero-overhang: 88px; }
@media (max-width: 960px){ [data-hero-size="tall"]{ --tg-hero-overhang: 120px; } }
[data-hero-gap="tighter"]{ --tg-wrap-top-extra: 4px; }
[data-hero-gap="looser"] { --tg-wrap-top-extra: 12px; }

/* Level-1 grid — slimmer leftnav, tighter gutter */
.tg-wrapper{
  display:grid; grid-template-columns:220px 1fr; gap:20px; margin-top:2px;
}
@media (max-width:991.98px){
  .tg-wrapper{ grid-template-columns:1fr; }
  .leftnav{ display:none; }
}

/* Leftnav card (slimmer) */
.leftnav{
  position:sticky; top:90px; align-self:start;
  background:var(--card); border:1px solid var(--line-strong);
  border-radius:12px; box-shadow:var(--shadow); padding:12px;
}
.leftnav h2{ font-size:.95rem; letter-spacing:.02em; color:var(--tg-blue); margin:0 0 .2rem; }
.leftnav p{ margin:0 0 .5rem; color:#475569; font-size:.9rem; }
.leftnav .nav{ display:flex; flex-direction:column; gap:5px; }
.leftnav .nav a{
  display:block; padding:8px 10px; border-radius:8px; text-decoration:none;
  color:#0b1e33; border:1px solid transparent; font-size:.92rem;
}
.leftnav .nav a:hover{ background:#f2f4f8; }
.leftnav .nav a.active{ border-color:var(--tg-blue); background:#eef3ff; color:var(--tg-blue); font-weight:600; }

/* ============================================================================
   08) CONTENT CARDS (SECTIONS)
   ========================================================================== */
.section-card{
  background:var(--card); border:1px solid var(--tg-card-border-default);
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:1.25rem; margin-bottom:28px;
}
.section-card + .section-card{ margin-top:22px; }
.section-card > h2{
  font-size: var(--tg-section-header-size); color:var(--tg-blue);
  font-weight:800; line-height:1.22; margin:0 0 .35rem;
}

/* ============================================================================
   09) QUICK TILE GRID + CARDS (mini cards)
   ========================================================================== */
.qs-grid{
  display:grid; grid-template-columns:1fr; row-gap:18px; column-gap:18px;
}
@media(min-width:768px){
  .qs-grid{ grid-template-columns:repeat(3,1fr); }                 /* 3-up tablet */
}
/* GLOBAL: 7-up across laptop & desktop (matches your brief) */
@media(min-width:992px){
  .qs-grid{ grid-template-columns:repeat(7,minmax(0,1fr)); }       /* 7-up laptop+ */
}

/* Extra-compact tiles for CITADEL sections */
#philosophy .qs-card,
#mind .qs-card{
  padding:10px; min-height:120px; border-radius:12px;
}
#philosophy .qs-card .title,
#mind .qs-card .title{
  font-size: calc(var(--tg-mini-title-size) - .16rem);
  line-height:1.15; margin:0 0 .18rem;
}
#philosophy .qs-card .desc,
#mind .qs-card .desc{
  font-size:.80rem; line-height:1.25; margin:0 0 .45rem;
}
#philosophy .qs-card .accent,
#mind .qs-card .accent{
  font-size: calc(var(--tg-accent-link-size) - .16rem); line-height:1.15;
}

/* Default mini cards */
.qs-card{
  background:#fff; border:1px solid var(--tg-card-border-default);
  border-radius:12px; box-shadow:var(--shadow-sm);
  padding:12px; transition:transform .2s, box-shadow .2s;
  display:flex; flex-direction:column; min-height:140px;
}
.qs-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.qs-card .title{
  font-size: calc(var(--tg-mini-title-size) - .04rem);
  font-weight:800; margin:0 0 .2rem; color:var(--tg-text); line-height:1.2;
}
.qs-card .desc{ margin:0 0 .6rem; color:var(--tg-muted); font-size:.85rem; }
.qs-card .accent{
  margin-top:auto; font-size: calc(var(--tg-accent-link-size) - .04rem);
  line-height:1.2; font-weight:700; color:var(--tg-text); text-decoration:none;
}
.qs-card .accent:hover{ text-decoration:underline; }

/* ============================================================================
   10) CARD BORDER COLOR VARIANTS
   ========================================================================== */
.section-card.is-info, .qs-card.is-info, .card-border--info { border-color:#60a5fa !important; }
.section-card.is-success, .qs-card.is-success, .card-border--success { border-color:#34d399 !important; }
.section-card.is-warn, .qs-card.is-warn, .card-border--warn { border-color:#f59e0b !important; }
.section-card.is-danger, .qs-card.is-danger, .card-border--danger { border-color:#ef4444 !important; }

/* ============================================================================
   11) EVALUATION ALERTS
   ========================================================================== */
.eval-alert{ border-radius:12px; padding:.9rem 1rem; border:1px solid; }
.eval-ok{ background:#ecfdf5; border-color:#10b981; color:#065f46; }
.eval-fail{ background:#fef2f2; border-color:#ef4444; color:#7f1d1d; }

/* ============================================================================
   12) FORMS (GLOBAL)
   ========================================================================== */
.tg-form{ display:grid; gap:16px; }
.tg-form .form-grid{ display:grid; gap:16px; }
.tg-form .form-grid.cols-1{ grid-template-columns: 1fr; }
.tg-form .form-grid.cols-2{ grid-template-columns: 1fr; }
.tg-form .form-grid.cols-3{ grid-template-columns: 1fr; }
@media (min-width: 768px){ .tg-form .form-grid.cols-2{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px){ .tg-form .form-grid.cols-3{ grid-template-columns: 2fr 1fr 1fr; } }
.tg-form .field{ display:flex; flex-direction:column; gap:6px; }
.tg-form .form-label{ font-weight:700; color:var(--tg-blue); font-size:.95rem; letter-spacing:.01em; }
.tg-form input[type="text"], .tg-form input[type="tel"], .tg-form input[type="email"], .tg-form input[type="number"], .tg-form select, .tg-form textarea{
  background:#fff; border:1px solid var(--line-strong); border-radius:10px;
  padding:10px 12px; font-size:1rem; color:#var(--tg-text);
  outline:none; transition:border-color .12s ease, box-shadow .12s ease;
}
.tg-form textarea{ min-height:110px; resize:vertical; }
.tg-form input:focus, .tg-form select:focus, .tg-form textarea:focus{ border-color:var(--tg-blue); box-shadow:0 0 0 3px rgba(0,32,88,.12); }
.tg-form .form-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* ============================================================================
   13) UTILITIES / MISC
   ========================================================================== */
.tg-hide{ display:none !important; }
.tg-muted{ color:#64748b; }
.tg-center{ text-align:center; }
.tg-right{ text-align:right; }
.section-card img, .qs-card img{ max-width:100%; height:auto; border-radius:10px; }
a:focus, .btn:focus, .leftnav .nav a:focus, .qs-card .accent:focus{ outline:2px solid #93c5fd; outline-offset:2px; }

/* ============================================================================
   14) PRINT
   ========================================================================== */
@media print{
  .tg-topbar,.tg-hero,.leftnav{ display:none !important; }
  body{ background:#fff; }
  .section-card{ box-shadow:none; border-color:#ddd; margin-bottom:16px; }
}

/* ============================================================================
   15) PAGE-SPECIFIC TWEAKS — JOIN
   ========================================================================== */
#main-content #how.section-card,
#main-content #resources.section-card { padding-top: .5rem; }
#main-content #how > h2,
#main-content #resources > h2 { margin-top: 0; margin-bottom: .75rem; line-height: 1.15; }

/* ============================================================================
   16) TABLES (GLOBAL, COMPACT & NUMERIC)
   ========================================================================== */
.tg-table{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff;
}
.tg-table thead th{ background:#F8FAFC; font-weight:800; color:var(--tg-text); }
.tg-table th, .tg-table td{ padding:.6rem .7rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; font-size:.95rem; }
.tg-table tr:last-child td{ border-bottom:none; }
.tg-table .muted{ color:var(--tg-muted); }
.tg-table .num{ text-align:right; font-variant-numeric:tabular-nums; }
.tg-table.is-dense th, .tg-table.is-dense td{ padding:.45rem .6rem; font-size:.9rem; }
.tg-table.is-striped tbody tr:nth-child(odd){ background:#fbfdff; }

/* ============================================================================
   17) PILLS / SMALL TOGGLES
   ========================================================================== */
.tg-pill{
  display:inline-block; border:1px solid var(--line);
  border-radius:999px; padding:.25rem .6rem; font-size:.85rem;
  color:#var(--tg-text); background:#F8FAFC; line-height:1;
}
.tg-pill[aria-pressed="true"], .tg-pill.is-on{
  background:var(--tg-blue); color:#fff; border-color:var(--tg-blue);
}
.tg-pills{ display:flex; gap:.4rem; flex-wrap:wrap; }

/* ============================================================================
   18) NOTICES / PLACEHOLDERS
   ========================================================================== */
.tg-notice{
  border:1px dashed var(--line); background:#F8FAFC; color:var(--tg-muted);
  padding:.8rem .9rem; border-radius:10px;
}

/* ============================================================================
   19) TINY SPARKLINE PLACEHOLDER
   ========================================================================== */
.tg-spark{ height:36px; display:block; }
.tg-spark svg{ width:100%; height:100%; }
.tg-spark path{ fill:none; stroke:var(--tg-text); stroke-width:2; }

/* ============================================================================
   20) BUTTON ROWS (UTILITY)
   ========================================================================== */
.btnrow{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }

/* ============================================================================
   21) Overflow guards (grid children, tables, iframes)
   - Prevent cards/tables/widgets from extending past the viewport.
   ========================================================================== */
.tg-wrapper .content, .tg-wrap .content, .tg-layout > * { min-width: 0; }  /* critical in CSS grid */
.section-card{ max-width:100%; }                                           /* cards never exceed viewport */
.section-card .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.section-card .table-wrap > table{ width:100%; max-width:100%; }
.tg-table th, .tg-table td, table.results th, table.results td{ overflow-wrap:anywhere; word-break:break-word; }
iframe, svg, canvas{ max-width:100%; }
html, body{ max-width:100%; overflow-x:hidden; }

/* ============================================================================
   22) COMPACT GRID UTILITIES (Level-2 layout helpers) — NEW
   - Replace page-local .row/.row-3/.row-6 with these global classes.
   - Pair with .gap-s / .gap-xs for spacing.
   ========================================================================== */
.grid-1{ display:grid; grid-template-columns:1fr; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); }
.grid-5{ display:grid; grid-template-columns:repeat(5,1fr); }
.grid-6{ display:grid; grid-template-columns:repeat(6,1fr); }

/* Tight gap helpers for very compact forms/cards */
.gap-s { gap:.5rem; }
.gap-xs{ gap:.35rem; }

/* Span helpers to avoid ad-hoc inline styles */
.span-2{ grid-column: span 2; }
.span-3{ grid-column: span 3; }
.span-4{ grid-column: span 4; }
.span-5{ grid-column: span 5; }
.span-6{ grid-column: span 6; }

/* Stack grids on small screens; remove enforced spans */
@media (max-width: 800px){
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6{ grid-template-columns:1fr; }
  .span-2, .span-3, .span-4, .span-5, .span-6{ grid-column:auto; }
}

/* Ensure grid children can shrink (prevents overflow in CSS grids) */
.grid-1 > *, .grid-2 > *, .grid-3 > *, .grid-4 > *,
.grid-5 > *, .grid-6 > * { min-width:0; }

/* ============================================================================
   23) DENSITY UTILITIES (text + inputs) — NEW
   - Use .tight / .micro to reduce text size; .tg-form.is-compact for inputs.
   ========================================================================== */
.tight{ font-size:.9rem; }
.micro{ font-size:.82rem; }

/* Compact form variant (smaller inputs sitewide where applied) */
.tg-form.is-compact .form-label{ font-size:.82rem; }
.tg-form.is-compact input,
.tg-form.is-compact select,
.tg-form.is-compact textarea{
  font-size:.9rem; padding:.45rem .55rem;
}

/* ============================================================================
   24) MINI PANELS (small info cards used in Live Results) — NEW
   ========================================================================== */
.mini{
  border:1px solid var(--line);
  border-radius:10px;
  padding:.6rem .7rem;
  background:#fff;
}
.mini h4{
  margin:.1rem 0 .4rem;
  font-size:.95rem;
  color:var(--tg-blue);
}
/* Ultra-compact table used inside .mini */
.mini table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.mini td{ padding:.15rem 0; vertical-align:middle; }
.mini .lab{ color:var(--tg-muted); width:52%; }
.mini .val{ text-align:right; font-variant-numeric:tabular-nums; }

/* ============================================================================
   25) SMALL BUTTONS + COMPACT BUTTON ROWS — NEW
   ========================================================================== */
.btn.sm{ padding:.4rem .6rem; font-size:.85rem; border-radius:8px; }
.btnrow.compact{ gap:.35rem; margin-top:.35rem; }

/* ============================================================================
   26) STOPWATCH READOUT (shared) — NEW
   ========================================================================== */
.clock{
  font-variant-numeric:tabular-nums;
  font-size:1.2rem;
  font-weight:800;
}

/* =============================================================================
   Path: /assets/tg/tg.core.css
   ============================================================================= */