/* KARDTRCKR — Couche de thème « clair, calme, précis » (esprit Apple ~2019).
   Chargée en dernier : affine les surfaces, la typographie, les ombres et les
   contrôles sans toucher à la structure ni au JavaScript. */

:root {
  --ink: var(--app-bg);
  --s1: var(--app-surface-elevated);
  --s2: var(--app-card);
  --s3: var(--app-surface-elevated);
  --acc: var(--text-secondary);
  --up: var(--positive);
  --down: var(--negative);
  --warn: var(--warning);
  --txt: var(--text-primary);
  --muted: var(--text-tertiary);
  --line: var(--ui-border);
  --fill: var(--ui-hover);
}

html { color-scheme: dark; }
body {
  background: var(--app-bg);
  color: var(--text-primary);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Typographie : une seule famille, portée par le poids et la taille ── */
.tnum, .mono, .kpi-value, .formula {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -.01em;
}
.panel-title, .kpi-label, .eyebrow, table.k th,
.forecast-cards .eyebrow, .catalog-title .eyebrow, .analysis-heading .eyebrow,
.portfolio-insights > .eyebrow, .market-breadth .eyebrow, .selection-info .eyebrow,
.product-identity .eyebrow, .set-hero .demo-label, .formula {
  text-transform: none;
  letter-spacing: -.005em;
}
.page-context h2, .page-context h1, h1, h2, h3 {
  letter-spacing: -.028em;
}

/* ── Matériaux : clairs, translucides, jamais opaques ── */
.glass {
  background: var(--app-surface);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.surface-1 { background: var(--app-surface-elevated); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.surface-2 { background: var(--app-card); }
.surface-3 { background: var(--app-surface-elevated); backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px); }
.hairline, .hair-x { box-shadow: none; }
.hair-x { box-shadow: inset 0 0 0 1px var(--line); }

/* ── Ombres : discrètes, jamais dramatiques ── */
.shadow-soft { box-shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .05); }
.shadow-lift { box-shadow: 0 4px 12px rgba(0, 0, 0, .08), 0 24px 60px rgba(0, 0, 0, .12); }

/* ── Surfaces porteuses : fond blanc, trait hairline, ombre douce ── */
.panel, .softcard, .kpi, .feature-card, .overview-card, .asset-tile, .holding-tile,
.premium-panel, .mock-stat, .journal-panel, .favorite-card, .collection-list,
.mode-card, .guide-grid article, .disclosure, .compare-workspace,
.portfolio-chart-panel, .portfolio-insights, .engine-overview, .analysis-workspace,
.market-pulse, .set-highlight, .ev-upside, .selection-art, .product-page section {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05);
}
.panel, .softcard, .kpi, .feature-card, .overview-card, .asset-tile, .holding-tile,
.premium-panel, .mock-stat, .journal-panel, .favorite-card, .mode-card,
.guide-grid article, .disclosure, .compare-workspace, .portfolio-chart-panel,
.portfolio-insights, .market-pulse, .set-highlight, .ev-upside {
  border: 1px solid var(--line);
}
.softcard:hover { border-color: var(--ui-border); box-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 12px 32px rgba(0, 0, 0, .07); }
.asset-tile:hover { border-color: var(--ui-border); box-shadow: 0 4px 14px rgba(0, 0, 0, .07); }
.tile:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, .07); }

/* ── Contrôles segmentés (segmented control iOS) ── */
.seg, .mode-toggle, .quality-toggle {
  background: var(--fill);
  box-shadow: none;
  border: 0;
}
.seg-pill, .mode-pill {
  background: var(--app-card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .05);
}
.seg button[data-on="1"], .mode-toggle button[data-on="1"], .quality-toggle button[aria-pressed="true"] {
  color: var(--text-primary);
  background: transparent;
  box-shadow: none;
}

