/* HoloInvestor · sidestil for body[data-page="analytics"].
   Lenkes bare fra analytics.html, rett etter style.css.
   Regler som flere sider bruker, ligger i components.css. */

/* ===== Analytics ===== */

body[data-page="analytics"] .gate { padding: var(--s4) 0 var(--s5); border-bottom: 1px solid var(--line); margin-bottom: var(--s4); }

body[data-page="analytics"] .gate h3 { margin: 0 0 var(--s2); font-family: var(--font); font-size: 1rem; font-weight: 600; letter-spacing: 0; }

body[data-page="analytics"] .gate .btn { margin-top: var(--s2); }

/* ===== Trendgrafen (trendBars i js/trend-bars.js, eiers beslutning 04.10.2026) =====
   Liggende søyler ut fra en loddrett nullinje: oppgang til høyre, nedgang til venstre. Søylen, bruddmerket og
   notene er .soyle* fra components.css, i --blekk; retningen står i siden og fortegnet, aldri i farge.
   Prosentkolonnene har fast bredde, så de to halvdelene er like brede i hver rad og skalaen er felles.
   Under 768 px står navnet over søylen; fra 768 px ved siden av. */
body[data-page="analytics"] .trend-rad { display: grid; gap: var(--lin1) var(--lin3); align-items: center; padding: var(--lin2) 0; border-bottom: 1px solid var(--linje); }
body[data-page="analytics"] .trend-kort { margin: 0; min-width: 0; font: 400 15px/22px var(--f-tall); }
body[data-page="analytics"] .trend-kort .soyle-kilde { white-space: nowrap; }
body[data-page="analytics"] .trend-spor {
  display: grid; grid-template-columns: 4.75em minmax(0, 1fr) minmax(0, 1fr) 4.75em; align-items: center;
  font: 400 13px/20px var(--f-tall); font-variant-numeric: lining-nums tabular-nums;
}
body[data-page="analytics"] .trend-pct { white-space: nowrap; }
body[data-page="analytics"] .trend-pct:first-child { text-align: right; padding-right: var(--lin1); }
body[data-page="analytics"] .trend-pct:last-child { padding-left: var(--lin1); }
body[data-page="analytics"] .trend-halv { position: relative; height: 20px; }
/* nullinja: 1 px --blekk mellom halvdelene, i hver rad */
body[data-page="analytics"] .trend-halv--opp { border-left: 1px solid var(--blekk); }
body[data-page="analytics"] .trend-halv .soyle { inset: 4px auto 4px 0; }
body[data-page="analytics"] .trend-halv--ned .soyle { inset: 4px 0 4px auto; }
body[data-page="analytics"] .trend-halv--ned .soyle-brudd { right: auto; left: 10px; }
body[data-page="analytics"] .trend-tabell { margin-top: var(--lin4); }
body[data-page="analytics"] .trend-tabell summary { font: 400 14px/24px var(--f-tall); min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--blekk-2); }
@media (min-width: 768px) {
  body[data-page="analytics"] .trend-rad { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}