/* RunSure (views-v3-compliance.js), v5.8 (4 Nov 2026, spec data/funnel-reporting/walkthrough-aasb/v4/spec/v5.8-runsure-fidelity.md):
   the four RunSure pages as the product's source draws them. Values from the canonical UI repo (read-only): apps/compliance
   (components/layout/page-layout, presentation/insight-card, sheila-first-use-info-card, first-time-message, summary-card,
   grid-columns-card, table/requirement-table; modules/frameworks/components/framework-cards/framework-card.tsx), the control and
   task MFEs' insight cards and tables, libs/nds/src (StaticInsightCard, StaticCard, PieChart, BarChart, DetailAccordion, Tabs,
   TabPanel, Message, Lozenge, Button, IconButton, Table, DrovaIcon, GridColumnsLayout), libs/sdk FirstTimeBanner and
   libs/mui-themes/src/lib/drova (theme.ts, the palette, the breakpoints sm 431, md 768, lg 1280). Colours are walk.css's palette
   tokens; type is the .t-* classes (the product's faces). Every selector is new (rs-*), scoped to the RunSure pages, except the
   two hooks the pages share with views-v2.js: .v2p (the page root views-v2.js's filters, tabs and dismiss look for) and
   .v2-pagetag (the sample tag). */

.rs-page, .rs-page *, .rs-page *::before, .rs-page *::after { box-sizing: border-box; }
.rs-page { color: var(--text-base); background: var(--white); }
.rs-page [hidden] { display: none !important; }
.rs-page p, .rs-page h4, .rs-page h6, .rs-page ul { margin: 0; }
.rs-page .v2-pagetag { margin: 0 0 var(--sp-4); }
.rs-page .rs-fw-band .v2-pagetag { margin: 0; }
.rs-svg { display: block; flex-shrink: 0; width: 24px; height: 24px; fill: currentColor; }
.rs-svg16 { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; }

/* PageLayout: the heading band (solar 500, the divider under it) and the body, both on the page gutter (DROVA_PAGE_LAYOUT_STYLING:
   12, 24 from sm 431, 32 from lg 1280, on the viewport). A page with no heading (the framework page) drops the divider while its
   insights are hidden (Hide insights: views-v2.js sets body.v2-noins). */
.rs-band { background: var(--solar-500); border-bottom: 1px solid var(--divider); padding: var(--sp-3); }
.rs-body { background: var(--white); padding: var(--sp-3); }
@media (min-width: 431px) { .rs-band, .rs-body { padding: var(--sp-5); } }
@media (min-width: 1280px) { .rs-band, .rs-body { padding: var(--sp-6); } }
body.v2-noins .rs-ins { display: none; }
body.v2-noins .rs-no-head { border-bottom: none; }
/* The insights grid (GridColumnsLayout responsive page, gap 24): THREE_CARD_LAYOUT xs 1, sm 2, md 3; TWO_CARD_LAYOUT xs 1, sm 2,
   on the page's width (here #content's container less its 64 px of padding). Under a heading it sits 24 px below it. */
