/* ===========================================================================
   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:       #c8a15a;
  --tg-gold-bright:#e0bb78;
  --tg-gold-dim:   #8a6f3c;
  --tg-gold-wash:  rgba(200,161,90,.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,161,90,.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,161,90,.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_DRAWER_FIX_V1
     The toggle is rendered as a SIBLING of .tg-app-drawer, not inside it:

       main.tg-wrap
         button.tg-side-toggle
         div.tg-app.tg-app-drawer > aside.tg-side

     so the descendant selector this rule used never matched, the hamburger
     stayed display:none from the base rule, and a phone got the full inline
     navigation instead -- 428px of menu above the fold on a 812px screen,
     with the first card starting at y=461. The drawer markup, the scrim, the
     close button and the aria wiring were all correct and simply unreachable.

     Scoped by presence of the drawer rather than by ancestry, so it follows
     the markup wherever it sits. Only the customer portal renders these
     classes; /info and /config never do, so their header is untouched. */
  .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-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 (max-width: 900px) {
  /* TG_DRAWER_FIX_V1 -- with a working drawer the header nav is a duplicate
     of it, and on a phone it was pushing all content below the fold. The cart
     stays: its item count is the only navigation state a customer needs at a
     glance, and it is the one control with no equivalent inside the drawer.
     :has() scopes this to documents that actually render a drawer, so the
     staff header keeps its inline navigation. */
  body:has(.tg-app-drawer) .tg-nav > *:not(.tg-nav-cart) { display: none; }
  body:has(.tg-app-drawer) .tg-head-in { gap: var(--tg-s3); }
}

@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,161,90,.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,161,90,.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,161,90,.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,161,90,.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.

   TG_INFO_IA_V3 -- the rail went from seven entries to twelve. Wrapping that
   many onto a phone would push the actual content below the fold, so the strip
   scrolls sideways instead of growing taller. scroll-snap keeps a part-scrolled
   strip from leaving a button sliced in half. */
@media (max-width: 900px) {
  .tg-app-rail { grid-template-columns: 1fr; }
  /* ONE .tg-rail block, deliberately. An earlier pass left two of these in
     this breakpoint and the second quietly won on flex-wrap, so the strip
     wrapped instead of scrolling. */
  .tg-rail {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--tg-line-soft);
    padding: 0 0 var(--tg-s3) 0;
    scrollbar-width: none;
  }
  .tg-rail::-webkit-scrollbar { display: none; }
  .tg-rail-btn {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}

/* ------------------------------------------------------------- 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%; }
}

/* TG_BADGE_ALIASES_V1 -- colour names used by newer pages: danger = bad (red);
   info = quiet blue; muted = grey. */
