/* Preview only: the card system for the module pages — ONE place that decides how every card is framed, spaced and
   lined up, and which colours a visualisation may use. Page files (kort-<page>.css) draw what is inside a card; they do
   not restyle the frame, the padding, the rows' lines or the buttons. Loaded after moduler.css, before the page's css.

   The rules a card can rely on (its interface):
   · frame   every card sits in a glass frame (7px, white gradient, blur) around a white inner card, radius 24/18
   · inside  the inner card has 16px padding on every side; nothing may cross that edge (review/side.cjs checks)
   · head    .v-h: 28px icon tile, title, tag pushed right; 12px under it
   · rows    lists separate their rows with one 1px line (--ks-line); no line above the first row
   · actions .v-acts: buttons share the row, shrink with an ellipsis, wrap to a full-width line if they must
   · colour  green stays the accent. Visualisations may use blue and violet (and amber as a fill); red only for a real
             risk, with a word. Semantics: ferie = blue, barsel/orlov = violet, fravær/åben = amber, syg = red word. */
:root{
  --ks-line:#EFEDE8;--ks-mute:#6B7470;--ks-soft:#F5F7F4;
  --ks-green:#00A550;--ks-green-2:#5CC08A;--ks-green-bg:#E3F1E9;--ks-green-ink:#00693E;
  --ks-blue:#3E9C6A;--ks-blue-2:#A9D8BE;--ks-blue-bg:#E3F2E9;--ks-blue-ink:#0B5A36;
  --ks-violet:#D9962E;--ks-violet-2:#F2C98B;--ks-violet-bg:#FCEFDD;--ks-violet-ink:#8F5300;
  --ks-amber:#E2A646;--ks-amber-bg:#FCEFDD;--ks-amber-ink:#8F5300;
  --ks-red-bg:#FDECEC;--ks-red-ink:#B3302B
}

/* ── frame: glass around every card, wherever it stands (hero, panel, tour stop) ── */
/* Mark 23-10: more glass — the frame is clear and the card itself is frosted, so the panel shows through both */
.ms-panel .vc,.ms-stop .vc,.ms-hero-obj .vc,.ms-hero-row .vc,.vc.ms-ceramic{
  padding:7px;border:1px solid rgba(255,255,255,.7);border-radius:26px;
  background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.22));
  box-shadow:0 0 0 1px rgba(8,50,30,.05),0 26px 50px -28px rgba(8,50,30,.38);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
.ms-panel .vc .in,.ms-stop .vc .in,.ms-hero-obj .vc .in,.ms-hero-row .vc .in,.vc.ms-ceramic .in{
  border-radius:19px;background:rgba(255,255,255,.78);padding:18px;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(26,34,51,.04);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ms-panel .vc.w-pill,.ms-stop .vc.w-pill,.ms-hero-obj .vc.w-pill,.ms-hero-row .vc.w-pill{border-radius:999px}
.ms-panel .vc.w-pill .in,.ms-stop .vc.w-pill .in,.ms-hero-obj .vc.w-pill .in,.ms-hero-row .vc.w-pill .in{border-radius:999px;padding:9px}
.ms-tint-deep .vc{background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.08));border-color:rgba(255,255,255,.35);box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}

