/* ================================================================
   USA Web School Multiplication Explorer (explorer2)
   Compact embedded layout - no header/footer, 1% page border
   ================================================================ */

/* ---- DESIGN TOKENS ---- */
:root {
  /* Warm Earth palette (default) */
  --navy: #6D4C2A;
  --navy-dark: #4E3520;
  --navy-light: #f5efe8;
  --navy-wash: #faf7f3;
  --burgundy: #6d0800;
  --green: #7c6a0a;
  --green-light: #fefce8;
  --cream: #efe7cf;

  /* Neutrals */
  --bg: #e8dfd4;
  --surface: #fffdf9;
  --surface-alt: #f9f5ef;
  --border: #d4c4ae;
  --border-light: #ebe3d6;

  /* Text */
  --text: #2c1f10;
  --text-secondary: #4a3728;
  --text-muted: #6b5744;
  --text-dim: #8a7560;

  /* Chart cell highlights */
  --prime-bg: #fef3c7;
  --composite-bg: #f5f0e6;
  --square-bg: #fde68a;
  --cube-bg: #ede9fe;
  --fib-bg: #dcfce7;
  --mult-bg: #fecaca;
  --selected-bg: #e8d5b8;
  --diag-bg: #f0e6ff;

  /* Semantic */
  --gold: #d97706;
  --gold-light: #fffbeb;

  /* Radius scale */
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Warm-tinted shadows */
  --shadow-xs: 0 1px 2px rgba(109,76,42,0.06);
  --shadow-sm: 0 1px 3px rgba(109,76,42,0.08), 0 1px 2px rgba(109,76,42,0.05);
  --shadow: 0 4px 6px -1px rgba(109,76,42,0.09), 0 2px 4px -2px rgba(109,76,42,0.06);
  --shadow-md: 0 10px 15px -3px rgba(109,76,42,0.1), 0 4px 6px -4px rgba(109,76,42,0.05);
  --shadow-lg: 0 20px 25px -5px rgba(109,76,42,0.12), 0 8px 10px -6px rgba(109,76,42,0.07);

  /* Motion */
  --transition: 200ms ease;
  --transition-fast: 150ms ease;

  /* Chart cell size - scales with breakpoints */
  --cell-size: 44px;

  /* Typography */
  --font: Verdana, Geneva, Tahoma, sans-serif;
  --font-mono: "Consolas", "SF Mono", monospace;
}


/* ---- RESET & BASE ---- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 5px;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}
img { max-width: 100%; display: block; }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--burgundy); }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; }
p { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
legend {
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
dl { margin: 0; }


/* ---- ACCESSIBILITY ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}


/* ---- BUTTONS ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.875rem;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--navy);
  min-height: 44px;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover {
  background: var(--navy-light);
  border-color: var(--navy);
  box-shadow: var(--shadow-xs);
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.btn-primary:hover {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
}
.btn-outline {
  background: transparent;
}
.btn-sm {
  font-size: 0.8125rem;
  padding: 0.375rem 0.75rem;
  min-height: 36px;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}


/* ---- DEFINITION POPOVER ---- */
.def-popover {
  position: fixed;
  z-index: 1000;
  padding: 0.5rem 0.875rem;
  background: var(--navy);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
  border-radius: var(--radius);
  max-width: 280px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}
.def-popover.visible {
  opacity: 1;
  visibility: visible;
}
[data-def] {
  cursor: help;
  transition: background var(--transition-fast);
  border-radius: 3px;
  padding: 0 2px;
  margin: 0 -2px;
}
[data-def]:hover,
[data-def]:focus {
  background: rgba(0,15,106,0.06);
}


/* ---- PANELS ---- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--border-light);
}
.panel-head h2 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--navy);
}
.panel-body {
  padding: 1.125rem;
}


/* ---- FORM CONTROLS ---- */
.field {
  display: grid;
  gap: 0.375rem;
}
.field-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-secondary);
}
select, .num-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9375rem;
  min-height: 44px;
  transition: border-color var(--transition-fast);
}
select:hover, .num-input:hover {
  border-color: #9ca3af;
}
select:focus, .num-input:focus {
  outline: 3px solid rgba(0,15,106,0.15);
  outline-offset: -1px;
  border-color: var(--navy);
}
input[type="range"] {
  width: 100%;
  accent-color: var(--navy);
  height: 6px;
  cursor: pointer;
}


