/* ==========================================================================
   Star South — Brand Toolkit 2026
   Drop-in stylesheet. Inline this in single-file HTML / Artifacts.
   ========================================================================== */

:root {
  /* --- Focal palette ------------------------------------------------- */
  --ss-navy:        #132041;
  --ss-apple:       #7BB856;
  --ss-pomegranate: #AD3150;
  --ss-sky:         #BCD8F0;

  /* --- Navy tonal range (tone-on-tone only, never new hues) ---------- */
  --ss-navy-900: #0C162E;
  --ss-navy-800: #132041;
  --ss-navy-700: #1B2A52;
  --ss-navy-600: #2B3A63;
  --ss-navy-500: #3D4C74;
  --ss-navy-300: #7A85A3;

  /* --- Neutrals ------------------------------------------------------ */
  --ss-white:      #FFFFFF;
  --ss-ground:     #F4F6F8;
  --ss-hairline:   #E6EBF0;
  --ss-hairline-dk: rgba(255,255,255,.14);   /* borders on dark */
  --ss-rule-dk:     rgba(255,255,255,.42);   /* structural grid + star on dark */
  --ss-ink:        #132041;
  --ss-ink-muted:  #5A6478;
  --ss-ink-invert: #FFFFFF;
  --ss-ink-invert-muted: rgba(255,255,255,.72);

  /* --- Accent slot: set ONE per composition -------------------------- */
  --ss-accent: var(--ss-apple);

  /* --- Gradients (one per composition) ------------------------------- */
  --ss-grad-hero:  linear-gradient(135deg, #132041 0%, #1B2A52 38%, #3A2350 70%, #41264C 100%);
  --ss-grad-apple: linear-gradient(120deg, #132041 0%, #2E4438 55%, #6FA653 100%);
  --ss-grad-sky:   linear-gradient(120deg, #132041 0%, #4A5F86 55%, #BCD8F0 100%);

  /* --- Type ---------------------------------------------------------- */
  --ss-serif: "Times New Roman", Times, "Liberation Serif", Georgia, serif;
  --ss-sans:  Helvetica, "Helvetica Neue", Arial, "Liberation Sans", system-ui, -apple-system, sans-serif;

  /* --- Shape --------------------------------------------------------- */
  --ss-r-lg: 28px;
  --ss-r-md: 16px;
  --ss-r-sm: 999px;
  --ss-hair: 1px;

  /* --- Rhythm (8pt grid) --------------------------------------------- */
  --ss-s1: 8px;  --ss-s2: 16px; --ss-s3: 24px;
  --ss-s4: 32px; --ss-s5: 48px; --ss-s6: 64px;
}

/* Accent switch — put on <body> or a section to swap the single accent. */
.ss-accent-apple       { --ss-accent: var(--ss-apple); }
.ss-accent-pomegranate { --ss-accent: var(--ss-pomegranate); }

/* ==========================================================================
   Base
   ========================================================================== */

.ss, body.ss {
  font-family: var(--ss-sans);
  color: var(--ss-ink);
  background: var(--ss-white);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Typography — "Times speaks. Helvetica explains."
   ========================================================================== */

.ss-eyebrow {
  font-family: var(--ss-sans);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ss-accent);
  margin: 0 0 var(--ss-s2);
}
.ss-eyebrow--sky { color: var(--ss-sky); }

.ss-title {                       /* covers and openers */
  font-family: var(--ss-serif);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 var(--ss-s3);
}

.ss-heading {                     /* one statement per section */
  font-family: var(--ss-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.2;
  margin: 0 0 var(--ss-s2);
}

.ss-subheading {                  /* card and panel titles */
  font-family: var(--ss-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 var(--ss-s1);
}

.ss-body   { font-family: var(--ss-sans); font-size: 15px; line-height: 1.6; }
.ss-body--muted { color: var(--ss-ink-muted); }

.ss-caption {
  font-family: var(--ss-sans);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ss-ink-muted);
}

/* The signature pairing: serif number, sans label. Always. */
.ss-figure {
  font-family: var(--ss-serif);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1;
  letter-spacing: -.015em;
  font-variant-numeric: lining-nums tabular-nums;
  display: block;
}
.ss-figure--accent { color: var(--ss-accent); }
.ss-figure-label {
  font-family: var(--ss-sans);
  font-size: 12px;
  line-height: 1.35;
  color: var(--ss-ink-muted);
  margin-top: var(--ss-s1);
  display: block;
}

/* ==========================================================================
   Grounds
   ========================================================================== */

.ss-dark.ss-dark {
  background: var(--ss-navy);
  color: var(--ss-ink-invert);
}
.ss-dark .ss-body--muted,
.ss-dark .ss-figure-label,
.ss-dark .ss-caption { color: var(--ss-ink-invert-muted); }

.ss-gradient.ss-gradient        { background: var(--ss-grad-hero);  color: var(--ss-ink-invert); }
.ss-gradient--apple.ss-gradient--apple { background: var(--ss-grad-apple); color: var(--ss-ink-invert); }
.ss-gradient--sky.ss-gradient--sky     { background: var(--ss-grad-sky);   color: var(--ss-ink-invert); }

.ss-ground.ss-ground { background: var(--ss-ground); }

/* ==========================================================================
   Panels and cards — no shadows, ever
   ========================================================================== */

.ss-card {
  background: var(--ss-white);
  border: var(--ss-hair) solid var(--ss-hairline);
  border-radius: var(--ss-r-md);
  padding: var(--ss-s3);
}
.ss-card.ss-dark { border-color: transparent; }

/* Asymmetric panel: round two or three corners generously, leave the rest tight. */
.ss-panel        { border-radius: var(--ss-r-lg); overflow: hidden; }
.ss-panel--tl-br { border-radius: var(--ss-r-lg) 4px var(--ss-r-lg) 4px; }
.ss-panel--leaf  { border-radius: var(--ss-r-lg) 4px var(--ss-r-lg) var(--ss-r-lg); }
.ss-panel--tr    { border-radius: 4px var(--ss-r-lg) 4px 4px; }

/* Tonal curve: one per panel, tone-on-tone, no shadow, no stacking. */
.ss-curve { position: relative; overflow: hidden; }
.ss-curve::after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -42%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,255,255,.055);
  pointer-events: none;
}

/* Chip / tag */
.ss-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ss-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--ss-r-sm);
  border: var(--ss-hair) solid var(--ss-hairline);
  color: var(--ss-ink);
  background: var(--ss-white);
}
.ss-chip--accent { background: var(--ss-navy); color: var(--ss-white); border-color: transparent; }
.ss-dark .ss-chip { background: transparent; color: var(--ss-white); border-color: var(--ss-hairline-dk); }

