/* ioEngine's site: the frame (header band, sidebar, pickers, account menu), the
   pages, the Q&A Bot and the sign-in card.

   Measured from the ioEngine Figma file (wAgHwi3M8QrK0tilrFPqsS) at its
   1440-wide frames: colours and type are its variables, sizes its own. Fonts are
   self-hosted, because the site's CSP admits no other origin. The downloadable
   report never loads this file. */

/* ------------------------------------------------------------------ fonts */
@font-face { font-family: "Inter"; src: url("/static/fonts/Inter-Variable.woff2") format("woff2");
             font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/static/fonts/Poppins-Regular.woff2") format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/static/fonts/Poppins-Medium.woff2") format("woff2");
             font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/static/fonts/Poppins-SemiBold.woff2") format("woff2");
             font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/static/fonts/Poppins-Bold.woff2") format("woff2");
             font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Zen Dots"; src: url("/static/fonts/ZenDots-Regular.woff2") format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }

/* ----------------------------------------------------------------- tokens */
:root {
  --navy: #142845;          /* Pagent Blue Primary Colour/900 */
  --cloud: #F0EEE9;         /* Backgrounds/Cloud Dancer */
  --white: #FFFFFF;
  --sky: #E2EDF7;           /* Open Air Secondary Colour/50 */
  --sky-half: rgba(226, 237, 247, .5);
  --ocean: #102D78;         /* Open Air Secondary Colour/900 */
  --io: #B9D2EB;            /* the wordmark's "io" */
  --track: #EBF3FB;
  --n900: #000000; --n800: #262626; --n700: #434343; --n600: #555555;
  --n200: #D9D9D9; --n100: #E9E9E9; --slate: #505B6A;
  --amber50: #FAEBD3; --amber100: #F5D6A7; --amber300: #DFA247;
  --red50: #F8CCD7; --red300: #C32A4F;
  --green50: #C8E5D5; --green100: #92CBAC; --green300: #408435;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --display: "Poppins", var(--sans);
  --shadow: 0 8px 28px rgba(20, 40, 69, .18);
  /* The downloaded report's easing, so the site moves as the report does. */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; background: var(--cloud); color: var(--navy);
       font: 400 14px/24px var(--sans); position: relative; }
img { display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ocean); outline-offset: 2px; }
.ico { width: 16px; height: 16px; flex: none; }

/* ------------------------------------------------------------------ frame */
.band { position: absolute; inset: 0 0 auto 0; height: 346px; background: var(--navy); z-index: 0; }
.switcher { position: absolute; left: 0; top: 0; z-index: 3; width: 96px; height: 64px;
            display: flex; align-items: center; justify-content: center; background: var(--white);
            border-bottom-right-radius: 16px; }

.topbar { position: relative; z-index: 3; width: min(1152px, calc(100% - 224px)); margin: 0 auto;
          height: 80px; padding: 16px 0; display: flex; align-items: center;
          justify-content: space-between; gap: 24px; }
.crumbs { display: flex; align-items: center; min-width: 0; color: var(--white); }
.home-btn { width: 32px; height: 32px; flex: none; display: grid; place-items: center;
            background: var(--white); border-radius: 5.333px; }
.crumb { display: inline-flex; align-items: center; height: 48px; padding: 8px; border-radius: 16px;
         color: var(--white); text-decoration: none; white-space: nowrap; }