/* ── inside: everything stays within the inner card's padding box ── */
.vc .in{box-sizing:border-box}
.vc .in>*{max-width:100%;box-sizing:border-box}
.vc .in img{flex:none}
.vc .in :where(b,strong,small,span,em){overflow-wrap:break-word}
.vc .v-h{display:flex;align-items:center;gap:10px;min-width:0;margin-bottom:12px}
.vc .v-h>b{flex:1 1 auto;min-width:0;white-space:normal;line-height:1.2;overflow-wrap:normal}   /* a title wraps to two lines rather than lose its end */
.vc .v-h>em{flex:none;max-width:48%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── actions: never wider than the card ── */
.vc .v-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.vc .v-acts .v-b{flex:1 1 auto;min-width:0;max-width:100%;padding:0 14px;overflow:hidden;text-overflow:ellipsis}
.vc .v-acts .v-b .hi{flex:none}

/* ── colour for visualisations (use these classes or the tokens; never a new hue) ── */
.v-chip.b,.ks-chip.b{background:#E3F2E9;color:#00693E}
.v-chip.v,.ks-chip.v{background:var(--ks-violet-bg);color:var(--ks-violet-ink)}
.ks-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;background:var(--ks-soft);color:#4F596B;font:600 11.5px/1.3 var(--sans);font-style:normal;white-space:nowrap}
.ks-chip.g{background:var(--ks-green-bg);color:var(--ks-green-ink)}.ks-chip.a{background:var(--ks-amber-bg);color:var(--ks-amber-ink)}.ks-chip.r{background:var(--ks-red-bg);color:var(--ks-red-ink)}
.ks-bar-b{background:linear-gradient(90deg,var(--ks-blue-2),var(--ks-blue))!important}
.ks-bar-v{background:linear-gradient(90deg,var(--ks-violet-2),var(--ks-violet))!important}
.ks-bar-g{background:linear-gradient(90deg,var(--ks-green-2),var(--ks-green))!important}
.ks-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ks-green)}.ks-dot.b{background:var(--ks-blue)}.ks-dot.v{background:var(--ks-violet)}.ks-dot.a{background:var(--ks-amber)}

/* ── phones: cards in a panel take the panel's width; the centred hero's headline steps down a size ── */
@media (max-width:720px){.ms-panel-in{justify-content:stretch;justify-items:stretch}.ms-panel .vc{width:100%!important}}
.hero.ms-hero--center h1{font-size:clamp(28px,5vw,76px)}
/* headlines: long Danish words must fit; the split hero's h1 steps down and may run the column's full width */
.hero.ms-hero--split .ms-hero-copy h1{max-width:none;font-size:clamp(40px,4.5vw,66px)}
@media (max-width:1040px){.hero.ms-hero--split .wrap.ms-hero-wrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){.hero.ms-hero--split .ms-hero-copy h1{font-size:clamp(32px,9vw,44px)}}
/* rows: the text column gives way (ellipsis), the number and the chip keep their size */
.vc .in li>span,.vc .in li>div{min-width:0}
.vc .in li>span{overflow:hidden;text-overflow:ellipsis}
.vc .in li>b,.vc .in li>em,.vc .in li>i{flex:none}
.vc .in li,.vc .in ul,.vc .in ol{min-width:0}   /* a list that is a grid may not grow to its rows' unwrapped width */
.vc .v-b{padding:0 14px}

