/* ==========================================================================
   Tyren v4 — shared design system · ARCTIC
   Surface: arctic slate (+1). Chrome/brand: ice. Logo: green (heritage).
   Semantics (up/down/hold) untouched — colour = judgment, ice = Tyren.
   ========================================================================== */

:root{
  /* surfaces — arctic +1 */
  --bg:#0F151F; --bg2:#131A26; --panel:#161E2A; --panel2:#1C2634;
  --line:rgba(159,196,255,.08); --line2:rgba(159,196,255,.17);
  /* ink — v2 */
  --ink:#ECEEEA; --ink2:#A3A9A4; --muted:#8B9189;
  /* elevation — three steps */
  --el-1:inset 0 1px 0 rgba(255,255,255,.03);
  --el-2:inset 0 1px 0 rgba(255,255,255,.03), 0 14px 34px -22px rgba(0,0,0,.85);
  --el-3:inset 0 1px 0 rgba(255,255,255,.05), 0 24px 56px -20px rgba(0,0,0,.92);
  --card-sh:var(--el-2);
  /* brand — arctic ice: buttons, tabs, links, badges, focus. NOT data. */
  --brand:#BFE0FF; --brand-ink:#06121F; --brand-dim:rgba(191,224,255,.10);
  --lime:#BFE0FF; --lime-ink:#06121F; --lime-dim:rgba(191,224,255,.10);
  /* logo — heritage green arrow (brand mark only, never UI chrome) */
  --logo:#5BC9A6;
  /* charts — price/series lines render in ice (direction lives in chips) */
  --chart:#BFE0FF; --chart-dim:rgba(191,224,255,.16);
  /* arctic polish — card sheen + hero price glow */
  --sheen:rgba(191,224,255,.45);
  --price-glow:0 0 28px rgba(191,224,255,.20);
  /* verdict semantics — UNCHANGED: figures keep their colours */
  --up:#5BC9A6; --down:#E5765E; --hold:#D9AE55;
  --up-dim:rgba(91,201,166,.14); --down-dim:rgba(229,118,94,.14); --hold-dim:rgba(217,174,85,.16);
  /* data-viz extras (teal distinct from brand purple for multi-series charts) */
  --viz-purple:#B3A4F0; --viz-teal:#56C2C2;
  /* Tyren AI persona — ice, same as brand chrome */
  --ai:#BFE0FF; --ai-dim:rgba(191,224,255,.13); --ai-line:rgba(159,196,255,.30);
  /* type */
  --fd:'Schibsted Grotesk',system-ui,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,monospace;
  /* type scale — 11 12 13 14 16 20 25 32 62 (mono only for data) */
  --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-base:14px;
  --fs-md:16px; --fs-lg:20px; --fs-xl:25px; --fs-2xl:32px; --fs-display:62px;
  /* spacing — 4px base */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  /* radius — three steps */
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  /* layout */
  --shell:1240px; --nav-h:64px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--fd); -webkit-font-smoothing:antialiased;
  overflow-x:hidden; min-height:100vh;
}
body::before{ /* faint top-right glow, the one decorative flourish — now ice */
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(820px 480px at 80% -8%,rgba(191,224,255,.06),transparent 60%);
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--brand);color:var(--brand-ink)}
*:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}