.crumb-project { font-family: var(--display); font-weight: 400; }
a.crumb:hover { text-decoration: underline; text-underline-offset: 5px; }
.crumb-here { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.crumb-sep { color: var(--white); }
.top-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.top-btn { width: 40px; height: 40px; display: grid; place-items: center; background: var(--white);
           border: 0; border-radius: 16px; padding: 0; cursor: pointer; }
.is-stub { cursor: default; }
.account { position: relative; }
.avatar-face { position: relative; width: 32px; height: 32px; }
.avatar-face img { position: absolute; inset: 0; width: 32px; height: 32px; }
.account-menu { position: absolute; right: 0; top: 48px; min-width: 168px; padding: 8px;
                background: var(--white); border-radius: 16px; box-shadow: var(--shadow); }
.account-menu[hidden] { display: none; }
.account-menu form { margin: 0; }
.menu-item { display: block; width: 100%; text-align: left; padding: 8px 16px; border: 0;
             border-radius: 8px; background: none; color: var(--navy); cursor: pointer; }
.menu-item:hover, .menu-item:focus-visible { background: var(--sky); }

.app { position: relative; z-index: 1; display: flex; gap: 32px; align-items: flex-start;
       margin-top: 16px; padding-right: 40px; }
.side { flex: 0 0 264px; position: sticky; top: 16px; height: min(864px, calc(100vh - 32px));
        min-height: 560px; display: flex; flex-direction: column; gap: 24px; padding: 24px 16px;
        overflow-y: auto; background: var(--white); border-radius: 0 16px 16px 0; }
.side-top { display: flex; flex-direction: column; gap: 8px; }
.side-brand { display: flex; gap: 8px; align-items: flex-start; }
.wordmark { flex: 1; font: 400 25px/40px "Zen Dots", var(--display); color: var(--navy);
            white-space: nowrap; }
.wm-io { color: var(--io); }
.icon-btn { width: 32px; height: 32px; flex: none; display: grid; place-items: center; padding: 0;
            border: 0; border-radius: 8px; background: var(--white); cursor: pointer; }
.icon-btn img { width: 19.2px; height: 19.2px; }
.tagline { margin: 0; font: 400 12px/16px var(--sans); color: var(--navy); }
.side-open { display: none; position: absolute; left: 16px; top: 2px; z-index: 2; }

.picker { position: relative; display: flex; align-items: center; justify-content: space-between;
          gap: 8px; cursor: pointer; }
.picker select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
                 cursor: pointer; font-size: 16px; }
.picker:focus-within { outline: 2px solid var(--ocean); outline-offset: 2px; }
.picker-shown { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-project { margin: 8px 0; height: 32px; padding: 0 16px; background: var(--cloud);
                border-radius: 8px; font: 300 14px/24px var(--sans); color: var(--n900); }
.pick-week { width: 200px; height: 48px; flex: none; padding: 0 16px; background: var(--white);
             border: 1px solid var(--n200); border-radius: 16px; color: var(--n800); }
.pick-week strong { font-weight: 500; }

.nav { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.nav-main, .nav-support { display: flex; flex-direction: column; gap: 8px; }
.nav-item { display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 16px;
            border-radius: 8px; font: 300 12px/16px var(--sans); color: var(--n900);
            text-decoration: none; }
.nav-item svg { flex: none; }
a.nav-item:hover { background: var(--sky-half); }
.nav-item.is-here { background: var(--sky); font-weight: 400; }
.nav-head { margin: 0; padding: 0 16px; font: 600 12px/16px var(--sans); color: var(--navy); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 32px; padding-bottom: 104px; }

/* The sidebar slides shut and open: its width, padding and opacity go to nothing
   and the page widens into the room, so nothing jumps. Its children keep their
   width and are clipped while it moves. The state is set in <head> before the
   first paint, so loading a page never animates. */
.side { overflow-x: hidden; visibility: visible;
        transition: flex-basis .3s var(--ease), padding .3s var(--ease), margin .3s var(--ease),
                    opacity .3s var(--ease), visibility 0s; }
.side > * { min-width: 232px; }
.main, .head-block { transition: padding-left .3s var(--ease); }
html[data-side="collapsed"] .side { flex-basis: 0; padding-left: 0; padding-right: 0;
                                    margin-right: -32px; opacity: 0; visibility: hidden;
                                    transition: flex-basis .3s var(--ease), padding .3s var(--ease),
                                                margin .3s var(--ease), opacity .3s var(--ease),
                                                visibility 0s .3s; }
html[data-side="collapsed"] .side-open { display: grid; }
html[data-side="collapsed"] .main { padding-left: 40px; }
html[data-side="collapsed"] .head-block { padding-left: 32px; }

/* ------------------------------------------------------- shared components */
.card { background: var(--white); border-radius: 16px; padding: 24px; }
.card.bordered { border: 1px solid var(--sky); }
.card h2 { margin: 0; font: 600 18px/27px var(--sans); color: var(--navy); }
.card-body { margin: 0; font: 400 14px/24px var(--sans); color: var(--n600); }
.empty { color: var(--n600); }
.pills { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 30px;
        font: 500 12px/16px var(--sans); color: var(--n900); white-space: nowrap; background: var(--sky); }
.pill.cat-float { background: var(--sky); }
.pill.cat-exec { background: var(--amber50); }
.pill.cat-fin { background: var(--red50); }
.pill-outline { background: var(--white); border: 1px solid var(--n200); }
.dot { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--n200); }
.dot-red { background: var(--red300); }
.dot-amber { background: var(--amber300); }
.dot-green { background: var(--green300); }
.text-link { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 8px;
             border-radius: 16px; color: var(--navy); text-decoration: none; white-space: nowrap; }
.text-link span { border-bottom: 1px solid var(--navy); }
.text-link:hover span { border-bottom-width: 2px; }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px;
             padding: 8px 24px; border: 1px solid var(--white); border-radius: 16px; color: var(--white);
             text-decoration: none; white-space: nowrap; background: transparent; cursor: pointer; }
