/* NDS tokens: workforces/design-ops/skills/design-rules/19-nds-tokens-snapshot.md.
       v2 (Sheila walk): forked from /walkthrough-aasb/index.html. Sheila's panel styles live in sheila.css. No new colours: every value below is an existing token.
       Weight is carried by the font family. No font-weight overrides anywhere. */
    @font-face { font-family: 'NeutrifPro Regular'; src: url('/walkthroughs/aasb-s2/fonts/NeutrifPro-Regular.woff2') format('woff2'); font-display: swap; }
    @font-face { font-family: 'NeutrifPro SemiBold'; src: url('/walkthroughs/aasb-s2/fonts/NeutrifPro-SemiBold.woff2') format('woff2'); font-display: swap; }
    @font-face { font-family: 'RecklessNeue Regular'; src: url('/walkthroughs/aasb-s2/fonts/RecklessNeue-Regular.woff2') format('woff2'); font-display: swap; }

    :root {
      --text-base: #001c27; --text-medium: #3F4E66; --text-light: #7A8C97; --text-disabled: #A0AEB7; --text-feature: #ff3a00;
      --divider: #D6D8D3; --fn-info: #01a6e6; --fn-error: #e6004a; --fn-warning: #e66702; --fn-success: #01e648;
      --ft-error: #e6004a; --ft-warning: #bf2b00; --ft-success: #017d2a; --ft-info: #017299;
      --bg-sheila: linear-gradient(122deg, #FF4F01 22.4%, #A026FF 71.9%);
      --bg-sheila-10: linear-gradient(122deg, #FF4F011A 22.4%, #A026FF1A 71.9%);
      --bg-sheila-tint-50: linear-gradient(122deg, #FFE6D8 22.4%, #F5E0FF 71.9%);
      --solar-50: #FFFFFF; --solar-100: #F9F9F8; --solar-300: #F3F4F6; --solar-500: #F6F7F0; --solar-600: #E9EAE1; --solar-700: #D6D8D3;
      --earth-50: #E1E6E8; --earth-100: #BCC8D0; --earth-400: #3F4E66; --earth-500: #001C27;
      --purple-50: #F5E0FF; --purple-400: #A026FF; --purple-700: #6900BF;
      --dawn-50: #FFE6D8; --dawn-100: #FFCAA6; --dawn-500: #FF4F01; --dawn-700: #BF3C01;
      --green-50: #E0FFE7; --orange-50: #FFE7D9; --red-50: #FFE0E9; --sky-50: #E0F8FF;
      --s0: 2px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 64px;
      --green-100: #B3FFD1; --grey-100: #F1F1F1; --grey-200: #E5E1E1; --grey-400: #D5D2D2; --grey-500: #C4C2C2; --grey-600: #8E9089;
      --pink-50: #FCE4E9; --pink-700: #BF0076; --yellow-50: #FFFCE0; --yellow-500: #FFE000; --yellow-600: #E6CC01; --yellow-900: #806900;
      --teal-900: #017D63; --sky-900: #015980;
      --radius: 4px; --nav-w: 212px;
    }
    #wt-root { height: 100%; background: var(--solar-50); color: var(--text-base); font-family: 'NeutrifPro Regular', sans-serif; font-size: 16px; line-height: 20px; -webkit-font-smoothing: antialiased; }
    :where(#wt-root) button { font: inherit; color: inherit; cursor: pointer; }
    :where(#wt-root) input { font: inherit; color: inherit; }
    :where(#wt-root) a { color: inherit; }

    /* Type stack */
    .h2 { font-family: 'RecklessNeue Regular', serif; font-size: 40px; line-height: 44px; }
    .h4 { font-family: 'RecklessNeue Regular', serif; font-size: 32px; line-height: 36px; }
    .h6 { font-family: 'NeutrifPro Regular', sans-serif; font-size: 24px; line-height: 28px; }
    .subtitle1 { font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 20px; line-height: 24px; }
    .subtitle2 { font-family: 'NeutrifPro Regular', sans-serif; font-size: 20px; line-height: 24px; }
    .body1, :where(#wt-root) strong, :where(#wt-root) b { font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 16px; line-height: 20px; }
    .body2 { font-family: 'NeutrifPro Regular', sans-serif; font-size: 16px; line-height: 20px; }
    .caption { font-family: 'NeutrifPro Regular', sans-serif; font-size: 12px; line-height: 16px; }
    .caption-sb { font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 12px; line-height: 16px; }
    .overline { font-family: 'NeutrifPro Regular', sans-serif; font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: .04em; }
    .medium { color: var(--text-medium); } .light { color: var(--text-light); } .feature { color: var(--text-feature); }
    .sheila-text { background: var(--bg-sheila); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
    :where(#wt-root) svg.ic { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; }
    :where(#wt-root) svg.ic.lg { width: 24px; height: 24px; }
    :where(#wt-root) svg.ic.stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    /* Shell */
    .shell { display: flex; height: 100vh; overflow: hidden; }
    :where(#wt-root) nav.side { width: var(--nav-w); flex-shrink: 0; background: var(--solar-50); border-right: 1px solid var(--divider); display: flex; flex-direction: column; }
    .nav-top { height: 60px; padding: 0 var(--s4); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--divider); }
    .pmark { display: inline-flex; align-items: center; gap: .05em; font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 18px; letter-spacing: .04em; line-height: 1; color: var(--earth-500); text-decoration: none; }
    .pmark svg { width: .92em; height: .92em; display: block; }
    /* On #content, not .shell: an animated .shell would make a stacking context above #sheila (spec section 4). */
    body.arrive #content { animation: arrive .7s ease both; }
    @keyframes arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) { body.arrive #content { animation: none; } }
    .modules { padding: var(--s2) var(--s2); flex: 1; overflow-y: auto; }
    .ni { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--radius); text-decoration: none; color: var(--text-base); margin-bottom: var(--s0); min-height: 44px; }
    .ni:hover { background: var(--solar-100); }
    .ni.active { background: var(--solar-500); }
    .ni svg { width: 18px; height: 18px; color: var(--text-medium); flex-shrink: 0; }
    .ni.active svg { color: var(--dawn-500); }
    .ni-name { display: flex; align-items: center; gap: var(--s2); }
    .ndiv { height: 1px; background: var(--divider); margin: var(--s3) var(--s2); }
    /* v5.2 (spec v5.2-guide-card.md section 1): the rail's bottom group, the user block and the replay row are gone; .avatar stays
       (the guide card's initial uses it, inverted on the dark card in entry.css). */
    .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--earth-500); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .avatar.sm { width: 24px; height: 24px; }

    .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
    .topbar { height: 60px; border-bottom: 1px solid var(--divider); display: flex; align-items: center; padding: 0 var(--s6); gap: var(--s3); flex-shrink: 0; background: var(--solar-50); }
    .topbar .title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .topbar .actions { display: flex; align-items: center; gap: var(--s2); }
    .link-btn { display: inline-flex; align-items: center; gap: var(--s2); height: 36px; padding: 0 var(--s3); border: none; background: transparent; border-radius: var(--radius); text-decoration: underline; text-underline-offset: 3px; }
    .link-btn:hover { background: var(--solar-300); }
    .icon-btn { width: 36px; height: 36px; border-radius: var(--radius); border: none; background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--text-medium); }
    .icon-btn:hover { background: var(--solar-300); }
    .sheila-pill { display: inline-flex; align-items: center; gap: var(--s2); height: 36px; padding: 0 var(--s4); border-radius: 18px; border: 1px solid var(--purple-400); background: var(--bg-sheila-tint-50); color: var(--text-base); }
    .sheila-pill svg { width: 16px; height: 16px; }

    .work { flex: 1; display: flex; overflow: hidden; min-height: 0; }
    .content { flex: 1; overflow-y: auto; padding: var(--s6); min-width: 0; container-type: inline-size; }
    .content.home { background: var(--solar-500); }

    /* Home */
    .home-hero { max-width: 980px; margin: 0 auto var(--s5); display: flex; align-items: flex-start; gap: var(--s3); }
    .home-hero p { color: var(--text-medium); margin-top: var(--s1); }
    .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s5); max-width: 980px; margin: 0 auto; }
    .cards .span2 { grid-column: span 2; }
    @media (max-width: 900px) { .cards .span2 { grid-column: auto; } }
    .card { background: var(--solar-50); border: 1px solid var(--divider); border-radius: var(--radius); padding: var(--s4); min-width: 0; }
    .card.sheila { border-color: var(--purple-400); }
    .card .overline { color: var(--text-light); }
    .card .h6 { margin-top: var(--s1); }
    .card p { color: var(--text-medium); margin-top: var(--s2); }
    .card ul, .card ol { padding-left: 18px; margin-top: var(--s2); color: var(--text-base); }
    .card li { margin-top: var(--s1); }
    .card .act { margin-top: var(--s3); display: flex; gap: var(--s2); flex-wrap: wrap; }
    .chiprow { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
    .chip { display: inline-flex; align-items: center; gap: var(--s1); height: 24px; padding: 0 var(--s2); border-radius: 12px; background: var(--solar-300); color: var(--text-base); white-space: nowrap; }
    .chip.ok { background: var(--green-50); color: var(--ft-success); }
    .chip.warn { background: var(--orange-50); color: var(--ft-warning); }
    .chip.info { background: var(--sky-50); color: var(--ft-info); }
    .chip.err { background: var(--red-50); color: var(--ft-error); }
    .chip.review { background: var(--purple-50); color: var(--purple-700); }
    .chip.link { text-decoration: none; }
    .chip.link:hover { background: var(--solar-600); }
    .goal-stat { display: flex; align-items: baseline; gap: var(--s2); margin-top: var(--s4); }
    .goal-stat .big { font-family: 'RecklessNeue Regular', serif; font-size: 32px; line-height: 36px; }
    .mini-steps { list-style: none; padding: 0 !important; }
    .mini-steps li { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s2) 0; border-top: 1px solid var(--divider); margin-top: 0 !important; }
    .mini-steps li:first-child { border-top: none; }
    .mini-steps .grow { flex: 1; min-width: 0; }
    .pstat { padding: var(--s2) 0; border-top: 1px solid var(--divider); }
    .pstat:first-of-type { border-top: none; }
    .pstat .row1 { display: flex; justify-content: space-between; gap: var(--s2); }

    /* Pillars + stacked status bar */
    .pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s6); }
    @media (max-width: 900px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .pillar { background: var(--solar-50); border: 1px solid var(--divider); border-radius: var(--radius); padding: var(--s4); min-width: 0; }
    .pillar .plain { color: var(--text-medium); margin-top: var(--s1); }
    .pillar .big { font-family: 'RecklessNeue Regular', serif; font-size: 32px; line-height: 36px; margin-top: var(--s3); }
    .pillar .legend { margin-top: var(--s2); display: flex; flex-direction: column; gap: var(--s1); color: var(--text-medium); }
    .pillar .legend span { display: inline-flex; align-items: center; gap: var(--s2); }
    .pillar .legend i, .key i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
    .statbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--solar-600); margin-top: var(--s3); }
    .statbar i { display: block; height: 100%; }
    .s-ok { background: var(--fn-success); } .s-part { background: var(--fn-info); } .s-not { background: var(--fn-error); } .s-un { background: var(--solar-700); }
    .key { display: flex; flex-wrap: wrap; gap: var(--s4); color: var(--text-medium); margin-bottom: var(--s3); }
    .key span { display: inline-flex; align-items: center; gap: var(--s2); }

    /* Buttons (NDS Button: contained / outlined / text) */
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 40px; padding: 0 var(--s4); border-radius: var(--radius); border: 1px solid transparent; background: transparent; white-space: nowrap; text-decoration: none; }
    .btn.primary { background: var(--earth-500); color: #fff; }
    .btn.primary:hover { background: var(--earth-400); }
    .btn.secondary { border-color: var(--divider); background: var(--solar-50); }
    .btn.secondary:hover { background: var(--solar-100); }
    .btn.text { text-decoration: underline; text-underline-offset: 3px; }
    .btn.sheila { border-color: var(--purple-400); background: var(--bg-sheila-tint-50); }
    .btn.sm { height: 32px; padding: 0 var(--s3); }
    .btn:disabled { opacity: .5; cursor: default; }
    .btn:focus-visible, .tab:focus-visible { outline: 2px solid var(--earth-500); outline-offset: 2px; }

    /* Page header */
    .ph { margin-bottom: var(--s5); }
    .ph p { color: var(--text-medium); margin-top: var(--s2); max-width: 760px; }
    .crumbs { display: flex; align-items: center; gap: var(--s1); color: var(--text-medium); margin-bottom: var(--s3); flex-wrap: wrap; }
    .crumbs a { color: var(--text-medium); }
    .sample-tag { display: inline-flex; align-items: center; gap: var(--s1); height: 24px; padding: 0 var(--s2); border-radius: 12px; background: var(--solar-300); color: var(--text-medium); white-space: nowrap; }

    /* Banner + tables */
    .banner { border: 1px solid var(--purple-400); border-radius: var(--radius); padding: var(--s4); background: var(--bg-sheila-10); display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s5); }
    .banner .grow { flex: 1; }
    .banner p { color: var(--text-medium); margin-top: var(--s1); }
    .tablewrap { overflow-x: auto; }
    :where(#wt-root) table { width: 100%; border-collapse: collapse; }
    :where(#wt-root) th { text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--divider); color: var(--text-medium); font-family: 'NeutrifPro Regular', sans-serif; font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
    :where(#wt-root) td { padding: var(--s3); border-bottom: 1px solid var(--divider); vertical-align: top; }
    :where(#wt-root) tr.row { cursor: pointer; }
    :where(#wt-root) tr.row:hover td { background: var(--solar-100); }
    :where(#wt-root) tr.grp td { background: var(--solar-500); padding: var(--s2) var(--s3); }
    :where(#wt-root) tr.sub td { padding: var(--s2) var(--s3); color: var(--text-medium); background: var(--solar-100); }
    :where(#wt-root) tr.focus td { background: var(--dawn-50); }
    :where(#wt-root) td.no { white-space: nowrap; color: var(--text-base); }
    :where(#wt-root) td.nowrap { white-space: nowrap; }
    .ai-tag { display: inline-flex; align-items: center; gap: var(--s1); color: var(--purple-700); }
    .owner { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
    .money { font-family: 'RecklessNeue Regular', serif; font-size: 24px; line-height: 28px; white-space: nowrap; }

    /* Detail layout */
    .two-col { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s5); align-items: start; }
    @media (max-width: 1100px) { .two-col { grid-template-columns: minmax(0, 1fr); } }
    /* Collapse on the content width, not the viewport: with Sheila docked the content is ~880px at a 1440 screen. */
    @container (max-width: 1080px) { .two-col { grid-template-columns: minmax(0, 1fr); } }
    @container (max-width: 760px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .section { margin-top: var(--s5); }
    .section .overline { color: var(--text-light); margin-bottom: var(--s2); }
    .kv { display: grid; grid-template-columns: 140px 1fr; gap: var(--s2) var(--s4); }
    .kv > div:nth-child(odd) { color: var(--text-medium); }
    .tabs { display: flex; gap: var(--s5); border-bottom: 1px solid var(--divider); margin-bottom: var(--s4); overflow-x: auto; }
    .tab { background: none; border: none; border-bottom: 2px solid transparent; padding: var(--s3) 0; margin-bottom: -1px; color: var(--text-medium); white-space: nowrap; display: inline-flex; gap: var(--s2); align-items: center; }
    .tab.on { border-bottom-color: var(--dawn-500); color: var(--text-base); font-family: 'NeutrifPro SemiBold', sans-serif; }
    .sugg { border: 1px solid var(--purple-400); border-radius: var(--radius); background: var(--solar-50); }
    .sugg-head { padding: var(--s3) var(--s4); background: var(--bg-sheila-tint-50); border-bottom: 1px solid var(--divider); display: flex; align-items: center; gap: var(--s2); }
    .sugg-item { padding: var(--s4); border-bottom: 1px solid var(--divider); }
    .sugg-item:last-child { border-bottom: none; }
    .sugg-item p { color: var(--text-medium); margin-top: var(--s1); }
    .sugg-item .ev { margin-top: var(--s2); color: var(--text-base); }
    .sugg-item .act { margin-top: var(--s3); display: flex; gap: var(--s2); flex-wrap: wrap; }
    .empty { color: var(--text-light); padding: var(--s3) 0; }

    /* Timeline (plan and key dates) */
    .timeline { list-style: none; position: relative; padding-left: var(--s6); }
    .timeline::before { content: ''; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--solar-600); }
    .timeline li { position: relative; padding: 0 0 var(--s5); }
    .timeline li:last-child { padding-bottom: 0; }
    .timeline li::before { content: ''; position: absolute; left: -26px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--solar-50); border: 2px solid var(--earth-100); }
    .timeline li.done::before { background: var(--fn-success); border-color: var(--fn-success); }
    .timeline li.doing::before { border-color: var(--fn-info); }
    .timeline li.today::before { background: var(--dawn-500); border-color: var(--dawn-500); }
    .timeline li.today { color: var(--dawn-700); }
    .timeline .when { color: var(--text-medium); }
    .timeline .what { margin-top: var(--s1); }
    .timeline .meta { margin-top: var(--s2); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

    /* Reports */
    .carousel { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s4); margin-bottom: var(--s6); }
    .carousel .wide { grid-column: span 2; }
    @media (max-width: 700px) { .carousel .wide { grid-column: auto; } }
    .tpl { border: 1px solid var(--divider); border-radius: var(--radius); overflow: hidden; background: var(--solar-50); text-align: left; padding: 0; display: flex; flex-direction: column; min-width: 0; }
    .tpl:hover { background: var(--solar-100); }
    .tpl .cover { height: 120px; display: flex; align-items: flex-end; padding: var(--s3); color: #fff; }
    .tpl .cover.earth { background: var(--earth-500); }
    .tpl .cover.dawn { background: var(--dawn-500); }
    .tpl .meta { padding: var(--s3); }
    .tpl .meta .caption { color: var(--text-medium); margin-top: var(--s1); }
    .tpl.feature-tile { display: grid; grid-template-columns: 150px 1fr; }
    .tpl.feature-tile .thumb { background: var(--earth-500); display: flex; align-items: center; justify-content: center; padding: var(--s3); border: none; cursor: pointer; }
    .tpl.feature-tile .thumb img { width: 100%; height: auto; display: block; border-radius: 2px; box-shadow: 0 6px 18px rgba(0,28,39,.35); }
    .tpl.feature-tile .meta { display: flex; flex-direction: column; gap: var(--s2); }
    .tpl.feature-tile .meta p { color: var(--text-medium); }
    @media (max-width: 520px) { .tpl.feature-tile { grid-template-columns: 1fr; } }

    /* Dialogs (light, product surface) */
    .scrim { position: fixed; inset: 0; background: rgba(0,28,39,.55); display: flex; align-items: center; justify-content: center; z-index: 72; padding: var(--s5); overflow-y: auto; }
    .scrim[hidden] { display: none; }
    .dialog { width: 100%; max-width: 520px; background: var(--solar-50); border-radius: var(--radius); border: 1px solid var(--divider); box-shadow: 0 16px 48px rgba(0,28,39,.25); margin: auto; }
    .dialog.wide { max-width: 760px; }
    .dlg-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--divider); }
    .dlg-body { padding: var(--s5); }
    .dlg-body p { color: var(--text-medium); }
    .dlg-foot { padding: var(--s4) var(--s5); border-top: 1px solid var(--divider); display: flex; justify-content: flex-end; gap: var(--s2); align-items: center; flex-wrap: wrap; }
    .dlg-foot .grow { flex: 1; }
    .report-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
    .report-preview img { width: 100%; height: auto; display: block; border: 1px solid var(--divider); border-radius: 2px; background: var(--solar-100); }
    @media (max-width: 600px) { .report-preview { grid-template-columns: 1fr 1fr; } }
    /* Guide dialogs: the closing door (build plan D1; the welcome dialog was retired 27 Oct 2026 for Sheila's intro). The guide layer's dark surface, the same as the bubbles, so the
       walkthrough reads as one layer and the product as another. Tokens only: earth-500, solar-500, earth-100, dawn-500. */
    .guide-dialog { width: 100%; max-width: 560px; margin: auto; padding: 28px; background: var(--earth-500); color: var(--solar-500); border-radius: 8px; box-shadow: 0 20px 50px rgba(0,28,39,.45); }
    .guide-dialog.closing { max-width: 600px; }
    .gd-eyebrow { display: inline-flex; align-items: center; gap: var(--s2); color: var(--dawn-500); text-transform: uppercase; letter-spacing: .06em; }
    .gd-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--dawn-500); display: block; }
    .gd-head .h4 { margin-top: var(--s2); color: var(--solar-500); text-wrap: balance; }
    .gd-head .h4 .beat { display: inline-block; }
    .gd-body { margin-top: var(--s4); }
    .gd-body p { color: var(--earth-100); }
    .gd-body p + p { margin-top: var(--s3); }
    .guide-dialog a:not(.tb) { color: var(--earth-100); text-decoration: underline; text-underline-offset: 3px; }
    /* Dark inset panels: the closing's two doors. No Sheila purple on the guide layer. */
    .door { background: rgba(246,247,240,.06); border: 1px solid rgba(246,247,240,.25); border-left: 3px solid var(--dawn-500); border-radius: var(--radius); padding: var(--s4); }
    .doors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s5); }
    .door { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
    .door .body1 { color: var(--solar-500); }
    .door p { color: var(--earth-100); font-size: 14px; line-height: 20px; flex: 1; }
    .door .tb { align-self: flex-start; margin-top: var(--s2); }
    .gd-note { color: var(--earth-100); margin-top: var(--s3); }
    .door .door-offer { color: var(--dawn-100); }
    /* The credit: a running figure in Sheila's panel (sheila.css), a full ticket in the door (door.js, entry.css). */
    .credit-ticket { margin-top: var(--s4); padding: 14px 16px; border-radius: 8px; background: rgba(246,247,240,.06); border: 1px solid rgba(255,79,1,.5); display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; }
    .credit-ticket .ct-amount { font-family: 'RecklessNeue Regular', serif; font-size: 36px; line-height: 40px; color: #fff; grid-row: span 3; }
    .credit-ticket .ct-label { color: var(--dawn-100); font-size: 14px; line-height: 18px; }
    .credit-ticket .ct-meter { display: flex; gap: 4px; }
    .credit-ticket .ct-meter i { flex: 1; height: 6px; border-radius: 3px; background: rgba(246,247,240,.18); display: block; transition: background .25s ease; }
    .credit-ticket .ct-meter i.on { background: var(--dawn-500); }
    .gd-body p.ct-note { color: var(--earth-100); font-size: 13px; line-height: 18px; margin: 0; }
    /* The closing assembles in sequence, the ticket tallies, one light sweep, then the doors. Still under reduced motion. */
    @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    @keyframes sweep { to { transform: translateX(130%); } }
    @keyframes doorpulse { 0% { box-shadow: 0 0 0 0 rgba(255,79,1,.65); } 100% { box-shadow: 0 0 0 16px rgba(255,79,1,0); } }
    .guide-dialog.closing .gd-eyebrow, .guide-dialog.closing .gd-head .h4, .guide-dialog.closing .gd-body > p, .guide-dialog.closing .credit-ticket, .guide-dialog.closing .doors, .guide-dialog.closing .gd-foot { animation: rise .45s cubic-bezier(.2,.7,.2,1) both; }
    .guide-dialog.closing .gd-head .h4 { animation-delay: .1s; }
    .guide-dialog.closing .gd-body > p { animation-delay: .25s; }
    .guide-dialog.closing .gd-body > p + p { animation-delay: .35s; }
    .guide-dialog.closing .credit-ticket { animation-delay: .5s; }
    .guide-dialog.closing .doors { animation-delay: 1.45s; }
    .guide-dialog.closing .gd-foot { animation-delay: 1.6s; }
    .credit-ticket { position: relative; overflow: hidden; transition: box-shadow .4s ease; }
    .credit-ticket::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%); transform: translateX(-130%); pointer-events: none; }
    .credit-ticket.glow { box-shadow: 0 0 0 1px rgba(255,79,1,.7), 0 0 30px rgba(255,79,1,.35); }
    .credit-ticket.glow::after { animation: sweep .9s ease-out forwards; }
    .credit-ticket .ct-meter i.lit { box-shadow: 0 0 10px rgba(255,79,1,.95); }
    #door-signup.pulse { animation: doorpulse .8s ease-out 1; }
    @media (prefers-reduced-motion: reduce) { .guide-dialog.closing .gd-eyebrow, .guide-dialog.closing .gd-head .h4, .guide-dialog.closing .gd-body > p, .guide-dialog.closing .credit-ticket, .guide-dialog.closing .doors, .guide-dialog.closing .gd-foot { animation: none; opacity: 1; transform: none; } .credit-ticket::after { display: none; } #door-signup.pulse { animation: none; } }
    .gd-foot { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s5); flex-wrap: wrap; }
    .gd-foot .grow { flex: 1; }
    .gd-foot .gd-note { margin-top: 0; text-align: right; }
    @media (max-width: 640px) {
      .scrim { padding: var(--s4); align-items: flex-start; }
      .guide-dialog { padding: var(--s5) var(--s4); }
      .doors { grid-template-columns: 1fr; }
      .gd-head .h4 { font-size: 24px; line-height: 28px; }
      .gd-foot .gd-note { text-align: left; }
    }
    .loading { max-width: 420px; margin: var(--s7) auto; text-align: center; color: var(--text-medium); }
    .loading .bar { height: 3px; background: var(--solar-600); border-radius: 2px; overflow: hidden; margin-top: var(--s4); }
    .loading .bar i { display: block; height: 100%; width: 40%; background: var(--bg-sheila); animation: load 1.2s ease-in-out infinite; }
    @keyframes load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

    /* Toast (NDS Toast) */
    .toast { position: fixed; left: 50%; bottom: var(--s5); transform: translateX(-50%) translateY(20px); background: var(--earth-500); color: #fff; padding: var(--s3) var(--s4); border-radius: var(--radius); display: flex; align-items: center; gap: var(--s2); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 80; max-width: 90vw; }
    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* Showcase pill (kept from the source replica; not used in this copy) */
    .deck-next { position: fixed; right: var(--s5); bottom: var(--s5); z-index: 75; display: inline-flex; align-items: center; gap: var(--s2); height: 44px; padding: 0 var(--s3) 0 var(--s4); border-radius: 22px; background: var(--earth-500); color: var(--solar-500); text-decoration: none; font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 14px; box-shadow: 0 12px 32px rgba(0,28,39,.35); }
    .deck-next i { width: 8px; height: 8px; border-radius: 50%; background: var(--dawn-500); display: block; }
    .deck-next svg { width: 16px; height: 16px; fill: currentColor; }
    .deck-next[hidden] { display: none; }
    .deck-next:hover { background: var(--earth-400); }

    /* Guide layer: the dim, the spotlight and the click shield. Dark surface, orange accents, no Sheila purple. */
    .locked .shell { user-select: none; }
    .tour { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
    .tour[hidden] { display: none; }
    .spot { position: absolute; border-radius: 6px; border: 2px solid var(--dawn-500); box-shadow: 0 0 0 9999px rgba(0,28,39,.72), 0 0 0 6px rgba(255,79,1,.22); transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; pointer-events: none; animation: spotpulse 2.2s ease-in-out infinite; }
    .spot.none { border: none; box-shadow: 0 0 0 9999px rgba(0,28,39,.72); animation: none; }
    @keyframes spotpulse { 0%, 100% { box-shadow: 0 0 0 9999px rgba(0,28,39,.72), 0 0 0 4px rgba(255,79,1,.32); } 50% { box-shadow: 0 0 0 9999px rgba(0,28,39,.72), 0 0 0 11px rgba(255,79,1,.1); } }
    .guide-dialog .tb { height: 40px; padding: 0 18px; border-radius: 20px; border: 1px solid transparent; font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 14px; line-height: 20px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; white-space: nowrap; }
    .guide-dialog .tb svg { width: 14px; height: 14px; fill: currentColor; }
    .guide-dialog .tb.next { background: var(--dawn-500); color: #fff; }
    .guide-dialog .tb.next:hover { background: #E64801; }
    .guide-dialog .tb.back { background: transparent; color: var(--solar-500); border-color: rgba(246,247,240,.3); }
    .guide-dialog .tb.back:hover { background: rgba(246,247,240,.08); }
    .guide-dialog .tb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    /* v4.6 (the review of 30 Oct 2026): Skip, the quiet text control on the dark callout (#tc-skip, at the left of the row) and on
       Sheila's intro card (#intro-skip, after Show me the road). No fill, no border, the guide layer's muted text, underlined on
       hover; its height and focus ring are the neighbouring .tb's (34 px on the callout, 40 px on the dialog). */
    .tour-card .tb.text, .guide-dialog .tb.text { background: transparent; border-color: transparent; color: rgba(246,247,240,.7); font-family: 'NeutrifPro Regular', sans-serif; padding: 0 8px; }
    .tour-card .tb.text:hover, .guide-dialog .tb.text:hover { background: transparent; color: rgba(246,247,240,.7); text-decoration: underline; text-underline-offset: 3px; }
    .tour-card .act .tb.text { margin-left: -8px; }
    .guide-dialog.intro-dialog .gi-acts { flex-direction: row; flex-wrap: wrap; align-items: center; }
    /* v4.6: Sheila's avatar on the intro card is 48 px (40 px under 768 px), the pane's image scaled whole (no clipping, as the
       pane's 72 px greeting), centred on the two-line label with a 16 px gap. The pane's avatars and the other dialogs keep theirs. */
    .guide-dialog.intro-dialog .gi-head { gap: 16px; align-items: center; }
    .intro-dialog .sp-avatar.gi-avatar { width: 48px; height: 48px; border-radius: 0; flex-shrink: 0; }
    .intro-dialog .sp-avatar.gi-avatar svg.ic { width: 24px; height: 24px; }
    @media (max-width: 767px) { .intro-dialog .sp-avatar.gi-avatar { width: 40px; height: 40px; } .intro-dialog .sp-avatar.gi-avatar svg.ic { width: 20px; height: 20px; } }
    /* v5.1 (spec v5.1-refinements.md section 2): on the dark guide dialogs Sheila's mark is inline (app.js guideAvatar) and fills the
       avatar's box as the img did; the sizes above are unchanged. v5.49 (spec v5.49-sheila-mark.md): the mark is the product's
       DrovaIcon v2 Dark variant with its own fills (nothing in currentColor), so the dialog avatar's colour rule is gone. */
    .sp-avatar > svg.sheila-mark { display: block; width: 100%; height: 100%; }
    /* Next nudge: one short scale-and-glow when a look-only click lands on the shield. Reduced motion gets a still ring. */
    @keyframes nudge { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,79,1,.55); } 35% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(255,79,1,.32); } 100% { transform: scale(1); box-shadow: 0 0 0 12px rgba(255,79,1,0); } }
    .tb.next.pulse { animation: nudge .6s ease-out 1; }
    /* Click shield. While the walk is on (Sheila's questions, the intro, any stop, door) a transparent layer above the product and the
       spotlight, takes every pointer event (the header's Sheila AI toggle and Sheila's pane included: the pane stays open, dimmed and inert, while walking); the dialogs' scrim (z 72) sits above it. Every click shows
       the hint; nothing passes through (27 Oct 2026). Wheel and touch scrolling are forwarded by app.js to the product scroller under the pointer. */
    .shield { position: absolute; inset: 0; pointer-events: auto; cursor: default; background: transparent; touch-action: none; }
    .shield[hidden] { display: none; }
    .tour.dlg .spot { display: none; }
    .locked [data-spotlit] :is(a, button), .locked :is(a, button)[data-spotlit]:not(.tour-lit) { opacity: .8; }
    /* Transitions (27 Oct 2026; v2.6 the same day): the control the tour presses takes the product's own selected style
       (.ni.active, .tab.on, tr.row:hover above) as the pointer arrives. The pointer is an arrow glyph (24px, --dawn-500 with a
       white outline and a soft shadow) in the tour layer above the shield, never a real cursor, and takes no pointer events;
       its tip is the point it presses. It travels 900 ms ease-in-out and presses with a scale-down and a ripple (250 ms).
       Reduced motion: no pointer (app.js lights the target for 300 ms, then changes the screen). */
    .ni.tour-lit { background: var(--solar-500); }
    .ni.tour-lit svg { color: var(--dawn-500); }
    .tab.tour-lit { border-bottom-color: var(--dawn-500); color: var(--text-base); }
    :where(#wt-root) tr.row.tour-lit td { background: var(--solar-100); }
    .tour-cursor { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -3px 0 0 -4px; pointer-events: none; transform-origin: 4px 3px; filter: drop-shadow(0 4px 8px rgba(0,28,39,.45)); transition: transform .25s ease; }
    .tour-cursor[hidden] { display: none; }
    .tour-cursor svg { display: block; width: 24px; height: 24px; overflow: visible; }
    .tour-cursor path { fill: var(--dawn-500); stroke: #fff; stroke-width: 1.75; stroke-linejoin: round; }
    .tour-cursor.travel { transition: left .9s cubic-bezier(.45,0,.55,1), top .9s cubic-bezier(.45,0,.55,1), transform .25s ease; }
    .tour-cursor::after { content: ''; position: absolute; left: 4px; top: 3px; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; border: 2px solid var(--dawn-500); opacity: 0; pointer-events: none; }
    .tour-cursor.press { transform: scale(.82); }
    .tour-cursor.press::after { animation: tap .25s ease-out 1 forwards; }
    @keyframes tap { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
    @media (prefers-reduced-motion: reduce) { .tour-cursor { display: none !important; } }
    /* v5.34 (spec v5.34-scroll-cue.md section 2): the scroll cue. While the tour scrolls the page, a small scroll wheel sits at the
       pointer's tip, clear of the arrow's body (14px right, 20px below; the refuter of 6 Nov 2026: at 6px and 4px it painted over the arrow; app.js sets its left and top with the pointer's), drawn in the pointer's tokens: the
       dawn-500 stroke at 1.75px on a white (solar-50) fill and the pointer's drop shadow; its dot rolls the way the page moves
       (data-dir down or up) on a 600 ms linear loop. Reduced motion: no wheel and a still dot (the page lands at once). */
    .tour-wheel { position: absolute; left: 0; top: 0; width: 14px; height: 22px; margin: 20px 0 0 14px; box-sizing: border-box; border: 1.75px solid var(--dawn-500); border-radius: 7px; background: #fff; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0,28,39,.45)); }
    .tour-wheel[hidden] { display: none; }
    .tour-wheel i { position: absolute; left: 50%; top: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--dawn-500); animation: tcwheel-down .6s linear infinite; }
    .tour-wheel[data-dir="up"] i { animation-name: tcwheel-up; }
    @keyframes tcwheel-down { from { transform: translateY(0); opacity: 1; } to { transform: translateY(8px); opacity: .2; } }
    @keyframes tcwheel-up { from { transform: translateY(8px); opacity: 1; } to { transform: translateY(0); opacity: .2; } }
    @media (prefers-reduced-motion: reduce) { .tour-wheel { display: none !important; } .tour-wheel i { animation: none; } }
    /* v5.48 (spec v5.48-scroll-arrow.md section 2; register item R06, the design review): the scroll arrow on screen 13. app.js appends
       it to the viewer's .lv-stage (positioned) once the peek is back at the top: a 32px circle on white with the pointer's dawn-500
       stroke at 1.75px and its drop shadow, the KeyboardArrowDown chevron (20px, dawn-500) inside, centred on the scroller's width 16px
       above its foot, over the page sheets (z-index 2; the viewer's bar is 3; the tour layer is above both), bouncing 6px on a 1.2s
       ease-in-out loop. .gone fades it over 200ms on the visitor's first scroll. Reduced motion: shown, still. */
    .tour-scroll-hint { position: absolute; left: 50%; bottom: 16px; z-index: 2; width: 32px; height: 32px; margin-left: -16px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 1.75px solid var(--dawn-500); border-radius: 50%; background: #fff; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0,28,39,.45)); opacity: 1; transition: opacity .2s ease; animation: tshint-bob 1.2s ease-in-out infinite; }
    .tour-scroll-hint svg { display: block; width: 20px; height: 20px; }
    .tour-scroll-hint path { fill: var(--dawn-500); }
    .tour-scroll-hint.gone { opacity: 0; }
    @keyframes tshint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
    @media (prefers-reduced-motion: reduce) { .tour-scroll-hint { animation: none; } }
    .walk-hint { position: fixed; left: 50%; top: 0; z-index: 76; display: inline-flex; align-items: center; gap: var(--s2); max-width: calc(100vw - 32px); min-height: 32px; padding: 6px 14px; border-radius: 16px; background: var(--earth-500); color: var(--solar-500); border: 1px solid rgba(246,247,240,.25); box-shadow: 0 8px 24px rgba(0,28,39,.3); pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity .15s ease, transform .15s ease; }
    .walk-hint.show { opacity: 1; transform: translate(-50%, 0); }
    .walk-hint i { width: 8px; height: 8px; border-radius: 50%; background: var(--dawn-500); display: block; flex-shrink: 0; }
    @media (prefers-reduced-motion: reduce) { .spot, .toast, .walk-hint { transition: none; } .spot { animation: none; } .loading .bar i { animation: none; } .tb.next.pulse { animation: none; box-shadow: 0 0 0 4px rgba(255,79,1,.32); } }

    /* The icon rail (v3.6): the rail is expanded (212px, --nav-w; views-v2.css draws the names and sub-labels). Under 1100px,
       and at any width under body.rail-collapsed, it is the captured 58px icon rail, labels in title and aria-label. */
    @media (max-width: 1100px) {
      :where(#wt-root) nav.side { width: 58px; }
      .nav-top { padding: 0; justify-content: center; } .nav-top .pmark span, .nav-top .icon-btn { display: none; }
      .modules { padding: var(--s2) var(--s1); }
      .ni { justify-content: center; padding: var(--s2); } .ni > div { display: none; }
    }
    body.rail-collapsed nav.side { width: 58px; }
    body.rail-collapsed .nav-top { padding: 0; justify-content: center; } body.rail-collapsed .nav-top .pmark span, body.rail-collapsed .nav-top .icon-btn { display: none; }
    body.rail-collapsed .modules { padding: var(--s2) var(--s1); }
    body.rail-collapsed .ni { justify-content: center; padding: var(--s2); } body.rail-collapsed .ni > div { display: none; }
    /* Narrow screens: 16px gutters. Under 1100px Sheila's pane is hidden outside the walk and a short band above the product while walking (sheila.css). */
    @media (max-width: 767px) {
      .topbar { padding: 0 var(--s4); } .topbar .title { font-size: 24px; line-height: 28px; }
      .topbar .sample-tag, .topbar .help { display: none; }
      /* v3.6 review (F2): the pane is closed after the walk, so the Sheila AI pill stays, compact (her avatar only, named by aria-label). */
      .topbar .sheila-pill { width: 38px; padding: 0; justify-content: center; } .topbar .sheila-pill .sp-pill-t { display: none; }
      .content { padding: var(--s4); }
      /* v5.1 fix (refuter, phones): while walking, #content keeps room under its last block for the callout sheet (--wt-sheet-h,
         set by app.js), so an anchor at the end of the page (Home's objectives on screen 2) scrolls up above the sheet. */
      body.walking:not(.viewer) #content { padding-bottom: calc(var(--wt-sheet-h, 0px) + var(--s4)); }
      /* ...and on the screens about Home's tree and the Edit Risk dialog (app.js PANE_OFF) the pane band steps aside, so the two
         objectives and the dialog fit between the top bar and the sheet. */
      body.walking.wt-pane-off .sheila-panel { display: none !important; }
      .kv { grid-template-columns: 1fr; }
    }

/* Restoration block (v4.0, www shell). Tailwind preflight and the Drova base layer are unlayered on this site and reset
   things this replica relies on. Every selector here is zero-specificity (:where) so the replica's own class rules always win. */
:where(#wt-root) p { letter-spacing: normal; color: inherit; font: inherit; }
:where(#wt-root) h1, :where(#wt-root) h2 { letter-spacing: normal; text-wrap: wrap; }
:where(#wt-root) small { font: inherit; letter-spacing: normal; }
:where(#wt-root) ul, :where(#wt-root) ol { list-style: revert; }
:where(#wt-root) code { font: revert; }
:where(#wt-root) :where(td, th) { padding: 0; }
:where(#wt-root) img, :where(#wt-root) svg { display: inline; vertical-align: baseline; }
:where(#wt-root) img { max-width: none; }
:where(#wt-root) a { text-decoration: revert; }

/* ==== v5.6 theme block (BEGIN). Appended for the RunSustainably fidelity port (spec v5.6-runsustainably-fidelity.md
   section 0). Tokens and type utilities for the product pages only. Nothing above this line was changed, and nothing
   here restyles an existing selector: new custom property names, new @font-face families and new .t-* classes only.
   Source: the canonical UI repo, libs/mui-themes/src/lib/drova/ (color-palette.ts EXTENDED_PALETTE, theme.ts
   DROVA_TYPOGRAPHY_OPTIONS and DROVA_SPACING_SCALE and shadows, fonts.ts DROVA_FONT_CONFIG, mixins.ts sheilaGradient)
   and apps/dma/src/libs/ui/colors.ts (the ESG pillar colours). */

/* The product's NeutrifPro faces with fonts.ts NEUTRIF_METRIC_OVERRIDES (ascent 84.5%, descent 15.5%, line gap 0%), under
   new family names so the overlay's faces ('NeutrifPro Regular', 'NeutrifPro SemiBold') keep their metrics. Same files.
   RecklessNeue carries no overrides in the source, so the product pages use the existing 'RecklessNeue Regular' face. */
@font-face { font-family: 'NeutrifPro Regular Product'; src: url('/walkthroughs/aasb-s2/fonts/NeutrifPro-Regular.woff2') format('woff2'); font-display: swap; ascent-override: 84.5%; descent-override: 15.5%; line-gap-override: 0%; }
@font-face { font-family: 'NeutrifPro SemiBold Product'; src: url('/walkthroughs/aasb-s2/fonts/NeutrifPro-SemiBold.woff2') format('woff2'); font-display: swap; ascent-override: 84.5%; descent-override: 15.5%; line-gap-override: 0%; }
/* fonts.ts neutrifRegularWideDescent: for native input ::placeholder only (descent declared at 22%). */
@font-face { font-family: 'NeutrifPro Regular Wide Descent Product'; src: url('/walkthroughs/aasb-s2/fonts/NeutrifPro-Regular.woff2') format('woff2'); font-display: swap; ascent-override: 84.5%; descent-override: 22%; line-gap-override: 0%; }

:root {
  /* Font families for the product pages. */
  --ff-product-regular: 'NeutrifPro Regular Product', sans-serif;
  --ff-product-semibold: 'NeutrifPro SemiBold Product', sans-serif;
  --ff-product-wide-descent: 'NeutrifPro Regular Wide Descent Product', sans-serif;
  --ff-product-display: 'RecklessNeue Regular', serif;

  /* EXTENDED_PALETTE steps the replica lacked. Existing names above are kept as they are (their values match the source). */
  --white: #ffffff;
  --dawn-200: #FFA673; --dawn-300: #FF8041; --dawn-400: #FF6620; --dawn-600: #E64801; --dawn-800: #993201; --dawn-900: #802A01;
  --solar-200: #FBFCF9; --solar-400: #E8E9DD; --solar-800: #ACADA8; --solar-900: #7B7C78;
  --earth-200: #A0AEB7; --earth-300: #7A8C97; /* $earth 600 to 900 are empty strings in the source ("Don't use"). */
  --grey-50: #FFFFFF; --grey-300: #DDDDDD; --grey-700: #656662; --grey-800: #4F4F4F; --grey-900: #3A3A3A;
  --green-200: #80FFBA; --green-300: #4DFFA3; --green-400: #26FF8F; --green-500: #00FF7B; --green-600: #01E648; --green-700: #01BF3C; --green-800: #019932; --green-900: #017D2A;
  --orange-100: #FFCCAD; --orange-200: #FFB280; --orange-300: #FF9953; --orange-400: #FF8B2A; --orange-500: #FF7502; --orange-600: #E66702; --orange-700: #BF5702; --orange-800: #994602; --orange-900: #7D3801;
  --pink-100: #FBC0DA; --pink-200: #F68FBC; --pink-300: #F56DB5; --pink-400: #F05BC7; --pink-500: #FB00C9; --pink-600: #D6008F; --pink-800: #A6005C; --pink-900: #8A0047;
  --purple-100: #E0B3FF; --purple-200: #C980FF; --purple-300: #B34DFF; --purple-500: #8F00FF; --purple-600: #7D00E6; --purple-800: #550099; --purple-900: #450080;
  --red-100: #FFB3C9; --red-200: #FF80A7; --red-300: #FF4D85; --red-400: #FF2668; --red-500: #FF0052; --red-600: #E6004A; --red-700: #BF0040; --red-800: #990033; --red-900: #80002A;
  /* $sky_blue: the replica already names it --sky-*; the full scale here, with --sky-blue-* aliases named after the source. */
  --sky-100: #B3ECFF; --sky-200: #80E0FF; --sky-300: #4DD4FF; --sky-400: #26CAFF; --sky-500: #00BFFF; --sky-600: #01A6E6; --sky-700: #018BBF; --sky-800: #017299;
  --sky-blue-50: var(--sky-50); --sky-blue-100: var(--sky-100); --sky-blue-200: var(--sky-200); --sky-blue-300: var(--sky-300); --sky-blue-400: var(--sky-400);
  --sky-blue-500: var(--sky-500); --sky-blue-600: var(--sky-600); --sky-blue-700: var(--sky-700); --sky-blue-800: var(--sky-800); --sky-blue-900: var(--sky-900);
  --teal-50: #E0FFFA; --teal-100: #B3FFED; --teal-200: #80FFDF; --teal-300: #4DFFD2; --teal-400: #26FFBF; --teal-500: #00FFAC; --teal-600: #01E6AD; --teal-700: #01BF91; --teal-800: #019978;
  --yellow-100: #FFF6B3; --yellow-200: #FFF080; --yellow-300: #FFEA4D; --yellow-400: #FFE526; --yellow-700: #BFA301; --yellow-800: #998301;

  /* $text entries the replica lacked ($text.sheila is the 121.81deg gradient, not the 122deg sheilaGradient). */
  --text-feature-dark: #bf2b00; --text-error: #E6004A;
  --text-sheila: linear-gradient(121.81deg, #FF4F01 22.4%, #A026FF 71.9%);
  /* $functional.bg_borders entries the replica lacked (the --fn-* prefix is the replica's name for bg_borders). */
  --bg-sheila-30: linear-gradient(122deg, #FF4F014D 22.4%, #A026FF4D 71.9%);
  --bg-sheila-20: linear-gradient(122deg, #FF4F0133 22.4%, #A026FF33 71.9%);
  --bg-sheila-15: linear-gradient(122deg, #FF4F0126 22.4%, #A026FF26 71.9%);
  --bg-sheila-tint-100: linear-gradient(122deg, #FFCAA6 22.4%, #E0B3FF 71.9%);
  --fn-hovered: #E9EAE1; --fn-selected: #F6F7F0; --fn-pressed: #D6D8D3;
  /* apps/dma/src/libs/ui/colors.ts esg, and the light fills (msci-insight-issue-details.constants.tsx). */
  --esg-environmental: var(--sky-400); --esg-social: var(--yellow-400); --esg-governance: var(--purple-400);
  --esg-environmental-light: var(--sky-100); --esg-social-light: var(--yellow-100); --esg-governance-light: var(--purple-100);

  /* DROVA_SPACING_SCALE [2, 4, 8, 12, 16, 24, 32, 64, 80, 128, 140]. --sp-N is theme.spacing(N), the same index as the
     replica's --sN (--s0 2px to --s7 64px already exist); --s8 to --s10 extend that scale. */
  --s8: 80px; --s9: 128px; --s10: 140px;
  --sp-0: 2px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 64px; --sp-8: 80px; --sp-9: 128px; --sp-10: 140px;

  /* theme.ts shadows 1 to 5 (6 and up are none). */
  --shadow-1: 0px 1px 2px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-2: 0px 3px 6px rgba(0, 0, 0, 0.23), 0px 3px 6px rgba(0, 0, 0, 0.16);
  --shadow-3: 0px 6px 6px rgba(0, 0, 0, 0.26), 0px 10px 20px rgba(0, 0, 0, 0.19);
  --shadow-4: 0px 10px 10px rgba(0, 0, 0, 0.26), 0px 14px 28px rgba(0, 0, 0, 0.25);
  --shadow-5: 0px 15px 12px rgba(0, 0, 0, 0.22), 0px 19px 38px rgba(0, 0, 0, 0.3);
}

/* Typography variants as the product renders them: family, size and line-height from DROVA_TYPOGRAPHY_OPTIONS; weight,
   letter-spacing and the uppercase overline are what createTheme merges in from MUI's defaults (the capture measures
   them: h4 0.2352px, h6 weight 500 and 0.18px, subtitle2 weight 500 and 0.1428px, button 0.457px). The faces declare no
   weight, so 500 renders the same glyphs (no synthetic bold below 600). MuiTypography's root sets margin 0. */
.t-h1 { margin: 0; font-family: var(--ff-product-display); font-size: 80px; line-height: 72px; font-weight: 300; letter-spacing: -0.01562em; }
.t-h2 { margin: 0; font-family: var(--ff-product-display); font-size: 40px; line-height: 44px; font-weight: 300; letter-spacing: -0.00833em; }
.t-h3 { margin: 0; font-family: var(--ff-product-regular); font-size: 40px; line-height: 44px; font-weight: 400; letter-spacing: 0em; }
.t-h4 { margin: 0; font-family: var(--ff-product-display); font-size: 32px; line-height: 36px; font-weight: 400; letter-spacing: 0.00735em; }
.t-h5 { margin: 0; font-family: var(--ff-product-regular); font-size: 32px; line-height: 36px; font-weight: 400; letter-spacing: 0em; }
.t-h6 { margin: 0; font-family: var(--ff-product-regular); font-size: 24px; line-height: 28px; font-weight: 500; letter-spacing: 0.0075em; }
.t-subtitle1 { margin: 0; font-family: var(--ff-product-semibold); font-size: 20px; line-height: 24px; font-weight: 400; letter-spacing: 0.00938em; }
.t-subtitle2 { margin: 0; font-family: var(--ff-product-regular); font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: 0.00714em; }
.t-body1 { margin: 0; font-family: var(--ff-product-semibold); font-size: 16px; line-height: 20px; font-weight: 400; letter-spacing: 0.00938em; }
.t-body2 { margin: 0; font-family: var(--ff-product-regular); font-size: 16px; line-height: 20px; font-weight: 400; letter-spacing: 0.01071em; }
.t-caption { margin: 0; font-family: var(--ff-product-regular); font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0.03333em; }
.t-overline { margin: 0; font-family: var(--ff-product-regular); font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0.08333em; text-transform: uppercase; }
.t-button { margin: 0; font-family: var(--ff-product-regular); font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: 0.02857em; text-transform: none; }
/* Bold runs inside a variant: the browser default (same family and size, weight bolder) as the product has it, against the
   replica's global b/strong rule above; subtitle2 and body2 then switch to the SemiBold face at the inherited weight
   (theme.ts 'b, strong': fontFamily neutrifSemiBold, fontWeight unset). */
:is(.t-h1, .t-h2, .t-h3, .t-h4, .t-h5, .t-h6, .t-subtitle1, .t-subtitle2, .t-body1, .t-body2, .t-caption, .t-overline, .t-button) :is(b, strong) { font-family: inherit; font-size: inherit; line-height: inherit; font-weight: bolder; }
:is(.t-subtitle2, .t-body2) :is(b, strong) { font-family: var(--ff-product-semibold); font-weight: unset; }
/* fonts.ts: the wide-descent face is for native input placeholders on the product pages. */
.t-placeholder-face::placeholder { font-family: var(--ff-product-wide-descent); }
/* ==== v5.6 theme block (END) ==== */