/* ===========================================================================
   Tactical Grooming — unified design system.
   One stylesheet for all four applications: /, /portal, /info, /config.
   Premium black + charcoal, gold accents, restrained military detailing.
   =========================================================================== */

/* ---- Design tokens ------------------------------------------------------ */
:root {
  --tg-black:      #0a0a0b;
  --tg-charcoal:   #141417;
  --tg-charcoal-2: #1c1c21;
  --tg-charcoal-3: #26262d;
  --tg-line:       #32323b;
  --tg-line-soft:  #24242b;

  --tg-gold:       #c8a247;
  --tg-gold-bright:#e0bd63;
  --tg-gold-dim:   #8d7433;
  --tg-gold-wash:  rgba(200,162,71,.12);

  --tg-text:       #f2f2f4;
  --tg-text-2:     #b4b4bd;
  --tg-text-3:     #85858f;

  --tg-ok:         #4f9d69;
  --tg-ok-wash:    rgba(79,157,105,.14);
  --tg-warn:       #c9922f;
  --tg-warn-wash:  rgba(201,146,47,.14);
  --tg-bad:        #c05656;
  --tg-bad-wash:   rgba(192,86,86,.14);
  --tg-info-wash:  rgba(120,150,200,.12);

  --tg-r-sm: 6px;
  --tg-r:    10px;
  --tg-r-lg: 16px;

  --tg-s1: 4px;  --tg-s2: 8px;  --tg-s3: 12px; --tg-s4: 16px;
  --tg-s5: 24px; --tg-s6: 32px; --tg-s7: 48px; --tg-s8: 64px;

  --tg-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --tg-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --tg-shadow:    0 2px 8px rgba(0,0,0,.4);
  --tg-shadow-lg: 0 12px 40px rgba(0,0,0,.55);

  --tg-tap: 44px; /* minimum touch target */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--tg-black);
  color: var(--tg-text);
  font-family: var(--tg-font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---- Accessibility ------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--tg-gold-bright);
  outline-offset: 2px;
  border-radius: 3px;
}
.tg-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tg-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--tg-gold); color: #000; padding: var(--tg-s3) var(--tg-s4);
  font-weight: 600; border-radius: 0 0 var(--tg-r-sm) 0;
}
.tg-skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Typography --------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0 0 var(--tg-s3); line-height: 1.22; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.85rem); }
h2 { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem); }
h3 { font-size: 1.12rem; }
h4 { font-size: 1rem; }
p  { margin: 0 0 var(--tg-s3); color: var(--tg-text-2); }
a  { color: var(--tg-gold-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .tg-mono { font-family: var(--tg-mono); font-size: .9em; }

.tg-eyebrow {
  text-transform: uppercase; letter-spacing: .16em;
  font-size: .72rem; font-weight: 700; color: var(--tg-gold);
  margin: 0 0 var(--tg-s2);
}
.tg-lede { font-size: 1.08rem; color: var(--tg-text-2); max-width: 65ch; }
.tg-muted { color: var(--tg-text-3); }
.tg-small { font-size: .85rem; }

/* Military-inspired rule: a short gold bar, used sparingly. */
.tg-rule {
  width: 52px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--tg-gold), var(--tg-gold-dim));
  margin: 0 0 var(--tg-s4);
}

/* ---- Layout ------------------------------------------------------------- */
.tg-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--tg-s5); }
.tg-wrap-narrow { max-width: 780px; }
.tg-section { padding: var(--tg-s8) 0; }
.tg-section + .tg-section { border-top: 1px solid var(--tg-line-soft); }
.tg-hide { display: none !important; }

.tg-grid { display: grid; gap: var(--tg-s4); }
.tg-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.tg-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.tg-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) {
  .tg-grid-3, .tg-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .tg-grid-2, .tg-grid-3, .tg-grid-4 { grid-template-columns: 1fr; }
  .tg-wrap { padding: 0 var(--tg-s4); }
  .tg-section { padding: var(--tg-s6) 0; }
}

.tg-row { display: flex; gap: var(--tg-s3); flex-wrap: wrap; align-items: center; }
.tg-row-end { justify-content: flex-end; }
.tg-spread { display: flex; gap: var(--tg-s3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.tg-stack > * + * { margin-top: var(--tg-s4); }


/* ---- Sticky-header scroll offset ---------------------------------------
   The masthead is sticky, so any scroll that lands exactly on an element's
   top edge puts that edge underneath it. One token drives the offset for
   fragment navigation, programmatic scrolling and route changes, so no page
   needs its own spacer. Panels and headings keep the same offset when they
   are scrolled to individually. */
:root { --tg-head-h: 64px; }

html {
  scroll-padding-top: calc(var(--tg-head-h) + var(--tg-s4));
}

/* Any element a route change, anchor or script may scroll to. */
main, #main, .tg-card, .tg-app > *,
h1, h2, h3, [id], [tabindex="-1"] {
  scroll-margin-top: calc(var(--tg-head-h) + var(--tg-s4));
}

/* The masthead reports its real height, so the token stays true if the brand
   block ever grows. */
.tg-head-in { min-height: var(--tg-head-h); }

@media (max-width: 620px) {
  :root { --tg-head-h: 56px; }
}

/* ---- Masthead ----------------------------------------------------------- */
.tg-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,10,11,.93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--tg-line-soft);
}
.tg-head-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tg-s4); min-height: 64px;
}
.tg-brand { display: flex; align-items: center; gap: var(--tg-s3); font-weight: 700; color: var(--tg-text); }
.tg-brand:hover { text-decoration: none; }
.tg-mark {
  width: 34px; height: 34px; flex: none; border-radius: var(--tg-r-sm);
  background: linear-gradient(145deg, var(--tg-gold), var(--tg-gold-dim));
  color: #000; display: grid; place-items: center;
  font-weight: 800; font-size: .82rem; letter-spacing: .02em;
}
.tg-brand-t { display: flex; flex-direction: column; line-height: 1.15; }
.tg-brand-t b { font-size: .98rem; letter-spacing: .01em; }
.tg-brand-t span { font-size: .7rem; color: var(--tg-text-3); text-transform: uppercase; letter-spacing: .12em; }

/* ---- Navigation --------------------------------------------------------- */
.tg-nav { display: flex; gap: var(--tg-s1); flex-wrap: wrap; }
.tg-nav a, .tg-nav button {
  display: inline-flex; align-items: center; min-height: var(--tg-tap);
  padding: var(--tg-s2) var(--tg-s4);
  border-radius: var(--tg-r-sm); border: 1px solid transparent;
  background: transparent; color: var(--tg-text-2);
  font: inherit; font-size: .92rem; font-weight: 550; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.tg-nav a:hover, .tg-nav button:hover {
  background: var(--tg-charcoal-2); color: var(--tg-text); text-decoration: none;
}
.tg-nav [aria-current="page"], .tg-nav .is-active {
  background: var(--tg-gold-wash); color: var(--tg-gold-bright);
  border-color: rgba(200,162,71,.32);
}

/* Sidebar navigation for /info and /config */
.tg-app { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: var(--tg-s5); align-items: start; }
.tg-side {
  position: sticky; top: calc(var(--tg-head-h) + var(--tg-s4));
  background: var(--tg-charcoal); border: 1px solid var(--tg-line-soft);
  border-radius: var(--tg-r); padding: var(--tg-s3);
}
.tg-side h2 {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--tg-text-3); margin: var(--tg-s3) var(--tg-s2) var(--tg-s2);
}
.tg-side-nav { display: flex; flex-direction: column; gap: 2px; }
.tg-side-nav button {
  display: flex; align-items: center; gap: var(--tg-s2);
  width: 100%; text-align: left; min-height: var(--tg-tap);
  padding: var(--tg-s2) var(--tg-s3);
  border: 1px solid transparent; border-radius: var(--tg-r-sm);
  background: transparent; color: var(--tg-text-2);
  font: inherit; font-size: .92rem; cursor: pointer;
}
.tg-side-nav button:hover { background: var(--tg-charcoal-2); color: var(--tg-text); }
.tg-side-nav button.is-active {
  background: var(--tg-gold-wash); color: var(--tg-gold-bright);
  border-color: rgba(200,162,71,.3); font-weight: 600;
}
@media (max-width: 900px) {
  .tg-app { grid-template-columns: 1fr; }
  .tg-side { position: static; }
  .tg-side-nav { flex-direction: row; flex-wrap: wrap; }
  .tg-side-nav button { width: auto; }
}

