/* AIvantage design tokens — copied from the sales page (aivantage-landing/index.html).
   Same variable names on purpose: the portal must read as the same product. */
:root{
  --bg:#0D1517; --bg2:#101A1D; --s1:#19272B; --s2:#1B282C; --s3:#203034; --line:#38464A;
  --g:#1FCB4F; --g2:#5CEB86; --mint:#2EE6A6; --o:#F04937;
  --tx:#F5F7F7; --mu:#9FB0B3; --mu2:#6F8286;
  --disp:"Archivo", "Inter", system-ui, sans-serif;
  --body:"Inter", system-ui, -apple-system, sans-serif;
  --wrap:1200px; --gut:clamp(16px,4vw,40px);
  --c:10px; --ch:14px;
  /* Rivikorkeusasteikko: mitä isompi teksti, sitä tiukempi suhde. Yksi lähde koko portaalille. */
  --ctl:44px;       /* yksi ohjainkorkeus: kenttä, valinta ja nappi samalla rivillä */
  --ctl-sm:34px;    /* rivinsisäiset ohjaimet (taulukot, suodattimet) */
  --lh-body:1.55;    /* leipäteksti >= 14px */
  --lh-ui:1.45;      /* käyttöliittymäteksti 11-13.5px: apuja, taulukot, pienet */
  --lh-caps:1.3;     /* VERSAALIOTSAKKEET (eyebrow, label) */
  --lh-head:1.22;    /* väliotsikot 14-24px */
  --lh-display:1.06; /* isot otsikot ja luvut >= 26px */
  /* data semantics */
  --own:var(--g); --eu:var(--mint); --us:#7C8E92; --blocked:var(--o);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);font-family:var(--body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;font-feature-settings:"cv08" 1}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{font-family:var(--disp);font-stretch:118%;font-weight:700;letter-spacing:-.02em;line-height:var(--lh-display)}
h2,h3{line-height:var(--lh-head)}
small{line-height:var(--lh-ui)}
/* Rivitys: kaikki teksti ilman leskiä (pretty periytyy), otsikot ja nimiöt tasapainoon.
   pretty ei kavenna kappaletta — balance vain lyhyille, joiden kuuluu olla tasapainossa.
   text-wrap-style (ei text-wrap): ei kumoa white-space:nowrap -sääntöjä. */
body{text-wrap-style:pretty}
h1,h2,h3,h4,legend,summary,dt,th,figcaption,.label,.eyebrow{text-wrap-style:balance}
.ai{font-family:"IBM Plex Sans",var(--body);font-stretch:100%;letter-spacing:.01em}
.eyebrow,.label{font-family:var(--disp);font-stretch:125%;font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;line-height:var(--lh-caps)}
.eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--g)}
.eyebrow::before{content:"";width:11px;height:11px;background:currentColor;clip-path:polygon(16% 14%,47% 4%,82% 10%,95% 35%,100% 69%,91% 80%,54% 100%,14% 83%,0 72%,2% 28%)}
.label{color:var(--mu2)}
.num,td.n,th.n{font-variant-numeric:tabular-nums}

/* chamfered button — identical to the sales page CTA */
.btn{--c:10px;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--g);color:#04170A;font-family:var(--disp);font-stretch:112%;font-weight:700;font-size:14.5px;letter-spacing:.01em;line-height:1;text-decoration:none;min-height:var(--ctl);padding:0 20px;border:0;cursor:pointer;clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));transition:background .25s;white-space:nowrap}
.btn:hover{background:var(--g2)}
.btn:focus-visible{outline:2px solid var(--tx);outline-offset:4px}
.btn.ghost{background:var(--s3);color:var(--tx)}
.btn.ghost:hover{background:#2a3d42}
.btn.danger{background:var(--o);color:#1a0603}
.btn.sm{min-height:var(--ctl-sm);padding:1px 14px 0;font-size:13px;--c:7px}  /* 1px: Archivon versaalit istuvat 13px:ssä 0,46px korkealla */

/* chamfered card: 1px gradient rim + inner panel */
.card{--c:var(--ch);position:relative;background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 40%,rgba(255,255,255,.06));clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));padding:1px}
.card>.in{position:relative;height:100%;background:linear-gradient(170deg,rgba(32,48,52,.92),rgba(25,39,43,.92));clip-path:polygon(calc(var(--c) - .4px) 0,100% 0,100% calc(100% - var(--c) + .4px),calc(100% - var(--c) + .4px) 100%,0 100%,0 calc(var(--c) - .4px));padding:24px}
.card.ok{background:linear-gradient(160deg,rgba(31,203,79,.75),rgba(31,203,79,.15) 50%,rgba(31,203,79,.45))}
.card.ok>.in{background:linear-gradient(170deg,rgba(24,52,38,.96),rgba(22,38,36,.96))}
.card.warn{background:linear-gradient(160deg,rgba(240,73,55,.7),rgba(240,73,55,.12) 50%,rgba(240,73,55,.4))}

/* status pills */
.pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:3px 10px;font-size:12px;line-height:16px;font-weight:500;border:1px solid var(--line);color:var(--mu);white-space:nowrap}
.pill.own{color:var(--g);border-color:rgba(31,203,79,.45);background:rgba(31,203,79,.08)}
.pill.eu{color:var(--mint);border-color:rgba(46,230,166,.4);background:rgba(46,230,166,.07)}
.pill.us{color:var(--us);border-color:rgba(124,142,146,.45)}
.pill.bad{color:#FF7A66;border-color:rgba(240,73,55,.5);background:rgba(240,73,55,.08)}
.pill.pending{color:#F3C969;border-color:rgba(243,201,105,.45);background:rgba(243,201,105,.07)}

/* live dot: the sales page "ping" pulse — only for live status */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 0 0 rgba(31,203,79,.6);animation:ping 2.4s infinite;flex:none}
.dot.down{background:var(--o);animation:none}
.dot.unknown{background:var(--mu2);animation:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(31,203,79,.55)}70%,100%{box-shadow:0 0 0 10px rgba(31,203,79,0)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}