/* compliance (views-v3-compliance.js, v3 slice 2): the RunSure landing (tenant capture 03). NDS tokens from index.html only. */
.v3c-fw-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); }
.v3c-fw-head.one { grid-template-columns: minmax(0, 1fr); }
.v3c-welcome { position: relative; background: var(--bg-sheila-tint-50); border: 1px solid var(--dawn-100); border-radius: var(--radius); padding: var(--s5); }
.v3c-welcome .v2-x { position: absolute; right: var(--s4); top: var(--s4); }
.v3c-welcome-h { display: flex; align-items: center; gap: var(--s4); padding-right: var(--s6); }
.v3c-welcome-t { font-size: 20px; line-height: 24px; color: var(--text-base); }
.v3c-welcome p { font-size: 15px; line-height: 20px; color: var(--text-base); margin-top: var(--s3); max-width: 820px; }
.v3c-request { background: var(--solar-50); border: 1px solid var(--divider); border-radius: var(--radius); padding: var(--s5); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s3); }
.v3c-request p { font-size: 15px; line-height: 20px; color: var(--text-base); }
.v3c-btn-o { height: 34px; padding: 0 var(--s4); border-radius: 17px; border: 1px solid var(--earth-500); background: var(--solar-50); color: var(--text-base); font-size: 15px; }
.v3c-btn-o:hover { background: var(--solar-300); }
.v3c-fw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.v3c-fwcard { background: var(--solar-50); border: 1px solid var(--earth-500); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.v3c-fwcard.off { border-color: var(--divider); }
.v3c-fw-top { background: var(--solar-500); padding: var(--s5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); flex: 1; }
.v3c-fw-n { font-family: 'RecklessNeue Regular', serif; font-size: 30px; line-height: 36px; color: var(--text-feature); }
.v3c-fwcard.off .v3c-fw-n { color: var(--text-disabled); }
.v3c-fw-d { font-size: 13px; line-height: 18px; color: var(--text-base); }
.v3c-fwcard.off .v3c-fw-d { color: var(--text-disabled); }
.v3c-about-l { border: none; background: transparent; padding: 0; font-size: 12px; }
.v3c-about { font-size: 13px; line-height: 18px; color: var(--text-medium); max-width: 560px; }
.v3c-about[hidden] { display: none; }
/* v5.5 fixer: Manage compliance stays on one line in its 26 px pill; when it cannot fit beside the % block (phones) it wraps under it. */
.v3c-fw-bot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5) var(--s2); }
.v3c-fw-bot .v2-navy { margin-top: 0; margin-left: auto; height: 26px; font-size: 12px; padding: 0 var(--s3); border-radius: 13px; white-space: nowrap; flex-shrink: 0; }
.v3c-pct { display: inline-grid; grid-template-columns: auto auto; align-items: baseline; column-gap: var(--s1); }
.v3c-pct-n { font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 24px; line-height: 28px; color: var(--text-base); }
.v3c-pct-l { font-size: 15px; color: var(--text-light); }
.v3c-pct-bar { grid-column: 1 / -1; display: block; height: 3px; margin-top: var(--s1); background: var(--dawn-50); border-radius: 2px; overflow: hidden; }
.v3c-pct-bar i { display: block; height: 100%; background: var(--dawn-500); }
.v3c-fw-counts { padding: 0 var(--s5) var(--s4); color: var(--text-light); }
@media (max-width: 1099px) { .v3c-fw-head, .v3c-fw-grid { grid-template-columns: minmax(0, 1fr); } }

/* dma (views-v3-dma.js): RunSustainably, the hub, the issues page and the impact page. v5.6 (3 Nov 2026, spec
   v4/spec/v5.6-runsustainably-fidelity.md sections 0 to 3): ported from the product's source (the canonical UI repo):
   libs/nds/src/components/Accordion/AccordionSummary.tsx, Lozenge/ (Base, Simple, Information, Interactive, Input),
   Message/, StaticCard/, Tabs/, Menu/, Button/ and libs/nds/src/patterns/EmptyState/, DetailAccordion/, InsightCard/;
   libs/mui-themes/src/lib/drova/theme.ts (MuiButton, MuiIconButton 9 px padding and 20 px glyph, MuiLink); the DMA module's
   own styled values (assessments, materiality-matrix, issues-preliminary, msci-insight, components/msci, materiality-impact).
   Colours are walk.css's palette tokens (named after EXTENDED_PALETTE), type the .t-* classes (the product's faces and
   metrics). The product's CssBaseline sizes every box border-box. */
.v3d [hidden], .v3d-crumb-a[hidden] { display: none !important; }
.v3d-crumb-a { color: inherit; text-decoration: none; }
.v3d-crumb-a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* kept for views-v3-resilience.js (its "View" links use this class) */
.v3d-vd { display: inline-flex; align-items: center; gap: var(--s1); border: none; background: transparent; padding: 0; color: var(--text-base); font-size: 12px; line-height: 16px; text-decoration: none; }
.v3d-vd span { text-decoration: none; }
.v3d-vd:hover span { text-decoration: underline; text-underline-offset: 2px; }
.v3d-vd svg.ic { width: 14px; height: 14px; fill: currentColor; }