/* ---- Squarespace embedded mode -----------------------------------------
   tg-embed.js sets .tg-embed on <html> when the document is framed. Inside a
   Squarespace iframe the standalone site chrome is redundant, so the masthead
   and footer are dropped and the outer padding collapses. Navigation is NOT
   removed: the sidebar/top navigation stay, so an embedded portal keeps every
   module and shared view. */
.tg-embed body { background: transparent; }
.tg-embed .tg-foot { display: none; }
/* The masthead loses its brand block (the host page already brands the page)
   but KEEPS the module navigation, so an embedded portal can still switch
   modules exactly as the standalone one does. */
.tg-embed .tg-head { position: static; background: transparent; border-top: 0; }
.tg-embed .tg-brand { display: none; }
.tg-embed .tg-head-in { justify-content: flex-start; }
.tg-embed .tg-wrap { padding-left: var(--tg-s3); padding-right: var(--tg-s3); }
.tg-embed #main { padding-top: var(--tg-s3) !important; padding-bottom: var(--tg-s3) !important; }

/* ---- Sidebar as an accessible drawer (opt-in via .tg-app-drawer) --------
   The desktop sidebar above is untouched. On narrow viewports the SAME
   sidebar markup becomes an off-canvas drawer: nothing is removed, every
   item stays reachable, and the toggle is a real button with
   aria-expanded/aria-controls so keyboard and screen-reader users get the
   same navigation as a pointer user. */
.tg-side-toggle { display: none; }
.tg-side-scrim { display: none; }
.tg-side-close { display: none; }

@media (max-width: 900px) {
  .tg-app-drawer .tg-side-toggle {
    display: inline-flex; align-items: center; gap: var(--tg-s2);
    min-height: var(--tg-tap); padding: var(--tg-s2) var(--tg-s4);
    margin-bottom: var(--tg-s3);
    border: 1px solid var(--tg-line-soft); border-radius: var(--tg-r-sm);
    background: var(--tg-charcoal); color: var(--tg-text);
    font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
  }
  .tg-app-drawer .tg-side-toggle .tg-side-toggle-cur {
    color: var(--tg-gold-bright); font-weight: 550;
  }

  /* Closed state: the drawer is off-canvas AND display-suppressed, so its
     controls are out of the tab order rather than merely invisible. */
  .tg-app-drawer .tg-side {
    position: fixed; z-index: 60; top: 0; left: 0; bottom: 0;
    width: min(310px, 86vw); overflow-y: auto;
    border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0;
    padding: var(--tg-s4) var(--tg-s3);
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .tg-app-drawer[data-drawer="closed"] .tg-side { display: none; }
  .tg-app-drawer[data-drawer="open"] .tg-side { transform: translateX(0); }
  .tg-app-drawer .tg-side-nav { flex-direction: column; }
  .tg-app-drawer .tg-side-nav button { width: 100%; }

  .tg-app-drawer[data-drawer="open"] .tg-side-scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(0,0,0,.6);
  }
  .tg-app-drawer .tg-side-close {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--tg-tap); min-width: var(--tg-tap);
    margin-bottom: var(--tg-s2);
    border: 1px solid var(--tg-line-soft); border-radius: var(--tg-r-sm);
    background: transparent; color: var(--tg-text-2);
    font: inherit; cursor: pointer;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tg-app-drawer .tg-side { transition: none; }
}

/* ---- Cards -------------------------------------------------------------- */
.tg-card {
  background: var(--tg-charcoal);
  border: 1px solid var(--tg-line-soft);
  border-radius: var(--tg-r);
  padding: var(--tg-s5);
}
.tg-card + .tg-card { margin-top: var(--tg-s4); }
.tg-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--tg-s3); flex-wrap: wrap; margin-bottom: var(--tg-s4);
}
.tg-card-head h2, .tg-card-head h3 { margin: 0; }
.tg-card-accent { border-top: 3px solid var(--tg-gold); }

.tg-stat { background: var(--tg-charcoal-2); border: 1px solid var(--tg-line-soft); border-radius: var(--tg-r); padding: var(--tg-s4); }
.tg-stat .k { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tg-text-3); }
.tg-stat .v { font-size: 1.9rem; font-weight: 700; color: var(--tg-gold-bright); line-height: 1.2; margin-top: var(--tg-s1); }
.tg-stat .s { font-size: .82rem; color: var(--tg-text-3); }

/* ---- Buttons ------------------------------------------------------------ */
.tg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tg-s2);
  min-height: var(--tg-tap); padding: var(--tg-s3) var(--tg-s5);
  border-radius: var(--tg-r-sm); border: 1px solid var(--tg-line);
  background: var(--tg-charcoal-2); color: var(--tg-text);
  font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, transform .08s;
  text-align: center;
}
.tg-btn:hover { background: var(--tg-charcoal-3); text-decoration: none; }
.tg-btn:active { transform: translateY(1px); }
.tg-btn[disabled], .tg-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.tg-btn-primary {
  background: linear-gradient(145deg, var(--tg-gold), var(--tg-gold-dim));
  border-color: var(--tg-gold-dim); color: #131006;
}
.tg-btn-primary:hover { background: linear-gradient(145deg, var(--tg-gold-bright), var(--tg-gold)); }
.tg-btn-ghost { background: transparent; }
.tg-btn-danger { border-color: rgba(192,86,86,.5); color: #e79393; background: var(--tg-bad-wash); }
.tg-btn-danger:hover { background: rgba(192,86,86,.24); }
.tg-btn-sm { min-height: 34px; padding: var(--tg-s1) var(--tg-s3); font-size: .85rem; }
.tg-btn-block { width: 100%; }

.tg-spin {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 2px solid rgba(0,0,0,.28); border-top-color: currentColor;
  animation: tg-rot .7s linear infinite;
}
@keyframes tg-rot { to { transform: rotate(360deg); } }

/* ---- Forms -------------------------------------------------------------- */
.tg-field { margin-bottom: var(--tg-s4); }
.tg-label { display: block; font-size: .85rem; font-weight: 600; color: var(--tg-text); margin-bottom: var(--tg-s2); }
.tg-hint { font-size: .8rem; color: var(--tg-text-3); margin-top: var(--tg-s1); }
.tg-req { color: var(--tg-gold); }

.tg-input, .tg-select, .tg-textarea {
  width: 100%; min-height: var(--tg-tap);
  padding: var(--tg-s3); font: inherit; font-size: .95rem;
  color: var(--tg-text); background: var(--tg-charcoal-2);
  border: 1px solid var(--tg-line); border-radius: var(--tg-r-sm);
  transition: border-color .15s, box-shadow .15s;
}
.tg-textarea { min-height: 96px; resize: vertical; }
.tg-input:focus, .tg-select:focus, .tg-textarea:focus {
  border-color: var(--tg-gold); box-shadow: 0 0 0 3px var(--tg-gold-wash); outline: none;
}
.tg-input::placeholder, .tg-textarea::placeholder { color: var(--tg-text-3); }
.tg-input[aria-invalid="true"], .tg-textarea[aria-invalid="true"] { border-color: var(--tg-bad); }
.tg-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tg-text-2) 50%),
                    linear-gradient(135deg, var(--tg-text-2) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: var(--tg-s6);
}
.tg-input:disabled, .tg-select:disabled, .tg-textarea:disabled {
  opacity: .55; cursor: not-allowed; background: var(--tg-charcoal);
}

