/* ==========================================================================
   Context Visualised · Halden report pages (hub + 19 reports) · October 2026
   GENERATED into assets/report.css by tools/report_pages.py from
   tools/report_boards/_base.css plus each board's <board>.css. Edit those, not the asset.
   Loaded after site.css; uses its tokens. Mobile first: 390px single column,
   bottom sheet; 600px+ side panel (480px); 960px+ two-column card lists.
   ========================================================================== */

/* ---- Page: hero, sections ---- */
.rp-hero { display: flex; flex-direction: column; gap: 16px; padding-top: 40px; padding-bottom: 32px; }
.rp-hero > * { max-width: 52rem; }
.rp-hero .crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 14px; color: var(--ink-2); }
.rp-hero .crumbs a { color: var(--ink-2); min-height: var(--tap); display: inline-flex; align-items: center; }
.rp-answer { font-size: 21px; line-height: 1.5; font-weight: 500; color: var(--ink); max-width: 40em; }
.rp-board { padding-bottom: 56px; }
.rp-sec { padding-top: 64px; padding-bottom: 64px; }
.copy-pending { outline: 1.5px dashed var(--muted); outline-offset: 4px; border-radius: 4px; }

/* ---- Board frame ---- */
.rb { display: flex; flex-direction: column; gap: 16px; background: var(--ground); border: 1px solid var(--muted); border-radius: 20px; padding: 24px; min-width: 0; }
.rb-head { display: flex; flex-direction: column; gap: 6px; }
.rb-head .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.rb-head .label { color: var(--ink); }
.rb-title { font-size: 26px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.rb-sub { font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 62em; }
.rb-foot { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border); padding-top: 12px; }
.rb-note { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 70em; }
.rb-source { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.rb-source b { color: var(--ink); font-weight: 600; }
.rb-h { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.rb-h-sm { font-size: 16px; font-weight: 700; line-height: 1.3; }
.rb-m { font-size: 13px; line-height: 1.45; color: var(--ink-2); font-variant-numeric: var(--tabular); }
.rb-t { font-size: 14.5px; line-height: 1.45; }
.rb .id { font-size: 12px; color: var(--ink-2); }

/* ---- Tiles ---- */
.rb-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.rb-tile { border: 1px solid var(--border); border-radius: var(--radius-tile); padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rb-tile .num { font-size: calc(22px * var(--num-scale)); }
.rb-tile .cap { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.rb-tile-sub { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: var(--tabular); }
.rb-tile-dark { background: var(--ink); border-color: var(--ink); }
.rb-tile-dark .num { color: var(--lemon); }
.rb-tile-dark .cap, .rb-tile-dark .rb-tile-sub { color: var(--on-ink-body); }
.rb-tile-alert { border: 1.5px solid var(--fail); }
.rb-tile-alert .num { color: var(--fail-text); }
.rb-tile-warn { border: 1.5px solid var(--amber); }

/* ---- Segmented tabs, filter chips ---- */
.rb-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--border); max-width: 560px; }
.rb-seg button { min-height: var(--tap); border: 0; border-radius: 9px; background: transparent; color: var(--ink); font-size: 15px; font-weight: var(--w-ui); cursor: pointer; padding: 0 10px; line-height: 1.2; }
.rb-seg button:hover { background: var(--surface); }
.rb-seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.rb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rb-chips button { min-height: var(--tap); padding: 0 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-size: 14.5px; font-weight: var(--w-ui); cursor: pointer; }
.rb-chips button:hover { background: var(--surface); }
.rb-chips button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.rb-filterbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.rb-select { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }
.rb-select select { font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--radius-chip); min-height: var(--tap); padding: 0 10px; max-width: 100%; }
.rb-count { font-size: 13.5px; color: var(--ink-2); font-variant-numeric: var(--tabular); }
.rb-linkbtn { min-height: var(--tap); background: none; border: 0; padding: 0 4px; color: var(--accent-deep); font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---- Cards ---- */
.rb-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
.rb-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rb-cardbtn { width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; min-height: var(--tap); }
.rb-cardbtn:hover { border-color: var(--accent-deep); }
.rb-cardbtn[aria-expanded="true"] { border-color: var(--ink); }
.rb-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; }
.rb-row-top { align-items: flex-start; }
.rb-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rb-cardbtn .chev, .rb-accbtn .chev { flex: none; color: var(--ink); transition: transform .15s ease; }
.rb-accbtn[aria-expanded="true"] .chev { transform: rotate(90deg); }
.rb-more { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--accent-deep); }

/* ---- Folder accordion ---- */
.rb-acc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
.rb-acc > li { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; min-width: 0; }
.rb-acc > li.is-open { border-color: var(--ink-3); }
.rb-accbtn { width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; min-height: var(--tap); }
.rb-accbtn:hover { background: var(--surface-2); }
.rb-accpanel { padding: 0 16px 16px; }
.rb-guide { margin-left: 4px; padding-left: 14px; border-left: 2px solid var(--muted); display: flex; flex-direction: column; gap: 10px; }

/* ---- Rows, bars, legend ---- */
.rb-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rb-rows > li { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border); }
.rb-rows > li:last-child { border-bottom: 0; }
.rb-rows .main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rb-rows .t { font-size: 14px; font-weight: 600; line-height: 1.35; }
.rb-rows .m { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; font-variant-numeric: var(--tabular); }
.rb-rows .side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; text-align: right; font-variant-numeric: var(--tabular); }
.rb-bar { display: flex; height: 10px; border-radius: 99px; background: var(--border); overflow: hidden; min-width: 0; }
.rb-bar > span { height: 100%; background: var(--ink); border-radius: 99px; }
.rb-bar.bare { background: transparent; }
.rb-hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rb-hbars li { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; }
.rb-hbars .v { font-weight: 700; font-variant-numeric: var(--tabular); text-align: right; }
.legend i { width: 12px; height: 8px; border-radius: 3px; display: inline-block; }
.pill-fail { background: var(--fail); color: var(--surface); }
.pill-solid { background: var(--ink); color: var(--surface); }
.pill-weak { background: var(--ink); color: var(--lemon); }