/* ==========================================================================
   Hairline grid + star  (grid and star ALWAYS the same colour)
   ========================================================================== */

.ss-grid {
  position: relative;
  --ss-grid-colour: var(--ss-hairline);
  --ss-grid-x: 62%;
  --ss-grid-y: 58%;
}
.ss-grid.ss-dark, .ss-grid.ss-gradient,
.ss-grid.ss-gradient--apple, .ss-grid.ss-gradient--sky { --ss-grid-colour: var(--ss-rule-dk); }
.ss-grid::before,
.ss-grid::after {
  content: "";
  position: absolute;
  background: var(--ss-grid-colour);
  pointer-events: none;
}
.ss-grid::before { left: var(--ss-grid-x); top: 0; bottom: 0; width: 1px; }
.ss-grid::after  { top: var(--ss-grid-y); left: 0; right: 0; height: 1px; }

/* The intersection star: sits exactly on the crossing, same colour as the grid. */
.ss-grid-star {
  position: absolute;
  left: var(--ss-grid-x);
  top: var(--ss-grid-y);
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  color: var(--ss-grid-colour);
  pointer-events: none;
}
.ss-grid-star svg { width: 100%; height: 100%; display: block; fill: currentColor; }

/* Lone star — only on a gradient/opacity-framed ground, in open space. */
.ss-lone-star { position: absolute; width: 34px; height: 34px; color: var(--ss-white); opacity: .95; }
.ss-lone-star svg { width: 100%; height: 100%; fill: currentColor; display: block; }

/* ==========================================================================
   Logo
   ========================================================================== */

