/* AASB S2 walkthrough v5.9 (4 Nov 2026): Lens ported from the product's source (spec data/funnel-reporting/walkthrough-aasb/v4/spec/
   v5.9-lens-fidelity.md; views-v3-lens.js's header names every source file). Loads after views-v3.css and restyles its v3 slice 2
   viewer rules (.lv-*) here without editing them; the Reporting page's own rules are .lr-*. Colours are the palette tokens (walk.css's
   v5.6 theme block), type the .t-* variants, spacing --sp-N (theme.spacing(N)). The page's region is #content (a container): the
   product's page gutter is 32 px, 24 px below md (768 on the page) and 12 px below sm (431), less #content's own 64 px padding. */

/* ---------- Reporting (#report-root) ---------- */
.lr, .lr *, .lr *::before, .lr *::after { box-sizing: border-box; }
.lr { --lr-gut: 32px; background: var(--white); color: var(--text-base); }
@container (max-width: 703.95px) { .lr { --lr-gut: 24px; } }
@container (max-width: 366.95px) { .lr { --lr-gut: 12px; } }
.lr p { margin: 0; }
.lr .lr-svg { display: block; width: 1em; height: 1em; flex-shrink: 0; fill: currentColor; }

/* report-template-library.tsx: the band ($solar 500, the divider under it, padding-y spacing(5) and the gutter, the title then the
   strip at gap 3); the strip a flex row at gap 6 that scrolls sideways. */
.lr-lib { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5) var(--lr-gut); background: var(--solar-500); border-bottom: 1px solid var(--divider); }
.lr-lib-h { display: flex; align-items: center; min-height: 20px; }
.lr-lib-t { color: var(--text-base); }
.lr-strip { display: flex; gap: var(--sp-6); width: 100%; max-width: 100%; overflow: auto; }
.lr-strip.lv-strip-all { scroll-behavior: smooth; scroll-snap-type: x proximity; }
/* The strip's arrows are the walkthrough's (the product scrolls the strip only): compact ghost IconButtons over the title row's
   right end, so the band keeps the product's geometry. */
.lr .lv-strip-nav { position: absolute; top: calc(var(--sp-5) - 2px); right: var(--lr-gut); display: inline-flex; gap: var(--sp-1); margin: 0; }
.lr .lr-ib { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--text-base); cursor: pointer; }
.lr .lr-ib .ic { width: 20px; height: 20px; fill: currentColor; }
.lr .lr-ib:hover, .lr .lr-ib:focus-visible { background: var(--solar-600); box-shadow: inset 0 0 0 1px var(--white); outline: none; }
.lr .lr-ib:active { background: var(--solar-700); box-shadow: none; }

/* slot/report-template-item.tsx: 183 px wide, the white 183 x 129 thumbnail container, gap 3, the two noWrap caption lines at gap 1
   (the name, then the type in $text.light); cursor pointer. The source's container has no radius. */
.lr .lr-tpl { flex: 0 0 183px; width: 183px; display: flex; flex-direction: column; gap: var(--sp-3); cursor: pointer; position: static; }
body.explore .lr .lr-tpl:hover .v2-tile-art { box-shadow: none; } /* views-v2.css's explore hover ring: the product has no tile hover */
.lr .lr-tpl:focus-visible { outline: 2px solid var(--earth-500); outline-offset: 2px; }
.lr .lr-tpl .v2-tile-art { position: relative; width: 183px; height: 129px; padding: 0; border-radius: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--white); box-shadow: none; }
/* The fallback art for a template with no thumbnail of its own (the pack's tone; the product would show its type's picture). */
.lr .lr-tpl .v2-tile-art > span:first-child { position: absolute; inset: 0; max-width: none; padding: var(--sp-3); font-family: var(--ff-product-regular); font-size: 16px; line-height: 20px; color: var(--white); }
.lr .lr-tpl .v2-tile-art.tone-teal > span:first-child { background: var(--teal-900); }
.lr .lr-tpl .v2-tile-art.tone-orange > span:first-child { background: var(--dawn-500); }
.lr .lr-tpl .v2-tile-art.tone-dark > span:first-child { background: var(--earth-500); }
.lr .lr-tpl .v2-tile-art.tone-navy > span:first-child { background: var(--sky-900); }
.lr .lr-tpl .v2-tile-art.tone-grey > span:first-child { background: var(--grey-200); color: var(--text-base); }
/* The product's tile is the thumbnail alone (the name is in the picture): the fallback text shows only when there is no image
   (or it failed to load and onerror removed it). */