.tg-badge-danger { background: var(--tg-bad-wash);  border-color: rgba(192,86,86,.42);   color: #e08d8d; }
.tg-badge-info { color: #9fc3e8; border-color: rgba(159, 195, 232, .45); background: rgba(159, 195, 232, .10); }
.tg-badge-muted { color: var(--tg-muted, #a9b0b8); border-color: var(--tg-line-soft, rgba(255,255,255,.12)); background: transparent; }

/* TG_ADMIN_WIDE_V1 -- the staff admin uses the width of the screen (the public site and
   customer portal keep the 1180px column). */
.tg-wrap.tg-wrap-admin { max-width: min(1760px, 96vw); }
@media (min-width: 1400px) { .tg-wrap-admin .tg-app-rail { grid-template-columns: 168px 220px minmax(0, 1fr); } }

/* TG_TABLE_PAGING_V1 -- pager footer for long admin tables. */
.tg-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--tg-line-soft); font-size: .84rem; color: var(--tg-text-2); position: sticky; left: 0; }
.tg-pager-count { margin-right: auto; color: var(--tg-text-3); }
.tg-pager-rows { display: inline-flex; align-items: center; gap: 6px; }
.tg-pager .tg-pager-size { width: auto; min-width: 70px; padding: 4px 8px; }
.tg-pager .tg-btn[disabled] { opacity: .45; cursor: default; }


/* TG_CSP_SAFE_UTILITIES_V1 -- utility classes standing in for style attributes.
   The portal's Content Security Policy sets style-src to 'self' plus a nonce
   with no unsafe-inline. That refuses the style ATTRIBUTE outright, and
   h(tag, { style: '...' }) in tg-kit goes through setAttribute, so those
   declarations were being dropped silently. CSSOM assignment (el.style.x = y)
   is NOT affected and is left alone.
   This file is a SOURCE: build_platform.py regenerates platform.css from it. */
.tg-m0 { margin: 0; }
.tg-mt12 { margin-top: 12px; }
.tg-mt16 { margin-top: 16px; }
.tg-mt20 { margin-top: 20px; }
.tg-dim { opacity: .55; }
.tg-self-center { align-self: center; }
.tg-justify-start { justify-content: flex-start; }
.tg-list-plain { padding-left: 20px; color: var(--tg-text-2); margin: 0; }
.tg-divider-top {
  border-top: 1px solid var(--tg-line-soft);
  margin-top: 8px;
  padding-top: 8px;
}
.tg-wrap-pad { padding-top: 32px; padding-bottom: 48px; }
.tg-field-reset { border: 0; padding: 0; margin: 0 0 16px; }
.tg-spin-center { margin: 0 auto 12px; }


/* TG_CSP_CLASSES_V2 -- classes standing in for style attributes the policy refuses.
   Generated from the declarations they replace, one class per distinct
   declaration set. tg-cNN names are composites; the rule text is the
   original declaration list unchanged. tg-ds.css is a SOURCE file:
   build_platform.py regenerates platform.css from it. */
.tg-c05 { align-items:center; gap:8px; flex-wrap:wrap; }
.tg-fw600 { font-weight:600; }
.tg-c47 { gap:10px; align-items:baseline; }
.tg-c48 { gap:10px; margin-top:10px; }
.tg-c49 { gap:10px; margin-top:14px; }
.tg-c50 { gap:10px; margin-top:14px; flex-wrap:wrap; }
.tg-gap12 { gap:12px; }
.tg-c51 { gap:12px; margin-top:12px; }
.tg-gap4 { gap:4px; }
.tg-gap6 { gap:6px; }
.tg-c53 { gap:6px; margin-top:14px; }
.tg-c56 { gap:8px; flex-wrap:wrap; margin-top:6px; }
.tg-mlauto { margin-left:auto; }
.tg-mt10 { margin-top:10px; }
.tg-mt14 { margin-top:14px; }
.tg-c63 { margin-top:16px; gap:10px; }
.tg-mt18 { margin-top:18px; }
.tg-mt8 { margin-top:8px; }
.tg-m16-0 { margin:16px 0; }
.tg-minw86 { min-width:86px; }
.tg-c75 { padding:12px 8px 4px; border-top:1px solid var(--tg-line-soft); margin-top:8px; }


/* TG_CSP_CLASSES_V2 -- classes standing in for style attributes the policy refuses.
   Generated from the declarations they replace, one class per distinct
   declaration set. tg-cNN names are composites; the rule text is the
   original declaration list unchanged. tg-ds.css is a SOURCE file:
   build_platform.py regenerates platform.css from it. */
.tg-c20 { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; min-height:48px; padding:10px 14px; }
.tg-c68 { position:fixed; top:14px; right:14px; z-index:9999; display:flex; align-items:center; gap:9px; padding:9px 14px; border-radius:999px; background:rgba(17,17,17,.92); color:#fff; font-size:.85rem; box-shadow:0 6px 20px rgba(0,0,0,.28); }


/* TG_CSP_CLASSES_V2 -- classes standing in for style attributes the policy refuses.
   Generated from the declarations they replace, one class per distinct
   declaration set. tg-cNN names are composites; the rule text is the
   original declaration list unchanged. tg-ds.css is a SOURCE file:
   build_platform.py regenerates platform.css from it. */
.tg-ai-center { align-items:center; }
.tg-c01 { align-items:center; gap:12px; }
.tg-c02 { align-items:center; gap:2px; }
.tg-c03 { align-items:center; gap:4px; }
.tg-c04 { align-items:center; gap:6px; }
.tg-c06 { align-items:center; margin-top:6px; }
.tg-ai-flex-end { align-items:flex-end; }
.tg-c07 { align-items:flex-end; flex-wrap:wrap; gap:8px; }
.tg-c08 { align-items:flex-end; gap:8px; }
.tg-c09 { align-items:flex-end; margin-top:8px; flex-wrap:wrap; gap:8px; }
.tg-c10 { align-items:flex-end; margin-top:8px; gap:8px; }
.tg-c11 { align-self:end; padding-bottom:8px; }
.tg-c12 { background:var(--tg-charcoal); }
.tg-c13 { background:var(--tg-charcoal); text-transform:uppercase; font-size:.72rem; letter-spacing:.1em; }
.tg-c14 { color:var(--tg-text); font-weight:600; }
.tg-c15 { cursor:pointer; white-space:nowrap; user-select:none; }
.tg-d-block { display:block; }
.tg-c16 { display:block; margin-top:8px; }
.tg-c17 { display:block; margin:0 0 14px; }
.tg-c18 { display:block; margin:6px 0; }
.tg-c19 { display:block; margin:6px 0; opacity:.55; }
.tg-c21 { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.tg-c22 { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-top:10px; }
.tg-c23 { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-top:12px; }
.tg-c24 { display:flex; flex-wrap:wrap; gap:6px; }
.tg-c25 { display:flex; gap:10px; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--tg-line); }
.tg-c26 { display:flex; gap:10px; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--tg-line); }
.tg-c27 { display:flex; gap:10px; align-items:flex-start; margin:0 0 14px; }
.tg-c28 { display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; }
.tg-c29 { display:flex; gap:4px; flex-wrap:wrap; }
.tg-c30 { display:flex; gap:6px; flex-wrap:wrap; }
.tg-c31 { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
.tg-c32 { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.tg-c33 { display:inline-flex; gap:6px; margin-right:14px; }
.tg-c34 { display:inline-flex; gap:6px; margin:4px 14px 4px 0; }
.tg-c35 { display:inline-flex; gap:6px; margin:4px 14px 4px 0; min-width:240px; }
.tg-c36 { flex-wrap:wrap; align-items:center; gap:8px; }
.tg-flex1 { flex:1; }
.tg-c37 { flex:1; min-width:150px; }
.tg-c38 { flex:1; min-width:180px; }
.tg-c39 { flex:1; min-width:240px; }
.tg-c40 { flex:2; min-width:200px; }
.tg-fs1p5rem { font-size:1.5rem; }
.tg-c41 { font-size:2rem; font-weight:700; margin:0; }
.tg-c42 { font-weight:600; margin-bottom:4px; }
.tg-c43 { font-weight:600; margin-right:10px; }
.tg-c44 { font-weight:600; margin:16px 0 6px; }
.tg-c45 { font-weight:600; margin:6px 0; }
.tg-c46 { gap:6px; flex-wrap:wrap; }
.tg-gap8 { gap:8px; }
.tg-col-full { grid-column:1/-1; }
.tg-c52 { justify-content:space-between; align-items:flex-start; }
.tg-mb10 { margin-bottom:10px; }
.tg-mb14 { margin-bottom:14px; }
.tg-mb16 { margin-bottom:16px; }
.tg-mb6 { margin-bottom:6px; }
.tg-mb8 { margin-bottom:8px; }
.tg-ml6 { margin-left:6px; }
.tg-ml8 { margin-left:8px; }
.tg-c54 { margin-top:10px; padding-top:10px; border-top:1px solid var(--tg-line); }
.tg-c55 { margin-top:16px; justify-content:space-between; }
.tg-mt24 { margin-top:24px; }
.tg-mt3 { margin-top:3px; }
.tg-mt4 { margin-top:4px; }
.tg-m0-0-12 { margin:0 0 12px; }
.tg-m0-0-20 { margin:0 0 20px; }
.tg-m0-0-4 { margin:0 0 4px; }
.tg-m0-0-6 { margin:0 0 6px; }
.tg-m0-0-8 { margin:0 0 8px; }
.tg-c57 { margin:0; padding-left:18px; }
.tg-c58 { margin:0; padding-left:20px; }
.tg-m12-0 { margin:12px 0; }
.tg-m12-0-0 { margin:12px 0 0; }
.tg-m12-0-6 { margin:12px 0 6px; }
.tg-m2-0-8 { margin:2px 0 8px; }
.tg-m3-0 { margin:3px 0; }
.tg-c59 { margin:4px 0 0; padding-left:18px; }
.tg-m4-0-10 { margin:4px 0 10px; }
.tg-c60 { margin:8px 0 0; padding-left:18px; }
.tg-c61 { max-width:100%; max-height:70vh; display:block; margin:0 auto; border-radius:8px; }
.tg-maxw100 { max-width:100px; }
.tg-maxw110 { max-width:110px; }
.tg-maxw11rem { max-width:11rem; }
.tg-maxw130 { max-width:130px; }
.tg-maxw140 { max-width:140px; }
.tg-maxw160 { max-width:160px; }
.tg-maxw200 { max-width:200px; }
.tg-maxw320 { max-width:320px; }
.tg-maxw90 { max-width:90px; }
.tg-minw10rem { min-width:10rem; }
.tg-c62 { min-width:240px; flex:1; }
.tg-minw5p5rem { min-width:5.5rem; }
.tg-minw9rem { min-width:9rem; }
.tg-c64 { padding:0; border:0; background:none; cursor:zoom-in; aspect-ratio:1/1; overflow:hidden; border-radius:10px; display:block; width:100%; }
.tg-c65 { padding:10px 0; border-top:1px solid var(--tg-line-soft); }
.tg-c66 { padding:12px 0; border-bottom:1px solid var(--tg-line); }
.tg-ta-center { text-align:center; }
.tg-c67 { text-align:center; font-weight:700; }
.tg-ta-right { text-align:right; }
.tg-c69 { text-align:right; font-weight:700; }
.tg-c70 { text-align:right; white-space:nowrap; }
.tg-ws-nowrap { white-space:nowrap; }
.tg-c71 { white-space:pre-wrap; margin:12px 0; }
.tg-w100pc { width:100%; }
.tg-c72 { width:100%; height:100%; object-fit:cover; display:block; background:#1a1a1a; }
.tg-w8em { width:8em; }
.tg-c73 { width:96px; height:auto; border-radius:6px; display:block; background:#222; }
.tg-c74 { width:auto; display:inline-block; }


/* TG_CSP_CLASSES_V2 -- classes standing in for style attributes the policy refuses.
   Generated from the declarations they replace, one class per distinct
   declaration set. tg-cNN names are composites; the rule text is the
   original declaration list unchanged. tg-ds.css is a SOURCE file:
   build_platform.py regenerates platform.css from it. */
.tg-c76 { width:96px; height:auto; border-radius:6px; display:block; background:#222; }
.tg-c77 { width:auto; display:inline-block; }


/* TG_CSP_DYNAMIC_SIX -- for the six sites whose declarations were not constant.
   Where the choice was a boolean, the condition now picks a class. Where the
   value is computed per row (a bar width, a heat cell alpha) the element is
   built first and the property assigned with el.style.x = v, which the policy
   allows; only the style ATTRIBUTE is refused. */
.tg-points-neg { color: #e08d8d; }
.tg-points-pos { color: #7fc394; }
.tg-strike { text-decoration: line-through; }
.tg-dim60 { opacity: .6; }
.tg-heat-cell { text-align: center; }
.tg-appt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--tg-line-soft);
}

/* Single-card print isolation, used by the Download PDF control in I.N.F.O.
   Visibility rather than display, so table layout inside the card survives. */
.tg-noprint { margin-left: auto; }
@media print {
  body.tg-printing-one * { visibility: hidden !important; }
  body.tg-printing-one .tg-print-target,
  body.tg-printing-one .tg-print-target * { visibility: visible !important; }
  body.tg-printing-one .tg-print-target {
    position: absolute; left: 0; top: 0; width: 100%;
    box-shadow: none; border: 0; background: #fff; color: #000;
  }
  body.tg-printing-one .tg-print-target .tg-noprint { display: none !important; }
  body.tg-printing-one .tg-print-target table { width: 100%; border-collapse: collapse; }
  body.tg-printing-one .tg-print-target thead { display: table-header-group; }
  body.tg-printing-one .tg-print-target tr { page-break-inside: avoid; }
}

/* Square ingestion status strip (I.N.F.O. shell). Colour is the worst state
   across all datasets; the text says whether reporting data is affected. */
.tg-syncbar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 16px; font-size: 0.8125rem; line-height: 1.35;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tg-sync-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tg-syncbar.tg-sync-ok   { background: rgba(34,140,80,0.14);  color: #9fe3b8; }
.tg-syncbar.tg-sync-warn { background: rgba(200,161,90,0.16); color: #e8c98a; }
.tg-syncbar.tg-sync-bad  { background: rgba(190,60,60,0.18);  color: #f0a3a3; }
.tg-sync-dot.tg-sync-ok   { background: #2fbf6b; }
.tg-sync-dot.tg-sync-warn { background: #d8a54a; }
.tg-sync-dot.tg-sync-bad  { background: #e05a5a; }

/* Customer portal signed-in banner. Persistent across every portal page so a
   customer can always see who they are signed in as, and sign out, without
   hunting for it inside a tab. */
.tg-authbar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 16px; font-size: 0.8125rem; line-height: 1.35;
  background: rgba(200,161,90,0.12); color: #e8c98a;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tg-authbar-dot { width: 8px; height: 8px; border-radius: 50%; background: #2fbf6b; flex: none; }
.tg-authbar .tg-btn { margin-left: auto; }
@media print { .tg-authbar { display: none !important; } }

/* Self-hosted typefaces. Downloaded from Google Fonts and served from
   this origin, because the CSP allows fonts from nowhere else.
   Oswald and Inter are both SIL Open Font License 1.1. */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/oswald-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/oswald-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ===========================================================================
   TG_LUXE_V1 — the finish layer.

   Everything above this line is the working design system and stays. This
   layer sits on top and does the things that separate "functional dark UI"
   from something that looks expensive:

   1. Real typefaces. The stack asked for Inter, which almost no visitor has
      installed, and the CSP forbids loading a font from anywhere but this
      origin, so every page has been rendering in the visitor's OS default.
      Oswald and Inter are now served from /assets/fonts. Oswald is condensed
      and tall, the shape of stencilled lettering, which carries the military
      note without a single stencil graphic.

   2. Light behaves like light. Real materials catch light on their top edge
      and fall into shadow below. Every raised surface here gets a 1px inset
      highlight along its top and a soft shadow beneath. That one detail is
      most of what reads as "expensive" in a dark interface.

   3. Grain. A fine noise layer over the whole page, at an opacity you notice
      only if you look for it. Flat black reads as cheap; black with tooth
      reads as material. This is the gritty half of the brief.

   4. Gold used as metal, not as a colour. Flat gold looks like mustard. Gold
      that shifts from deep to bright across its length looks like leaf.

   Motion lives at the bottom and is opt-in: the hidden-then-revealed states
   only apply when tg-motion.js has set .tg-motion on <html>. If the script
   fails, never loads, or the visitor asked for reduced motion, every element
   is simply visible. Content is never hidden behind an animation that might
   not run.
   =========================================================================== */

/* ---- Tokens, restated ---------------------------------------------------
   Same gold, white and black. Deeper blacks so the gold has further to travel,
   a warmer near-white so it does not read as blue, and a gold ramp with enough
   range to behave like a metal. */
:root {
  --tg-black:      #070709;
  --tg-charcoal:   #0e0e12;
  --tg-charcoal-2: #15151b;
  --tg-charcoal-3: #1e1e25;
  --tg-line:       #2b2b35;
  --tg-line-soft:  #1c1c23;

  --tg-gold:        #c8a15a;
  --tg-gold-bright: #e0bb78;
  --tg-gold-dim:    #8a6f3c;
  --tg-gold-deep:   #6f5626;
  --tg-gold-wash:   rgba(200,161,90,.10);

  --tg-text:   #ffffff;
  --tg-text-2: #c9c9d2;
  --tg-text-3: #8b8b96;

  /* Gold as a struck surface rather than a flat fill. */
  --tg-leaf: linear-gradient(120deg,
    var(--tg-gold-deep) 0%, var(--tg-gold) 22%, var(--tg-gold-bright) 46%,
    var(--tg-gold) 62%, var(--tg-gold-deep) 100%);

  /* The top-edge catch light that makes a surface look like an object. */
  --tg-edge: inset 0 1px 0 rgba(255,255,255,.055);
  --tg-shadow:    0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.35);
  --tg-shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.6);

  --tg-display: 'Oswald', 'Haettenschweiler', 'Arial Narrow', system-ui, sans-serif;
  --tg-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --tg-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---- Grain --------------------------------------------------------------
   One fixed layer over the whole document. Fixed rather than scrolling, so it
   behaves like grain in the glass instead of a texture glued to the content.
   Pointer events off, so it can never intercept a tap. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

body {
  font-family: var(--tg-font);
  color: var(--tg-text-2);
  /* A slow vertical wash so the page is not one flat value top to bottom. */
  background:
    radial-gradient(120% 60% at 50% 0%, #101017 0%, rgba(16,16,23,0) 60%),
    var(--tg-black);
  background-attachment: fixed;
}

/* ---- Typography ---------------------------------------------------------
   Oswald carries the headings. It is condensed, so it holds a large size
   without running out of line, which is what lets a heading feel confident on
   a phone rather than wrapping four times. */
h1, h2, h3, h4, .tg-display {
  font-family: var(--tg-display);
  color: var(--tg-text);
  font-weight: 600;
  letter-spacing: .004em;
  line-height: 1.08;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5rem); font-weight: 700; letter-spacing: .002em; }
h2 { font-size: clamp(1.8rem, 1.3rem + 2.1vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { color: var(--tg-text-2); line-height: 1.68; }

/* Small capitalised labels are where the military register actually lives:
   wide tracking, heavy weight, short words. */
.tg-eyebrow {
  font-family: var(--tg-display);
  font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .34em;
  color: var(--tg-gold);
  margin: 0 0 var(--tg-s3);
}
.tg-lede {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.28rem);
  line-height: 1.6; color: var(--tg-text-2); max-width: 62ch;
}
.tg-small { font-size: .86rem; }
.tg-muted { color: var(--tg-text-3); }

/* The gold bar under a heading, struck rather than printed. */
.tg-rule {
  width: 64px; height: 2px; border-radius: 0;
  background: var(--tg-leaf);
  margin: 0 0 var(--tg-s5);
}

/* ---- Surfaces -----------------------------------------------------------
   A card is an object sitting on the page: lit along its top edge, shadowed
   underneath, with a hairline that is brighter at the top than the bottom. */
.tg-card, .tg-module {
  position: relative;
  background: linear-gradient(180deg, var(--tg-charcoal-2) 0%, var(--tg-charcoal) 100%);
  border: 1px solid var(--tg-line-soft);
  border-radius: var(--tg-r);
  box-shadow: var(--tg-edge), var(--tg-shadow);
}

/* A single corner tick, the way a technical drawing marks a datum. Drawn on
   the card itself rather than added to the markup, so every card gets it and
   no page has to remember to. */
.tg-module::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 14px; height: 14px;
  border-top: 2px solid var(--tg-gold);
  border-right: 2px solid var(--tg-gold);
  border-top-right-radius: var(--tg-r);
  opacity: .5;
  transition: opacity .3s var(--tg-ease);
}
.tg-module:hover::after { opacity: 1; }

.tg-module {
  padding: var(--tg-s5);
  transition: transform .35s var(--tg-ease), box-shadow .35s var(--tg-ease),
              border-color .35s var(--tg-ease);
}
.tg-module:hover {
  transform: translateY(-3px);
  border-color: rgba(200,161,90,.34);
  box-shadow: var(--tg-edge), var(--tg-shadow-lg);
}
.tg-module h3 { margin-bottom: var(--tg-s2); }
.tg-module .x {
  font-family: var(--tg-display);
  text-transform: uppercase; letter-spacing: .2em;
  font-size: .68rem; color: var(--tg-text-3);
}

/* ---- Masthead -----------------------------------------------------------
   Deeper glass, and a gold hairline along the bottom that only appears once
   the page has been scrolled, so the header announces itself by lifting off
   the content rather than by sitting there shouting. */
.tg-head {
  background: rgba(7,7,9,.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--tg-ease), border-color .3s var(--tg-ease),
              box-shadow .3s var(--tg-ease);
}
.tg-head.is-scrolled {
  background: rgba(7,7,9,.94);
  border-bottom-color: rgba(200,161,90,.22);
  box-shadow: 0 10px 34px rgba(0,0,0,.5);
}
.tg-head-in { min-height: 72px; transition: min-height .3s var(--tg-ease); }
.tg-head.is-scrolled .tg-head-in { min-height: 60px; }

.tg-mark {
  background: var(--tg-leaf);
  border-radius: 3px;
  font-family: var(--tg-display);
  font-weight: 700; letter-spacing: .06em;
  box-shadow: var(--tg-edge), 0 2px 10px rgba(200,161,90,.2);
}
.tg-brand-t b {
  font-family: var(--tg-display);
  font-size: 1.12rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
}
.tg-brand-t span {
  font-family: var(--tg-display);
  letter-spacing: .26em; font-size: .62rem; color: var(--tg-gold-dim);
}

.tg-nav a, .tg-nav button {
  font-family: var(--tg-display);
  text-transform: uppercase; letter-spacing: .14em;
  font-size: .8rem; font-weight: 500;
  border-radius: 3px;
  color: var(--tg-text-3);
}
.tg-nav a:hover, .tg-nav button:hover { background: rgba(255,255,255,.04); color: var(--tg-text); }
.tg-nav [aria-current="page"], .tg-nav .is-active {
  background: transparent; color: var(--tg-gold-bright);
  border-color: transparent;
  box-shadow: inset 0 -2px 0 var(--tg-gold);
}

/* ---- Buttons ------------------------------------------------------------
   Square-ish, tracked, uppercase. A primary button is struck gold with a dark
   label, which at this size is the loudest thing on the page and so is used
   once per view. */
.tg-btn {
  font-family: var(--tg-display);
  text-transform: uppercase; letter-spacing: .16em;
  font-size: .82rem; font-weight: 500;
  border-radius: 3px;
  padding: var(--tg-s3) var(--tg-s5);
  background: var(--tg-charcoal-3);
  border: 1px solid var(--tg-line);
  color: var(--tg-text);
  box-shadow: var(--tg-edge);
  transition: transform .18s var(--tg-ease), background .2s var(--tg-ease),
              border-color .2s var(--tg-ease), box-shadow .2s var(--tg-ease);
}
.tg-btn:hover {
  background: #24242c; border-color: rgba(200,161,90,.4);
  transform: translateY(-1px);
  box-shadow: var(--tg-edge), 0 6px 20px rgba(0,0,0,.45);
}
.tg-btn:active { transform: translateY(0); }

.tg-btn-primary {
  background: var(--tg-leaf);
  background-size: 200% 100%;
  background-position: 0% 50%;
  border-color: var(--tg-gold-dim);
  color: #120e05;
  font-weight: 600;
  transition: background-position .6s var(--tg-ease), transform .18s var(--tg-ease),
              box-shadow .2s var(--tg-ease);
}
.tg-btn-primary:hover {
  background-position: 100% 50%;
  background-color: transparent;
  border-color: var(--tg-gold-bright);
  color: #120e05;
  box-shadow: var(--tg-edge), 0 8px 26px rgba(200,161,90,.26);
}
.tg-btn-sm { padding: var(--tg-s2) var(--tg-s4); font-size: .74rem; }

/* ---- Hero ---------------------------------------------------------------
   Full-bleed, with a gold horizon line low in the frame and a vignette that
   pulls the eye to the middle. */
.tg-hero {
  position: relative;
  padding: clamp(var(--tg-s8), 12vh, 190px) 0 clamp(var(--tg-s7), 9vh, 130px);
  overflow: hidden;
}
.tg-hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(90% 70% at 50% 8%, rgba(200,161,90,.11) 0%, rgba(200,161,90,0) 58%),
    radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 38%, rgba(0,0,0,.6) 100%);
}
.tg-hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg,
    rgba(200,161,90,0) 0%, rgba(200,161,90,.55) 50%, rgba(200,161,90,0) 100%);
}
.tg-hero .tg-wrap { position: relative; }
.tg-hero h1 { margin-bottom: var(--tg-s4); }

/* ---- Sections -----------------------------------------------------------
   The divider between sections is a centred gold fade rather than a full-width
   grey line, so the page breathes instead of looking ruled. */
.tg-section + .tg-section { border-top: 0; }
.tg-section + .tg-section::before {
  content: '';
  display: block; height: 1px; margin: 0 auto var(--tg-s8);
  max-width: 1180px;
  background: linear-gradient(90deg,
    rgba(200,161,90,0) 0%, rgba(200,161,90,.26) 50%, rgba(200,161,90,0) 100%);
}
.tg-section { padding: clamp(var(--tg-s7), 8vh, 104px) 0; }

/* ---- Numbers ------------------------------------------------------------
   A figure is the one place a condensed face earns its keep twice: it reads
   as a readout. */
.tg-stat-n, .tg-kpi-n {
  font-family: var(--tg-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tg-text);
  letter-spacing: .01em;
}
.tg-stat {
  background: linear-gradient(180deg, var(--tg-charcoal-2), var(--tg-charcoal));
  border: 1px solid var(--tg-line-soft);
  border-radius: var(--tg-r-sm);
  box-shadow: var(--tg-edge);
}

/* ---- Numbered steps -----------------------------------------------------
   The referral and redemption walkthroughs are the two places a customer has
   to follow a sequence, so the sequence is drawn: gold discs joined by a rule
   down the page. */
.tg-steps { list-style: none; margin: 0; padding: 0; counter-reset: tgstep; }
.tg-steps > li {
  position: relative;
  counter-increment: tgstep;
  padding: 0 0 var(--tg-s6) calc(var(--tg-s7) + var(--tg-s2));
  min-height: 46px;
}
.tg-steps > li::before {
  content: counter(tgstep);
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--tg-charcoal-2);
  border: 1px solid rgba(200,161,90,.4);
  box-shadow: var(--tg-edge);
  font-family: var(--tg-display);
  font-size: 1.05rem; font-weight: 600;
  color: var(--tg-gold-bright);
}
.tg-steps > li::after {
  content: '';
  position: absolute; left: 22px; top: 46px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, rgba(200,161,90,.34), rgba(200,161,90,0));
}
.tg-steps > li:last-child { padding-bottom: 0; }
.tg-steps > li:last-child::after { display: none; }
.tg-steps b {
  display: block;
  font-family: var(--tg-display);
  font-size: 1.06rem; font-weight: 600; color: var(--tg-text);
  margin-bottom: 2px;
}

/* ---- Forms --------------------------------------------------------------
   Inputs sit INTO the page rather than on top of it, which is the inverse of
   the card treatment and is how a control reads as something you fill. */
.tg-input, .tg-select, .tg-textarea, input[type="text"], input[type="email"],
input[type="tel"], input[type="password"], select, textarea {
  background: #0a0a0d;
  border: 1px solid var(--tg-line);
  border-radius: 3px;
  color: var(--tg-text);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5);
  transition: border-color .2s var(--tg-ease), box-shadow .2s var(--tg-ease);
}
.tg-input:focus, .tg-select:focus, .tg-textarea:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--tg-gold);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5), 0 0 0 3px rgba(200,161,90,.15);
  outline: none;
}
label { font-weight: 500; color: var(--tg-text); }

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

/* ===========================================================================
   Motion.

   Every rule below is scoped to .tg-armed, which tg-motion.js puts on an
   element at the moment it starts observing it, so nothing is ever hidden
   by CSS alone. No script, an old browser, a thrown error, or a reduced
   motion preference all land in the same place: no transforms, no opacity,
   everything visible. A page that hides its own content until JavaScript
   rescues it is a page that is sometimes blank. This one was, twice.
   =========================================================================== */
.tg-reveal.tg-armed {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--tg-ease), transform .7s var(--tg-ease);
  will-change: opacity, transform;
}
.tg-reveal.tg-armed.is-in {
  opacity: 1;
  transform: none;
}
/* Children of a revealed group come in just behind it, in order. */
.tg-reveal-group.tg-armed > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--tg-ease), transform .6s var(--tg-ease);
}
.tg-reveal-group.tg-armed.is-in > * { opacity: 1; transform: none; }
.tg-reveal-group.tg-armed.is-in > *:nth-child(1) { transition-delay: .00s; }
.tg-reveal-group.tg-armed.is-in > *:nth-child(2) { transition-delay: .07s; }
.tg-reveal-group.tg-armed.is-in > *:nth-child(3) { transition-delay: .14s; }
.tg-reveal-group.tg-armed.is-in > *:nth-child(4) { transition-delay: .21s; }
.tg-reveal-group.tg-armed.is-in > *:nth-child(5) { transition-delay: .28s; }
.tg-reveal-group.tg-armed.is-in > *:nth-child(6) { transition-delay: .35s; }

