/* RunSafe (views-v3-risk.js, v3.3): the risk register and the risk detail page, to tenant captures v33-01 to v33-12.
   Only what these screens need beyond views-v2.css / views-v3.css: pills, the Sheila banner's gradient bar, band chips,
   the header card, the side cards, the accordions and the 5x5 heatmap. NDS tokens from index.html only. */

.v3r [hidden] { display: none !important; }
.v3r-honest { font-size: 15px; line-height: 20px; color: var(--text-medium); }
.v3r-none { color: var(--text-light); font-size: 13px; line-height: 18px; }
.v3r-light { color: var(--text-light); margin-top: 2px; }
.v3r-line { font-size: 14px; line-height: 20px; color: var(--text-medium); margin: 0 0 var(--s3); }

/* ---------- pills ---------- */
.v3r-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--earth-500); background: var(--solar-50); color: var(--text-base); font-size: 12px; line-height: 16px; white-space: nowrap; cursor: pointer; }
.v3r-pill:hover { background: var(--solar-300); }
.v3r-pill[aria-expanded="true"] { background: var(--solar-600); }
.v3r-apill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 3px 0 10px; border-radius: 12px; border: none; background: var(--solar-600); color: var(--text-base); font-size: 12px; line-height: 16px; white-space: nowrap; }
button.v3r-apill { cursor: pointer; }
button.v3r-apill:hover { background: var(--solar-700); }
.v3r-apill b { font-family: 'NeutrifPro Regular', sans-serif; font-weight: normal; background: var(--solar-50); border-radius: 9px; padding: 0 6px; line-height: 18px; }
.v3r-gpill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--grey-600); background: var(--grey-100); color: var(--text-base); font-size: 12px; white-space: nowrap; }

/* Band chips: Low GREEN · Medium YELLOW · High ORANGE · Extreme RED · Critical DARKRED (pack.risk.matrix.bands) */
.v3r-band { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--grey-500); font-size: 12px; line-height: 16px; white-space: nowrap; }
.v3r-band b { font-family: 'NeutrifPro SemiBold', sans-serif; font-weight: normal; }
.v3r-b-green { background: var(--green-50); border-color: var(--fn-success); color: var(--ft-success); }
.v3r-b-yellow { background: var(--yellow-50); border-color: var(--yellow-600); color: var(--yellow-900); }
.v3r-b-orange { background: var(--orange-50); border-color: var(--fn-warning); color: var(--ft-warning); }
.v3r-b-red { background: var(--red-50); border-color: var(--fn-error); color: var(--ft-error); }
.v3r-b-darkred { background: var(--fn-error); border-color: var(--ft-error); color: var(--solar-50); }
.v3r-b-pink { background: var(--pink-700); border-color: var(--pink-700); color: var(--solar-50); } /* v4.9 tenant data (spec 5.4): the tenant's Critical band is PINK */
.v3r-b-grey { background: var(--grey-100); color: var(--text-medium); }

