/* ============================================================
   SOUTHWIND SUITE — shared components
   Built ONLY from tokens.css custom properties. No hardcoded
   colors, sizes, fonts, radii, or motion values.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text);
  background: var(--bg-atmosphere) fixed, var(--color-bg);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-7);
}

/* ---------- AppHeader ---------- */
.sw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.sw-brand {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-display);
  letter-spacing: var(--track-tight);
  line-height: 1;
}
.sw-brand em {
  font-style: italic;
  color: var(--color-accent-bright);
  text-shadow: var(--glow-accent-text);
}
.sw-brand-sub {
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-top: var(--space-1);
}
.sw-header-tools { display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 720px) {
  .sw-header { flex-direction: column; align-items: flex-start; }
  .sw-header-tools { width: 100%; }
  .sw-header-tools > * { flex: 1 1 auto; min-height: 40px; }
}

/* ---------- Card / Panel ---------- */
.sw-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-4) var(--space-3);
  box-shadow: var(--elevation-1);
}
.sw-card-title {
  font-size: var(--text-title);
  font-weight: 900;
  letter-spacing: var(--track-tight);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.sw-card-title .sub {
  font-size: var(--text-label);
  font-weight: 700;
  color: var(--color-text-dim);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* hero variant — accent wash + corner glints (GG hero-score recipe) */
.sw-card.hero {
  background: var(--accent-wash);
  border-color: var(--accent-border);
  position: relative;
  overflow: hidden;
  padding: var(--space-5) var(--space-5) var(--space-4);
}
.sw-card.hero::before,
.sw-card.hero::after {
  content: '';
  position: absolute;
  width: 180px; height: 180px;
  background: var(--accent-glint);
  pointer-events: none;
}
.sw-card.hero::before { top: -40%; right: -10%; }
.sw-card.hero::after  { bottom: -50%; left: -10%; opacity: 0.6; }
.sw-card.hero.breathe { animation: swBreathe var(--breathe); }

/* ---------- StatTile ---------- */
.sw-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sub);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  transition: transform var(--motion-fast) var(--ease-smooth),
              box-shadow var(--motion-fast) var(--ease-smooth);
}
a.sw-stat { text-decoration: none; color: inherit; cursor: pointer; }
.sw-stat:hover { transform: translateY(-2px); box-shadow: var(--elevation-2); }
.sw-stat .label {
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sw-stat .value {
  font-size: var(--text-stat-2);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
}
.sw-stat .trend {
  font-size: var(--text-label);
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.sw-stat.good  .value { color: var(--color-good); text-shadow: var(--glow-good-text); }
.sw-stat.warn  .value { color: var(--color-warn); text-shadow: var(--glow-warn-text); }
.sw-stat.bad   .value { color: var(--color-bad);  text-shadow: var(--glow-bad-text); }
.sw-stat.accent .value { color: var(--color-accent-bright); text-shadow: var(--glow-accent-text); }
.sw-stat.good { border-color: var(--good-border); background: linear-gradient(135deg, var(--good-bg), var(--color-surface)); }
.sw-stat.warn { border-color: var(--warn-border); background: linear-gradient(135deg, var(--warn-bg), var(--color-surface)); }
.sw-stat.bad  { border-color: var(--bad-border);  background: linear-gradient(135deg, var(--bad-bg),  var(--color-surface)); }

/* hero number — the biggest thing on the screen */
.sw-stat-hero {
  font-size: var(--text-stat);
  font-weight: 900;
  line-height: 1;
  letter-spacing: var(--track-stat);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-bright);
  text-shadow: var(--glow-accent-text);
}

.sw-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
}