/* ---- SETTINGS PANEL CONTENT ---- */
.stg-body {
  padding: 0;
}
.stg-section {
  /* sections self-pad via children */
}
.stg-head {
  padding: 0.625rem 0.875rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stg-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.25rem 0.875rem 0.375rem;
}
.stg-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-secondary);
}
.stg-size-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.stg-size-row input[type="range"] {
  flex: 1;
}
.stg-num {
  width: 3.5rem;
  min-height: 36px;
  padding: 0.25rem 0.375rem;
  text-align: center;
  font-size: 0.875rem;
}
.stg-size-row .btn {
  flex-shrink: 0;
  width: auto;
}

/* Setting item rows (checkboxes etc.) */
.setting-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.setting-item:hover {
  background: var(--navy-light);
}
.setting-item input[type="checkbox"] {
  accent-color: var(--navy);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.setting-divider {
  border: 0;
  border-top: 1px solid var(--border-light);
  margin: 0.25rem 0;
}


/* ---- APP LAYOUT ---- */
.app-shell {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  align-items: flex-start;
}
.chart-area {
  flex: 0 1 auto;
  min-width: 0;
}
.sidebar {
  flex: 0 0 320px;
  min-width: 280px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

/* Hide chart in test mode or when toggled off */
.app-shell.test-mode .chart-area,
.chart-area.chart-hidden {
  display: none;
}

/* Eye toggle dimmed state */
#btnToggleGrid.grid-hidden {
  opacity: 0.4;
}


/* ---- SIDEBAR ---- */
.sidebar > .tab-panel > .panel {
  border: none;
  border-radius: 0;
  box-shadow: none;
}


/* ---- CHART AREA ---- */
.chart-area {
  overflow: hidden;
  width: fit-content;
  max-width: 100%;
}

.chart-scroll {
  overflow: auto;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}


/* ---- CHART GRID & CELLS ---- */
.chart-grid {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  width: max-content;
}
.chart-cell {
  width: var(--cell-size);
  height: var(--cell-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 0;
  padding: 2px;
  text-align: center;
  position: relative;
  transition: background var(--transition-fast), transform 100ms ease;
  font-variant-numeric: tabular-nums;
}
.chart-cell:hover,
.chart-cell:focus-visible {
  z-index: 2;
  outline: 2px solid var(--navy);
  outline-offset: -1px;
  transform: scale(1.06);
}
.cell-val {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.15;
}
.cell-sub {
  font-size: 0.75rem;
  color: var(--text-dim);
  line-height: 1;
  margin-top: 1px;
}

/* Cell types */
.cell-corner {
  background: var(--navy);
}
.cell-corner .cell-val {
  color: #fff;
  font-size: 0.75rem;
}
.cell-corner .cell-sub {
  color: rgba(255,255,255,0.7);
}
.cell-header {
  font-weight: 800;
  background: var(--navy-light);
}
.cell-header .cell-val {
  font-weight: 800;
  color: var(--navy);
}
.cell-prime-h { background: var(--prime-bg); }
.cell-prime { background: var(--prime-bg); }
.cell-comp { background: var(--composite-bg); }
.cell-comp-h { background: var(--composite-bg); }
.cell-selected { background: var(--selected-bg) !important; }
.cell-selected.cell-header {
  box-shadow: inset 0 0 0 2px var(--navy);
}
.cell-selected:not(.cell-header):not(.cell-corner) {
  background: var(--gold-light) !important;
  box-shadow: inset 0 0 0 2.5px var(--navy), 0 0 12px rgba(245,158,11,0.25);
  z-index: 3;
}
.cell-selected:not(.cell-header):not(.cell-corner) .cell-val {
  color: var(--navy);
  font-size: 1rem;
}
.cell-selected:not(.cell-header):not(.cell-corner) .cell-sub {
  color: var(--navy);
}
.cell-crosshair { background: rgba(191,219,254,0.4) !important; }
.cell-square { background: var(--square-bg); }
.cell-match { background: rgba(255,251,235,0.6); box-shadow: inset 0 0 0 1px rgba(245,158,11,0.2); }
.cell-cube { box-shadow: inset 0 0 0 2px rgba(124,58,237,0.15); }
.cell-fib { outline: 2px dashed rgba(0,114,3,0.3); outline-offset: -2px; }
.cell-mult { background: var(--mult-bg); }
.cell-diag { background: var(--diag-bg); }
.cell-skip-h {
  background: var(--green-light) !important;
  box-shadow: inset 0 -3px 0 0 var(--green);
}
.cell-dimmed { opacity: 0.3; }


/* ---- TABS ---- */
.tab-nav {
  display: flex;
  gap: 2px;
  padding: 0 0.5rem;
}
.tab {
  flex: 1;
  padding: 0.625rem 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer;
  transition: color var(--transition), background var(--transition-fast);
  min-height: 40px;
  position: relative;
}
.tab:hover {
  color: var(--navy);
}
.tab.active {
  color: var(--navy);
  background: var(--surface);
  border-color: var(--border);
  z-index: 1;
}
.tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--surface);
}
.tab-icon {
  flex: 0 0 auto;
  padding: 0.625rem 0.875rem;
  font-size: 1.125rem;
  line-height: 1;
}
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}