/* utilities */
.mono{font-family:var(--fm)}
.up{color:var(--up)} .down{color:var(--down)} .hold{color:var(--hold)}
.shell{max-width:var(--shell);margin:0 auto;padding:0 36px;position:relative;z-index:1}
.eyebrow{
  font-family:var(--fm); font-size:var(--fs-xs); font-weight:500; letter-spacing:.04em;
  color:var(--muted); display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{content:'';width:16px;height:1.5px;background:var(--brand)}

/* ==========================================================================
   Shared top navigation (injected by tyren-shell.js)
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  background:rgba(11,16,24,.78); border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:24px}
.nav-l{display:flex;align-items:center;gap:34px;min-width:0}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand svg{display:block}
.brand-tx{font-size:20px;font-weight:700;letter-spacing:.16em}
.nav-menu{display:flex;align-items:center;gap:2px}
.nav-menu a{
  font-size:14px;font-weight:500;color:var(--ink2);
  padding:8px 14px;border-radius:9px;cursor:pointer;transition:.15s;white-space:nowrap;
}
.nav-menu a:hover{color:var(--ink);background:var(--panel)}
.nav-menu a.active{color:var(--brand)}
.nav-r{display:flex;align-items:center;gap:14px;flex:none}
.nav-search{
  display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-md);padding:9px 14px;width:250px;color:var(--muted);font-size:var(--fs-sm);cursor:text;
}
.nav-search svg{flex:none}
.nav-search .kbd{
  margin-left:auto;font-family:var(--fm);font-size:11px;border:1px solid var(--line2);
  border-radius:5px;padding:1px 6px;color:var(--ink2);
}
.nav-av{
  width:34px;height:34px;border-radius:50%;background:linear-gradient(150deg,#2a2d33,#15171b);
  border:1px solid var(--line2);display:grid;place-items:center;font-family:var(--fm);
  font-size:12px;color:var(--ink2);flex:none;cursor:pointer;
}

/* ==========================================================================
   Build-in-progress stub (temporary, per-page content replaces it)
   ========================================================================== */
.page-stub{padding:120px 0;text-align:center}
.page-stub .eyebrow{justify-content:center;margin-bottom:14px}
.page-stub h1{font-size:34px;font-weight:600;letter-spacing:-.02em;margin:0 0 10px}
.page-stub p{color:var(--ink2);font-size:15px;max-width:46ch;margin:0 auto;line-height:1.6}

/* ==========================================================================
   Shared footer (injected by tyren-shell.js)
   ========================================================================== */
.foot{position:relative;z-index:1;margin-top:var(--sp-16);border-top:1px solid var(--line);background:rgba(11,16,24,.45)}
.foot-in{display:flex;flex-direction:column;gap:var(--sp-5);padding:var(--sp-10) 0 var(--sp-8)}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-brand-tx{font-size:var(--fs-md);font-weight:700;letter-spacing:.16em}
.foot-nav{display:flex;gap:4px;flex-wrap:wrap}
.foot-nav a{font-size:var(--fs-sm);color:var(--ink2);padding:6px 10px;border-radius:var(--r-sm);transition:.15s}
.foot-nav a:hover{color:var(--ink);background:var(--panel)}
.foot-meta{display:flex;flex-direction:column;gap:var(--sp-2);border-top:1px solid var(--line);padding-top:var(--sp-4)}
.foot-disc{font-size:var(--fs-xs);color:var(--ink2);line-height:1.6;max-width:90ch;margin:0}
.foot-src{font-family:var(--fm);font-size:var(--fs-2xs);color:var(--muted);line-height:1.6}
.foot-copy{font-family:var(--fm);font-size:var(--fs-2xs);color:var(--muted);margin-top:var(--sp-1)}

.nav-search-m{display:none}
.foot-legal{margin-top:-6px}
.foot-nav-legal a{color:var(--muted);font-size:var(--fs-xs)}

/* ==========================================================================
   Shared page scaffolding (Marked, Børspuls, Strategier, Portefølje, Mine sider)
   ========================================================================== */
.ph{padding:44px 0 8px}
.ph h1{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.02em;margin:10px 0 0}
.ph-sub{font-size:var(--fs-base);color:var(--ink2);margin-top:8px;line-height:1.55;max-width:62ch}
.ph-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.mono-logo{
  width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--panel2);border:1px solid var(--line);font-family:var(--fm);
  font-size:12px;font-weight:700;color:var(--ink2);letter-spacing:.04em;
}
.mono-logo.logo-img{background:#fff;border-color:var(--line2);overflow:hidden}
.mono-logo.logo-img img{width:100%;height:100%;object-fit:contain;display:block}
.pill{display:inline-flex;align-items:center;font-family:var(--fm);font-size:11px;font-weight:500;border-radius:6px;padding:3px 9px}
.pill.sterk{color:var(--up);background:var(--up-dim)}
.pill.midt{color:var(--hold);background:var(--hold-dim)}
.pill.svak{color:var(--down);background:var(--down-dim)}
.empty-note{color:var(--ink2);font-size:var(--fs-base);line-height:1.6;padding:26px 0}
.empty-note a{color:var(--brand)}

/* ==========================================================================
   Legal / prose pages (om, vilkår, personvern)
   ========================================================================== */
.legal{max-width:72ch;padding:44px 0 20px}
.legal h1{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.02em;margin:10px 0 8px}
.legal .lead{font-size:15px;color:var(--ink2);line-height:1.65;margin:0 0 8px}
.legal h2{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;margin:40px 0 10px}
.legal p,.legal li{font-size:14px;color:var(--ink2);line-height:1.7}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 14px;padding-left:20px}
.legal b{color:var(--ink);font-weight:600}
.legal .upd{font-family:var(--fm);font-size:11px;color:var(--muted);margin-top:18px}
.legal a{color:var(--brand)}

