/* ==========================================================================
   explainer.css: shared styles for the Finnish business-models pages
   (DATACENTER_RAYDAR_SPEC.md A5b, explainer mode: light editorial).

   Designed against all 11 source pages (Claude Design export, kept outside
   git in Output/business-models-source/). The colour and type tokens below
   are the complete set those pages use: 20 colours, 3 families. Components
   shared by several pages live here; a layout only one page has lives in
   that page's own <style> block.

   Components still to come, added here as each page is ported and verified:
     model cards x5  situation/decision/benchmark band, layer cake
                     (operates/owns), money-flow rows, contract table, risk
                     rows, term grid
     arvoketju       two chains; the source is an absolute-positioned canvas
                     and needs a normal-flow layout
     rahoitusmallit  asset rows with chips, example cards, flow rows, risk
                     grid, term grid
     erikoistuneet-mallit, miksi-suomi
                     card grids (3 and 2 columns), dark aside
     sanasto         4-column term grid, rendered from glossary-fi.js

   One breakpoint: 1023px. Above it, the authored desktop layout (fluid, max
   1680px). At or below it ("compact"), layouts collapse per page type. The
   dashboard's 768px breakpoint is too narrow for 1680px editorial layouts.
   ========================================================================== */

/* -- Fonts: self-hosted latin subsets, declared exactly as the Google Fonts
   CSS the source pages loaded (same files, weights and unicode-range), so
   glyph matching and fallback (e.g. arrows) render as in the approved
   design. SIL OFL 1.1, licences in fonts/. ------------------------------- */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/ibm-plex-mono-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;
  src:url(fonts/ibm-plex-sans-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;
  src:url(fonts/ibm-plex-sans-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;
  src:url(fonts/ibm-plex-sans-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/space-grotesk-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/space-grotesk-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/space-grotesk-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* -- Tokens: the complete palette of the 11 source pages ------------------ */
:root{
  --cream:#F3F1EB;        /* page */
  --navy:#12222E;         /* text, rules, dark panels */
  --white:#FFFFFF;
  --ink-2:#2C3B46;        /* body copy */
  --ink-3:#4A5A66;        /* secondary copy, labels */
  --rust:#9A4712;         /* accent: kickers, labels. Never a signal colour (A5b) */
  --rust-strong:#B4561A;  /* active stepper step, dashed demarcation line */
  --peach:#F0A46E;        /* accent on dark panels */
  --peach-bg:#FBEFE4;     /* "what AI Oy buys" callout */
  --peach-line:#E3BF9F;
  --blue:#1F4E6E;         /* role: counterparty (cloud or colocation company) */
  --blue-soft:#7FA3BC;    /* role: shared */
  --green:#3D6B57;        /* role: GPU cloud (model cards) */
  --sand:#D8C49A;         /* role: landlord / property investor */
  --stone:#CFC8B8;        /* role: suppliers, lenders */
  --line:#D6D2C8;         /* card borders */
  --line-soft:#EEEAE0;    /* row separators */
  --line-mid:#E4E0D6;     /* footer rules inside cards */
  --navy-line:#34485A;    /* separators on dark panels */
  --navy-text:#D3DCE2;    /* body copy on dark panels */
  --family-blue:#85B7EB;  /* RayDar wordmark only: the one family-dashboard colour here */

  --f-display:'Space Grotesk',sans-serif;
  --f-body:'IBM Plex Sans','Helvetica Neue',Helvetica,sans-serif;
  --f-mono:'IBM Plex Mono',monospace;

  --gutter:16px;          /* compact side gutter */
  --header-bar-h:40px;    /* chrome row 1: scrolls away */
  --header-steps-h:48px;  /* chrome row 2: stays (sticky stepper) */
}

/* -- Base ------------------------------------------------------------------ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--cream);font-family:var(--f-body);color:var(--navy)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
                 clip-path:inset(50%);white-space:nowrap;border:0}

/* -- Shared content components --------------------------------------------- */
.kicker{font-family:var(--f-mono);font-weight:600;letter-spacing:.14em;color:var(--rust)}
.mono-label{font-family:var(--f-mono);font-weight:600;letter-spacing:.06em}
.panel{background:var(--white);border:1px solid var(--line);box-sizing:border-box}
.panel--dark{background:var(--navy);border:none;color:var(--navy-text)}
.fine-print{color:var(--ink-3)}
/* A heading or label that links to its page: looks like the authored text
   until hovered or focused (hub model headings, panel titles, "Termit:"). */
.quiet-link{color:inherit;text-decoration:none}
.quiet-link:hover,.quiet-link:focus-visible{text-decoration:underline;text-decoration-color:var(--rust);
  text-decoration-thickness:2px;text-underline-offset:4px}
.quiet-link:focus-visible{outline:2px solid var(--rust);outline-offset:2px;border-radius:2px}
.panel--dark .quiet-link:hover,.panel--dark .quiet-link:focus-visible{text-decoration-color:var(--peach)}

/* Role fills: who owns or operates a layer. Colours identify roles, never
   signal states (A5b). Named by colour, not role, because the role a colour
   stands for differs per page (green is the cloud provider on one model
   card, the GPU cloud on the next): each page's own legend says which.
   White with a navy border is always AI Oy. Text colour is set for boxes
   that carry labels. */
.fill-own{background:var(--white);border:1.5px solid var(--navy);color:var(--navy)}
.fill-shared{background:var(--blue-soft);border:1px solid var(--blue);color:var(--navy)}
.fill-blue{background:var(--blue);color:var(--white)}
.fill-green{background:var(--green);color:var(--white)}
.fill-sand{background:var(--sand);color:var(--navy)}
.fill-stone{background:var(--stone);color:var(--navy)}
.fill-navy{background:var(--navy);color:var(--white)}
.swatch{display:inline-block;width:14px;height:11px;border-radius:2px;box-sizing:border-box;flex-shrink:0}
.swatch--key{width:18px;height:14px;margin-top:2px;border-radius:3px}
.swatch--sq{width:14px;height:14px;border-radius:3px}

/* -- Page frame and heading (all pages) ---------------------------------- */
.page{max-width:1680px;margin:0 auto;box-sizing:border-box;display:flex;flex-direction:column}
.page--hub{padding:26px 52px;gap:11px}
.page--card{padding:48px 56px;gap:22px}
.page--doc{padding:56px;gap:28px}
.page-head{display:flex;flex-direction:column;gap:8px;padding-bottom:20px;border-bottom:2px solid var(--navy)}
.page-head .kicker{font-size:13px}
.page-title{margin:0;font-family:var(--f-display);font-size:48px;font-weight:700;letter-spacing:-.02em;line-height:1.05}
.page-lede{font-size:19px;color:var(--ink-3)}
.page-head--doc{gap:10px;padding-bottom:24px}
.page-head--doc .page-lede{font-size:20px}
.section-label{font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--rust)}

/* -- Glossary page: rendered from glossary-fi.js ------------------------- */
.glossary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.glossary-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;
               scroll-margin-top:calc(var(--header-steps-h) + 16px)}
.glossary-card .term-name{font-size:16px}
.glossary-card p{margin:0;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.glossary-card:target{border-color:var(--rust-strong);box-shadow:0 0 0 1px var(--rust-strong)}

/* -- Model cards (the five *-cloud / *-colocation / own-data-center pages) */
.band{display:flex;background:var(--navy);color:var(--navy-text);border-radius:14px;overflow:hidden}
.band-col{flex:1 1 0;padding:20px 26px;display:flex;flex-direction:column;gap:6px}
.band-col + .band-col{border-left:1px solid var(--navy-line)}
.band-label{font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--peach)}
.band-text{margin:0;font-size:15px;line-height:1.5}
.band-text--strong{color:var(--white);font-weight:500}

.card-body{display:flex;gap:22px;align-items:stretch}
.card-main{flex:1.15 1 0;min-width:0;display:flex;flex-direction:column;gap:10px}

/* Layer cake: layers in column 1, who operates / who owns in columns 2-3.
   Column-major auto-placement (the source lists each column top to
   bottom); a role cell spanning several layers uses .span-N. Rows grow
   with their text, and spanning cells grow with them. */
.cake-head,.cake{display:grid;grid-template-columns:minmax(0,1fr) 176px 176px;column-gap:10px}
.cake-head{align-items:end}
.cake-head > :not(:first-child){text-align:center;color:var(--ink-3)}
.cake{grid-auto-flow:column;row-gap:10px}
.cake--rows-2{grid-template-rows:repeat(2,minmax(80px,auto))}
.cake--rows-3{grid-template-rows:repeat(3,minmax(80px,auto))}
.cake--rows-5{grid-template-rows:repeat(5,minmax(80px,auto))}
.span-2{grid-row:span 2}
.span-3{grid-row:span 3}
.span-5{grid-row:span 5}
.layer{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 16px;background:var(--white);
       border:1px solid var(--line);border-radius:8px;box-sizing:border-box}
.layer-name{font-family:var(--f-display);font-size:17px;font-weight:700}
.layer-desc{font-size:13.5px;line-height:1.35;color:var(--ink-2)}
.role{display:flex;align-items:center;justify-content:center;text-align:center;padding:6px 10px;border-radius:8px;
      box-sizing:border-box;font-size:14px;font-weight:600;line-height:1.3}
.demarc{display:flex;align-items:center;gap:10px;margin:2px 0}
.demarc-label{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--rust);white-space:nowrap}
.demarc-line{flex-grow:1;border-top:2px dashed var(--rust-strong)}
.footnote{font-size:12.5px;line-height:1.45;color:var(--ink-3)}

