/* ==========================================================================
   krakentix · designs
   Visual-only skins over the app's own classes. Nothing here changes layout
   order, data or interaction; it re-points the app's --color-* tokens and
   restyles surfaces, type and shape.

   Designs: B&W Sharp (default) · Original (the app's own CSS, no skin) · Ink
   The header's theme button cycles each one's light and dark mode.

   1. Tokens       the --k-* set per design (light, then dark via :has(.dark-mode))
   2. Bridge       maps --k-* tokens onto the app's --color-* tokens
   3. Shared       table lines, row highlight, help dialog
   4. Flourishes   mini-map glow, Ink's kept chip

   Rules every skin keeps: tabular numerals, superscript $, tight number
   tracking, green/red only for money.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
html[data-design] {
  --k-font-jb: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --k-font-inter: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* defaults, overridden per design */
  --k-font-ui: var(--k-font-inter);
  --k-font-num: var(--k-font-jb);
  --k-radius-outer: clamp(22px, 5vw, 40px);
  --k-card-pad: clamp(12px, 3vw, 24px);
  --k-glow-opacity: 0.4;
}

/* --------------------------------------------------------------------------
   2. Bridge — every non-original design feeds the app's own tokens
   -------------------------------------------------------------------------- */

html[data-design]:not([data-design="original"]) {
  background: var(--k-page);
  background-attachment: fixed;
}
html[data-design]:not([data-design="original"]) body {
  /* the app paints body inline for its own theme; skins paint <html> instead
     so fixed decoration (glow blobs) can sit between page and content */
  background: transparent !important;
  min-height: 100vh;
}
html[data-design]:not([data-design="original"]) body .app-container,
html[data-design]:not([data-design="original"]) body .app-container.dark-mode {
  --color-bg-main: var(--k-bg);
  --color-surface: var(--k-surface);
  --color-surface-muted: var(--k-surface-muted);
  --color-border-subtle: var(--k-border-subtle);
  --color-border-base: var(--k-border);
  --color-text-dim: var(--k-muted);
  --color-text-base: var(--k-text-2);
  --color-text-dark: var(--k-text);
  --color-accent-bg: var(--k-accent-soft);
  --color-accent-text: var(--k-accent);
  --color-success-bg: var(--k-pos-bg);
  --color-success-text: var(--k-pos-text);
  --color-success-primary: var(--k-pos);
  --color-danger-bg: var(--k-neg-bg);
  --color-danger-text: var(--k-neg-text);
  --color-danger-primary: var(--k-neg);
  --font-sans: var(--k-font-ui);
  --font-mono: var(--k-font-num);
  --radius-outer: var(--k-radius-outer);
  --radius-inner: max(4px, calc(var(--k-radius-outer) - var(--k-card-pad)));
  /* search field matches the cards; designs can override with --k-input-r */
  --radius-header: var(--k-input-r, var(--k-radius-outer));

  background-color: transparent;
  font-family: var(--k-font-ui);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}


/* --------------------------------------------------------------------------
   1b. Ink — the app's own palette, containers and hierarchy as a base,
   then recolored in Kraken navy ink and ice.
   -------------------------------------------------------------------------- */