/* ==========================================================================
   Tyren AI card — the shared chrome for any LLM/AI-written panel.
   Mirrors the company-page analysis card (aksje.html) byte-for-byte so the
   "Tyren AI" box looks identical wherever it appears (e.g. Børspuls morgenrapport).
   aksje.html keeps its own local copy for the analysis-specific tabs; these base
   rules must stay in sync with it.
   ========================================================================== */
.cp-ai-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:12px;letter-spacing:.06em;
  color:var(--ink);background:var(--panel2);border:1px solid var(--line2);border-radius:30px;padding:5px 13px}
.cp-ai-badge .ta-spark{color:var(--brand)}
.ta{background:linear-gradient(180deg,rgba(191,224,255,.09),rgba(24,33,47,.4));border:1px solid var(--line2);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--el-2)}
.ta-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.ta-head-l{display:flex;align-items:center;gap:14px}
.ta-title{font-size:var(--fs-md);font-weight:600}
.ta-upd{display:inline-flex;align-items:center;gap:7px;font-family:var(--fm);font-size:11.5px;color:var(--ink)}
.ta-upd::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none}
.ta-body{display:grid;grid-template-columns:308px 1fr}
.ta-body>*{min-width:0}
.ta-sum{padding:22px;border-right:1px solid var(--line);background:transparent;display:flex;flex-direction:column}
.ta-sum-eb{font-family:var(--fm);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ta-sum-p{font-size:var(--fs-base);color:var(--ink);line-height:1.6;margin:14px 0 0}
.ta-sum-p .ta-spark{float:left;margin:3px 8px 0 0}
.ta-kp{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--ai-line);display:flex;flex-direction:column;gap:11px}
.ta-kp li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm);color:var(--ink2);line-height:1.5}
.ta-kp li::before{content:'';flex:none;width:5px;height:5px;border-radius:50%;background:var(--ai);margin-top:7px}
.ta-disc{font-family:var(--fm);font-size:11px;color:var(--muted);margin-top:auto;padding-top:20px;line-height:1.6}
.ta-soon{color:var(--ai)}
.ta-spark{color:var(--ai);flex:none;display:inline-flex}
.ta-main{min-width:0}
.ta-pane{padding:22px 26px 24px}
.ta-h6{font-family:var(--fm);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:24px 0 12px}
.ta-h6:first-child{margin-top:0}
.ta-par{font-size:14px;color:var(--ink2);line-height:1.65;max-width:78ch;margin:0 0 14px}
.ta-par:last-child{margin-bottom:0}

/* ==========================================================================
   Mobile bottom tab bar (the app navigation under 760px)
   ========================================================================== */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  background:rgba(18,21,25,.88);backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-top:1px solid var(--line2);
  padding:6px max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right));
}
.tabbar .tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 2px 5px;border-radius:10px;color:var(--muted);min-height:48px;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.tabbar .tab svg{display:block}
.tabbar .tab span{font-size:10px;font-weight:500;letter-spacing:.01em}
.tabbar .tab.on{color:var(--brand)}
.tabbar .tab:active{background:var(--panel)}

/* ==========================================================================
   Mobile — the chrome
   ========================================================================== */
@media (max-width:760px){
  :root{--nav-h:56px;--fs-2xl:26px;--fs-xl:22px;--fs-display:44px}
  .shell{padding:0 16px}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .nav-menu{display:none}
  .nav-search{display:none}
  .nav-search-m{
    display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
    background:var(--panel);border:1px solid var(--line);color:var(--ink2);cursor:pointer;
  }
  .nav-l{gap:12px}
  .nav-av{width:32px;height:32px;font-size:11px}
  .brand-tx{font-size:17px}
  .tabbar{display:flex}
  .ph{padding:26px 0 4px}
  .foot{margin-top:var(--sp-12)}
  .foot-in{padding:26px 0 20px}
  .foot-top{flex-direction:column;align-items:flex-start;gap:12px}
  .foot-nav{margin-left:-10px}
  /* shared Tyren AI card stacks rail-over-content (mirrors aksje.html) */
  .ta-body{grid-template-columns:1fr}
  .ta-sum{border-right:0;border-bottom:1px solid var(--ai-line);padding:18px 16px}
  .ta-head{padding:14px 16px}
  .ta-title{font-size:14px}
  .ta-pane{padding:18px 16px 20px}
  .ta-par{font-size:13.5px}
}