/* Risk register Library section (tools/register_library.py, staging only): the hub and the five class pages.
   Mobile first, no table layouts on a phone. Class colours as the risk taxonomy; no status colours (a template has none).
   The diagrams reuse assets/library-visuals.css (rt-*). */
.rl-page { padding-bottom: 8px; }
.rl-page [hidden] { display: none !important; }
.rl-hero { display: flex; flex-direction: column; gap: 10px; padding: 28px 0 8px; max-width: 760px; }
.rl-h1 { margin: 0; font-size: clamp(30px, 6vw, 48px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 800; color: var(--ink); }
.rl-lead { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.rl-sec { display: flex; flex-direction: column; gap: 12px; padding: 26px 0; border-top: 1px solid var(--border); }
.rl-sec:first-of-type { border-top: 0; }
.rl-sec .h2-sm { margin: 0; }
.rl-p { margin: 0; max-width: 68ch; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.rl-code { font-family: var(--font-data); font-size: 0.86em; font-weight: 700; letter-spacing: .02em; color: var(--ink-2); }
.rl-k { margin: 0; font-family: var(--font-data); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }

/* hub: the capital bar has no figures, so its segments flex and carry the category name */
.rl-bar { display: flex; }
.rl-bar .rt-seg { width: auto; min-width: 0; padding: 0 4px; font-size: 12.5px; }
.rl-bar .rt-seg-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-tx .rt-head a { color: inherit; text-decoration: none; }
.rl-tx .rt-head a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rl-tx .rt-tile { overflow-wrap: normal; word-break: normal; }
.rl-tx .rl-code { color: var(--ink-2); font-size: 10.5px; }

/* the subclass to capital category map: a list on a phone, a table from 640px, folded away by default */
.rl-acc { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.rl-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 14px; cursor: pointer; font-weight: 700; list-style: none; }
.rl-acc summary::-webkit-details-marker { display: none; }
.rl-acc[open] summary .rl-chev { transform: rotate(180deg); }
.rl-acc-body { padding: 0 14px 14px; }
.rl-table { display: none; }
.rl-catlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rl-catlist li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0 8px 10px; border-left: 4px solid var(--c); border-bottom: 1px solid var(--border); font-size: 14px; }
.rl-cat { flex: none; font-family: var(--font-data); font-size: 12px; font-weight: 700; color: var(--ink-2); }

/* slim risks: one risk opening into its causes, a maturity step adding causes */
.rl-fig { margin: 4px 0 0; display: flex; flex-direction: column; gap: 12px; }
.rl-steps { display: inline-flex; flex-wrap: wrap; gap: 4px; align-self: flex-start; padding: 4px; border-radius: 12px; background: var(--surface-2); }
.rl-steps button { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-height: 44px; padding: 6px 14px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.rl-steps button span { font-size: 11.5px; font-weight: 400; color: var(--ink-2); }
.rl-steps button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.rl-steps button[aria-pressed="true"] span { color: inherit; opacity: .8; }
.rl-steps button:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.rl-stepbox { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.rl-stepbox .rt-lead { margin: 0; }
.rl-xr .rl-k { color: inherit; opacity: .85; }
.rl-page .crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 14px; }
.rl-points { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; max-width: 72ch; font-size: 15px; line-height: 1.5; }
.rl-small .rl-src { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 80ch; }
.rl-ccard-d { font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.rl-note { margin: 2px 0 0; font-size: 13.5px; line-height: 1.4; }
.rl-subh .rl-k { color: inherit; opacity: .8; }
.rl-count { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.rl-xr { position: relative; padding: 14px 16px; border-radius: 12px; background: var(--c); color: var(--t); }
.rl-xr::after { content: ""; position: absolute; left: 26px; bottom: -14px; width: 2px; height: 14px; background: var(--c); }
.rl-xr-h { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 17px; }
.rl-xr-h .rl-code { color: inherit; opacity: .85; }
.rl-xr-c { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; opacity: .95; }
.rl-xcs { position: relative; list-style: none; margin: 0; padding: 0 0 0 26px; display: flex; flex-direction: column; gap: 8px; }
.rl-xcs::before { content: ""; position: absolute; left: 26px; top: 0; bottom: 18px; width: 2px; margin-left: -1px; background: var(--c); }
.rl-xc { position: relative; margin-left: 18px; padding: 10px 12px; border: 1px solid var(--c); border-radius: 10px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; animation: rl-in .35s ease-out; }
.rl-xc::before { content: ""; position: absolute; left: -19px; top: 20px; width: 18px; height: 2px; background: var(--c); }
.rl-xc-t { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14.5px; }
.rl-xc-m { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.rl-xcs[data-rl-shown="1"] .rl-xc:nth-child(n+2), .rl-xcs[data-rl-shown="2"] .rl-xc:nth-child(n+3),
.rl-xcs[data-rl-shown="3"] .rl-xc:nth-child(n+4), .rl-xcs[data-rl-shown="4"] .rl-xc:nth-child(n+5) { display: none; }
@keyframes rl-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* a driver is a category, so it is a neutral tag (no status colour) */
.rl-drv { display: inline-block; font-family: var(--font-data); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--ink-2); }

.rl-ccards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.rl-ccard { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; border-radius: 12px; border-top: 6px solid var(--c); background: var(--surface); border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.rl-ccard:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(31, 70, 81, .5); }
.rl-ccard:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.rl-ccard-h { font-size: 17px; font-weight: 800; }
.rl-ccard-m { font-size: 13.5px; color: var(--ink-2); font-variant-numeric: var(--tabular); }
.rl-more { margin-top: auto; padding-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--accent-deep); }

/* class pages */
.rl-class .rl-hero { border-left: 6px solid var(--c); padding-left: 14px; margin-top: 18px; }
.rl-tools { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 14px 0 6px; padding: 8px 0; background: var(--ground); border-bottom: 1px solid var(--border); }
.rl-tbtns { display: flex; gap: 6px; }
.rl-tbtn { min-height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 99px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.rl-tbtn:hover { border-color: var(--ink); }
.rl-filter { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.rl-filter select { min-height: 40px; max-width: 60vw; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
.rl-tbtn:focus-visible, .rl-filter select:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.rl-none { margin: 10px 0; color: var(--ink-2); }
.rl-reg { display: flex; flex-direction: column; gap: 22px; padding-bottom: 20px; }
.rl-sub { display: flex; flex-direction: column; gap: 8px; }
.rl-subh { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--c); color: var(--t); }
.rl-subt { margin: 0; font-size: 17px; line-height: 1.25; }
.rl-subt .rl-code { color: inherit; opacity: .85; }
.rl-model { margin: 0; font-size: 12.5px; opacity: .9; }
.rl-risks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rl-risk { border: 1px solid var(--border); border-left: 4px solid var(--c); border-radius: 10px; background: var(--surface); }
.rl-rbtn { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "code chev" "t chev" "n chev"; gap: 2px 10px; align-items: center; width: 100%; padding: 10px 12px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.rl-rbtn .rl-code { grid-area: code; }
.rl-rt { grid-area: t; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rl-rt b { font-size: 15px; line-height: 1.3; }
.rl-rc { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.rl-rn { grid-area: n; font-size: 12.5px; color: var(--ink-2); }
.rl-rbtn .rl-chev { grid-area: chev; transition: transform .2s; }
.rl-rbtn[aria-expanded="true"] .rl-chev { transform: rotate(180deg); }
.rl-rbtn:hover { background: var(--surface-2); }
.rl-rbtn:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: -2px; border-radius: 8px; }
.rl-rpanel { padding: 0 12px 12px; }
.rl-causes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rl-cause { padding: 10px 12px; border-radius: 8px; background: var(--ground); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.rl-cause-t { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14.5px; line-height: 1.35; }
.rl-ci { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.rl-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; line-height: 1.4; }
.rl-measure { display: block; font-size: 12.5px; color: var(--ink-2); }
.rl-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 18px 0 8px; border-top: 1px solid var(--border); }
.rl-nav a { font-weight: 600; color: var(--accent-deep); }
.rl-nav-next { margin-left: auto; }

@media (min-width: 640px) {
  .rl-table { display: block; overflow-x: auto; }
  .rl-catlist { display: none; }
  .rl-ccards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-ci { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rl-rbtn { grid-template-columns: 76px minmax(0, 1fr) auto auto; grid-template-areas: "code t n chev"; }
}
@media (min-width: 1100px) {
  .rl-ccards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rl-fig.rl-slim { max-width: 760px; }
}
@media (prefers-reduced-motion: reduce) { .rl-xc { animation: none; } .rl-ccard, .rl-rbtn .rl-chev, .rl-acc .rl-chev { transition: none; } }

/* ---------- the framework (tools/risk_framework.py): the strip on every page of the section, risk in processes,
   embedding risk. The process line is the Halden process map's language: a coloured line, stops as dots, a dashed
   diamond for a decision, a ringed dot for a committee. A pin counts the causes attached at a stop. */
.rf-strip { display: flex; flex-direction: column; gap: 6px; margin: 18px 0 0; }
.rf-sname-l { font-family: var(--font-data); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.rf-strip ol { list-style: none; margin: 0; padding: 4px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.rf-sl { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 8px; border-radius: 9px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; cursor: pointer; }
a.rf-sl:hover { background: var(--surface); }
a.rf-sl:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.rf-sn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; font-family: var(--font-data); font-size: 12px; font-weight: 700; font-variant-numeric: var(--tabular); }
.rf-strip .is-on .rf-sl { background: var(--ink); color: var(--surface); }
.rf-strip .is-on a.rf-sl:hover { background: var(--ink-2); }
.rf-sl.is-off { opacity: .5; }
@media (max-width: 420px) { .rf-sl { gap: 5px; padding: 0 3px; font-size: 13px; } .rf-sn { width: 20px; height: 20px; font-size: 11px; } }

/* key: how a process breaks down */
.rf-key { margin: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.rf-key figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.rf-klead { font-size: 14px; color: var(--ink-2); }
.rf-key ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.rf-key li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; }
.rf-k-m { flex: none; width: 34px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.rf-k-line { display: block; width: 30px; height: 6px; border-radius: 99px; background: var(--c); }

/* the line */
.rf-mapgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 4px; }
.rf-stops { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rf-stops::before { content: ""; position: absolute; left: 13px; top: 22px; bottom: 22px; width: 6px; border-radius: 99px; background: var(--c); }
.rf-dot { position: relative; z-index: 1; flex: none; width: 20px; height: 20px; margin-left: 6px; border-radius: 50%; background: var(--surface); border: 4px solid var(--c); box-sizing: border-box; }
.rf-dot-cm { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.rf-k-m .rf-dot { margin-left: 0; }
.rf-sbtn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 10px 6px 0; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.rf-sbtn:hover { background: var(--surface-2); }
.rf-sbtn:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 0; }
.rf-sbtn[aria-expanded="true"] { background: color-mix(in srgb, var(--c) 12%, var(--surface)); }
.rf-sbtn[aria-expanded="true"] .rf-dot:not(.rf-dot-cm) { background: var(--c); }
.rf-sbtn[aria-expanded="true"] .rf-dot-cm { background: var(--ink); }
.rf-sname { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; font-size: 15px; font-weight: 600; line-height: 1.3; }
.rf-tag { align-self: flex-start; font-family: var(--font-data); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 1px 8px; border-radius: 99px; background: var(--tint); color: var(--ink); }
.rf-pin { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px 14px 14px 3px; background: var(--ink); color: var(--surface); font-family: var(--font-data); font-size: 13px; font-weight: 700; font-variant-numeric: var(--tabular); }
.rf-dec { display: flex; flex-direction: column; gap: 2px; }
.rf-q { position: relative; z-index: 1; margin: 4px 0; display: flex; align-items: center; gap: 12px; padding: 4px 10px 4px 5px; font-size: 15px; }
.rf-q b { padding: 6px 10px; border: 1.5px dashed var(--ink-2); border-radius: 10px; background: var(--surface); }
.rf-diamond { flex: none; }
.rf-branches { list-style: none; margin: 0 0 0 34px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rf-branch { position: relative; display: flex; align-items: center; gap: 8px; }
.rf-branch::before { content: ""; position: absolute; left: -18px; top: 50%; width: 22px; border-top: 3px dashed var(--c); }
.rf-blabel { flex: none; z-index: 1; min-width: 36px; text-align: center; font-family: var(--font-data); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 1px 6px; border-radius: 99px; background: var(--ink); color: var(--surface); }
.rf-branch + .rf-branch .rf-blabel { background: var(--border); color: var(--ink); }
.rf-branch .rf-dot { margin-left: 0; }

/* the detail: a side panel on a desktop, a drawer on a phone */
.rf-panel { display: none; }
.rf-empty { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.rf-detail { display: flex; flex-direction: column; gap: 14px; }
.rf-details { display: none; }
.rf-dh { margin: 0; font-size: 19px; line-height: 1.25; }
.rf-kind { margin: 0; font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.rf-owner { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15px; }
.rf-io { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.rf-tags { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.rf-tags li { font-size: 13.5px; line-height: 1.35; padding: 5px 9px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
.rf-tags-out li { background: var(--tint); }
.rf-ch { margin: 4px 0 -6px; }
.rf-causes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rf-cause { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); border-left: 4px solid var(--c); background: var(--surface); }
.rf-risk { margin: 0; font-size: 15px; line-height: 1.3; }
.rf-concern { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.rf-cause .rl-ci { grid-template-columns: minmax(0, 1fr); }
.rf-dback { position: fixed; inset: 0; z-index: 90; background: rgba(20, 28, 32, .45); opacity: 0; transition: opacity .45s ease-out; }
.rf-dback.is-open { opacity: 1; }
.rf-drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; max-height: 84vh; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; border-top: 4px solid var(--c); background: var(--ground); color: var(--ink); box-shadow: 0 -12px 30px -10px rgba(20, 28, 32, .4); transform: translateY(100%); transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.rf-drawer.is-open { transform: translateY(0); }
.rf-drawer::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 8px; border-radius: 99px; background: var(--border-strong); }
.rf-dhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.rf-dt { margin: 0; font-size: 19px; line-height: 1.25; }
.rf-dclose { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.rf-dclose:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.rf-dbody .rf-dh { display: none; }
.rf-dbody, [data-rf-pbody] { display: flex; flex-direction: column; gap: 14px; }
html.rf-noscroll { overflow: hidden; }

/* embedding: the chain (vertical on a phone, horizontal on a desktop), returning to the plan */
.rf-chainfig { position: relative; margin: 4px 0 0; padding-right: 34px; }
.rf-chain { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rf-chain::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 6px; border-radius: 99px; background: var(--c); }
.rf-link { position: relative; display: flex; align-items: flex-start; gap: 14px; }
.rf-ln { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); border: 4px solid var(--c); box-sizing: border-box; font-family: var(--font-data); font-size: 14px; font-weight: 700; font-variant-numeric: var(--tabular); color: var(--ink); }
.rf-link:first-child .rf-ln, .rf-link:last-child .rf-ln { background: var(--c); color: #F9FFF1; }
.rf-lt { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; min-width: 0; }
.rf-lt b { font-size: 16px; line-height: 1.25; }
.rf-lt span { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.rf-return { position: absolute; top: 18px; bottom: 18px; right: 4px; width: 22px; border: 2px dashed var(--c); border-left: 0; border-radius: 0 14px 14px 0; }
.rf-return::after { content: ""; position: absolute; left: -14px; top: -8px; border-style: solid; border-width: 7px 10px 7px 0; border-color: transparent var(--c) transparent transparent; }
.rf-rel { color: var(--ink-2); font-size: 14px; }

@media (min-width: 640px) {
  .rf-key ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .rf-mapgrid { grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 28px; align-items: start; }
  .rf-panel { display: block; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--c); }
  .rf-key ul { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rf-key li { flex-direction: column; gap: 6px; }
  .rf-cause .rl-ci { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1100px) {
  .rf-chainfig { padding: 0 0 40px; }
  .rf-chain { flex-direction: row; gap: 12px; }
  .rf-chain::before { left: 18px; right: calc((100% - 72px) / 7 - 18px); top: 15px; bottom: auto; width: auto; height: 6px; }
  .rf-link { flex: 1 1 0; flex-direction: column; gap: 10px; }
  .rf-lt { padding-top: 0; }
  .rf-return { top: auto; bottom: 0; left: 17px; right: calc((100% - 72px) / 7 - 17px); width: auto; height: 32px; border: 2px dashed var(--c); border-top: 0; border-radius: 0 0 14px 14px; }
  .rf-return::after { left: -8px; top: -12px; border-width: 0 7px 10px 7px; border-color: transparent transparent var(--c) transparent; }
}
@media (min-width: 1100px) { .rl-ccards.rf-exs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rf-page .rl-hero { padding-top: 18px; }
@media (prefers-reduced-motion: reduce) { .rf-dback, .rf-drawer { transition: none !important; } }

/* ---------- outside and inside (tools/risk_framework.py strip and hub visual; tools/emerging_risks.py pages).
   Outside the business is drawn dashed, inside solid. The three horizons are one sequential run, nearest darkest:
   a template carries no status colours. */
.rf-strip2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.rf-sg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rf-sg-out ol { grid-template-columns: minmax(0, 1fr); border-style: dashed; border-color: var(--ink-2); }
.rf-strip2 .rf-sg-out .is-on .rf-sl { background: #0E5E5A; }

.rf-fw .rf-fw-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.rf-fw-out, .rf-fw-in { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--surface); }
.rf-fw-out { border: 2px dashed var(--ink-2); }
.rf-fw-in { border: 2px solid var(--c); }
.rf-fw-l { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.rf-fw-l span:last-child { font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.rf-fan { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }
.rf-fw-go { align-self: flex-start; font-weight: 600; }
.rf-fw-steps { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rf-fw-steps::before { content: ""; position: absolute; left: 15px; top: 18px; bottom: 18px; width: 6px; border-radius: 99px; background: var(--c); }
.rf-fw-step { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 8px 8px 8px 0; border-radius: 10px; color: var(--ink); text-decoration: none; cursor: pointer; }
.rf-fw-step:hover { background: var(--surface-2); }
.rf-fw-step:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.rf-fw-step .rf-lt { padding-top: 6px; }
.rf-fw-steps li:first-child .rf-ln { background: var(--c); color: #F9FFF1; }

/* emerging risks: the horizon bands */
.er-fig { margin: 4px 0 0; }
.er-bands { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.er-band { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.er-bh { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--h); color: var(--ht); }
.er-bh b { font-size: 17px; }
.er-win { font-family: var(--font-data); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.er-stake { font-size: 13.5px; line-height: 1.4; }
.er-bts { list-style: none; margin: 0; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 8px; align-content: center; }
.er-bts li { padding: 6px 10px; border-radius: 8px; border: 1.5px dashed var(--h); background: var(--surface); font-size: 14px; line-height: 1.3; }

/* emerging risks: anatomy (a five-link chain filled with one worked threat) */
.er-anat { padding-right: 0; }
.er-anat .rf-chain::before { display: none; }
.er-an:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 18px; bottom: -32px; width: 6px; background: var(--c); }
.er-anx .er-src { display: block; margin-top: 2px; }
.er-anx { display: block; margin-top: 6px; padding: 7px 9px; border-radius: 8px; border: 1px dashed var(--border-strong); background: var(--surface); font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.er-anx .er-chips, .er-anx .er-moves { margin: 0; }

/* emerging risks: the two registers side by side */
.er-sh { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; }
.er-sh > span { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: 8px; }
.er-sh-o { border: 1.5px dashed var(--ink-2); }
.er-sh-i { border: 1.5px solid #17797A; }
.er-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.er-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.er-th { padding: 9px 11px; border-radius: 10px; border: 1.5px dashed var(--ink-2); background: var(--surface); font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.er-link { display: flex; align-items: center; gap: 6px; padding-left: 14px; color: var(--ink-2); font-size: 12.5px; font-family: var(--font-data); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.er-link .er-arr { transform: rotate(90deg); width: 22px; }
.er-rk { display: flex; flex-direction: column; gap: 4px; }
.er-rk a { display: block; padding: 8px 11px; border-radius: 10px; border: 1.5px solid #17797A; background: var(--surface); color: var(--ink); font-size: 14px; line-height: 1.3; text-decoration: none; cursor: pointer; }
.er-rk a:hover { background: var(--surface-2); }

/* the threat register */
.er-tools { flex-direction: column; align-items: stretch; }
.er-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); align-self: flex-start; }
.er-seg button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.er-seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.er-seg button:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.er-reg { display: flex; flex-direction: column; gap: 22px; padding: 6px 0 20px; }
.er-group { display: flex; flex-direction: column; gap: 8px; }
.er-gh { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--h); color: var(--ht); }
.er-gt { margin: 0; font-size: 18px; line-height: 1.25; }
.er-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.er-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); border-left: 4px solid var(--h); background: var(--surface); }
.er-ct { margin: 0; font-size: 16px; line-height: 1.3; }
.er-cd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.er-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.er-chips li { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--ink); }
.er-mvbox { display: flex; flex-direction: column; gap: 4px; }
.er-moves { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.er-mv { font-size: 14px; line-height: 1.35; color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.er-mv-txt { color: var(--ink); text-decoration: none; }
.er-moves-sm .er-mv { font-size: 13px; }
.er-meta { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.er-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 99px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.er-more:hover { border-color: var(--ink); }
.er-more:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.er-more[aria-expanded="true"] .rl-chev { transform: rotate(180deg); }
.er-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 10px 12px; border-radius: 8px; background: var(--ground); border: 1px solid var(--border); }
.er-resp { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.4; }
.er-inds { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.er-ind { padding: 8px 10px; border-radius: 8px; border: 1.5px dashed var(--ink-2); background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.er-ind-t { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; line-height: 1.35; }
.er-ext { display: inline-block; font-family: var(--font-data); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 1px 7px; border-radius: 99px; border: 1.5px dashed var(--ink); color: var(--ink); background: var(--surface-2); }
.er-src { color: var(--ink-2); font-size: 12.5px; }
.er-dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; font-size: 13px; line-height: 1.4; }
.er-dl div { display: flex; gap: 8px; }
.er-dl dt { flex: none; width: 78px; font-family: var(--font-data); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding-top: 2px; }
.er-dl dd { margin: 0; }
.rl-risk:target { box-shadow: 0 0 0 3px var(--accent-deep); }

@media (min-width: 640px) {
  .er-band { grid-template-columns: 240px minmax(0, 1fr); }
  .er-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .er-tools { flex-direction: row; align-items: center; }
  .er-row { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: center; gap: 8px; }
  .er-link { flex-direction: column; padding-left: 0; gap: 0; }
  .er-link .er-arr { transform: none; width: 40px; }
  .er-sh { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); gap: 8px; }
}
@media (min-width: 900px) {
  .rf-strip2 { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 12px; }
  .rf-fw .rf-fw-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 18px; }
  .er-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (min-width: 1100px) {
  .er-anat { padding: 0; }
  .er-an:not(:last-child)::before { left: 18px; right: -30px; top: 15px; bottom: auto; width: auto; height: 6px; }
}
.rl-risk { scroll-margin-top: 72px; }
@media (max-width: 639px) { .er-tools { position: static; } }

/* ---------- risk in processes, round 2: the process landscape and the branching map (tools/risk_framework.py).
   Landscape: two stacks, processes that touch an outside party (left, dashed) and processes that start inside
   (right). From 900px light connectors run between them (assets JS draws them from data-feeds), shown for a card on
   hover, focus or select; on a phone the connectors are "Feeds" chips.
   Map: the process down a centre line; a branch to another process peels off to the left in that process's colour
   and curves back in where it rejoins, or ends with a bar. One geometry at every width: --bw is the branch column. */
.rf-land-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.rf-land-svg { display: none; }
.rf-stack { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rf-stack-h { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.rf-stack-i { width: 18px; height: 12px; border-radius: 4px; border: 2px dashed var(--ink-2); }
.rf-stack-int .rf-stack-i { border: 2px solid var(--c); }
.rf-stack ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rf-pc { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1.5px solid var(--c); transition: box-shadow .2s, opacity .2s; cursor: pointer; }
.rf-stack-ext .rf-pc { border: 1.5px dashed var(--ink-2); }
.rf-pc:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.rf-pc-h { margin: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-size: 15px; line-height: 1.3; }
.rf-rh { flex: none; font-family: var(--font-data); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--ink); }
.rf-pc-d { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.rf-pc-o { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13px; }
.rf-pc-f { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.rf-pc-f ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.rf-pc-f li { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border-strong); }
.rf-pc-map { align-self: flex-start; font-size: 13.5px; font-weight: 600; }
.rf-land-grid.is-hot .rf-pc { opacity: .45; }
.rf-land-grid.is-hot .rf-pc.is-on, .rf-land-grid.is-hot .rf-pc.is-linked { opacity: 1; }
.rf-pc.is-on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent); }
.rf-land-svg path { fill: none; stroke: var(--ink-2); stroke-width: 1.6; opacity: 0; transition: opacity .2s; }
.rf-land-svg path.is-on { opacity: .9; stroke: var(--c); stroke-width: 2.2; }
.rf-land-svg.is-quiet path { opacity: .18; }
.rf-land-svg.is-quiet path.is-on { opacity: .9; }

.rf-bmap { --bw: 150px; position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rf-bmap::before { content: ""; position: absolute; left: calc(var(--bw) + 13px); top: 22px; bottom: 22px; width: 6px; border-radius: 99px; background: var(--c); }
.rf-row { position: relative; }
.rf-mrow, .rf-qrow { padding-left: var(--bw); }
.rf-qrow { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.rf-qdot { position: relative; z-index: 1; display: inline-flex; width: 32px; justify-content: center; flex: none; }
.rf-qrow .rf-q { margin: 0; padding: 0; }
.rf-qrow .rf-q b { display: inline-block; padding: 5px 9px; border: 1.5px dashed var(--ink-2); border-radius: 10px; background: var(--surface); font-size: 14.5px; }
.rf-fork { display: grid; grid-template-columns: var(--bw) minmax(0, 1fr); align-items: start; }
.rf-mcol { grid-column: 2; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rf-mstop { display: flex; flex-direction: column; }
.rf-blabel-main { align-self: flex-start; margin: 6px 0 -4px 34px; }
.rf-bcol { grid-column: 1; position: relative; padding: 34px 0 34px; min-width: 0; }
.rf-bcol.rf-bends { padding-bottom: 6px; }
.rf-bpeel { position: absolute; top: 0; left: 13px; width: calc(var(--bw) + 3px); height: 30px; border-top: 6px solid var(--b); border-left: 6px solid var(--b); border-top-left-radius: 22px; box-sizing: border-box; }
.rf-bjoin { position: absolute; bottom: 0; left: 13px; width: calc(var(--bw) + 3px); height: 30px; border-bottom: 6px solid var(--b); border-left: 6px solid var(--b); border-bottom-left-radius: 22px; box-sizing: border-box; }
.rf-bhead { position: relative; z-index: 1; margin: 0 0 2px 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.rf-bhead .rf-blabel { background: var(--b); color: #F9FFF1; }
.rf-bproc { font-family: var(--font-data); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.rf-bstops { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rf-bstops::before { content: ""; position: absolute; left: 13px; top: -8px; bottom: -8px; width: 6px; background: var(--b); }
.rf-bends .rf-bstops::before { bottom: 18px; }
.rf-bcol .rf-sbtn { --c: var(--b); gap: 8px; padding-right: 4px; }
.rf-bcol .rf-sname { font-size: 13.5px; }
.rf-bcol .rf-pin { min-width: 24px; height: 24px; font-size: 12px; }
.rf-bend { position: relative; z-index: 1; margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.rf-bend-m { flex: none; width: 26px; height: 6px; margin-left: 3px; border-radius: 3px; background: var(--b); }
.rf-bkey { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--ink-2); }
.rf-bkey li { display: flex; align-items: center; gap: 8px; }
.rf-bk-m { flex: none; display: inline-flex; align-items: center; width: 30px; height: 20px; }
.rf-bk-line { display: block; width: 6px; height: 20px; margin-left: 12px; border-radius: 3px; }
.rf-bk-join { display: block; width: 24px; height: 16px; border-bottom: 5px solid var(--b); border-left: 5px solid var(--b); border-bottom-left-radius: 12px; }
.rf-bk-end { position: relative; display: block; width: 6px; height: 16px; margin-left: 12px; background: var(--b); }
.rf-bk-end::after { content: ""; position: absolute; left: -9px; bottom: -3px; width: 24px; height: 5px; border-radius: 3px; background: var(--b); }

@media (min-width: 400px) { .rf-bmap { --bw: 168px; } }
@media (min-width: 640px) { .rf-bmap { --bw: 220px; } }
@media (min-width: 900px) {
  .rf-bmap { --bw: 170px; }
  .rf-land-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 96px; }
  .rf-land-svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
  .rf-pc-f { display: none; }
}
@media (min-width: 1100px) { .rf-land-grid { column-gap: 140px; } }
@media (prefers-reduced-motion: reduce) { .rf-pc, .rf-land-svg path { transition: none; } }

/* many to many: Causes · Steps · Controls (tools/many_links.py) */
.ml-fig { margin: 4px 0 0; max-width: 520px; }
.ml-svg { display: block; width: 100%; height: auto; font-family: Inter, sans-serif; }
.ml-h { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; fill: var(--ink-2); }
.ml-l { fill: none; stroke: var(--ink-2); stroke-width: 1.4; opacity: .7; }
.ml-n rect { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.2; }
.ml-c0 rect { stroke-dasharray: 3 2; }
.ml-c1 rect { stroke: #17797A; stroke-width: 1.6; }
.ml-id { font-size: 9.5px; font-weight: 700; fill: var(--ink-2); font-family: var(--font-data, monospace); }
.ml-t { font-size: 9.5px; fill: var(--ink); }
.rf-also { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12.5px; color: var(--ink-2); }
.rf-also-b { min-height: 30px; padding: 0 10px; border: 1.5px dashed var(--c); border-radius: 99px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.rf-also-c { display: block; font-size: 12px; color: var(--ink-2); }
/* the story visual (process_routes.story_visual) on the processes page */
.rf-story .pr-story-vis { margin: 4px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; }
.rf-story .pr-st-i { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; width: 90px; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink); }
.rf-story .pr-st-old { opacity: .6; }
.rf-story .pr-st-arr { font-size: 20px; color: var(--ink-2); }
.rf-ml { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.rf-ml-h { margin: 0; font-size: 18px; line-height: 1.25; }
.rf-bkeyw { display: flex; flex-direction: column; gap: 6px; }

/* ---------- policies as principles on the routes (tools/policies_page.py, staging only). A template: no status colours.
   Routes keep the routes-map colours; a principle is an ink pin. Phone: one route at a time; 1100px and up: every
   route in the "by policy" view, and a side panel for the principle card. */
.pp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.pp-main { min-width: 0; }
.pp-panel { display: none; }
.pp-details { display: none; }
.pp-empty { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.pp-polchips, .pp-views, .pp-switch { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); align-self: flex-start; }
.pp-polchips button, .pp-views button, .pp-switch button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; }
.pp-polchips button[aria-pressed="true"], .pp-views button[aria-pressed="true"], .pp-switch button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.pp-polchips button:focus-visible, .pp-views button:focus-visible, .pp-switch button:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.pp-polchips-sm button { min-height: 34px; font-size: 13px; }

/* 1. a policy unfolds into its principles */
.pp-unfold { position: relative; display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.pp-pol { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; background: var(--ink); color: var(--surface); }
.pp-pol .rl-code { color: inherit; opacity: .8; }
.pp-pol b { font-size: 17px; }
.pp-pol span { font-size: 14px; line-height: 1.45; opacity: .92; }
.pp-pol .pp-meta { font-size: 12.5px; opacity: .8; }
.pp-prs { position: relative; list-style: none; margin: 0 0 0 22px; padding: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.pp-prs::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 22px; width: 3px; border-radius: 2px; background: var(--ink); }
.pp-prs li { position: relative; padding-left: 16px; animation: rl-in .35s ease-out both; }
.pp-prs li::before { content: ""; position: absolute; left: -2px; top: 22px; width: 16px; height: 3px; background: var(--ink); }
.pp-prs li:nth-child(2) { animation-delay: .05s; } .pp-prs li:nth-child(3) { animation-delay: .1s; } .pp-prs li:nth-child(4) { animation-delay: .15s; } .pp-prs li:nth-child(n+5) { animation-delay: .2s; }
.pp-pr { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-left: 4px solid var(--ink); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14.5px; line-height: 1.35; text-align: left; cursor: pointer; }
.pp-pr:hover { background: var(--surface-2); }
.pp-pr:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.pp-pr[aria-expanded="true"] { background: var(--tint); }

/* 2. principles on the routes */
.pp-routes { display: flex; flex-direction: column; gap: 10px; }
.pp-rows { display: flex; flex-direction: column; gap: 12px; }
.pp-route { display: none; flex-direction: column; gap: 8px; }
.pp-route.is-sel { display: flex; }
.pp-rname { margin: 0; padding-left: 10px; border-left: 6px solid var(--r); font-size: 16px; }
.pp-line { position: relative; }
.pp-cps { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-cps::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 6px; border-radius: 99px; background: var(--r); }
.pp-cp { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 2px 10px; min-height: 36px; }
.pp-dot { position: relative; z-index: 1; width: 20px; height: 20px; margin-left: 2px; border-radius: 50%; background: var(--surface); border: 4px solid var(--r); box-sizing: border-box; }
.pp-cpn { font-size: 14px; font-weight: 600; }
.pp-mks, .pp-whole { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.pp-mks { grid-column: 2; }
.pp-mks li, .pp-whole li { display: none; }
.pp-mks li.is-on, .pp-whole li.is-on { display: block; }
.pp-mk { min-height: 28px; padding: 0 9px; border: 0; border-radius: 14px 14px 14px 3px; background: var(--ink); color: var(--surface); font-family: var(--font-data); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.pp-mk[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--accent-deep); }
.pp-mk:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.pp-whole { padding: 4px 0 0 34px; }
.pp-whole:not(:has(li.is-on)) { display: none; }
.pp-whole::before { content: ""; width: 100%; height: 0; }
.pp-rlist { display: none; list-style: none; margin: 0; padding: 0; flex-direction: column; gap: 6px; }
.pp-rlist li { display: flex; flex-direction: column; gap: 3px; }
.pp-pols { font-size: 12.5px; color: var(--ink-2); padding-left: 4px; }
[data-view="route"] .pp-line, [data-view="route"] .pp-whole, [data-view="route"] .pp-polchips-sm { display: none; }
[data-view="route"] .pp-rlist { display: flex; }

/* 3. one principle, several policies */
.pp-shared { margin: 4px 0 0; display: flex; flex-direction: column; align-items: center; max-width: 560px; }
.pp-pr-hub { max-width: 320px; border-left-width: 1px; border: 2px solid var(--ink); text-align: center; align-items: center; }
.pp-fan { display: block; width: 100%; height: 40px; }
.pp-sharedpols { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
.pp-polcard { display: flex; flex-direction: column; gap: 2px; width: 100%; height: 100%; padding: 10px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.pp-polcard:hover { background: var(--surface-2); }

/* 4. the principle card */
.pp-dh { margin: 0; font-size: 19px; line-height: 1.25; }
.pp-did { margin: 0; }
.pp-pbody, .pp-dbody { display: flex; flex-direction: column; gap: 12px; }
.pp-dbody .pp-dh, .pp-dbody .pp-did { display: none; }
.pp-sec { display: flex; flex-direction: column; gap: 4px; }
.pp-good { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--tint); font-size: 15px; line-height: 1.5; }
.pp-owner { margin: 0; font-size: 15px; }
.pp-on { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.4; }
.pp-on li { display: flex; align-items: baseline; gap: 8px; }
.pp-on i { flex: none; display: inline-block; width: 14px; height: 5px; border-radius: 3px; transform: translateY(-2px); }
.pp-also { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pp-polchip { min-height: 32px; padding: 0 11px; border: 1.5px dashed var(--ink-2); border-radius: 99px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }

@media (min-width: 640px) {
  .pp-prs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin-left: 0; padding-top: 14px; }
  .pp-prs::before { display: none; }
  .pp-prs li { padding-left: 0; }
  .pp-prs li::before { display: none; }
}
@media (min-width: 1100px) {
  .pp-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
  .pp-panel { display: block; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--ink); }
  [data-view="policy"] .pp-switch { display: none; }
  [data-view="policy"] .pp-route { display: flex; }
  [data-view="policy"] .pp-route { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: start; gap: 4px 12px; }
  [data-view="policy"] .pp-rname { padding-top: 6px; font-size: 14.5px; }
  [data-view="policy"] .pp-line { grid-column: 2; }
  [data-view="policy"] .pp-whole { grid-column: 2; padding: 2px 0 0; }
  .pp-cps { flex-direction: row; gap: 0; }
  .pp-cps::before { left: 10px; right: 10px; top: 8px; bottom: auto; width: auto; height: 6px; }
  .pp-cp { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
  .pp-dot { margin: 1px 0 0; }
  .pp-cpn { font-size: 12.5px; line-height: 1.25; padding: 0 2px; }
  .pp-mks { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .pp-prs li { animation: none; } }
/* the strip with four inside steps (Policies is step 3): a 2 by 2 grid on a phone, one row from 640px */
.rf-strip ol:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .rf-strip ol:has(> li:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* policies, phone: under the route, the selected policy's principles on it, listed with their titles */
.pp-rlist li[data-pp-pols] { display: flex; }
[data-view="policy"] .pp-rlist { display: flex; margin-top: 4px; }
[data-view="policy"] .pp-rlist li:not(.is-on) { display: none; }
[data-view="policy"] .pp-rlist .pp-pols { display: none; }
@media (min-width: 1100px) { [data-view="policy"] .pp-rlist { display: none; } }
/* policies: a principle with no control and no indicator is declared, not managed (dashed, never a status colour) */
.pp-none { margin: 0; padding: 6px 10px; border: 1.5px dashed var(--ink-2); border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: var(--surface); }
.pp-declared { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.pp-pr.pp-gap { border-style: dashed; border-left-style: dashed; border-left-color: var(--ink-2); }
.pp-mk.pp-gap { background: var(--surface); color: var(--ink); border: 1.5px dashed var(--ink); }
/* policies: route-level principles sit under the route name; the stage label on the hub framework steps */
.pp-rhead { display: flex; flex-direction: column; gap: 4px; }
.pp-rhead .pp-whole { padding: 0 0 0 16px; }
@media (min-width: 1100px) { [data-view="policy"] .pp-rhead .pp-whole { padding: 0 0 0 16px; grid-column: auto; } }
.rf-stage { font-family: var(--font-data); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }

/* policies pitch: four steps, a column on a phone and tablet, a row with arrows from 1180px (tools/policies_page.py pitch_html) */
.pp-pitchsteps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; counter-reset: none; }
.pp-pitchstep { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center;
  padding: 14px 16px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); }
.pp-pitchstep + .pp-pitchstep::before { content: ""; position: absolute; left: 47px; top: -22px; width: 2px; height: 18px; background: var(--accent-deep); }
.pp-pitchstep + .pp-pitchstep::after { content: ""; position: absolute; left: 43px; top: -9px; border: 5px solid transparent; border-top: 6px solid var(--accent-deep); border-bottom: 0; }
.pp-pitchicon { grid-row: 1 / span 2; width: 64px; height: 40px; }
.pp-pitchn { display: none; }
.pp-pitchbody { margin: 0 0 18px; display: grid; gap: 12px; }
.pp-pitchlead { margin: 16px 0 0; font-weight: 600; color: var(--ink); }
.pp-pitchbody .rl-p { margin: 0; }
.pp-pitchl { font-size: 1rem; line-height: 1.3; color: var(--ink); }
.pp-pitcht { font-size: .92rem; line-height: 1.45; color: var(--ink-2); }
.pp-pitchicon .pi-f { fill: var(--surface); stroke: var(--accent-deep); stroke-width: 1.5; }
.pp-pitchicon .pi-l { fill: var(--ground); stroke: var(--border-strong); stroke-width: 1.5; }
.pp-pitchicon .pi-s { stroke: var(--accent-deep); stroke-width: 1.5; stroke-linecap: round; fill: none; }
.pp-pitchicon .pi-a { fill: var(--accent-deep); }
.pp-pitchicon .pi-r { stroke: #17797A; stroke-width: 4; stroke-linecap: round; }
.pp-pitchicon .pi-c { fill: var(--surface); stroke: #17797A; stroke-width: 2.5; }
.pp-pitchicon .pi-t { fill: var(--surface); font: 700 10px var(--font-data, monospace); text-anchor: middle; }
@media (min-width: 1180px) {
  .pp-pitchsteps { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 28px; }
  .pp-pitchstep { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: start; row-gap: 8px; padding: 18px; }
  .pp-pitchicon { grid-row: auto; }
  .pp-pitchstep + .pp-pitchstep::before { left: -24px; top: 50%; width: 18px; height: 2px; }
  .pp-pitchstep + .pp-pitchstep::after { left: -9px; top: calc(50% - 4px); border: 5px solid transparent; border-left: 6px solid var(--accent-deep); border-right: 0; }
}

/* principle card, second layout (founder 24 Oct): three cards (risks, controls, indicators) side by side where the
   card has room, stacked in that order on a phone; checkpoints by route as chips; "Also in these policies" in a
   dotted field at the bottom. The detail is a container, so the panel and the drawer each lay it out for their width. */
.pp-detail, .pp-pbody, .pp-dbody { container-type: inline-size; }
.pp-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@container (min-width: 420px) { .pp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pp-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); min-width: 0; }
.pp-card .rl-list { font-size: 13.5px; }
.pp-card .rl-code { white-space: nowrap; }
.pp-cpgroup { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.pp-cproute-h { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; }
.pp-cproute-h i { display: inline-block; width: 14px; height: 5px; border-radius: 3px; background: var(--c); }
.pp-cpchips { list-style: none; margin: 0; padding: 0 0 0 22px; display: flex; flex-wrap: wrap; gap: 6px; }
.pp-cpchip { padding: 4px 10px; border-radius: 99px; background: var(--tint); font-size: 13px; line-height: 1.35; }
.pp-cpchip.pp-cproute { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1.5px solid var(--c); font-weight: 600; }
.pp-cpchip.pp-cproute i { display: inline-block; width: 12px; height: 4px; border-radius: 2px; background: var(--c); }
.pp-cpwhole { padding-left: 0; margin-top: 4px; }
.pp-alsofield { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 2px dotted var(--border-strong); border-radius: 12px; }
@media (min-width: 1280px) {
  .pp-grid { grid-template-columns: minmax(0, 1fr) 470px; }
  /* the wider panel leaves the routes less room: the route name sits above its line, so the line gets the full width */
  [data-view="policy"] .pp-route { grid-template-columns: minmax(0, 1fr); }
  [data-view="policy"] .pp-line, [data-view="policy"] .pp-whole { grid-column: 1; }
  [data-view="policy"] .pp-rname { padding-top: 0; }
}

/* threat register: how each external indicator would be fed (hub round item F) */
.er-feed { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px dashed var(--border); font-size: 13px; line-height: 1.4; }
.er-feed p { margin: 0; }
.er-feed-k { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.er-auto { display: inline-flex; padding: 2px 8px; border-radius: 99px; border: 1.5px dashed var(--ink-2); font-size: 12px; font-weight: 700; color: var(--ink-2); }
.er-auto.is-yes { border-style: solid; border-color: var(--accent-deep); color: var(--accent-deep); }
.er-feed-n { color: var(--ink-2); }
/* policy pins carry the principle's short title, not its code (hub round item H) */
.pp-mk { font-family: var(--font-text); font-size: 12px; font-weight: 600; line-height: 1.2; padding: 5px 9px; text-align: left; max-width: 150px; }
/* the strip in plain business English first (founder 24 Oct): the plain label, the step name small under it */
.rf-stw { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 5px 0; text-align: left; line-height: 1.2; }
.rf-st2 { font-family: var(--font-data); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }

/* item G (founder, 25 Oct): the principle card compressed to labels and pills; no related risks or controls */
.pp-labs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pp-lab { padding: 4px 10px; border-radius: 8px; border: 1.5px solid var(--border-strong); background: var(--surface); font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.pp-pill { display: inline-block; padding: 3px 10px; border-radius: 99px; border: 1.5px solid var(--accent-deep); background: var(--surface); font-size: 13.5px; font-weight: 600; }

/* policies v3 (25 Oct): each section is a heading, a sub and labelled points beside its visual (from 1100px, next to
   the principle panel), or above a wide visual; no prose sections */
.pp-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.pp-txt { display: flex; flex-direction: column; gap: 12px; max-width: 46em; min-width: 0; }
.pp-txt .h2-sm { margin: 0; }
.pp-sub { margin: 0; }
.pp-points { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pp-points li { padding-left: 12px; border-left: 3px solid var(--accent-deep); font-size: 15px; line-height: 1.5; }
.pp-example { margin: 4px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--border-strong); font-size: 14.5px; line-height: 1.5; }
.pp-vis { min-width: 0; }
.pp-meta .rl-k { margin-right: 4px; }
.pp-prs-l { margin: 10px 0 6px; }
@media (min-width: 1100px) { .pp-split:not(.pp-stack) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; } }

/* policies v4 (item J, 25 Oct): the sections follow the layout standard (site.css .sec). The three steps stay a
   column in the right-hand visual at every width; the examples section is the page's one full-width exception, the
   policy tabs and principles on the left of it and the principle panel beside them from 1100px. */
.pp-v4 .pp-txt { max-width: 60ch; }
@media (min-width: 960px) { .pp-v4 .sec-wide .pp-txt { max-width: min(60ch, calc((100% - 56px) * 5 / 12)); } }
.pp-v4 .pp-pitchsteps { margin: 0; }
@media (min-width: 1180px) {
  .pp-v4 .pp-pitchsteps { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pp-v4 .pp-pitchstep { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 2px; align-content: center; padding: 16px 18px; }
  .pp-v4 .pp-pitchicon { grid-row: 1 / span 2; }
  .pp-v4 .pp-pitchstep + .pp-pitchstep::before { left: 49px; top: -22px; width: 2px; height: 18px; }
  .pp-v4 .pp-pitchstep + .pp-pitchstep::after { left: 45px; top: -9px; border: 5px solid transparent; border-top: 6px solid var(--accent-deep); border-bottom: 0; }
}
.pp-pitchicon .pi-k { fill: none; stroke: var(--surface); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pp-v4 .pp-grid { gap: 24px; }
.pp-v4 .pp-main { display: flex; flex-direction: column; gap: 10px; }
.pp-v4 .pp-unfold { margin-top: 6px; }
@media (min-width: 1100px) {
  .pp-v4 .pp-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; }
  .pp-v4 .pp-panel { top: 88px; max-height: calc(100vh - 104px); }
}
/* the owner pill on the dark policy card (J.5 bug: the light pill took the card's light text, so it read as an empty bar) */
.pp-pol .pp-meta { opacity: 1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 0; }
.pp-pol .pp-meta .rl-k { color: #C9D6D9; margin: 0; }
.pp-pol .pp-pill { opacity: 1; background: transparent; border-color: #9FB6BB; color: var(--surface); font-size: 13px; }
/* write once: the principle, written once, and the policies that use it, each with its reason */
.pp-v4 .pp-shared { max-width: none; width: 100%; margin: 0; }
.pp-hub { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 380px; padding: 14px 18px; border: 2px solid var(--ink); border-radius: 12px;
  background: var(--surface); text-align: center; font-size: 15px; line-height: 1.35; }
.pp-hub .pp-meta { margin: 6px 0 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.pp-why-l { margin: 0 0 8px; align-self: flex-start; }
.pp-v4 .pp-polcard { gap: 4px; padding: 12px; }
.pp-why { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); font-weight: 400; }
@media (max-width: 599px) {
  .pp-v4 .pp-sharedpols { grid-template-columns: minmax(0, 1fr); }
  .pp-v4 .pp-fan { display: none; }
  .pp-why-l { margin-top: 12px; }
}