/* Platform (da/platform.html): the page's own cards. Preview only. */
/* hero: the question as a glass pill, the answer as one card under it */
.hero.ms-hero--center .ms-hero-row.ms-lay-plask{grid-template-columns:minmax(0,480px);justify-items:center;gap:16px}
.ms-hero-row.ms-lay-plask .vc{margin-top:0!important}
.ms-hero-row.ms-lay-plask .vc.pl-askw{width:min(440px,100%);border-radius:999px}
.ms-hero-row.ms-lay-plask .vc.pl-answ{width:100%;text-align:left}
.pl-ask{display:flex;align-items:center;gap:10px;padding:2px 2px 2px 6px;font:500 15px/1.3 var(--sans);color:#1A2233;text-align:left}
.pl-q{flex:1;min-width:0}
.pl-kk{flex:none;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#fff 0 3px,#00693E 4px)}
.pl-ask i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#00693E;color:#fff;font-style:normal}.pl-ask .hi{font-size:16px}
.pl-k{display:flex;align-items:flex-start;gap:8px;margin:2px 0 0;font-size:14.5px;line-height:1.45;color:#1A2233}.pl-k b{font-weight:600;margin-right:2px}
.pl-kd{flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;background:radial-gradient(circle,#fff 0 2.5px,#00693E 3.5px);box-shadow:0 0 0 2.5px #E3F2E9}
.pl-ppl{list-style:none;margin:12px 0 0;padding:0;display:grid}
.pl-ppl li{display:flex;align-items:center;gap:11px;padding:9px 2px;border-top:1px solid #F0EEE9;font-size:14px}.pl-ppl li:first-child{border-top:0}
.pl-ppl .v-av,.pl-ini{width:34px;height:34px;border-radius:50%;flex:none}
.pl-ini{display:grid;place-items:center;background:#EEF1EC;color:#4F5B54;font:600 12px/1 var(--sans);letter-spacing:.02em}
.pl-ppl span{display:grid;min-width:0}.pl-ppl small{color:#6B7470;font-size:12.5px}
.pl-c{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:99px;background:#FDF3E3;color:#9A5B00;white-space:nowrap}
.pl-src{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-size:12px;color:#6B7470}.pl-src .hi{font-size:14px;color:#9AA29D}
.pl-draft.g{background:#E3F2E9;border-color:#E3F2E9;color:#00693E}
/* record and talent: the free compositions, out of their frames, ceramic on a soft panel */
.pl-free{display:block}
.pl-free .fl{width:100%;background:none}
.ms-panel--wide.pl-free .fl:not(.lg){aspect-ratio:100/60}
.pl-free .fg:not(.dark){background:#fff;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 0 0 1px var(--ms-hair),0 2.6cqw 5cqw -2.8cqw rgba(8,50,30,.38)}
.ms-zig .pl-free{padding:28px}
/* payroll: brutto → a line → netto */
.pl-hand .ms-panel-in{flex-wrap:nowrap;align-items:center;gap:96px}
.pl-tot{display:grid;gap:2px;margin-top:14px}.pl-tot span{font-size:12.5px;color:#6B7470}
.pl-tot b{font:600 30px/1.1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pl-ok{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pl-ok li{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:99px;background:#F1F8F4;font-size:12px;font-weight:500}.pl-ok .hi{font-size:14px;color:#00A550}
.pl-ok li:last-child{background:#F4F5F2}.pl-ok li:last-child .hi{color:#4F5B54}
.pl-sys{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pl-sys span{padding:7px 12px;border-radius:99px;background:#F6F3EE;font-size:13px;font-weight:600;color:#2A2F3A}
@media (max-width:1040px){.pl-hand .ms-panel-in{gap:64px}}
@media (max-width:720px){
  .pl-hand .ms-panel-in{gap:28px}
  .ms-zig .pl-free{padding:12px}
}
.pl-c{flex:none;overflow-wrap:normal}
/* the hand-off as two steps on the thread: brutto locked in Komma → netto in your payroll system */
.pl-hand .ms-panel-in{gap:120px}
.pl-in{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 12px;border-radius:14px;background:#F6F3EE}
.pl-in>span{display:grid;flex:1;min-width:0}.pl-in small{font-size:12.5px;color:#6B7470}.pl-in b{font:600 15px/1.25 var(--sans);font-variant-numeric:tabular-nums}
.pl-in .ks-chip{flex:none}
.pl-hand .pl-sys{margin-top:12px}
@media (max-width:720px){.pl-hand .ms-panel-in{gap:28px}}

/* the hero (29-10): a wall of widgets, what comes with Komma HR (flows, Karma) beside cards from the modules */
.hero.ms-hero--center .ms-hero-row.ms-lay-wall{display:grid;grid-template-columns:repeat(3,minmax(0,300px));justify-content:center;align-items:start;gap:18px}
.ms-hero-row.ms-lay-wall .vc{width:100%!important;max-width:none;margin:0!important;text-align:left}
.ms-hero-row.ms-lay-wall .vc:nth-child(2),.ms-hero-row.ms-lay-wall .vc:nth-child(5){transform:translateY(28px)}
@media (max-width:980px){.hero.ms-hero--center .ms-hero-row.ms-lay-wall{grid-template-columns:repeat(2,minmax(0,300px))}.ms-hero-row.ms-lay-wall .vc{transform:none!important}}
@media (max-width:720px){.hero.ms-hero--center .ms-hero-row.ms-lay-wall{grid-template-columns:minmax(0,340px)}.ms-hero-row.ms-lay-wall .vc:nth-child(n+4){display:none}}

/* the hero (30-10): text left, one widget right; Core HR in the middle, modules round it */
.ms-hero-obj.ms-lay-ring{height:500px;max-width:520px;width:100%;justify-self:end}
.ms-hero-obj .vc.pl-ringw{position:absolute;inset:0;width:100%;height:100%;padding:0;opacity:1;transform:none;border-radius:28px;background:#fff;box-shadow:0 0 0 1px rgba(8,50,30,.07),0 24px 48px -28px rgba(8,50,30,.35)}
.pl-ring{position:relative;width:100%;height:100%}
.pl-spokes{position:absolute;inset:0;width:100%;height:100%}
.pl-orbit{fill:none;stroke:#BFD8C9;stroke-width:.3;stroke-dasharray:1 1.4}
.pl-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:200px;height:200px;border-radius:50%;background:#0B5A36;color:#fff;display:grid;place-content:center;justify-items:center;text-align:center;padding:24px;box-shadow:0 0 0 10px #E3F2E9}
.pl-core b{font-family:var(--serif);font-size:30px;font-weight:500;line-height:1}
.pl-core small{margin-top:8px;font-size:12px;color:#BFE0CD;line-height:1.35}
.pl-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:grid;justify-items:center;gap:6px;width:112px;padding:12px 8px;border:0;border-radius:18px;background:#fff;font:600 12.5px/1.2 var(--sans);color:#1A2233;box-shadow:0 0 0 1.5px #00A550,0 10px 22px -14px rgba(8,50,30,.45);cursor:pointer;transition:opacity .25s,box-shadow .25s,transform .3s cubic-bezier(.16,1,.3,1)}
.pl-node svg{width:22px;height:22px;padding:6px;box-sizing:border-box;border-radius:10px;background:#E3F2E9;color:#00693E}
.pl-node[aria-pressed="false"]{opacity:.45;box-shadow:0 0 0 1px rgba(8,50,30,.12);background:#F6F3EE}
.pl-node[aria-pressed="false"] svg{background:#fff;color:#7A857F}
@media (hover:hover){.pl-node:hover{transform:translate(-50%,-50%) scale(1.04)}}
.pl-node:focus-visible{outline:2px solid #00A550;outline-offset:3px}
.pl-ringhint{position:absolute;left:0;right:0;bottom:6px;margin:0;text-align:center;font-size:11.5px;color:#7A857F}
@media (max-width:980px){.ms-hero-obj.ms-lay-ring{height:440px;justify-self:center}.pl-core{width:170px;height:170px}.pl-core b{font-size:26px}.pl-node{width:96px;padding:9px 6px;font-size:11.5px}}
@media (max-width:720px){.ms-hero-obj.ms-lay-ring{height:380px}.pl-core{width:140px;height:140px;padding:14px}.pl-core b{font-size:22px}.pl-core small{font-size:10.5px}.pl-node{width:84px;padding:7px 4px;gap:4px;font-size:10.5px}.pl-node svg{width:18px;height:18px}.pl-ringhint{display:none}}
/* keep the ring at its size against the shared hero rules (30-10) */
.hero.ms-hero--split .ms-hero-obj.ms-lay-ring{height:500px!important;min-height:0!important}
.hero.ms-hero--split .ms-hero-obj.ms-lay-ring .vc.pl-ringw{position:absolute!important;left:0!important;top:0!important;right:auto!important;bottom:auto!important;width:100%!important;height:100%!important;opacity:1!important;transform:none!important}
@media (max-width:980px){.hero.ms-hero--split .ms-hero-obj.ms-lay-ring{height:440px!important}}
@media (max-width:720px){.hero.ms-hero--split .ms-hero-obj.ms-lay-ring{height:380px!important}}
/* the ring is one card filling its frame; beats the shared frame rule (kortsystem.css .ms-cg > .vc:not(#_)) (30-10) */
#pl-ring-obj.ms-cg{display:block!important;padding:0!important;background:none!important;box-shadow:none!important}
#pl-ring-obj>.vc[data-ms-card]:not(#_){position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;opacity:1!important;transform:none!important}
.pl-node svg{width:20px!important;height:20px!important;padding:6px;box-sizing:content-box}
/* the module grid shows the real cards from each subpage (30-10) */
.pl-tile{overflow:hidden}
.pl-tcard{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden;padding:12px;background:radial-gradient(80% 90% at 50% 40%,rgba(92,192,138,.18),rgba(227,242,232,.5) 60%,#F4FAF6)}
.pl-tcard .vc{position:relative!important;left:auto!important;top:auto!important;width:260px!important;max-width:100%;margin:0!important;transform:scale(.86);transform-origin:center}
.pl-tile{aspect-ratio:16/10;height:auto;position:relative;border:0;background:none;margin:0}
.pl-tile .pl-tcard{height:100%}
.pl-tcard{place-items:start center!important;padding-top:18px!important}
/* each card keeps the width it was drawn for and is scaled down to the tile (30-10): squeezing it to one width broke
   the tables and the week grid */
.pl-tcard .vc{width:var(--pl-w,320px)!important;max-width:none!important;transform:scale(var(--pl-s,.9));transform-origin:top center}
.pl-tcard .vc[data-ms-card=recruitment_match]{--pl-w:420px}.pl-tcard .vc[data-ms-card=forside_learnteam]{--pl-w:340px}
.pl-tcard .vc[data-ms-card=feedback_disc]{--pl-w:360px}.pl-tcard .vc[data-ms-card=workforce_today]{--pl-w:480px}
.pl-tcard .vc[data-ms-card=shifts_week]{--pl-w:680px}.pl-tcard .vc[data-ms-card=assets_list]{--pl-w:320px}
.pl-tcard .vc[data-ms-card=forside_refunds]{--pl-w:340px}.pl-tcard .vc[data-ms-card=paytbl]{--pl-w:360px}
.pl-tcard .vc[data-ms-card=simulation_overview]{--pl-w:400px}
/* the module grid loads the subpages' card stylesheets; workforce's own headline size must not reach this hero (30-10) */
body.p-platform .hero.ms-hero--split .ms-hero-copy h1{font-size:clamp(40px,4.5vw,66px)}
@media (max-width:720px){body.p-platform .hero.ms-hero--split .ms-hero-copy h1{font-size:clamp(32px,9vw,44px)}}
/* a card wider than its tile starts at the tile's left edge, so it is centred by position, then scaled from its top centre */
.pl-tile .pl-tcard .vc{position:absolute!important;left:50%!important;top:18px!important;transform:translateX(-50%) scale(var(--pl-s,.9))}