/* Checkbox + radio */
.tg-check { display: flex; align-items: flex-start; gap: var(--tg-s3); min-height: var(--tg-tap); padding: var(--tg-s2) 0; cursor: pointer; }
.tg-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--tg-gold); cursor: pointer; }
.tg-check span { font-size: .92rem; color: var(--tg-text-2); }

.tg-radios { display: flex; flex-direction: column; gap: var(--tg-s1); }
.tg-radio {
  display: flex; align-items: center; gap: var(--tg-s3);
  min-height: var(--tg-tap); padding: var(--tg-s2) var(--tg-s3);
  border: 1px solid var(--tg-line); border-radius: var(--tg-r-sm);
  background: var(--tg-charcoal-2); cursor: pointer;
}
.tg-radio:hover { border-color: var(--tg-gold-dim); }
.tg-radio input { width: 18px; height: 18px; flex: none; accent-color: var(--tg-gold); cursor: pointer; }
.tg-radio:has(input:checked) { border-color: var(--tg-gold); background: var(--tg-gold-wash); }

/* Toggle switch */
.tg-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--tg-s4); min-height: var(--tg-tap); padding: var(--tg-s2) 0; }
.tg-toggle-t { font-size: .92rem; color: var(--tg-text); }
.tg-toggle-t small { display: block; color: var(--tg-text-3); font-size: .8rem; }
.tg-switch { position: relative; flex: none; width: 48px; height: 28px; }
.tg-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tg-switch span {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--tg-charcoal-3); border: 1px solid var(--tg-line);
  transition: background .18s, border-color .18s; pointer-events: none;
}
.tg-switch span::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--tg-text-2); transition: transform .18s, background .18s;
}
.tg-switch input:checked + span { background: var(--tg-gold-wash); border-color: var(--tg-gold); }
.tg-switch input:checked + span::after { transform: translateX(20px); background: var(--tg-gold); }
.tg-switch input:focus-visible + span { outline: 2px solid var(--tg-gold-bright); outline-offset: 2px; }
.tg-switch input:disabled + span { opacity: .45; }
.tg-switch input:disabled { cursor: not-allowed; }

/* ---- Tabs --------------------------------------------------------------- */
.tg-tabs {
  display: flex; gap: var(--tg-s1); flex-wrap: wrap;
  border-bottom: 1px solid var(--tg-line-soft); margin-bottom: var(--tg-s5);
}
.tg-tabs button {
  min-height: var(--tg-tap); padding: var(--tg-s3) var(--tg-s4);
  border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--tg-text-3);
  font: inherit; font-size: .94rem; font-weight: 600; cursor: pointer;
}
.tg-tabs button:hover { color: var(--tg-text); }
.tg-tabs button[aria-selected="true"] { color: var(--tg-gold-bright); border-bottom-color: var(--tg-gold); }

/* ---- Tables ------------------------------------------------------------- */
.tg-table-wrap { overflow-x: auto; border: 1px solid var(--tg-line-soft); border-radius: var(--tg-r); }
.tg-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 520px; }
.tg-table caption { text-align: left; padding: var(--tg-s3) var(--tg-s4); color: var(--tg-text-3); font-size: .84rem; }
.tg-table th, .tg-table td { padding: var(--tg-s3) var(--tg-s4); text-align: left; border-bottom: 1px solid var(--tg-line-soft); }
.tg-table th {
  background: var(--tg-charcoal-2); color: var(--tg-text-3);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700;
  position: sticky; top: 0;
}
.tg-table tbody tr:hover { background: rgba(255,255,255,.022); }
.tg-table tbody tr:last-child td { border-bottom: 0; }