/* ---- EXPLORER LAYOUT ---- */
.explorer-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface);
}
.explorer-hero {
  padding: 1rem 1.25rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
  text-align: center;
  background: var(--navy-light);
  border-bottom: 1px solid var(--border-light);
}
.explorer-card {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-light);
}
.explorer-card:last-child {
  border-bottom: 0;
}
.explorer-label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.375rem;
}


/* ---- FACT ROWS ---- */
.facts {
  display: grid;
  gap: 0;
  padding-left: 0.75rem;
}
.fact {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.5rem;
  padding: 0.3125rem 0;
  font-size: 0.875rem;
  align-items: baseline;
  border-bottom: 1px solid var(--border-light);
}
.fact:last-child {
  border-bottom: 0;
}
.fact dt {
  font-weight: 600;
  color: var(--text-secondary);
}
.fact dd {
  margin: 0;
  color: var(--text);
  word-break: break-word;
}

/* Trivia / Did you know */
.explorer-trivia {
  border-bottom: 0;
}
.trivia-list {
  margin: 0;
  padding: 0 0 0 0.75rem;
  list-style: none;
}
.trivia-list li {
  padding: 0.25rem 0;
  font-size: 0.8125rem;
  color: var(--text);
  line-height: 1.5;
  border-bottom: 1px solid var(--border-light);
}
.trivia-list li:last-child {
  border-bottom: 0;
}
.trivia-list li strong {
  color: var(--navy);
}


/* ---- PRACTICE & TEST ---- */
.practice-display {
  text-align: center;
  padding: 1.25rem 0 0.5rem;
}
.practice-problem {
  min-height: 2.75rem;
}
.practice-problem .katex {
  font-size: 1.75rem;
}
.practice-timer {
  font-size: 0.8125rem;
  color: var(--text-muted);
  min-height: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.practice-answer {
  min-height: 1.75rem;
  font-weight: 700;
  margin-top: 0.375rem;
  font-size: 0.9375rem;
}
.practice-answer.correct { color: var(--green); }
.practice-answer.wrong { color: #dc2626; }
.practice-answer.revealed { color: var(--text-muted); }

.practice-input {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  margin-bottom: 3rem;
}
.practice-num {
  font-size: 1.125rem;
  text-align: center;
  padding: 0.75rem;
}
.practice-scores {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.btn-reset-scores {
  align-self: flex-end;
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  min-height: auto;
}
.practice-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.625rem;
}
.stat {
  text-align: center;
  padding: 0.875rem 0.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
}
.stat-num {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
}
.stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 0.125rem;
  display: block;
}
.practice-extended {
  margin-top: 0.75rem;
  border-top: 1px solid var(--border-light);
  padding-top: 0.75rem;
  display: grid;
  gap: 0.25rem;
}
.ext-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.25rem 0;
  font-size: 0.8125rem;
}
.ext-label {
  color: var(--text-muted);
}
.ext-val {
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}


