/*
 * FTJ -> browser visual bridge (staging preview v0.9)
 * Source of truth for the values below: Forgalis/TradingJournalWPFC (master)
 *   Themes/DarkNova.xaml             Theme.Color.* and semantic colors
 *   Themes/_Tokens.xaml              typography, radius, spacing scale
 *   Views/AnalyticsView.xaml         compact KPI band and 3-column Reports panels
 *   Views/DashboardView.xaml         ~28px KPI type, grouped chart cards
 *   Themes/Controls.Cards.xaml       8px surface cards + subtle border
 * This CSS mirrors visual language, NOT FTJ's WPF controls or runtime theme.
 * The web tool is standalone, for every supported file adapter.
 */
:root {
  --ftj-bg:#0E0F11;
  --ftj-surface:#14161A;
  --ftj-card:#111827;
  --ftj-elevated:#1A1D24;
  --ftj-border:#1F2937;
  --ftj-border-light:#374151;
  --ftj-fg:#F3F4F6;
  --ftj-secondary:#9CA3AF;
  --ftj-muted:#6B7280;
  --ftj-accent:#3B82F6;
  --ftj-accent-hover:#2563EB;
  --ftj-positive:#10B981;
  --ftj-negative:#EF4444;
  --ftj-amber:#F59E0B;
  --ftj-radius:8px;
  --ftj-gap:18px;
  --bg:var(--ftj-bg);
  --surface:var(--ftj-surface);
  --surface2:var(--ftj-elevated);
  --line:var(--ftj-border);
  --fg:var(--ftj-fg);
  --dim:var(--ftj-secondary);
  --mint:var(--ftj-positive);
  --red:#F87171; /* contrast-enhanced negative text over dark card */
  --blue:var(--ftj-accent);
  --radius:var(--ftj-radius);
  font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
}
body {
  background:var(--ftj-bg);
  color:var(--ftj-fg);
}
.analyzer-preview-header {
  background:var(--ftj-surface);
  border-bottom:1px solid var(--ftj-border);
}
.analyzer-preview-header nav {padding:16px 28px}
.analyzer-preview-header .brand {font-size:21px;letter-spacing:-.03em}
.analyzer-preview-header .brand-icon {
  width:28px;height:30px;
  background:linear-gradient(145deg,var(--ftj-accent),#1E40AF);
}
.analyzer-preview-header .nav-note {letter-spacing:.06em;font-size:11px}
main {max-width:1280px;padding-top:43px}
h1 {font-size:clamp(32px,4.6vw,53px);line-height:1.12;letter-spacing:-.045em}
h1 em {color:#93C5FD}
.lead {color:var(--ftj-secondary);font-size:16px;max-width:780px;line-height:1.6}
.eyebrow {color:#93C5FD;letter-spacing:.10em}
.eyebrow::before {background:var(--ftj-accent);box-shadow:0 0 0 4px #3B82F620}
.panel,
.upload,
.import-help,
.check-fact,
.check-note,
.finding-card,
.review-evidence,
.review-note,
.source-audit,
.insight,
.pattern-insight {
  border-radius:var(--ftj-radius);
}
.panel {
  background:var(--ftj-surface);
  border:1px solid var(--ftj-border);
  box-shadow:none;
  padding:20px;
}
.workbench {gap:var(--ftj-gap);margin-top:28px}
.upload {min-height:154px;border:1px dashed var(--ftj-border-light);background:#11182770}
.upload.dragging {border-color:var(--ftj-accent);background:#1E3A8A35}
.upload-icon {color:#93C5FD}
.upload strong {font-size:15px}
.btn {border-radius:8px;font-size:13px;padding:11px 16px}
.btn.primary {background:var(--ftj-accent);color:white}
.btn.primary:hover {background:var(--ftj-accent-hover)}
.btn.secondary {background:var(--ftj-elevated);color:var(--ftj-fg);border:1px solid var(--ftj-border-light)}
.btn.secondary:hover {background:#263244}
button:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible {outline:2px solid #93C5FD;outline-offset:3px}
.privacy .symbol {background:#1E3A8A55;color:#93C5FD}
.minihead {color:#93C5FD;letter-spacing:.09em}
.privacy p,.supported,.privacy strong {line-height:1.55}
.import-help {background:var(--ftj-card);border-color:var(--ftj-border-light)}
.import-help summary {color:#DBEAFE}
.status-pill {background:#064E3B50;color:#34D399;border-color:#065F46}
.source-audit {background:var(--ftj-surface);border:1px solid var(--ftj-border);padding:14px 16px}
.source-audit .source-tag {border-color:var(--ftj-border-light);border-radius:6px;color:var(--ftj-fg);font-size:11px;background:var(--ftj-elevated)}
.source-audit p {color:var(--ftj-secondary)}
.review-note {background:#123144;border-color:#235475}
.section-label {font-size:19px;font-weight:700;margin:28px 0 12px;letter-spacing:-.025em}
.guided-intro,.check-intro,.pattern-caption {color:var(--ftj-secondary);font-size:12px;line-height:1.6}
.review-kicker {color:var(--ftj-secondary);font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;margin:21px 0 4px}

/* FTJ Reports: one compact KPI band with internal dividers, not huge cards. */
.metrics {
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  background:var(--ftj-surface);
  border:1px solid var(--ftj-border);
  border-radius:8px;
  overflow:hidden;
}
.metric {
  min-height:106px;
  background:transparent;
  padding:16px 17px 14px;
  border:0;
  border-right:1px solid var(--ftj-border);
  border-radius:0;
}
.metric:last-child {border-right:0}
.metric .label {
  color:var(--ftj-secondary);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em
}
.metric .value {font-size:clamp(21px,2.6vw,27px);font-weight:700;letter-spacing:-.035em;margin-top:8px}
.metric .sub {font-size:11px;margin-top:5px;color:var(--ftj-secondary);line-height:1.4}
.metric-extensions {margin-top:10px;padding:0}
.metric-extensions summary {list-style:none;cursor:pointer;font-size:12px;color:#93C5FD;padding:9px 2px;font-weight:700}
.metric-extensions summary::-webkit-details-marker {display:none}
.metric-extensions summary::before {content:"▸";margin-right:9px}
.metric-extensions[open] summary::before {content:"▾"}
.metrics-secondary {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--ftj-border);border-radius:8px;overflow:hidden;background:var(--ftj-surface)}
.metrics-secondary .metric {min-height:98px}
.insight {background:var(--ftj-card);border-color:var(--ftj-border);padding:14px 18px;margin-top:10px}
.insight svg {stroke:#93C5FD}
.insight strong {color:var(--ftj-fg)}
.insight p {color:var(--ftj-secondary)}
.positive,.chart-total:not(.negative) {color:#34D399}
.negative {color:#F87171}

/* FTJ Dashboard / Reports: three compact analysis surfaces, no neon gradients. */
.finding-grid {gap:14px}
.finding-card {background:var(--ftj-surface);border:1px solid var(--ftj-border);min-height:214px;padding:19px;box-shadow:none}
.finding-card:hover {border-color:var(--ftj-border-light)}
.finding-card .minihead {color:#93C5FD;letter-spacing:.08em}
.finding-card h3 {font-weight:700;font-size:14px}
.finding-card .finding-value {font-size:26px;font-weight:700;margin:8px 0}
.finding-card p {color:#B4BECD;font-size:12px;line-height:1.6}
.finding-actions button {background:#172A48;border-color:#2D5081;border-radius:6px;color:#DBEAFE}
.finding-actions button:hover {background:#213C67}
.review-evidence {background:#14263E;border-color:#345984}
.review-evidence strong {color:#BFDBFE}
.review-evidence p {color:#C1D1E4}
.check-grid {gap:var(--ftj-gap)}
.check-card h3,.pattern-panel h3,.chart-head h3 {font-size:16px;font-weight:700}
.check-fact {background:var(--ftj-card);border:1px solid var(--ftj-border);padding:13px}
.check-fact strong {font-size:24px}
.check-note,.direction-caveat {background:var(--ftj-card);border-color:var(--ftj-border)}
.direction-row .pattern-bar {height:7px}
.dashgrid {gap:var(--ftj-gap)}
.dashgrid .panel {padding:20px}
.chart-head h3 {letter-spacing:-.015em}
.chart-total {font-size:23px}
.bar-track,.pattern-bar {background:#273142}
.bar-fill,.pattern-fill {background:var(--ftj-positive)}
.bar-fill.loss,.pattern-fill.loss {background:var(--ftj-negative)}
.time-toggle {border:1px solid var(--ftj-border-light);border-radius:7px;background:var(--ftj-surface);padding:3px}
.time-toggle button {border-radius:5px;font-size:12px}
.time-toggle button[aria-pressed="true"] {background:#1E3A8A;color:#DBEAFE}
.pattern-panel,.check-card {background:var(--ftj-surface)}
.pattern-insight {background:var(--ftj-card);border-color:var(--ftj-border);color:var(--ftj-secondary)}

/* FTJ dark grid language, including striped row hover and stable semantics. */
.table-panel {margin-top:18px}
.table-title {border-color:var(--ftj-border);padding:18px 20px}
.table-title h3 {font-size:16px}
th {background:var(--ftj-elevated);color:var(--ftj-secondary);font-size:11px;letter-spacing:.04em;padding:12px 15px}
td {border-color:var(--ftj-border);padding:13px 15px;font-size:12px}
tr:nth-child(even) td {background:#191D24}
tr:hover td {background:#253147}
td .side {color:#C0CBDB}
.close-audit summary {font-size:15px;padding:17px 20px}
.close-audit p {color:var(--ftj-secondary)}

/* A genuine existing FTJ product image, NOT a mock journal inside Analyzer. */
.ftj-bridge {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  border:1px solid var(--ftj-border-light);
  background:linear-gradient(140deg,#14161A,#111827);
  border-radius:8px;
  overflow:hidden;
  gap:0;
  margin-top:25px;
}
.ftj-bridge-copy {padding:26px 25px;align-self:center}
.ftj-bridge .minihead {color:#93C5FD}
.ftj-bridge h2 {font-size:22px;line-height:1.2;letter-spacing:-.025em;margin:10px 0 10px}
.ftj-bridge p {font-size:13px;line-height:1.65;color:#AAB7C8;margin:0 0 14px}
.ftj-bridge .product-note {font-size:11px;color:var(--ftj-secondary);margin-top:12px;margin-bottom:0}
.ftj-bridge .product-list {font-size:12px;color:#CBD5E1;margin-bottom:16px}
.ftj-bridge .product-figure {margin:0;display:flex;flex-direction:column;background:#080B11;min-width:0;border-left:1px solid var(--ftj-border)}
.ftj-bridge img {display:block;width:100%;aspect-ratio:16/9;object-fit:contain;max-width:100%;height:100%;max-height:410px}
.ftj-bridge figcaption {padding:8px 12px;color:var(--ftj-secondary);font-size:11px;background:var(--ftj-surface)}
.footer {border-color:var(--ftj-border);color:var(--ftj-secondary)}
.footer a {color:#93C5FD}
@media(max-width:1030px){
  .metrics {grid-template-columns:repeat(3,minmax(0,1fr))}
  .metric:nth-child(3) {border-right:0}
  .metric:nth-child(-n+3) {border-bottom:1px solid var(--ftj-border)}
  .metric:nth-child(4),.metric:nth-child(5) {border-right:1px solid var(--ftj-border)}
  .metrics-secondary {grid-template-columns:repeat(2,minmax(0,1fr))}
  .metrics-secondary .metric:nth-child(2) {border-right:0}
  .metrics-secondary .metric:nth-child(-n+2) {border-bottom:1px solid var(--ftj-border)}
}
@media(max-width:900px){
  .ftj-bridge {grid-template-columns:1fr}
  .ftj-bridge .product-figure {border-left:0;border-top:1px solid var(--ftj-border)}
  .ftj-bridge img {height:auto;max-height:none}
}
@media(max-width:650px){
  .analyzer-preview-header nav {padding:15px 17px}
  main {padding:32px 16px 60px}
  .metrics {grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric {padding:13px 14px;min-height:92px;border-right:1px solid var(--ftj-border);border-bottom:1px solid var(--ftj-border)}
  .metric:nth-child(2n) {border-right:0}
  .metric:last-child {border-bottom:0}
  .metric:nth-child(3) {border-right:1px solid var(--ftj-border)}
  .metric:nth-child(5) {border-bottom:0}
  .metrics-secondary {grid-template-columns:repeat(2,minmax(0,1fr))}
  .metrics-secondary .metric:nth-child(3) {border-right:1px solid var(--ftj-border)}
  .ftj-bridge-copy {padding:22px 19px}
  .ftj-bridge h2 {font-size:20px}
  .section-label {font-size:18px}
  .panel,.dashgrid .panel {padding:17px}
  .table-title {flex-direction:column;align-items:flex-start;gap:7px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after {scroll-behavior:auto!important;transition:none!important}
}