/* The gold bar draws itself in rather than appearing. */
.tg-reveal.tg-armed .tg-rule,
.tg-reveal-group.tg-armed .tg-rule {
  width: 0;
  transition: width .8s var(--tg-ease) .15s;
}
.tg-reveal.tg-armed.is-in .tg-rule,
.tg-reveal-group.tg-armed.is-in .tg-rule { width: 64px; }

@media (prefers-reduced-motion: reduce) {
  .tg-reveal.tg-armed,
  .tg-reveal-group.tg-armed > * { opacity: 1; transform: none; }
  .tg-reveal.tg-armed .tg-rule,
  .tg-reveal-group.tg-armed .tg-rule { width: 64px; }
}

/* ---- Mobile -------------------------------------------------------------
   The hero loses its tallest padding, and the step rail tightens, because on a
   phone a 190px top pad is a screen of nothing. */
@media (max-width: 620px) {
  .tg-hero { padding: var(--tg-s7) 0 var(--tg-s6); }
  .tg-section { padding: var(--tg-s7) 0; }
  .tg-section + .tg-section::before { margin-bottom: var(--tg-s7); }
  .tg-steps > li { padding-left: calc(var(--tg-s6) + var(--tg-s3)); }
  .tg-steps > li::before { width: 36px; height: 36px; font-size: .95rem; }
  .tg-steps > li::after { left: 18px; top: 38px; }
  .tg-eyebrow { letter-spacing: .26em; }
}