.btn-ghost:hover { background: rgba(255, 255, 255, .08); }
.btn-outline { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px;
               padding: 8px 24px; border: 1px solid var(--navy); border-radius: 16px; color: var(--navy);
               text-decoration: none; background: transparent; cursor: pointer; }
.btn-outline:hover { background: var(--sky-half); }
.btn-solid { display: inline-flex; align-items: center; justify-content: center; height: 48px;
             padding: 8px 24px; border: 0; border-radius: 16px; background: var(--navy);
             color: var(--white); cursor: pointer; }
.btn-solid:hover { background: var(--ocean); }

/* ------------------------------------------------------- page heading */
.head-block { display: flex; flex-direction: column; gap: 24px; color: var(--white); }
.page-head { display: flex; gap: 24px; align-items: flex-start; }
.page-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.eyebrow-line { margin: 0; font: 400 14px/21px var(--sans); }
.eyebrow-line strong { font-weight: 600; }
.page-title h1 { margin: 0; font: 600 28px/41px var(--display); }
.page-actions { display: flex; gap: 16px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.scope { margin: 0; max-width: 680px; font: 300 16px/24px var(--sans); }
.scope strong { font-weight: 600; }

/* ------------------------------------------------------------- overview */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi { display: flex; flex-direction: column; gap: 8px; }
.kpi-label { margin: 0; font: 400 14px/24px var(--sans); color: var(--n600); }
.kpi-value { margin: 0; font: 700 24px/40px var(--display); letter-spacing: .4px; color: var(--navy); }
.kpi-note { margin: 0; font: 400 12px/16px var(--sans); color: var(--n600); }
.stack-bar { display: flex; gap: 1px; height: 16px; border-radius: 4px; overflow: hidden;
             background: var(--track); }
.seg { min-width: 2px; flex-basis: 0; }
.seg.cat-float, .swatch.cat-float { background: var(--ocean); }
.seg.cat-exec, .swatch.cat-exec { background: var(--amber300); }
.seg.cat-fin, .swatch.cat-fin { background: var(--red300); }
.seg.cat-other, .swatch.cat-other { background: var(--n600); }
.legend { display: flex; flex-wrap: wrap; gap: 8px; }
.legend-item { display: inline-flex; align-items: center; gap: 8px; font: 400 12px/16px var(--sans);
               color: var(--n600); }
.swatch { width: 8px; height: 7px; border-radius: 2px; }
.dots { display: flex; gap: 3px; }
.trust-word { margin: 0; font: 600 18px/24px var(--sans); color: var(--navy); }
.trust-facts { display: flex; flex-direction: column; gap: 8px; }
.trust-fact { margin: 0; font: 300 12px/16px var(--sans); color: var(--slate); }
.trust-fact.is-weak { color: var(--red300); }

.split { display: flex; gap: 32px; align-items: flex-start; }
.act { flex: 0 1 648px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.split-side { flex: 1 1 424px; min-width: 0; display: flex; flex-direction: column; gap: 16px;
              padding-top: 56px; }
.section-head { display: flex; align-items: center; gap: 16px; min-height: 40px; }
.section-head h2 { flex: 1; margin: 0; font: 700 24px/40px var(--display); letter-spacing: .4px;
                   color: var(--navy); }
.flag-card { border: 1px solid var(--sky); display: flex; flex-direction: column; gap: 12px; }
.flag-top { display: flex; gap: 16px; align-items: flex-start; }
.flag-rank { flex: 1; text-align: right; font: 300 12px/16px var(--sans); color: var(--n700); }
.flag-rank strong { font-weight: 600; color: var(--navy); }
.flag-name { margin: 0; font: 600 16px/24px var(--sans); color: var(--navy); overflow-wrap: anywhere; }
.flag-code { margin: 0; font: 300 12px/16px var(--sans); color: var(--n700); }
.flag-reason { padding-bottom: 16px; border-bottom: 1px solid var(--sky); }
.flag-reason p { margin: 0; font: 400 14px/24px var(--sans); color: var(--n800); }
.flag-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.side-card { display: flex; flex-direction: column; gap: 16px; }
.side-card-head p { margin: 8px 0 0; font: 300 14px/24px var(--sans); color: var(--n600); }
.fix-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.fix-row { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px;
           border-bottom: 1px solid var(--sky); }
.fix-name { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 14px/24px var(--sans);
            color: var(--navy); }
.fix-detail { margin: 0; padding: 0 16px; font: 400 12px/16px var(--sans); color: var(--n600); }

/* ------------------------------------------------------------ report tabs */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.report-head { gap: 24px; }
.report-head .page-title { gap: 16px; }
.eyebrow { margin: 0; font: 600 16px/24px var(--sans); text-transform: uppercase; }
.report-head h1 { text-transform: uppercase; }
.tab-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tabs { display: flex; }
.tab { display: flex; align-items: center; height: 56px; padding: 0 24px; color: var(--white);
       font: 300 14px/24px var(--sans); text-decoration: none; border-bottom: 2px solid transparent; }
.tab.is-here { font-weight: 400; border-bottom-color: var(--white); }
.tab:hover { border-bottom-color: rgba(255, 255, 255, .4); }
.tab-count { font-weight: 500; white-space: pre; }
.btn-ghost .ico { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ risks */
.risk-layout { display: flex; gap: 16px; align-items: flex-start; }
.risk-card { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px;
             border: 1px solid var(--sky-half); }
.risk-card { transition: flex .3s var(--ease); }
.risk-layout.is-open .risk-card { flex: 0 1 679px; }
html[data-side="collapsed"] .risk-layout.is-open .risk-card { flex-basis: 933px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter { height: 32px; padding: 0 16px; border-radius: 30px; border: 1px solid var(--n100);
          background: var(--white); color: var(--n900); font: 400 12px/16px var(--sans); cursor: pointer; }
.filter strong { font-weight: 600; }
.filter.is-on { background: var(--navy); border-color: var(--navy); color: var(--white); }
.table-scroll { overflow-x: auto; }
.risk-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; }
.risk-table thead th { background: var(--sky-half); padding: 12px 8px; text-align: left;
                       font: 600 12px/16px var(--sans); color: var(--navy); white-space: nowrap; }
.risk-table thead th:first-child { border-radius: 16px 0 0 16px; padding-left: 16px; }
.risk-table thead th:last-child { border-radius: 0 16px 16px 0; }
.sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
        font: inherit; color: inherit; cursor: pointer; }
th[aria-sort="ascending"] .sort .ico { transform: rotate(180deg); }
.risk-table tbody td { padding: 16px 8px; border-bottom: 1px solid var(--sky-half); vertical-align: middle;
                       font: 400 12px/16px var(--sans); color: var(--n700); }
.risk-table tbody td:first-child { padding-left: 16px; }
.risk-row { cursor: pointer; }
.risk-row:hover td { background: rgba(226, 237, 247, .25); }
.risk-row.is-selected td { background: var(--sky-half); }
.risk-row.is-selected td:first-child { border-radius: 8px 0 0 8px; }
.risk-row.is-selected td:last-child { border-radius: 0 8px 8px 0; }
.c-n { width: 32px; font-weight: 600 !important; color: var(--n600) !important; }
.c-act { min-width: 220px; max-width: 280px; }
.act-name { display: block; font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }
.act-code { display: block; margin-top: 4px; font-weight: 300; }
.c-score { font-weight: 600 !important; color: var(--n800) !important; }
.c-go { width: 40px; }
.row-go { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px;
          background: none; cursor: pointer; padding: 0; }
.risk-row.is-selected .row-go { background: var(--sky); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px;
         flex-wrap: wrap; }
.pager-count { margin: 0; font: 400 12px/16px var(--sans); color: var(--n600); }
.pager-count strong { font-weight: 600; }
.pager-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-btn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 0;
            border-radius: 8px; background: none; font: 400 14px/24px var(--sans); color: var(--n900);
            cursor: pointer; }
.page-btn.is-here { background: var(--navy); color: var(--white); }
.page-btn:disabled { opacity: .5; cursor: default; }
.page-gap { font: 700 16px/1.4 var(--sans); padding: 0 8px; }
.risk-note { margin: 0; font: 300 12px/16px var(--sans); color: var(--n600); }

.risk-panel { flex: 1 1 411px; min-width: 0; display: flex; flex-direction: column; gap: 16px;
              border: 1px solid var(--sky); position: sticky; top: 16px;
              max-height: calc(100vh - 32px); }
.risk-panel[hidden] { display: none; }
.panel-close { align-self: flex-start; }
.panel-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel-top .pill { font-weight: 400; }
.panel-code { font: 300 12px/16px var(--sans); color: var(--n700); }
.panel-title { margin: 0; font: 600 16px/24px var(--sans); color: var(--navy); overflow-wrap: anywhere; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile { padding: 8px 16px; border-radius: 16px; background: var(--sky-half); }
.tile p { margin: 0; font: 400 14px/24px var(--sans); color: var(--n600); }
.tile .tile-v { font: 700 24px/40px var(--display); letter-spacing: .4px; color: var(--navy); }
.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.fact { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 8px;
        background: var(--cloud); font: 400 12px/16px var(--sans); color: var(--n800); cursor: help; }
.panel-wbs { margin: 0; font: 300 12px/16px var(--sans); color: var(--n600); }
.panel-stage { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 4px 8px 0;
               border-top: 1px solid var(--sky); }
.panel-face[hidden] { display: none; }
.dive-text p, .dive-text li { font: 400 14px/24px var(--sans); color: var(--n800); }
.dive-text p { margin: 0 0 12px; }
.dive-text strong { font-weight: 600; color: var(--navy); }
.dive-text .dive-list { margin: 0 0 12px; padding-left: 20px; }
.dive-text .dive-h { margin: 16px 0 8px; font: 600 14px/24px var(--sans); color: var(--navy); }
.dive-rule { border: 0; border-top: 1px solid var(--sky); margin: 16px 0; }
/* The report's "([1], p.17; [2], p.3)" as pills: its parentheses and separators
   are kept in the markup, for a reader of the text, and hidden on screen. */
.cites { white-space: nowrap; font-size: 0; }
a.cite { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; margin: 0 2px;
         border-radius: 8px; background: var(--cloud); color: var(--n900); text-decoration: none;
         font: 400 12px/16px var(--sans); vertical-align: baseline; }
a.cite:hover { background: var(--sky); }
.cite-unresolved, .panel-empty { margin: 0; font: 300 14px/24px var(--sans); color: var(--n600); }
.passage-back { margin-bottom: 12px; padding: 4px 12px; border: 1px solid var(--navy); border-radius: 16px;
                background: none; color: var(--navy); font: 400 12px/16px var(--sans); cursor: pointer; }
.passage-head { margin: 0 0 8px; font: 600 12px/16px var(--sans); color: var(--navy); }
.passage-text { white-space: pre-wrap; font: 400 13px/22px var(--sans); color: var(--n800); }
.passage-text mark { background: var(--amber50); color: inherit; }
.passage-gap { display: block; margin-top: 8px; font-style: italic; color: var(--n600); }
.panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px;
              border-top: 1px solid var(--sky); padding-top: 8px; }
.panel-sources { margin: 0; font: 400 12px/16px var(--sans); color: var(--navy); }
.panel-sources a { color: var(--navy); }
.dive-meta { margin: 0; font: 300 12px/16px var(--sans); color: var(--n600); }

/* Explain: the offer on a flag with no dive, its progress, and the note on an
   explanation a reader asked for. */
.explain-offer { margin: 12px 0 16px; font: 400 14px/24px var(--sans); color: var(--navy); }
.explain-btn { height: 40px; }
.explain-btn:disabled { opacity: .6; cursor: progress; }
.explain-progress { margin-top: 16px; }
.explain-now { margin: 0 0 8px; font: 600 14px/20px var(--sans); color: var(--navy); }
.explain-now.explain-error { font-weight: 400; color: var(--red300); }
.explain-steps { margin: 0; padding-left: 18px; font: 300 12px/18px var(--sans); color: var(--n600); }
.dive-asked { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--sky);
              font: 400 12px/18px var(--sans); color: var(--navy); }