.rs-ins { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
.rs-has-head .rs-ins { margin-top: var(--sp-5); }
@container (min-width: 367px) { .rs-ins { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 704px) { .rs-ins:not(.rs-ins-two) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* StaticInsightCard on StaticCard: padding 24, white, the divider border, radius 4; the container a column with gap 16 and the
   compliance cards' 330 px floor; the header (min-height 24, the actions gap 16); the filter row centred; the empty veil (white at
   70%, the 132 px earth 500 circle, the body2 text 101 px wide in solar 50). */
.rs-ins-card { min-width: 0; padding: var(--sp-5); background: var(--solar-50); border: 1px solid var(--divider); border-radius: var(--radius); }
.rs-ins-c { position: relative; display: flex; flex-direction: column; gap: var(--sp-4); min-height: 330px; height: 100%; }
.rs-ins-h { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 24px; }
.rs-ins-a { display: flex; align-items: center; gap: var(--sp-4); }
.rs-ins-f { display: flex; justify-content: center; margin: 0 auto; height: fit-content; }
.rs-ins-veil { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: flex-end; background-color: #FFFFFFB3; }
.rs-ins-circ { display: flex; align-items: center; justify-content: center; width: 132px; height: 132px; border-radius: 50%; background: var(--earth-500); }
.rs-ins-circ span { max-width: 101px; text-align: center; color: var(--solar-50); }
/* PieChart size small (162 px square, the h2 tally and the caption label 120 px wide, both text medium, centred on the ring), the
   legend a column (row gap 4, column gap 16) of 12 px dots and captions, gap 16 under the chart. */
.rs-pie { display: flex; flex-direction: column; gap: var(--sp-4); }
.rs-pie-box { position: relative; width: 162px; height: 162px; margin: 0 auto; }
.rs-pie-svg { display: block; width: 162px; height: 162px; }
.rs-pie-lab { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.rs-pie-n { display: flex; align-items: start; justify-content: center; color: var(--text-medium); }
.rs-pie-l { display: inline-block; width: 120px; color: var(--text-medium); }
.rs-page ul.rs-leg { margin: auto 0 0; } /* above the page's margin reset: the legend pins to the card's foot (BarChart marginTop auto) */
.rs-leg { list-style: none; padding: 0; display: flex; flex-direction: column; flex-wrap: wrap; row-gap: var(--sp-1); column-gap: var(--sp-4); }
.rs-leg li { display: flex; flex-direction: row; align-items: center; gap: var(--sp-2); }
.rs-leg i { display: block; flex-shrink: 0; width: 12px; height: 12px; border-radius: 6px; }
/* BarChart: grows to the card's foot; the bars area 146 px with 16 px headroom, the 30 px bars 12 px apart with the 4 px top
   corners, the bold caption value above a bar (at the foot of an empty one); the legend pinned to the bottom. */
.rs-bars { display: flex; flex-direction: column; gap: var(--sp-4); flex-grow: 1; width: 100%; }
.rs-bars-area { display: flex; justify-content: center; align-items: flex-end; gap: var(--sp-3); height: 146px; margin: var(--sp-4) auto 0; }
.rs-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 30px; height: 100%; }
.rs-bar-b { position: relative; width: 100%; border-top-left-radius: 4px; border-top-right-radius: 4px; }
.rs-bar-v { position: absolute; bottom: 0; right: 50%; transform: translate(50%, 0); font-weight: 700; white-space: nowrap; }
.rs-bar-on .rs-bar-v { top: -16px; }

/* Lozenges (BaseLozenge: 20 px, radius 10, padding 4 10, 12/12, the caption label on a 16 px line). */
.rs-loz { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; height: 20px; width: max-content; min-width: 32px; max-width: 100%; padding: 4px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text-medium); font-family: var(--ff-product-regular); font-size: 12px; line-height: 12px; font-weight: 400; white-space: nowrap; text-decoration: none; vertical-align: middle; }
button.rs-loz { margin: 0; cursor: pointer; font-family: var(--ff-product-regular); font-size: 12px; line-height: 12px; }
.rs-loz-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; }
/* SimpleLozenge: the colour's 50 with its 700 border (grey: 100 and 600; earth: 50 and 300), text base; the status dropdown's
   interactive hover the colour's 100 (grey 200). */
.rs-sl { color: var(--text-base); }
.rs-sl-grey { background: var(--grey-100); border-color: var(--grey-600); }
.rs-sl-red { background: var(--red-50); border-color: var(--red-700); }
.rs-sl-sky { background: var(--sky-50); border-color: var(--sky-700); }
.rs-sl-green { background: var(--green-50); border-color: var(--green-700); }
.rs-sl-yellow { background: var(--yellow-50); border-color: var(--yellow-700); }
.rs-sl-purple { background: var(--purple-50); border-color: var(--purple-700); }
.rs-sl-earth { background: var(--earth-50); border-color: var(--earth-300); }
.rs-sl-i { cursor: pointer; outline: none; z-index: 2; }
.rs-sl-i.rs-sl-grey:hover, .rs-sl-i.rs-sl-grey:focus-visible { background: var(--grey-200); }
.rs-sl-i.rs-sl-red:hover, .rs-sl-i.rs-sl-red:focus-visible { background: var(--red-100); }
.rs-sl-i.rs-sl-sky:hover, .rs-sl-i.rs-sl-sky:focus-visible { background: var(--sky-100); }
.rs-sl-i.rs-sl-green:hover, .rs-sl-i.rs-sl-green:focus-visible { background: var(--green-100); }
.rs-sl-i.rs-sl-yellow:hover, .rs-sl-i.rs-sl-yellow:focus-visible { background: var(--yellow-100); }
.rs-sl-i.rs-sl-purple:hover, .rs-sl-i.rs-sl-purple:focus-visible { background: var(--purple-100); }
/* InformationLozenge (no border; the colour's 100): the framework's green "Active". InteractiveLozenge $ghost: an owner's name. */
.rs-inf-green { border: none; background: var(--green-100); color: var(--text-base); justify-content: center; }
.rs-il-ghost { border: none; background: transparent; color: var(--text-base); cursor: pointer; outline: none; z-index: 2; }
.rs-il-ghost:hover, .rs-il-ghost:focus-visible { box-shadow: inset 0 0 0 1px var(--earth-200); }
/* InputLozenge (the chart pickers and the clause filters): earth 50, text earth 500, padding-right 2; the end chevron 12 px in
   earth 400 on a 16 px pill (padding 3 2, 10 px from the label); hover earth 100 with the pill in solar 50. */
.rs-inl { border: none; background: var(--earth-50); color: var(--earth-500); padding-right: 2px; outline: none; }
.rs-inl .rs-loz-t { color: var(--earth-500); }
.rs-inl:hover, .rs-inl:focus-visible, .rs-inl[aria-expanded="true"] { background: var(--earth-100); }
.rs-inl-end { display: grid; place-content: center; height: 16px; margin-left: 10px; padding: 3px 2px; border-radius: 10px; color: var(--earth-400); }
.rs-inl:hover .rs-inl-end, .rs-inl:focus-visible .rs-inl-end { background: var(--solar-50); }
.rs-inl-end .rs-svg { width: 12px; height: 12px; }

/* NDS Button (theme.ts MuiButton): 36 px, min-width 100, padding 6 16, radius 100, the button type 16/20 weight 500 0.02857em;
   primary earth 500 (hover earth 400), secondary white with the 1 px earth 500 ring (hover solar 600), ghost_white white and
   underlined (hover and focus solar 600 with the white inset ring, pressed solar 700). Compact: 20 px, padding 0 12, radius 10,
   12/16, the icon 13 px. The start icon MUI's 0 8 0 -4. */
.rs-btn { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; height: 36px; min-width: 100px; padding: 6px 16px; margin: 0; 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; outline: none; }
.rs-btn-l { display: inline-block; }
.rs-btn-si { display: inherit; margin: 0 8px 0 -4px; }
.rs-btn-si .rs-svg { width: 20px; height: 20px; }
.rs-btn-primary { background: var(--earth-500); color: var(--white); }
.rs-btn-primary:hover, .rs-btn-primary:focus-visible { background: var(--earth-400); }
.rs-btn-secondary { background: var(--white); color: var(--earth-500); box-shadow: inset 0 0 0 1px var(--earth-500); }
.rs-btn-secondary:hover, .rs-btn-secondary:focus-visible { background: var(--solar-600); }
.rs-btn-ghost { background: var(--white); color: var(--earth-500); text-decoration: underline; }
.rs-btn-ghost:hover, .rs-btn-ghost:focus-visible { background: var(--solar-600); box-shadow: inset 0 0 0 1px var(--white); }
.rs-btn-ghost:active { background: var(--solar-700); box-shadow: none; }
.rs-btn-bare { background: transparent; }
.rs-btn-c { width: max-content; min-width: 0; height: 20px; padding: 0 var(--sp-3); border-radius: 10px; font-size: 12px; line-height: 16px; }
.rs-btn-c .rs-btn-si .rs-svg { width: 13px; height: 13px; }
/* IconButton (theme.ts: 9 px padding round a 20 px glyph; hover solar 600 with the white inset ring); p 0 for the insight cards'
   actions; padding 2 with the -2 margin inside a table cell; the section headers' -7 px lift. */
.rs-ibtn { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; padding: 9px; margin: 0; border: none; border-radius: 50%; background: transparent; color: var(--text-base); cursor: pointer; outline: none; }
.rs-ibtn .rs-svg { width: 20px; height: 20px; }
.rs-ibtn:hover, .rs-ibtn:focus-visible { background: var(--solar-600); box-shadow: inset 0 0 0 1px var(--white); }
.rs-ibtn:active { background: var(--solar-700); box-shadow: none; }
.rs-ibtn-0 { width: auto; height: auto; padding: 0; }
.rs-ibtn-cell, .rs-ibtn-row { width: 24px; height: 24px; padding: 2px; margin-block: -2px; }
.rs-ibtn-up { margin-top: -7px; }

/* The framework-scoped header actions in the top bar: ghost_white regular Buttons (TimelineOutlined "Hide insights",
   DescriptionOutlined "Reports"). Below 1100 px the icons stay and the labels go (the title attribute names them); phones hide
   them, as the top bar did before. */
.rs-tbtn { position: relative; 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; }
.rs-tbtn .rs-svg { width: 20px; height: 20px; margin: 0 8px 0 -4px; }
.rs-tbtn:hover, .rs-tbtn:focus-visible { background: var(--solar-600); box-shadow: inset 0 0 0 1px var(--white); outline: none; }
.rs-tbtn:active { background: var(--solar-700); box-shadow: none; }
@media (max-width: 1099px) {
  .topbar .rs-tbtn { min-width: 0; padding: 6px 8px; }
  .topbar .rs-tbtn .rs-svg { margin: 0; }
  .topbar .rs-tbtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 767px) { .topbar .rs-tbtn { display: none; } }

/* NDS Tabs (MUI Tab: min-width 90, min-height 40, padding 8 12, radius 4 4 0 0, solar 500 in text medium, hover text base, the
   0.5 px solar 700 rule; selected white with the solar 700 border and a white foot) and TabPanel (white, padding 24, the solar 700
   border, radius 4 with the top left square). */
.rs-tabs { position: relative; z-index: 1; display: flex; gap: 8px; margin-bottom: -1px; overflow-x: auto; overflow-y: hidden; padding-bottom: 1px; }
.rs-tab { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-shrink: 0; width: max-content; min-width: 90px; min-height: 40px; padding: 8px 12px; margin: 0; border: none; border-radius: 4px 4px 0 0; background: var(--solar-500); color: var(--text-medium); text-align: left; cursor: pointer; }
.rs-tab .t-body2 { color: inherit; }
.rs-tab:hover { color: var(--text-base); }
.rs-tab::after { content: ''; position: absolute; left: 0; bottom: 0.5px; width: 100%; height: 0.5px; background: var(--solar-700); }
.rs-tab.on { background: var(--white); color: var(--text-base); border: 1px solid var(--solar-700); border-bottom: 1px solid var(--white); }
.rs-tab.on::after { bottom: -2px; background: var(--white); }
.rs-tab:focus-visible { outline: 2px solid var(--earth-500); outline-offset: -2px; }
.rs-tabpanels { width: 100%; margin-top: -1px; }
.rs-tabpanel { min-width: 100%; padding: var(--sp-5); background: var(--white); border: 1px solid var(--solar-700); border-radius: var(--radius); border-top-left-radius: 0; }

/* SheilaFirstUseInfoCard on FirstTimeBanner: a row (padding 0 8 24 24, the divider border, radius 4) of the content (a wrapping
   row, gap 16, 24 px from the top: the 65 px DrovaIcon, then the subtitle2 title over the body2 lines, gap 16) and the close
   column (8 px from the top). Dawn 50 for the framework card, green 50 with a 132 px floor for the clause's. */
.rs-sfc { display: flex; flex-direction: row; align-items: stretch; padding: 0 var(--sp-2) var(--sp-5) var(--sp-5); border: 1px solid var(--divider); border-radius: var(--radius); }
.rs-sfc-dawn { background: var(--dawn-50); }
.rs-sfc-green { background: var(--green-50); min-height: 132px; transition: all 0.3s ease-in-out; }
.rs-sfc-c { display: flex; flex-direction: row; flex-wrap: wrap; flex-grow: 1; gap: var(--sp-4); padding-top: var(--sp-5); min-width: 0; }
.rs-sfc-img { display: block; }
.rs-sfc-txt { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.rs-sfc-txt > .t-subtitle2 { color: var(--text-base); }
.rs-sfc-row { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; padding-right: var(--sp-2); }
.rs-sfc-desc { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.rs-sfc-desc > p { color: var(--text-base); }
.rs-sfc-a { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding: var(--sp-2) 0 0; }
/* DrovaIcon (v2): the upper half earth 500, the stars the dawn to purple gradient (dawn 500 without it); disabled text disabled. */
.rs-dv { display: block; flex-shrink: 0; width: 24px; height: 24px; }
.rs-dv .rs-dv-up { fill: var(--earth-500); }
.rs-dv .rs-dv-stars { fill: var(--dawn-500); }
.rs-dv-off .rs-dv-up, .rs-dv-off .rs-dv-stars { fill: var(--text-disabled); }
.rs-dv-65 { width: 65px; height: 65px; }

/* Message variant information (FirstTimeMessage): a grid of the content and the action, padding 12 16 with the icon, the 1 px dashed
   functional info border, radius 4; the InfoOutlined icon in sky 700, the caption text; the Dismiss link caption bold, underlined. */
.rs-msg { display: grid; grid-template-columns: 1fr max-content; align-items: center; gap: var(--sp-2); min-width: min(500px, 100%); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); background: transparent; }
.rs-msg-info { border: 1px dashed var(--fn-info); }
.rs-msg-c { display: flex; align-items: center; gap: var(--sp-2); }
.rs-msg-i { display: flex; align-items: center; color: var(--sky-700); }
.rs-msg-a { display: flex; flex-direction: row; gap: var(--sp-2); height: 16px; margin-left: auto; }
.rs-link { color: var(--text-base); text-decoration: underline; cursor: pointer; }
.rs-link:hover { color: var(--earth-400); }
.rs-bold { font-weight: 700; }

/* The clauses tab (a column, gap 24): the message, the filter row (the InputLozenges gap 8; the collapse IconButton p 0 at the
   right), the clause list (gap 24 between the sections). */
.rs-stack24 { display: flex; flex-direction: column; gap: var(--sp-5); }
.rs-frow { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.rs-fl { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); }
.rs-secs { display: flex; flex-direction: column; gap: var(--sp-5); }

/* DetailAccordion: the bordered card (the divider, radius 4, white). The summary: a grid of the thumb column and the main content
   (padding 16 and column gap 24 at level 1, 12 and 12 below; the thumb 24 px, 20 px at level 3), min-height 56, the solar 600
   hover; an empty level 2 (a clause) has no thumb and the 36 px inset. The main content: the title (subtitle2 at level 1, body1
   below) and the lozenges (gap 8); the subtitle row under them (row gap 4). The details: padding 8 16 16, a column with gap 16,
   inset 16 under level 1, 48 under level 2, 44 under level 3. The thumb is KeyboardArrowDownOutlined, -90deg while closed. */
.rs-acc { position: relative; display: block; margin: 0; padding: 0; background: var(--white); border: 1px solid var(--divider); border-radius: var(--radius); }
.rs-sum { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; column-gap: var(--sp-5); min-height: 56px; padding: var(--sp-4); list-style: none; cursor: pointer; background: transparent; border-radius: var(--radius); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.rs-sum::-webkit-details-marker { display: none; }
.rs-sum::marker { content: none; }
details.rs-acc > .rs-sum:hover, .rs-click:hover > .rs-sum { background: var(--solar-600); }
details.rs-acc[open] > .rs-sum { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rs-sum:focus-visible { outline: 2px solid var(--earth-500); outline-offset: -2px; }
.rs-l2 > .rs-sum, .rs-l3 > .rs-sum { padding: var(--sp-3); column-gap: var(--sp-3); }
.rs-l3 > .rs-sum { grid-template-columns: 20px minmax(0, 1fr); }
.rs-l2.rs-empty > .rs-sum { grid-template-columns: minmax(0, 1fr); padding-left: calc(var(--sp-3) + 36px); }
.rs-has-sub { row-gap: var(--sp-1); }
.rs-thumb { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: var(--text-base); rotate: -90deg; transition: ease-in-out 0.2s; }
.rs-thumb .rs-svg { width: 20px; height: 20px; }
.rs-l3 > .rs-sum > .rs-thumb { width: 20px; height: 20px; }
.rs-l3 > .rs-sum > .rs-thumb .rs-svg { width: 16px; height: 16px; }
details.rs-acc[open] > .rs-sum > .rs-thumb, .rs-thumb-static { rotate: 0deg; }
.rs-sum > .rs-thumb { align-self: center; }
.rs-has-sub > .rs-thumb { align-self: start; margin-top: -2px; }
.rs-main { display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: var(--sp-5); align-items: center; min-width: 0; }
.rs-atw { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-2); min-width: 0; }
.rs-title { display: block; color: var(--text-base); overflow-wrap: anywhere; }
.rs-tail { position: relative; z-index: 2; display: flex; flex-direction: row; align-items: center; gap: var(--sp-2); }
.rs-subw { grid-column: 2 / -1; min-width: 0; }
.rs-l2.rs-empty > .rs-sum > .rs-subw { grid-column: 1 / -1; }
.rs-subs { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.rs-det { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-2) var(--sp-4) var(--sp-4); }
.rs-l1 > .rs-det { padding-left: var(--sp-4); }
.rs-l2 > .rs-det { padding-left: 48px; }
.rs-l3 > .rs-det { padding-left: 44px; }
.rs-stretch { position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }
.rs-stretch:focus-visible { outline: 2px solid var(--earth-500); outline-offset: -2px; }
/* A narrow page (the replica's rule): the lozenges go under the title, as the source's measured lozengesInline does. */
@container (max-width: 640px) {
  .rs-main { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-2); }
  .rs-tail { flex-wrap: wrap; }
  .rs-l2 > .rs-det, .rs-l3 > .rs-det { padding-left: var(--sp-4); }
  .rs-l2.rs-empty > .rs-sum { padding-left: var(--sp-3); }
  .rs-det { padding-left: var(--sp-2) !important; padding-right: var(--sp-2); }
}

/* SummaryCard on GridColumnsCard: padding 24, radius 4, the divider border, white; the title row (wrapping, gap 8, 12 px above the
   Divider): the EntityTypeLozenge and the h6, the actions and Read more (gap 8); the body2 text 16 px under the Divider, two lines. */
.rs-sum-card { padding: var(--sp-5); background: var(--white); border: 1px solid var(--divider); border-radius: var(--radius); }
.rs-sum-t { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.rs-sum-tl, .rs-sum-a { display: flex; flex-direction: row; align-items: center; gap: var(--sp-2); min-width: 0; }
.rs-sum-a { flex-wrap: wrap; }
.rs-sum-h { margin: 0; color: var(--text-base); }
.rs-hr { display: block; height: 0; margin: 0; border: none; border-bottom: 1px solid var(--divider); }
.rs-sum-c { margin-top: var(--sp-4); }
.rs-open .rs-clamp2 { -webkit-line-clamp: unset; display: block; }

/* The NDS Table: head cells 12/16 weight 350, -0.24 px, uppercase, text medium, padding 16 8, the earth 400 rule; body cells 16/20
   weight 350, -0.32 px, text base, padding 12 8, the divider rule; a row hovers solar 600. AdvanceTable scrolls sideways when narrow. */
.rs-tw { width: 100%; overflow-x: auto; }
.rs-table { width: 100%; border-collapse: collapse; border-spacing: 0; font-family: var(--ff-product-regular); }
.rs-table th { padding: var(--sp-4) var(--sp-2); text-align: left; vertical-align: middle; font-family: var(--ff-product-regular); font-size: 12px; line-height: 16px; font-weight: 350; letter-spacing: -0.24px; text-transform: uppercase; color: var(--text-medium); background: transparent; border-bottom: 1px solid var(--earth-400); }
.rs-table td { padding: var(--sp-3) var(--sp-2); text-align: left; vertical-align: middle; font-family: var(--ff-product-regular); font-size: 16px; line-height: 20px; font-weight: 350; letter-spacing: -0.32px; color: var(--text-base); border-bottom: 1px solid var(--divider); }
.rs-table tbody tr { transition: background-color 150ms; }
.rs-table tbody tr:hover > td { background: var(--solar-600); }
.rs-tr-click { cursor: pointer; }
.rs-code { white-space: nowrap; }
.rs-c-no { width: 70px; }
.rs-c-sh { width: 75px; padding: 0 !important; }
.rs-c-act { width: 40px; text-align: right !important; }
.rs-c-act > .rs-ibtn { margin-left: auto; }
.rs-c-title { width: 400px; min-width: 200px; }
/* AdvanceTable: a column without a width gets size and minSize 150 (TanStack's default); the evidence title 600, the control
   actions 24. */
.rs-c150 { width: 150px; min-width: 150px; }
.rs-c600 { width: 600px; }
.rs-table th.rs-c24 { width: 24px; }
.rs-t-ctrl th.rs-c-title { width: auto; min-width: 400px; } /* the 150 px columns keep their size; the title takes the room left */
/* The clause's Sheila card and the requirements table: 8 px apart (the capture's 29 px from the card to the head's cap height). */
.rs-sfc-green + .rs-tw { margin-top: var(--sp-2); }
/* The walk (the replica's rule): the pane leaves the page about 650 px, so the walk's tables give up the fixed 150 px columns and
   the title's single line, and the spotlit REQ224 row and the four controls show whole, lozenges included. */
body.walking .rs-t-req th, body.walking .rs-t-ctrl th { width: auto; min-width: 0; }
body.walking .rs-t-req .rs-tcell, body.walking .rs-c-req .rs-tcell { min-width: 140px; max-width: none; }
body.walking .rs-t-req .rs-ell { white-space: normal; overflow: visible; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
body.walking .rs-t-req .rs-c-sh { width: 32px; }
body.walking .rs-t-req .rs-shmark { padding: 0 var(--sp-1); }
body.walking .rs-t-ctrl .rs-c-title { width: auto; min-width: 140px; }
body.walking .rs-t-req td, body.walking .rs-t-ctrl td, body.walking .rs-t-req th, body.walking .rs-t-ctrl th { padding-left: 6px; padding-right: 6px; }
.rs-tcell { display: flex; flex-direction: column; max-width: 680px; min-width: 0; }
.rs-c-req .rs-tcell { min-width: 220px; }
.rs-ell { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-base); }
.rs-shmark { display: flex; align-items: center; padding: 0 var(--sp-3) 0 var(--sp-5); }
.rs-evname { display: inline-flex; align-items: center; gap: var(--sp-1); }
.rs-overdue { color: var(--text-error); }

/* A tab's section header (subtitle2 with the add IconButton lifted 7 px; the body2 line 4 px under it; 8 px to the table). */
.rs-sec-h { margin-bottom: var(--sp-2); }
.rs-sec-hr { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); }
/* The tables' empty states (NDS EmptyState as TableEmptyState and the evidence block use it): the title and the message centred. */
.rs-es { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-5) 0; text-align: center; }
.rs-es > p { max-width: 460px; color: var(--text-base); }
.rs-es-b { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-2); }

