/* Portaler, /portaler/ (sak 27025, 2026-10-25). Hero med en illustrasjon av én portal som viser riktig innhold for
 * hver brukergruppe: en animert peker bytter mellom kunde, medlem, leverandør og ansatt, og ordner en oppgave i
 * hver (betaler, melder seg på, laster opp, søker ferie). Merket «Illustrasjon», og ingenting kan klikkes.
 * Uten skript eller med redusert bevegelse står kundevisningen ferdig. */

.po-hero { position: relative; overflow: hidden; overflow: clip; isolation: isolate; padding: 9.5rem 0 5rem; }
@media (max-width: 991.98px) { .po-hero { padding: 8rem 0 3rem; } }
.po-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(45% 60% at 76% 50%, rgba(255,140,60,.16), transparent 70%), radial-gradient(35% 45% at 95% 10%, rgba(122,60,255,.16), transparent 70%), radial-gradient(30% 40% at 8% 90%, rgba(82,140,255,.12), transparent 70%); }
.po-hero .po-stov { filter: blur(.7px); }
.po-hero > .container { position: relative; z-index: 1; }
.po-eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(255,181,71); margin: 0 0 1rem; }
.po-h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; margin: 0 0 1.2rem; }
.po-lead { font-size: 1.15rem; line-height: 1.6; color: rgba(255,255,255,.8); max-width: 32rem; margin: 0 0 2rem; }

/* Vinduet. Fargen følger brukergruppen (--po-a). */
.po-demo { --po-a: 226,88,34; position: relative; max-width: 590px; margin: 0 auto; }
.po-demo[data-rolle="medlem"] { --po-a: 122,60,255; }
.po-demo[data-rolle="leverandor"] { --po-a: 37,99,235; }
.po-demo[data-rolle="ansatt"] { --po-a: 16,150,110; }
@media (max-width: 991.98px) { .po-demo { margin-top: 2.5rem; } }
.po-demo, .po-demo * { pointer-events: none; user-select: none; cursor: default; }
.po-demo::before { content: ""; position: absolute; inset: 10% -5% -5% 8%; z-index: -1; border-radius: 40px; filter: blur(50px); opacity: .55;
    background: rgb(var(--po-a)); transition: background .8s ease; }
.po-vindu { position: relative; border-radius: 14px; overflow: hidden; background: rgb(246,247,250); color: rgb(31,41,55);
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.12); font-family: Inter, Arial, sans-serif; }
.po-bar { display: flex; align-items: center; gap: .35rem; padding: .55rem .8rem; background: rgb(233,236,242); }
.po-bar > i { width: 9px; height: 9px; border-radius: 50%; background: rgb(243,154,143); } .po-bar > i:nth-child(2) { background: rgb(245,207,122); } .po-bar > i:nth-child(3) { background: rgb(143,211,166); }
.po-url { margin-left: .6rem; padding: .18rem .7rem; border-radius: 99px; background: rgb(255,255,255); font-size: .66rem; color: rgb(107,114,128); display: inline-flex; align-items: center; gap: .3rem; }
.po-url svg { width: 10px; height: 10px; fill: none; stroke: rgb(16,150,110); stroke-width: 2.4; stroke-linecap: round; }
.po-tag { margin-left: auto; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(107,114,128); }

.po-app { display: grid; grid-template-columns: 52px 1fr; min-height: 340px; }
.po-side { display: flex; flex-direction: column; align-items: center; gap: .9rem; padding: 1rem 0; background: rgb(31,41,55); }
.po-side b { width: 26px; height: 26px; border-radius: 8px; background: rgb(var(--po-a)); transition: background .6s ease; box-shadow: 0 4px 12px -2px rgba(var(--po-a),.7); }
.po-side i { width: 18px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); }
.po-side i:nth-of-type(1) { background: rgba(255,255,255,.7); }
.po-hoved { padding: 1rem 1.1rem 1.1rem; min-width: 0; }

.po-topp { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .9rem; }
.po-hei { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.po-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; color: rgb(255,255,255);
    background: linear-gradient(135deg, rgb(var(--po-a)), rgba(var(--po-a),.6)); transition: background .6s ease; }