/* ── Boutons ── */
.action-button { background: var(--app-card); color: var(--text-secondary); border-radius: 12px; transition: background .18s ease, transform .18s ease; }
.action-button:hover { background: var(--app-card-hover); }
.action-button.secondary { background: transparent; border-color: var(--ui-border); color: var(--text-secondary); }
.action-button.secondary:hover { background: var(--ui-hover); }
.quiet-link { color: var(--text-secondary); }

/* ── Navigation ── */
.navitem { border-radius: 9px; }
.navitem:hover { background: var(--ui-hover); color: var(--text-primary); }
.navitem[data-on="1"] { background: var(--ui-active); color: var(--text-primary); box-shadow: inset 0 0 0 1px transparent; }
#navMobile .navitem[data-on="1"] { box-shadow: none; }

/* ── Badges & sémantique financière ── */
.tag { border-radius: 7px; }
.tag-up { background: var(--positive-bg); color: var(--positive); }
.tag-down { background: var(--negative-bg); color: var(--negative); }
.tag-warn { background: var(--warning-bg); color: var(--warning); }
.tag-acc { background: var(--ui-active); color: var(--text-secondary); }
.tag-zinc { background: var(--fill); color: var(--text-tertiary); }
.tag-solid-up { background: var(--positive-bg); color: var(--positive); box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .28); }
.verdict { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.verdict-up { background: linear-gradient(90deg, rgba(34, 197, 94, .12), rgba(34, 197, 94, .015)); }
.verdict-down { background: linear-gradient(90deg, rgba(239, 68, 68, .1), rgba(239, 68, 68, .015)); }
.verdict-warn { background: linear-gradient(90deg, rgba(245, 158, 11, .1), rgba(245, 158, 11, .015)); }
.bg-down.text-white { color: #fff !important; }
.bg-up.text-white { color: #08140c !important; }

/* ── Champs de saisie ── */
.text-field, .holding-edit input, .market-search, select, input[type="text"], input[type="number"] {
  background: var(--app-surface-elevated);
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  color: var(--text-primary);
}
.text-field:focus, .holding-edit input:focus { border-color: #007aff; box-shadow: 0 0 0 3px rgba(0, 122, 255, .35); }
::placeholder { color: var(--text-tertiary); }
select option { background: var(--app-surface); color: var(--text-primary); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, tr:focus-visible {
  outline: 2px solid #007aff;
  outline-offset: 3px;
}

/* ── Tableaux ── */
table.k th { background: var(--app-card); color: var(--text-tertiary); font-weight: 600; }
table.k td { border-top: 1px solid var(--ui-border); }
.rowlink:hover { background: var(--ui-hover); }
.bar-fill { background-color: var(--positive); }

/* ── Barres de progression neutres ── */
.bg-white\/5, .bg-white\/\[\.03\] { background-color: var(--fill) !important; }

/* ── Modales, feuilles, infobulles ── */
dialog::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(6px); }
.sheet { background: var(--app-surface-elevated); }
.chart-tip, .help::after, .search-results, .locked::after { border-radius: 12px; }
.search-results { background: var(--app-surface-elevated); border: 1px solid var(--ui-border-strong); box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
.formula, .lesson-content { background: var(--ui-hover); box-shadow: none; border-radius: 10px; }
.locked::after { background: rgba(15, 15, 17, .55); backdrop-filter: blur(5px); }
.skeleton { background: linear-gradient(90deg, var(--app-card) 25%, var(--app-surface-elevated) 37%, var(--app-card) 63%); background-size: 400% 100%; }

/* ── Défilement ── */
::-webkit-scrollbar-thumb { background: var(--app-card-hover); border: 2px solid var(--app-surface); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Divers : neutraliser les effets « gaming » ── */
.holo::after { display: none; }
.gauge { background: linear-gradient(90deg, var(--positive) 0%, var(--warning) 55%, var(--negative) 100%); }
.pulse-dot { background: var(--positive); }
.empty-state { border-color: var(--ui-border); }