/* Stone lesson figures, readable actions and local brand assets (stone.css, the product stylesheet of the guide).
   Slide contents adapt at the Bootstrap 768px container boundary; the page
   layout and navigation use Bootstrap viewport tiers. */

.sl.step .sl__in { aspect-ratio: auto; min-height: 56.25cqw; padding-bottom: 7.2cqw; }
.sl.step .sl__shot { min-height: 30cqw; }
@container (min-width: 768px) { .sl.step:not(.sl--phone) .sl__bd { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); } }

/* The screen keeps the proportions of its screenshot (--ar, written by build-guide.py): a long step text makes the
   slide taller but never stretches the screen, so the screenshot is never cut at its right edge, whatever the window
   width. In Present mode (a fixed 1280 x 720 slide) a screen taller than the room left under the title is shortened
   instead, which cuts its bottom, never its right edge. */
@container (min-width: 768px) {
  .sl.step:not(.sl--phone) .sl__shot { align-self: start; min-height: 0; max-height: 100%; }
  .sl.step:not(.sl--phone) .sl__vw { flex: 0 1 auto; min-height: 0; aspect-ratio: var(--ar, 1440 / 1000); }
}
html.dk-present .sl.step:not(.sl--phone) .sl__bd { grid-template-rows: minmax(0, 1fr); }
/* Phone-frame padding changes the inner ratio; contain keeps both screenshot edges visible. */
.sl__phone .sl__vw img { object-fit: contain; }

/* 992–1399.98px: the seven parts, the brand and All guides do not fit on one row. As on tablets and phones, the parts
   scroll inside the section bar (focus.js keeps the current one in view) instead of widening the page. */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .v2-nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .v2-nav::-webkit-scrollbar { display: none; }
  .v2-brand__t { display: none; }
}


/* ⤢ Enlarge never covers the toolbar at the top right of a screen: on a wide slide it shows at the bottom right of the
   screenshot (on hover, or always on a touch screen); on a narrow slide it has its own line under the screenshot. */
.sl__zoom { top: auto; bottom: .8cqw; }
@container (max-width: 767.98px) {
  .sl__zoom { position: static; display: block; width: max-content; margin: 6px 0 0 auto; opacity: 1; }
  .sl__phone .sl__vw { aspect-ratio: auto; } /* the phone frame grows by the line under its screen */
}

/* what to do, one numbered action at a time */
.sl__do { display: grid; gap: .75cqw; margin: 1.2cqw 0 0; padding: 0; list-style: none; counter-reset: do; }
.sl__do li { position: relative; padding-left: 2.05em; color: var(--sl-ink); font-size: max(13px, 1.22cqw); line-height: 1.42; counter-increment: do; }
.sl__do li::before { content: counter(do); position: absolute; left: 0; top: .08em; display: grid; place-items: center; width: 1.45em; height: 1.45em;
  border-radius: 50%; background: color-mix(in srgb, var(--sl-blue) 13%, white); color: var(--sl-blue); font: 800 .76em/1 var(--sl-sans); }
.sl__do b, .sl__note b { font-weight: 800; }
/* a single action needs no number next to the step number */
.sl__do--one li { padding-left: 0; }
.sl__do--one li::before { content: none; }
.sl__note { margin: 1cqw 0 0; color: var(--sl-ink3); font-size: max(12px, 1.06cqw); line-height: 1.42; }
.sl__note + .sl__note { margin-top: .5cqw; }
.sl__tip--see { border-left-color: var(--sl-blue); }
.sl__tip--see .key { color: var(--sl-blue); }
.sl__tip--see p { margin: 0; }
.sl__open a + a { margin-left: 1.1em; }
.sl__open .sl__alt { color: var(--sl-ink3); font-weight: 600; }
.sl.step .sl__side > :has(+ .sl__tip) { margin-bottom: 1.2cqw; }

/* the cover lists what to have ready */
.cv-sub ul { margin: 1.2cqw 0 0; padding-left: 1.1em; color: rgba(255, 255, 255, .9); font-size: max(13px, 1.28cqw); line-height: 1.42; }
.cv-sub li + li { margin-top: .35cqw; }
.cv-sub b { color: #fff; }

@container (max-width: 767.98px) {
  .sl.step .sl__in { min-height: 0; padding-bottom: 46px; }
  .sl.step .sl__shot { min-height: 0; }
  .sl__do { gap: 8px; margin-top: 12px; }
  .sl__note { margin-top: 10px; }
  .cv-sub ul { margin-top: 12px; }
}

/* the learning path has as many stops as the guide defines */
@media (min-width: 992px) { .o6-job ol[style] { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); } }