:root { --v3d-im-grid: #DDDED8; } /* svg-impact-severity-matrix-empty-state.tsx's dashed grid stroke (not a palette step) */
.v3d-pp, .v3d-pp *, .v3d-pp *::before, .v3d-pp *::after { box-sizing: border-box; }
.v3d-pp { background: var(--white); color: var(--text-base); }
.v3d-pp p, .v3d-pp h2, .v3d-pp h3, .v3d-pp h6, .v3d-pp ul { margin: 0; }
/* the page gutter (page-container.ts pageGutter): 32, 24 below a 768 px page, 12 below 431 px */
.v3d-layout { padding: 32px; }
.v3d-md .v3d-layout, .v3d-md .v3d-msci { padding: 24px; }
.v3d-sm .v3d-layout, .v3d-sm .v3d-msci { padding: 12px; }
.v3d-stack { display: flex; flex-direction: row; align-items: center; }
.v3d-gap8 { gap: 8px; } .v3d-gap12 { gap: 12px; }
.v3d-center { text-align: center; }
.v3d-mx-auto { margin-left: auto; margin-right: auto; }
.v3d-bold { font-weight: 700; }
.v3d-pre { white-space: pre-line; width: 100%; }
.v3d-tag { display: inline-flex; flex-shrink: 0; margin-left: auto; }
.v3d-tag .sample-tag { height: 22px; }
.v3d-ic { display: block; flex-shrink: 0; fill: currentColor; }
.v3d-ic20 { width: 20px; height: 20px; }
.v3d-link { color: var(--text-base); text-decoration: underline; text-decoration-color: currentColor; cursor: pointer; }
.v3d-link:hover { color: var(--earth-400); }
/* the issues page's header actions (issues-preliminary-header.tsx): NDS Buttons, variant ghost_white, size regular (theme.ts
   MuiButton ghost_white: white, earth 500 text, underlined; solar 600 on hover and focus, 700 pressed; the start icon 20 px with
   MUI's 0 8 0 -4 margin). The replica's top bar does not stack the title above them as the product's header does when they
   do not fit, so below 1100 px they keep their icons and drop their labels (the title attribute names them). */
.v3d-tbtn { position: relative; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 36px; min-width: 100px; padding: 6px 16px; border: none; border-radius: 100px; background: var(--white); color: var(--earth-500); font-family: var(--ff-product-regular); font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: 0.02857em; text-decoration: underline; white-space: nowrap; cursor: pointer; }
.v3d-tbtn svg { display: block; flex-shrink: 0; width: 20px; height: 20px; margin: 0 8px 0 -4px; fill: currentColor; }
.v3d-tbtn:hover, .v3d-tbtn:focus-visible { background: var(--solar-600); outline: none; }
.v3d-tbtn:active, .v3d-tbtn[aria-expanded="true"] { background: var(--solar-700); }
.v3d-tb-menu { display: inline-flex; }
.v3d-tb-menu > .v3d-menu { width: max-content; max-width: 260px; margin-top: 4px; } /* Menu Paper maxWidth 260; an item's label 188 beside its icon */
.v3d-tb-menu .v3d-mi > span { max-width: 188px; }
/* the top bar has the walkthrough's own items beside these; when the title would run past two lines (or truncate), the
   buttons keep their icons and drop their labels (views-v3-dma.js fitActions), as below 1100 px */
.topbar .v3d-tbtn.v3d-tight { min-width: 0; padding: 6px 8px; }
.topbar .v3d-tbtn.v3d-tight svg { margin: 0; }
.topbar .v3d-tbtn.v3d-tight span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1099px) {
  .topbar .v3d-tbtn { min-width: 0; padding: 6px 8px; }
  .topbar .v3d-tbtn svg { margin: 0; }
  .topbar .v3d-tbtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* phones: the top bar keeps the title, as it did for these actions before (views-v2.css hides .v2-tlink below 768 px) */
@media (max-width: 767px) { .topbar .v3d-tbtn, .topbar .v3d-tb-menu { display: none; } }

/* Lozenges: BaseLozenge (20 px, radius 10, padding 4 10, 12/12, the caption label on a 16 px line) */
.v3d-loz { position: relative; display: inline-flex; align-items: center; height: 20px; width: max-content; min-width: 32px; max-width: 100%; padding: 4px 10px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text-medium); font-family: var(--ff-product-regular); font-size: 12px; line-height: 12px; font-weight: 400; overflow: hidden; text-decoration: none; flex-shrink: 0; transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.v3d-lz-t { display: inline-block; min-width: 0; font-family: var(--ff-product-regular); font-size: 12px; line-height: 16px; letter-spacing: 0.03333em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3d-lz-t strong { font-family: inherit; font-size: inherit; line-height: inherit; font-weight: 700; display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.v3d-lz-start { display: inline-flex; margin-right: 4px; font-size: 12px; color: var(--text-base); }
.v3d-lz-start svg { width: 12px; height: 12px; }
.v3d-loz:has(> .v3d-lz-start) { padding-left: 6px; }
.v3d-hash { margin-right: 4px; }
.v3d-lz-trunc { flex-shrink: 1; }
/* SimpleLozenge: the colour's 50 (grey: 100) with the 700 border (grey: 600), text base; interactive hover 100 (grey: 200) */
.v3d-lz-simple { color: var(--text-base); }
.v3d-lz-simple .v3d-lz-start { color: var(--text-medium); }
.v3d-lz-grey { background: var(--grey-100); border-color: var(--grey-600); }
.v3d-lz-pink { background: var(--pink-50); border-color: var(--pink-700); }
.v3d-lz-red { background: var(--red-50); border-color: var(--red-700); }
.v3d-lz-green { background: var(--green-50); border-color: var(--green-700); }
.v3d-lz-sky { background: var(--sky-50); border-color: var(--sky-700); }
.v3d-lz-purple { background: var(--purple-50); border-color: var(--purple-700); }
.v3d-lz-orange { background: var(--orange-50); border-color: var(--orange-700); }
.v3d-lz-sel { cursor: pointer; z-index: 2; }
.v3d-lz-sel.v3d-lz-grey:hover { background: var(--grey-200); }
.v3d-lz-sel.v3d-lz-sky:hover { background: var(--sky-100); }
.v3d-lz-sel.v3d-lz-purple:hover { background: var(--purple-100); }
.v3d-lz-sel.v3d-lz-green:hover { background: var(--green-100); }
/* InformationLozenge: no border; ghost transparent, earth 50, dawn 100 (the NEW chip, pt 6 px) */
.v3d-lz-info, .v3d-lz-ghostinfo { border: none; color: var(--text-base); }
.v3d-lz-ghostinfo { background: transparent; }
.v3d-lz-earthinfo { background: var(--earth-50); }
.v3d-lz-dawn { background: var(--dawn-100); padding-top: 6px; min-width: max-content; }
.v3d-lz-meta { cursor: pointer; z-index: 2; } /* above the row's link; its click opens the row's page (issue-item-*-materiality.tsx bubbles) */
.v3d-lz-meta:hover { box-shadow: inset 0 0 0 1px var(--earth-200); }
/* InteractiveLozenge: ghost (an inset earth 200 ring on hover), earth (50, hover 100, checked 200: the pills), grey (100, 200, 300) */
button.v3d-loz { cursor: pointer; font: inherit; font-family: var(--ff-product-regular); font-size: 12px; line-height: 12px; }
.v3d-lz-i { border: none; color: var(--text-base); cursor: pointer; outline: none; z-index: 2; }
.v3d-lz-ghost { background: transparent; }
.v3d-lz-ghost:hover { box-shadow: inset 0 0 0 1px var(--earth-200); }
.v3d-lz-earth { background: var(--earth-50); }
.v3d-lz-earth:hover { background: var(--earth-100); }
.v3d-lz-earth:focus-visible, .v3d-lz-earth.v3d-checked, .v3d-lz-earth:active { background: var(--earth-200); }
.v3d-lz-greyi { background: var(--grey-100); }
.v3d-lz-greyi:hover { background: var(--grey-200); }
.v3d-lz-greyi:focus-visible, .v3d-lz-greyi:active { background: var(--grey-300); }
/* InputLozenge (the filters): earth 50, text earth 500, the end chevron 12 px in earth 400 on a 16 px pill */
.v3d-lz-input { background: var(--earth-50); border: none; color: var(--earth-500); padding-right: 2px; outline: none; }
.v3d-lz-input:hover, .v3d-lz-input:focus-visible { background: var(--earth-100); }
.v3d-lz-end { display: grid; place-content: center; height: 16px; margin-left: 10px; padding: 3px 2px; border-radius: 10px; color: var(--earth-400); }
.v3d-lz-input:hover .v3d-lz-end, .v3d-lz-input:focus-visible .v3d-lz-end { background: var(--solar-50); }
.v3d-lz-end svg { width: 12px; height: 12px; }

/* Buttons (NDS Button, theme.ts MuiButton): 36 px, radius 100, the button type 16/20 weight 500 */
.v3d-btn { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; min-width: 100px; padding: 6px 16px; border: none; border-radius: 100px; font-family: var(--ff-product-regular); font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: 0.02857em; text-decoration: none; white-space: nowrap; cursor: pointer; }
.v3d-btn-primary { background: var(--earth-500); color: var(--white); }
.v3d-btn-primary:hover, .v3d-btn-primary:focus-visible { background: var(--earth-400); }
.v3d-btn-secondary { background: var(--white); color: var(--earth-500); box-shadow: inset 0 0 0 1px var(--earth-500); }
.v3d-btn-secondary:hover, .v3d-btn-secondary:focus-visible { background: var(--solar-600); }
.v3d-btn-ghost { background: var(--white); color: var(--earth-500); text-decoration: underline; } /* ghost_white */
.v3d-btn-ghost:hover, .v3d-btn-ghost:focus-visible { background: var(--solar-600); text-decoration: underline; outline: none; }
.v3d-btn-ghost:active { background: var(--solar-700); }
/* size compact (Button classes.compact): 20 px, padding 0 12, radius 10, 12/16 */
.v3d-btn-c { width: max-content; min-width: 0; height: 20px; padding: 0 12px; border-radius: 10px; font-size: 12px; line-height: 16px; }
.v3d-btn-compact { height: 20px; min-width: 0; width: max-content; padding: 0 12px; border-radius: 10px; font-size: 12px; line-height: 16px; text-decoration: underline; }
.v3d-btn-av { width: 20px; height: 20px; margin-left: -4px; }
/* IconButton: 9 px padding round a 20 px glyph */
.v3d-ibtn { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 9px; border: none; border-radius: 50%; background: transparent; color: var(--text-base); cursor: pointer; }
.v3d-ibtn:hover, .v3d-ibtn:focus-visible { background: var(--solar-600); box-shadow: inset 0 0 0 1px var(--white); }
.v3d-ibtn svg { width: 20px; height: 20px; }
.v3d-ibtn-av { width: 20px; height: 20px; display: block; }
.v3d-ibtn-solar:hover, .v3d-ibtn-solar:focus-visible { background: var(--solar-600); box-shadow: none; }
.v3d-ibtn-solar:active { background: var(--solar-700); }

/* AccordionSummary: the level 1 row 88 px (border-top hairline, 12 px left padding, the grid 48 px | 1fr | max-content), the
   nested level 3 row 72 px; the icon wrapper (48 px circle at level 1, the 12 px dot at level 3); the title wrapper 12 px
   right of it; the subtitle scrolls sideways under the title with no scrollbar; the tail 12 px either side, gap 4. */
.v3d-acc { position: relative; background: var(--white); }
.v3d-sum { position: relative; display: grid; grid-template-columns: 48px 1fr max-content; width: 100%; padding-left: 12px; cursor: default; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.v3d-l1 > .v3d-sum { height: 88px; border-top: 1px solid var(--divider); }
.v3d-l3 > .v3d-sum { height: 72px; align-items: center; }
.v3d-iw { margin: auto; display: grid; place-content: center; }
.v3d-circ { display: grid; place-content: center; width: 48px; height: 48px; border-radius: 24px; color: var(--earth-500); cursor: pointer; }
.v3d-circ.v3d-navy { background: var(--earth-500); color: var(--white); }
.v3d-circ svg.v3d-ic { width: 24px; height: 24px; transition: ease-in-out 300ms; }
.v3d-circ svg.v3d-expand { width: 20px; height: 20px; display: none; }
.v3d-dot { display: block; width: 12px; height: 12px; border-radius: 6px; }
.v3d-tw { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; height: 100%; margin-left: 12px; }
.v3d-l3 .v3d-tw { padding-left: 12px; gap: 0; }
.v3d-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-base); }
.v3d-sub { min-width: 0; overflow: auto; scrollbar-width: none; }
.v3d-sub::-webkit-scrollbar { display: none; }
.v3d-sub > * { width: max-content; }
.v3d-tail { position: relative; z-index: 2; display: flex; align-items: center; gap: 4px; height: 100%; padding-left: 12px; padding-right: 12px; }
.v3d-scroll { position: absolute; bottom: 20px; z-index: 3; display: grid; place-content: center; width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%; background: var(--white); color: var(--text-medium); cursor: pointer; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.v3d-scroll svg { width: 16px; height: 16px; }
.v3d-scroll:hover, .v3d-scroll:focus-visible { background: var(--solar-600); box-shadow: inset 0 0 0 1px var(--white); }
.v3d-scroll-r { right: -10px; } .v3d-scroll-l { left: -10px; }
.v3d-l3 .v3d-scroll { bottom: 18px; } .v3d-l3 .v3d-scroll-l { left: 0; }
/* hover: a clickable row (its own link) and a row with details (the issue card) go solar 600; the card's circle shows the
   expand chevron instead of its glyph, turned -90deg while collapsed */
.v3d-click:hover > .v3d-sum, .v3d-full > .v3d-sum:hover { background: var(--solar-600); }
.v3d-click:hover .v3d-scroll { background: var(--solar-600); }
.v3d-full > .v3d-sum:hover .v3d-glyph { display: none; }
.v3d-full > .v3d-sum:hover .v3d-expand { display: block; }
.v3d-full:not(.v3d-expanded) .v3d-expand { rotate: -90deg; }
.v3d-sum-toggle { cursor: pointer; outline: none; }
.v3d-sum-toggle:focus-visible { box-shadow: inset 0 0 0 2px var(--earth-500); }
.v3d-stretch { position: absolute; inset: 0; z-index: 1; }
.v3d-stretch:focus-visible { outline: 2px solid var(--earth-500); outline-offset: -2px; }
/* below a 768 px page (pageDown md): the grid 36 px | 1fr | max-content on a 48 px first row, the subtitle on its own row
   across columns 2 and 3; level 1 77 px with a 24 px circle (glyph 13 px), level 3 70 px; titles body2 and caption */
.v3d-md .v3d-sum { grid-template-columns: 36px 1fr max-content; grid-template-rows: 48px 1fr; align-items: start; }
.v3d-md .v3d-l1 > .v3d-sum { height: 77px; }
.v3d-md .v3d-l3 > .v3d-sum { height: 70px; }
.v3d-md .v3d-tw { display: contents; }
.v3d-md .v3d-iw { grid-column: 1; grid-row: 1; }
.v3d-md .v3d-title { grid-column: 2; grid-row: 1; align-self: center; margin-left: 2px; min-width: 0; }
.v3d-md .v3d-tail { grid-column: 3; grid-row: 1; }
.v3d-md .v3d-l3 .v3d-title { margin-left: 12px; padding-left: 12px; }
.v3d-md .v3d-sub { grid-column: 2 / span 2; grid-row: 2; margin-right: 12px; }
.v3d-md .v3d-l3 .v3d-sub { margin-left: 24px; }
.v3d-md .v3d-l1 .v3d-title.t-h6 { font-family: var(--ff-product-regular); font-size: 16px; line-height: 20px; font-weight: 400; letter-spacing: 0.01071em; }
.v3d-md .v3d-l3 .v3d-title.t-body1 { font-family: var(--ff-product-regular); font-size: 12px; line-height: 16px; letter-spacing: 0.03333em; }
.v3d-md .v3d-iw { margin: auto; align-self: center; }
.v3d-md .v3d-l1 .v3d-circ { width: 24px; height: 24px; border-radius: 12px; }
.v3d-md .v3d-l1 .v3d-circ svg.v3d-ic { width: 13px; height: 13px; }
.v3d-md .v3d-tail { height: 48px; }
.v3d-md .v3d-scroll { bottom: 11px; } .v3d-md .v3d-scroll-r { right: 8px; }

/* the hub (assessments-module.tsx): the pills (Stack spacing 2, pb 4), the list (Stack spacing 2, the first row's hairline off) */
.v3d-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 16px; }
.v3d-alist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.v3d-alist > li:first-child > .v3d-sum { border-top: none; }
.v3d-ic-fm { width: 24px; height: 24px; }
/* the Overview tab (materiality-matrix-module.tsx): the success Message, then the matrix and the legend side by side from lg */
.v3d-ov { display: flex; flex-direction: column; overflow: auto; }
.v3d-msg { display: grid; grid-template-columns: 1fr max-content; align-items: center; gap: 8px; min-width: min(500px, 100%); padding: 12px 24px; border: 1px dashed var(--fn-success); border-radius: 4px; background: transparent; }
.v3d-msg-c { display: flex; align-items: center; gap: 8px; }
.v3d-msg-stack { display: flex; flex-direction: column; }
.v3d-msg-a { display: flex; flex-direction: row; gap: 8px; height: 16px; margin-left: auto; }
.v3d-ov-row { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 24px; }
@media (min-width: 1280px) { .v3d-ov-row { flex-direction: row; } }
.v3d-card-t { position: absolute; top: 16px; left: 28px; }
.v3d-mxe { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 760px; height: 760px; border-radius: 8px; border: 1px solid var(--solar-800); background: var(--solar-500); }
.v3d-mxe-in { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 420px; }
.v3d-mx-svg { display: block; }
/* materiality-matrix-empty-state.tsx: the illustration sits inline in a Box (a div) on the page's body1 line (CssBaseline:
   16/20 in the SemiBold face), so the box is the svg plus the line's descent (about 4.5 px), as the product lays it out */
.v3d-mx-box { font-family: var(--ff-product-semibold); font-size: 16px; line-height: 20px; }
.v3d-mx-box > .v3d-mx-svg { display: inline; vertical-align: baseline; }
.v3d-mx-bg { fill: var(--white); }
.v3d-mx-dash { stroke: var(--solar-700); stroke-dasharray: 2 2; fill: none; }
.v3d-mx-line { stroke: var(--solar-700); fill: none; }
.v3d-btnrow { display: flex; align-items: center; justify-content: center; gap: 8px; }
.v3d-pg { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 760px; padding: 64px; border-radius: 8px; border: 1px solid var(--solar-800); }
@media (min-width: 431px) { .v3d-pg { width: 100%; } }
@media (min-width: 1280px) { .v3d-pg { width: 400px; } }
.v3d-pg-in { display: flex; flex-direction: column; gap: 8px; width: 250px; padding-top: 32px; }
.v3d-pg-row { display: flex; align-items: center; }
.v3d-pg-dot { flex: 0 0 auto; width: 10px; height: 10px; margin-right: 12px; border-radius: 50%; }
.v3d-pg-n { flex: 0 0 auto; width: 30px; }
.v3d-pg-l { margin-left: 4px; }
.v3d-pg-act { display: flex; flex-direction: column; gap: 8px; padding-top: 32px; }

/* the issues page: the MSCI block (MsciInsightPanel: solar 500, the page gutter, a container for the card grids) */
.v3d-msci { container-type: inline-size; padding: 32px; background: var(--solar-500); }
.v3d-msci-h { display: flex; flex-direction: row; gap: 8px; margin-bottom: 12px; }
.v3d-ocard { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; width: 100%; min-width: 0; height: fit-content; margin: 41px 0 24px; padding: 24px; overflow: hidden; border: 1px solid var(--divider); border-radius: 8px; background: var(--white); }
.v3d-mgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@container (min-width: 700px) { .v3d-ocard, .v3d-mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1200px) { .v3d-ocard { grid-template-columns: repeat(4, minmax(0, 1fr)); } .v3d-mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v3d-os { display: flex; flex-direction: column; min-width: 0; }
.v3d-os-hr { width: 100%; height: 0; margin: 6px 0 24px; border: 0; border-bottom: 1px solid var(--divider); }
.v3d-os-b { display: flex; flex-direction: column; align-items: center; }
.v3d-os-stack { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.v3d-os-stack.v3d-os-dist { gap: 24px; } /* msci-rating-charts.tsx Stack gap 5 */
.v3d-os-copy { max-width: 225px; }
.v3d-ring { position: relative; display: block; aspect-ratio: 1 / 1; flex-shrink: 0; }
.v3d-ring svg { display: block; width: 100%; height: 100%; }
.v3d-ring-220 { width: 220px; height: 220px; }
.v3d-ring-70 { width: 70px; height: 70px; }
.v3d-ring-c { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--text-base); }
.v3d-ring-70 .v3d-ring-c { flex-direction: row; align-items: flex-start; }
.v3d-score { display: flex; align-items: flex-start; justify-content: center; }
.v3d-score-d { align-self: flex-end; }
.v3d-score-l { display: inline-block; width: 150px; color: var(--text-medium); }
.v3d-letter { display: flex; align-items: center; justify-content: center; width: 220px; height: 220px; border-radius: 50%; background: var(--green-600); }
.v3d-letter-in { display: flex; align-items: center; justify-content: center; width: 196px; height: 196px; border-radius: 50%; background: var(--green-100); color: var(--text-base); }
.v3d-dist { display: flex; flex-direction: column; width: 100%; max-width: 300px; min-width: 0; height: 220px; }
.v3d-dist-plot { flex: 1; border-bottom: 1px solid var(--divider); }
.v3d-dist-legend { display: flex; justify-content: center; gap: 16px; padding-top: 8px; }
.v3d-dist-legend i { display: inline-block; width: 12px; height: 12px; margin-right: 4px; border-radius: 50%; vertical-align: -2px; }
.v3d-msci-lead { margin-bottom: 24px; }
/* MsciIssuesInsightCard (styles.ts card: padding 12 16, the hairline, radius 8): the ring and the title (button type, 40ch,
   30ch below a 1280 px page), the 345 px body; TableWrapper (the grey 400 rule, the caption title in grey 700, the chevron) */
.v3d-mcard { width: 100%; min-width: 0; height: fit-content; padding: 12px 16px; overflow: hidden; border: 1px solid var(--divider); border-radius: 8px; background: var(--white); }
.v3d-mcard-h { display: flex; align-items: center; }
.v3d-mcard-t { width: 30ch; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3d-mcard-b { height: 345px; overflow-x: hidden; overflow-y: auto; }
.v3d-mt-h { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--grey-400); }
.v3d-mt-sub .v3d-mt-h { padding: 4px 0; }
.v3d-mt-hl { display: flex; align-items: flex-end; min-width: 0; }
.v3d-mt-hl > .v3d-loz { align-self: center; } /* msci-insight-prelim-list.tsx: the lozenges' sx alignSelf center */
.v3d-mt-title { margin-left: 4px; color: var(--grey-700); text-align: left; }
/* comparison-table.tsx in the NDS Table (border-collapse, every row's grey 400 rule, the cells' own borders off): the head cells
   padding 16 8 (the issue's pl 4, the weight's pr 0), their caption uppercase in grey 700; the body cells padding 12 8 on the
   TableCell's 16/20 line (weight 350, -0.32 px), the issue cell pl 4, inline-block with nowrap and ellipsis and a 5 px right
   margin (ISSUE_CELL_SX: so the issue keeps its full width and the weight column gives way), the caption inside inline with
   its 8 px top padding (issueText); the weight cell 120 wide, pr 8: the % 45 wide with 4 px after it, the bar (LinearProgress,
   4 px, grey 100, radius 50) taking the rest, at least 20 */
table.v3d-mt { width: 100%; max-width: 100%; margin: 0; border: none; border-collapse: collapse; border-spacing: 0; table-layout: auto; }
.v3d-mt th, .v3d-mt td { border: none; text-align: left; font-weight: 400; vertical-align: middle; }
.v3d-mt thead tr, .v3d-mt tbody tr.v3d-mt-row { border-bottom: 1px solid var(--grey-400); }
.v3d-mt th { padding: 16px 8px; font-family: var(--ff-product-regular); font-size: 12px; line-height: 16px; font-weight: 350; letter-spacing: -0.24px; }
.v3d-mt th .t-caption { color: var(--grey-700); text-transform: uppercase; }
.v3d-mt th.v3d-mt-ih { padding-left: 4px; }
.v3d-mt th.v3d-mt-wh { width: 120px; padding-right: 0; }
.v3d-mt td { padding: 12px 8px; font-family: var(--ff-product-regular); font-size: 16px; line-height: 20px; font-weight: 350; letter-spacing: -0.32px; color: var(--text-base); }
.v3d-mt td.v3d-mt-ic { display: inline-block; padding-left: 4px; margin-right: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3d-mt td.v3d-mt-wc { width: 120px; padding-right: 8px; }
.v3d-mt-issue { padding-top: 8px; color: var(--grey-700); white-space: nowrap; }
.v3d-mt-w { display: flex; align-items: center; }
.v3d-mt-pct { width: 45px; margin-right: 4px; color: var(--grey-700); }
.v3d-bar { flex: 1; min-width: 20px; height: 4px; overflow: hidden; border-radius: 50px; background: var(--grey-100); }
.v3d-bar > span { display: block; height: 100%; border-radius: 50px; }
/* the governance row's sub-issues (NestedTable: the wrapper cell p 0, pl 4; each row a block with the grey 400 rule; the cells 12 8) */
.v3d-mt td.v3d-mt-nw { padding: 0 0 0 4px; }
table.v3d-mt-nested { width: 100%; margin: 0; border: none; border-collapse: collapse; }
.v3d-mt-nested tr { display: block; border-bottom: 1px solid var(--grey-400); }
.v3d-mt-nested td { padding: 12px 8px; }
.v3d-mt-subi { color: var(--grey-700); }
/* moderate-priority-table.tsx: Box mb 2 overflow hidden round a small Table, each row the grey 400 rule */
.v3d-mt-modw { margin-bottom: 8px; overflow: hidden; }
.v3d-mt-mod tbody tr { overflow: hidden; }
.v3d-msci-f { display: flex; align-items: center; justify-content: flex-end; margin-top: 8px; }
.v3d-msci-f .t-caption { margin-right: 4px; }
.v3d-msci-logo { width: 45px; height: 12px; font-family: var(--ff-product-semibold); font-size: 12px; line-height: 12px; letter-spacing: 1px; color: var(--text-base); }
/* the list (issues-list.tsx: Stack gap 4, the hairline above it when the MSCI block shows; the bar pt 3, the collapse toggle
   pinned right with a 12 px margin) and the card (an Accordion level 1, white, the rows level 3) */
.v3d-list { display: flex; flex-direction: column; gap: 16px; position: relative; }
.v3d-msci:not([hidden]) + .v3d-list { border-top: 1px solid var(--divider); }
.v3d-list-t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v3d-list-d { max-width: 856px; }
.v3d-list-bar { display: flex; flex-direction: row; align-items: center; padding-top: 12px; }
.v3d-collapse-all { margin-left: auto; margin-right: 12px; }
.v3d-ilist { list-style: none; padding: 0; display: flex; flex-direction: column; }
.v3d-issue { background: var(--white); }
.v3d-menu-wrap { position: relative; }
.v3d-menu { position: absolute; right: 0; top: 100%; z-index: 6; min-width: 200px; max-width: 260px; margin-top: 4px; padding: 12px; border-radius: 4px; background: var(--white); box-shadow: inset 0 0 0 1px var(--solar-700); }
.v3d-menu-h { min-height: 40px; padding: 12px 8px; color: var(--text-medium); }
.v3d-menu-div { height: 0; margin: 10px 0 5px; border: 0; border-top: 1px solid var(--solar-700); } /* Menu addDividers */
.v3d-mi { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; border: none; border-radius: 4px; background: transparent; color: var(--text-base); text-align: left; cursor: pointer; }
.v3d-mi svg { width: 20px; height: 20px; }
.v3d-mi:hover:not([disabled]), .v3d-mi:focus-visible { background: var(--solar-600); }
.v3d-mi[disabled] { color: var(--text-disabled); cursor: default; }

/* the impact page (materiality-impact): the insights band (solar 500, the gutter, the hairline under it), the three cards
   (the severity matrix's empty state 800 x 650 with 64 px padding from a 768 px page, the Results summary and the Tasks card
   at 400), the Tabs (Large) and their panel, the Negative and Positive tables (DetailAccordion) with Sheila's empty states */
.v3d-band { background: var(--solar-500); border-bottom: 1px solid var(--divider); }
.v3d-intro-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.v3d-ins { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 24px; margin-top: 24px; }
.v3d-ins-m { flex: 0 0 auto; max-width: 100%; overflow-x: auto; }
.v3d-ins-m > *, .v3d-ins-s > *, .v3d-ins-t > * { height: 100%; }
.v3d-ins-s { flex: 0 0 400px; min-width: 400px; max-width: 400px; }
.v3d-ins-t { flex: 0 0 400px; min-width: 400px; max-width: 400px; min-height: 320px; display: flex; flex-direction: column; }
.v3d-ins-t > * { flex-grow: 1; }
.v3d-sm .v3d-ins-s, .v3d-sm .v3d-ins-t { flex-basis: 100%; min-width: 0; }
.v3d-sev { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 800px; height: 650px; padding: 64px; border-radius: 4px; border: 1px solid var(--solar-700); background: var(--white); }
.v3d-md .v3d-sev { width: 100%; height: auto; padding: 16px; }
.v3d-im-svg { display: block; width: 200px; height: 200px; }
.v3d-im-bg { fill: var(--white); stroke: var(--solar-700); }
.v3d-im-dash { stroke: var(--v3d-im-grid); stroke-dasharray: 2 2; fill: none; }
.v3d-es { display: flex; flex-direction: column; align-items: center; gap: 24px; width: max-content; max-width: 100%; margin: 0 auto; background: var(--white); }
.v3d-es-420 { width: 420px; }
.v3d-md .v3d-es-420 { width: auto; }
.v3d-es-t { max-width: 460px; }
.v3d-es-cta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.v3d-es-av { width: 84px; height: 84px; display: block; }
.v3d-isum { padding: 24px; border-radius: 2px; border: 1px solid var(--solar-700); background: var(--white); width: 400px; }
.v3d-sm .v3d-isum { width: 100%; }
.v3d-isum-t { margin-bottom: 16px; }
.v3d-isum-band { display: grid; place-content: center; min-height: 100px; margin-bottom: 12px; background: var(--solar-500); }
.v3d-isum-band p { margin-bottom: 12px; }
.v3d-srs { display: flex; flex-direction: column; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.v3d-srs > * + * { border-top: 1px solid var(--divider); }
.v3d-sr { display: grid; grid-template-columns: 3fr 7fr; padding: 12px 0; }
.v3d-sr-v { display: flex; flex-direction: row; gap: 4px; }
.v3d-sr-ic { flex-shrink: 0; }
.v3d-sr-ic svg { width: 13px; height: 13px; }
.v3d-isum-f { display: inline-block; margin-top: 12px; color: var(--text-light); }
.v3d-tcard { display: flex; flex-direction: column; height: 100%; padding: 24px; border: 1px solid var(--divider); border-radius: 4px; background: var(--solar-50); }
.v3d-tcard-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--divider); }
.v3d-tcard-hl { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1; }
.v3d-tcard-hr { display: flex; align-items: center; gap: 8px; }
.v3d-tcard-e { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; flex: 1; width: 100%; text-align: center; }
.v3d-tabs-wrap { margin: 24px 0 32px; padding: 0 32px; }
.v3d-md .v3d-tabs-wrap { padding: 0 24px; } .v3d-sm .v3d-tabs-wrap { padding: 0 12px; }
.v3d-tabs { position: relative; z-index: 1; display: flex; gap: 8px; margin-bottom: -1px; overflow-x: auto; }
.v3d-tab { position: relative; display: flex; align-items: center; justify-content: space-between; width: max-content; min-width: 90px; min-height: 40px; padding: 8px 12px; border: none; border-radius: 4px 4px 0 0; background: var(--solar-500); color: var(--text-medium); text-align: left; cursor: pointer; }
.v3d-tab:hover { color: var(--text-base); }
.v3d-tab::after { content: ''; position: absolute; left: 0; bottom: 0.5px; width: 100%; height: 0.5px; background: var(--solar-700); }
.v3d-tab.v3d-tab-on { background: var(--white); color: var(--text-base); border: 1px solid var(--solar-700); border-bottom: 1px solid var(--white); }
.v3d-tab.v3d-tab-on::after { bottom: -2px; background: var(--white); }
.v3d-tabpanel { min-width: 100%; padding: 24px; border: 1px solid var(--solar-700); border-radius: 4px; border-top-left-radius: 0; background: var(--white); }
.v3d-im-filters { margin-bottom: 12px; }
.v3d-dacc { border: 1px solid var(--divider); border-radius: 4px; background: var(--white); }
.v3d-dacc + .v3d-dacc { margin-top: 24px; }
/* DetailAccordion (level 1): the summary padding 16, min-height 56, the grid 24 px | minmax(0, 1fr) with a 24 px column gap,
   the title and the tools in a sub-grid (minmax(0, 1fr) | max-content, gap 0 24); the details padding 8 16 16, a column gap 16 */
.v3d-dacc-h { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; column-gap: 24px; row-gap: 4px; min-height: 56px; padding: 16px; }
.v3d-dacc-main { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: 0 24px; min-width: 0; }
.v3d-dacc-main h3 { overflow: hidden; }
.v3d-dacc-chev { display: grid; place-content: center; width: 24px; height: 24px; }
.v3d-dacc-chev svg { width: 20px; height: 20px; }
.v3d-dacc-tools { display: flex; align-items: center; gap: 8px; margin: -9px -9px -9px 0; }
.v3d-dacc-b { display: flex; flex-direction: column; gap: 16px; padding: 8px 16px 16px; }
.v3d-dacc-b .v3d-es { margin: 64px auto; }
/* the AdvanceTable head above the empty state (impacts-table.tsx), as the FM page's tables draw theirs: 12/16 weight 350
   uppercase, letter-spacing -0.24 px, padding 16 8, the divider above and the earth 400 rule below; fixed layout, scrolling
   sideways inside the card; the 40 px kebab column pinned right */
.v3d-tc { position: relative; overflow: auto; background: var(--white); }
.v3d-itable { width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0; margin: 0; border: none; }
.v3d-th { padding: 16px 8px; border: none; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--earth-400); background: transparent; color: var(--text-medium); font-family: var(--ff-product-regular); font-size: 12px; line-height: 16px; font-weight: 350; letter-spacing: -0.24px; text-transform: uppercase; text-align: left; vertical-align: middle; }
.v3d-pin { position: sticky; right: 0; z-index: 1; background: var(--white); }
.v3d-pin::before { content: ''; position: absolute; top: 0; bottom: 0; left: -8px; width: 8px; background: linear-gradient(to left, rgba(0, 0, 0, 0.15), transparent); pointer-events: none; }
/* DrovaIcon (v2): the ring earth 500 on light, white on dark (the Add Impacts with Sheila button) */
.v3d-drova { display: block; flex-shrink: 0; }
.v3d-drova .v3d-drova-up { fill: var(--earth-500); }
.v3d-drova-dark .v3d-drova-up { fill: var(--white); }

/* lens (views-v3-lens.js, v3 slice 2): the Reporting viewer at #/report/<id> (tenant captures 21 to 23) and the full template
   strip. body.viewer hides the rail, Sheila's pane and the shell's top bar (the viewer draws its own). NDS tokens from index.html only. */
body.viewer #sidenav, body.viewer #sheila, body.viewer #topbar { display: none !important; }
body.viewer #content { padding: 0; overflow: hidden; background: var(--earth-50); }
.lv { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--earth-50); }
.lv-top { height: 60px; flex-shrink: 0; display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s3) 0 var(--s4); background: var(--solar-50); border-bottom: 1px solid var(--divider); }
.lv-back { width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); color: var(--text-base); }
.lv-back:hover { background: var(--solar-300); }
.lv-back svg.ic { width: 20px; height: 20px; }
.lv-title { flex: 1; min-width: 0; font-size: 16px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-base); }
.lv-edit { height: 36px; flex-shrink: 0; padding: 0 var(--s4); border: none; border-radius: 18px; background: var(--earth-500); color: var(--solar-50); font-size: 16px; line-height: 20px; white-space: nowrap; }
.lv-edit:hover { background: var(--earth-400); }
.lv-body { flex: 1; display: flex; min-height: 0; }
.lv-side { width: 184px; flex-shrink: 0; overflow-y: auto; background: var(--solar-50); border-right: 1px solid var(--divider); padding: var(--s3) var(--s2); }
.lv-side-list { display: flex; flex-direction: column; gap: var(--s1); }
.lv-thumb { display: flex; flex-direction: column; align-items: center; gap: var(--s1); width: 100%; padding: var(--s2); border: none; background: transparent; border-radius: var(--radius); color: var(--text-medium); }
.lv-thumb:hover { background: var(--solar-300); }
.lv-thumb-c { display: block; width: 138px; min-height: 96px; background: var(--solar-50); border: 1px solid var(--divider); }
.lv-thumb-c canvas { display: block; width: 136px; height: auto; }
.lv-thumb.on .lv-thumb-c { border-color: var(--fn-info); box-shadow: 0 0 0 1px var(--fn-info); }
.lv-thumb.on { color: var(--text-base); }
.lv-stage { flex: 1; position: relative; min-width: 0; display: flex; }
.lv-scroll { flex: 1; position: relative; overflow: auto; }
.lv-pages { display: block; width: max-content; min-width: 100%; padding: 108px var(--s5) var(--s6); }
.lv-page { position: relative; margin: 0 auto var(--s5); }
.lv-sheet { position: absolute; left: 50%; top: 50%; background: var(--solar-50); box-shadow: 0 1px 4px rgba(0,28,39,.16); transform: translate(-50%, -50%); transform-origin: center; overflow: hidden; }
.lv-sheet canvas { display: block; }
.lv-link { position: absolute; display: block; border-radius: 2px; }
.lv-link:hover, .lv-link:focus-visible { outline: 2px solid var(--fn-info); outline-offset: 1px; }
.lv-caveat-w { width: 0; min-width: 100%; } /* the caveat never widens the canvas (only the pages do) */
.lv-caveat { max-width: 640px; margin: 0 auto; text-align: center; color: var(--text-medium); }
.lv-loading { padding: var(--s6) 0; text-align: center; color: var(--text-medium); }
.lv-note { max-width: 520px; margin: 0 auto; padding: var(--s5); background: var(--solar-50); border: 1px solid var(--divider); border-radius: var(--radius); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.lv-note-t { font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 16px; line-height: 20px; }
.lv-note p { color: var(--text-medium); }
.lv-note-a { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text-base); text-decoration: underline; text-underline-offset: 3px; }
.lv-bar { position: absolute; z-index: 3; top: var(--s5); left: 50%; transform: translateX(-50%); display: flex; align-items: center; padding: var(--s2) var(--s3); background: var(--solar-50); border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0,28,39,.16); white-space: nowrap; max-width: calc(100% - var(--s6)); }
.lv-grp { display: inline-flex; align-items: center; }
.lv-bar-off .lv-nav { display: none; }
.lv-ib { width: 36px; height: 36px; flex-shrink: 0; border: none; background: transparent; border-radius: var(--radius); color: var(--text-medium); display: inline-flex; align-items: center; justify-content: center; }
.lv-ib svg.ic { width: 20px; height: 20px; }
.lv-ib:hover:not(:disabled) { background: var(--solar-300); color: var(--text-base); }
.lv-ib:disabled { color: var(--text-disabled); cursor: default; }
.lv-ib[aria-pressed="true"], .lv-ib[aria-expanded="true"] { background: var(--solar-500); color: var(--text-base); }
.lv-ib-dd { width: auto; padding: 0 var(--s1) 0 var(--s2); gap: 0; }
.lv-ib-dd svg.ic + svg.ic { width: 18px; height: 18px; }
.lv-sep { width: 1px; height: 24px; background: var(--divider); margin: 0 var(--s2); }
.lv-pin { width: 44px; height: 36px; border: 1px solid var(--earth-100); border-radius: var(--radius); text-align: center; font-size: 15px; line-height: 20px; background: var(--solar-50); }
.lv-pin:focus { outline: 2px solid var(--fn-info); outline-offset: 0; border-color: transparent; }
.lv-of { margin-left: var(--s2); font-size: 15px; line-height: 20px; color: var(--text-medium); }
.lv-dd { position: relative; display: inline-flex; }
.lv-zsel { height: 36px; min-width: 88px; margin: 0 var(--s1); display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 0 var(--s1) 0 var(--s3); border: none; border-bottom: 1px solid var(--earth-100); background: transparent; font-size: 15px; line-height: 20px; color: var(--text-base); }
.lv-zsel:hover { background: var(--solar-300); }
.lv-menu { position: absolute; z-index: 4; top: calc(100% + 6px); left: 0; min-width: 140px; padding: var(--s1) 0; background: var(--solar-50); border: 1px solid var(--divider); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,28,39,.16); display: flex; flex-direction: column; }
.lv-menu[hidden] { display: none; }
.lv-mi { display: block; width: 100%; padding: var(--s2) var(--s4); border: none; background: transparent; text-align: left; text-decoration: none; color: var(--text-base); font-size: 15px; line-height: 20px; white-space: nowrap; }
.lv-mi:hover { background: var(--solar-300); }
.lv-mi[aria-checked="true"] { background: var(--solar-500); }
.lv-rail { width: 48px; flex-shrink: 0; display: flex; justify-content: center; padding-top: var(--s3); background: var(--solar-50); border-left: 1px solid var(--divider); }
.lv-doclink { color: inherit; text-decoration: none; }
.lv-doclink:hover, .lv-doclink:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.lv-strip-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.lv-strip-h .v2-strip-t { margin-bottom: var(--s3); }
.lv-strip-nav { display: inline-flex; gap: var(--s1); margin-bottom: var(--s3); }
.lv-strip-all { scroll-behavior: smooth; scroll-snap-type: x proximity; }
.lv-strip-all .v2-tile { scroll-snap-align: start; }
@media (max-width: 1099px) { .lv-side { display: none; } .lv-rail { display: none; } }
@media (max-width: 767px) {
  .lv-top { padding: 0 var(--s4) 0 var(--s2); }
  .lv-bar { top: auto; bottom: var(--s4); padding: var(--s1) var(--s2); } /* phones: the page bar sits at the bottom, clear of the viewer's top bar */
  .lv-bar .lv-sep, #lv-rotate, #lv-zoomOut, #lv-zoomIn, #lv-first, #lv-last, #lv-sidebar, #lv-print { display: none; }
  .lv-pages { padding: var(--s4) var(--s4) 96px; }
}
@media print {
  body.viewer #sidenav, body.viewer #sheila, body.viewer #topbar, body.viewer .lv-top, body.viewer .lv-side, body.viewer .lv-bar, body.viewer .lv-rail, body.viewer .lv-caveat,
  body.viewer .tour, body.viewer #guide, body.viewer .explore-toast, body.viewer .explore-notice, body.viewer .toast, body.viewer .walk-hint, body.viewer #modal,
  body.viewer .explore-nudge, body.viewer .tour-list, body.viewer #checklist, body.viewer #checklist-panel, body.viewer .wt-success, body.viewer .wt-ovl { display: none !important; } /* v4.10: the nudge and the tour menu never print with the report; v5.0: nor the checklist, the Success toast or an overlay; v5.2: nor the guide card */
  body.viewer, body.viewer .shell, body.viewer .main, body.viewer .work, body.viewer #content, body.viewer .lv, body.viewer .lv-body, body.viewer .lv-stage, body.viewer .lv-scroll { display: block !important; height: auto !important; overflow: visible !important; background: none !important; }
  body.viewer .lv-pages { padding: 0; width: auto; }
  body.viewer .lv-page { margin: 0 auto; break-after: page; }
  body.viewer .lv-sheet { box-shadow: none; }
}