/* --------------------------------------------------------- schedule health */
.health { display: flex; gap: 16px; align-items: flex-start; }
.health-card { flex: 1 1 793px; min-width: 0; display: flex; flex-direction: column; gap: 16px;
               border: 1px solid var(--sky-half); }
.health-card h2, .health-side h2, .unlock h2, .report-bits h2 { font: 600 18px/24px var(--sans); }
.health-sub { margin: 0; font: 300 16px/24px var(--sans); color: var(--n600); max-width: 680px; }
.health-note { margin: 0; font: 300 12px/16px var(--sans); color: var(--n600); }
.checks-panel { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--sky);
                border-radius: 16px; }
.check-row summary { display: flex; gap: 16px; align-items: flex-start; list-style: none; cursor: pointer; }
.check-row summary::-webkit-details-marker { display: none; }
.check-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px;
              border-bottom: 1px solid var(--sky); }
.check-name { display: flex; align-items: center; gap: 8px; font: 600 14px/24px var(--sans); color: var(--navy); }
.check-detail { padding-left: 16px; font: 400 12px/16px var(--sans); color: var(--n600); }
.check-status { flex: 0 0 64px; font: 600 12px/16px var(--sans); }
.s-red { color: var(--red300); } .s-amber { color: var(--navy); } .s-green { color: var(--green300); }
.check-row[open] .check-main { border-bottom-color: transparent; }
.check-more { margin: 0 80px 8px 16px; padding: 12px 16px; border-radius: 16px; background: var(--cloud);
              font: 400 12px/18px var(--sans); color: var(--n800); }