/* ---------- LeaderboardRow ---------- */
.sw-lb { display: flex; flex-direction: column; gap: var(--space-1); }
.sw-lb-row {
  display: grid;
  grid-template-columns: 34px 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: background var(--motion-fast) var(--ease-smooth),
              border-color var(--motion-fast) var(--ease-smooth);
}
.sw-lb-row:hover { background: var(--color-surface-2); border-color: var(--color-border); }
.sw-lb-row .rank {
  font-weight: 900;
  font-size: var(--text-title);
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.sw-lb-row.t1 .rank { color: var(--color-gold); }
.sw-lb-row.t2 .rank { color: var(--color-silver); }
.sw-lb-row.t3 .rank { color: var(--color-bronze); }
.sw-lb-row.t1 { background: var(--gold-wash);   border-color: var(--color-gold); }
.sw-lb-row.t2 { background: var(--silver-wash); border-color: var(--color-border); }
.sw-lb-row.t3 { background: var(--bronze-wash); border-color: var(--color-border); }
.sw-lb-row .who { min-width: 0; }
.sw-lb-row .name {
  font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sw-lb-row .meta {
  font-size: var(--text-label);
  color: var(--color-text-dim);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.sw-lb-row .score {
  font-weight: 900;
  font-size: var(--text-title);
  font-variant-numeric: tabular-nums;
}
.sw-lb-row .delta { font-size: var(--text-label); font-weight: 900; }
.delta.up   { color: var(--color-good); }
.delta.down { color: var(--color-bad); }

/* ---------- Badge / Pill / StatusDot ---------- */
.sw-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-label);
  font-weight: 900;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-dim);
  white-space: nowrap;
}
.sw-pill.good { background: var(--good-bg); border-color: var(--good-border); color: var(--color-good); }
.sw-pill.warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--color-warn); }
.sw-pill.bad  { background: var(--bad-bg);  border-color: var(--bad-border);  color: var(--color-bad); box-shadow: var(--glow-bad); }
.sw-pill.info { background: var(--info-bg); color: var(--color-info); }
.sw-pill.accent {
  background: var(--accent-wash-strong);
  border-color: var(--accent-border);
  color: var(--color-accent-ink);
}
.sw-pill.gold { background: var(--gold-wash); border-color: var(--color-gold); color: var(--color-gold); }

.sw-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-text-faint);
  vertical-align: middle;
}
.sw-dot.good { background: var(--color-good); box-shadow: var(--glow-good); }
.sw-dot.warn { background: var(--color-warn); }
.sw-dot.bad  { background: var(--color-bad);  box-shadow: var(--glow-bad); }
.sw-dot.live { background: var(--color-accent-bright); box-shadow: var(--glow-accent); animation: swPulse 1.6s ease-in-out infinite; }

/* ---------- ProgressBar ---------- */
.sw-bar {
  height: 6px;
  background: var(--color-surface-2);
  border-radius: var(--radius-bar);
  overflow: hidden;
}
.sw-bar .fill {
  height: 100%;
  border-radius: var(--radius-bar);
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-bright));
  box-shadow: var(--glow-accent);
  transition: width var(--motion-enter) var(--ease-rise);
}
.sw-bar .fill.good { background: linear-gradient(90deg, var(--color-good), var(--color-good)); box-shadow: var(--glow-good); }
.sw-bar .fill.bad  { background: linear-gradient(90deg, var(--color-bad), var(--color-bad)); box-shadow: var(--glow-bad); }