.po-hei b { display: block; font-size: .9rem; line-height: 1.2; }
.po-hei small { display: block; font-size: .68rem; color: rgb(107,114,128); }
.po-roller { display: inline-flex; padding: 3px; border-radius: 10px; background: rgb(233,236,242); }
.po-rolle { padding: .3rem .6rem; border-radius: 8px; font-size: .68rem; font-weight: 700; color: rgb(107,114,128); transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .15s ease; }
.po-rolle.valgt { background: rgb(255,255,255); color: rgb(var(--po-a)); box-shadow: 0 2px 6px -2px rgba(31,41,55,.3); }
.po-rolle.trykk, .po-knapp.trykk { transform: scale(.94); }

/* Kortene */
.po-kortene { display: grid; gap: .55rem; min-height: 222px; }
.po-kort { display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border-radius: 12px; background: rgb(255,255,255); box-shadow: 0 0 0 1px rgba(31,41,55,.06), 0 6px 16px -12px rgba(31,41,55,.35); }
.po-ikon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: rgb(var(--po-a)); background: rgba(var(--po-a),.1); transition: color .6s ease, background .6s ease; }
.po-ikon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.po-tekst { flex: 1; min-width: 0; }
.po-tekst b { display: block; font-size: .82rem; line-height: 1.25; }
.po-tekst small { display: block; font-size: .7rem; color: rgb(107,114,128); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-prog { display: block; height: 5px; margin-top: .4rem; border-radius: 3px; background: rgb(233,236,242); overflow: hidden; }
.po-prog i { display: block; height: 100%; width: 0; border-radius: 3px; background: rgb(var(--po-a)); transition: width 1.1s cubic-bezier(.2,.8,.2,1), background .6s ease; }
.po-prog.p75 i { width: 75%; }
.po-knapp { flex: none; padding: .4rem .75rem; border-radius: 8px; font-size: .72rem; font-weight: 700; color: rgb(255,255,255); background: rgb(var(--po-a));
    box-shadow: 0 4px 12px -4px rgba(var(--po-a),.8); transition: transform .15s ease, background .3s ease, box-shadow .2s ease; white-space: nowrap; }
.po-knapp.hover { box-shadow: 0 6px 18px -4px rgba(var(--po-a),.9), 0 0 0 3px rgba(var(--po-a),.18); }
.po-knapp.ferdig { background: rgb(23,166,115); box-shadow: 0 3px 10px -2px rgba(23,166,115,.5); animation: po-pop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes po-pop { 0% { transform: scale(.88); } 100% { transform: none; } }
.po-js .po-kort { transition: opacity .4s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.po-js .po-kort.skjult { opacity: 0; transform: translateX(14px); }

/* Data fra systemene */
.po-kilde { display: flex; align-items: center; gap: .45rem; margin-top: .85rem; font-size: .66rem; font-weight: 600; color: rgb(107,114,128); }
.po-kilde::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgb(23,166,115); box-shadow: 0 0 0 0 rgba(23,166,115,.5); animation: po-live 2s ease-out infinite; }
@keyframes po-live { 0% { box-shadow: 0 0 0 0 rgba(23,166,115,.5); } 100% { box-shadow: 0 0 0 7px rgba(23,166,115,0); } }

/* Bekreftelsen som dukker opp */
.po-toast { position: absolute; right: 14px; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: .45rem; padding: .5rem .8rem; border-radius: 10px;
    background: rgb(31,41,55); color: rgb(255,255,255); font-size: .72rem; font-weight: 700; box-shadow: 0 12px 30px -10px rgba(0,0,0,.5);
    opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.po-toast::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgb(23,166,115); font-size: .65rem; }
.po-toast.vis { opacity: 1; transform: none; }

/* Pekeren */
.po-cursor { position: absolute; left: 0; top: 0; z-index: 20; width: 22px; height: 22px; opacity: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
    transform: translate(var(--cx, 90%), var(--cy, 110%)); transition: transform .75s cubic-bezier(.55,0,.25,1), opacity .4s ease; }
.po-cursor.vis { opacity: 1; }
.po-ring { position: absolute; z-index: 19; width: 30px; height: 30px; margin: -15px; border-radius: 50%; border: 2px solid rgba(var(--po-a),.8); animation: po-ring .6s ease-out forwards; }
@keyframes po-ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

@media (max-width: 575.98px) {
    .po-app { grid-template-columns: 1fr; }
    .po-side { display: none; }
    .po-hoved { padding: .9rem; }
    .po-url { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .po-kilde::before { animation: none; }
    .po-cursor { display: none; }
}