.check-more p { margin: 0 0 8px; }
.check-more .examples { margin: 0 0 8px; padding-left: 18px; }
.check-more .ex-name { display: block; font-weight: 600; color: var(--navy); }
.check-more .ex-meta { display: block; color: var(--n600); }
.check-point { color: var(--n600); }
.health-side { flex: 0 1 297px; display: flex; flex-direction: column; gap: 16px; }

/* ------------------------------------------------------------ data quality */
.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-value.v-good { color: var(--green300); }
.kpi-value.v-bad { color: var(--red300); }
.grade { margin-left: 8px; font: 500 12px/16px var(--sans); color: var(--n600); text-transform: uppercase;
         letter-spacing: .04em; vertical-align: middle; }
.unlock, .report-bits { display: flex; flex-direction: column; gap: 16px; }
.tiers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.tier { padding-bottom: 16px; border-bottom: 1px solid var(--sky); }
.tier-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 4px; }
.tier-state { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 30px;
              font: 500 12px/16px var(--sans); color: var(--n900); background: var(--sky); }
.tier-state.t-unlocked { background: var(--green50); }
.tier-state.t-locked { background: var(--red50); }
.tier-name { font: 600 14px/24px var(--sans); color: var(--navy); }
.tier-actual { font: 300 12px/16px var(--sans); color: var(--n600); }
.tier-line { margin: 0; font: 400 14px/24px var(--sans); color: var(--n800); }
.tier-needs { font-weight: 600; color: var(--navy); }
.report-note .note, .report-bits p { margin: 0 0 8px; font: 400 14px/24px var(--sans); color: var(--n800); }
.report-bits details { border-top: 1px solid var(--sky); padding: 8px 0; }
.report-bits summary { cursor: pointer; font: 600 14px/24px var(--sans); color: var(--navy); }
.report-bits ul { margin: 0 0 8px; padding-left: 20px; font: 400 14px/24px var(--sans); }

