/* vLab - den åpne landingssiden (login.html). Arbeidsstrøm A1.
 *
 * Motivet er notebooken: seksjonene er nummerert som celler (In [n]:),
 * og heroen viser en notebook som kjører tre celler og tegner en
 * produksjonsplan. Bare tokens fra vlab.css. På hero-flatene (alltid
 * SINTEF-blå) blandes hero-tokenene med color-mix for svake streker.
 */

/* ---------- hero ---------- */
.ln-hero{padding:56px 0 64px}
.ln-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center}
.ln-hero h1{font-size:clamp(2.1rem,4.6vw,3.3rem);margin-bottom:.35em;max-width:16ch}
.ln-hero .lead{font-size:1.2rem;max-width:54ch;margin-bottom:1.2em}
.ln-hero .note{color:var(--fg)}
.ln-cta{margin-top:0}
.ln-cta .btn{min-height:48px;padding-left:22px;padding-right:22px}
.ln-hero-note{margin:14px 0 0;font-size:.98rem}
.ln-pills{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ln-pills li{font:13px/1 var(--mono);padding:7px 10px;border-radius:999px;color:var(--hero-fg);
  border:1px solid color-mix(in srgb,var(--hero-fg) 32%,transparent);background:color-mix(in srgb,var(--hero-fg) 6%,transparent)}
@media (max-width:900px){
  .ln-hero-grid{grid-template-columns:1fr;gap:36px}
  .ln-hero{padding:40px 0 48px}
}

/* ---------- notebook-illustrasjonen ---------- */
.nb{margin:0;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow),0 24px 60px color-mix(in srgb,var(--hero-bg-2) 75%,transparent)}
.nb-top{display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--surface);border-bottom:1px solid var(--line)}
.nb-dots{display:flex;gap:6px}
.nb-dots i{width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.nb-dots i:first-child{background:var(--cell)}
.nb-file{font-size:.82rem;color:var(--dim);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb-run{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.82rem;font-weight:700;color:var(--heading);background:var(--bg);
  border:1px solid var(--line-strong);border-radius:6px;padding:4px 10px;cursor:pointer;min-height:30px}
.nb-run:hover{border-color:var(--cell);background:var(--cell-soft)}
.nb-run[disabled]{opacity:.6;cursor:default}
.nb-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:10px}
.nb-cell{display:grid;grid-template-columns:3.2em minmax(0,1fr);column-gap:6px;align-items:start;border-left:3px solid var(--line-strong);
  padding:6px 8px 6px 4px;border-radius:0 6px 6px 0;background:var(--bg);transition:border-color .25s ease,background-color .25s ease}
.nb-cell code{grid-column:2;font:13.5px/1.55 var(--mono);background:var(--code-bg);border:1px solid var(--line);border-radius:5px;padding:5px 8px;
  white-space:pre-wrap;overflow-wrap:anywhere;transition:opacity .25s ease}
.nb-n{grid-column:1;grid-row:1;font:12.5px/2.1 var(--mono);color:var(--dim);text-align:right;padding-right:2px}
.nb-out{grid-column:2;margin-top:6px;transition:opacity .35s ease}
.nb-out.mono{font-size:12.5px;color:var(--dim);display:flex;align-items:center;gap:7px}
.nb-ok{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.nb-cell.done{border-left-color:var(--ok)}
.nb-cell.running{border-left-color:var(--cell);background:var(--cell-soft)}
.nb-cell.running .nb-n{color:var(--heading)}
.k-fn{color:var(--heading);font-weight:700}
.k-var{color:var(--ok-ink)}
.k-str{color:var(--violet)}
.k-op{color:var(--dim)}
.nb-chart svg{display:block;width:100%;height:auto}
.nb-grid{stroke:var(--line);stroke-width:1;fill:none;stroke-dasharray:2 3}
.nb-axis{stroke:var(--line-strong);stroke-width:1;fill:none}
.nb-bar{fill:var(--c2);opacity:.85;transform-box:fill-box;transform-origin:50% 100%}
.nb-line{fill:none;stroke:var(--c1);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.nb-tick{font:9px var(--mono);fill:var(--dim)}
.vl-hero .nb p,.nb .nb-legend{margin:6px 0 0;color:var(--dim);font-size:.8rem;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lg-bar{width:10px;height:10px;border-radius:2px;background:var(--c2);opacity:.85}
.lg-line{width:16px;height:2px;background:var(--c1);margin-left:10px}
/* Avspilling: landing.js setter .anim på .nb og pending/running/done på cellene. */
.nb.anim .nb-cell.pending code{opacity:.5}
.nb.anim .nb-cell:not(.done) .nb-out{opacity:0}
.nb.anim .nb-cell:not(.done) .nb-bar{transform:scaleY(0)}
.nb.anim .nb-cell:not(.done) .nb-line{stroke-dashoffset:1}
.nb.anim .nb-cell.done .nb-bar{transition:transform .55s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 28ms)}
.nb.anim .nb-cell.done .nb-line{transition:stroke-dashoffset 1.3s ease .35s}
@media (prefers-reduced-motion:reduce){
  .nb-cell,.nb-cell code,.nb-out,.nb-bar,.nb-line{transition:none !important}
}

/* ---------- seksjoner ---------- */
.ln-section{padding-top:76px}
.ln-section > h2,.ln-split h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.ln-section .lead,.ln-split .lead{font-size:1.14rem}
.ln-kicker{margin:0 0 6px;font-size:.88rem;color:var(--dim)}
.vl-hero .ln-kicker{color:var(--hero-dim)}
.ln-login{margin:36px auto 0;max-width:620px}
.ln-login .cell{padding:22px 24px}
.ln-login label{font-weight:700;color:var(--heading)}
.ln-login .login_terms label{font-weight:400;color:var(--fg)}

/* hva du kan gjøre: celler i to kolonner, [n] i margen */
.ln-feats{list-style:none;margin:26px 0 0;padding:0 0 0 3.6em;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 4.4em}
.ln-feats .cell p{margin:0;color:var(--fg)}
.ln-feats h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media (max-width:900px){.ln-feats{grid-template-columns:1fr}}
@media (max-width:760px){.ln-feats{padding-left:0}}

/* modeller */
.ln-filter{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.ln-filter .sw[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.ln-models{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.model{display:flex;flex-direction:column;gap:10px;background:var(--bg);border:1px solid var(--line);border-left:4px solid var(--line-strong);
  border-radius:4px var(--radius) var(--radius) 4px;padding:16px 18px;box-shadow:var(--shadow)}
.model[data-cat="hydro"]{border-left-color:var(--cell)}
.model[data-cat="market"]{border-left-color:var(--ok)}
.model[data-cat="grid"]{border-left-color:var(--warn)}
.model[data-cat="research"]{border-left-color:var(--violet)}
.model-head{display:flex;gap:14px;align-items:flex-start}
.model-icon{width:48px;height:48px;flex:none;border-radius:10px}
.model h3{margin:2px 0 2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.model-tag{margin:0;color:var(--dim);font-size:.95rem}
.model-sum{margin:0;font-size:.97rem}
.model-foot{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:auto}
.model-docs{margin-left:auto;font-weight:700;font-size:.95rem}
.ln-models-note{margin-top:18px}

/* plattform og KI: tekst + illustrasjon side om side */
.ln-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center}
@media (max-width:900px){.ln-split{grid-template-columns:1fr;gap:28px}}
.ln-checks{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ln-checks li{position:relative;padding-left:24px}
.ln-checks li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:10px;border-radius:2px;background:var(--ok)}
.ln-checks b{color:var(--heading)}
.vl-hero .ln-checks b{color:var(--hero-fg)}
.vl-hero .ln-checks span{color:var(--hero-dim)}
.ln-stack{list-style:none;margin:0;padding:0 0 0 3.6em;display:flex;flex-direction:column;gap:22px}
.ln-stack .cell{display:flex;flex-direction:column;gap:2px;padding:14px 18px}
.ln-stack .cell + .cell::after{content:"";position:absolute;left:28px;top:-23px;height:22px;border-left:2px dashed var(--line-strong)}
.ln-stack b{color:var(--heading)}
.ln-stack .mono{font-size:.84rem;color:var(--dim)}
@media (max-width:760px){.ln-stack{padding-left:0}}

.ln-ai{margin-top:84px;padding:64px 0 68px}
.ln-ai h2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ln-chat{display:flex;flex-direction:column;gap:12px}
.chat-msg{background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:12px 16px;max-width:92%;box-shadow:var(--shadow)}
.chat-msg.me{align-self:flex-end;background:var(--surface);border-radius:10px 10px 2px 10px}
.chat-msg.ai{border-left:4px solid var(--cell);border-radius:4px 10px 10px 2px}
.chat-who{display:block;font-size:.78rem;color:var(--dim);margin-bottom:2px}
.vl-hero .chat-msg p{color:var(--fg);margin:0}
.vl-hero .chat-note{margin:0;font-size:.78rem;color:var(--hero-dim);text-align:right}

/* hvem */
.ln-who{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr))}
.ln-who .card{border-top:4px solid var(--cell)}
.ln-who p{margin:0;color:var(--dim)}
@media (max-width:1000px){.ln-who{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ln-who{grid-template-columns:1fr}}

/* tilgang */
.ln-steps{list-style:none;margin:24px 0 0}
.ln-steps .cell p{margin:0}
.ln-acc-cta{margin-top:24px;padding-left:3.6em}
@media (max-width:760px){.ln-acc-cta{padding-left:0}}
.vl-landing .vl-foot{margin-top:80px}