.key-list{display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1px solid var(--line)}
.key-row{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.4;color:var(--ink-2)}
.key-row b{color:var(--navy)}

/* Money flows (model cards; financing page uses the same rows) */
.flows{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:10px}
.flow{display:flex;gap:8px;align-items:center;font-size:13.5px;line-height:1.35}
.pill{padding:3px 8px;border-radius:5px;box-sizing:border-box;font-size:12px;font-weight:600;white-space:nowrap}
.flow-arrow{color:var(--rust);font-weight:700}
.flow-text{color:var(--ink-2)}

/* Contract panel */
.contract{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px;padding:20px 24px;border-radius:14px}
.contract-title{margin:0 0 4px;font-family:var(--f-display);font-size:22px;font-weight:700}
.callout{display:flex;flex-direction:column;gap:4px;margin:6px 0 4px;padding:12px 16px;background:var(--peach-bg);
         border:1px solid var(--peach-line);border-radius:8px}
.callout-label{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;color:var(--rust)}
.callout-text{font-size:15px;font-weight:600;line-height:1.45}
.crow{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.crow-label{width:136px;flex-shrink:0;font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.06em;
            color:var(--ink-3);padding-top:2px}
.crow-value{font-size:14px;line-height:1.45}
.section-label--spaced{margin-top:14px}
.risk-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.risk-item{display:flex;gap:10px;align-items:center;font-size:13.5px;line-height:1.35}
.risk-item-name{width:168px;flex-shrink:0;font-weight:600}
.risk-item-text{color:var(--ink-2)}

/* Term grid ("Kortin termit"; financing uses 4 columns) */
.terms{display:flex;flex-direction:column;gap:12px;padding:18px 24px;border-radius:14px}
.term-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 22px}
.term{display:flex;flex-direction:column;gap:3px}
.term-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.term-name{font-family:var(--f-display);font-size:15px;font-weight:700}
.term-alt{font-family:var(--f-mono);font-size:11px;color:var(--ink-3)}
.term-def{font-size:13px;line-height:1.4;color:var(--ink-2)}
/* Network ecosystem panel (retail card, ledger R64) */
.eco{display:flex;flex-direction:column;gap:8px;padding:18px 24px;border-radius:14px}
.eco-text{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2);max-width:980px}
.card-note{font-size:12.5px}