/* ---------- register ---------- */
.v3r-sub { font-size: 15px; line-height: 20px; color: var(--text-base); margin-bottom: var(--s4); }
.v3r-banner { position: relative; border: 1px solid var(--purple-400); border-radius: var(--radius); background: var(--bg-sheila-tint-50); padding: var(--s4) var(--s5) var(--s5); margin-bottom: var(--s5); }
.v3r-banner[hidden] { display: none; }
.v3r-banner-h { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); padding-right: var(--s6); }
.v3r-banner-t { font-size: 18px; line-height: 24px; color: var(--text-base); }
.v3r-banner-x { position: absolute; right: var(--s3); top: var(--s3); }
.v3r-banner p { font-size: 14px; line-height: 20px; color: var(--text-base); margin: 0 0 var(--s2); max-width: 760px; }
.v3r-gbar { display: block; height: 3px; border-radius: 2px; background: var(--bg-sheila); margin-top: var(--s3); max-width: 760px; }
.v3r-table td { vertical-align: top; font-size: 14px; }
.v3r-table th.v3r-c-act, .v3r-table td.v3r-c-act { width: 24px; min-width: 24px; padding: 0; }
.v3r-c-title { min-width: 240px; }
.v3r-c-driver { min-width: 150px; }
.v3r-c-objs { min-width: 200px; }
.v3r-c-cat, .v3r-c-sub, .v3r-c-bu { min-width: 130px; }
.v3r-c-ctrl { min-width: 220px; }
.v3r-tcell { display: flex; align-items: flex-start; gap: var(--s2); }
.v3r-tlink { color: var(--text-base); text-decoration: none; }
.v3r-tlink:hover, .v3r-tlink:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.v3r-spark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 18px; border-radius: 9px; background: var(--purple-50); color: var(--purple-700); flex-shrink: 0; margin-top: 1px; }
.v3r-spark svg.ic { width: 12px; height: 12px; }
.v3r-objs { display: flex; flex-direction: column; gap: var(--s2); }
.v3r-obj-n { font-size: 13px; line-height: 18px; color: var(--text-base); }
.v3r-obj-s { font-size: 12px; line-height: 16px; color: var(--text-medium); padding-left: var(--s2); }
.v3r-ctrls { display: flex; flex-direction: column; gap: var(--s1); }
.v3r-ctrl { font-size: 13px; line-height: 18px; }
.v3r-ctrl-c { font-family: 'NeutrifPro SemiBold', sans-serif; white-space: nowrap; }

/* ---------- detail: header card + side cards ---------- */
.v3r-top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s5); align-items: start; }
.v3r-side { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.v3r-hcard { display: flex; flex-direction: column; gap: var(--s3); }
.v3r-hrow { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.v3r-hl { font-size: 13px; line-height: 24px; color: var(--text-medium); }
.v3r-hv { min-width: 0; }
.v3r-val { font-size: 14px; line-height: 24px; color: var(--text-base); }
.v3r-long { display: block; line-height: 20px; padding-top: 2px; }
.v3r-help { font-size: 12px; line-height: 16px; color: var(--text-light); margin-top: var(--s1); max-width: 260px; }
.v3r-act { display: inline-flex; align-items: center; gap: var(--s2); }
.v3r-act svg.ic { width: 16px; height: 16px; color: var(--text-light); }
.v3r-src { display: flex; align-items: center; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--divider); font-size: 13px; line-height: 18px; }
.v3r-src svg.ic { width: 16px; height: 16px; color: var(--text-medium); flex-shrink: 0; }
.v3r-src-a { white-space: normal; }
.v3r-scard { display: flex; flex-direction: column; gap: var(--s2); }
.v3r-scard-h { display: flex; align-items: center; gap: var(--s2); }
.v3r-scard-h > svg.ic { width: 18px; height: 18px; color: var(--text-base); flex-shrink: 0; }
.v3r-scard-t { font-size: 16px; line-height: 22px; color: var(--text-base); }
.v3r-card-h2 { font-size: 16px; line-height: 22px; color: var(--text-base); }
.v3r-card-p { font-size: 13px; line-height: 18px; color: var(--text-base); }
.v3r-card-p[hidden] { display: none; }
.v3r-olist { list-style: none; display: flex; flex-direction: column; gap: var(--s2); margin: 0; padding: 0; }
.v3r-oempty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); padding: var(--s3) 0; }
.v3r-warn { width: 56px; height: 56px; border-radius: 50%; background: var(--dawn-50); display: inline-flex; align-items: center; justify-content: center; }
.v3r-warn svg.ic { width: 28px; height: 28px; color: var(--ft-warning); }
.v3r-warn.big { width: 120px; height: 120px; background: var(--solar-600); }
.v3r-warn.big svg.ic { width: 64px; height: 64px; color: var(--ft-warning); }
.v3r-owned { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--divider); background: var(--solar-50); font-size: 12px; color: var(--text-base); cursor: pointer; white-space: nowrap; }
.v3r-owned svg.ic { width: 14px; height: 14px; }
.v3r-owned[aria-pressed="true"] { background: var(--solar-600); border-color: var(--earth-500); }
.v3r-tmini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v3r-tmini li { padding: var(--s2) 0; border-bottom: 1px solid var(--divider); }
.v3r-tmini li:last-child { border-bottom: none; }
.v3r-tmini li[hidden] { display: none; }
.v3r-tm-t { font-size: 13px; line-height: 18px; }
.v3r-tm-t .v2-no { font-size: 13px; }
.v3r-tm-m { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); font-size: 12px; line-height: 16px; color: var(--text-medium); margin-top: var(--s1); }
.v3r-sbtn { height: 32px; padding: 0 var(--s4); border-radius: 16px; font-size: 14px; align-self: flex-start; cursor: pointer; }