/* ---- Accordion ----------------------------------------------------------
   Built on native <details>, so it opens with the keyboard, is found by the
   browser's own page search while collapsed, and works with scripts off. The
   default disclosure triangle is replaced by a gold plus that becomes a minus,
   which reads at a glance in a way a rotated triangle does not. */
.tg-acc {
  background: linear-gradient(180deg, var(--tg-charcoal-2), var(--tg-charcoal));
  border: 1px solid var(--tg-line-soft);
  border-radius: var(--tg-r);
  box-shadow: var(--tg-edge);
  margin-bottom: var(--tg-s3);
  overflow: hidden;
  transition: border-color .25s var(--tg-ease);
}
.tg-acc[open] { border-color: rgba(200,161,90,.3); }
.tg-acc > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tg-s4);
  padding: var(--tg-s4) var(--tg-s5);
  min-height: var(--tg-tap);
  cursor: pointer;
  list-style: none;
  transition: background .2s var(--tg-ease);
}
.tg-acc > summary::-webkit-details-marker { display: none; }
.tg-acc > summary:hover { background: rgba(255,255,255,.025); }
.tg-acc-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tg-acc-t b {
  font-family: var(--tg-display);
  font-size: 1.12rem; font-weight: 600; color: var(--tg-text);
  letter-spacing: .01em;
}
.tg-acc > summary::after {
  content: '+';
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid rgba(200,161,90,.42);
  border-radius: 50%;
  font-family: var(--tg-display);
  font-size: 1.15rem; line-height: 1; font-weight: 400;
  color: var(--tg-gold-bright);
  transition: background .2s var(--tg-ease), transform .2s var(--tg-ease);
}
.tg-acc[open] > summary::after {
  content: '\2212';
  background: var(--tg-gold-wash);
}
.tg-acc-body {
  padding: 0 var(--tg-s5) var(--tg-s5);
  border-top: 1px solid var(--tg-line-soft);
  padding-top: var(--tg-s4);
}
.tg-acc-body > :last-child { margin-bottom: 0; }
/* A step list inside a panel is already indented by the panel. */
.tg-acc-body .tg-steps { margin-top: var(--tg-s3); }
.tg-acc-body .tg-steps > li { padding-bottom: var(--tg-s5); }

