/* ============================================================================
   YKY Monitor - app.css
   Yakkyo brand skin (investor.yakkyo.com/stock-price) over the reference dashboard layout.
   Poppins typography, indigo/purple palette, Bootstrap-5-flavoured cards.
   Self-hosted fonts are declared in fonts.css (fetched by scripts/fetch-*).
   ========================================================================== */

/* ---------- fonts (self-hosted; /vendor/poppins/fonts.css generated by
   scripts/fetch-vendor-assets.mjs - Poppins subset woff2 files). If the
   script has not run yet the browser falls back to the stack below. ---------- */

/* ---------- tokens ---------- */
:root {
  --brand-indigo: #281D4E;   /* primary: hero bg, header/footer, structural, theme-color */
  --brand-indigo-2: #3b2a6e; /* hero gradient end */
  --brand-purple: #433283;   /* secondary: buttons, secondary chart series */
  --brand-accent: #5533ff;   /* vivid purple: links, interactive, primary chart line */
  --brand-accent-hover: #4429cc;
  --brand-accent-soft: rgba(85, 51, 255, 0.10);
  --brand-violet: #7a00df;   /* extra series */
  --vwap: #C68533;           /* warm accent for VWAP overlay */
  --ink: #3E4C66;            /* body text */
  --surface: #FFFFFF;
  --bg: #F6F7FB;             /* very light indigo-tinted page bg */
  --line: #dee2e6;
  --grid: #E9EDF3;
  --muted: #6c757d;
  --faint: #98A3B4;
  --chip: #EEF1F7;
  --up: #198754;
  --up-soft: rgba(25, 135, 84, 0.12);
  --down: #dc3545;
  --down-soft: rgba(220, 53, 69, 0.12);
  --warning: #ffc107;
  --info: #0dcaf0;
  --teal: #20c997;
  --s3: var(--teal);         /* FTSE STAR / peer 1 */
  --s4: var(--info);         /* S&P 500 / peer 2 */
  --s5: var(--brand-violet); /* Nasdaq */
  --radius: 12px;
  --shadow: 0 1px 3px rgba(40, 29, 78, 0.08);
  --shadow-hero: 6px 6px 9px rgba(0, 0, 0, 0.15);
  --btn-ink: #FFFFFF;
  --yky-soft: rgba(40, 29, 78, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14101F;
    --surface: #1E1833;
    --ink: #E8EAF2;
    --muted: #9AA3B8;
    --faint: #6E7A94;
    --line: #2C2745;
    --grid: #26213B;
    --chip: #2A2444;
    --brand-accent: #7a6bff;
    --brand-accent-hover: #6655ee;
    --brand-accent-soft: rgba(122, 107, 255, 0.18);
    --brand-violet: #a44cff;
    --vwap: #E0A84F;
    --up: #2fd188;
    --up-soft: rgba(47, 209, 136, 0.16);
    --down: #f2647a;
    --down-soft: rgba(242, 100, 122, 0.16);
    --info: #43d6ff;
    --teal: #35e0a8;
    --yky-soft: rgba(122, 107, 255, 0.16);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dark"] {
  --bg: #14101F;
  --surface: #1E1833;
  --ink: #E8EAF2;
  --muted: #9AA3B8;
  --faint: #6E7A94;
  --line: #2C2745;
  --grid: #26213B;
  --chip: #2A2444;
  --brand-accent: #7a6bff;
  --brand-accent-hover: #6655ee;
  --brand-accent-soft: rgba(122, 107, 255, 0.18);
  --brand-violet: #a44cff;
  --vwap: #E0A84F;
  --up: #2fd188;
  --up-soft: rgba(47, 209, 136, 0.16);
  --down: #f2647a;
  --down-soft: rgba(242, 100, 122, 0.16);
  --info: #43d6ff;
  --teal: #35e0a8;
  --yky-soft: rgba(122, 107, 255, 0.16);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
:root[data-theme="light"] {
  --bg: #F6F7FB;
  --surface: #FFFFFF;
  --ink: #3E4C66;
  --muted: #6c757d;
  --faint: #98A3B4;
  --line: #dee2e6;
  --grid: #E9EDF3;
  --chip: #EEF1F7;
  --brand-accent: #5533ff;
  --brand-accent-hover: #4429cc;
  --brand-accent-soft: rgba(85, 51, 255, 0.10);
  --brand-violet: #7a00df;
  --vwap: #C68533;
  --up: #198754;
  --up-soft: rgba(25, 135, 84, 0.12);
  --down: #dc3545;
  --down-soft: rgba(220, 53, 69, 0.12);
  --info: #0dcaf0;
  --teal: #20c997;
  --yky-soft: rgba(40, 29, 78, 0.08);
  --shadow: 0 1px 3px rgba(40, 29, 78, 0.08);
}

/* ---------- reset / base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Poppins", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  padding-top: 0;
  padding-bottom: 0;
}
h1, h2, h3 { font-family: "Poppins", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 600; text-wrap: balance; margin: 0; }
.num { font-variant-numeric: tabular-nums; }

::selection { background: var(--brand-accent-soft); }
:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

.skip-link {
  position: absolute; left: -999px; top: auto;
  background: var(--brand-indigo); color: #fff; padding: 10px 16px; border-radius: 8px;
  z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- site header (yakkyo.com navbar, bg #281D4E, white text) ---------- */
.site-header {
  background: var(--brand-indigo);
  color: #fff;
}
.navbar {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 24px;
  max-width: 1280px; margin: 0 auto;
}
.navbar .brand a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.navbar .brand img { height: 44px; width: auto; display: block; }
.nav-menu { display: flex; gap: 4px 18px; flex-wrap: wrap; align-items: center; }
.nav-menu a {
  color: rgba(255, 255, 255, 0.92); text-decoration: none; font-size: 0.95rem;
  padding: 6px 10px; border-radius: 7px;
}
.nav-menu a:hover, .nav-menu a:focus-visible { background: rgba(255, 255, 255, 0.12); color: #fff; }
.navbar .nav-cta {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
}
.btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.7); background: transparent; color: #fff;
  border-radius: 999px; padding: 6px 16px; font: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer;
  text-decoration: none;
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.14); text-decoration: none; }
.btn-outline:focus-visible { text-decoration: none; }
.nav-burger {
  border: 0; background: none; color: #fff; font-size: 1.35rem; line-height: 1; cursor: pointer;
  padding: 4px 10px;
}
/* Mobile: collapse the inline desktop nav; links live only in the offcanvas. */
@media (max-width: 991px) {
  .nav-menu { display: none; }
}
@media (min-width: 992px) {
  .nav-burger { display: none; }
}
.offcanvas {
  position: fixed; inset: 0 0 0 0; z-index: 90; background: rgba(20, 16, 31, 0.55);
  display: none;
}
.offcanvas.open { display: block; }
.offcanvas-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 86vw);
  background: var(--brand-indigo); color: #fff; z-index: 91;
  padding: 20px 22px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
}
.offcanvas-panel a { color: rgba(255, 255, 255, 0.92); text-decoration: none; padding: 8px 0; font-size: 1rem; }
.offcanvas-panel .oc-close { align-self: flex-end; background: none; border: 0; color: #fff; font-size: 1.2rem; cursor: pointer; }

/* ---------- hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--brand-indigo), var(--brand-indigo-2));
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 52px 24px 44px;
}
.hero .y-watermark {
  position: absolute; right: -40px; bottom: -60px; width: 300px; height: 300px;
  opacity: 0.10; pointer-events: none; color: #fff;
}
.hero .inner { max-width: 1280px; margin: 0 auto; }
.hero .eyebrow { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; color: rgba(255, 255, 255, 0.72); margin: 0 0 12px; }
.hero-title { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.03; margin: 0; }
.hero-title .tkr { font-weight: 400; opacity: 0.6; }
.hero .price-block { margin-top: 24px; }
.hero .last-price { font-size: clamp(2.9rem, 8vw, 4.6rem); letter-spacing: -0.02em; color: #fff; }
.hero .asof { color: rgba(255, 255, 255, 0.7); margin: 10px 0 0; }
.hero .sync { color: rgba(255, 255, 255, 0.7); margin-left: 0; }
.hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 28px; }
.hero .hero-sub { margin-top: 10px; font-size: 1.05rem; font-weight: 400; opacity: 0.88; max-width: 780px; }

/* ---------- header / price block ---------- */
.id-block { display: flex; flex-direction: column; gap: 8px; }
.ticker-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ticker { font-weight: 700; font-size: 1.5rem; letter-spacing: 0.02em; }
.mkt {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; background: var(--surface);
}
.sub { color: var(--muted); font-size: 0.9rem; }
.price-block { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.last-price { font-weight: 700; font-size: clamp(2.2rem, 6vw, 3.1rem); line-height: 1; font-variant-numeric: tabular-nums; }
.delta { font-weight: 600; font-size: 1.02rem; padding: 5px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.delta.up { color: var(--up); background: var(--up-soft); }
.delta.down { color: var(--down); background: var(--down-soft); }
.delta.flat { color: var(--muted); background: var(--chip); }
.asof { color: var(--muted); font-size: 0.9rem; }
.sync { margin-left: auto; align-self: center; font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.sync .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.sync.ok .dot { background: var(--up); }
.sync.stale .dot { background: var(--warning); }
.hdr-tools { display: flex; align-items: center; gap: 8px; align-self: center; }
.hdr-tools .btn { padding: 6px 12px; font-size: 0.85rem; }
/* Image/PDF downloads disabled per request (safety net alongside the
   addPngButtons early-return in app.js). Remove these two lines to re-enable. */
.btn-png { display: none !important; }
#btn-pdf { display: none !important; }
/* Header language toggle hidden: language is auto-selected from the browser
   (see the root redirect script); the footer IT/EN links remain as override. */
#seg-lang { display: none !important; }
/* Theme (light/dark) toggle hidden per request; the page still follows the
   visitor's OS light/dark preference automatically. */
.seg:has(> .btn-theme) { display: none !important; }
.btn-theme { display: none !important; }
.btn-png { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 7px; padding: 4px 9px; font: inherit; font-size: 0.75rem; cursor: pointer; margin-left: auto; }
.panel-head .btn-png { margin-left: auto; }
.btn-png:hover { color: var(--brand-accent); border-color: var(--brand-accent); }
.btn-png:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 1px; }

/* ---------- TL;DR fact box (GEO) ---------- */
.tldr { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 14px 18px; box-shadow: var(--shadow); }
.tldr h2 { font-size: 0.98rem; }
.tldr .facts, .tldr dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 24px; margin: 10px 0 0; }
.tldr .facts > div, .tldr dl > div { display: flex; flex-direction: column; gap: 2px; }
.tldr dt { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.tldr dd { margin: 0; font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- KPI ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow); }
.kpi .lbl { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.kpi .val { font-weight: 700; font-size: 1.22rem; font-variant-numeric: tabular-nums; }
.kpi .val.up { color: var(--up); } .kpi .val.down { color: var(--down); }
.kpi .note { font-size: 0.74rem; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ---------- panels / charts ---------- */
.wrap { max-width: 1280px; margin: 32px auto 56px; padding: 0 clamp(16px, 3vw, 24px); display: flex; flex-direction: column; gap: 22px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px 16px; box-shadow: var(--shadow); }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.panel-head h2 { font-size: 1.08rem; font-weight: 600; }
.legend { display: flex; gap: 14px; align-items: center; font-size: 0.82rem; color: var(--muted); flex-wrap: wrap; }
.lg { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.lg .sw { width: 16px; height: 3px; border-radius: 2px; background: var(--brand-accent); }
.lg.vwap .sw { background: var(--vwap); }
.lg.b-itgrw .sw { background: var(--brand-purple); }
.lg.b-star .sw { background: var(--s3); }
.lg.b-sp500 .sw { background: var(--s4); }
.lg.b-nasdaq .sw { background: var(--s5); }
.lg.p1 .sw { background: var(--s3); }
.lg.p2 .sw { background: var(--s4); }
.lg.off { opacity: 0.4; }
select.sel { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; font: inherit; font-size: 0.85rem; max-width: 200px; }
select.sel:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -1px; }
tr.yky-row td { background: var(--yky-soft); font-weight: 600; }
td.rank, th.rank { text-align: left; color: var(--muted); width: 34px; }
.ellip td { color: var(--faint); text-align: center; }
.controls { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 0.82rem; padding: 5px 10px; cursor: pointer; }
.seg button.on { background: var(--brand-accent-soft); color: var(--brand-accent); font-weight: 600; }
.seg button:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; }
#chart-wrap, #cmp-wrap, #peer-wrap { position: relative; }
#chart-wrap svg, #cmp-wrap svg, #peer-wrap svg { display: block; width: 100%; height: auto; }
#tip, #cmp-tip, #peer-tip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; font-size: 0.8rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14); display: none; z-index: 5; min-width: 150px; }
#tip .t-date, #cmp-tip .t-date, #peer-tip .t-date { font-weight: 600; margin-bottom: 3px; }
#tip .t-row, #cmp-tip .t-row, #peer-tip .t-row { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; }
#tip .t-row span:first-child, #cmp-tip .t-row span:first-child, #peer-tip .t-row span:first-child { color: var(--muted); }
.evt-list { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--grid); font-size: 0.82rem; color: var(--muted); }
.evt-item { display: flex; gap: 8px; align-items: baseline; }
.evt-item .evt-n { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-accent-soft); color: var(--brand-accent); font-size: 0.68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; align-self: center; }
.evt-item .evt-d { font-variant-numeric: tabular-nums; color: var(--faint); }
.evt-del { border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 0.85rem; padding: 0 4px; }
.evt-del:hover { color: var(--down); }
.liq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.liq { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.liq .lbl { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
/* min-height pins the headline block to the same height in every card so the
   blue "Yakkyo" bars line up across all three cards regardless of how the
   "vs EGM average" text wraps. .liq-pct enlarges the % days headline. */
.liq .cmp-delta { font-weight: 700; font-size: 1.05rem; min-height: 2.5rem; }
.liq .cmp-delta.liq-pct { font-size: 1.6rem; }
.liq .cmp-delta.up { color: var(--up); } .liq .cmp-delta.down { color: var(--down); }
.liq .bar-row { display: flex; flex-direction: column; gap: 3px; }
.liq .bar-lbl { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--muted); }
.liq .bar-lbl b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.liq .bar { height: 14px; border-radius: 4px; background: var(--chip); overflow: hidden; }
.liq .bar i { display: block; height: 100%; border-radius: 4px; }
.liq .bar.yky i { background: var(--brand-accent); }
.liq .bar.egm i { background: var(--faint); }
.liq-note { font-size: 0.74rem; color: var(--faint); }
.range-stats { display: flex; flex-wrap: wrap; gap: 8px 36px; border-top: 1px solid var(--grid); margin-top: 12px; padding-top: 14px; }
.rs { display: flex; flex-direction: column; gap: 1px; }
.rs .lbl { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.rs .val { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.rs .note { font-size: 0.74rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.range-stats .rs { min-width: 200px; }
.range-stats .rs .lbl, .range-stats .rs .val, .range-stats .rs .note { }

/* ---------- tables ---------- */
.cols { display: grid; grid-template-columns: minmax(250px, 2fr) minmax(0, 3.6fr); gap: 20px; }
.cols .panel { min-width: 0; }
@media (max-width: 1020px) { .cols { grid-template-columns: 1fr; } }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 600; text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; padding-left: 2px; }
td { padding: 7px 6px; text-align: right; border-bottom: 1px solid var(--grid); font-variant-numeric: tabular-nums; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.up { color: var(--up); } td.down { color: var(--down); }
.src-badge { font-size: 0.66rem; padding: 1px 7px; border-radius: 999px; background: var(--chip); color: var(--muted); margin-left: 6px; letter-spacing: 0.03em; }
.src-badge.mail { background: var(--brand-accent-soft); color: var(--brand-accent); }
/* no-trade day info marker (only rendered on no-trade rows) */
.ntd { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 6px; border-radius: 50%; border: 1px solid var(--faint); color: var(--faint); font: italic 700 10px/1 Georgia, "Times New Roman", serif; cursor: help; vertical-align: middle; user-select: none; }
.ntd:hover, .ntd:focus { border-color: var(--brand-accent); color: var(--brand-accent); outline: none; }
.ntd-tip { display: none; }  /* content source; copied into #ntd-pop on open */
/* Shared popup, appended to <body> so no table overflow clips it and no
   transformed ancestor breaks its positioning; placed near the "i" via JS. */
#ntd-pop { position: absolute; z-index: 60; width: 300px; max-width: calc(100vw - 16px); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 34px rgba(40, 29, 78, 0.28); padding: 11px 13px; font: 400 0.8rem/1.5 inherit; color: var(--ink); text-align: left; display: none; }
#ntd-pop.show { display: block; }
#ntd-pop a { color: var(--brand-accent); font-weight: 600; text-decoration: none; display: inline-block; margin-top: 4px; }
#ntd-pop a:hover { text-decoration: underline; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
@media (max-width: 720px) {
  table { font-size: 0.78rem; }
  th { padding: 5px 5px; }
  td { padding: 6px 5px; }
}

/* ---------- buttons / forms ---------- */
.btn { border: 0; border-radius: 8px; padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer; background: var(--brand-indigo); color: var(--btn-ink); }
.btn.alt { background: var(--brand-purple); color: #fff; }
.btn.ghost { background: var(--chip); color: var(--ink); }
.btn.accent { background: var(--brand-accent); color: #fff; }
.btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
textarea { width: 100%; min-height: 130px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font: inherit; font-size: 0.85rem; resize: vertical; }
textarea:focus-visible, input:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -1px; }
.frm { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.frm label { display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.frm input { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 8px 9px; font: inherit; font-variant-numeric: tabular-nums; }
details.importer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
details.importer summary { cursor: pointer; padding: 14px 18px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 10px; }
details.importer summary::before { content: "+"; font-weight: 700; color: var(--brand-accent); }
details.importer[open] summary::before { content: "-"; }
.imp-body { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.imp-note { font-size: 0.85rem; color: var(--muted); max-width: 64ch; }
#imp-msg { font-size: 0.85rem; color: var(--muted); }
#imp-msg.ok { color: var(--up); } #imp-msg.err { color: var(--down); }

/* ---------- data table behind charts (GEO + a11y) ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
  border: 0; padding: 0;
}

/* ---------- footer (1:1 with yakkyo.com) ---------- */
.site-footer { background: var(--brand-indigo); color: #fff; margin-top: 48px; font-size: 0.95rem; }
.site-footer .footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.site-footer img { display: inline-block; vertical-align: middle; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: #fff; text-decoration: underline; }
.site-footer h4 { font-size: 1.5rem; font-weight: 600; margin: 0 0 6px; }
.site-footer h6 { font-size: 0.95rem; font-weight: 600; margin: 0 0 8px; letter-spacing: 0.01em; }
.site-footer p { margin: 0 0 10px; line-height: 1.7; }
.site-footer .fw { margin-bottom: 18px; }
.site-footer ul.fmenu { list-style: none; margin: 0 0 16px; padding: 0; }
.site-footer ul.fmenu li { margin: 0 0 6px; }

/* newsletter band */
.footer-top { border-bottom: 1px solid rgba(255,255,255,0.16); padding: 28px 0; }
.footer-top .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; align-items: center; }
.footer-top .nl-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.footer-top .nl-form input[type="email"] { flex: 1 1 220px; min-width: 0; background: #fff; color: var(--ink); border: 0; border-radius: 8px; padding: 12px 14px; font: inherit; }
.footer-top .nl-form .btn { flex: 0 0 auto; }
.footer-top .nl-agree { font-size: 0.8rem; opacity: 0.85; margin: 10px 0 0; flex-basis: 100%; }
.footer-top .nl-agree a { text-decoration: underline; }

/* main 2-region grid: brand block + link columns */
.footer-main { padding: 40px 0 8px; display: grid; grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr); gap: 32px 40px; }
.footer-brand .flogo { width: min(300px, 80%); height: auto; margin-bottom: 18px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 28px; }
.footer-lang { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.footer-lang a { display: inline-flex; align-items: center; gap: 6px; opacity: 0.9; }
.footer-lang a.on { font-weight: 600; opacity: 1; }
.footer-lang img { width: 18px; height: 18px; }

/* Law 124/2017 notice */
.footer-notice { font-size: 0.8rem; color: #7f73ac; line-height: 1.6; padding: 8px 0 24px; }
.footer-notice a { color: #9a8fd0; text-decoration: underline; }

/* copyright bar */
.footer-copy { border-top: 1px solid rgba(255,255,255,0.16); padding: 18px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.footer-copy p { margin: 0; font-size: 0.85rem; opacity: 0.9; }
.footer-copy .gov-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.footer-copy .gov-logos img { height: 34px; width: auto; }

@media (max-width: 860px) {
  .footer-main { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .footer-top .grid { grid-template-columns: 1fr; }
  .footer-copy { justify-content: center; text-align: center; }
}
@media (max-width: 480px) { .footer-cols { grid-template-columns: 1fr; } }

/* ---------- premium polish (WOW effect, within the Yakkyo theme) ---------- */
.panel, .tldr, .kpi, .liq { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.panel:hover, .tldr:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(40, 29, 78, 0.12); border-color: rgba(85, 51, 255, 0.20); }
.kpi:hover, .liq:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(40, 29, 78, 0.12); }
.kpi { position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--brand-accent), var(--brand-purple)); transform: scaleY(0); transform-origin: top; transition: transform 0.22s ease; }
.kpi:hover::before { transform: scaleY(1); }
.delta { transition: transform 0.2s ease; }
.last-price { transition: color 0.2s ease; }
/* Public dashboard is read-only: event pins are informational, not editable. */
.evt-del { display: none; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .wrap > * { animation: riseIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .wrap > *:nth-child(1) { animation-delay: 0.03s; }
  .wrap > *:nth-child(2) { animation-delay: 0.09s; }
  .wrap > *:nth-child(3) { animation-delay: 0.15s; }
  .wrap > *:nth-child(4) { animation-delay: 0.21s; }
  .wrap > *:nth-child(5) { animation-delay: 0.27s; }
  .wrap > *:nth-child(n+6) { animation-delay: 0.32s; }
  .hero .inner > * { animation: riseIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .hero .eyebrow { animation-delay: 0.02s; }
  .hero-title { animation-delay: 0.08s; }
  .hero .price-block { animation-delay: 0.16s; }
  .hero .asof { animation-delay: 0.22s; }
  .hero-foot { animation-delay: 0.30s; }
}
@media print {
  :root, :root[data-theme="dark"] {
    --bg: #fff; --surface: #fff; --ink: #16232C; --muted: #5A6C79; --faint: #8CA0AC;
    --line: #dee2e6; --grid: #E9EDF3;
    --brand-accent: #5533ff; --brand-accent-soft: rgba(85, 51, 255, 0.10);
    --vwap: #C68533;
    --up: #198754; --up-soft: rgba(25, 135, 84, 0.12);
    --down: #dc3545; --down-soft: rgba(220, 53, 69, 0.12);
    --chip: #EEF1F7;
  }
  body { padding: 0; background: #fff; }
  .no-print, .controls, details.importer, #tip, #cmp-tip, #peer-tip, .site-header, .hero, footer { display: none !important; }
  .panel, .kpis { break-inside: avoid; }
  .panel { border-color: #dee2e6; box-shadow: none; }
}