/* v3.2 (28 Oct 2026): a Reporting tile generating (data-soft-delay): the thumbnail dims behind a spinner, the tile ignores
   clicks until Sheila answers; the sample's ASRS template is the one that generates for real. */
.v2-tile { position: relative; }
.v2-tile-art { position: relative; overflow: hidden; } /* a long fallback name stays under the thumbnail instead of spilling below it */
.v2-tile-busy { display: none; position: absolute; inset: 0; border-radius: 2px; background: rgba(255, 255, 255, 0.55); }
.v2-tile-busy::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid var(--earth-500); border-right-color: transparent; animation: v2-tile-spin 0.8s linear infinite; }
.v2-tile.is-processing { pointer-events: none; }
.v2-tile.is-processing .v2-tile-busy { display: block; }
@keyframes v2-tile-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .v2-tile-busy::after { animation: none; border-right-color: var(--earth-500); opacity: 0.6; } }
/* The product's template thumbnail over the tone art (the art and its name stay underneath as the fallback). */
.v2-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; display: block; }

/* ---------- v5.0 (spec v4/spec/v5.0-four-stops.md sections 4.4 and 7.3) ---------- */
/* Stop 3: the Sheila AI suggestions panel, over the right of the page (an in-content overlay, views-v3-compliance.js) */
.sg-panel { position: relative; width: 480px; max-width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--solar-50); color: var(--text-base); box-shadow: -12px 0 32px rgba(0,28,39,.2); }
.sg-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--divider); }
.sg-t { display: inline-flex; align-items: center; gap: var(--s2); font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 18px; line-height: 24px; }
.sg-t .ic { width: 20px; height: 20px; fill: var(--purple-700); }
.sg-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.sg-when { color: var(--text-light); }
.sg-req { font-size: 14px; line-height: 20px; }
.sg-sec { border: 1px solid var(--divider); border-radius: var(--radius); overflow: hidden; }
.sg-sec-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--bg-sheila-tint-50); border-bottom: 1px solid var(--divider); }
.sg-sec-t { font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 15px; line-height: 20px; }
.sg-addall { display: inline-flex; align-items: center; gap: var(--s2); height: 30px; padding: 0 var(--s3); border: 1px solid var(--earth-500); border-radius: 15px; background: var(--earth-500); color: var(--solar-50); font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; }
.sg-addall.sg-is-added, .sg-addall:disabled { background: var(--green-50); border-color: var(--fn-success); color: var(--ft-success); cursor: default; }
.sg-spin { display: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; box-sizing: border-box; }
.sg-addall.is-busy .sg-spin { display: inline-block; animation: v2-tile-spin .8s linear infinite; }
.sg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); border-bottom: 1px solid var(--divider); }
.sg-row:last-child { border-bottom: 0; }
.sg-exp { display: flex; align-items: flex-start; gap: var(--s1); border: 0; background: transparent; padding: var(--s1) 0; text-align: left; font: inherit; font-size: 14px; line-height: 20px; color: var(--text-base); cursor: pointer; }
.sg-exp .ic { width: 18px; height: 18px; margin-top: 1px; transition: transform .15s ease; }
.sg-exp[aria-expanded="true"] .ic { transform: rotate(90deg); }
.sg-exp:focus-visible, .sg-add:focus-visible, .sg-addall:focus-visible { outline: 2px solid var(--earth-500); outline-offset: 2px; }
.sg-add { height: 28px; padding: 0 var(--s3); border: 1px solid var(--earth-500); border-radius: 14px; background: var(--solar-50); color: var(--text-base); font: inherit; font-size: 13px; cursor: pointer; }
.sg-chip .ic { width: 14px; height: 14px; margin-right: 4px; }
.sg-more { grid-column: 1 / -1; padding: 0 0 var(--s2) 22px; font-size: 13px; line-height: 19px; color: var(--text-medium); }
.sg-more[hidden] { display: none; }
.sg-p + .sg-p { margin-top: var(--s2); }
.sg-rl { margin-top: var(--s2); color: var(--text-light); }
.sg-foot { padding: var(--s3) var(--s5); border-top: 1px solid var(--divider); }
.sg-foot .v2-btn-o { display: inline-flex; align-items: center; gap: var(--s2); height: 34px; font-size: 14px; }