/* The hero action row: the gold button leads, the rest follow quietly. */
.tg-cta { gap: var(--tg-s3); }

@media (max-width: 620px) {
  .tg-acc > summary { padding: var(--tg-s3) var(--tg-s4); }
  .tg-acc-body { padding: var(--tg-s4) var(--tg-s4) var(--tg-s4); }
  .tg-cta .tg-btn { width: 100%; justify-content: center; }
}

/* ---- Masthead on a phone -----------------------------------------------
   Uppercase and wide tracking made the six nav items far wider than they were,
   and on a 375px screen they wrapped into five stacked rows that filled the
   whole first screen. The in-page anchors are a convenience on a desktop and
   pure obstruction on a phone, where scrolling is the navigation, so they drop
   and the two real destinations stay. */
@media (max-width: 760px) {
  .tg-head .tg-nav a:not(.tg-btn) { display: none; }
  .tg-head .tg-nav { gap: var(--tg-s2); flex-wrap: nowrap; }
  .tg-head .tg-btn-sm { padding: var(--tg-s2) var(--tg-s3); font-size: .68rem; letter-spacing: .1em; }
  .tg-brand-t b { font-size: .95rem; }
  .tg-head-in { min-height: 60px; }
}

/* ===========================================================================
   TG_SITE_LOOK_V1 -- GROW in the website's uniform.

   The new tgsbarber.com and GROW now wear one standard: the same black, white
   and brass, square edges, gold corner marks, condensed uppercase headings
   and tracked uppercase labels. Everything above this line stays; this layer
   only restyles. Staff screens keep square corners rather than the site's cut
   corner, because a clipped corner would also clip drop-down menus, pickers
   and calendar pop-ups that open inside a card.
   To roll back: delete from this banner to the end of the file.
   =========================================================================== */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --tg-black: #050506;
  --tg-charcoal: #0b0b0d;
  --tg-charcoal-2: #121215;
  --tg-charcoal-3: #1a1a1f;
  --tg-line: #2e2e36;
  --tg-line-soft: #1f1f25;
  --tg-gold: #d6b064;
  --tg-gold-bright: #ecc987;
  --tg-gold-dim: #7a5e29;
  --tg-gold-deep: #7a5e29;
  --tg-gold-wash: rgba(214, 176, 100, 0.10);
  --tg-text: #ffffff;
  --tg-text-2: #e4e4e9;
  --tg-text-3: #a6a6b0;
  --tg-r-sm: 2px;
  --tg-r: 2px;
  --tg-r-lg: 2px;
  --tg-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tg-tick: 18px;
  --tg-leaf: linear-gradient(120deg, #7a5e29 0%, #d6b064 22%, #ecc987 46%, #d6b064 62%, #7a5e29 100%);
  --tg-edge: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body { background: var(--tg-black); }

/* Headings: condensed uppercase, as on the site. */
h1, h2, h3, h4, .tg-display { text-transform: uppercase; letter-spacing: 0.01em; }

/* Labels: tracked mono, as on the site. */
.tg-eyebrow, .tg-side h2, .tg-brand-t span, th, .tg-badge, .tg-tag, label > small {
  font-family: var(--tg-mono);
  letter-spacing: 0.16em;
}
.tg-eyebrow { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.24em; }

/* Masthead and tabs. */
.tg-mark { border-radius: 2px; }
.tg-brand-t b { font-family: var(--tg-display); text-transform: uppercase; letter-spacing: 0.08em; }
.tg-nav a, .tg-nav button {
  font-family: var(--tg-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 0;
}
.tg-nav [aria-current="page"], .tg-nav .is-active {
  background: transparent;
  border-color: transparent;
  color: var(--tg-gold-bright);
  box-shadow: inset 0 -2px 0 var(--tg-gold);
}

/* Sidebar: square panel, tracked labels, a gold bar on the current item. */
.tg-side { border-radius: 0; border-color: var(--tg-line); }
.tg-side-nav button, .tg-side-nav a {
  font-family: var(--tg-mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0;
  border: 0;
  border-left: 2px solid transparent;
}
.tg-side-nav button.is-active, .tg-side-nav a.is-active {
  background: var(--tg-gold-wash);
  border-left-color: var(--tg-gold);
}

/* Cards: square, hairline, two gold corner marks. */
.tg-card, .tg-module, .tg-stat, .tg-acc {
  border-radius: 0;
  border-color: var(--tg-line);
  background: linear-gradient(180deg, var(--tg-charcoal-2) 0%, var(--tg-charcoal) 100%);
  box-shadow: var(--tg-edge);
}
.tg-card, .tg-module { position: relative; }
.tg-card::before, .tg-module::before,
.tg-card::after, .tg-module::after {
  content: '';
  position: absolute;
  width: var(--tg-tick);
  height: var(--tg-tick);
  border: 0;
  border-radius: 0;
  opacity: 1;
  pointer-events: none;
  transition: none;
}
.tg-card::before, .tg-module::before {
  top: 0; left: 0; right: auto; bottom: auto;
  border-top: 2px solid var(--tg-gold);
  border-left: 2px solid var(--tg-gold);
}
.tg-card::after, .tg-module::after {
  top: auto; left: auto; right: 0; bottom: 0;
  border-bottom: 2px solid var(--tg-gold);
  border-right: 2px solid var(--tg-gold);
}
.tg-module:hover { transform: none; border-color: rgba(214, 176, 100, 0.45); }

/* Buttons: tracked mono uppercase; the primary is struck gold. */
.tg-btn {
  font-family: var(--tg-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 0;
}
.tg-btn:hover { transform: none; }
.tg-btn-primary {
  background: var(--tg-leaf);
  background-size: 200% 100%;
  border-color: var(--tg-gold-dim);
  color: #120e05;
}

/* Controls and status. */
.tg-input, .tg-select, .tg-textarea, input, select, textarea { border-radius: 2px; }
.tg-badge, .tg-tag, .tg-chip, .tg-pill { border-radius: 0; font-size: 0.64rem; text-transform: uppercase; }
.tg-tabs button, .tg-tab { border-radius: 0; font-family: var(--tg-mono); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.74rem; }
.tg-dialog, dialog, .tg-toast { border-radius: 0; }

/* TG_INFO_EASY_V1 -- big, plain Home buttons, the "type what you want" box, and a one-line
   explanation under every side-menu entry. */
.tg-easy-search { width: 100%; font-size: 1.1rem; padding: 14px 16px; min-height: 52px; }
.tg-easy-results { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; }
.tg-easy-hit { text-align: left; padding: 12px 14px; border-radius: var(--tg-r); border: 1px solid var(--tg-line);
  background: var(--tg-charcoal-2); color: var(--tg-text); cursor: pointer; font: inherit; }
.tg-easy-hit span { display: block; font-size: .85rem; color: var(--tg-text-2); margin-top: 2px; }
.tg-easy-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 14px; }
.tg-easy-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 96px; padding: 16px;
  border-radius: var(--tg-r-lg); border: 1px solid var(--tg-line); background: var(--tg-charcoal-2); color: var(--tg-text);
  cursor: pointer; font: inherit; text-align: left; }
.tg-easy-tile:hover, .tg-easy-hit:hover, .tg-easy-tile:focus-visible, .tg-easy-hit:focus-visible {
  border-color: var(--tg-gold); background: var(--tg-gold-wash); outline: none; }
.tg-easy-tile-label { font-size: 1.1rem; font-weight: 700; color: var(--tg-gold-bright); }
.tg-easy-tile-tip { font-size: .85rem; color: var(--tg-text-2); line-height: 1.3; }
.tg-side-nav button.tg-easy-item { flex-direction: column; align-items: flex-start; gap: 1px; padding-top: 7px; padding-bottom: 7px; }
.tg-side-nav button.tg-easy-item .tg-easy-label { display: block; }
.tg-side-nav button.tg-easy-item .tg-easy-tip { display: block; font-size: .74rem; font-weight: 400; color: var(--tg-text-3); line-height: 1.25; }
.tg-side-nav button.tg-easy-item.is-active .tg-easy-tip { color: var(--tg-text-2); }
@media (max-width: 900px) {
  .tg-side-nav button.tg-easy-item .tg-easy-tip { display: none; }
  .tg-easy-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* TG_SHOP_COPY_V1 -- the manufacturing line is a footnote, not a headline.
   Italic and a step smaller than the body copy so it reads as a note
   about the product rather than a claim competing with it. */
.tg-shop-origin {
  font-style: italic;
  font-size: .72rem;
  margin-top: var(--tg-s2);
}

/* TG_REWREF_V2 -- the programme row above a tab row. It carries no rule of
   its own, so the single underline belongs to the sections beneath it and
   the two rows read as one control rather than two stacked ones. */
.tg-tabs.tg-tabs-group {
  border-bottom: 0;
  margin-bottom: var(--tg-s2);
  gap: var(--tg-s3);
}
.tg-tabs.tg-tabs-group button {
  font-family: var(--tg-display, var(--tg-font));
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: var(--tg-s2) var(--tg-s3);
}

/* TG_OV_ROW_V1 -- portal overview cards stay three to a row until the screen is phone-narrow.
   Scoped to the overview grid only; every other .tg-grid-3 keeps its breakpoints. */
.tg-grid.tg-ov-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .tg-grid.tg-ov-grid { grid-template-columns: 1fr; } }


.tg-shop-card { gap: 10px; }
.tg-shop-card > .tg-shop-title { margin: 0; }
.tg-shop-card > .tg-shop-purpose,
.tg-shop-card > .tg-shop-scent,
.tg-shop-card > .tg-shop-desc,
.tg-shop-card > .tg-shop-origin { margin: 0; }
.tg-shop-card > .tg-shop-desc { min-height: 0; }
.tg-shop-card > .tg-shop-scent { line-height: 1.45; }
.tg-shop-card > .tg-shop-origin { line-height: 1.4; }
.tg-shop-card > .tg-shop-foot { gap: 10px; padding-top: 4px; }
.tg-shop-details summary { cursor: pointer; color: var(--tg-gold); }
.tg-shop-details p { margin: 8px 0 0; line-height: 1.45; }
.tg-shop-details summary:focus-visible { outline: 2px solid var(--tg-gold); outline-offset: 3px; }

.tg-shop-buy-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.tg-shop-buy-row > .tg-btn { flex: 0 0 auto; padding-left: 12px; padding-right: 12px; }
.tg-shop-backorder { font-size: .7rem; font-style: italic; line-height: 1.4; white-space: nowrap; }

/* TG_PORTAL_POLISH_V1: customer portal only. */
.tg-portal-polish .tg-portal-content { min-width: 0; }
.tg-portal-polish .tg-wrap-pad { padding-top: 24px; padding-bottom: 32px; }
.tg-portal-polish .tg-app { gap: 24px; }
.tg-portal-polish .tg-side { padding: 12px; background: linear-gradient(180deg,#121214,#0d0d0f); }
.tg-portal-polish .tg-side h2 { font-size: .7rem; line-height: 1.4; margin: 10px 8px 8px; color: #b4b4bd; }
.tg-portal-polish .tg-side h2:not(:first-child) { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--tg-line-soft); }
.tg-portal-polish .tg-side .tg-btn { min-height: 42px; }
.tg-portal-polish .tg-portal-content .tg-card { padding: 22px; }
.tg-portal-polish .tg-portal-content .tg-card-head { margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.tg-portal-polish .tg-portal-content h2 { font-size: clamp(1.5rem,1.2rem + .65vw,1.9rem); line-height: 1.16; }
.tg-portal-polish .tg-portal-content h3 { font-size: 1.18rem; line-height: 1.25; }
.tg-portal-polish .tg-portal-content p { line-height: 1.55; }
.tg-portal-polish .tg-portal-content .tg-stack > p + p { margin-top: 8px; }
.tg-portal-polish .tg-portal-content .tg-stack > p + .tg-row { margin-top: 18px; }
.tg-portal-polish .tg-portal-content .tg-card > p:last-child,
.tg-portal-polish .tg-portal-content .tg-stack > p:last-child { margin-bottom: 0; }
.tg-portal-polish .tg-portal-content .tg-muted { color: #a3a3ae; }
.tg-portal-polish .tg-portal-content .tg-tabs { margin-bottom: 20px; gap: 8px; }
.tg-portal-polish .tg-portal-content .tg-row { row-gap: 10px; }
.tg-portal-polish .tg-portal-content .tg-btn:not(.tg-btn-sm) { min-height: 44px; }
.tg-portal-polish .tg-portal-content input:not([type=checkbox]):not([type=radio]),
.tg-portal-polish .tg-portal-content select,
.tg-portal-polish .tg-portal-content textarea { border-color: #424249; background-color: #0e0e11; }
.tg-portal-polish .tg-portal-content label { line-height: 1.4; }
.tg-portal-polish .tg-portal-content .tg-hint { line-height: 1.5; }
.tg-portal-polish .tg-portal-content ul { padding-left: 20px; line-height: 1.6; }
.tg-portal-polish .tg-portal-content li + li { margin-top: 7px; }
.tg-portal-polish .tg-ov-grid .tg-card { display: flex; flex-direction: column; }
.tg-portal-polish .tg-ov-grid .tg-card > .tg-row:last-child { margin-top: auto; padding-top: 14px; }
.tg-portal-polish .tg-portal-content .tg-table th,
.tg-portal-polish .tg-portal-content .tg-table td { padding: 12px 14px; line-height: 1.45; vertical-align: middle; }
.tg-portal-polish .tg-portal-content .tg-table tbody tr:nth-child(even) { background: rgba(255,255,255,.025); }
.tg-portal-polish .tg-portal-content details { border-top: 1px solid var(--tg-line-soft); padding-top: 10px; }
.tg-portal-polish .tg-portal-content details summary { cursor: pointer; color: var(--tg-gold-bright); line-height: 1.5; }
.tg-portal-polish .tg-portal-content details[open] summary { margin-bottom: 8px; }
.tg-portal-polish .tg-shop-card .tg-shop-details { border: 0; padding-top: 0; }
.tg-portal-polish .tg-shop-card .tg-shop-title { font-size: 1.02rem; line-height: 1.3; }
.tg-portal-polish .tg-shop-card .tg-shop-purpose { color: var(--tg-text); }
.tg-portal-polish .tg-shop-card .tg-shop-scent { color: var(--tg-text-2); font-size: .86rem; }
.tg-portal-polish .tg-shop-card .tg-shop-origin { font-size: .72rem; }
.tg-portal-polish .tg-shop-backorder { font-size: .7rem; }
.tg-portal-polish .tg-cart-row { padding-top: 18px; padding-bottom: 18px; gap: 16px; }
.tg-portal-polish .tg-cart-main p { margin-bottom: 6px; }
.tg-portal-polish .tg-cart-name { color: var(--tg-text); }
.tg-portal-polish .tg-cart-qty-n { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.tg-portal-polish .tg-portal-content[data-view="signin"],
.tg-portal-polish .tg-portal-content[data-view="enroll"],
.tg-portal-polish .tg-portal-content[data-view="password"],
.tg-portal-polish .tg-portal-content[data-view="verify"] { width: 100%; max-width: 720px; }
.tg-portal-polish .tg-game--embedded .tg-game-header { margin-bottom: 20px; }
.tg-portal-polish .tg-game--embedded .tg-gtabs { gap: 8px; margin-bottom: 18px; }
.tg-portal-polish .tg-game--embedded .tg-game-card { padding: 18px; }
.tg-portal-polish .tg-foot { margin-top: 24px; padding-top: 24px; padding-bottom: 24px; }
@media (max-width: 1100px) and (min-width: 901px) {
 .tg-portal-polish .tg-app { grid-template-columns: 210px minmax(0,1fr); gap: 20px; }
 .tg-portal-polish .tg-head-in { gap: 16px; }
}
@media (max-width: 600px) {
 .tg-portal-polish .tg-wrap-pad { padding-top: 16px; padding-bottom: 24px; }
 .tg-portal-polish .tg-portal-content .tg-card { padding: 16px; }
 .tg-portal-polish .tg-portal-content .tg-card-head { margin-bottom: 12px; }
 .tg-portal-polish .tg-portal-content .tg-table th,
 .tg-portal-polish .tg-portal-content .tg-table td { padding: 10px; }
 .tg-portal-polish .tg-game--embedded .tg-game-card { padding: 14px; }
}

/* TG_PORTAL_PASSWORD_LINK_V1 */
.tg-portal-polish .tg-portal-content .tg-password-help { border: 0; padding: 0 2px; }
.tg-portal-polish .tg-password-help > summary { font-size: .86rem; text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.tg-portal-polish .tg-password-help > form { margin-top: 14px; padding: 20px; border: 1px solid var(--tg-line-soft); background: var(--tg-charcoal); }
.tg-portal-polish .tg-password-help > summary:focus-visible { outline: 2px solid var(--tg-gold); outline-offset: 4px; }

.tg-portal-polish .tg-card-help > .tg-card { margin-top: 14px; }

/* TG_PORTAL_REFINEMENT_V2 */
.tg-portal-polish .tg-side h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 10px; }
.tg-portal-polish .tg-ov-grid .tg-module { display: flex; flex-direction: column; align-items: flex-start; }
.tg-portal-polish .tg-ov-grid .tg-module > p { flex: 1; }
.tg-portal-polish .tg-ov-grid .tg-module > .tg-btn:last-child { margin-top: 14px; }
.tg-portal-polish .tg-portal-content[data-view="book"] .tg-grid-2 { align-items: stretch; }
.tg-portal-polish .tg-portal-content[data-view="book"] .tg-grid-2 > .tg-btn { height: 100%; min-height: 64px; }
.tg-portal-polish .tg-portal-content[data-view="overview"] .tg-table th .tg-fw600 + div { font-family: var(--tg-font); font-size: .86rem; font-weight: 500; letter-spacing: 0; text-transform: none; margin-top: 6px; color: var(--tg-text); }
.tg-portal-polish .tg-portal-content[data-view="overview"] .tg-table th .tg-badge { margin-bottom: 6px; }
.tg-portal-polish .tg-portal-content .tg-table td { font-variant-numeric: tabular-nums; }

/* TG_WELCOME_POINTS_V1 */
.tg-portal-polish .tg-welcome-points { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 18px 0; }
.tg-portal-polish .tg-welcome-point { padding: 16px; border: 1px solid var(--tg-line-soft); background: rgba(255,255,255,.02); }
.tg-portal-polish .tg-welcome-point dt { font-size: .82rem; font-weight: 600; color: var(--tg-text); }
.tg-portal-polish .tg-welcome-point dd { margin: 8px 0 0; display: flex; flex-direction: column; gap: 5px; }
.tg-portal-polish .tg-welcome-point strong { font-family: var(--tg-display); color: var(--tg-gold-bright); font-size: 2rem; line-height: 1.1; }
.tg-portal-polish .tg-welcome-point dd span { color: var(--tg-text-2); font-size: .8rem; line-height: 1.45; }
.tg-portal-polish .tg-welcome-point-goal { border-color: var(--tg-gold-dim); background: var(--tg-gold-wash); }
@media(max-width:560px) {
 .tg-portal-polish .tg-welcome-points { grid-template-columns: 1fr; gap: 8px; }
 .tg-portal-polish .tg-welcome-point { display: grid; grid-template-columns: 1fr 1.4fr; align-items: center; gap: 12px; padding: 12px 14px; }
 .tg-portal-polish .tg-welcome-point dd { margin: 0; }
}

/* TG_PORTAL_ACCOUNT_POLISH_V1 */
.tg-portal-polish .tg-account-stats { gap: 12px; }
.tg-portal-polish .tg-account-stats .tg-stat { padding: 16px; min-width: 0; background: rgba(255,255,255,.025); border: 1px solid var(--tg-line-soft); }
.tg-portal-polish .tg-account-stats .tg-stat:first-child { background: var(--tg-gold-wash); border-color: var(--tg-gold-dim); }
.tg-portal-polish .tg-account-stats .tg-stat .k { font-size: .72rem; letter-spacing: .08em; line-height: 1.5; }
.tg-portal-polish .tg-account-stats .tg-stat .v { font-size: clamp(1.8rem,1.4rem + 1vw,2.3rem); line-height: 1.2; margin: 8px 0; font-variant-numeric: tabular-nums; }
.tg-portal-polish .tg-account-stats .tg-stat:first-child .v { color: var(--tg-gold-bright); }
.tg-portal-polish .tg-account-stats .tg-stat .s { font-size: .76rem; line-height: 1.4; }
.tg-portal-polish .tg-module-navigation { padding: 12px 16px 0; border: 1px solid var(--tg-line-soft); background: #101012; }
.tg-portal-polish .tg-module-navigation .tg-tabs { margin-bottom: 12px; }
.tg-portal-polish .tg-module-navigation .tg-tabs-group { margin-bottom: 8px; }
.tg-portal-polish .tg-reward-option { display: flex; flex-direction: column; gap: 12px; }
.tg-portal-polish .tg-reward-option .tg-card-head { margin-bottom: 0; align-items: flex-start; }
.tg-portal-polish .tg-reward-option > p { flex: 1; margin-bottom: 0; }
.tg-portal-polish .tg-reward-option > .tg-btn { align-self: flex-start; }
.tg-portal-polish .tg-portal-content .tg-dl { column-gap: 20px; row-gap: 12px; }
.tg-portal-polish .tg-portal-content .tg-dl dt { color: var(--tg-text-2); font-size: .86rem; line-height: 1.5; }
.tg-portal-polish .tg-portal-content .tg-dl dd { line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.tg-portal-polish .tg-portal-content code { overflow-wrap: anywhere; }
.tg-portal-polish .tg-care-content form { max-width: 640px; }
.tg-portal-polish .tg-portal-content progress { height: 10px; accent-color: var(--tg-gold); border: 0; border-radius: 0; overflow: hidden; }
.tg-portal-polish .tg-portal-content progress::-webkit-progress-bar { background: #28282e; }
.tg-portal-polish .tg-portal-content progress::-webkit-progress-value { background: var(--tg-gold); }
.tg-portal-polish .tg-portal-content progress::-moz-progress-bar { background: var(--tg-gold); }
@media(max-width:700px) {
 .tg-portal-polish .tg-account-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .tg-portal-polish .tg-account-stats .tg-stat { padding: 12px; }
 .tg-portal-polish .tg-module-navigation { padding: 10px 10px 0; }
}

/* TG_SIGNED_IN_REVIEW_V2 */
.tg-portal-polish .tg-portal-content .tg-grid > .tg-card { margin-top: 0; }
.tg-portal-polish .tg-portal-content .tg-account-stats .tg-stat .k { min-height: 2.9em; }
.tg-portal-polish .tg-portal-content[data-view="points"] .tg-grid-3 .tg-stat .k { font-size: .72rem; line-height: 1.5; }
.tg-portal-polish .tg-portal-content[data-view="points"] .tg-grid-3 .tg-stat .s { font-size: .76rem; line-height: 1.4; }
.tg-portal-polish .tg-portal-content[data-account="signed-in"] .tg-empty { padding: 20px 16px; }
.tg-portal-polish .tg-portal-content[data-account="signed-in"] .tg-empty h3 { font-size: 1.05rem; }
@media(min-width:1101px) {
 .tg-portal-polish .tg-portal-content .tg-account-stats { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

/* TG_PORTAL_SINGLE_LINE_NAV_V1 */
.tg-portal-polish .tg-module-navigation { display: flex; align-items: center; gap: 10px; padding: 6px 12px; overflow-x: auto; }
.tg-portal-polish .tg-module-navigation .tg-tabs { flex: 0 0 auto; flex-wrap: nowrap; gap: 2px; margin: 0; border-bottom: 0; }
.tg-portal-polish .tg-module-navigation .tg-tabs-group { margin: 0; padding-right: 10px; border-right: 1px solid var(--tg-line-soft); }
.tg-portal-polish .tg-module-navigation .tg-tab { white-space: nowrap; padding-left: 10px; padding-right: 10px; font-size: .7rem; letter-spacing: .1em; }
.tg-portal-polish .tg-care-content > .tg-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 4px; }
.tg-portal-polish .tg-care-content > .tg-tabs .tg-tab { white-space: nowrap; }

.tg-portal-polish .tg-side .tg-card-options { margin-top: 12px; padding-top: 12px; }
.tg-portal-polish .tg-side .tg-card-options summary { cursor: pointer; color: var(--tg-text-2); font-size: .8rem; }
.tg-portal-polish .tg-side .tg-card-options p { margin: 10px 0; line-height: 1.45; }

/* TG_PICS_EXISTING_V1 -- the existing-website gallery in I.N.F.O. The markup
   used these class names but the stylesheet had no rules for them, so the
   cards fell back to raw inline flow: ragged columns, uneven heights, and the
   status badge running on from the end of the caption instead of sitting on
   its own line. */
.tg-existing-photos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.tg-existing-photo { display: flex; flex-direction: column; gap: .6rem; padding: .75rem;
  border: 1px solid var(--line, #232a32); border-radius: 4px; background: var(--surface, #151a20); }
.tg-existing-photo > img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  background: var(--bg-deep, #08090b); border-radius: 2px; }
.tg-existing-photo .tg-stack { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.tg-existing-photo strong { line-height: 1.3; }

/* TG_STACK_SM_V1 -- .tg-stack-sm is used in four places in app-info.js and had
   no rule at all, so it rode on .tg-stack's full margin. It means "the tight
   version of a stack": same vertical rhythm, one step smaller. The second rule
   fixes a conflict introduced with the existing-photo card: that card lays its
   stack out with flex gap, and .tg-stack's margin-top stacks on top of it,
   which spaced the caption and badge twice as far apart as intended. Inside
   that card the gap is authoritative. */
.tg-stack-sm > * + * { margin-top: var(--tg-s2); }
.tg-existing-photo .tg-stack > * + * { margin-top: 0; }