/* ---------- Buttons ---------- */
.sw-btn {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 900;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-accent-ink);
  background: var(--accent-wash-strong);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-btn);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: transform var(--motion-fast) var(--ease-smooth),
              box-shadow var(--motion-fast) var(--ease-smooth);
}
.sw-btn:hover { transform: translateY(-1px); box-shadow: var(--glow-accent); }
.sw-btn.ghost { background: transparent; border-color: var(--color-border); color: var(--color-text-dim); }
.sw-btn.danger { background: var(--bad-bg); border-color: var(--bad-border); color: var(--color-bad); }
.sw-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- NeedsRow (action queue item) ---------- */
.sw-need {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-sub);
  transition: transform var(--motion-fast) var(--ease-smooth),
              box-shadow var(--motion-fast) var(--ease-smooth);
}
.sw-need:hover { transform: translateY(-1px); box-shadow: var(--elevation-2); }
.sw-need.critical { border-left-color: var(--color-bad); }
.sw-need.high     { border-left-color: var(--color-warn); }
.sw-need.info     { border-left-color: var(--color-info); }
.sw-need .title { font-weight: 700; }
.sw-need .title .clickable { cursor: pointer; }
.sw-need .title .clickable:hover { color: var(--color-accent-bright); }
.sw-need .detail { font-size: var(--text-label); color: var(--color-text-dim); margin-top: 2px; }
.sw-need .acts { display: flex; gap: var(--space-1); flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Module tile (launcher) ---------- */
.sw-mod {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  border-top: 3px solid var(--mod-accent, var(--color-accent));
  text-decoration: none;
  color: inherit;
  transition: transform var(--motion-fast) var(--ease-smooth),
              box-shadow var(--motion-fast) var(--ease-smooth);
}
.sw-mod:hover { transform: translateY(-2px); box-shadow: var(--elevation-3); }
.sw-mod { position: relative; }
/* corner external-link escape hatch on drillable tiles */
.sw-mod .mod-ext {
  position: absolute; top: var(--space-2); right: var(--space-2);
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: var(--radius-pill); text-decoration: none;
  color: var(--color-text-dim); border: 1px solid var(--color-border);
  font-size: var(--text-label);
  transition: color var(--motion-fast), border-color var(--motion-fast);
}
.sw-mod .mod-ext:hover { color: var(--color-text); border-color: var(--mod-accent, var(--color-accent)); }
.sw-mod .name { font-weight: 900; font-size: var(--text-title); letter-spacing: var(--track-tight); }
.sw-mod .desc { font-size: var(--text-label); color: var(--color-text-dim); }

/* live headline inside a module tile — the reason to open it */
.sw-mod .live { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-1) 0; min-height: 1em; }
.sw-mod .live .v {
  font-size: var(--text-stat-2);
  font-weight: 900;
  line-height: 1;
  letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-bright);
  text-shadow: var(--glow-accent-text);
}
.sw-mod .live .v.good { color: var(--color-good); text-shadow: var(--glow-good-text); }
.sw-mod .live .v.warn { color: var(--color-warn); text-shadow: var(--glow-warn-text); }
.sw-mod .live .v.bad  { color: var(--color-bad);  text-shadow: var(--glow-bad-text); }
.sw-mod .live .l {
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-text-dim);
}
.sw-mod.hot { border-color: var(--bad-border); }
.sw-mod.watch { border-color: var(--warn-border); }
/* compact utility tile — link-outs with no live feed yet (intentional, not broken) */
.sw-mod.mini {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-top-width: 1px;
  border-top-color: var(--color-border);
  border-left: 3px solid var(--mod-accent, var(--color-accent));
  background: transparent;
}
.sw-mod.mini .name { font-size: var(--text-body); }
.sw-mod.mini .desc::after { content: ' ↗'; }

/* ---------- Portfolio card (gradient, GG port3 / Dream Big tile recipe) ---------- */
.sw-pf {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border-soft);
  background: var(--pf-grad, var(--grad-default));
  color: var(--color-text);
  box-shadow: var(--elevation-1);
  cursor: pointer;
  transition: transform var(--motion-fast) var(--ease-smooth),
              box-shadow var(--motion-fast) var(--ease-smooth);
}
.sw-pf:hover { transform: translateY(-2px); box-shadow: var(--elevation-3); }
.sw-pf.sel { outline: 2px solid var(--color-text); outline-offset: -2px; }
.sw-pf::before {
  content: '';
  position: absolute; top: -40%; right: -10%;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 65%);
  pointer-events: none;
}
.sw-pf .pf-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.sw-pf .pf-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-title);
  letter-spacing: var(--track-tight);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sw-pf .pf-rev {
  font-size: var(--text-stat-2);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
}
.sw-pf .pf-meta {
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  opacity: 0.85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sw-pill.ondark {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.32);
  color: var(--color-text);
}
.sw-pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-3);
}

/* ---------- Overlay panel (360 drill-ins, ⌘K) ---------- */
.sw-overlay {
  position: fixed; inset: 0;
  background: rgba(6,10,20,0.7);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-6) var(--space-3);
  z-index: 100;
  overflow-y: auto;
}
.sw-overlay.open { display: flex; }
.sw-overlay .panel {
  width: 100%;
  max-width: 860px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-panel);
  padding: var(--space-5);
  animation: swRise var(--motion-enter) var(--ease-rise) both;
}