.ss-logo { display: inline-block; line-height: 0; }
.ss-logo svg { display: block; height: 100%; width: auto; fill: currentColor; }
.ss-logo--sm svg { height: 26px; }
.ss-logo--md svg { height: 38px; }
.ss-logo--lg svg { height: 64px; }
.ss-dark .ss-logo, .ss-gradient .ss-logo { color: var(--ss-white); }
.ss-logo { color: var(--ss-navy); }

/* Division lockup: wordmark with the division name beneath, Helvetica caps. */
.ss-lockup { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.ss-lockup__division {
  font-family: var(--ss-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ==========================================================================
   Dashboard scaffolding
   ========================================================================== */

.ss-shell { max-width: 1280px; margin: 0 auto; padding: var(--ss-s5) var(--ss-s4); }

.ss-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ss-s3);
  padding-bottom: var(--ss-s3);
  border-bottom: var(--ss-hair) solid var(--ss-hairline);
  margin-bottom: var(--ss-s5);
}

.ss-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ss-s2);
}
.ss-kpi { padding: var(--ss-s3); border-radius: var(--ss-r-md); border: var(--ss-hair) solid var(--ss-hairline); }
.ss-kpi.ss-dark   { border-color: transparent; }
.ss-kpi--accent   { background: var(--ss-accent); color: var(--ss-white); border-color: transparent; }
.ss-kpi--accent .ss-figure-label { color: rgba(255,255,255,.85); }

.ss-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--ss-s2); }
.ss-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--ss-s2); }

/* Gutter star: four panels meet, the gap between their rounded inner corners
   forms the star. Star radius == panel corner radius. */
.ss-gutter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  position: relative;
}
.ss-gutter > * { border-radius: var(--ss-r-md); }
.ss-gutter__star {
  position: absolute; left: 50%; top: 50%;
  width: 22px; height: 22px; transform: translate(-50%,-50%);
  color: var(--ss-navy); pointer-events: none;
}
.ss-gutter__star svg { width: 100%; height: 100%; fill: currentColor; display: block; }

/* ==========================================================================
   Progress, tracks, deltas
   ========================================================================== */

.ss-track { height: 8px; border-radius: var(--ss-r-sm); background: var(--ss-sky); overflow: hidden; }
.ss-track__fill { height: 100%; border-radius: var(--ss-r-sm); background: var(--ss-navy); }
.ss-track__fill--accent { background: var(--ss-accent); }

.ss-delta { font-family: var(--ss-sans); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.ss-delta--up   { color: var(--ss-apple); }
.ss-delta--down { color: var(--ss-pomegranate); }

/* ==========================================================================
   Tables
   ========================================================================== */

.ss-table { width: 100%; border-collapse: collapse; font-family: var(--ss-sans); font-size: 14px; }
.ss-table thead th {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ss-ink-muted); text-align: left;
  padding: 0 var(--ss-s2) var(--ss-s1); border-bottom: var(--ss-hair) solid var(--ss-hairline);
}
.ss-table tbody td { padding: 12px var(--ss-s2); border-bottom: var(--ss-hair) solid var(--ss-hairline); }
.ss-table tbody tr:last-child td { border-bottom: 0; }
.ss-table .ss-num { font-family: var(--ss-serif); font-size: 17px; font-variant-numeric: lining-nums tabular-nums; text-align: right; }

/* ==========================================================================
   Footer
   ========================================================================== */

.ss-footer {
  margin-top: var(--ss-s6);
  padding-top: var(--ss-s3);
  border-top: var(--ss-hair) solid var(--ss-hairline);
  display: flex; justify-content: space-between; gap: var(--ss-s3); flex-wrap: wrap;
  font-family: var(--ss-sans); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ss-ink-muted);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 760px) {
  .ss-shell { padding: var(--ss-s3) var(--ss-s2); }
  .ss-gutter { grid-template-columns: 1fr; }
  .ss-gutter__star { display: none; }
  .ss-grid::before { display: none; }
  .ss-grid-star { display: none; }
  .ss-topbar { flex-direction: column; align-items: flex-start; }
}

/* Wide content must scroll inside its own container, not the page. */
.ss-scroll-x { overflow-x: auto; }

@media print {
  .ss-card, .ss-kpi { break-inside: avoid; }
}