/* ── the thread between a panel's cards (moduler.js draws it): the journey from step to step ── */
.ms-panel-in,.annot.ms-stop{position:relative}
.ms-panel-in>.vc,.ms-stop>.vc{position:relative;z-index:1}
.ms-thread{position:absolute;left:0;top:0;z-index:2;overflow:visible;pointer-events:none}
.ms-th-ln{fill:none;stroke:var(--ks-green);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:.1 2.6}
.ms-th-nd circle{fill:#fff;stroke:var(--ks-green);stroke-width:2}.ms-th-nd circle{r:11px}
.ms-th-nd text{fill:var(--ks-green-ink);font:700 10px/1 var(--sans);text-anchor:middle}
.ms-th-lab{display:block;width:max-content;max-width:140px;margin:0 auto;padding:4px 10px;border-radius:99px;background:#fff;color:var(--ks-green-ink);font:600 11px/1.3 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 0 0 1px var(--ks-green-bg),0 6px 14px -8px rgba(8,50,30,.35)}
.ms-tint-deep .ms-th-ln{stroke:#7FE0A9}.ms-tint-deep .ms-th-nd circle{fill:#0B5A36;stroke:#7FE0A9}.ms-tint-deep .ms-th-nd text{fill:#fff}
/* the thread draws itself once when the panel lands; the nodes follow */
.ms-threaded.in .ms-th-ln{stroke-dashoffset:0;animation:ksThread 1s .35s var(--ms-out) both}
@keyframes ksThread{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
.ms-threaded.in .ms-th-nd,.ms-threaded.in .ms-th-lab{animation:ksNode .3s calc(.5s + var(--k,0) * .25s) var(--ms-out) both}
@keyframes ksNode{from{opacity:0}to{opacity:1}}
/* two cards side by side get room for the thread and its label */
.ms-threaded .ms-panel-in,.ms-stop.ms-threaded{column-gap:72px}
[data-ms-steps].ms-threaded .ms-panel-in,.ms-stop.ms-threaded[data-ms-steps]{column-gap:112px}   /* a labelled leg needs room for its pill between the nodes */
@media (max-width:1040px){.ms-threaded .ms-panel-in,.ms-stop.ms-threaded{row-gap:44px}}
@media (prefers-reduced-motion:reduce){.ms-threaded.in .ms-th-ln,.ms-threaded.in .ms-th-nd,.ms-threaded.in .ms-th-lab{animation:none}}

/* ── phones ── */
@media (max-width:720px){
  /* a tour stop shows its first two cards (the thread joins them), a panel too */
  .ms-stop>.vc:nth-child(2){display:block}.ms-stop>.vc:nth-child(n+3){display:none}
  .ms-panel-in{row-gap:44px!important}.annot.ms-stop{row-gap:44px}
}

/* front page tour on phones: the readable card version of each stop replaces the composition drawn in container units */
.annot.ms-stop-m{display:none}
@media (max-width:720px){.tstop>.annot:not(.ms-stop){display:none}.annot.ms-stop-m{display:grid}}
.ms-threaded .ms-panel-in{row-gap:72px}   /* stacked cards in a panel leave room for the thread between them */
.vc .kv-kb>div,.vc .kv-kb .kc{min-width:0}   /* the mini kanban's columns share the card instead of growing to a name's width */

/* Mark 23-10: cards a size up, so they can carry the detail — base 300px, wide 360px (xl stays up to 640px) */
.ms-panel .vc,.ms-stop .vc,.ms-hero-obj .vc,.ms-hero-row .vc{width:300px}
.ms-panel .vc.w-wide,.ms-stop .vc.w-wide,.ms-hero-obj .vc.w-wide,.ms-hero-row .vc.w-wide{width:360px}
.ms-panel .vc.w-pill,.ms-stop .vc.w-pill,.ms-hero-obj .vc.w-pill{width:270px}
.ms-panel .vc.w-xl,.ms-stop .vc.w-xl,.ms-hero-obj .vc.w-xl{width:min(640px,100%)}
/* the quiet thread: only the line and a small dot at each card, no numbers, no labels */
.ms-th-nd circle{r:3.5px;fill:var(--ks-green);stroke:none}.ms-th-nd text,.ms-th-lab{display:none}
.ms-th-ln{stroke-width:1.8;stroke-dasharray:.1 3.4;opacity:.9}
.ms-threaded .ms-panel-in,.ms-stop.ms-threaded,[data-ms-steps].ms-threaded .ms-panel-in,.ms-stop.ms-threaded[data-ms-steps]{column-gap:56px}
/* a pair that leans on each other (Mark 23-10): the second card sits a little lower and overlaps the first by 36px */
.ms-stop.ms-lay-lean{flex-wrap:nowrap;align-items:flex-start;column-gap:0}
.ms-stop.ms-lay-lean>.vc{flex:none}.ms-stop.ms-lay-lean>.vc:nth-child(2){margin:72px 0 0 -18px;z-index:2}
@media (max-width:1040px){.ms-stop.ms-lay-lean{flex-wrap:wrap}.ms-stop.ms-lay-lean>.vc:nth-child(2){margin:0}}
/* a big pair that does not fit side by side: the second card sits under the first, shifted right and overlapping its foot */
.ms-stop.ms-lay-lean.ms-lean-down{flex-direction:column;align-items:flex-start}.ms-stop.ms-lay-lean.ms-lean-down>.vc:nth-child(2){margin:-28px 0 0 min(240px,20%)}
/* steps (Mark 23-10): three cards in the order they happen, each a little lower and to the right of the one before,
   overlapping its edge — the last card never sits under the first */
.ms-stop.ms-lay-steps{flex-wrap:nowrap;align-items:flex-start;column-gap:0;--st:84px}
.ms-stop.ms-lay-steps>.vc{flex:none;margin:0}.ms-stop.ms-lay-steps>.vc:nth-child(2){margin:var(--st) 0 0 -24px;z-index:2}.ms-stop.ms-lay-steps>.vc:nth-child(3){margin:calc(var(--st) * 2) 0 0 -24px;z-index:3}
/* top2: one wide card on top, two under it overlapping its foot (left one first) */
.ms-stop.ms-lay-top2{display:grid;grid-template-columns:auto auto;justify-content:center;align-content:center;column-gap:16px}
.ms-stop.ms-lay-top2>.vc{margin:0}.ms-stop.ms-lay-top2>.vc:nth-child(1){grid-column:1 / -1;justify-self:center}
.ms-stop.ms-lay-top2>.vc:nth-child(2){margin-top:-28px;justify-self:end;align-self:start;z-index:2}.ms-stop.ms-lay-top2>.vc:nth-child(3){margin-top:-28px;justify-self:start;align-self:start;z-index:2}
@media (max-width:1040px){.ms-stop.ms-lay-steps,.ms-stop.ms-lay-top2{display:flex;flex-direction:column;align-items:center;flex-wrap:nowrap}.ms-stop.ms-lay-steps>.vc:nth-child(n),.ms-stop.ms-lay-top2>.vc:nth-child(n){margin:0}}
@media (max-width:1040px){.ms-stop.ms-lay-lean.ms-lean-down>.vc:nth-child(2){margin:0}}
/* the same leaning pairs on a tinted panel (module pages) */
.ms-panel.ms-lay-lean .ms-panel-in{flex-wrap:nowrap;gap:0}.ms-panel.ms-lay-lean .ms-panel-in>.vc{flex:none}
.ms-panel.ms-lay-lean .ms-panel-in>.vc:nth-child(2){margin:56px 0 0 -18px;z-index:2}
.ms-panel.ms-lay-lean.ms-lean-down .ms-panel-in{flex-direction:column;align-items:center}
.ms-panel.ms-lay-lean.ms-lean-down .ms-panel-in>.vc{max-width:100%}.ms-panel.ms-lay-lean.ms-lean-down .ms-panel-in>.vc:nth-child(2){margin:-24px 0 0 min(120px,16%)}
@media (max-width:1040px){.ms-panel.ms-lay-lean .ms-panel-in{flex-wrap:wrap;gap:20px}.ms-panel.ms-lay-lean .ms-panel-in>.vc:nth-child(2),.ms-panel.ms-lay-lean.ms-lean-down .ms-panel-in>.vc:nth-child(2){margin:0}}
/* zig4 (Mark 23-10, simulation): four cards going down left, right, left, right — each lower than the one before and
   overlapping it a little — flying in as they scroll into view (data-ms-fly) */
.ms-panel.ms-lay-zig4 .ms-panel-in{display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;max-width:1160px;margin-inline:auto;padding-block:8px}
.ms-panel.ms-lay-zig4 .ms-panel-in>.vc{flex:none;max-width:100%}
.ms-panel.ms-lay-zig4 .ms-panel-in>.vc:nth-child(odd){align-self:flex-start}.ms-panel.ms-lay-zig4 .ms-panel-in>.vc:nth-child(even){align-self:flex-end}
.ms-panel.ms-lay-zig4 .ms-panel-in>.vc+.vc{margin-top:-150px}
.ms-panel.ms-lay-zig4 .ms-panel-in>.vc:nth-child(2){z-index:2}.ms-panel.ms-lay-zig4 .ms-panel-in>.vc:nth-child(3){z-index:3}.ms-panel.ms-lay-zig4 .ms-panel-in>.vc:nth-child(4){z-index:4}
@media (max-width:1040px){.ms-panel.ms-lay-zig4 .ms-panel-in>.vc:nth-child(n){align-self:center;margin-top:20px}.ms-panel.ms-lay-zig4 .ms-panel-in>.vc:first-child{margin-top:0}}
.ms-panel .vc.ms-fly{opacity:0;transform:translate(-56px,36px);transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1)}
.ms-panel .vc.ms-fly.r{transform:translate(56px,36px)}
.ms-panel .vc.ms-fly.ms-flown,.ms-panel.in .vc.ms-fly.ms-flown{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ms-panel .vc.ms-fly{opacity:1;transform:none;transition:none}}
/* ── the tours inside a slice of Komma (Mark 23-10): sidebar, top bar, sand body; the cards fly in per stop ── */
.ms-app{display:grid;grid-template-columns:60px minmax(0,1fr);border-radius:24px;overflow:hidden;background:#F6F5F1;box-shadow:0 0 0 6px rgba(255,255,255,.75),0 0 0 7px rgba(8,50,30,.06),0 40px 80px -48px rgba(8,50,30,.5)}
.ms-app-side{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 0 12px;background:#0B5A36;color:rgba(255,255,255,.82)}
.ms-app-lg{display:grid;place-items:center;height:34px;margin-bottom:6px}.ms-app-lg svg{width:20px;height:22px;fill:#fff}.ms-app-k{font:600 18px/1 var(--serif);color:#fff}
.ms-app-grp{display:grid;gap:3px;padding:6px 0;border-top:1px solid rgba(255,255,255,.12)}.ms-app-grp:last-child{margin-top:auto}
.ms-app-side i{display:grid;place-items:center;width:36px;height:32px;border-radius:9px;font-size:17px;font-style:normal}.ms-app-side i .hi{font-size:17px}
.ms-app-side i.on{background:#fff;color:#0B5A36}
.ms-app-main{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0}
.ms-app-top{display:flex;align-items:center;gap:12px;height:52px;padding:0 20px;background:#fff;border-bottom:1px solid #ECEAE4}
.ms-app-t{font:500 18px/1 var(--serif);color:#1A2233;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ms-app-top .v-av,.ms-app-top img{margin-left:auto;width:28px;height:28px;border-radius:50%;object-fit:cover}
.ms-app-body{position:relative;padding:20px;min-width:0}
.ms-app .tstage{max-width:none!important}
.ms-app .annot.ms-stop{background:none;box-shadow:none;border-radius:0}
.ms-app .annot.ms-stop::before,.ms-app .annot.ms-stop::after{display:none}
/* the cards fly in when their stop comes up: left ones from the left, right ones from the right, one after another */
.ms-app .tstop .annot.ms-stop>.vc{opacity:0;transform:translate(-44px,26px);transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1)}
.ms-app .tstop .annot.ms-stop>.vc:nth-child(even){transform:translate(44px,26px)}
.ms-app .tstop.ms-on .annot.ms-stop>.vc{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 110ms + 120ms)}
@media (prefers-reduced-motion:reduce){.ms-app .tstop .annot.ms-stop>.vc{opacity:1;transform:none;transition:none}}
@media (max-width:720px){.ms-app{grid-template-columns:44px minmax(0,1fr);border-radius:18px}.ms-app-side i{width:30px;height:28px}.ms-app-grp:nth-child(n+3):not(:last-child) i:nth-child(n+6){display:none}.ms-app-body{padding:12px}.ms-app-top{height:46px;padding:0 14px}.ms-app-t{font-size:16px}}
.ms-app .annot.ms-stop{padding:12px}
/* phones: the window keeps only its sand body — no sidebar or top bar to take room from the cards */
@media (max-width:720px){.ms-app{display:block;border-radius:20px;box-shadow:0 0 0 4px rgba(255,255,255,.75),0 0 0 5px rgba(8,50,30,.06)}.ms-app-side,.ms-app-top{display:none}.ms-app-body{padding:14px 12px}}
/* inside the window the cards line up like widgets in the app (Mark 23-10): a grid filling the body, top-aligned,
   20px apart, no overlap; moduler.js sets each column's share from the cards' own widths */
.ms-app:not(.ms-measure) .annot.ms-stop.ms-grid{display:grid!important;grid-template-columns:var(--cols,1fr);gap:20px;align-items:start!important;align-content:start!important;justify-content:stretch!important;padding:0;min-height:0}
.ms-app:not(.ms-measure) .annot.ms-stop.ms-grid.n1{justify-content:start!important}
.ms-app:not(.ms-measure) .annot.ms-stop.ms-grid>.vc{width:auto!important;max-width:none;margin:0!important;flex:none;justify-self:stretch!important;align-self:start!important}
.ms-app:not(.ms-measure) .annot.ms-stop.ms-grid:not(.ms-top)>.vc:first-child{grid-column:1;grid-row:1 / span 2}
.ms-app:not(.ms-measure) .annot.ms-stop.ms-grid:not(.ms-top)>.vc:nth-child(n+2){grid-column:2}
.ms-app:not(.ms-measure) .annot.ms-stop.ms-grid.ms-top>.vc:first-child{grid-column:1 / -1}
@media (max-width:720px){.ms-app:not(.ms-measure) .annot.ms-stop.ms-grid{grid-template-columns:minmax(0,1fr)}.ms-app:not(.ms-measure) .annot.ms-stop.ms-grid>.vc:nth-child(n){grid-column:1!important;grid-row:auto!important}}
@media (max-width:720px){.ms-app [data-ms-card="workforce_cal"] .wf-hd{flex-wrap:wrap;row-gap:6px}.ms-app [data-ms-card="workforce_cal"] .wf-tag{white-space:normal}}
/* ═══ structure (Mark 23-10): one strict grid for every card group, framed in sand ═══ */
.ms-cg{display:grid!important;gap:var(--card-gap,24px);align-items:start;align-content:start;justify-content:center;flex-wrap:nowrap}
.ms-cg>.vc[data-ms-card]{position:relative!important;inset:auto!important;margin:0!important;width:auto!important;max-width:none!important;justify-self:stretch;align-self:start;rotate:none}
.ms-panel .ms-thread{display:none}
.ms-hero-obj.ms-framed,.ms-hero-row.ms-framed{position:relative;height:auto!important;min-height:0!important;padding:var(--panel-pad,32px);border-radius:var(--panel-radius,28px);background:var(--panel-bg,#F6F3EE)}
.ms-hero-row.ms-framed{width:100%!important;max-width:none}
.ms-framed>.vc[data-ms-card]{transform:none!important}
@media (max-width:720px){.ms-cg{grid-template-columns:minmax(0,1fr)!important}.ms-cg>.vc[data-ms-card]{grid-column:1!important;grid-row:auto!important}}
/* the grid wins over any page's own offset rules (:not(#_) lifts it above their ids-free selectors) */
.ms-cg>.vc[data-ms-card]:not(#_){margin:0!important;width:auto!important;max-width:none!important;position:relative!important;inset:auto!important}
/* any panel still carrying an old tint is sand too */
.ms-panel.ms-tint-mint,.ms-panel.ms-tint-pale,.ms-panel.ms-tint-deep{background:var(--panel-bg,#F6F3EE);color:inherit}
/* free compositions (.fl) gridded: their pieces stand in the grid; pills keep their own width; framed in sand when
   they are not already inside a panel */
.fl.ms-flg.ms-cg{aspect-ratio:auto!important;height:auto!important;min-height:0!important}
.fl.ms-flg.ms-cg>*:not(#_){position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;width:auto!important;transform:none!important;margin:0!important;rotate:none!important;translate:none!important}
.fl.ms-flg.ms-cg>.f-pill:not(#_),.fl.ms-flg.ms-cg>.pill:not(#_),.fl.ms-flg.ms-cg>.p-segw:not(#_){justify-self:start;width:max-content!important;max-width:100%}
.fl.ms-flg.ms-framed{padding:var(--panel-pad,32px);border-radius:var(--panel-radius,28px);background:var(--panel-bg,#F6F3EE)}
.fl.ms-flg.ms-framed::before,.fl.ms-flg.ms-framed::after{display:none}
@media (max-width:720px){.fl.ms-flg.ms-cg>*:not(#_){grid-column:1!important;grid-row:auto!important}}
/* card buttons on one size (36px) everywhere */
.vc .v-b:not(#_){height:var(--btn-h-card,36px);min-height:var(--btn-h-card,36px)}
@media (max-width:720px){[data-ms-card="workforce_cal"] .wf-hd{flex-wrap:wrap;row-gap:6px}[data-ms-card="workforce_cal"] .wf-tag{white-space:normal}}
/* Mark 23-10: the cards in one row of a grid are as high as each other — a card stretches to its row and its white
   face fills the frame; when a card's own parts are all blocks, its buttons sit at the foot so they line up too */
.ms-cg>.vc[data-ms-card]:not(.w-pill):not(#_),.ms-app:not(.ms-measure) .annot.ms-stop.ms-grid>.vc:not(.w-pill){align-self:stretch!important;display:flex;flex-direction:column}
.ms-cg>.vc[data-ms-card]:not(.w-pill)>.in,.ms-app:not(.ms-measure) .annot.ms-stop.ms-grid>.vc:not(.w-pill)>.in{flex:1 1 auto}
:is(.ms-cg>.vc[data-ms-card],.ms-app .annot.ms-stop.ms-grid>.vc,.kv-stop>.vc)>.in:has(>.v-acts:last-child):not(:has(>:is(span,em,b,i,a,small,strong,img,label,mark))){display:flex;flex-direction:column}
:is(.ms-cg>.vc[data-ms-card],.ms-app .annot.ms-stop.ms-grid>.vc,.kv-stop>.vc)>.in:has(>.v-acts:last-child):not(:has(>:is(span,em,b,i,a,small,strong,img,label,mark)))>.v-acts:last-child{margin-top:auto;padding-top:14px}
.ms-app:not(.ms-measure) .annot.ms-stop.ms-grid.n2:not(.ms-top)>.vc:first-child{grid-row:1}   /* two cards: one row, so they stand equally high */

/* optical centring (30-10): the chip text sat 1.3 px high */
.ks-chip{padding-top:3.6px!important;padding-bottom:2.4px!important}

/* ── Mark 30-10: EVERY card has the glass frame, also where a page drew its card flat. The phone mockups are the one
   exception (the phone is the card; a frame around it reads as a white slab behind the phone). Ids in :not() only lift
   the weight above the pages' own !important rules. ── */
html body .vc[data-ms-card]:not(.ka-pv):not([data-ms-card^="mobile_"]):not(.ms-tint-deep .vc):not(#_a):not(#_b):not(#_c){
  padding:7px!important;border:1px solid rgba(255,255,255,.7)!important;
  background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.22))!important;
  box-shadow:0 0 0 1px rgba(8,50,30,.05),0 26px 50px -28px rgba(8,50,30,.38)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.5)!important;backdrop-filter:blur(18px) saturate(1.5)!important}
html body .vc[data-ms-card]:not(.w-pill):not(.ka-pv):not([data-ms-card^="mobile_"]):not(.ms-tint-deep .vc):not(#_a):not(#_b):not(#_c){border-radius:26px!important}
html body .vc[data-ms-card]:not(.w-pill):not(.ka-pv):not([data-ms-card^="mobile_"]):not(.ms-tint-deep .vc):not(#_a):not(#_b):not(#_c)>.in{border-radius:19px!important;background:rgba(255,255,255,.86)!important}
.pl-ringw>.in{height:100%;box-sizing:border-box;padding:0!important}