/* --------------------------------------------------------- source library */
.kpi[data-filter-after] { cursor: pointer; }
.kpi[data-filter-after].is-on { box-shadow: inset 0 0 0 2px var(--navy); }
.lib { display: flex; gap: 16px; align-items: flex-start; }
.lib-side { flex: 0 0 432px; display: flex; flex-direction: column; gap: 16px; }
.search { display: flex; flex-direction: column; gap: 8px; font: 400 12px/16px var(--sans); color: var(--n700); }
.search-light { color: var(--white); }
.search-box { position: relative; display: block; }
.search-box input { width: 100%; height: 48px; padding: 0 44px 0 16px; border: 1px solid var(--n200);
                    border-radius: 16px; background: var(--white); font: 400 14px/24px var(--sans);
                    color: var(--n800); }
.search-box input::placeholder { font-style: italic; color: var(--n600); }
.search-box .ico { position: absolute; right: 16px; top: 16px; }
.cat-list { display: flex; flex-direction: column; gap: 8px; padding: 24px 16px; }
.cat-row { display: flex; justify-content: space-between; gap: 8px; padding: 8px 16px; border: 0;
           border-radius: 8px; background: none; font: 300 12px/16px var(--sans); color: var(--n900);
           cursor: pointer; text-align: left; }
.cat-row span:last-child { font-weight: 500; }
.cat-row.is-on { background: var(--sky); font-weight: 500; }
.lib-card { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px;
            border: 1px solid var(--sky-half); }
.lib-chip { align-self: flex-start; margin: 0; padding: 8px 16px; border-radius: 30px; background: var(--navy);
            color: var(--white); font: 600 12px/16px var(--sans); }
.lib-head { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 16px;
            background: var(--sky-half); font: 600 12px/16px var(--sans); color: var(--navy); }