/* ---------- detail: accordions ---------- */
.v3r-agrid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: var(--s5); align-items: start; }
.v3r-accs { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.v3r-acc { border: 1px solid var(--divider); border-radius: var(--radius); background: var(--solar-50); }
.v3r-acc-h { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); flex-wrap: wrap; }
.v3r-acc-btn { flex: 1; min-width: 180px; display: flex; align-items: flex-start; gap: var(--s2); border: none; background: transparent; padding: 0; text-align: left; cursor: pointer; color: var(--text-base); }
.v3r-acc-btn .v2-chev { transition: transform .15s ease; transform: rotate(-90deg); }
.v3r-acc-btn[aria-expanded="true"] .v2-chev { transform: none; }
.v3r-acc-tt { display: flex; flex-direction: column; gap: 2px; }
.v3r-acc-t { font-size: 18px; line-height: 24px; }
.v3r-acc-s { font-size: 13px; line-height: 18px; color: var(--text-medium); }
.v3r-acc-r { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.v3r-acc-b { padding: 0 var(--s4) var(--s4); border-top: 1px solid var(--divider); padding-top: var(--s4); }
.v3r-acc-b[hidden] { display: none; }
.v3r-od.on b { background: var(--red-50); color: var(--ft-error); }
.v3r-sugg { display: inline-flex; align-items: center; gap: 4px; border: none; background: transparent; padding: 0; font-size: 13px; color: var(--text-base); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.v3r-sugg svg.ic { width: 16px; height: 16px; color: var(--purple-400); }
.v3r-sugg-b { height: 32px; padding: 0 var(--s4); border-radius: 16px; border: 1px solid var(--purple-400); background: var(--pink-50); text-decoration: none; font-size: 14px; }
.v3r-work { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 var(--s3); border-radius: 14px; border: 1px solid var(--earth-500); background: var(--solar-50); font-size: 13px; color: var(--text-base); cursor: pointer; white-space: nowrap; }
.v3r-work svg.ic { width: 16px; height: 16px; }
.v3r-slist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v3r-slist li { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--divider); font-size: 13px; line-height: 18px; }
.v3r-slist li:last-child { border-bottom: none; }
.v3r-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s2); padding: var(--s3) var(--s2); }
.v3r-empty p { font-size: 13px; line-height: 18px; color: var(--text-base); max-width: 520px; }
.v3r-empty .v3r-sbtn { align-self: center; margin-top: var(--s2); }
.v3r-empty-h { font-size: 18px; line-height: 24px; color: var(--text-base); }
.v3r-empty-c { padding: var(--s5) var(--s2); }
.v3r-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-top: var(--s2); }
.v3r-btns .v3r-sbtn { margin-top: 0; }
.v3r-intro { font-size: 13px; line-height: 18px; color: var(--text-base); margin-bottom: var(--s3); }
.v3r-form { border: 1px solid var(--divider); border-radius: var(--radius); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.v3r-by { display: flex; align-items: center; gap: var(--s3); }
.v3r-av { width: 28px; height: 28px; border-radius: 50%; background: var(--earth-500); color: var(--solar-50); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.v3r-by-n { font-size: 14px; line-height: 18px; font-family: 'NeutrifPro SemiBold', sans-serif; }
.v3r-by-m { font-size: 12px; line-height: 16px; color: var(--text-light); }
.v3r-fl { font-size: 12px; line-height: 16px; color: var(--text-medium); margin-bottom: 2px; }
.v3r-fv { font-size: 13px; line-height: 18px; color: var(--text-base); }
.v3r-fv b { font-family: 'NeutrifPro SemiBold', sans-serif; font-weight: normal; }
.v3r-note { background: var(--solar-100); border: 1px solid var(--divider); border-radius: var(--radius); padding: var(--s2) var(--s3); }
.v3r-files { display: inline-flex; align-items: center; gap: var(--s1); font-size: 12px; color: var(--text-medium); }
.v3r-files svg.ic { width: 16px; height: 16px; }

/* ---------- detail: the side matrix card and its 5x5 heatmap ---------- */
.v3r-mcard { display: flex; flex-direction: column; gap: var(--s3); position: sticky; top: var(--s4); }
.v3r-mhead { background: var(--solar-500); border-radius: var(--radius); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); align-items: center; text-align: center; }
.v3r-mrow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s2); font-size: 13px; line-height: 18px; }
.v3r-ml { font-family: 'NeutrifPro SemiBold', sans-serif; }
.v3r-mres { color: var(--text-medium); }
.v3r-mgrid { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s1); align-items: center; }
.v3r-max-y { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; color: var(--text-light); text-align: center; }
.v3r-max-x { font-size: 11px; color: var(--text-light); text-align: center; margin-top: 2px; padding-left: 16px; }
.v3r-hm { display: grid; grid-template-columns: 14px repeat(5, minmax(0, 1fr)); gap: 4px; }
.v3r-hm-y, .v3r-hm-x { font-size: 10px; line-height: 12px; color: var(--text-light); display: flex; align-items: center; justify-content: center; }
.v3r-hm-c { aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid transparent; min-width: 0; overflow: hidden; }
.v3r-hm-c.v3r-b-green, .v3r-hm-c.v3r-b-yellow, .v3r-hm-c.v3r-b-orange, .v3r-hm-c.v3r-b-red, .v3r-hm-c.v3r-b-darkred, .v3r-hm-c.v3r-b-pink, .v3r-hm-c.v3r-b-grey { background: var(--solar-600); border-color: transparent; color: var(--text-medium); }
.v3r-hm-w { font-size: 9px; line-height: 10px; }
.v3r-hm-n { font-size: 10px; line-height: 12px; font-family: 'NeutrifPro SemiBold', sans-serif; }
.v3r-hm-c.on { box-shadow: 0 0 0 2px var(--earth-500); }
.v3r-hm-c.on.v3r-b-green { background: var(--green-50); color: var(--ft-success); }
.v3r-hm-c.on.v3r-b-yellow { background: var(--yellow-50); color: var(--yellow-900); }
.v3r-hm-c.on.v3r-b-orange { background: var(--orange-50); color: var(--ft-warning); }
.v3r-hm-c.on.v3r-b-red { background: var(--red-50); color: var(--ft-error); }
.v3r-hm-c.on.v3r-b-darkred { background: var(--fn-error); color: var(--solar-50); }
.v3r-hm-c.on.v3r-b-pink { background: var(--pink-700); color: var(--solar-50); } /* v4.9 tenant data */
.v3r-mcap { font-size: 12px; line-height: 16px; color: var(--text-light); text-align: center; }

/* a table's column header row drawn above its empty state (v33-03, v33-04) */
.v3r-headonly { mask-image: none; -webkit-mask-image: none; }
.v3r-headonly .v2-table { margin-bottom: 0; }

/* ---------- the SUB-CATEGORY popover ---------- */
.v2-menu.v3r-menu { max-width: 300px; max-height: min(60vh, 420px); overflow-y: auto; }
.v3r-menu .v2-mi { font-size: 13px; }

/* ---------- explore hover affordances ---------- */
body.explore .v3r-acc-btn:hover .v3r-acc-t { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- narrow widths ---------- */
@media (max-width: 1100px) {
  .v3r-top, .v3r-agrid { grid-template-columns: minmax(0, 1fr); }
  .v3r-mcard { position: static; max-width: 420px; }
}
@media (max-width: 640px) {
  .v3r-hrow { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .v3r-banner { padding: var(--s3) var(--s4) var(--s4); }
  .v3r-acc-h { padding: var(--s3); }
  .v3r-acc-b { padding-left: var(--s3); padding-right: var(--s3); }
}
@media (prefers-reduced-motion: reduce) {
  .v3r-acc-btn .v2-chev { transition: none; }
}