/* Stop 4: the product's Unlock dialog on the locked Reports page */
.ul-box, .ul-dlg { max-width: 560px; }
.ul-b { padding: var(--s6) var(--s6) var(--s4); display: flex; flex-direction: column; gap: var(--s3); overflow-y: auto; min-height: 0; }
.ul-art { position: relative; width: 56px; height: 56px; border-radius: 12px; background: var(--bg-sheila-tint-50); display: flex; align-items: center; justify-content: center; margin-bottom: var(--s2); }
.ul-art > .ic { width: 30px; height: 30px; fill: var(--earth-500); }
.ul-spark { position: absolute; right: -6px; top: -6px; display: flex; }
.ul-spark .ic { width: 20px; height: 20px; fill: var(--dawn-500); }
.ul-t { font-family: 'RecklessNeue Regular', serif; font-size: 24px; line-height: 30px; color: var(--text-base); }
.ul-p { font-size: 15px; line-height: 22px; color: var(--text-medium); }
.ul-f { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s6); border-top: 1px solid var(--divider); flex-wrap: wrap; flex-shrink: 0; }
.ul-f .v2-btn-o, .ul-f .v2-btn-n { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); }
.ul-f .ic { width: 18px; height: 18px; }
#lens-empty { margin-top: var(--s3); }