.doc-n { flex: 0 0 24px; font: 600 12px/16px var(--sans); color: var(--n600); }
.lib-head .doc-n { color: var(--navy); }
.doc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.doc-flags-h { flex: none; }
.doc-row summary { display: flex; align-items: center; gap: 16px; padding: 16px; list-style: none;
                   cursor: pointer; border-bottom: 1px solid var(--sky-half); }
.doc-row summary::-webkit-details-marker { display: none; }
.doc-row[open] summary { background: var(--sky-half); border-radius: 8px; }
.doc-name { font: 600 12px/16px var(--sans); color: var(--navy); overflow-wrap: anywhere; }
.doc-meta { display: flex; gap: 16px; flex-wrap: wrap; font: 300 12px/16px var(--sans); color: var(--n700); }
.doc-meta em { font-weight: 400; }
.doc-after { font-style: italic; color: var(--red300); }
.doc-flags { flex: none; min-width: 32px; height: 24px; padding: 0 8px; display: grid; place-items: center;
             border-radius: 8px; background: var(--sky); font: 500 12px/16px var(--sans); color: var(--n900); }
.doc-passages { list-style: none; margin: 0; padding: 8px 16px 16px 56px; display: flex; flex-direction: column;
                gap: 12px; }
.doc-cite { margin: 0 0 4px; font: 600 12px/16px var(--sans); color: var(--navy); }
.doc-cite a { color: var(--navy); }
.doc-passage .passage-text { max-height: 220px; overflow-y: auto; padding: 8px 12px; border-radius: 12px;
                             background: var(--cloud); }

/* --------------------------------------------------------------- glossary */
.gl-tools { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; max-width: 862px; }
.gl-tools .search { flex: 1 1 320px; }
.gl-filters .filter { background: transparent; color: var(--white); border-color: var(--n100);
                      font-weight: 600; }
.gl-filters .filter.is-on { background: var(--white); color: var(--navy); border-color: var(--white); }
.gl { display: flex; flex-direction: column; gap: 32px; }
.gl-section h2 { margin: 0 0 16px; padding-top: 16px; font: 700 24px/40px var(--display); letter-spacing: .4px;
                 color: var(--navy); }
.term-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.term { display: flex; flex-direction: column; gap: 16px; }
.term h3 { margin: 0; font: 600 18px/24px var(--sans); color: var(--navy); }
.term .card-body { flex: 1; }
.term-formula { margin: 0; padding: 8px 16px; border-radius: 16px; background: var(--sky-half);
                font: 400 14px/24px var(--sans); color: var(--n700); }
.term-seen { margin: 0; font: 400 12px/16px var(--sans); color: var(--n600); }
.term-seen strong { font-weight: 600; }
.term:target { box-shadow: inset 0 0 0 2px var(--navy); }
.gl-empty { color: var(--n600); }

/* -------------------------------------------------------------- Q&A Bot */
.qa-fab { position: fixed; right: 24px; bottom: 24px; z-index: 30; width: 56px; height: 56px;
          display: grid; place-items: center; border: 0; border-radius: 16px; cursor: pointer;
          background: var(--navy); color: var(--white); box-shadow: var(--shadow); }
.qa-fab:hover { background: var(--ocean); }
.qa-fab[aria-expanded="true"] { display: none; }
.qa-panel { position: fixed; right: 24px; bottom: 24px; z-index: 31; width: 380px;
            height: min(600px, calc(100vh - 48px)); display: flex; flex-direction: column;
            background: var(--white); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.qa-panel[hidden] { display: none; }
.qa-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 24px;
           background: var(--navy); color: var(--white); }
.qa-title { display: flex; align-items: center; gap: 8px; font: 600 16px/24px var(--sans); }
.qa-close { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px;
            background: var(--white); cursor: pointer; padding: 0; }
.qa-log { flex: 1; overflow-y: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.qa-hint { margin: 0; font: 400 12px/16px var(--sans); color: var(--n600); }
.qa-hint a { color: var(--navy); }
.qa-msg { max-width: 88%; padding: 8px 16px; border-radius: 16px; overflow-wrap: anywhere;
          font: 400 14px/22px var(--sans); }
.qa-msg p { margin: 0 0 6px; } .qa-msg p:last-child { margin-bottom: 0; }
.qa-msg ul { margin: 0 0 6px; padding-left: 18px; }
.qa-user { align-self: flex-end; background: var(--navy); color: var(--white); }
.qa-bot { align-self: flex-start; background: var(--cloud); color: var(--n800); }
.qa-bot.qa-error { background: var(--red50); }
.qa-bot.qa-pending::after { content: "…"; color: var(--n600); }
.qa-form { display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--sky); }
.qa-form textarea { flex: 1; resize: none; padding: 8px 12px; border: 1px solid var(--n200);
                    border-radius: 16px; font: 400 14px/20px var(--sans); color: var(--n800); }