/* ---- Detail sheet (one per page) ---- */
html.rsheet-open { overflow: hidden; }
.rsheet-backdrop { position: fixed; inset: 0; background: rgba(31, 70, 81, 0.45); z-index: 60; }
.rsheet { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100%; z-index: 61; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 28px; overflow-y: auto; overscroll-behavior: contain; }
.rsheet[hidden], .rsheet-backdrop[hidden] { display: none; }
.rsheet-grab { display: none; }
.rsheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rsheet-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rsheet-title { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.rsheet-title:focus { outline: none; }
.rsheet-close { width: var(--tap); height: var(--tap); flex: none; border-radius: var(--radius-pill); border: 1.5px solid var(--ink); background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.rsheet-close:hover { background: var(--surface-2); }
.rsheet-body { display: flex; flex-direction: column; gap: 16px; }
.rdetail { display: flex; flex-direction: column; gap: 14px; }
.rsheet .rdetail-head { display: none; } /* the sheet header already shows kicker and title */
.rdetail-head h3 { font-size: 18px; font-weight: 700; }
.rdetail .lede { font-size: 15px; line-height: 1.55; }
.rb-kv { display: flex; flex-direction: column; gap: 3px; padding: 9px 0; border-top: 1px solid var(--border); }
.rb-kv .v { font-size: 14.5px; line-height: 1.45; font-variant-numeric: var(--tabular); }
.rb-sec { display: flex; flex-direction: column; gap: 8px; }
.rb-details { display: contents; }
.rb-panel { display: flex; flex-direction: column; gap: 12px; }

/* ---- What it tells us · What we did · Sources · Related ---- */
.rp-findings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.rp-finding { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.rp-finding .num { font-size: calc(30px * var(--num-scale)); }
.rp-finding p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.rp-finding b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.rp-actions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.rp-action { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.rp-action .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-action .t { font-size: 16.5px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.rp-action dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; font-size: 14px; line-height: 1.45; }
.rp-action dt { color: var(--ink-2); }
.rp-action dd { margin: 0; font-weight: 600; font-variant-numeric: var(--tabular); }
.rp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rp-chips li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); font-size: 14px; line-height: 1.35; }
.rp-chips li .label { color: var(--ink-2); }
.rp-related { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.rp-related a, .rp-related .is-soon { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; min-height: 100%; border-radius: var(--radius-tile); border: 1px solid var(--border); background: var(--surface); text-decoration: none; color: var(--ink); }
.rp-related a:hover { border-color: var(--accent-deep); color: var(--ink); }
.rp-related b { font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.rp-related .m { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.rp-related .why { font-size: 13px; color: var(--ink-2); }
.rp-related .soon, .hr-card .soon { align-self: flex-start; margin-left: 0; }

/* ---- Hub ---- */
.hr-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 40px; padding-bottom: 56px; }
.hr-hero-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hr-group { display: flex; flex-direction: column; gap: 16px; }
.hr-group + .hr-group { margin-top: 40px; }
.hr-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.hr-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; height: 100%; text-decoration: none; color: var(--ink); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); }
a.hr-card:hover { border-color: var(--accent-deep); color: var(--ink); }
.hr-card .q { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.hr-card .num { font-size: calc(26px * var(--num-scale)); margin-top: auto; padding-top: 6px; }
.hr-card .cap { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.hr-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.hr-intro { margin-bottom: 28px; }
.rp-list { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.rp-actions + .small { margin-top: -8px; }
.rp-src { display: flex; flex-direction: column; gap: 12px; max-width: 46em; }
.rp-finding p .link, .rp-src .link { font-weight: 500; }
.hr-card .more { font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Breakpoints ---- */
@media (min-width: 600px) {
  .rb-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rb-tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .rb-cards, .rb-acc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rb-cards.one, .rb-acc.one { grid-template-columns: minmax(0, 1fr); }
  .rb-acc > li.is-open.span { grid-column: 1 / -1; }
}
@media (max-width: 959px) {
  .hr-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .rb { padding: 14px; border-radius: 16px; gap: 14px; }
  .rb-title { font-size: 22px; }
  .rp-answer { font-size: 18px; }
  .rp-sec { padding-top: 48px; padding-bottom: 48px; }
  .rb-seg { max-width: none; }
  .rb-seg button { font-size: 14px; padding: 0 6px; }
  .rb-hbars li { grid-template-columns: minmax(80px, 110px) minmax(0, 1fr) auto; }
  .rsheet { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 85vh; border-left: 0; border-top: 1px solid var(--border); border-radius: 20px 20px 0 0; padding: 10px 16px 24px; }
  .rsheet-grab { display: block; width: 44px; height: 5px; border-radius: 99px; background: var(--muted); margin: 0 auto -4px; flex: none; }
  .rp-actions, .rp-findings, .rp-related, .hr-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .rb-cardbtn .chev, .rb-accbtn .chev { transition: none; }
}


/* ===== business-overview ===== */
/* Business overview (bo-) */
.bo-top, .bo-mid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.bo-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bo-about { gap: 12px; }
.bo-heads .bo-v { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.bo-heads .num { font-size: calc(22px * var(--num-scale)); }
.bo-classes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.bo-classes li { display: flex; flex-direction: column; gap: 6px; }
.bo-classes b { font-size: 15px; font-weight: 700; }
.bo-cv { display: flex; align-items: center; gap: 8px; }
.bo-stack { display: flex; height: 14px; border-radius: 99px; overflow: hidden; gap: 2px; }
.bo-ccy { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; }
.bo-ccy li { display: flex; align-items: center; gap: 6px; }
.bo-ccy i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.bo-mapwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-tile); background: var(--surface-2); }
.bo-map { display: block; width: 100%; min-width: 640px; height: auto; }
.bo-regions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; }
.bo-regions li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.bo-regions li b { margin-left: auto; }
@media (min-width: 600px) { .bo-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .bo-top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .bo-mid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
}


/* ===== plan-by-product ===== */
/* Plan by product (pp-) */
.pp-card { display: flex; flex-direction: column; gap: 10px; }
.pp-top { display: flex; align-items: center; gap: 10px; width: 100%; }
.pp-ico { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--tint); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.pp-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.pp-name b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.pp-circs { display: flex; gap: 5px; flex: none; }
.pp-c { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pp-circ { width: 34px; height: 34px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; font-variant-numeric: var(--tabular); }
.pp-ink { color: var(--ink); } .pp-milk { color: var(--surface); }
.pp-cl { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.pp-gwp { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pp-gwp .num { font-size: calc(24px * var(--num-scale)); }
.pp-blk { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.pp-lab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pp-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--border); width: 100%; }
.pp-bar > span { height: 100%; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--muted); background: var(--surface); font-variant-numeric: var(--tabular); }
.pp-chip i { width: 9px; height: 9px; border-radius: 99px; display: inline-block; }
.pp-total { border: 1.5px solid var(--ink); }
.pp-acc .rb-accbtn { padding: 16px; }
.pp-acc .rb-more { align-self: flex-end; }
.pp-line .pp-name b { font-size: 15.5px; }
.pp-key .legend { margin-bottom: 4px; }
@media (max-width: 599px) {
  .pp-line .pp-ico { display: none; }
  .pp-line { padding: 12px; }
  .pp-acc .rb-guide { padding-left: 10px; margin-left: 0; }
  .pp-acc .rb-accpanel { padding: 0 10px 12px; }
  .pp-circ { width: 30px; height: 30px; font-size: 12px; }
}


/* ===== risk-appetite ===== */
/* Risk appetite (ra-) */
.ra-rag .ra-ragtop { display: flex; align-items: center; gap: 8px; }
.ra-cat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ra-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ra-name b { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.ra-dots { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ra-dots .rb-m { margin-left: 6px; }
.ra-kri { background: var(--surface); }
.ra-kri .kri-name b { font-size: 15px; }
.ra-risks { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border); padding-top: 10px; }
.ra-risks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ra-risks li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13.5px; line-height: 1.35; }
.ra-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ra-node { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--muted); background: var(--surface); }
.ra-node-0 { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.ra-node-1 { background: var(--tint); }
.ra-node-3 { background: var(--tint); }
.ra-arrow { color: var(--ink-2); }
.rb-chips .dot { margin-right: 6px; }
.ra-linkpanel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ra-graph { width: 100%; height: auto; display: block; max-width: 520px; margin: 0 auto; }
.ra-leg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ra-leg ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.4; }
.ra-leg li { display: flex; gap: 8px; align-items: center; }
.ra-leg li b { margin-left: auto; font-weight: 700; }
.ra-k { font-family: var(--font-data); font-size: 11px; font-weight: 700; width: 26px; height: 26px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--ink); }
.ra-k-green { background: var(--green); } .ra-k-amber { background: var(--amber); } .ra-k-fail { background: var(--fail); color: var(--surface); }
@media (min-width: 960px) {
  .ra-linkpanel { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}


/* ===== orsa ===== */
/* ORSA (or-) */
.or-proj { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.or-proj li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 52px; gap: 10px; align-items: center; }
.or-y { display: flex; flex-direction: column; font-size: 12.5px; color: var(--ink-2); }
.or-y b { font-size: 15px; color: var(--ink); }
.or-bars { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.or-b { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.or-b > span:first-child { height: 10px; border-radius: 99px; }
.or-held, .or-lg-held { background: var(--ink); }
.or-req, .or-lg-req { background: #9EC0CC; }
.or-cov { font-weight: 700; font-size: 15px; text-align: right; }
.or-stack { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 2px; }
.or-scale { display: flex; height: 8px; border-radius: 99px; overflow: hidden; margin: 4px 2px 0; }
.or-ticks { position: relative; height: 16px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); margin: 0 2px; }
.or-ticks span { position: absolute; transform: translateX(-50%); }
.or-stress { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.or-stress li { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--border); }
.or-stress .main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.or-stress .main b { font-size: 15px; font-weight: 600; }
.or-res { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.or-res .num { font-size: 22px; }
.or-move { position: relative; height: 16px; margin: 0 2px; }
.or-line { position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--border); }
.or-fall { position: absolute; top: 6px; height: 4px; opacity: 0.5; }
.or-from { position: absolute; top: 3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 99px; border: 2px solid var(--ink); background: var(--surface); box-sizing: border-box; }
.or-to { position: absolute; top: 1px; width: 14px; height: 14px; margin-left: -7px; border-radius: 99px; }
.or-green { background: var(--green); } .or-amber { background: var(--amber); } .or-fail { background: var(--fail); }
.or-stress .pill { align-self: flex-start; }
.or-reverse { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.or-reverse .label { color: var(--on-ink-2); }
.or-reverse p { font-size: 16px; line-height: 1.55; }
.or-reverse .num { color: var(--lemon); font-size: 22px; }
.or-concl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.or-concl li { display: flex; gap: 12px; align-items: flex-start; }
.or-n { width: 28px; height: 28px; flex: none; border-radius: 99px; background: var(--ink); color: var(--surface); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.or-sign { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.or-sign li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.or-sign li:first-child { border-top: 0; }
.or-date { font-weight: 700; font-size: 14px; }
[data-board="orsa"] .rb-panel { display: flex; flex-direction: column; gap: 12px; }
[data-board="orsa"] .rb-panel[hidden] { display: none; }
@media (min-width: 960px) {
  #or-p-a, #or-p-c { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  #or-p-a > :first-child { grid-column: 1 / -1; }
  #or-p-c > :first-child { grid-row: span 2; }
}


/* ===== risk-taxonomy ===== */
.tx-scr { gap: 8px; }
.tx-scrbar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; gap: 2px; }
.tx-scrbar span { height: 100%; }
.tx-badge { width: 44px; height: 44px; flex: none; border-radius: 10px; border: 1.5px solid; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-data); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; }
.tx-cn { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.rb-acc .rb-row { gap: 12px; }
.tx-subhead { display: grid; grid-template-columns: minmax(0, 1fr) 76px 84px 34px 18px; gap: 8px; padding: 0 10px 6px; font-size: 12px; color: var(--ink-2); border-bottom: 1px solid var(--border); }
.tx-subs { list-style: none; margin: 0; padding: 0; }
.tx-subbtn { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 76px 84px 34px 18px; gap: 8px; align-items: center; min-height: var(--tap); padding: 8px 10px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.tx-subbtn:hover { background: var(--surface-2); }
.tx-sub-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tx-sub-n .t { font-size: 14px; font-weight: 600; }
.tx-sub-scr { font-size: 14px; font-weight: 700; }
.tx-sub-c { font-size: 14px; text-align: right; }
.tx-ctl { display: inline-flex; align-items: center; gap: 4px; }
.tx-dot { width: 10px; height: 10px; border-radius: 99px; border: 1.5px solid var(--accent-deep); display: inline-block; }
.tx-dot.on { background: var(--accent-deep); }
.tx-heat-top { flex-wrap: wrap; }
.tx-heat-top .rb-seg { min-width: 240px; }
.tx-heat { display: grid; grid-template-columns: 22px minmax(0, 420px); grid-template-rows: auto auto; gap: 6px; }
.tx-ax-y { grid-row: 1; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 600; color: var(--ink-2); text-align: center; }
.tx-ax-x { grid-column: 2; font-size: 12px; font-weight: 600; color: var(--ink-2); text-align: center; }
.tx-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.tx-cell { aspect-ratio: 1; min-height: 44px; border-radius: 8px; border: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-text); font-size: 18px; font-weight: 700; font-variant-numeric: var(--tabular); color: var(--ink); padding: 0; }
button.tx-cell { cursor: pointer; }
button.tx-cell:hover { outline: 2px solid var(--ink); outline-offset: 1px; }
.tx-high { background: var(--ink); color: var(--lemon); }
.tx-medium { background: #9EC0CC; }
.tx-low { background: #DDF7DD; }
.tx-empty { opacity: 0.35; }
.legend i.tx-high, .legend i.tx-medium, .legend i.tx-low { width: 12px; height: 12px; }
.tx-radar-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.tx-radar { width: 100%; max-width: 460px; height: auto; margin: 0 auto; overflow: hidden; }
.tx-rlabel { font-family: var(--font-text); font-size: 12px; font-weight: 600; fill: var(--ink); }
.tx-rtick { font-family: var(--font-text); font-size: 10px; fill: var(--ink-2); }
.tx-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: var(--tabular); }
.tx-table th, .tx-table td { text-align: right; padding: 7px 8px; border-bottom: 1px solid var(--border); }
.tx-table th:first-child { text-align: left; font-weight: 600; }
.tx-table thead th { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 759px) { .tx-radar-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) {
  .tx-subhead, .tx-subbtn { grid-template-columns: minmax(0, 1fr) 64px 70px 26px 18px; gap: 6px; padding-left: 4px; padding-right: 4px; }
  .tx-sub-w .pill { padding: 2px 6px; letter-spacing: 0.08em; }
}
.tx-sheet-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 599px) {
  .tx-table { table-layout: fixed; font-size: 13px; }
  .tx-table th:first-child { width: 36%; }
  .tx-table th, .tx-table td { padding: 7px 4px; }
  .tx-table thead th { letter-spacing: 0.04em; font-size: 11px; white-space: normal; }
}


/* ===== risk-register ===== */
.rr-of { font-size: 0.6em; color: var(--ink-2); }
.rr-filters { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.rr-fg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rr-fg > .label { min-width: 120px; }
.rr-table { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.rr-list { list-style: none; margin: 0; padding: 0; }
.rr-list > li { border-top: 1px solid var(--border); }
.rr-list > li.is-open { background: var(--surface-2); }
.rr-empty { padding: 16px; }
.rr-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 16px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; min-height: var(--tap); align-items: start; }
.rr-row:hover { background: var(--surface-2); }
.rr-row .chev { transition: transform .15s ease; grid-column: 2; grid-row: 1; }
.rr-row[aria-expanded="true"] .chev { transform: rotate(90deg); }
.rr-risk { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rr-risk .t { font-size: 15px; font-weight: 600; line-height: 1.35; }
.rr-k { display: block; font-size: 12px; color: var(--ink-2); font-weight: 500; }
.rr-cls, .rr-ent, .rr-own { font-size: 13.5px; line-height: 1.4; display: flex; flex-direction: column; gap: 2px; }
.rr-head { display: none; }
.rr-panel { padding: 0 16px 16px; }
.rr-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; border-left: 2px solid var(--muted); padding-left: 14px; }
.rr-detail > div { display: flex; flex-direction: column; gap: 4px; }
.rr-ctl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; }
.rr-ctl li { display: flex; align-items: center; gap: 6px; }
/* Mobile and tablet: stacked rows */
@media (max-width: 959px) {
  .rr-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rr-id { grid-column: 1 / 3; grid-row: 1; }
  .rr-row .chev { grid-column: 3; grid-row: 1; justify-self: end; }
  .rr-risk { grid-column: 1 / -1; }
  .rr-cls, .rr-ent, .rr-own { grid-column: 1 / -1; display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 8px; }
  .rr-cls .rb-m { grid-column: 2; }
  .rr-sc, .rr-ce { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
  .rr-ce .pill { white-space: normal; }
}
/* Web: a grid table */
@media (min-width: 960px) {
  .rr-head, .rr-row { display: grid; grid-template-columns: 72px minmax(0, 2.4fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.2fr) 100px 100px 176px 18px; gap: 12px; align-items: start; }
  .rr-head { padding: 10px 16px; font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); background: var(--surface-2); }
  .rr-row .chev { grid-column: auto; grid-row: auto; }
  .rr-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rr-detail { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-left: 84px; }
  .rr-sc .pill, .rr-ce .pill { white-space: nowrap; }
}


/* ===== controls ===== */
.ct-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.ct-score { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.ct-score .num { font-size: calc(22px * var(--num-scale)); }
.ct-bar { width: 100%; }
.ct-counts { font-size: 12.5px; }
.ct-radar-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.ct-radar { width: 100%; max-width: 460px; height: auto; margin: 0 auto; overflow: hidden; }
.ct-rlabel { font-family: var(--font-text); font-size: 11.5px; font-weight: 600; fill: var(--ink); }
.ct-rtick { font-family: var(--font-text); font-size: 10px; fill: var(--ink-2); }
.ct-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: var(--tabular); }
.ct-table th, .ct-table td { text-align: right; padding: 7px 8px; border-bottom: 1px solid var(--border); }
.ct-table th:first-child { text-align: left; font-weight: 600; }
.ct-table thead th { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.ct-key { margin: 0; }
@media (max-width: 759px) { .ct-radar-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) {
  .ct-table { table-layout: fixed; font-size: 13px; }
  .ct-table th:first-child { width: 36%; }
  .ct-table th, .ct-table td { padding: 7px 4px; }
  .ct-table thead th { letter-spacing: 0.04em; font-size: 11px; white-space: normal; }
}


/* ===== emerging-risks ===== */
.er-tt { display: flex; align-items: center; gap: 8px; }
.er-k { width: 12px; height: 12px; border-radius: 99px; display: inline-block; border: 1.5px solid var(--ink); flex: none; }
.er-k.er-reg { background: var(--ink); }
.er-k.er-watch { background: var(--accent-deep); }
.er-k.er-hor { background: var(--surface); }
.er-legend i.er-k { width: 12px; height: 12px; border-radius: 99px; }
.er-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.er-radar-grid { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 28px; align-items: center; }
.er-radar { position: relative; width: 100%; aspect-ratio: 1; }
.er-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.er-ring { font-family: var(--font-text); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--ink-2); }
.er-bub { position: absolute; aspect-ratio: 1; min-width: 30px; transform: translate(-50%, -50%); border-radius: 99px; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-text); font-size: 14px; font-weight: 700; font-variant-numeric: var(--tabular); cursor: pointer; padding: 0; }
.er-bub.er-reg { background: var(--ink); color: var(--surface); }
.er-bub.er-watch { background: var(--accent-deep); color: var(--surface); }
.er-bub.er-hor { background: var(--surface); color: var(--ink); }
.er-bub:hover { outline: 3px solid var(--secondary, #9EC0CC); outline-offset: 1px; }
.er-bub[aria-expanded="true"] { outline: 3px solid var(--ink); outline-offset: 2px; }
.er-side { display: flex; flex-direction: column; gap: 14px; }
.er-sectors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13.5px; }
.er-sectors li { display: contents; }
.er-sectors b { font-weight: 600; color: var(--ink-2); }
.er-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; }
.er-main { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.er-n { width: 32px; height: 32px; border-radius: 99px; border: 2px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none; }
.er-n.er-reg { background: var(--ink); color: var(--surface); }
.er-n.er-watch { background: var(--accent-deep); color: var(--surface); }
.er-n.er-hor { background: var(--surface); color: var(--ink); }
.er-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.er-fv { font-size: 16px; font-weight: 700; line-height: 1.3; }
.er-promo { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--ink); color: var(--surface); }
.er-promo .label { color: var(--on-ink-2); }
.er-promo .id { color: var(--lemon); }
.er-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.er-step { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.er-step b { font-size: 16px; font-weight: 700; }
.er-step p { font-size: 14px; line-height: 1.5; margin: 4px 0; }
.er-sn { width: 30px; height: 30px; border-radius: 99px; background: var(--ink); color: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none; }
@media (max-width: 959px) {
  .er-radar-grid { grid-template-columns: minmax(0, 1fr); }
  .er-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) { .er-bub { font-size: 12px; min-width: 26px; } }


/* ===== process-map ===== */
/* Process map: overview tube maps, line accordions with stops, station flows */
#pm-p-f, #pm-p-b { display: flex; flex-direction: column; gap: 12px; }
.pm-ov { gap: 12px; }
.pm-svgwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
.pm-svg { display: block; width: 100%; min-width: 340px; max-width: 680px; height: auto; margin: 0 auto; }
.pm-xnote { display: inline-flex; align-items: center; gap: 6px; }
.pm-lbar { width: 6px; align-self: stretch; min-height: 40px; border-radius: 99px; flex: none; }
.pm-lmain { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.pm-stops { list-style: none; margin: 0 0 0 6px; padding: 0; position: relative; display: flex; flex-direction: column; }
.pm-stops::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 4px; border-radius: 99px; background: var(--pm-c); }
.pm-stop { position: relative; display: flex; gap: 14px; padding: 8px 0; align-items: flex-start; }
.pm-dot { position: relative; z-index: 1; width: 14px; height: 14px; margin-top: 3px; border-radius: 99px; background: var(--surface); border: 2.5px solid var(--pm-c); flex: none; }
.pm-ix .pm-dot { border-color: var(--ink); border-width: 3px; width: 16px; height: 16px; margin-left: -1px; }
.pm-stop-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pm-stop-n { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; }
.pm-sn { font-weight: 700; }
.pm-go { align-self: flex-start; min-height: var(--tap); display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; border-radius: var(--radius-pill); border: 0; background: var(--ink); color: var(--surface); font-weight: 700; font-size: 14.5px; cursor: pointer; }
.pm-go .chev { width: 14px; height: 14px; }
.pm-go[aria-expanded="true"] { background: var(--ink-2); }
.pm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 2px 9px; border-radius: var(--radius-pill); border: 1px solid var(--muted); }
.pm-chip-x { border: 1px dashed var(--ink); }
.pm-chip i { width: 12px; height: 4px; border-radius: 2px; display: inline-block; }
.pm-loop { padding-left: 26px; }
/* station */
.pm-station { display: flex; flex-direction: column; gap: 12px; border-top: 2px solid var(--ink); padding-top: 16px; }
.pm-back { align-self: flex-start; min-height: var(--tap); display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0 6px; color: var(--ink); font-size: 15.5px; font-weight: 600; cursor: pointer; }
.pm-sthead { gap: 8px; }
.pm-sthead h3:focus { outline: none; }
.pm-flow { display: flex; flex-direction: column; }
.pm-arrow { display: flex; justify-content: center; padding: 4px 0; }
.pm-card { padding: 14px 16px; }
.pm-step { display: flex; align-items: center; gap: 12px; width: 100%; }
.pm-step-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.pm-num { width: 30px; height: 30px; border-radius: 99px; background: var(--ink); color: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; font-variant-numeric: var(--tabular); flex: none; }
.pm-cm { align-self: flex-start; font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--tint); }
.pm-dec { display: flex; flex-direction: column; gap: 8px; }
.pm-q { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px dashed var(--ink-2); border-radius: 14px; }
.pm-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pm-branch { align-self: flex-start; font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 1px 8px; border-radius: var(--radius-pill); }
.pm-branch-a { background: var(--ink); color: var(--surface); } .pm-branch-b { background: var(--border); color: var(--ink); }
/* activity sheet */
.pm-io { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pm-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pm-tags li { font-size: 13.5px; line-height: 1.35; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
.pm-tags-out li { background: var(--tint); }
.pm-inc { gap: 4px; padding: 12px; border: 1.5px solid var(--ink); }
@media (max-width: 599px) {
  .pm-branches, .pm-io { grid-template-columns: minmax(0, 1fr); }
}


/* ===== governance ===== */
/* Governance: committee tree, calendar, cascade drawings */
#gv-p-tree, #gv-p-cal, #gv-p-flow, [id^="gv-qp-"] { display: flex; flex-direction: column; gap: 14px; }
.gv-brd { background: #1F4651; color: var(--surface); } .gv-bc { background: #6B4FA0; color: var(--surface); }
.gv-exc { background: #1E9E9E; color: var(--ink); } .gv-mgt { background: #2F6FB5; color: var(--surface); } .gv-wg { background: #9EC0CC; color: var(--ink); }
.gv-key i { width: 10px; height: 10px; border-radius: 3px; }
.gv-tree { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gv-tree > li { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; min-width: 0; }
.gv-tree > li.is-open { border-color: var(--ink-3); }
.gv-tree .rb-guide { margin: 4px 12px 12px 18px; }
.gv-node { display: flex; align-items: flex-start; gap: 10px; width: 100%; }
.gv-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.gv-badge { font-family: var(--font-data); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; padding: 4px 7px; border-radius: 8px; flex: none; min-width: 42px; text-align: center; }
.gv-kidn { flex: none; align-self: center; }
.gv-panel { padding: 0 0 4px; }
.gv-info { display: flex; flex-direction: column; gap: 4px; padding: 0 16px 10px 68px; }
.gv-info b { color: var(--ink); font-weight: 600; }
/* calendar */
.gv-month { display: flex; flex-direction: column; gap: 8px; }
.gv-meets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gv-meet { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px; }
.gv-meet-warn { border: 1.5px solid var(--ink); }
.gv-date { width: 48px; flex: none; border-radius: 10px; padding: 6px 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gv-date span { font-family: var(--font-data); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.gv-date b { font-family: var(--font-data); font-weight: 700; font-size: 22px; line-height: 1; }
.gv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.gv-chip { font-size: 12.5px; font-variant-numeric: var(--tabular); padding: 2px 9px; border-radius: 10px; border: 1px solid var(--muted); color: var(--ink-2); }
.gv-chip-sched { border: 1.5px solid var(--ink); color: var(--ink); font-weight: 600; }
/* cascade */
.gv-qseg { max-width: 640px; }
.gv-qseg button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 6px; }
.gv-ql { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.gv-qd { font-size: 12px; font-weight: 500; }
.gv-qn { font-size: 11.5px; font-weight: 700; padding: 0 6px; border-radius: 99px; background: var(--fail); color: var(--surface); }
.gv-qn-sched { background: transparent; border: 1px solid currentColor; color: inherit; }
.gv-qn-ok { background: transparent; color: inherit; font-weight: 500; }
.gv-draw { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 8px; }
.gv-svg { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; }
.gv-oos { border: 1.5px solid var(--fail); gap: 4px; }
.gv-oos-sched { border: 1.5px solid var(--ink); }
@media (max-width: 599px) {
  .gv-info { padding-left: 16px; }
  .gv-qseg button { font-size: 13px; }
  .gv-qd { font-size: 11px; }
}


/* ===== policies ===== */
/* Policies: log cards, principle accordions in the sheet, the system-of-governance house */
.po-pr-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.po-kris { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.po-dot { width: 10px; height: 10px; border-radius: 99px; display: inline-block; }
.po-dot-R { background: var(--fail); } .po-dot-A { background: var(--amber); } .po-dot-G { background: var(--green); }
.po-pr { display: flex; align-items: flex-start; gap: 10px; width: 100%; }
.po-num { width: 28px; height: 28px; flex: none; border-radius: 99px; background: var(--ink); color: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-variant-numeric: var(--tabular); }
.po-head { gap: 12px; }
.po-dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; font-size: 13.5px; }
.po-dl dt { color: var(--ink-2); } .po-dl dd { margin: 0; font-weight: 700; font-variant-numeric: var(--tabular); }
.rsheet .rb-acc .rb-accbtn { padding: 12px; }
.rsheet .rb-accpanel { padding: 0 12px 12px; }
/* house */
.po-house { display: flex; flex-direction: column; gap: 8px; }
.po-roof { background: var(--ink); color: var(--surface); clip-path: polygon(50% 0, 100% 34%, 100% 100%, 0 100%, 0 34%); padding: 64px 16px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.po-roof .label { color: var(--on-ink-2); }
.po-roof b { font-size: 18px; font-weight: 700; }
.po-roofbtn { min-height: var(--tap); padding: 0 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--lemon); background: transparent; color: var(--lemon); font-weight: 700; font-size: 14.5px; cursor: pointer; }
.po-roofbtn:focus-visible { outline-color: var(--accent); }
.po-beam { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.po-beam li { background: #6B4FA0; color: var(--surface); border-radius: 8px; padding: 6px 8px; font-size: 12.5px; font-weight: 700; text-align: center; }
.po-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.po-pillar { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid #1E9E9E; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.po-pillar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.po-item { width: 100%; min-height: var(--tap); display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; }
.po-item b { font-size: 14px; font-weight: 700; }
.po-item:hover { border-color: var(--accent-deep); }
.po-item-fail { border: 1.5px solid var(--fail); }
.po-st { width: 8px; height: 8px; border-radius: 99px; display: inline-block; margin-right: 5px; }
.po-st-fail { background: var(--fail); } .po-st-ok { background: var(--accent-deep); } .po-st-due { background: var(--ink-3); }
.po-lines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.po-lines li { background: var(--tint); border-radius: 8px; padding: 8px; font-size: 12.5px; line-height: 1.4; text-align: center; display: flex; flex-direction: column; }
.po-base { background: var(--ink); color: var(--surface); border-radius: 8px; padding: 12px; text-align: center; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.po-base span { color: var(--on-ink-body); }
@media (max-width: 599px) {
  .po-pillars, .po-beam { grid-template-columns: minmax(0, 1fr); }
  .po-beam { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .po-lines { grid-template-columns: minmax(0, 1fr); }
  .po-roof { padding-top: 48px; }
}
#po-p-log, #po-p-fw { display: flex; flex-direction: column; gap: 14px; }


/* ===== policy-wordings ===== */
/* Policy wordings: line cards with clause chips, exceptions inside */
.pw-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pw-sub { display: flex; align-items: center; gap: 4px; }
.pw-sub .chev { width: 14px; height: 14px; }
.pw-std { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.pw-std .num { font-size: 22px; }
.pw-prop.label { color: var(--ink); } .pw-spec.label { color: var(--accent-deep); } .pw-cas.label { color: #6B4FA0; } .pw-cyb.label { color: #2F6FB5; }
.pw-bar { height: 8px; }
.pw-bar.pw-prop > span { background: var(--ink); } .pw-bar.pw-spec > span { background: #1E9E9E; }
.pw-bar.pw-cas > span { background: #6B4FA0; } .pw-bar.pw-cyb > span { background: #2F6FB5; }
.pw-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-variant-numeric: var(--tabular); padding: 3px 9px; border-radius: var(--radius-pill); border: 1px solid var(--muted); color: var(--ink); }
.pw-chip-ex { border-color: var(--ink); }
.pw-chip-fail { background: var(--fail); border-color: var(--fail); color: var(--surface); font-weight: 600; }
.pw-clause { padding: 12px 14px; gap: 8px; }
.pw-clause-fail { border: 1.5px solid var(--fail); }
.pw-ex { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
.pw-clause .rb-row .pill { white-space: normal; text-align: right; }
.pw-ex .pill { white-space: normal; }


/* ===== complaints ===== */
.cp-chart { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: 4px; height: 134px; }
.cp-chart li { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.cp-n { font-size: 12px; font-weight: 700; font-variant-numeric: var(--tabular); }
.cp-m { font-size: 12px; color: var(--ink-2); }
.cp-col { width: 70%; max-width: 40px; display: flex; flex-direction: column; justify-content: flex-end; background: #9EC0CC; border-radius: 4px 4px 0 0; overflow: hidden; }
.cp-col > span { background: var(--ink); display: block; }
.cp-sw-up { background: var(--ink); } .cp-sw-all { background: #9EC0CC; }
.cp-big { font-size: 18px; font-weight: 700; font-variant-numeric: var(--tabular); }
.cp-duty { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 2px; }
.cp-causes li { grid-template-columns: minmax(110px, 170px) minmax(0, 1fr) auto; }
.cp-rtop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; }
.cp-wrap { white-space: normal; }
#cp-rec + .rb-rows .main { flex: 1 1 auto; }


/* ===== reporting-calendar ===== */
.rc-months { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.rc-month { display: flex; flex-direction: column; gap: 8px; }
.rc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rc-item { display: flex; gap: 12px; align-items: stretch; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.rc-risk { border: 1.5px solid var(--fail); }
.rc-date { flex: none; width: 52px; border-radius: 9px; color: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 0; }
.rc-wd { font-size: 12px; font-weight: 600; }
.rc-day { font-family: var(--font-data); font-weight: 700; font-size: 22px; line-height: 1.05; }
.rc-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.rc-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 4px 10px; }
.rc-n { font-size: 15px; font-weight: 600; line-height: 1.35; }
.rc-note { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.rc-fail { color: var(--fail-text); font-weight: 600; }
.rc-feeds { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accent-deep); font-weight: 600; line-height: 1.4; }
.rc-feeds svg { flex: none; }
.rc-trow { justify-content: flex-start; flex-wrap: wrap; gap: 4px 10px; }
.rc-code { font-size: 14px; font-weight: 700; }
@media (min-width: 960px) {
  .rc-months { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  #rc-p-tpl .rb-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  #rc-p-tpl .rb-rows > li:nth-last-child(2) { border-bottom: 0; }
}
#rc-p-cal, #rc-p-tpl { display: flex; flex-direction: column; gap: 14px; }


/* ===== large-claims ===== */
.lc-track { position: relative; height: 96px; }
.lc-axis { position: absolute; left: 0; right: 0; top: 48px; height: 2px; background: var(--muted); }
.lc-future { position: absolute; left: 75%; right: 0; top: 0; bottom: 0; border-radius: 6px; background: repeating-linear-gradient(135deg, transparent 0 6px, var(--border) 6px 7px); }
.lc-bub { position: absolute; top: 49px; transform: translate(-50%, -50%); min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 99px; }
.lc-dot { display: block; border-radius: 99px; border: 2px solid var(--surface); opacity: 0.9; }
.lc-dot.lc-cat { border-radius: 4px; transform: rotate(45deg) scale(0.78); }
.lc-bub:hover .lc-dot, .lc-bub[aria-expanded="true"] .lc-dot { opacity: 1; outline: 2px solid var(--ink); outline-offset: 1px; }
.lc-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); font-size: 12px; color: var(--ink-2); }
.lc-months span { text-align: left; }
.lc-key-cat { width: 9px !important; height: 9px !important; background: var(--ink); transform: rotate(45deg); border-radius: 2px !important; }
.lc-key-fut { background: repeating-linear-gradient(135deg, transparent 0 2px, var(--ink-3) 2px 3px); }
.lc-card { gap: 10px; }
.lc-cardtop { display: flex; gap: 12px; align-items: stretch; width: 100%; }
.lc-stripe { width: 6px; border-radius: 99px; flex: none; }
.lc-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.lc-main .id { white-space: normal; }
.lc-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; font-variant-numeric: var(--tabular); }
.lc-amt b { font-size: 17px; font-weight: 700; }
.lc-cardtop .chev { align-self: center; }
.lc-gauge { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.lc-gauge .rb-bar { height: 6px; }
.lc-st .lc-v { font-size: 20px; font-weight: 700; font-variant-numeric: var(--tabular); }
.lc-st .rb-tile-dark .lc-v { color: var(--lemon); font-family: var(--font-data); }
.lc-split { display: flex; height: 12px; border-radius: 4px; overflow: hidden; gap: 1px; }
.lc-rec { background: var(--ri-3); }
.lc-net { background: var(--ink); }
.lc-books li { grid-template-columns: minmax(100px, 150px) minmax(0, 1fr) auto; }
#lc-list .rb-cardbtn { height: 100%; }
.rb-tiles.lc-st { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .lc-st .rb-tile { padding: 10px; }


/* ===== reinsurance ===== */
.ri-list, .ri-detail { display: flex; flex-direction: column; gap: 12px; }
.ri-card { gap: 10px; }
.ri-cn { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.ri-prem { display: flex; flex-direction: column; align-items: flex-end; flex: none; font-variant-numeric: var(--tabular); }
.ri-prem b { font-size: 17px; font-weight: 700; }
.ri-card .rb-row-top .chev { margin-top: 2px; }
.ri-mini { display: flex; align-items: flex-end; gap: 3px; width: 100%; height: 22px; }
.ri-mini span { border-radius: 2px; min-width: 6px; }
.ri-pill-qs { background: var(--ri-2); color: var(--surface); }
.ri-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: var(--ink); }
.ri-detail h3:focus { outline: none; }
.ri-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.ri-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ri-in { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; }
.ri-in input { font: inherit; font-size: 20px; font-weight: 700; width: 140px; min-height: var(--tap); padding: 4px 10px; border-radius: var(--radius-chip); border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink); font-variant-numeric: var(--tabular); }
.ri-presets button { min-width: 72px; }
.ri-qsbar { display: flex; height: 28px; border-radius: 8px; overflow: hidden; font-size: 12.5px; font-weight: 700; font-variant-numeric: var(--tabular); }
.ri-qsa { background: var(--ri-2); color: var(--surface); display: flex; align-items: center; padding: 0 8px; white-space: nowrap; }
.ri-qsn { flex: 1 1 auto; background: var(--muted); color: var(--ink); display: flex; align-items: center; padding: 0 8px; white-space: nowrap; overflow: hidden; }
.ri-tower { display: grid; grid-template-columns: minmax(70px, 140px) minmax(0, 1fr); gap: 14px; height: 380px; padding: 4px 0; }
.ri-stack, .ri-labels { position: relative; height: 100%; }
.ri-blk { position: absolute; left: 0; right: 0; border: 1.5px solid var(--ri-3); background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.ri-blk.ri-ret { border-color: var(--ink); background: var(--tint); }
.ri-ret .ri-fill { background: var(--ink); }
.ri-fill { position: absolute; left: 0; right: 0; bottom: 0; }
.ri-over { background: var(--fail); border-color: var(--fail); }
.ri-loss { position: absolute; left: -6px; right: -6px; height: 0; border-top: 2px dashed var(--fail); }
.ri-lbl { position: absolute; left: 0; right: 0; transform: translateY(50%); display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.ri-lbl .t { font-size: 13px; font-weight: 600; }
.ri-lbl .s { font-size: 12px; font-weight: 700; font-variant-numeric: var(--tabular); }
.ri-nr { color: var(--ink-2); font-weight: 600 !important; }
.ri-pay { color: var(--green-strong); }
.ri-keep { color: var(--ink); }
.ri-back.s, .ri-lbl .ri-back { color: var(--fail-text); }
.ri-key-loss { height: 0 !important; width: 14px !important; border-top: 2px dashed var(--fail); border-radius: 0 !important; }
.ri-split { display: flex; height: 14px; border-radius: 99px; overflow: hidden; gap: 1px; background: var(--border); }
.ri-s-ret { background: var(--ink); } .ri-s-rec { background: var(--ri-3); } .ri-s-over { background: var(--fail); }
.ri-tot { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ri-tot li { display: flex; flex-direction: column; gap: 2px; }
.ri-tot b { font-size: 19px; font-weight: 700; font-variant-numeric: var(--tabular); }
.ri-overv { color: var(--fail-text); }
.ri-rows li { align-items: center; }
.ri-rows .t { font-weight: 500; }
.ri-rows b { font-variant-numeric: var(--tabular); white-space: nowrap; }
@media (min-width: 960px) {
  .ri-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.ri-amt { text-transform: none; letter-spacing: 0.04em; }


/* ===== investments ===== */
.iv-dbs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.iv-dbs > li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.iv-ccy { font-size: 14px; font-weight: 700; }
.iv-db-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.iv-db { position: relative; height: 14px; }
.iv-axis { position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--border); }
.iv-gap { position: absolute; top: 5px; height: 4px; background: #9EC0CC; }
.iv-gap.iv-out { background: var(--fail); }
.iv-a, .iv-l { position: absolute; top: 1px; width: 12px; height: 12px; margin-left: -6px; border-radius: 99px; }
.iv-a { background: var(--accent); }
.iv-l { background: var(--surface); border: 2px solid var(--ink); }
.iv-gv { font-size: 14px; font-weight: 700; font-variant-numeric: var(--tabular); text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.iv-gv.iv-out { color: var(--fail-text); }
.iv-k-a { background: var(--accent); border-radius: 99px !important; width: 10px !important; height: 10px !important; }
.iv-k-l { background: var(--surface); border: 2px solid var(--ink); border-radius: 99px !important; width: 10px !important; height: 10px !important; }
.iv-k-g { background: var(--fail); height: 4px !important; }
.iv-stack { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 2px; }
.iv-stack span { height: 100%; }
.iv-top { display: flex; gap: 12px; align-items: center; width: 100%; }
.iv-ic { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--tint); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.iv-cn { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.iv-amt { display: flex; flex-direction: column; align-items: flex-end; flex: none; font-variant-numeric: var(--tabular); }
.iv-amt b { font-size: 17px; font-weight: 700; }
.iv-hh { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); padding-top: 2px; }
.iv-flag { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.iv-net { font-size: 17px; font-weight: 700; font-variant-numeric: var(--tabular); }
.iv-cp { display: flex; height: 8px; border-radius: 99px; overflow: hidden; gap: 1px; }
#iv-p-inv, #iv-p-tp { display: flex; flex-direction: column; gap: 10px; }


/* ===== capital-reserving ===== */
.cr-stack { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 2px; background: var(--border); }
.cr-stack > span { height: 100%; }
.cr-tall { height: 14px; }
.cr-comp > li { align-items: center; }
.cr-comp i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.cr-comp .main { flex: 1 1 auto; }
.cr-comp .side b, .cr-yoa b, .cr-prod b, .cr-wfl b { font-size: 15px; font-weight: 700; }
.cr-yoa, .cr-prod, .cr-wfl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cr-yoa > li, .cr-wfl > li { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cr-yoa .rb-row, .cr-wfl .rb-row { align-items: baseline; }
.cr-yoa .main { display: flex; flex-direction: column; gap: 2px; }
.cr-yoa .cr-stack { width: 100%; height: 10px; }
.cr-yoa .t, .cr-prod .t, .cr-wfl .t { font-size: 14px; font-weight: 600; }
.cr-yoa .m, .cr-prod .m, .cr-wfl .m { font-size: 12.5px; color: var(--ink-2); }
.cr-prod > li { display: grid; grid-template-columns: minmax(90px, 120px) minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.cr-prod .main { display: flex; flex-direction: column; gap: 2px; }
.cr-pbar { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cr-wf { position: relative; display: block; width: 100%; height: 12px; border-radius: 4px; background: var(--ground); }
.cr-wf > span { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.cr-eat { background: var(--ink); color: var(--surface); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.cr-eat .label { color: var(--on-ink-2); }
.cr-eat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cr-eat li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 14.5px; line-height: 1.5; color: var(--on-ink-body); }
.cr-eat .num { color: var(--lemon); font-size: 22px; }
.cr-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cr-head .num { font-size: calc(26px * var(--num-scale)); }
#cr-p-r, #cr-p-m, #cr-p-k { display: flex; flex-direction: column; gap: 10px; }