/* Horizontal scroller with an edge fade: the dashboard's #chain swipe-row
   pattern (render.py), generalised. Markup: .scroll-x > .scroll-x__inner.
   chrome.js toggles .is-end once scrolled to the end, or when nothing
   overflows, so the fade never shows on a row that doesn't scroll. */
.scroll-x{position:relative}
.scroll-x__inner{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.scroll-x::after{content:"";position:absolute;top:0;right:0;bottom:0;width:32px;pointer-events:none;
                 background:linear-gradient(90deg,rgba(243,241,235,0) 0%,var(--fade-to,var(--cream)) 100%);
                 opacity:1;transition:opacity .15s}
.scroll-x.is-end::after{opacity:0}

/* -- Chrome: slim two-row header (bar + growth-path stepper) --------------- */
.bm-header{position:sticky;top:calc(-1 * var(--header-bar-h));z-index:50;
           min-height:calc(var(--header-bar-h) + var(--header-steps-h));
           background:var(--navy);color:var(--navy-text);font-family:var(--f-body)}
.bm-bar,.bm-steps{max-width:1680px;margin:0 auto;padding:0 52px;box-sizing:border-box;
                  display:flex;align-items:center;gap:20px}
.bm-bar{height:var(--header-bar-h);font-size:13px}
.bm-steps{height:var(--header-steps-h);border-top:1px solid var(--navy-line)}
.bm-header a{color:inherit;text-decoration:none}
.bm-header a:focus-visible{outline:2px solid var(--peach);outline-offset:2px;border-radius:3px}
/* Family links (Daily signals, Ecosystem map): filled pills in the family
   blue, a step larger than the 13px page links, so leaving for the family's
   other sites clearly outranks moving within the explainer (Ray's variant B,
   2026-10-08). The dark gradient of the dashboard and ecosystem cards blended
   into the navy bar here; the family blue, the icons and the labels are what
   tie the three sites' cross-links together. Hover and keyboard focus use a
   lighter tint of the family blue; focus adds a white outline. The radius is
   restated on focus because the generic header focus rule sets 3px. */
.bm-header .bm-family{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:8px;
  font-size:14px;font-weight:600;color:var(--navy);white-space:nowrap;
  background:var(--family-blue);transition:background-color .15s}
.bm-header .bm-family:hover,.bm-header .bm-family:focus-visible{background:#B3D2F3}
.bm-header .bm-family:focus-visible{outline:2px solid var(--white);outline-offset:2px;border-radius:8px}
.bm-family-icon{font-size:16px;line-height:1}
.bm-family-short{display:none}
.bm-bar{gap:12px}
.bm-bar .bm-brand{margin-left:8px}
.bm-brand{display:flex;align-items:baseline;gap:8px;white-space:nowrap;min-width:0}
.bm-wordmark{font-family:var(--f-display);font-size:16px;font-weight:600;color:var(--white);letter-spacing:-.01em}
.bm-wordmark span{color:var(--family-blue);font-weight:500}
.bm-brand-sub{font-size:13px;color:var(--navy-text);overflow:hidden;text-overflow:ellipsis}
.bm-brand:hover .bm-brand-sub{color:var(--white)}
/* Page links (top row, right): inline on wide screens, "Sivut" menu below 1280px */
.bm-pages{margin-left:auto;min-width:0}
.bm-pages-list{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.bm-pages-list a{font-size:13px;color:var(--navy-text);white-space:nowrap}
.bm-pages-list a:hover{color:var(--white)}
.bm-pages-list a[aria-current]{color:var(--white);font-weight:600;text-decoration:underline;
                               text-decoration-color:var(--peach);text-decoration-thickness:2px;text-underline-offset:6px}
.bm-pages-menu{display:none;position:relative}
.bm-pages-menu summary{list-style:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--white);
                       padding:3px 10px;border:1px solid var(--navy-line);border-radius:6px;white-space:nowrap}
.bm-pages-menu summary::-webkit-details-marker{display:none}
.bm-pages-menu summary::after{content:"";display:inline-block;margin-left:7px;vertical-align:2px;
                              border:4px solid transparent;border-top:5px solid var(--peach);border-bottom:0}
.bm-pages-menu[open] summary{background:rgba(255,255,255,.08)}
.bm-pages-menu summary:focus-visible{outline:2px solid var(--peach);outline-offset:2px}
.bm-pages-menu ul{position:absolute;right:0;top:calc(100% + 6px);z-index:60;list-style:none;margin:0;padding:6px;
                  min-width:210px;background:var(--navy);border:1px solid var(--navy-line);border-radius:8px;
                  box-shadow:0 8px 24px rgba(18,34,46,.35)}
.bm-pages-menu li a{display:block;padding:9px 10px;border-radius:6px;font-size:14px;color:var(--navy-text)}
.bm-pages-menu li a:hover,.bm-pages-menu li a[aria-current]{background:rgba(255,255,255,.08);color:var(--white)}
.bm-pages-menu li a[aria-current]{font-weight:600}
@media (max-width:1279px){
  .bm-pages-list{display:none}
  .bm-pages-menu{display:block}
}

.bm-steps-label{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.1em;
                text-transform:uppercase;color:var(--navy-text);white-space:nowrap}
.bm-steps ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:0;min-width:0}
.bm-steps li{display:flex;align-items:center}
.bm-steps li:not(:last-child)::after{content:"";width:18px;height:1px;margin:0 8px;background:var(--navy-line)}
.bm-step{display:flex;align-items:center;gap:8px;padding:4px 2px;border-radius:999px}
.bm-step-num{width:26px;height:26px;border-radius:999px;box-sizing:border-box;flex-shrink:0;
             display:flex;align-items:center;justify-content:center;
             font-family:var(--f-display);font-size:13px;font-weight:700;
             border:1.5px solid rgba(211,220,226,.55);color:var(--navy-text);
             transition:background .15s,border-color .15s,color .15s}
.bm-step-name{font-size:12.5px;white-space:nowrap}
.bm-step:hover .bm-step-num{border-color:var(--peach);color:var(--white)}
.bm-step:hover .bm-step-name{color:var(--white)}
.bm-step[aria-current] .bm-step-num{background:var(--rust-strong);border-color:var(--rust-strong);color:var(--white)}
.bm-step[aria-current] .bm-step-name{color:var(--white);font-weight:600}
.bm-steps-current{display:none}

/* -- Chrome: footer -------------------------------------------------------- */
.bm-footer{background:var(--navy);color:var(--navy-text);font-size:12.5px;line-height:1.9;
           text-align:center;padding:22px var(--gutter) 26px;margin-top:40px}
.bm-footer strong{color:var(--white)}
.bm-footer a{color:var(--peach);text-decoration:none}
.bm-footer a:hover{text-decoration:underline}
.bm-footer a:focus-visible{outline:2px solid var(--peach);outline-offset:2px;border-radius:3px}
.bm-footer-note{color:#9FB0BC}

/* -- Glossary: inline terms + one floating tooltip (glossary.js) ----------- */
.gloss{text-decoration:underline dotted var(--rust);text-decoration-thickness:1.5px;
       text-underline-offset:3px;cursor:help;border-radius:2px}
.gloss:hover,.gloss[aria-describedby]{background:var(--peach-bg)}
.gloss:focus-visible{outline:2px solid var(--rust);outline-offset:2px}
/* Terms on navy: the dark panels, and the value chain's dark Google box. */
.panel--dark .gloss,.vc-box--dark .gloss{text-decoration-color:var(--peach)}
.panel--dark .gloss:hover,.panel--dark .gloss[aria-describedby],
.vc-box--dark .gloss:hover,.vc-box--dark .gloss[aria-describedby]{background:rgba(240,164,110,.18)}
.panel--dark .gloss:focus-visible,.vc-box--dark .gloss:focus-visible{outline-color:var(--peach)}
.gloss-tip{position:fixed;z-index:100;max-width:320px;box-sizing:border-box;padding:10px 12px;
           background:var(--navy);color:var(--navy-text);border-radius:8px;
           box-shadow:0 6px 24px rgba(18,34,46,.28);font-family:var(--f-body);font-size:13px;
           line-height:1.45;text-align:left;pointer-events:none}
.gloss-tip[hidden]{display:none}
.gloss-tip-term{font-family:var(--f-display);font-size:14px;font-weight:700;color:var(--white)}
.gloss-tip-alt{font-family:var(--f-mono);font-size:11px;color:var(--peach);margin-left:6px}
.gloss-tip-def{display:block;margin-top:3px}

/* Model card body: the two authored columns need ~1280px. Below that the
   layer column would shrink to ~75px at 1024px, so the contract panel moves
   under the layer cake (the same stacking the compact layout uses). */
@media (max-width:1279px){
  .card-body{flex-direction:column}
}

/* -- Compact (tablet and phone) -------------------------------------------- */
@media (max-width:1023px){
  .bm-bar,.bm-steps{padding:0 var(--gutter);gap:12px}
  .bm-steps li:not(:last-child)::after{width:8px;margin:0 4px}
  .bm-step{padding:2px}
  .bm-step-name{display:none}
  .bm-step-num{width:28px;height:28px}
  .bm-steps-current{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
                    font-family:var(--f-display);font-size:14px;font-weight:600;color:var(--white)}

  /* Page frame */
  .page--hub,.page--card{padding:20px var(--gutter) 0}
  .page--doc{padding:20px var(--gutter) 0}
  .page--hub{gap:14px}
  .page--card,.page--doc{gap:16px}
  .page-head--doc .page-lede{font-size:16px}
  .glossary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-title{font-size:32px}
  .page-lede{font-size:16px}

  /* Model cards: sections stack; the layer cake keeps its three columns
     (who operates / owns sits beside each layer), just narrower. */
  .band{flex-direction:column}
  .band-col{padding:16px 18px}
  .band-col + .band-col{border-left:none;border-top:1px solid var(--navy-line)}
  .card-body{flex-direction:column}
  .cake-head,.cake{grid-template-columns:minmax(0,1fr) 92px 92px;column-gap:8px}
  .cake-head > *{font-size:10.5px}
  .cake{row-gap:8px}
  .layer{padding:8px 10px}
  .layer-name{font-size:15px}
  .layer-desc{font-size:12.5px}
  /* Long Finnish compounds (Käyttöjärjestelmä) may hyphenate or break
     rather than run out of their box on narrow screens. */
  .layer-name,.layer-desc,.role{overflow-wrap:anywhere;hyphens:auto}
  .role{font-size:12px;padding:6px;hyphens:auto}
  .demarc-label{white-space:normal}
  .demarc-line{min-width:24px}
  .flow{flex-wrap:wrap;row-gap:4px}
  .flow-text{flex-basis:100%}
  .contract{padding:16px}
  .crow-label{width:104px}
  .risk-item-name{width:120px}
  .term-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .bm-steps-label,.bm-brand-sub,.bm-family-long{display:none}
  .bm-family-short{display:inline}
  .bm-header .bm-family{padding:4px 8px}
  .bm-bar .bm-brand{margin-left:2px}
  .term-grid,.glossary-grid{grid-template-columns:minmax(0,1fr)}
  .cake-head,.cake{grid-template-columns:minmax(0,1fr) 84px 84px}
  .layer-name{font-size:14px}
}