html[data-design="o-ink"] {
  --k-page: #dce5eb;
  --k-bg: #dce5eb;
  --k-surface: #ebeff3;
  --k-surface-muted: rgba(255, 255, 255, 0.4);
  --k-border: rgba(79, 84, 127, 0.2);
  --k-border-subtle: rgba(79, 84, 127, 0.1);
  --k-text: #4e537d;
  --k-text-2: #4f547f;
  --k-muted: rgba(79, 84, 127, 0.7);
  --k-accent: #005670;
  --k-accent-soft: #a7e4e9;
  --k-glow: #a7e4e9;
  --k-glow-opacity: 0.9;
  --k-pos: #059669;
  --k-pos-bg: #93d7c2;
  --k-pos-text: #006948;
  --k-neg: #dc2626;
  --k-neg-bg: #fecaca;
  --k-neg-text: #7f1d1d;
  --k-radius-outer: clamp(9px, 3vw, 18px);
  --k-card-pad: clamp(12px, 3vw, 24px);
  --k-font-ui: ui-sans-serif, system-ui, sans-serif;
  --k-font-num: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
html[data-design="o-ink"]:has(.dark-mode) {
  --k-page: #42476e;
  --k-bg: #42476e;
  --k-surface: #4f547f;
  --k-surface-muted: rgba(0, 0, 0, 0.15);
  --k-border: rgba(191, 201, 216, 0.2);
  --k-border-subtle: rgba(191, 201, 216, 0.1);
  --k-text: #ebeff3;
  --k-text-2: #bfc9d8;
  --k-muted: rgba(191, 201, 216, 0.7);
  --k-accent: #a7e4e9;
  --k-accent-soft: rgba(167, 228, 233, 0.15);
  --k-glow: #a7e4e9;
  --k-glow-opacity: 0.35;
  --k-pos: #34d399;
  --k-pos-bg: rgba(0, 86, 112, 0.6);
  --k-pos-text: #a7e4e9;
  --k-neg: #f87171;
  --k-neg-bg: rgba(185, 28, 28, 0.4);
  --k-neg-text: #fca5a5;
}
/* Ink overrides on top of the Original base */
html[data-design="o-ink"] {
  --k-page: #cdd9df;
  --k-bg: #cdd9df;
  --k-surface: #e6eef2;
  --k-text: #001628;
  --k-text-2: #24465a;
  --k-muted: rgba(0, 22, 40, 0.6);
  --k-border: rgba(0, 22, 40, 0.18);
  --k-border-subtle: rgba(0, 22, 40, 0.09);
  --k-accent: #355464;
  --k-accent-soft: #99d9d9;
}
html[data-design="o-ink"]:has(.dark-mode) {
  --k-page: #001628;
  --k-bg: #001628;
  --k-surface: #0b2c47;
  --k-surface-muted: rgba(0, 0, 0, 0.2);
  --k-text: #eaf6f7;
  --k-text-2: #b9d6dc;
  --k-muted: rgba(185, 214, 220, 0.6);
  --k-border: rgba(153, 217, 217, 0.2);
  --k-border-subtle: rgba(153, 217, 217, 0.1);
  --k-accent: #99d9d9;
  --k-accent-soft: rgba(153, 217, 217, 0.15);
}

/* --------------------------------------------------------------------------
   1d. Black & white family — grayscale, with a faint green and red tint on
   gains and losses only. Each variant changes type, radius or structure.
   -------------------------------------------------------------------------- */

html[data-design^="bw-"] {
  --k-page: #ffffff;
  --k-bg: #ffffff;
  --k-surface: #ffffff;
  --k-surface-muted: #ffffff;
  --k-card: #ffffff;
  --k-border: #000000;
  --k-border-subtle: #dcdcdc;
  --k-text: #000000;
  --k-text-2: #1a1a1a;
  --k-muted: #5c5c5c;
  --k-accent: #000000;
  --k-accent-soft: #efefef;
  --k-glow: #c9c9c9;
  --k-glow-opacity: 0.6;
  --k-pos: #4f8a68;
  --k-pos-bg: #edf5ef;
  --k-pos-text: #1f4a34;
  --k-neg: #a35a5a;
  --k-neg-bg: #f7eeee;
  --k-neg-text: #6b2a2a;
  --k-radius-outer: 0px;
  --k-card-pad: 14px;
  --k-font-ui: "Inter", -apple-system, system-ui, sans-serif;
  --k-font-num: "JetBrains Mono", ui-monospace, monospace;
  --k-shadow: none;
  --k-shadow-sm: none;
}
html[data-design^="bw-"]:has(.dark-mode) {
  --k-page: #000000;
  --k-bg: #000000;
  --k-surface: #000000;
  --k-surface-muted: #000000;
  --k-card: #000000;
  --k-border: #ffffff;
  --k-border-subtle: #333333;
  --k-text: #ffffff;
  --k-text-2: #e6e6e6;
  --k-muted: #9a9a9a;
  --k-accent: #ffffff;
  --k-accent-soft: #1c1c1c;
  --k-glow: #2e2e2e;
  --k-pos: #7fb797;
  --k-pos-bg: #0f1a14;
  --k-pos-text: #b9dcc6;
  --k-neg: #c48a8a;
  --k-neg-bg: #1a1010;
  --k-neg-text: #e6c2c2;
}

/* B&W · Sharp — hard edges, uppercase section heads */
/* Sharp: softer card outlines; dark outlines lean a touch more blue */
html[data-design="bw-sharp"] body .app-container .season-card { border-color: #d3dfe4; }
html[data-design="bw-sharp"]:has(.dark-mode) body .app-container .season-card { border-color: #1b3646; }

/* Sharp: a barely-there ice cast in the blacks and whites, and cleaner
   (less muddy) green / red that still read as a tint, not a highlight */
html[data-design="bw-sharp"] {
  --k-page: #f5f9fb;
  --k-bg: #f5f9fb;
  --k-surface: #f5f9fb;
  --k-surface-muted: #f5f9fb;
  --k-card: #f5f9fb;
  --k-border: #04101a;
  --k-border-subtle: #d6e1e6;
  --k-text: #04101a;
  --k-text-2: #102029;
  --k-muted: #546670;
  --k-accent: #04101a;
  --k-accent-soft: #e6eff3;
  --k-glow: #b6dbe3;
  --k-glow-opacity: 0.75;
  --k-pos: #5b9c80;
  --k-pos-bg: #eaf4ef;
  --k-pos-text: #2b6a50;
  --k-neg: #c47b7f;
  --k-neg-bg: #f8eeee;
  --k-neg-text: #8f4a4e;
}
html[data-design="bw-sharp"]:has(.dark-mode) {
  --k-page: #030b12;
  --k-bg: #030b12;
  --k-surface: #030b12;
  --k-surface-muted: #030b12;
  --k-card: #030b12;
  --k-border: #eef6fa;
  --k-border-subtle: #16242d;
  --k-text: #eef6fa;
  --k-text-2: #d6e4ea;
  --k-muted: #8a9ca5;
  --k-accent: #eef6fa;
  --k-accent-soft: #0d1c25;
  --k-glow: #2a6f7c;
  --k-glow-opacity: 0.65;
  --k-pos: #72bc9b;
  --k-pos-bg: #0e1f19;
  --k-pos-text: #a9dcc4;
  --k-neg: #dc9095;
  --k-neg-bg: #24151a;
  --k-neg-text: #efc0c3;
}
/* Sharp: mini-map guide text a step up so it reads at a glance */
html[data-design="bw-sharp"] body .app-container .section-title {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   3. Shared
   -------------------------------------------------------------------------- */

/* Table lines — B&W: hairlines connect the ledger rows and the sales rows */
html[data-design^="bw-"] body .app-container .ledger-table { border-spacing: 0; }
html[data-design^="bw-"] body .app-container .ledger-table tbody td { border-bottom: 1px solid var(--k-border-subtle); padding-block: 12px; }
html[data-design^="bw-"] body .app-container .ledger-table tbody tr:last-child td { border-bottom: 0; }
html[data-design^="bw-"] body .app-container .ledger-table .divider-row { display: none; }
/* drop the boxes around KEPT / SOLD / PAID — the lines carry the connection */
html[data-design^="bw-"] body .app-container .ledger-table .label-badge { background: transparent !important; border: 0 !important; box-shadow: none; padding-inline: 0; color: var(--k-muted) !important; }
html[data-design^="bw-"] body .app-container .ledger-table .kept-row .label-badge { color: var(--k-text) !important; font-weight: 800; }
html[data-design^="bw-"] body .app-container .sales-table-wrapper tbody tr { border-bottom: 0; }
html[data-design^="bw-"] body .app-container .sales-table-wrapper tbody td { border-bottom: 1px solid var(--k-border-subtle); }
html[data-design^="bw-"] body .app-container .sales-table-wrapper tbody tr:last-child td { border-bottom: 0; }

/* B&W: the mini-map glow is the only soft effect — no other shadows */
html[data-design^="bw-"] body .app-container :is(.modal-content, .chart-tooltip, .stat-badge) { box-shadow: none; }

/* Click-to-row highlight: the app fades rows through --color-border-base,
   which is solid black/white in B&W. Use the soft accent wash instead. */
html[data-design]:not([data-design="original"]) body .app-container .row-highlight td {
  animation-name: kt-row-highlight;
}
@keyframes kt-row-highlight {
  0% { background-color: transparent; }
  10%, 90% { background-color: var(--color-accent-bg); }
  100% { background-color: transparent; }
}

/* Help dialog: a little wider than settings, bullets set in the body face */
.help-content { max-width: 380px; }
.help-lede { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: var(--color-text-base); }
.help-list { margin: 0 0 16px; padding-left: 16px; font-size: 12px; line-height: 1.7; color: var(--color-text-base); }
.help-list li { margin-bottom: 10px; }
.help-list li:last-child { margin-bottom: 0; }
.help-list strong { color: var(--color-text-dark); font-weight: 700; }
hans-footer:not(:defined) { display: block; min-height: 76px; }

/* --------------------------------------------------------------------------
   4. Flourishes
   -------------------------------------------------------------------------- */

/* Glow behind the attended-games dot grid (B&W) */
html[data-design^="bw-"] body .app-container .summary-item.full-width-mobile {
  position: relative;
  isolation: isolate;
}
html[data-design^="bw-"] body .app-container .summary-item.full-width-mobile::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -28px -36px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--k-glow) 0%, transparent 100%);
  opacity: var(--k-glow-opacity);
  filter: blur(18px);
  pointer-events: none;
}

/* Ink: the kept chip takes the navy ink, not the grey */
html[data-design="o-ink"] body .app-container .kept-row .label-badge {
  background: var(--k-accent);
  color: var(--k-page);
}

/* --------------------------------------------------------------------------
   Link-preview card (?og) — 1200×630, just the title and the mini-map.
   Captured to og.png; never shown to visitors.
   -------------------------------------------------------------------------- */
html[data-og] body .app-container {
  min-height: 630px;
  padding: 56px 72px;
  display: flex;
  align-items: center;
}
html[data-og] body .app-container :is(.header-right, .header-subtitle, main, hans-footer, .summary-item:not(.full-width-mobile)) { display: none !important; }
html[data-og] body .app-container .dashboard-layout { max-width: none; width: 100%; }
html[data-og] body .app-container .header-system { gap: 40px; }
html[data-og] body .app-container .top-bar { width: auto; margin: 0; padding: 0; }
html[data-og] body .app-container .main-logo-icon { width: 34px; height: 34px; }
html[data-og] body .app-container .header-title { font-size: 26px; letter-spacing: 0.04em; }
html[data-og] body .app-container .summary-grid.global-summary { display: block; }
html[data-og] body .app-container .mini-map-header .attended-stat { font-size: 20px; }
html[data-og] body .app-container .mini-map-sub-stat { font-size: 14px; margin-top: 6px; }
html[data-og] body .app-container .mini-map-header { margin-bottom: 24px; }
html[data-og] body .app-container .mini-map-header .stat-badge { font-size: 22px; padding: 10px 16px; }
html[data-og] body .app-container .mini-map-grid { gap: 12px; }
html[data-og] body .app-container .mini-map-row { gap: 10px; flex-wrap: nowrap; }
html[data-og] body .app-container .mini-map-row.is-playoffs { padding-left: 54px; }
html[data-og] body .app-container .mini-map-dot { width: 26px; height: 26px; margin: 0; }
html[data-og] body .app-container .mini-map-row .mini-map-season-marker { min-width: 44px; font-size: 14px; padding: 4px 8px; }
html[data-og] body .app-container .mini-map-legend { font-size: 14px; gap: 28px; margin-top: 24px; padding-top: 20px; }
html[data-og] body .app-container .legend-item .dot { width: 12px; height: 12px; }
html[data-og] body .app-container .summary-item.full-width-mobile::before { inset: -60px -80px; filter: blur(40px); }