/* ---- Status, badges, messages ------------------------------------------- */
.tg-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--tg-line); background: var(--tg-charcoal-3); color: var(--tg-text-2);
}
.tg-badge-ok   { background: var(--tg-ok-wash);   border-color: rgba(79,157,105,.42);  color: #7fc394; }
.tg-badge-warn { background: var(--tg-warn-wash); border-color: rgba(201,146,47,.42);  color: #e0b567; }
.tg-badge-bad  { background: var(--tg-bad-wash);  border-color: rgba(192,86,86,.42);   color: #e08d8d; }
.tg-badge-gold { background: var(--tg-gold-wash); border-color: rgba(200,162,71,.42);  color: var(--tg-gold-bright); }

.tg-msg {
  display: none; padding: var(--tg-s3) var(--tg-s4);
  border-radius: var(--tg-r-sm); border: 1px solid var(--tg-line);
  font-size: .92rem; margin: var(--tg-s3) 0;
}
.tg-msg.tg-show { display: block; }
.tg-msg b { display: block; margin-bottom: 2px; }
.tg-ok   { background: var(--tg-ok-wash);   border-color: rgba(79,157,105,.4); color: #8fcea4; }
.tg-bad  { background: var(--tg-bad-wash);  border-color: rgba(192,86,86,.4);  color: #eb9c9c; }
.tg-warnm{ background: var(--tg-warn-wash); border-color: rgba(201,146,47,.4); color: #e6c27e; }
.tg-infom{ background: var(--tg-info-wash); border-color: rgba(120,150,200,.34); color: #b9c9e4; }

/* Panel used for "not connected" / empty states. */
.tg-empty {
  border: 1px dashed var(--tg-line); border-radius: var(--tg-r);
  padding: var(--tg-s5); text-align: center; color: var(--tg-text-3);
  background: rgba(255,255,255,.012);
}
.tg-empty h3 { color: var(--tg-text-2); }
.tg-empty p { margin-bottom: 0; }

.tg-notice {
  display: flex; gap: var(--tg-s3); align-items: flex-start;
  padding: var(--tg-s4); border-radius: var(--tg-r);
  background: var(--tg-warn-wash); border: 1px solid rgba(201,146,47,.35);
  color: #e6c894; font-size: .9rem;
}
.tg-notice b { color: #f0d9a6; }

/* ---- Dialog ------------------------------------------------------------- */
.tg-dialog-back {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.72); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: var(--tg-s4);
}
.tg-dialog {
  width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto;
  background: var(--tg-charcoal); border: 1px solid var(--tg-line);
  border-radius: var(--tg-r-lg); box-shadow: var(--tg-shadow-lg);
  padding: var(--tg-s5);
}
.tg-dialog h2 { margin-top: 0; }
.tg-dialog-actions { display: flex; gap: var(--tg-s3); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--tg-s5); }
@media (max-width: 620px) {
  .tg-dialog-actions { flex-direction: column-reverse; }
  .tg-dialog-actions .tg-btn { width: 100%; }
}

/* ---- Toasts (live region) ----------------------------------------------- */
.tg-toasts {
  position: fixed; right: var(--tg-s4); bottom: var(--tg-s4); z-index: 150;
  display: flex; flex-direction: column; gap: var(--tg-s2);
  max-width: min(400px, calc(100vw - 32px));
}
.tg-toast {
  padding: var(--tg-s3) var(--tg-s4); border-radius: var(--tg-r-sm);
  background: var(--tg-charcoal-2); border: 1px solid var(--tg-line);
  box-shadow: var(--tg-shadow); font-size: .9rem; color: var(--tg-text);
  animation: tg-in .18s ease-out;
}
.tg-toast-ok  { border-left: 3px solid var(--tg-ok); }
.tg-toast-bad { border-left: 3px solid var(--tg-bad); }
.tg-toast-info{ border-left: 3px solid var(--tg-gold); }
@keyframes tg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Hero (root application) -------------------------------------------- */
.tg-hero {
  padding: var(--tg-s8) 0;
  background:
    radial-gradient(1000px 420px at 12% -8%, rgba(200,162,71,.13), transparent 62%),
    linear-gradient(180deg, var(--tg-charcoal), var(--tg-black));
  border-bottom: 1px solid var(--tg-line-soft);
}
.tg-hero h1 { max-width: 20ch; }
.tg-hero .tg-lede { font-size: 1.14rem; }
.tg-cta { display: flex; gap: var(--tg-s3); flex-wrap: wrap; margin-top: var(--tg-s5); }
@media (max-width: 480px) { .tg-cta .tg-btn { width: 100%; } }

.tg-module {
  background: var(--tg-charcoal); border: 1px solid var(--tg-line-soft);
  border-left: 3px solid var(--tg-gold);
  border-radius: var(--tg-r); padding: var(--tg-s5); height: 100%;
}
.tg-module h3 { color: var(--tg-gold-bright); }
.tg-module .x { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tg-text-3); margin-bottom: var(--tg-s3); }

.tg-steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--tg-s4); }
.tg-steps li { counter-increment: s; display: flex; gap: var(--tg-s4); align-items: flex-start; }
.tg-steps li::before {
  content: counter(s); flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .9rem;
  background: var(--tg-gold-wash); border: 1px solid rgba(200,162,71,.45); color: var(--tg-gold-bright);
}
.tg-steps b { display: block; color: var(--tg-text); }
.tg-steps span { color: var(--tg-text-2); font-size: .93rem; }

/* ---- Footer ------------------------------------------------------------- */
.tg-foot {
  border-top: 1px solid var(--tg-line-soft);
  padding: var(--tg-s6) 0; margin-top: var(--tg-s7);
  color: var(--tg-text-3); font-size: .86rem;
}

/* ---- Auth shell (signed-out /info) -------------------------------------- */
.tg-auth { min-height: calc(100vh - 64px); display: grid; place-items: center; padding: var(--tg-s6) var(--tg-s4); }
.tg-auth-card { width: 100%; max-width: 430px; }

/* ---- Definition list ---------------------------------------------------- */
.tg-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--tg-s2) var(--tg-s5); margin: 0; font-size: .92rem; }
.tg-dl dt { color: var(--tg-text-3); }
.tg-dl dd { margin: 0; color: var(--tg-text); }
@media (max-width: 560px) { .tg-dl { grid-template-columns: 1fr; gap: 2px; } .tg-dl dd { margin-bottom: var(--tg-s2); } }

/* ---- Long value wrapping ------------------------------------------------
 * Card identifiers, e-mail addresses, UUIDs and reward keys are long unbroken
 * strings. Without this they push the layout sideways on a phone instead of
 * wrapping, which is the most common mobile overflow defect. */
.tg-dl dd, .tg-kv-v, .tg-val, .tg-card p, .tg-tl-note, td, th {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---- Print -------------------------------------------------------------- */
@media print {
  .tg-head, .tg-side, .tg-toasts, .tg-cta { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Product image placeholder: plainly branded, never posing as a photo. */
.tg-shop-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--tg-s2);
  width: 100%; height: 160px; margin-bottom: var(--tg-s3);
  border: 1px dashed var(--tg-line);
  border-radius: 8px;
  background:
    repeating-linear-gradient(135deg,
      var(--tg-charcoal-2) 0 10px,
      var(--tg-charcoal) 10px 20px);
}


/* ===================================================================
   TG_BOOK_FULLCALENDAR_V1
   FullCalendar owns the calendar mechanics; this only dresses it in
   Tactical Grooming. Gold is an accent for meaning (selected, focus,
   available, primary), never a border on everything.
   =================================================================== */

/* Booking workspace: a seven-column month needs real width. */
.tg-book-wide {
  width: 100%;
  max-width: 1050px;
  margin-left: auto;
  margin-right: auto;
}

.tg-fc-wrap { width: 100%; max-width: 1050px; margin-left: auto; margin-right: auto; }

.tg-fc-host {
  --tg-fc-line: #2a2a2e;
  --tg-fc-dim: #8b8b93;
  --tg-fc-gold: #c8a049;
  --tg-fc-ink: #ececef;
}

/* Structure: understated charcoal, not gold. */
.tg-fc-host.fc {
  background: transparent;
  color: var(--tg-fc-ink);
  font-size: 15px;
}
.tg-fc-host.fc .fc-scrollgrid,
.tg-fc-host.fc .fc-scrollgrid td,
.tg-fc-host.fc .fc-scrollgrid th {
  border-color: var(--tg-fc-line);
}
.tg-fc-host.fc .fc-scrollgrid { border-radius: 10px; overflow: hidden; }

/* Month / year heading. */
.tg-fc-host.fc .fc-toolbar-title {
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: .2px;
  color: var(--tg-fc-ink);
}
.tg-fc-host.fc .fc-toolbar.fc-header-toolbar { margin-bottom: 14px; }

/* Navigation: primary interaction, so gold on hover/focus. */
.tg-fc-host.fc .fc-button-primary {
  background: #1b1b1f;
  border: 1px solid var(--tg-fc-line);
  color: var(--tg-fc-ink);
  border-radius: 8px;
  padding: 8px 12px;
  min-height: 40px;
  min-width: 44px;
  box-shadow: none;
  text-transform: none;
  font-weight: 600;
}
.tg-fc-host.fc .fc-button-primary:hover:not(:disabled) {
  background: #232329;
  border-color: var(--tg-fc-gold);
  color: #fff;
}
.tg-fc-host.fc .fc-button-primary:focus-visible {
  outline: 2px solid var(--tg-fc-gold);
  outline-offset: 2px;
  box-shadow: none;
}
.tg-fc-host.fc .fc-button-primary:disabled {
  background: #141417;
  border-color: var(--tg-fc-line);
  color: #55555c;
  opacity: 1;
}

/* Weekday labels: readable, quiet. */
.tg-fc-host.fc .fc-col-header-cell {
  background: #17171a;
  padding: 10px 0;
}
.tg-fc-host.fc .fc-col-header-cell-cushion {
  color: var(--tg-fc-dim);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 4px;
}

/* Day cells. */
.tg-fc-host.fc .fc-daygrid-day { background: #141417; transition: background .12s ease; }
.tg-fc-host.fc .fc-daygrid-day-frame { min-height: 62px; padding: 4px; }
.tg-fc-host.fc .fc-daygrid-day-number {
  color: var(--tg-fc-dim);
  font-size: .95rem;
  padding: 6px 8px;
  width: 100%;
  text-align: center;
}

/* TODAY: outlined, distinct from selected. */
.tg-fc-host.fc .fc-day-today { background: #1b1b20 !important; }
.tg-fc-host.fc .fc-day-today .fc-daygrid-day-number {
  color: var(--tg-fc-ink);
  font-weight: 700;
  position: relative;
}
.tg-fc-host.fc .fc-day-today .fc-daygrid-day-number::after {
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 2px; width: 16px; height: 2px;
  background: var(--tg-fc-dim);
  border-radius: 2px;
}

/* AVAILABLE: real Square openings. Interactive, subtly lifted. */
/* TG_BOOK_LEGEND_V1 -- Okabe-Ito hues, chosen because they stay separable
   under deuteranopia, protanopia and tritanopia. Colour is nonetheless never
   the only signal: available is a SOLID FILL, no-availability is an OUTLINE
   with a dot and no fill, closed is neutral grey with a STRIKETHROUGH. Remove
   all three colours and the states are still told apart by shape.
   Contrast against the #141417 day cell: green 5.4:1, orange 8.2:1, grey
   5.1:1, all above the 3:1 that WCAG 1.4.11 asks of a non-text indicator. */
.tg-fc-host {
  --tg-fc-open:   #009E73;  /* Okabe-Ito bluish green */
  --tg-fc-noavail:#E69F00;  /* Okabe-Ito orange */
  --tg-fc-shut:   #85858f;  /* design-system neutral, no chroma */
}

.tg-fc-host.fc .tg-fc-available { cursor: pointer; background: #141417; }
/* AVAILABLE: solid fill, normal weight. */
.tg-fc-host.fc .tg-fc-available .fc-daygrid-day-number {
  background: var(--tg-fc-open);
  color: #04140f;
  font-weight: 500;
  border-radius: var(--tg-r-sm);
}
.tg-fc-host.fc .tg-fc-available:hover { background: #24291f; }
.tg-fc-host.fc .tg-fc-available:hover .fc-daygrid-day-number { color: #fff; }

/* SELECTED: the one place gold is filled in, plus a non-colour cue. */
.tg-fc-host.fc .tg-fc-selected { background: #2a2413 !important; }
.tg-fc-host.fc .tg-fc-selected .fc-daygrid-day-number {
  color: var(--tg-fc-gold);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tg-fc-host.fc .tg-fc-selected .fc-daygrid-day-frame {
  box-shadow: inset 0 0 0 2px var(--tg-fc-gold);
  border-radius: 6px;
}

/* LOADING: explicitly unknown, never "closed". */
.tg-fc-host.fc .tg-fc-loading .fc-daygrid-day-number {
  color: #5c5c64;
}
.tg-fc-host.fc .tg-fc-loading .fc-daygrid-day-frame {
  background-image: linear-gradient(100deg, transparent 38%, rgba(200,160,73,.10) 50%, transparent 62%);
  background-size: 220% 100%;
  animation: tgFcShimmer 1.15s linear infinite;
  border-radius: 6px;
}
@keyframes tgFcShimmer { from { background-position: 180% 0; } to { background-position: -40% 0; } }

/* UNKNOWN: the availability query failed. Not selectable, and deliberately
   NOT styled like an unavailable day -- nothing is known about these dates,
   so they must not read as "closed". */
.tg-fc-host.fc .tg-fc-unknown { cursor: default; background: #141417; }
.tg-fc-host.fc .tg-fc-unknown .fc-daygrid-day-number {
  color: #6b6b74;
  border-bottom: 1px dotted #6b6b74;
}

/* UNAVAILABLE / PAST: clearly not selectable, by more than colour. */
/* NO AVAILABILITY: outline plus a dot, deliberately NO fill, so it cannot be
   mistaken for the filled available state in a greyscale rendering. */
.tg-fc-host.fc .tg-fc-noavail { cursor: default; background: #141417; }
.tg-fc-host.fc .tg-fc-noavail .fc-daygrid-day-number {
  background: transparent;
  color: var(--tg-fc-noavail);
  border: 1px solid var(--tg-fc-noavail);
  border-radius: var(--tg-r-sm);
  position: relative;
}
.tg-fc-host.fc .tg-fc-noavail .fc-daygrid-day-frame::after {
  content: '';
  display: block;
  width: 5px; height: 5px;
  margin: 3px auto 0;
  border-radius: 50%;
  background: var(--tg-fc-noavail);
}

/* CLOSED: neutral and struck through. No chromatic colour at all, because
   "we are shut that day" is not a state the eye should hunt for. */
.tg-fc-host.fc .tg-fc-closed { cursor: default; background: #101013; }
.tg-fc-host.fc .tg-fc-closed .fc-daygrid-day-number {
  background: transparent;
  color: var(--tg-fc-shut);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* TG_BOOK_LEGEND_V1 -- the generic disabled rule outranks the state rules on
   specificity, so without these exclusions it repaints a no-availability day
   grey and struck through, making it indistinguishable from a closed day.
   Only PAST days fall through to it. */
.tg-fc-host.fc .fc-daygrid-day[aria-disabled="true"]:not(.tg-fc-noavail):not(.tg-fc-closed):not(.tg-fc-unknown) { cursor: default; background: #101013; }
.tg-fc-host.fc .fc-daygrid-day[aria-disabled="true"] { cursor: default; }
.tg-fc-host.fc .fc-daygrid-day[aria-disabled="true"]:not(.tg-fc-noavail):not(.tg-fc-closed):not(.tg-fc-unknown) .fc-daygrid-day-number {
  color: #4a4a52;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.tg-fc-host.fc .fc-day-past .fc-daygrid-day-number { color: #3f3f46; }

/* Keyboard focus must always be visible. */
.tg-fc-host.fc a:focus-visible,
.tg-fc-host.fc td:focus-visible {
  outline: 2px solid var(--tg-fc-gold);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .tg-fc-host.fc .tg-fc-loading .fc-daygrid-day-frame { animation: none; }
}

/* ---- Mobile: keep a real seven-column month, just tighter. ---- */
@media (max-width: 560px) {
  .tg-fc-host.fc { font-size: 13px; }
  .tg-fc-host.fc .fc-daygrid-day-frame { min-height: 46px; padding: 2px; }
  .tg-fc-host.fc .fc-daygrid-day-number { padding: 5px 2px; font-size: .9rem; }
  .tg-fc-host.fc .fc-col-header-cell-cushion { font-size: .66rem; letter-spacing: .04em; padding: 2px; }
  .tg-fc-host.fc .fc-toolbar-title { font-size: 1.02rem; }
  .tg-fc-host.fc .fc-button-primary { padding: 7px 10px; min-height: 40px; }
  .tg-fc-host.fc .fc-toolbar.fc-header-toolbar { gap: 6px; margin-bottom: 10px; }
}

/* 320px: the tightest supported width. No horizontal overflow. */
@media (max-width: 360px) {
  .tg-fc-host.fc { font-size: 12px; }
  .tg-fc-host.fc .fc-daygrid-day-frame { min-height: 40px; }
  .tg-fc-host.fc .fc-daygrid-day-number { padding: 4px 1px; font-size: .84rem; }
  .tg-fc-host.fc .fc-col-header-cell-cushion { font-size: .6rem; letter-spacing: 0; }
  .tg-fc-host.fc .fc-toolbar-title { font-size: .95rem; }
  .tg-fc-host.fc .fc-button-primary { padding: 6px 8px; min-width: 40px; }
}

/* The calendar never overflows its card at any width. */
/* Legend. Each swatch is paired with its own text, so the key is readable
   with colour ignored entirely. */
.tg-legend {
  list-style: none;
  margin: var(--tg-s3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-s2) var(--tg-s4);
}
.tg-legend-item {
  display: flex;
  align-items: center;
  gap: var(--tg-s2);
  font-size: .82rem;
  color: var(--tg-text-2);
}
.tg-legend-sw {
  width: 18px; height: 18px;
  border-radius: var(--tg-r-sm);
  flex: 0 0 auto;
  position: relative;
}
.tg-legend-avail { background: #009E73; }
.tg-legend-noavail {
  background: transparent;
  border: 1px solid #E69F00;
}
.tg-legend-noavail::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #E69F00;
}
.tg-legend-closed {
  background: transparent;
  border: 1px solid #85858f;
}
.tg-legend-closed::after {
  content: '';
  position: absolute;
  left: 2px; right: 2px; top: 50%;
  height: 1.5px;
  margin-top: -.75px;
  background: #85858f;
}

.tg-fc-host, .tg-fc-host.fc, .tg-fc-host.fc-view-harness { max-width: 100%; }
.tg-fc-host table { width: 100% !important; table-layout: fixed; }


/* ===================================================================
   TG_SHOP_CARD_V1 -- S.H.O.P. product cards
   Equal card heights inside a row, and title / description / price /
   control on the same line across cards no matter how the title wraps.
   The image tile is a deliberate light surface: the product photos are
   shot on white, so the tile makes that intentional instead of reading
   as a cutout pasted onto the dark card.
   =================================================================== */
.tg-grid-3 > .tg-shop-card, .tg-grid > .tg-shop-card { height: 100%; }

.tg-shop-card {
  display: flex; flex-direction: column; gap: var(--tg-s3);
  height: 100%;
}

.tg-shop-media {
  flex: none;
  width: 100%; aspect-ratio: 1 / 1;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: #f2f2ef;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
}
.tg-shop-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tg-shop-media-empty {
  flex-direction: column; gap: var(--tg-s2);
  background: repeating-linear-gradient(135deg,
    var(--tg-charcoal-2) 0 10px, var(--tg-charcoal) 10px 20px);
  border: 1px dashed var(--tg-line);
}

/* Two lines reserved for the title and three for the description, so a
   one-line title and a three-line title produce the same card. */
.tg-shop-title {
  margin: 0;
  font-size: 1.02rem; line-height: 1.3;
  min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tg-shop-desc {
  margin: 0; line-height: 1.45;
  min-height: 4.35em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Everything the customer acts on sits at the bottom of the card. */
.tg-shop-foot {
  margin-top: auto;
  display: flex; flex-direction: column; gap: var(--tg-s3);
}

.tg-shop-size {
  width: 100%; min-height: var(--tg-tap);
  padding: var(--tg-s2) var(--tg-s3);
  background: var(--tg-charcoal-2); color: var(--tg-text);
  border: 1px solid var(--tg-line-soft); border-radius: var(--tg-r-sm);
  font: inherit;
}
.tg-shop-size:focus-visible { outline: 2px solid var(--tg-gold); outline-offset: 2px; }

.tg-shop-price { margin: 0; font-weight: 600; font-size: 1.08rem; color: var(--tg-text); }

/* TG_SHOP_CART_V1 -- cart view and header count. */
.tg-nav-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tg-nav-cart-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--tg-gold);
  color: #17140c;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}
.tg-cart-list { display: flex; flex-direction: column; gap: 14px; }
.tg-cart-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 14px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tg-line-soft);
}
.tg-cart-row:last-child { border-bottom: 0; padding-bottom: 0; }
.tg-cart-media {
  width: 96px;
  height: 96px;
  border-radius: 10px;
  background: #f4f2ee;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tg-cart-main { min-width: 0; }
.tg-cart-name { margin: 0 0 4px; font-weight: 600; }
.tg-cart-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.tg-cart-qty { display: inline-flex; align-items: center; gap: 8px; }
.tg-cart-qty-n { min-width: 2ch; text-align: center; font-weight: 600; }
.tg-cart-total {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--tg-line-soft);
}
.tg-cart-subtotal { margin: 0; font-size: 1.15rem; font-weight: 700; }
@media (max-width: 560px) {
  .tg-cart-row { grid-template-columns: 72px 1fr; }
  .tg-cart-media { width: 72px; height: 72px; }
  .tg-cart-side { grid-column: 1 / -1; align-items: flex-start; }
}

.tg-shop-sold {
  display: inline-flex; align-items: center; gap: var(--tg-s2);
  padding: var(--tg-s2) var(--tg-s3);
  border: 1px solid var(--tg-line-soft); border-radius: var(--tg-r-sm);
  color: var(--tg-text-3); font-size: .9rem;
}

/* --- Customer picker / typeahead (CID2) ---------------------------------- */
.tg-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tg-ta { position: relative; }
.tg-ta-list {
  position: absolute; z-index: 40; top: calc(100% + 2px); left: 0; right: 0;
  margin: 0; padding: var(--tg-s1) 0; list-style: none; max-height: 20rem;
  overflow-y: auto; background: var(--tg-surface, #fff);
  border: 1px solid var(--tg-border, #d0d0d0); border-radius: var(--tg-r2, 6px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
.tg-ta-item {
  display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  padding: var(--tg-s2) var(--tg-s3);
}
.tg-ta-item.is-active, .tg-ta-item:hover { background: var(--tg-surface-2, #f1f1f1); }
.tg-ta-name { font-weight: 600; font-size: .92rem; color: var(--tg-text); }
.tg-ta-meta { font-size: .8rem; color: var(--tg-text-3); }
.tg-chosen {
  display: flex; align-items: center; justify-content: space-between; gap: var(--tg-s3);
  padding: var(--tg-s2) var(--tg-s3); border: 1px solid var(--tg-border, #d0d0d0);
  border-radius: var(--tg-r2, 6px); background: var(--tg-surface-2, #f7f7f7);
}
.tg-chosen-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tg-chosen-name { font-weight: 600; color: var(--tg-text); }
.tg-chosen-meta {
  font-size: .8rem; color: var(--tg-text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* TG_GAME_NAVCSS_V1 -- G.A.M.E. lives in its own document, so its navigation
   entries are real links instead of view-switch buttons. The sidebar only
   styled `button`, which left those links unstyled and effectively invisible.
   These rules give an anchor in either navigation the exact same appearance as
   the buttons beside it, so one entry does not look different for the sole
   reason that it leads to another page. */
.tg-side-nav a {
  display: flex; align-items: center; gap: var(--tg-s2);
  width: 100%; text-align: left; min-height: var(--tg-tap);
  padding: var(--tg-s2) var(--tg-s3);
  border: 1px solid transparent; border-radius: var(--tg-r-sm);
  background: transparent; color: var(--tg-text-2);
  font: inherit; font-size: .92rem; cursor: pointer;
  text-decoration: none;
}
.tg-side-nav a:hover {
  background: var(--tg-charcoal-2); color: var(--tg-text);
  text-decoration: none;
}
.tg-side-nav a.is-active {
  background: var(--tg-gold-wash); color: var(--tg-gold-bright);
  border-color: rgba(200,162,71,.3); font-weight: 600;
}
@media (max-width: 900px) {
  .tg-side-nav a { width: auto; }
  .tg-app-drawer .tg-side-nav a { width: 100%; }
}

/* ===========================================================================
   TG_METRICS_SECTION_V1 — far-left section rail, and inline charts.

   Additive only. No existing selector is modified: .tg-app keeps its original
   two-column rule and is overridden only when .tg-app-rail is also present,
   so every other page that uses .tg-app is unaffected.
   =========================================================================== */

/* Three columns: section rail, section menu, content. */
.tg-app-rail {
  grid-template-columns: 168px 230px minmax(0, 1fr);
  gap: var(--tg-s4);
}

.tg-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 16px;
  padding-right: var(--tg-s3);
  border-right: 1px solid var(--tg-line-soft);
}

.tg-rail-btn {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: var(--tg-radius, 8px);
  background: transparent;
  color: var(--tg-text-dim, #9aa0a6);
  font: inherit;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.tg-rail-btn:hover {
  background: var(--tg-charcoal-2);
  color: var(--tg-text);
}

.tg-rail-btn.is-active {
  background: var(--tg-charcoal-2);
  border-color: var(--tg-gold, #c9a227);
  color: var(--tg-gold, #c9a227);
}

.tg-rail-btn:focus-visible {
  outline: 2px solid var(--tg-gold, #c9a227);
  outline-offset: 2px;
}

/* Stack on narrow screens: the rail becomes a horizontal strip above the menu,
   matching how .tg-side already collapses. */
@media (max-width: 900px) {
  .tg-app-rail { grid-template-columns: 1fr; }
  .tg-rail {
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--tg-line-soft);
    padding: 0 0 var(--tg-s3) 0;
  }
  .tg-rail-btn { width: auto; }
}

/* ------------------------------------------------------------- statistics */
.tg-stat-n {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--tg-text);
}
.tg-stat-n.is-ok  { color: var(--tg-ok, #4caf7d); }
.tg-stat-n.is-bad { color: var(--tg-bad, #d9534f); }

/* ----------------------------------------------------------- bar charts -- */
.tg-chart-bars { display: flex; flex-direction: column; gap: 7px; }

.tg-chart-bar-row {
  display: grid;
  grid-template-columns: minmax(90px, 158px) minmax(0, 1fr) max-content;
  gap: var(--tg-s3);
  align-items: center;
  font-size: .9rem;
}

.tg-chart-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tg-text-dim, #9aa0a6);
}

.tg-chart-bar-track {
  display: block;
  height: 16px;
  border-radius: 3px;
  background: var(--tg-charcoal-2);
  overflow: hidden;
}

.tg-chart-bar-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--tg-gold, #c9a227);
  min-width: 2px;
}
.tg-chart-bar-fill.is-ok   { background: var(--tg-ok, #4caf7d); }
.tg-chart-bar-fill.is-bad  { background: var(--tg-bad, #d9534f); }
.tg-chart-bar-fill.is-warn { background: #d98b28; }

.tg-chart-bar-value {
  font-variant-numeric: tabular-nums;
  color: var(--tg-text);
  font-weight: 600;
}

/* ---------------------------------------------------------- line charts -- */
.tg-chart { width: 100%; overflow-x: auto; }

.tg-chart-svg {
  width: 100%;
  min-width: 420px;
  height: auto;
  color: var(--tg-text-dim, #9aa0a6);
  display: block;
}

.tg-chart-line { stroke: var(--tg-gold, #c9a227); }
.tg-chart-line.is-ok   { stroke: var(--tg-ok, #4caf7d); }
.tg-chart-line.is-bad  { stroke: var(--tg-bad, #d9534f); }
.tg-chart-line.is-warn { stroke: #d98b28; }
.tg-chart-line.is-gold { stroke: var(--tg-gold, #c9a227); }

.tg-chart-dot { fill: var(--tg-gold, #c9a227); }
.tg-chart-dot.is-ok   { fill: var(--tg-ok, #4caf7d); }
.tg-chart-dot.is-bad  { fill: var(--tg-bad, #d9534f); }
.tg-chart-dot.is-warn { fill: #d98b28; }
.tg-chart-dot.is-gold { fill: var(--tg-gold, #c9a227); }

.tg-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-s3);
  margin-top: var(--tg-s3);
  font-size: .85rem;
  color: var(--tg-text-dim, #9aa0a6);
}
.tg-chart-legend-col { flex-direction: column; gap: 6px; margin-top: 0; }

.tg-chart-key { display: inline-flex; align-items: center; gap: 6px; }

.tg-chart-swatch {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--tg-gold, #c9a227);
  display: inline-block;
}
.tg-chart-swatch.is-ok   { background: var(--tg-ok, #4caf7d); }
.tg-chart-swatch.is-bad  { background: var(--tg-bad, #d9534f); }
.tg-chart-swatch.is-warn { background: #d98b28; }
.tg-chart-swatch.is-gold { background: var(--tg-gold, #c9a227); }

/* --------------------------------------------------------------- donut --- */
.tg-donut-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-s5);
  align-items: center;
}
.tg-donut { width: 160px; height: 160px; display: block; }
.tg-donut-seg { stroke: var(--tg-gold, #c9a227); }
.tg-donut-seg.is-ok   { stroke: var(--tg-ok, #4caf7d); }
.tg-donut-seg.is-bad  { stroke: var(--tg-bad, #d9534f); }
.tg-donut-seg.is-warn { stroke: #d98b28; }
.tg-donut-seg.is-gold { stroke: var(--tg-gold, #c9a227); }

/* ------------------------------------------------------------ findings --- */
.tg-findings { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.tg-findings li { line-height: 1.5; }

@media print {
  .tg-rail { display: none !important; }
}

/* ===========================================================================
   TG_METRICS_V2 — filter bar, sortable tables, collapsible panels, pager,
   and the barber-tier copy restriction.

   Additive only: every selector here is new. Nothing from the Daily
   Operations styling is modified.
   =========================================================================== */

/* ------------------------------------------------------------ filter bar */
.tg-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-s4);
  padding: var(--tg-s3) var(--tg-s4);
  margin-bottom: var(--tg-s4);
  border: 1px solid var(--tg-line-soft);
  border-radius: var(--tg-radius, 8px);
  background: var(--tg-charcoal-1, #16181a);
  align-items: flex-start;
  position: sticky;
  top: 0;
  z-index: 5;
}

.tg-filter-group { display: flex; flex-direction: column; gap: 6px; }

.tg-filter-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tg-text-dim, #9aa0a6);
  font-weight: 600;
}

.tg-chipset { display: flex; flex-wrap: wrap; gap: 4px; }

.tg-chip {
  appearance: none;
  -webkit-appearance: none;
  padding: 5px 11px;
  font: inherit;
  font-size: .84rem;
  line-height: 1.3;
  border: 1px solid var(--tg-line-soft);
  border-radius: 999px;
  background: transparent;
  color: var(--tg-text-dim, #9aa0a6);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.tg-chip:hover { background: var(--tg-charcoal-2); color: var(--tg-text); }
.tg-chip.is-active {
  background: var(--tg-gold, #c9a227);
  border-color: var(--tg-gold, #c9a227);
  color: #15171a;
  font-weight: 600;
}
.tg-chip.is-muted { opacity: .55; font-style: italic; }
.tg-chip:focus-visible { outline: 2px solid var(--tg-gold, #c9a227); outline-offset: 2px; }

/* -------------------------------------------------------- sortable tables */
.tg-table-wrap { width: 100%; overflow-x: auto; }

.tg-table-sort { width: 100%; border-collapse: collapse; font-size: .9rem; }

.tg-table-sort th,
.tg-table-sort td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--tg-line-soft);
  white-space: nowrap;
}

.tg-table-sort thead th {
  position: sticky;
  top: 0;
  background: var(--tg-charcoal-1, #16181a);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tg-text-dim, #9aa0a6);
  z-index: 1;
}

.tg-th-sort { cursor: pointer; user-select: none; }
.tg-th-sort:hover { color: var(--tg-text); }
.tg-th-sort.is-sorted { color: var(--tg-gold, #c9a227); }

.tg-table-sort tbody tr:hover { background: var(--tg-charcoal-2); }

/* --------------------------------------------------------- collapsibles */
.tg-collapse { padding: 0; overflow: hidden; }

.tg-collapse-head {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 18px;
  font: inherit;
  font-weight: 600;
  background: transparent;
  border: 0;
  color: var(--tg-text);
  cursor: pointer;
}
.tg-collapse-head:hover { background: var(--tg-charcoal-2); }
.tg-collapse-head.is-open { border-bottom: 1px solid var(--tg-line-soft); }
.tg-collapse-head:focus-visible { outline: 2px solid var(--tg-gold, #c9a227); outline-offset: -2px; }

.tg-collapse-body { padding: var(--tg-s4); }

/* ---------------------------------------------------------------- pager */
.tg-pager {
  display: flex;
  align-items: center;
  gap: var(--tg-s3);
  padding: 10px 14px;
  border: 1px solid var(--tg-line-soft);
  border-radius: var(--tg-radius, 8px);
  background: var(--tg-charcoal-1, #16181a);
}
.tg-pager-label { font-size: .88rem; color: var(--tg-text-dim, #9aa0a6); }
.tg-pager button[disabled] { opacity: .4; cursor: not-allowed; }

/* --------------------------------------------- barber-tier copy restriction
   Friction, not security. The real control is server-side: a barber is never
   sent another barber's clients. This only removes the easy paths — select,
   copy, right-click, drag. */
[data-noselect] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
[data-noselect] * { -webkit-user-drag: none; }

@media print {
  [data-noselect] { display: none !important; }
  .tg-filterbar { display: none !important; }
}

/* ===========================================================================
   TG_METRICS_V3 — data-entry forms for the Financial inputs tab.
   Additive only; every selector here is new.
   =========================================================================== */

.tg-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--tg-s3) var(--tg-s4);
  align-items: end;
  padding: var(--tg-s4) 0;
  margin-bottom: var(--tg-s4);
  border-bottom: 1px solid var(--tg-line-soft);
}

.tg-form-grid label { display: flex; flex-direction: column; gap: 5px; }

.tg-form-grid .tg-input {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: .92rem;
  color: var(--tg-text);
  background: var(--tg-charcoal-2);
  border: 1px solid var(--tg-line-soft);
  border-radius: var(--tg-radius, 8px);
  min-height: 38px;
}

.tg-form-grid .tg-input:focus-visible {
  outline: 2px solid var(--tg-gold, #c9a227);
  outline-offset: 1px;
  border-color: var(--tg-gold, #c9a227);
}

.tg-form-grid select.tg-input { cursor: pointer; }

.tg-form-grid .tg-check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  font-size: .92rem;
  color: var(--tg-text-dim, #9aa0a6);
}

.tg-form-grid .tg-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--tg-gold, #c9a227);
  cursor: pointer;
}

@media (max-width: 560px) {
  .tg-form-grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   TG_METRICS_V4 — area heading, tab strip, and KPI tiles that do not clip.

   The overflow problem: .tg-stat-n was a fixed 2rem inside a three- or
   four-column grid of nested cards. At 1/4 width a value like "$92,281.10"
   simply did not fit and was cut off. The fix is a purpose-built tile with a
   fluid value size, a long-value modifier, and text that can shrink instead
   of overflowing.

   Additive only; every selector here is new.
   =========================================================================== */

/* -------------------------------------------------------- area + tab strip */
.tg-area-head {
  display: flex;
  flex-direction: column;
  gap: var(--tg-s3);
  padding-bottom: var(--tg-s3);
  border-bottom: 1px solid var(--tg-line-soft);
  margin-bottom: var(--tg-s2);
}

.tg-area-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tg-text);
}

.tg-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--tg-line-soft);
  margin: 0;
}

.tg-tab {
  appearance: none;
  -webkit-appearance: none;
  padding: 9px 15px;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  color: var(--tg-text-dim, #9aa0a6);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s ease, border-color .12s ease;
}

.tg-tab:hover { color: var(--tg-text); }

.tg-tab.is-active {
  color: var(--tg-gold, #c9a227);
  border-bottom-color: var(--tg-gold, #c9a227);
}

.tg-tab:focus-visible {
  outline: 2px solid var(--tg-gold, #c9a227);
  outline-offset: -2px;
  border-radius: 3px 3px 0 0;
}

/* ------------------------------------------------------------- KPI tiles */
.tg-kpis {
  display: grid;
  /* auto-fit with a real minimum: tiles reflow to fewer columns rather than
     squeezing a six-figure number into a quarter of the width. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--tg-s3);
}

.tg-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;                /* allows the text inside to shrink */
  padding: 13px 15px;
  background: var(--tg-charcoal-2);
  border: 1px solid var(--tg-line-soft);
  border-radius: var(--tg-radius, 8px);
}

.tg-kpi-label {
  margin: 0;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tg-text-dim, #9aa0a6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tg-kpi-value {
  margin: 0;
  /* Fluid: shrinks with the tile instead of overflowing it. */
  font-size: clamp(1.15rem, 2.1vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--tg-text);
  min-width: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

/* Long values (money with separators, percentages with decimals) get a
   smaller ceiling so they stay on one line at narrow widths. */
.tg-kpi-value.is-long {
  font-size: clamp(1rem, 1.6vw, 1.35rem);
}

.tg-kpi-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 2px;
}

.tg-kpi-caption {
  font-size: .76rem;
  line-height: 1.3;
  color: var(--tg-text-dim, #9aa0a6);
}

.tg-kpi.is-ok  .tg-kpi-value { color: var(--tg-ok, #4caf7d); }
.tg-kpi.is-bad .tg-kpi-value { color: var(--tg-bad, #d9534f); }

@media (max-width: 720px) {
  .tg-kpis { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .tg-kpi-value { font-size: clamp(1.05rem, 4.5vw, 1.4rem); }
}

/* ------------------------------------------- compact definition list tiles */
.tg-mini-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 7px var(--tg-s3);
  margin: 0;
  font-size: .9rem;
  align-items: baseline;
}

.tg-mini-dl dt {
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tg-text-dim, #9aa0a6);
  white-space: nowrap;
}

.tg-mini-dl dd { margin: 0; color: var(--tg-text); }
.tg-mini-dl dd b { font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
  .tg-mini-dl { grid-template-columns: 1fr; gap: 2px; }
  .tg-mini-dl dd { margin-bottom: 8px; }
}

/* ---------------------------------------------------------------------------
   THE ACTUAL CLIPPING FIX.

   Reported: three/four cards side by side, text cut off. Cause is a fixed 2rem
   .tg-stat-n inside a rigid repeat(N, minmax(0,1fr)) grid -- at a quarter
   width a value like "$92,281.10" cannot fit and is clipped by the card.

   This fixes the EXISTING markup, independent of any JS restructure:
     - the stat number becomes fluid and wraps rather than overflowing
     - fixed 3/4-column grids reflow to fewer, wider columns when space is
       tight, instead of forcing four columns at any width
     - cards and their contents may shrink (min-width:0), which a grid item
       does NOT do by default -- this is the root cause of the overflow
   --------------------------------------------------------------------------- */
.tg-stat-n {
  font-size: clamp(1.05rem, 1.9vw, 1.9rem);
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

/* A grid item defaults to min-width:auto and refuses to shrink below its
   content -- that is what pushes text past the card edge. */
.tg-grid > *,
.tg-grid-2 > *,
.tg-grid-3 > *,
.tg-grid-4 > * { min-width: 0; }

.tg-card { min-width: 0; }
.tg-card p,
.tg-card dd,
.tg-card dt { min-width: 0; overflow-wrap: anywhere; }

/* Reflow instead of clip. */
@media (max-width: 1400px) {
  .tg-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .tg-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .tg-grid-2,
  .tg-grid-3,
  .tg-grid-4 { grid-template-columns: 1fr; }
}

/* The Metrics rail adds two fixed columns before the content, so the content
   area is far narrower than the viewport implies. Inside it, let the card
   grids size themselves to what actually fits. */
.tg-app-rail .tg-grid-4 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.tg-app-rail .tg-grid-3 { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }

@media print {
  .tg-tabs { display: none !important; }
}

/* ===========================================================================
   TG_METRICS_V5 — identity review pair cards.

   Reuses the existing design language: the same card shell, the same
   .tg-mini-dl definition lists, the same badge and button classes. Only the
   side-by-side comparison layout is new.
   =========================================================================== */

.tg-id-pair { padding: var(--tg-s4); }

/* Two records with a divider between. Collapses to stacked on narrow screens
   rather than squeezing two columns of contact detail into nothing. */
.tg-id-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
  gap: var(--tg-s4);
  align-items: start;
}

.tg-id-side { min-width: 0; }

.tg-id-name {
  margin: 0 0 10px 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tg-text);
  overflow-wrap: anywhere;
}

.tg-id-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: 0 var(--tg-s2);
  border-left: 1px solid var(--tg-line-soft);
  border-right: 1px solid var(--tg-line-soft);
}

.tg-id-vs span {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tg-text-dim, #9aa0a6);
}

/* Square IDs are long opaque strings: keep them readable but contained. */
.tg-id-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  color: var(--tg-text-dim, #9aa0a6);
  overflow-wrap: anywhere;
}

.tg-id-evidence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tg-s3);
  margin-top: var(--tg-s4);
  padding-top: var(--tg-s3);
  border-top: 1px solid var(--tg-line-soft);
}

.tg-id-badges { display: flex; flex-wrap: wrap; gap: 5px; }

.tg-id-question {
  margin: var(--tg-s3) 0 10px 0;
  font-weight: 600;
  color: var(--tg-text);
}

.tg-id-actions { gap: var(--tg-s3); flex-wrap: wrap; }

@media (max-width: 860px) {
  .tg-id-grid { grid-template-columns: 1fr; }
  .tg-id-vs {
    border: 0;
    border-top: 1px solid var(--tg-line-soft);
    border-bottom: 1px solid var(--tg-line-soft);
    padding: 7px 0;
  }
}

/* TG_LIST_PAGING_V1 */
/* Paging bar for server-paged administrative lists. Reuses .tg-pager's
   existing look; these rules only add the page-size group and keep the bar
   usable on a phone. */
.tg-pager-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.tg-pager-size,
.tg-pager-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tg-page-size {
  font: inherit;
  color: inherit;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  padding: 4px 8px;
  min-height: 32px;
}
.tg-page-size:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.tg-th-sort { cursor: pointer; user-select: none; }
@media (max-width: 640px) {
  .tg-pager-list { justify-content: flex-start; }
  .tg-pager-list .tg-pager-label { order: 3; width: 100%; }
}