.qa-form button { padding: 0 16px; border: 0; border-radius: 16px; background: var(--navy);
                  color: var(--white); cursor: pointer; }
.qa-form button:disabled { background: var(--n600); cursor: default; }

/* --------------------------------------------------- sign-in and small pages */
.card-page .band { height: 346px; }
.solo { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column;
        align-items: center; padding: 72px 16px 48px; gap: 32px; }
.solo-brand { text-align: center; }
.solo-brand .wordmark { display: inline-block; font-size: 40px; line-height: 56px; }
.solo-brand .wm-io { color: var(--io); }
.solo-brand .wordmark { color: var(--white); }
.solo-brand .tagline { color: var(--white); font-size: 14px; line-height: 24px; margin-top: 8px; }
.solo-card { width: 100%; max-width: 440px; padding: 32px; background: var(--white); border-radius: 16px;
             box-shadow: var(--shadow); }
.solo-card h1 { margin: 0; font: 600 24px/36px var(--display); color: var(--navy); }
.solo-sub { margin: 8px 0 24px; color: var(--n600); }
.solo-error { margin: 0 0 16px; padding: 8px 16px; border-radius: 16px; background: var(--red50);
              color: var(--navy); font-size: 14px; }
.solo-form { display: flex; flex-direction: column; gap: 8px; }
.solo-form label { font-weight: 500; color: var(--navy); }
.solo-form input { height: 48px; padding: 0 16px; border: 1px solid var(--n200); border-radius: 16px;
                   font: 400 16px/24px var(--sans); color: var(--n800); margin-bottom: 16px; }
.solo-card a { color: var(--navy); }

/* ------------------------------------------------------------------ motion */
/* The Risks panel, a reference's passage and a DCMA row move with script
   (static/risks.js, static/app.js); this switches every movement off for a reader
   who asks for less motion, as the downloaded report does. */
.check-asks { color: var(--navy); }
@media (prefers-reduced-motion: reduce) {
  .side, .main, .head-block, .risk-card { transition: none !important; }
}

/* ------------------------------------------------------------ narrower */
@media (max-width: 1280px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .risk-layout, .health { flex-direction: column; }
  .risk-layout.is-open .risk-card, .risk-panel, .health-card, .health-side { flex: none; width: 100%; }
  .risk-panel { position: static; max-height: none; }
  .lib { flex-direction: column; }
  .lib-side, .lib-card { flex: none; width: 100%; }
  .term-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { flex-direction: column; }
  .act, .split-side { flex: none; width: 100%; }
  .split-side { padding-top: 0; }
  .page-head { flex-direction: column; }
  .page-actions { justify-content: flex-start; }
}
@media (max-width: 900px) {
  .side { position: fixed; left: 0; top: 0; height: 100vh; min-height: 0; z-index: 40;
          box-shadow: var(--shadow); }
  /* On a narrow screen the sidebar is an overlay that slides in from the left. */
  .side { flex-basis: auto; padding: 24px 16px; margin-right: 0; opacity: 1;
          transform: none; transition: transform .3s var(--ease), visibility 0s; }
  @media (prefers-reduced-motion: reduce) { .side { transition: none !important; } }
  html:not([data-side="open"]) .side { transform: translateX(-105%); visibility: hidden;
                                        transition: transform .3s var(--ease), visibility 0s .3s; }
  html:not([data-side="open"]) .side-open { display: grid; }
  .app { padding-right: 16px; }
  .main, html[data-side="collapsed"] .main { padding-left: 16px; }
  .head-block, html[data-side="collapsed"] .head-block { padding-left: 32px; }
  .topbar { width: calc(100% - 112px); margin-left: 104px; }
  .top-actions .is-stub { display: none; }
}
@media (max-width: 640px) {
  .kpis, .kpis-3, .term-grid { grid-template-columns: minmax(0, 1fr); }
  .check-more { margin-right: 0; }
  .crumb:not(.crumb-here), .crumb-sep { display: none; }
  .qa-panel { right: 0; bottom: 0; width: 100vw; height: 100vh; border-radius: 0; }
}
@media print { .qa-fab, .qa-panel, .side, .side-open, .switcher, .topbar { display: none !important; } }