/* screen reference: full-page captures shown from the top */
.o6-cards .o6-card__img img { object-position: top left; }
.o6-card__m code { font: 500 .78rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }

/* One SVG family in stable frames keeps every role label aligned. */
.role-icon { display: block; width: 1rem; height: 1rem; flex: none; }
.v2-nav a { display: inline-flex; align-items: center; gap: .35rem; }
.sl__av { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sl__av .role-icon { width: 70%; height: 70%; }

/* Keep the existing navigation cards, with equal columns and no empty middle slot. */
.n5-after { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.n5-next { justify-self: stretch; width: 100%; height: 100%; min-width: 0; }
@media (min-width: 576px) {
  .n5-after:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .n5-after:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Vietnamese: every typeface on the page needs Vietnamese glyphs */
html[lang="vi"] .dk { --sl-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --sl-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
html[lang="vi"] body.typo-optimus { --font-display: "Lora", "Iowan Old Style", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, sans-serif; --heading-weight: 700; }

/* Present mode shows every step at 1280 x 720; slides.js lowers --k on a step whose text would run into the footer */
html.dk-present .sl.step .sl__hd { margin-bottom: calc(2.9cqw * var(--k, 1)); }
html.dk-present .sl.step .sl__hd h2 { font-size: calc(3.05cqw * (0.55 + 0.45 * var(--k, 1))); }
html.dk-present .sl.step .sl__k { margin-bottom: calc(1.3cqw * var(--k, 1)); }
html.dk-present .sl.step .sl__text { font-size: calc(1.36cqw * var(--k, 1)); }
html.dk-present .sl.step .sl__do { gap: calc(.75cqw * var(--k, 1)); margin-top: calc(1.2cqw * var(--k, 1)); }
html.dk-present .sl.step .sl__do li { font-size: calc(1.22cqw * var(--k, 1)); }
html.dk-present .sl.step .sl__note { margin-top: calc(1cqw * var(--k, 1)); font-size: calc(1.06cqw * var(--k, 1)); }
html.dk-present .sl.step .sl__open { margin-top: calc(1.3cqw * var(--k, 1)); font-size: calc(1.12cqw * var(--k, 1)); }
html.dk-present .sl.step .sl__hand { font-size: calc(1.1cqw * var(--k, 1)); }
html.dk-present .sl.step .sl__tip { padding: calc(1cqw * var(--k, 1)) 1.35cqw; font-size: calc(1.16cqw * var(--k, 1)); }

/* The approved signature is an asset, independent of the guide's typography setting. */
.v2-brand-logo,.v2-foot__logo,.cv-brand__logo{display:block;height:auto;object-fit:contain;flex:none}
.v2-brand-logo{width:170px;max-width:none}
.v2-foot__logo{width:220px;max-width:100%;margin-bottom:.8rem}
.cv-brand{flex-direction:column;align-items:flex-start;gap:.6cqw}
.cv-brand__logo{width:max(168px,26cqw);max-width:100%}
.cv-brand small{display:block}
@media(max-width:575.98px){.v2-brand-logo{width:136px}}
@media print{.sl--cover,.v2-foot{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* ── Stone: the main menu by group (Workshop & site, Office, Platform). A group's panel shows its roles
   side by side, each with its tasks; below 768px they stack. Same panel, links and states as the role submenu. */
.v5-submenu.mc-mega { width: min(calc(var(--cols, 2) * 268px + 20px), calc(100% - 24px)); padding: 10px; }
@media (min-width: 768px) { .v5-submenu.mc-mega:not([hidden]) { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 4px 10px; align-items: start; } }
.mc-mega ul { margin: 0; padding: 0 0 6px; list-style: none; }
.mc-mega .mc-mega__head { display: flex; align-items: center; gap: 8px; padding: 9px 10px; color: var(--ink); font: 650 14px/1.4 var(--font-body); }
.mc-mega .mc-mega__head .role-icon { flex: none; width: 17px; height: 17px; color: var(--c, var(--brand)); }
.mc-mega ul a { padding: 7px 10px 7px 35px; }

/* ── Stone overview: a one-sided mind map of the product (an SVG written by build-guide.py, its text
   in the fonts of the guide; each branch keeps its colour on every skin). Below 1200px the same content is a list. */
#main.v5-home { display: flex; flex-direction: column; justify-content: center; background: var(--wash); }
.mm-wrap { width: 100%; padding: 26px 12px 34px; }
.mm-h1 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }
.mm { display: block; width: 100%; max-width: 1360px; height: auto; margin: 0 auto; }
.mm a { cursor: pointer; text-decoration: none; }
.mm a:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; border-radius: 7px; }
.mm-root rect { fill: var(--brand-dd); }
.mm-root__t { fill: #fff; font: 600 25px/1 var(--font-display); letter-spacing: -.01em; }
.mm-root__s { fill: #fff; opacity: .85; font: 500 14px/1 var(--font-body); }
.mm-level__t { fill: #fff; font: 700 16.5px/1 var(--font-body); }
.mm-level__s { fill: #fff; opacity: .9; font: 500 11.5px/1 var(--font-body); }
.mm-role > rect { fill: color-mix(in srgb, var(--c) 11%, var(--paper)); stroke: color-mix(in srgb, var(--c) 40%, var(--paper)); stroke-width: 1; transition: fill .15s; }
.mm-role text { fill: var(--c); font: 650 14px/1 var(--font-body); }
.mm-role:hover > rect { fill: color-mix(in srgb, var(--c) 22%, var(--paper)); }
.mm-fn > rect { fill: color-mix(in srgb, var(--c) 12%, var(--paper)); stroke: color-mix(in srgb, var(--c) 42%, var(--paper)); stroke-width: 1; transition: fill .15s; }
.mm-fn:hover > rect { fill: color-mix(in srgb, var(--c) 22%, var(--paper)); }
.mm-fn__t { fill: var(--c); font: 700 14.5px/1 var(--font-body); }
.mm-fn__d { fill: var(--ink2); font: 500 12px/1 var(--font-body); }
.mm-panel { fill: color-mix(in srgb, var(--c) 5%, var(--paper)); stroke: color-mix(in srgb, var(--c) 30%, var(--paper)); stroke-width: 1; }
.mm-hit { fill: transparent; pointer-events: all; transition: fill .12s; }
.mm-action text { fill: var(--ink); font: 500 14.5px/1 var(--font-body); }
.mm-action circle { fill: var(--c); opacity: .65; }
.mm-action:hover .mm-hit { fill: color-mix(in srgb, var(--c) 10%, transparent); }
.mm-action:hover text { fill: var(--c); }
.mm-action:hover circle { opacity: 1; }
.mm-focus .mm-level > rect { stroke: var(--ink); stroke-width: 2.5; }
.mm-focus .mm-role > rect, .mm-focus .mm-fn > rect, .mm-focus .mm-panel { stroke: var(--c); stroke-width: 2; }
.mmo { display: none; }
@media (max-width: 1199.98px) {
  #main.v5-home { justify-content: flex-start; }
  .mm { display: none; }
  .mm-wrap { padding-inline: 16px; }
  .mm-h1 { position: static; width: auto; height: auto; margin: 0 0 20px; overflow: visible; clip-path: none; color: var(--ink); font: 600 30px/1.15 var(--font-display); }
  .mmo { display: block; columns: 2; column-gap: 16px; }
  .mmo-level { margin-bottom: 16px; overflow: hidden; break-inside: avoid; border: 1px solid var(--line2); border-radius: 14px; background: var(--paper); scroll-margin-top: 16px; }
  .mmo-level h2 { margin: 0; padding: 12px 16px; background: var(--c); color: #fff; font: 700 17px/1.3 var(--font-body); }
  .mmo-level h2 small { display: block; opacity: .9; font: 500 12.5px/1.4 var(--font-body); }
  .mmo-roles, .mmo-actions { margin: 0; padding: 0; list-style: none; }
  .mmo-role { padding: 12px 16px; }
  .mmo-role + .mmo-role { border-top: 1px solid var(--line); }
  .v5-home .mmo-role__name { color: var(--c); font: 650 15.5px/1.4 var(--font-body); text-decoration: none; }
  .mmo-role__note { display: block; color: var(--ink2); font: 500 13.5px/1.4 var(--font-body); }
  .mmo-actions { margin-top: 6px; padding-left: 14px; border-left: 2px solid color-mix(in srgb, var(--c) 35%, var(--paper)); }
  .v5-home .mmo-actions a { display: block; padding: 4px 0; color: var(--ink); font: 500 14.5px/1.4 var(--font-body); text-decoration: none; }
}
@media (max-width: 699.98px) { .mmo { columns: 1; } }

/* Three groups fit a phone's bar when their icons stay in the panels; below 360px the bar scrolls as in v5. */
@media (max-width: 575.98px) {
  .v2-nav .v5-role-home .role-icon { display: none; }
  .v2-nav .v5-role-home { padding-left: 6px; padding-right: 2px; font-size: 14px; }
  .v2-bar .v2-nav { gap: 2px; }
}