/* ================================================================
   COLOR THEMES
   ================================================================ */

body[data-theme="ocean"] {
  --navy: #0e7490; --navy-dark: #0a5a6f; --navy-light: #e0f7fa; --navy-wash: #f0fbfd;
  --bg: #d1e8eb; --surface: #ffffff; --surface-alt: #f0f9fa;
  --border: #b2d4da; --border-light: #dbeef1;
  --text: #0c2d35; --text-secondary: #1a4a54; --text-muted: #3b6b76; --text-dim: #5a8a94;
  --prime-bg: #e0f2fe; --composite-bg: #f0f9fa; --square-bg: #ccfbf1; --selected-bg: #a5d8e4;
  --gold: #f97316; --gold-light: #fff7ed; --green: #0d7377; --green-light: #e0faf4;
}

body[data-theme="forest"] {
  --navy: #2D5016; --navy-dark: #1e3a0e; --navy-light: #e8f0e2; --navy-wash: #f3f7f0;
  --bg: #d8e2d0; --surface: #fcfdf9; --surface-alt: #f1f5ed;
  --border: #bfcdb3; --border-light: #dde6d5;
  --text: #1a2810; --text-secondary: #2e4420; --text-muted: #4a6638; --text-dim: #6a8656;
  --prime-bg: #fef9e7; --composite-bg: #f1f5ed; --square-bg: #d9f99d; --selected-bg: #bbdba0;
  --gold: #ca8a04; --gold-light: #fefce8; --green: #2D5016; --green-light: #e8f5e0;
}

body[data-theme="dusk"] {
  --navy: #5B21B6; --navy-dark: #4414a0; --navy-light: #ede9fe; --navy-wash: #f5f3ff;
  --bg: #d8d0e8; --surface: #fdfcff; --surface-alt: #f5f3fb;
  --border: #c4b5d8; --border-light: #e4ddef;
  --text: #1e1035; --text-secondary: #362358; --text-muted: #5b4a7a; --text-dim: #7c6d98;
  --prime-bg: #fef3f2; --composite-bg: #f5f3fb; --square-bg: #e9d5ff; --selected-bg: #c4b5e0;
  --gold: #d97706; --gold-light: #fffbeb; --green: #6d28d9; --green-light: #ede9fe;
}

body[data-theme="slate"] {
  --navy: #334155; --navy-dark: #1e293b; --navy-light: #f1f5f9; --navy-wash: #f8fafc;
  --bg: #cbd5e1; --surface: #ffffff; --surface-alt: #f8fafc;
  --border: #94a3b8; --border-light: #e2e8f0;
  --text: #0f172a; --text-secondary: #1e293b; --text-muted: #475569; --text-dim: #64748b;
  --prime-bg: #f0f9ff; --composite-bg: #f8fafc; --square-bg: #e0e7ff; --selected-bg: #bfdbfe;
  --gold: #2563eb; --gold-light: #eff6ff; --green: #334155; --green-light: #f1f5f9;
}

body[data-theme="midnight"] {
  --navy: #60a5fa; --navy-dark: #93c5fd; --navy-light: #1e3a5f; --navy-wash: #172a45;
  --bg: #0b1120; --surface: #131d2e; --surface-alt: #182436;
  --border: #2a3f5f; --border-light: #1f3050;
  --text: #e2e8f0; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-dim: #64748b;
  --prime-bg: rgba(96,165,250,0.15); --composite-bg: rgba(148,163,184,0.1); --square-bg: rgba(167,139,250,0.2); --selected-bg: rgba(96,165,250,0.25);
  --gold: #fbbf24; --gold-light: rgba(251,191,36,0.15); --green: #34d399; --green-light: rgba(52,211,153,0.15);
}

