/* "Det er med" on every module page (Mark 23-10): instead of green icon boxes, each thing the module holds is a tile
   with a small picture of the thing itself — the bento from recruitment (fri-kort.css, copied, not shared, so
   recruitment stays untouched), plus a few primitives the other modules need. Built by to_bento() in forslag9.py. */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.bt{display:grid;grid-template-rows:auto 1fr;gap:16px;padding:12px 12px 22px;border-radius:26px;background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.6));box-shadow:0 0 0 1px rgba(8,50,30,.07),0 24px 48px -32px rgba(8,50,30,.45)}
.bt-v{height:168px;border-radius:18px;background:radial-gradient(80% 90% at 50% 40%,rgba(92,192,138,.22),rgba(227,242,232,.5) 60%,#F4FAF6);display:grid;place-items:center;overflow:hidden;padding:16px;color:#1A2233;font-size:13.5px}
.bt{--u:10px}.bt>div:last-child{padding:0 10px;display:grid;gap:6px;align-content:start}.bt>div:last-child>b{font:650 19px/1.25 var(--sans);color:var(--head)}.bt span.t{color:var(--mute);font-size:15px;line-height:1.5}
.bt-card{background:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 0 0 1px rgba(26,34,51,.05),0 12px 24px -16px rgba(8,50,30,.45);width:100%;max-width:240px}
.bt-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0}.bt-row+.bt-row{border-top:1px solid #F0EEE9}
.bt-row .f-tag{--u:10px}
.bt .fa{width:30px;height:30px;box-shadow:0 0 0 2px #fff}
.bt-ring{--p:91;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#00A550 calc(var(--p)*1%),#E3EBE5 0);position:relative}
.bt-ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff}.bt-ring b{position:relative;font:500 26px/1 var(--serif)!important;color:#00693E!important}
.bt-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:230px}
.bt-chips span{padding:6px 11px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px #E6E3DD;font-weight:550;font-size:13px}.bt-chips span.on{background:#0B4F33;color:#fff;box-shadow:none}
.bt-stack{display:flex}.bt-stack .fa{width:42px;height:42px;box-shadow:0 0 0 3px #fff}.bt-stack .fa+.fa{margin-left:-12px}
.bt-col{display:grid;gap:12px;justify-items:center}
.bt-push{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;background:#fff;box-shadow:0 12px 24px -14px rgba(8,50,30,.5);max-width:250px}
.bt-push .hi{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#0B5A36;color:#fff;font-size:18px;flex:none}.bt-push div{display:grid}.bt-push small{color:#5B6660}
.bt-mini{width:100%;max-width:240px;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 12px 24px -16px rgba(8,50,30,.45)}
.bt-mini .ban{height:56px;background:linear-gradient(120deg,#0B5A36,#1C8A55);display:flex;align-items:center;padding:0 14px;color:#fff;font:500 16px/1 var(--serif)}
.bt-mini .ln{display:flex;justify-content:space-between;margin:8px 12px;padding:6px 8px;border-radius:8px;box-shadow:0 0 0 1px #ECEAE5;font-size:12px}
.bt .hi svg{width:1em;height:1em}.bt .hi{display:inline-grid;place-items:center}
@media (max-width:1040px){ .bento{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .bento{grid-template-columns:1fr} }
/* how many tiles: six read as 3 × 2, four as 4 or 2 × 2, three in one row, two side by side */
.bento.n6,.bento.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.bento.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
a.bt{color:inherit;text-decoration:none;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}a.bt:hover{transform:translateY(-3px)}a.bt:focus-visible{outline:2px solid #00A550;outline-offset:3px}
a.bt>div:last-child>b::after{content:" →";color:#00A550}
/* tags and dots (the fri-kort f-tag / f-wt, in the bento's own names) */
.bt-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;background:#EFEFEB;color:#4F596B;font-size:11px;font-weight:600;font-style:normal;white-space:nowrap}
.bt-tag.g{background:#E3F1E9;color:#00693E}.bt-tag.a{background:#FCEFDD;color:#8F5300}.bt-tag.r{background:#FDECEC;color:#B3302B}.bt-tag.b{background:var(--ks-blue-bg,#E8EFFC);color:var(--ks-blue-ink,#22468F)}.bt-tag.v{background:var(--ks-violet-bg,#EEEAFB);color:var(--ks-violet-ink,#4B3A99)}.bt-tag.d{background:#0B4F33;color:#fff}
.bt-dots{display:flex;gap:3px}.bt-dots i{width:6px;height:6px;border-radius:50%;background:#E2E6E1}.bt-dots i.on{background:#00693E}
.bt-card .bt-h{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-weight:650;font-size:13px}.bt-card .bt-h .fa{width:26px;height:26px}.bt-card .bt-h small{display:block;font-weight:400;font-size:11px;color:#6B7470}
.bt-row{font-size:12.5px}.bt-row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bt-row>b{font-variant-numeric:tabular-nums;white-space:nowrap}.bt-row .hi{color:#00A550;font-size:15px}
/* a big number with its unit */
.bt-kpi{display:grid;justify-items:center;gap:4px;text-align:center}.bt-kpi b{font:500 38px/1 var(--serif);color:#00693E;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.bt-kpi b small{font:500 15px var(--sans);margin-left:4px;color:#3F6B53}.bt-kpi>span{font-size:12px;color:#4F5B54}
/* small bars with labels (a series over time, or teams side by side) */
.bt-bars{display:flex;align-items:flex-end;gap:10px;height:108px;padding:10px 14px 0;width:100%;max-width:240px;border-radius:14px;background:#fff;box-shadow:0 12px 24px -16px rgba(8,50,30,.45)}
.bt-bars span{flex:1;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;gap:3px;height:100%;font-size:10.5px;color:#6B7470}.bt-bars em{font-style:normal;font-weight:650;color:#1A2233;font-size:11px}
.bt-bars i{align-self:end;width:100%;border-radius:6px 6px 0 0;background:#BFE3CE}.bt-bars span.on i{background:#00A550}.bt-bars span:last-child{padding-bottom:6px}
/* three or four steps on one line */
.bt-steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%;max-width:250px;padding:14px 10px;border-radius:14px;background:#fff;box-shadow:0 12px 24px -16px rgba(8,50,30,.45)}
.bt-steps span{position:relative;display:grid;justify-items:center;gap:6px;font-size:10.5px;color:#6B7470;text-align:center}
.bt-steps span::before{content:"";position:absolute;top:10px;left:-50%;width:100%;height:2px;background:#E2E6E1;z-index:0}.bt-steps span:first-child::before{display:none}.bt-steps span.d::before,.bt-steps span.now::before{background:#00A550}
.bt-steps i{position:relative;z-index:1;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #E2E6E1;color:#fff;font-style:normal;font-size:12px}
.bt-steps span.d i{background:#00A550;box-shadow:none}.bt-steps span.now i{box-shadow:inset 0 0 0 2px #00A550,0 0 0 4px #E3F1E9}.bt-steps span.d,.bt-steps span.now{color:#1A2233;font-weight:600}
/* a week strip */
.bt-cal{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;width:100%;max-width:250px;padding:12px;border-radius:14px;background:#fff;box-shadow:0 12px 24px -16px rgba(8,50,30,.45)}
.bt-cal small{font-size:10px;color:#7A818C;text-align:center}.bt-cal i{display:grid;place-items:center;height:30px;border-radius:7px;background:#F3F4F1;font-style:normal;font-size:10px;font-weight:650;color:#4F5B54}
.bt-cal i.g{background:#E3F1E9;color:#0B4F33}.bt-cal i.b{background:var(--ks-blue-bg,#E8EFFC);color:var(--ks-blue-ink,#22468F)}.bt-cal i.r{background:#FDECEC;color:#B3302B}.bt-cal i.v{background:var(--ks-violet-bg,#EEEAFB);color:var(--ks-violet-ink,#4B3A99)}.bt-cal i.o{background:repeating-linear-gradient(135deg,#FDF6EA 0 4px,#FBEBD3 4px 8px);box-shadow:inset 0 0 0 1px #E2A646;color:#8F5300}
/* a band with a marker (pay band, a period on a timeline) */
.bt-band{width:100%;max-width:240px;padding:14px;border-radius:14px;background:#fff;box-shadow:0 12px 24px -16px rgba(8,50,30,.45);font-size:11.5px}
.bt-band>b{display:block;margin-bottom:12px;font-size:12.5px}.bt-band .bar{position:relative;height:10px;border-radius:99px;background:linear-gradient(90deg,#E3F1E9,#9ED8B5)}.bt-band .bar.v{background:linear-gradient(90deg,#EEEAFB,#B9AAEF)}
.bt-band .bar em{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#00693E;box-shadow:0 0 0 3px #fff;transform:translate(-50%,-50%)}.bt-band .bar.v em{background:var(--ks-violet,#7357D1)}
.bt-band .ax{display:flex;justify-content:space-between;margin-top:8px;color:#7A818C;font-size:10.5px}
/* a mini tree: one face over three */
.bt-tree{display:grid;justify-items:center;gap:0}.bt-tree .fa{width:38px;height:38px}.bt-tree>i{width:2px;height:14px;background:#00A550}
.bt-tree .kids{display:flex;gap:16px;padding-top:12px;border-top:2px solid #00A550;position:relative}.bt-tree .kids .fa{width:34px;height:34px}.bt-tree .kids .fa.on{box-shadow:0 0 0 3px #00A550}
@media (max-width:1040px){.bento.n6,.bento.n3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.bento.n6,.bento.n3,.bento.n2{grid-template-columns:1fr}}
/* the module pages' tiles carry a little more (a head and three rows): a taller picture box, round faces */
.bento[class*=" n"] .bt-v{height:206px}
.bt .fa{border-radius:50%;object-fit:cover;flex:none}
.bt-card .bt-h .hi{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#E3F1E9;color:#00693E;font-size:15px;flex:none}
/* a module thumbnail with a widget instead of a screen (platform's Asset Management) */
.mthumb.bt-thumb{aspect-ratio:16/10;border:0;background:none}.mthumb.bt-thumb .bt-v{height:100%;border-radius:10px}
.mthumb.bt-thumb .fa{border-radius:50%}
/* the team on Om os: a photo and the role, five in a row */
.bento.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.bt-face{width:104px;height:104px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px #fff,0 18px 32px -18px rgba(8,50,30,.5)}
@media (max-width:1040px){.bento.n5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.bento.n5{grid-template-columns:repeat(2,minmax(0,1fr))}.bt-face{width:84px;height:84px}}