.lr .lr-tpl .v2-tile-art:has(> .v2-tile-img) > span:first-child { display: none; }
.lr .lr-tpl .v2-tile-img { position: absolute; inset: 0; width: 183px; height: 129px; object-fit: fill; border-radius: 0; display: block; }
.lr .lr-tpl-txt { display: flex; flex-direction: column; gap: var(--sp-1); max-width: 100%; min-width: 0; }
.lr .lr-tpl-n, .lr .lr-tpl-k { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr .lr-tpl-n { color: var(--text-base); }
.lr .lr-tpl-k { color: var(--text-light); }
/* report-template-processing-overlay.tsx: the 183 x 129 overlay in $grey 500 at 0.8, the NDS Spinner centred. */
.lr .lr-tpl .v2-tile-busy { display: none; position: absolute; inset: 0; width: 183px; max-width: none; height: 129px; border-radius: 0; background: var(--grey-500); opacity: 0.8; place-content: center; }
.lr .lr-tpl .v2-tile-busy::after { content: none; }
.lr .lr-tpl.is-processing { pointer-events: none; cursor: default; }
.lr .lr-tpl.is-processing .v2-tile-busy { display: grid; }
.lr-spin { display: block; width: 13px; height: 13px; animation: lr-spin-rot 1.4s linear infinite; }
.lr-spin circle { stroke: var(--earth-500); stroke-dasharray: 80px, 200px; stroke-dashoffset: 0; animation: lr-spin-dash 1.4s ease-in-out infinite; }
@keyframes lr-spin-rot { 100% { transform: rotate(360deg); } }
@keyframes lr-spin-dash { 0% { stroke-dasharray: 1px, 200px; stroke-dashoffset: 0; } 50% { stroke-dasharray: 100px, 200px; stroke-dashoffset: -15px; } 100% { stroke-dasharray: 1px, 200px; stroke-dashoffset: -126px; } }
@media (prefers-reduced-motion: reduce) { .lr-spin, .lr-spin circle { animation-duration: 4s; } }

/* report-list.tsx: the drova-page-layout body, a Stack at gap 4 (the filters, then the table or the empty state). */
.lr-body { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--lr-gut); }
/* slots/report-table-filters.tsx: right-aligned at gap 2. The sample tag (the walkthrough's own) sits at the left of that row. */
.lr-filters { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); min-height: 20px; }
.lr-filters .lr-tag { margin: -2px auto -2px 0; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.lr-filters .lr-tag .sample-tag { display: block; height: 22px; line-height: 22px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* InputLozenge on BaseLozenge: 20 px (border-box), radius 10, padding 4 10 with InputLozenge's padding-right 2, $earth 50, $earth 500 text, the caption label (12/12, its line
   16, letter-spacing 0.03333em = 0.4 px), the end 16 px tall (padding 3 2, margin-left 10, $earth 400, the glyph 12 px); hover and focus $earth 100 with the end on
   $solar 50. */
.lr .lr-loz { display: inline-flex; align-items: center; height: 20px; width: max-content; min-width: 32px; max-width: 100%; padding: 4px 2px 4px 10px; margin: 0; border: none; border-radius: 10px; background: var(--earth-50); color: var(--earth-500); font-family: var(--ff-product-regular); font-size: 12px; line-height: 12px; cursor: pointer; outline: none; overflow: hidden; flex-shrink: 0; }
.lr .lr-loz-t { display: inline-block; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.03333em; }
.lr .lr-loz-end { display: grid; place-content: center; height: 16px; margin-left: 10px; padding: 3px 2px; border-radius: 10px; color: var(--earth-400); }
.lr .lr-loz-end .lr-svg { font-size: 12px; }
.lr .lr-loz:hover, .lr .lr-loz:active, .lr .lr-loz:focus, .lr .lr-loz:focus-visible, .lr .lr-loz[aria-expanded="true"] { background: var(--earth-100); }
.lr .lr-loz:hover .lr-loz-end, .lr .lr-loz:focus .lr-loz-end, .lr .lr-loz:focus-visible .lr-loz-end, .lr .lr-loz[aria-expanded="true"] .lr-loz-end { background: var(--solar-50); }
.lr-menu .h7-mi { font-family: var(--ff-product-regular); }
.h7-menu.lr-menu { min-width: 0; max-width: 260px; } /* NDS Menu: sized to its items, at most 260 px */

/* The NDS Table (report-table.tsx's columns: the title body1, the type, CreatedByCell 150, the date body2, the kebab 40). */
.lr-tw { min-width: 0; overflow-x: auto; }
.lr-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lr-table col.lr-c-type { width: 157px; }
.lr-table col.lr-c-by { width: 150px; }
.lr-table col.lr-c-date { width: 184px; }
.lr-table col.lr-c-act { width: 40px; }
.lr-table th { padding: var(--sp-4) var(--sp-2); text-align: left; font-family: var(--ff-product-regular); font-size: 12px; font-weight: 350; line-height: 16px; letter-spacing: -0.24px; text-transform: uppercase; color: var(--text-medium); background: transparent; border-bottom: 1px solid var(--earth-400); white-space: nowrap; }
.lr-table td { padding: var(--sp-3) var(--sp-2); font-family: var(--ff-product-regular); font-size: 16px; font-weight: 350; line-height: 20px; letter-spacing: -0.32px; color: var(--text-base); border-bottom: 1px solid var(--divider); vertical-align: middle; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lr-table tr.lr-row { cursor: pointer; }
.lr-table tr.lr-row:hover { background: var(--solar-600); }
.lr .lr-trunc { display: block; max-width: 95%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr .lv-doclink { color: inherit; text-decoration: none; }
.lr .lv-doclink:hover, .lr .lv-doclink:focus-visible { text-decoration: none; outline: none; }
.lr .lr-by { display: flex; align-items: center; gap: var(--sp-1); }
.lr .lr-dv { width: 16px; height: 16px; flex-shrink: 0; fill: var(--text-medium); }
.lr .lr-td-act { padding-left: 0; padding-right: 0; text-align: center; }
/* The kebab: IconButton (ghost_white) with MoreVertOutlined; in a body cell padding 2 with -2 px block margins. */
.lr .lr-kebab { display: flex; align-items: center; justify-content: center; padding: 2px; margin: -2px auto; border: none; border-radius: 50%; background: transparent; color: var(--text-base); font-size: 20px; cursor: pointer; outline: none; }
.lr .lr-kebab:hover, .lr .lr-kebab:focus, .lr .lr-kebab:focus-visible { background: var(--solar-600); box-shadow: inset 0 0 0 1px var(--white); }
.lr .lr-kebab:active, .lr .lr-kebab[aria-expanded="true"] { background: var(--solar-700); box-shadow: none; }

/* report-table-empty-state.tsx: a centred box, margin 6; the NDS EmptyState (a column at gap 5, max-content wide), the 200 px image,
   the subtitle2 title and the body2 message, both centred and at most 460 px. */
.lr-empty, #lens-empty.lr-empty { display: flex; justify-content: center; margin: var(--sp-6); }
.lr-es { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); width: max-content; max-width: 100%; background: var(--white); }
.lr-es-img { display: block; width: auto; height: 200px; font-size: 200px; flex-shrink: 0; }
.lr-es-t, .lr-es-m { max-width: 460px; text-align: center; color: var(--text-base); }
@media (max-width: 767px) { .lr-empty, #lens-empty.lr-empty { margin: var(--sp-5) 0; } }

/* ---------- the viewer (#lv-root) ---------- */
.lv .lr-svg { display: block; width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; }
/* modules/viewer/index.tsx in expand-wrapper (white): the 60 px bar, px 3, no rule under it; the back IconButton (ghost_white, 38 px,
   padding 9, the glyph 20 px); the body2 title at most 50 % wide, ellipsed; the Button at the right. */
.lv .lv-top { height: 60px; gap: 0; padding: 0 var(--sp-3); background: var(--white); border-bottom: none; }
.lv .lv-back { width: 38px; height: 38px; padding: 9px; border-radius: 50%; color: var(--text-base); }
.lv .lv-back:hover, .lv .lv-back:focus-visible { background: var(--solar-600); box-shadow: inset 0 0 0 1px var(--white); outline: none; }
.lv .lv-back:active { background: var(--solar-700); box-shadow: none; }
.lv .lv-title { flex: 0 1 auto; max-width: 50%; min-width: 0; color: var(--text-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv .lv-acts { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
/* NDS Button, primary, regular: 36 px, padding 6 16, radius 100, $earth 500 with white text, the button type (16/20 weight 500,
   0.02857em); hover and focus $earth 400; pressed $earth 500; disabled $earth 100. */
.lv .lv-edit { height: 36px; padding: 6px var(--sp-4); border: none; border-radius: 100px; background: var(--earth-500); color: var(--white); white-space: nowrap; cursor: pointer; }
.lv .lv-edit:hover, .lv .lv-edit:focus, .lv .lv-edit:focus-visible { background: var(--earth-400); outline: none; }
.lv .lv-edit:active { background: var(--earth-500); }
.lv .lv-edit:disabled { background: var(--earth-100); color: var(--white); }
/* report-viewer-container.tsx: the canvas $earth 50. */
.lv .lv-body, .lv .lv-stage, .lv .lv-scroll { background: var(--earth-50); }
/* The rail (Bold Reports' properties strip, from the capture): white, the cog at the far right, its top on the toolbar's. */
/* Bold's strip fill is #FAFAFA (the live product's computed value, as the toolbar's); the cog centred in its 48 px. */
.lv .lv-rail { width: 48px; justify-content: center; padding-top: 20px; background: rgb(250, 250, 250); border-left: 1px solid var(--divider); }
.lv .lv-cog { width: 27px; height: 30px; }
.lv .lv-cog .lr-svg { width: 16px; height: 16px; }
.lv .lv-cog { color: rgb(117, 117, 117); }

/* The Bold Reports toolbar (from the capture): radius 4, 50 x 679 px; 27 x 30 buttons with 14 px line
   glyphs ($text.medium; the hover and pressed fills are the product's Bold overrides: hovered, then pressed); the page box 43 x 30
   with "of N"; "100%" in an underlined 84 px select with its triangle; export with its triangle; 1 px dividers. Each item's left
   margin is its measured gap in the capture (left edges from the bar's: 8, 49, 90, 132, 175, 232, the divider 276, 283, 325, 368,
   468, 475, 510, 530, 590, 602, 644; 8 px after the last). */
/* Its fill and shadow are Bold's own (the live product's computed values, not palette steps): rgb(250, 250, 250) and
   rgba(0, 0, 0, 0.2) 0 2px 5px 0. */
.lv .lv-bar { height: 50px; padding: 0 var(--sp-2) 0 0; gap: 0; background: rgb(250, 250, 250); border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px 0; }
.lv .lv-grp { gap: 0; }
/* Bold Reports' own neutral greys, measured on the capture (a third-party control, so literals as the fill above): glyphs
   rgb(117, 117, 117), disabled rgb(190, 190, 190), the page box's border rgb(155, 155, 155) with its number in rgb(179, 179, 179),
   "of N" rgb(58, 58, 58), "100%" rgb(48, 48, 48) over its rgb(191, 191, 191) underline, the dividers rgb(241, 241, 241) 28 px tall.
   The hovered and pressed fills are the product's own overrides (bold-report-global-style.tsx: hovered, then pressed, a focused
   button pressed). */
.lv .lv-ib { width: 27px; height: 30px; padding: 0; border-radius: 2px; color: rgb(117, 117, 117); display: inline-flex; align-items: center; justify-content: center; }
.lv .lv-bar .lv-ib, .lv .lv-bar .lv-dd, .lv .lv-bar .lv-pgw, .lv .lv-bar .lv-of, .lv .lv-bar .lv-zsel { margin: 0; }
#lv-first { margin-left: 8px; }
#lv-prev, #lv-next, #lv-of { margin-left: 14px; }
#lv-last, #lv-zoomIn, #lv-print { margin-left: 15px; }
.lv .lv-bar .lv-pgw { margin-left: 16px; }
.lv .lv-bar #lv-zoomOut, .lv .lv-bar #lv-refresh { margin-left: 6px; }
.lv .lv-bar .lv-zsel { margin-left: 16px; }
#lv-sidebar { margin-left: 11px; }
.lv .lv-bar .lv-dd:has(#lv-export) { margin-left: 19px; }
.lv .lv-ib:hover:not(:disabled) { background: var(--fn-hovered); color: rgb(117, 117, 117); }
.lv .lv-ib:focus, .lv .lv-ib:focus-visible { background: var(--fn-pressed); outline: none; }
.lv .lv-ib:disabled, .lv .lv-ib:disabled:focus { color: rgb(190, 190, 190); background: transparent; }
.lv .lv-ib[aria-pressed="true"], .lv .lv-ib[aria-expanded="true"] { background: var(--fn-pressed); color: rgb(117, 117, 117); }
.lv .lv-g { display: block; width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.lv .lv-g.lv-g-lg { width: 19px; height: 19px; stroke-width: 1.03; } /* 1.4 px at 19 px on the 14-unit grid */
.lv .lv-g .lv-g-fill { fill: currentColor; stroke: none; }
.lv .lv-ib-dd { width: 40px; padding: 0 2px; gap: 0; justify-content: space-between; }
.lv .lv-g.lv-g-tri { width: 16px; height: 16px; } /* Bold's menu triangle: about 12 x 7 px of ink */
.lv .lv-pin { width: 43px; height: 30px; padding: 0 var(--sp-1); border: 1px solid rgb(155, 155, 155); border-radius: 4px; background: var(--white); text-align: center; font-family: var(--ff-product-regular); font-size: 12px; line-height: 16px; color: rgb(179, 179, 179); }
.lv .lv-pin:focus { outline: none; border-color: rgb(117, 117, 117); color: rgb(58, 58, 58); }
.lv .lv-of { width: 24px; font-family: var(--ff-product-regular); font-size: 12px; line-height: 16px; color: rgb(58, 58, 58); white-space: nowrap; }
.lv .lv-sep { width: 1px; height: 28px; margin: 0; background: rgb(241, 241, 241); flex-shrink: 0; }
.lv .lv-sep[data-sep="1"] { margin-left: 20px; }
.lv .lv-sep[data-sep="2"] { margin-left: 16px; }
.lv .lv-sep[data-sep="3"] { margin-left: 8px; }
.lv .lv-sep[data-sep="4"] { margin-left: 20px; }
.lv .lv-zsel { width: 84px; min-width: 84px; height: 30px; padding: 0 var(--sp-1) 0 var(--sp-3); gap: var(--sp-1); border: none; border-bottom: 1px solid rgb(191, 191, 191); border-radius: 0; background: transparent; font-family: var(--ff-product-regular); font-size: 12px; line-height: 16px; color: rgb(48, 48, 48); }
.lv .lv-zsel:hover { background: var(--fn-hovered); }
.lv .lv-zsel .lv-g-tri { color: rgb(117, 117, 117); }
.lv .lv-menu { border-color: var(--divider); border-radius: 4px; box-shadow: var(--shadow-2); }
.lv .lv-mi { font-family: var(--ff-product-regular); font-size: 12px; line-height: 16px; padding: var(--sp-2) var(--sp-4); }
.lv .lv-mi:hover { background: var(--fn-hovered); }
.lv .lv-mi[aria-checked="true"] { background: var(--fn-selected); }
/* The page sheets: white, 37 px under the toolbar (its top 20 px under the bar, 50 px tall: the product's first sheet at y 167),
   20 px apart; Bold's sheet shadow rgba(0, 0, 0, 0.22) 0 1px 2px 0. */
@media (min-width: 768px) {
  .lv .lv-bar { top: 20px; }
  .lv .lv-pages { padding: 107px var(--sp-5) var(--sp-5); }
  .lv .lv-page { margin-bottom: 20px; }
}
.lv .lv-sheet { background: var(--white); box-shadow: rgba(0, 0, 0, 0.22) 0 1px 2px 0; }
@media (max-width: 767px) {
  .lv .lv-bar { height: 44px; padding: 0 var(--sp-1); }
  .lv .lv-bar .lv-ib, .lv .lv-bar .lv-pgw, .lv .lv-bar .lv-of, .lv .lv-bar .lv-zsel, .lv .lv-bar .lv-dd, .lv .lv-bar .lv-sep { margin-left: var(--sp-1) !important; }
  #lv-refresh { display: none; }
  .lv .lv-acts .explore-cta { padding: 0 var(--sp-3); }
}
@media (max-width: 480px) {
  .lv .lv-title { max-width: none; flex: 1 1 auto; }
  .lv .lv-edit { padding: 6px var(--sp-3); }
}
/* modules/viewer/index.tsx: while the report loads, the NDS Spinner at the window's centre (the product's 100vh Stack; the box starts
   167 px down, under the bar and the canvas's top padding). */
.lv .lv-loading { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 334px); padding: 0; }
.lv .lv-loading .lr-spin { width: 13px; height: 13px; }