/* ---------- entry animation (orchestrated, staggered) ---------- */
@keyframes swRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.sw-enter { animation: swRise var(--motion-enter) var(--ease-rise) both; }
.sw-enter > * { animation: swRise var(--motion-enter) var(--ease-rise) both; }
.sw-enter > *:nth-child(1)  { animation-delay: calc(var(--stagger-step) * 0); }
.sw-enter > *:nth-child(2)  { animation-delay: calc(var(--stagger-step) * 1); }
.sw-enter > *:nth-child(3)  { animation-delay: calc(var(--stagger-step) * 2); }
.sw-enter > *:nth-child(4)  { animation-delay: calc(var(--stagger-step) * 3); }
.sw-enter > *:nth-child(5)  { animation-delay: calc(var(--stagger-step) * 4); }
.sw-enter > *:nth-child(6)  { animation-delay: calc(var(--stagger-step) * 5); }
.sw-enter > *:nth-child(7)  { animation-delay: calc(var(--stagger-step) * 6); }
.sw-enter > *:nth-child(8)  { animation-delay: calc(var(--stagger-step) * 7); }
.sw-enter > *:nth-child(9)  { animation-delay: calc(var(--stagger-step) * 8); }
.sw-enter > *:nth-child(10) { animation-delay: calc(var(--stagger-step) * 9); }
.sw-enter > *:nth-child(n+11) { animation-delay: calc(var(--stagger-step) * 10); }

@keyframes swBreathe {
  0%, 100% { box-shadow: var(--glow-accent); }
  50%      { box-shadow: var(--glow-accent-big); }
}
@keyframes swPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@keyframes swShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.sw-skeleton {
  border-radius: var(--radius-sub);
  background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-surface-2) 50%, var(--color-surface) 75%);
  background-size: 200% 100%;
  animation: swShimmer 1.3s ease-in-out infinite;
  min-height: 48px;
}
@keyframes swValueFlash {
  0%   { box-shadow: inset 0 0 0 999px var(--good-bg); }
  100% { box-shadow: inset 0 0 0 999px transparent; }
}
.sw-flash { animation: swValueFlash 1.1s ease-out; }

/* ---------- layout helpers ---------- */
.sw-grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.sw-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.sw-section { margin-bottom: var(--space-6); }
.sw-section-label {
  font-size: var(--text-label);
  font-weight: 900;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
@media (min-width: 900px) {
  .sw-grid-2 { grid-template-columns: 1fr 1fr; }
}

/* ---------- TV layout wrapper ---------- */
.tv-mode .sw-header-tools,
.tv-mode .sw-need .acts,
.tv-mode .no-tv { display: none !important; }
.tv-mode .app { max-width: none; padding: var(--space-5) var(--space-6); }
.tv-mode { overflow: hidden; }

/* ---------- Big-screen auto-fill (TV / wall display, no ?tv flag) ----------
   At >=1600px the 1180px column leaves dead side margins and reads sparse
   from across a room. Widen the shell and scale type/spacing up so the
   board fills the wall and stays legible. Chrome stays (kiosk strip is the
   explicit ?tv=1 mode only). */
@media (min-width: 1600px) {
  :root {
    --text-title: 21px;
    --text-body:  18px;
    --text-label: 13px;
    --text-stat:   clamp(96px, 7vw, 150px);
    --text-stat-2: clamp(40px, 3vw, 60px);
    --text-display: clamp(34px, 2.6vw, 48px);
  }
  .app { max-width: 1680px; padding: var(--space-7) var(--space-7); }
  .sw-pf-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .sw-grid-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .sw-stat-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (min-width: 1920px) {
  .app { max-width: 1860px; }
}

/* ---------- Landscape phone (short viewport): tighter rhythm, no clipping --- */
@media (max-height: 440px) and (orientation: landscape) {
  .app { padding: var(--space-3) var(--space-4) var(--space-5); }
  .sw-section { margin-bottom: var(--space-4); }
  .sw-overlay { align-items: flex-start; padding: var(--space-3); }
  .sw-overlay .panel { padding: var(--space-4); }
}