body[data-theme="obsidian"] {
  --navy: #f59e0b; --navy-dark: #fbbf24; --navy-light: #2a2215; --navy-wash: #1f1a12;
  --bg: #0f0f0f; --surface: #1a1a1a; --surface-alt: #212121;
  --border: #3a3a3a; --border-light: #2d2d2d;
  --text: #e8e0d4; --text-secondary: #c8bfb0; --text-muted: #9a9080; --text-dim: #706858;
  --prime-bg: rgba(245,158,11,0.12); --composite-bg: rgba(154,144,128,0.1); --square-bg: rgba(245,158,11,0.2); --selected-bg: rgba(245,158,11,0.2);
  --gold: #f59e0b; --gold-light: rgba(245,158,11,0.15); --green: #d97706; --green-light: rgba(217,119,6,0.15);
}

body[data-theme="nord"] {
  --navy: #88c0d0; --navy-dark: #8fbcbb; --navy-light: #2e3440; --navy-wash: #272c36;
  --bg: #1e222a; --surface: #2e3440; --surface-alt: #3b4252;
  --border: #4c566a; --border-light: #434c5e;
  --text: #eceff4; --text-secondary: #d8dee9; --text-muted: #a3b1c2; --text-dim: #7b879a;
  --prime-bg: rgba(136,192,208,0.15); --composite-bg: rgba(76,86,106,0.3); --square-bg: rgba(180,142,173,0.2); --selected-bg: rgba(136,192,208,0.2);
  --gold: #ebcb8b; --gold-light: rgba(235,203,139,0.15); --green: #a3be8c; --green-light: rgba(163,190,140,0.15);
}


/* ================================================================
   TYPOGRAPHY OPTIONS
   ================================================================ */
body[data-font="system"]   { --font: "Segoe UI", system-ui, -apple-system, sans-serif; }
body[data-font="serif"]    { --font: Georgia, Cambria, "Times New Roman", serif; }
body[data-font="geometric"]{ --font: "Century Gothic", "Apple Gothic", "Futura", sans-serif; }
body[data-font="mono"]     { --font: Consolas, "SF Mono", "Courier New", monospace; }
body[data-font="elegant"]  { --font: "Palatino Linotype", Palatino, "Book Antiqua", serif; }
body[data-font="rounded"]  { --font: "Trebuchet MS", "Lucida Grande", "Lucida Sans", sans-serif; }
body[data-font="slab"]     { --font: Rockwell, "Courier New", "Roboto Slab", serif; }


/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 480px) {
  :root { --cell-size: 32px; }
  .cell-val { font-size: 0.75rem; }
  .cell-sub { font-size: 0.625rem; }
  .cell-corner .cell-val { font-size: 0.625rem; }
  .cell-corner .cell-sub { display: none; }
  .chart-cell { padding: 1px; }
  .tab { font-size: 0.75rem; padding: 0.5rem 0.25rem; min-height: 32px; }
  .tab-icon { padding: 0.5rem 0.5rem; }
}

@media (min-width: 481px) and (max-width: 767px) {
  :root { --cell-size: 38px; }
  .cell-val { font-size: 0.8125rem; }
  .cell-sub { font-size: 0.6875rem; }
}

@media (min-width: 768px) {
  :root { --cell-size: 50px; }
  .sidebar { flex-basis: 340px; }
}

@media (min-width: 1024px) {
  :root { --cell-size: 56px; }
  .sidebar { flex-basis: 360px; }
  .panel-body { padding: 1.25rem; }
}

@media (min-width: 1440px) {
  :root { --cell-size: 60px; }
  .sidebar { flex-basis: 400px; }
  .cell-val { font-size: 1rem; }
  .cell-sub { font-size: 0.8125rem; }
  .panel-head { padding: 1rem 1.375rem; }
  .panel-body { padding: 1.375rem; }
}

@media (min-width: 2560px) {
  :root { --cell-size: 64px; }
  .sidebar { flex-basis: 440px; }
}


/* ================================================================
   PRINT
   ================================================================ */
@media print {
  body { background: #fff; padding: 0; }
  .sidebar { display: none !important; }
  .app-shell { display: block; }
  .chart-area {
    border: 1px solid #ccc;
    box-shadow: none;
    border-radius: var(--radius);
    width: auto;
  }
  .chart-cell { break-inside: avoid; }
  .chart-scroll { overflow: visible; }
}


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