@media (max-width: 767px) {
  .sg-panel { width: 100%; }
  .ul-b { padding: var(--s4); }
  .ul-f { padding: var(--s3) var(--s4); }
  .ul-f .grow { display: none; }
  .ul-f .v2-btn-o, .ul-f .v2-btn-n { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-addall.is-busy .sg-spin { animation: none; border-right-color: currentColor; opacity: .6; }
  .sg-exp .ic { transition: none; }
}

/* DmaTasksAccordion (dma-tasks-accordion.tsx), shared by the impact page and the FM page (views-v3-dma.js
   WT.views.dmaTasksAccordion): a DetailAccordion, size Compact (the summary padding 6 10, min-height 48; the details padding 10,
   top 2), level 1 (the title subtitle2, the 24 px thumb rotated -90deg while closed), the caption subtitle on its own row, the
   Actions (min-height 38, gap 8) holding the two tally InformationLozenges ($grey: grey 100; $red: red 100; no border; the tally
   end 16 px on solar 50, radius 10, padding 3 4, 10 px from the label, text medium); the body the TaskTable empty state
   (EmptyState default: width 100 %, 24 px above and below, a column gap 24; the title subtitle2 and the message body2, centred,
   max-width 460; the 200 px illustration). Self-contained: it renders outside the v3d pages too. */
.v3d-dta, .v3d-dta *, .v3d-dta *::before, .v3d-dta *::after { box-sizing: border-box; }
.v3d-dta { min-width: 0; border: 1px solid var(--divider); border-radius: 4px; background: var(--white); color: var(--text-base); }
.v3d-dta > summary.v3d-dta-sum { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; column-gap: 24px; row-gap: 4px; min-height: 48px; padding: 6px 10px; list-style: none; cursor: pointer; outline: none; }
.v3d-dta > summary.v3d-dta-sum::-webkit-details-marker { display: none; }
.v3d-dta > summary.v3d-dta-sum:focus-visible { box-shadow: inset 0 0 0 2px var(--earth-500); }
.v3d-dta-thumb { grid-column: 1; grid-row: 1; display: grid; place-content: center; width: 24px; height: 24px; border-radius: 50%; color: var(--text-base); rotate: -90deg; transition: rotate 0.2s ease-in-out; }
.v3d-dta[open] > summary > .v3d-dta-thumb { rotate: 0deg; }
.v3d-dta-thumb svg { display: block; width: 20px; height: 20px; fill: currentColor; }
.v3d-dta-sum:hover .v3d-dta-thumb { background: var(--solar-600); }
.v3d-dta-main { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; row-gap: 8px; min-width: 0; min-height: 38px; }
.v3d-dta-t { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--text-base); }
.v3d-dta-act { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.v3d-dta-sub { grid-column: 2; grid-row: 2; min-width: 0; color: var(--text-base); }
.v3d-lz-tally { padding: 4px 2px 4px 10px; border: none; color: var(--text-base); }
.v3d-lz-tally-grey { background: var(--grey-100); }
.v3d-lz-tally-red { background: var(--red-100); }
.v3d-lz-tend { display: grid; place-content: center; min-width: 16px; height: 16px; margin-left: 10px; padding: 3px 4px; border-radius: 10px; background: var(--solar-50); color: var(--text-medium); font-family: var(--ff-product-regular); font-size: 12px; line-height: 12px; }
.v3d-dta-det { display: flex; flex-direction: column; gap: 16px; padding: 2px 10px 10px; }
.v3d-dta-es { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; margin: 24px 0; background: var(--white); }
.v3d-dta-et { max-width: 460px; text-align: center; }
.v3d-es-img { display: block; flex-shrink: 0; width: 200px; height: 200px; }
.v3d-dta-cta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }

/* The right-hand details panel (NDS Properties, views-v3-dma.js rhspOpen): a layer over #content's visible box (top follows
   its scroll, as the in-content overlays do), clicks passing through it to the page; the panel 512 px (the screen less 16 px
   on a phone), the grid max-content | 1fr | 52 px, the solar 700 hairline on three sides, radius 4 0 0 4, white; the header
   solar 500 with padding 12 and the title row (1fr | max-content, gap 8) 24 px above the subtitle; the body padding 16; the
   actions right-aligned, gap 12, padding 16. MUI Drawer's slide-in is not drawn (the desktop pane freezes transitions). */
#content:has(> .v3d-layer) { overflow: hidden; }
.v3d-layer { position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 40; pointer-events: none; }
.v3d-rhsp { position: absolute; top: 0; right: 0; bottom: 0; display: grid; grid-template-rows: max-content minmax(0, 1fr); width: 512px; max-width: calc(100% - 16px); border: 1px solid var(--solar-700); border-right: none; border-radius: 4px 0 0 4px; background: var(--white); pointer-events: auto; text-align: left; }
.v3d-rhsp:has(> .v3d-rhsp-a) { grid-template-rows: max-content minmax(0, 1fr) 52px; }
.v3d-rhsp-h { padding: 12px; background: var(--solar-500); border-radius: 4px 0 0 0; }
.v3d-rhsp-title { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: 8px; margin-bottom: 24px; }
.v3d-rhsp-tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3d-rhsp-tools { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.v3d-rhsp-b { min-height: 0; padding: 16px; overflow: auto; }
.v3d-rhsp-a { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 16px; }
.v3d-rhsp-tabs { overflow: visible; }
.v3d-rhsp-tabs .v3d-tab { cursor: default; }
/* the panels' rows: Grid xs 3 | 8 (or 9) for the assessment (Stack spacing 2), xs 4 | 8 with the grey 200 rule above for the issue (Stack spacing 4) */
.v3d-rd { display: flex; flex-direction: column; gap: 8px; }
.v3d-rd.v3d-rd-16 { gap: 16px; }
.v3d-rd-row { display: flex; flex-wrap: nowrap; min-width: 0; }
.v3d-rd-rule { padding-top: 16px; border-top: 1px solid var(--grey-200); }
.v3d-rd-l { flex: 0 0 25%; max-width: 25%; min-width: 0; overflow-wrap: break-word; }
.v3d-rd-l4 { flex: 0 0 33.333%; max-width: 33.333%; }
.v3d-rd-v { min-width: 0; }
.v3d-rd-8 { flex: 0 0 66.667%; max-width: 66.667%; }
.v3d-rd-9 { flex: 0 0 75%; max-width: 75%; }
.v3d-rd-fw { width: fit-content; padding-bottom: 32px; }
.v3d-rd-paras { display: flex; flex-direction: column; gap: 16px; padding-bottom: 32px; }
.v3d-rd-pre { white-space: break-spaces; }
.v3d-rd-more { background: transparent; }