/* FrameworkCard (active): the 1 px solar 900 border, radius 4, the solar 600 hover; the content (solar 500, padding 24 12 24 24,
   min-height 186, radius 4); the h4 title in dawn 500; the foot (padding 24, gap 8, min-height 80; a column below sm): the h6 bold
   % and the body2 "compliant" in text light over the 4 px LinearProgress (dawn 50, the bar dawn 500); the button half the width,
   at the end. The grid: GridColumnsLayout responsive self (its own width): 1 column, 2 from md 768, 3 from lg 1280, gap 24. */
.rs-fw-gridw { container-type: inline-size; }
.rs-fw-grid { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@container (min-width: 768px) { .rs-fw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1280px) { .rs-fw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rs-fwcard { min-width: 0; border: 1px solid var(--solar-900); border-radius: var(--radius); cursor: pointer; transition: all 0.3s ease-in-out; }
.rs-fwcard:hover { background-color: var(--solar-600); }
.rs-fw-content { display: flex; flex-direction: column; min-height: 186px; padding: var(--sp-5) var(--sp-3) var(--sp-5) var(--sp-5); background: var(--solar-500); border-radius: var(--radius); transition: all 0.3s ease-in-out; }
.rs-fw-top { display: flex; flex-direction: row; justify-content: space-between; }
.rs-fw-mid { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-1); flex-grow: 1; }
.rs-fw-titles { display: flex; flex-direction: column; gap: var(--sp-1); }
/* frameworks-page.tsx: Body gap 5 with the band cancelling the body's top padding, so the grid sits 24 px under the band. */
.rs-page .rs-fw-body { padding-top: var(--sp-5); }
.rs-fw-title { margin: 0; color: var(--dawn-500); }
.rs-fw-desc { color: inherit; }
.rs-fw-about { color: var(--text-medium); margin-top: var(--sp-2); }
.rs-fw-foot { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 80px; padding: var(--sp-5); }
@media (min-width: 431px) { .rs-fw-foot { flex-direction: row; } }
.rs-fw-pct { width: 100%; }
@media (min-width: 431px) { .rs-fw-pct { width: auto; } }
.rs-fw-pn { display: inline; font-weight: 700; }
.rs-fw-pct .t-body2 { display: inline; }
.rs-light { color: var(--text-light); }
.rs-medium { color: var(--text-medium); }
.rs-lp { position: relative; display: block; height: 4px; overflow: hidden; background-color: var(--dawn-50); }
.rs-lp i { display: block; height: 100%; background-color: var(--dawn-500); }
.rs-fw-btnw { display: flex; align-items: center; justify-content: flex-end; width: 100%; }
@media (min-width: 431px) { .rs-fw-btnw { width: 50%; } }

/* utilities */
.rs-grow { flex-grow: 1; }
.rs-mt4 { margin-top: var(--sp-1) !important; }
.rs-mt16 { margin-top: var(--sp-4); }
.rs-mb16 { margin-bottom: var(--sp-4); }
.rs-mb24 { margin-bottom: var(--sp-5); }
.rs-nowrap { white-space: nowrap; }
.rs-nowrap1 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-clamp2, .rs-clamp3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.rs-clamp2 { -webkit-line-clamp: 2; }
.rs-clamp3 { -webkit-line-clamp: 3; }