/* InsurOps product screens library for the assurified.com refresh prototype (October 2026).
   Load after assets/base.css. Every rule is scoped to .io-screen and uses the live-site tokens from base.css
   (:root and the LIVE SITE FIDELITY section). Layout responds to the frame's own width through container queries,
   so a screen behaves the same in a full-width band or a narrow column. */

/* ---------- Frame (live card: white/3%, white/10 border, 16px radius, 24px padding) ---------- */
.io-screen {
  container: io-screen / inline-size;
  --io-row: rgba(15, 23, 42, 0.8);
  --io-sel-b: oklch(var(--o) / 0.3);
  --io-sel-bg: oklch(var(--o) / 0.1);
  --io-done-b: rgba(255, 255, 255, 0.35);
  --io-a: var(--orange-500);
  --io-b: #ffffff;
  --io-c: var(--orange-300);
  --io-d: var(--slate-400);
  --io-e: #45556c;
  display: block;
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 24px;
  color: var(--slate-300);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 480px) { .io-screen { padding: 16px; } }

/* Resets use :where() so they carry no class weight and every component class below wins */
:where(.io-screen) *, :where(.io-screen) *::before, :where(.io-screen) *::after { box-sizing: border-box; }
:where(.io-screen) :where(p, ul, ol, table) { margin: 0; }
:where(.io-screen) :where(ul, ol) { padding: 0; list-style: none; }
:where(.io-screen) :where(button, input, select) { font: inherit; color: inherit; margin: 0; }
:where(.io-screen) button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.io-screen :focus { outline: none; }
.io-screen :focus-visible { outline: 2px solid var(--orange-500); outline-offset: 2px; }
.io-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Header row: title, then optional hint or controls */
.io-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin: 0 0 20px; }
.io-title { min-width: 0; font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--slate-100); }
.io-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.io-hint { font-size: 12px; line-height: 16px; color: var(--slate-500); }
.io-body { min-width: 0; }

/* Type helpers */
.io-strong { color: var(--slate-100); font-weight: 600; }
.io-sub { font-size: 13.5px; line-height: 1.55; color: var(--slate-400); }
.io-meta { font-size: 12px; line-height: 16px; color: var(--slate-500); }
.io-mono { font-family: var(--mono); font-size: 11px; line-height: 16px; letter-spacing: 0; }
.io-num { font-variant-numeric: tabular-nums; }
.io-label { display: block; font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-400); }
.io-th { font-size: 10.5px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-400); }
.io-em { background: linear-gradient(to right, var(--orange-300), var(--orange-500)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.io-note { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--slate-500); }

/* ---------- Buttons (live: rounded-full; primary orange-500 with btn-ink bold; ghost white/20) ---------- */
.io-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 18px; border-radius: 9999px; border: 1px solid var(--orange-500); background: var(--orange-500); color: var(--btn-ink); font-size: 13px; line-height: 20px; font-weight: 700; white-space: nowrap; transition: background .15s, border-color .15s, opacity .15s; }
.io-btn:hover { background: var(--orange-600); border-color: var(--orange-600); }
.io-btn.io-ghost { background: transparent; border-color: var(--hairline-2); color: #fff; font-weight: 500; }
.io-btn.io-ghost:hover { background: rgba(255, 255, 255, 0.05); }
.io-btn.io-xs { padding: 3px 12px; font-size: 12px; line-height: 18px; }
.io-btn[disabled] { opacity: .45; cursor: default; }
.io-btn[disabled]:hover { background: var(--orange-500); }

/* Segmented controls: active = orange-500 with btn-ink, rounded-full */
.io-seg { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.io-seg button { padding: 6px 14px; border-radius: 9999px; border: 1px solid var(--hairline-2); background: transparent; color: var(--slate-300); font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.io-seg button:hover { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.io-seg button[aria-pressed="true"] { background: var(--orange-500); border-color: var(--orange-500); color: var(--btn-ink); }
.io-seg button:disabled { opacity: .4; cursor: default; }
.io-seg button:disabled:hover { color: var(--slate-300); border-color: var(--hairline-2); }
.io-seg.io-sm button { padding: 4px 12px; font-size: 12px; }

/* Native select styled as a rounded chip */
.io-select { position: relative; display: inline-flex; min-width: 0; max-width: 100%; }
.io-select select { -webkit-appearance: none; appearance: none; max-width: 100%; min-width: 0; padding: 6px 34px 6px 14px; border-radius: 9999px; border: 1px solid var(--hairline-2); background: var(--io-row); color: var(--slate-100); font-size: 13px; line-height: 18px; font-weight: 600; cursor: pointer; text-overflow: ellipsis; }
.io-select select:hover { border-color: rgba(255, 255, 255, 0.35); }
.io-select select option { background: #0f172a; color: #fff; }
.io-select::after { content: ""; position: absolute; right: 15px; top: 50%; width: 6px; height: 6px; border-right: 2px solid var(--slate-400); border-bottom: 2px solid var(--slate-400); transform: translateY(-70%) rotate(45deg); pointer-events: none; }

/* ---------- Status pills: two states only ---------- */
.io-pill { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 9999px; border: 1px solid var(--io-done-b); color: #fff; font-size: 10.5px; line-height: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.io-pill.is-open { color: var(--orange-400); border-color: var(--io-sel-b); }
.io-pill.is-view { color: var(--slate-300); border-color: var(--hairline-2); }
.io-pill.is-none { color: var(--slate-500); border-color: transparent; padding-left: 0; padding-right: 0; font-weight: 600; }

/* ---------- Shared rows, lists, KPI tiles, tables ---------- */
.io-list { display: grid; gap: 8px; }
.io-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--hairline); background: var(--io-row); font-size: 13.5px; }
.io-list b { display: block; color: var(--slate-100); font-weight: 600; }
.io-list small { display: block; font-size: 12px; line-height: 1.45; color: var(--slate-400); }

.io-chipbtn { padding: 7px 11px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--io-row); color: var(--slate-100); font-size: 13px; line-height: 18px; font-weight: 600; text-align: left; transition: border-color .15s, background .15s; }
.io-chipbtn:hover { border-color: var(--hairline-2); }
.io-chipbtn[aria-pressed="true"] { border-color: var(--io-sel-b); background: var(--io-sel-bg); }

.io-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.io-kpis.io-k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.io-kpi { min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--hairline); background: var(--io-row); }
.io-kpi small { display: block; font-size: 11.5px; line-height: 16px; font-weight: 600; color: var(--slate-400); }
.io-kpi b { display: block; margin-top: 2px; font-size: 20px; line-height: 1.3; font-weight: 800; color: var(--slate-100); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.io-kpi span { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--slate-500); }

.io-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--hairline-2) transparent; }
.io-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.io-table th, .io-table td { padding: 9px 10px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--hairline); }
.io-table thead th { padding-top: 8px; padding-bottom: 8px; font-size: 10.5px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-400); }
.io-table tbody th { font-weight: 500; color: var(--slate-300); }
.io-table td { color: var(--slate-100); font-variant-numeric: tabular-nums; }
.io-table .io-r { text-align: right; }

.io-track { display: block; height: 10px; border-radius: 9999px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.io-track i { display: block; height: 100%; border-radius: 9999px; transform-origin: left center; animation: io-grow .45s ease-out; }
@keyframes io-grow { from { transform: scaleX(0); } }

.io-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12px; line-height: 16px; color: var(--slate-400); }
.io-legend span { display: inline-flex; align-items: center; gap: 6px; }
.io-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }

@container io-screen (max-width: 600px) { .io-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container io-screen (max-width: 460px) { .io-kpis.io-k3 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- hub ---------- */
.io-hub-svg { display: block; width: 100%; max-width: 820px; height: auto; margin: 0 auto; overflow: visible; }
.io-hub .io-spoke { stroke: var(--hairline-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: stroke .15s; }
.io-hub .io-spoke.is-on { stroke: var(--orange-500); stroke-width: 2; }
.io-hub .io-node { cursor: pointer; }
.io-hub .io-node:focus-visible { outline: none; }
.io-hub .io-node .io-node-bg { fill: var(--bg); }
.io-hub .io-node .io-node-box { fill: var(--io-row); stroke: var(--hairline); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill .15s, stroke .15s; }
.io-hub .io-node text { fill: var(--slate-100); font-family: var(--font); font-size: 13px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.io-hub .io-node:hover .io-node-box { stroke: var(--hairline-2); }
.io-hub .io-node[aria-pressed="true"] .io-node-box { fill: var(--io-sel-bg); stroke: var(--io-sel-b); }
.io-hub .io-node:focus-visible .io-node-box { stroke: var(--orange-500); stroke-width: 2; }
.io-hub-ctr circle { fill: var(--orange-500); }
.io-hub-ctr text { fill: var(--btn-ink); font-family: var(--font); font-size: 15px; font-weight: 800; text-anchor: middle; }
.io-hub-list { display: none; flex-wrap: wrap; gap: 6px; }
.io-hub-detail { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.io-hub-detail .io-strong { font-size: 15px; line-height: 1.4; }
.io-hub-detail p + p { margin-top: 4px; max-width: 70ch; color: var(--slate-300); }
@container io-screen (max-width: 540px) { .io-hub { display: none; } .io-hub-list { display: flex; } }

/* ---------- location ---------- */
.io-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--hairline); overflow-x: auto; scrollbar-width: none; }
.io-tabs::-webkit-scrollbar { display: none; }
.io-tab { flex: none; margin-bottom: -1px; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--slate-400); font-size: 13px; line-height: 20px; font-weight: 600; transition: color .15s, border-color .15s; }
.io-tab:hover { color: #fff; }
.io-tab[aria-selected="true"] { color: var(--slate-100); border-bottom-color: var(--orange-500); }
.io-tab:focus-visible { outline-offset: -2px; }
.io-tabpanel { min-height: 260px; }
.io-cope { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.io-fields { display: grid; gap: 6px; align-content: start; }
.io-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--io-row); text-align: left; transition: border-color .15s, background .15s; }
.io-field:hover { border-color: var(--hairline-2); }
.io-field[aria-pressed="true"] { border-color: var(--io-sel-b); background: var(--io-sel-bg); }
.io-field small { display: block; font-size: 10.5px; line-height: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate-400); }
.io-field .io-v { display: block; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--slate-100); }
.io-hist { align-self: start; padding: 16px; border-radius: 12px; border: 1px solid var(--hairline); background: rgba(2, 6, 23, 0.45); }
.io-hist ol { display: grid; gap: 12px; margin-top: 14px; }
.io-hist li { padding-left: 12px; border-left: 2px solid var(--hairline-2); font-size: 13px; }
.io-hist li:first-child { border-left-color: var(--orange-500); }
.io-hv { color: var(--slate-100); font-weight: 600; }
.io-hm { margin-top: 2px; color: var(--slate-400); overflow-wrap: anywhere; }
.io-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.io-loss-h { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 12px; }
.io-bars { display: grid; gap: 8px; margin-top: 16px; }
.io-bars > div { display: grid; grid-template-columns: 130px minmax(0, 1fr) 64px; gap: 10px; align-items: center; font-size: 12.5px; }
.io-bars .io-track i { background: var(--orange-500); }
.io-bars em { font-style: normal; text-align: right; color: var(--slate-100); font-variant-numeric: tabular-nums; }
@container io-screen (max-width: 540px) {
  .io-tabs { flex-wrap: wrap; overflow: visible; }
  .io-tab { padding: 8px 10px; }
  .io-cope { grid-template-columns: minmax(0, 1fr); }
  .io-bars > div { grid-template-columns: 96px minmax(0, 1fr) 52px; }
}

/* ---------- roles ---------- */
.io-setdesc { margin: 10px 0 16px; max-width: 80ch; }
.io-mx { min-width: 560px; }
.io-mx tbody th { width: 34%; }

/* ---------- routing ---------- */
.io-route-hint { margin-bottom: 12px; }
.io-route-f { margin-bottom: 12px; }
.io-docs { display: flex; flex-wrap: wrap; gap: 6px; max-height: 238px; overflow: auto; padding: 2px 4px 2px 2px; scrollbar-width: thin; scrollbar-color: var(--hairline-2) transparent; }
.io-doc { padding: 6px 11px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--io-row); color: var(--slate-100); font-size: 12.5px; line-height: 18px; font-weight: 500; text-align: left; transition: border-color .15s, background .15s; }
.io-doc:hover { border-color: var(--hairline-2); }
.io-doc[aria-pressed="true"] { border-color: var(--io-sel-b); background: var(--io-sel-bg); }
.io-doc-r { margin-left: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange-400); }
.io-route { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.io-route-t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.io-route-t b { font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--slate-100); }
.io-dest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.io-dest span { padding: 3px 10px; border-radius: 10px; border: 1px solid var(--io-sel-b); background: var(--io-row); color: var(--slate-100); font-size: 12px; line-height: 18px; font-weight: 600; }
.io-path { display: grid; margin-top: 16px; }
.io-path li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding-bottom: 12px; font-size: 14px; color: var(--slate-300); opacity: 0; transform: translateY(6px); animation: io-in .25s ease-out forwards; }
.io-path li::before { content: ""; position: relative; z-index: 1; width: 12px; height: 12px; margin: 5px 0 0 5px; border-radius: 50%; border: 2px solid var(--orange-500); background: var(--bg); }
.io-path li:not(:last-child)::after { content: ""; position: absolute; left: 10.5px; top: 19px; bottom: 0; width: 1px; background: var(--hairline-2); }
.io-path li:last-child::before { background: var(--orange-500); }
.io-route-x { margin-top: 2px; font-size: 13px; color: var(--slate-400); }
@keyframes io-in { to { opacity: 1; transform: none; } }

/* ---------- compare ---------- */
.io-cmp { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; font-size: 13px; }
.io-cmp th, .io-cmp td { padding: 10px 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--hairline); overflow-wrap: anywhere; transition: background .3s, box-shadow .3s, color .3s; }
.io-cmp thead th { border-top: 0; background: var(--io-row); font-size: 10.5px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-400); }
.io-cmp col.io-ck { width: 38%; }
.io-cmp tbody th { font-weight: 500; color: var(--slate-100); }
.io-cmp td { color: var(--slate-300); font-variant-numeric: tabular-nums; }
.io-cmp.is-run .io-chg { background: var(--io-sel-bg); color: var(--slate-100); box-shadow: inset 3px 0 0 var(--orange-500); }
.io-flag { display: none; margin-left: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange-400); }
.io-cmp.is-run .io-flag { display: inline; }
.io-cmp-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--slate-400); }
.io-cmp-foot b { color: var(--slate-100); }
@container io-screen (max-width: 540px) { .io-cmp { font-size: 12px; } .io-cmp th, .io-cmp td { padding: 9px 8px; } }

/* ---------- chat ---------- */
.io-chat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.io-bub { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--hairline); background: var(--io-row); color: var(--slate-300); font-size: 14px; }
.io-bub.is-q { border-color: var(--io-sel-b); }
.io-bub .io-label { margin-bottom: 6px; }
.io-src { margin-top: 8px; color: var(--slate-500); }
@container io-screen (max-width: 540px) { .io-chat { grid-template-columns: minmax(0, 1fr); } }

/* ---------- versioning ---------- */
.io-tl { position: relative; height: 52px; margin: 2px 9px 4px; }
.io-tl-bar, .io-tl-fill { position: absolute; left: 0; top: 22px; height: 4px; border-radius: 9999px; }
.io-tl-bar { right: 0; background: var(--hairline-2); }
.io-tl-fill { width: 0; background: var(--orange-500); }
.io-tl-mark { position: absolute; top: 13px; width: 22px; height: 22px; margin-left: -11px; display: grid; place-items: center; border-radius: 9999px; border: 1px solid var(--hairline-2); background: #0b1222; color: var(--slate-400); font-size: 10.5px; font-weight: 800; transition: background .2s, border-color .2s, color .2s; }
.io-tl-mark.is-on { background: var(--orange-500); border-color: var(--orange-500); color: var(--btn-ink); }
.io-range { display: block; width: 100%; height: 22px; margin: 6px 0 0; background: transparent; accent-color: var(--orange-500); cursor: pointer; -webkit-appearance: none; appearance: none; }
.io-range::-webkit-slider-runnable-track { height: 4px; border-radius: 9999px; background: var(--hairline-2); }
.io-range::-moz-range-track { height: 4px; border-radius: 9999px; background: var(--hairline-2); }
.io-range::-moz-range-progress { height: 4px; border-radius: 9999px; background: var(--orange-500); }
.io-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; border: 2px solid var(--btn-ink); background: var(--orange-500); box-shadow: 0 0 0 1px var(--orange-500); }
.io-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--btn-ink); background: var(--orange-500); box-shadow: 0 0 0 1px var(--orange-500); }
.io-range:focus-visible { outline-offset: 4px; }
.io-tl-ends { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; color: var(--slate-500); }
.io-asof { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-top: 14px; }
.io-asof b { font-size: 22px; line-height: 1.3; font-weight: 800; color: var(--slate-100); font-variant-numeric: tabular-nums; }
.io-pol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.io-pol > div { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--hairline); background: var(--io-row); transition: border-color .3s, background .3s; }
.io-pol > div.is-chg { border-color: var(--io-sel-b); background: var(--io-sel-bg); }
.io-pol small { display: block; font-size: 11.5px; line-height: 16px; font-weight: 600; color: var(--slate-400); }
.io-pol strong { display: block; margin-top: 2px; font-size: 15.5px; color: var(--slate-100); font-variant-numeric: tabular-nums; }
.io-evts { display: grid; gap: 6px; margin-top: 14px; }
.io-evts li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 10px; align-items: center; font-size: 13px; color: var(--slate-500); transition: color .2s; }
.io-evts li.is-on { color: var(--slate-300); }
.io-kind { padding: 1px 8px; border-radius: 9999px; border: 1px solid var(--hairline); color: var(--slate-500); font-size: 10px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.io-evts li.is-on .io-kind { color: var(--orange-400); border-color: var(--io-sel-b); }
@container io-screen (max-width: 540px) {
  .io-pol { grid-template-columns: minmax(0, 1fr); }
  .io-evts li { grid-template-columns: auto minmax(0, 1fr); justify-items: start; }
  .io-evts li > span:last-child { grid-column: 1 / -1; }
}

/* ---------- tower ---------- */
.io-tower-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 18px; align-items: end; }
.io-tower { display: flex; flex-direction: column-reverse; gap: 4px; min-width: 0; }
.io-layer { display: flex; gap: 4px; }
.io-tseg { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 6px 10px; border-radius: 10px; border: 1px dashed var(--hairline-2); color: var(--slate-500); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; transition: background .35s, border-color .35s, color .35s; }
.io-tseg b { font-size: 12.5px; font-weight: 700; }
.io-tseg.is-in { border: 1px solid var(--io-sel-b); background: var(--io-sel-bg); color: var(--slate-100); }
.io-tseg.is-just { border-color: oklch(var(--o) / 0.6); background: oklch(var(--o) / 0.2); }
.io-tower-side { display: grid; gap: 10px; font-size: 12.5px; color: var(--slate-400); }
.io-tower-side b { display: block; font-size: 26px; line-height: 1.15; font-weight: 800; color: var(--slate-100); font-variant-numeric: tabular-nums; }
.io-tower-side b.io-em { color: transparent; }
.io-feed { margin-top: 14px; min-height: 20px; font-size: 12.5px; color: var(--slate-400); }
@container io-screen (max-width: 540px) {
  .io-tower-wrap { grid-template-columns: minmax(0, 1fr); }
  .io-tower-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- thread ---------- */
.io-thread { display: grid; gap: 10px; }
.io-msg { max-width: 88%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--hairline); background: var(--io-row); color: var(--slate-300); font-size: 13.5px; }
.io-msg.is-me { justify-self: end; border-color: var(--io-sel-b); }
.io-who { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 12px; margin-bottom: 4px; font-size: 11.5px; color: var(--slate-400); }
.io-who b { color: var(--slate-100); font-weight: 600; }
.io-att { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; margin-top: 8px; padding: 4px 6px 4px 10px; border-radius: 10px; border: 1px solid var(--hairline-2); color: var(--slate-100); font-size: 12px; overflow-wrap: anywhere; }
.io-cc { margin-top: 4px; font-size: 11.5px; color: var(--slate-500); }
@container io-screen (max-width: 540px) { .io-msg { max-width: 100%; } }

/* ---------- renewal ---------- */
.io-journey { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.io-journey button { height: 44px; padding: 0; border-radius: 10px; border: 1px solid var(--hairline); background: var(--io-row); color: var(--slate-400); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; transition: background .2s, border-color .2s, color .2s; }
.io-journey button:hover { border-color: var(--hairline-2); color: #fff; }
.io-journey button.is-done { border-color: var(--io-sel-b); background: var(--io-sel-bg); color: var(--orange-400); }
.io-journey button.is-on { border-color: var(--orange-500); background: var(--orange-500); color: var(--btn-ink); }
.io-phases { display: grid; grid-template-columns: 3fr 6fr 3fr; gap: 4px; margin-top: 8px; }
.io-phases span { padding-top: 6px; border-top: 2px solid var(--hairline-2); color: var(--slate-500); font-size: 10.5px; line-height: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: color .2s, border-color .2s; }
.io-phases span.is-on { color: var(--orange-400); border-top-color: var(--orange-500); }
.io-stepcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; min-height: 150px; margin-top: 22px; }
.io-big { font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.io-st-ph { display: none; margin-bottom: 4px; }
.io-stepcard .io-st-t { margin-top: 0; font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--slate-100); }
.io-stepcard p { margin-top: 6px; max-width: 64ch; font-size: 14.5px; color: var(--slate-300); }
.io-assign, .io-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.io-assign span { padding: 3px 10px; border-radius: 9999px; border: 1px solid var(--io-sel-b); background: var(--io-sel-bg); color: var(--slate-100); font-size: 12px; line-height: 18px; }
.io-assign span.is-ap { border-color: var(--io-done-b); background: transparent; }
.io-tags span { padding: 2px 9px; border-radius: 9999px; border: 1px solid var(--hairline); background: var(--io-row); color: var(--slate-300); font-size: 11.5px; line-height: 18px; }
@container io-screen (max-width: 540px) {
  .io-journey { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .io-phases { display: none; }
  .io-st-ph { display: block; }
  .io-stepcard { gap: 12px; }
  .io-big { font-size: 40px; }
}

/* ---------- tcor-breakdown ---------- */
.io-tcor { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.io-donut { position: relative; width: 200px; height: 200px; }
.io-donut svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.io-donut circle { fill: none; stroke-width: 30; cursor: pointer; transition: stroke-width .15s, opacity .15s; }
.io-donut circle.is-dim { opacity: .35; }
.io-donut circle.is-on { stroke-width: 38; }
.io-donut-ctr { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.io-donut-ctr b { font-size: 24px; line-height: 1.15; font-weight: 800; font-variant-numeric: tabular-nums; }
.io-donut-ctr span { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate-400); }
.io-comps { display: grid; gap: 6px; min-width: 0; }
.io-comp { border-radius: 12px; border: 1px solid var(--hairline); background: var(--io-row); overflow: hidden; transition: border-color .15s, background .15s; }
.io-comp.is-on { border-color: var(--io-sel-b); background: var(--io-sel-bg); }
.io-comp > button { display: grid; grid-template-columns: 14px 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; border: 0; background: none; text-align: left; }
.io-chev { font-size: 11px; color: var(--slate-400); transition: transform .15s; }
.io-comp.is-on .io-chev { transform: rotate(90deg); color: var(--orange-400); }
.io-dot { width: 10px; height: 10px; border-radius: 50%; }
.io-nm { display: block; font-size: 13.5px; line-height: 1.35; font-weight: 600; color: var(--slate-100); }
.io-ty { display: block; font-size: 11.5px; line-height: 1.4; color: var(--slate-400); }
.io-amt { text-align: right; font-variant-numeric: tabular-nums; }
.io-amt b { display: block; font-size: 14px; color: var(--slate-100); }
.io-amt span { font-size: 11.5px; color: var(--slate-400); }
.io-factors { padding: 0 12px 12px 46px; font-size: 13px; }
.io-factors table { width: 100%; border-collapse: collapse; }
.io-factors th { padding: 6px 0; border-bottom: 1px solid var(--hairline); text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-400); }
.io-factors td { padding: 6px 0; border-bottom: 1px solid var(--hairline); color: var(--slate-300); font-variant-numeric: tabular-nums; }
.io-factors th:last-child, .io-factors td:last-child { text-align: right; }
.io-factors tr.is-sum td { border-bottom: 0; font-weight: 700; color: var(--slate-100); }
.io-factors p { color: var(--slate-300); }
@container io-screen (max-width: 540px) {
  .io-tcor { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .io-comps { width: 100%; }
  .io-factors { padding-left: 12px; }
}

/* ---------- tcor-analytics and rra-benchmarks: paired bars ---------- */
.io-pairs { display: grid; gap: 8px; margin-top: 12px; }
.io-pair { display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) 76px; gap: 8px 16px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--hairline); background: var(--io-row); }
.io-pair-n { min-width: 0; }
.io-pair-n b { display: block; font-size: 13.5px; line-height: 1.35; font-weight: 600; color: var(--slate-100); }
.io-pair-n span { display: block; font-size: 12px; line-height: 16px; color: var(--slate-500); }
.io-pair-bars { display: grid; gap: 5px; min-width: 0; }
.io-pb { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 10px; align-items: center; }
.io-pb .io-track { height: 8px; }
.io-pb em { font-style: normal; font-size: 12px; line-height: 16px; text-align: right; color: var(--slate-300); font-variant-numeric: tabular-nums; white-space: nowrap; }
.io-pair-c { text-align: right; font-size: 13px; font-weight: 700; color: var(--slate-100); font-variant-numeric: tabular-nums; white-space: nowrap; }
.io-pair-c span { display: block; font-size: 11px; font-weight: 500; color: var(--slate-500); }
.io-ta-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; }
.io-c-a { background: var(--io-a); }
.io-c-b { background: var(--io-b); }
@container io-screen (max-width: 600px) {
  .io-pair { grid-template-columns: minmax(0, 1fr) auto; }
  .io-pair-bars { grid-column: 1 / -1; grid-row: 2; }
  .io-pb { grid-template-columns: minmax(0, 1fr) 76px; }
}

/* ---------- locations-dashboard ---------- */
.io-ld { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; }
.io-ld-ftoggle { display: none; justify-self: start; }
.io-ld-filters { display: grid; gap: 16px; padding: 16px; border-radius: 12px; border: 1px solid var(--hairline); background: var(--io-row); }
.io-ld-fhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.io-ld-group { display: grid; gap: 8px; }
.io-ld-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.io-map { position: relative; width: 100%; min-width: 0; aspect-ratio: 800 / 300; min-height: 210px; border-radius: 12px; border: 1px solid var(--hairline); background: #0b1222; overflow: hidden; }
.io-map svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.io-pin { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 32px; height: 32px; padding: 0 11px; border-radius: 9999px; border: 1px solid var(--io-done-b); background: rgba(2, 6, 23, 0.88); color: #fff; font-size: 13px; line-height: 1; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); transition: background .15s, border-color .15s, color .15s; }
.io-pin:hover { border-color: var(--orange-300); }
.io-pin[aria-pressed="true"] { background: var(--orange-500); border-color: var(--orange-500); color: var(--btn-ink); }
.io-pin .io-pin-n { display: none; }
.io-pin.is-single .io-pin-l { font-size: 12.5px; font-weight: 600; }
.io-ld-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.io-input { flex: 1 1 200px; min-width: 0; max-width: 340px; padding: 7px 14px; border-radius: 9999px; border: 1px solid var(--hairline-2); background: var(--io-row); color: var(--slate-100); font-size: 13px; line-height: 18px; }
.io-input::placeholder { color: var(--slate-500); }
.io-input:focus { border-color: var(--orange-500); }
.io-input:focus-visible { outline: none; }
.io-ld-sum { font-size: 12.5px; line-height: 1.4; color: var(--slate-400); }
.io-ld-table { min-width: 560px; }
.io-ld-table tbody tr { cursor: pointer; transition: background .15s; }
.io-ld-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.io-ld-table tbody tr.is-on { background: var(--io-sel-bg); }
.io-ld-table tbody tr.is-on > th { box-shadow: inset 2px 0 0 var(--orange-500); }
.io-linkbtn { padding: 0; border: 0; background: none; color: var(--orange-400); font-weight: 600; text-align: left; }
.io-linkbtn:hover { text-decoration: underline; }
.io-empty { padding: 18px 10px; color: var(--slate-500); text-align: center; }
@container io-screen (max-width: 760px) {
  .io-ld { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .io-ld-ftoggle { display: inline-flex; }
  .io-ld-filters { display: none; }
  .io-ld.is-fopen .io-ld-filters { display: grid; }
}
@container io-screen (max-width: 640px) {
  .io-pin { width: 30px; min-width: 30px; height: 30px; padding: 0; }
  .io-pin.is-single .io-pin-l { display: none; }
  .io-pin.is-single .io-pin-n { display: inline; }
}

/* ---------- rp-dashboard ---------- */
.io-rp { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.io-rp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.io-rp-tile { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100%; min-width: 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--hairline); background: var(--io-row); text-align: left; transition: border-color .15s, background .15s; }
.io-rp-tile:hover { border-color: var(--hairline-2); }
.io-rp-tile[aria-pressed="true"] { border-color: var(--io-sel-b); background: var(--io-sel-bg); }
.io-rp-tile > .io-th { display: block; }
.io-rp-n { display: block; margin-top: 2px; font-size: 24px; line-height: 1.25; font-weight: 800; color: var(--slate-100); font-variant-numeric: tabular-nums; }
.io-stack { display: flex; gap: 2px; height: 8px; margin: 12px 0 10px; border-radius: 9999px; overflow: hidden; background: rgba(255, 255, 255, 0.05); }
.io-stack i { display: block; height: 100%; min-width: 3px; transition: flex-grow .35s ease-out; }
.io-rp-leg { display: grid; gap: 4px; }
.io-rp-leg > span { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; line-height: 18px; color: var(--slate-300); }
.io-rp-leg i { width: 8px; height: 8px; border-radius: 50%; }
.io-rp-leg em { font-style: normal; color: var(--slate-100); font-variant-numeric: tabular-nums; }
.io-rp-attn { min-width: 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--hairline); background: var(--io-row); }
.io-rp-attn-h { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 6px; }
.io-rp-attn li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--hairline); }
.io-rp-attn li .io-strong { display: block; overflow-wrap: anywhere; }
.io-rp-attn li small { display: block; font-size: 12px; line-height: 1.45; color: var(--slate-400); }
.io-rp-attn li .io-mono { color: var(--slate-500); }
.io-sw0 { background: var(--io-a); } .io-sw1 { background: var(--io-b); } .io-sw2 { background: var(--io-c); } .io-sw3 { background: var(--io-d); } .io-sw4 { background: var(--io-e); }
@container io-screen (max-width: 820px) { .io-rp { grid-template-columns: minmax(0, 1fr); } }
@container io-screen (max-width: 460px) { .io-rp-tiles { grid-template-columns: minmax(0, 1fr); } }

/* ---------- rra-loss-risk: scatter ---------- */
.io-chart { position: relative; margin-top: 16px; min-height: 240px; }
.io-chart svg { display: block; width: 100%; overflow: visible; }
.io-chart .io-grid line { stroke: var(--hairline); stroke-width: 1; }
.io-chart .io-base { stroke: var(--hairline-2); stroke-width: 1; }
.io-chart .io-tick { fill: var(--slate-500); font-family: var(--font); font-size: 11px; font-weight: 500; }
.io-chart .io-axl { fill: var(--slate-400); font-family: var(--font); font-size: 11.5px; font-weight: 600; }
.io-pt { cursor: pointer; stroke: rgba(2, 6, 23, 0.7); stroke-width: 1; transition: stroke .12s, stroke-width .12s; }
.io-pt:hover, .io-pt.is-on, .io-pt:focus-visible { outline: none; stroke: #fff; stroke-width: 2; }
.io-tip { position: absolute; left: 0; top: 0; z-index: 2; width: max-content; max-width: 220px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--hairline-2); background: rgba(2, 6, 23, 0.95); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); color: var(--slate-300); font-size: 12.5px; line-height: 1.45; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s; }
.io-tip.is-on { opacity: 1; visibility: visible; }
.io-tip b { display: block; margin-bottom: 2px; color: var(--slate-100); font-size: 13px; }
.io-ramp { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; font-size: 12px; color: var(--slate-400); }
.io-ramp i { flex: 0 1 160px; min-width: 80px; height: 8px; border-radius: 9999px; background: linear-gradient(to right, var(--slate-400), var(--orange-300), var(--orange-500)); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .io-screen *, .io-screen *::before, .io-screen *::after { animation: none !important; transition: none !important; }
  .io-path li { opacity: 1; transform: none; }
}

/* ---------- extraction-review ---------- */
.io-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 4px; border: 0; border-radius: 9999px; background: none; color: var(--slate-300); font-size: 13px; line-height: 20px; font-weight: 600; text-align: left; }
.io-toggle:hover { color: #fff; }
.io-toggle-t { position: relative; flex: none; width: 34px; height: 20px; border-radius: 9999px; border: 1px solid var(--hairline-2); background: var(--io-row); transition: background .15s, border-color .15s; }
.io-toggle-t::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--slate-400); transition: transform .15s, background .15s; }
.io-toggle[aria-pressed="true"] .io-toggle-t { background: var(--orange-500); border-color: var(--orange-500); }
.io-toggle[aria-pressed="true"] .io-toggle-t::after { transform: translateX(14px); background: var(--btn-ink); }
.io-xr { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.io-xdoc { min-width: 0; border-radius: 12px; border: 1px solid var(--hairline); background: var(--io-row); overflow: hidden; }
.io-xbar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; padding: 8px 12px; border-bottom: 1px solid var(--hairline); color: var(--slate-400); }
.io-xscroll { max-height: 540px; overflow: auto; padding: 14px; scrollbar-width: thin; scrollbar-color: var(--hairline-2) transparent; }
.io-xscroll:focus-visible { outline-offset: -2px; }
/* the source page: a light paper sheet with grey text lines */
.io-xpage { min-width: 440px; padding: 18px 18px 22px; border-radius: 4px; background: #e7ecf3; color: #1e293b; font-size: 9.5px; line-height: 1.35; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.io-xp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 8px; border-bottom: 2px solid #1e293b; }
.io-xp-top b { font-size: 14px; line-height: 1.2; font-weight: 800; letter-spacing: 0.02em; color: #0f172a; }
.io-xp-date { flex: none; font-size: 7.5px; font-weight: 700; text-align: right; color: #475569; }
.io-xp-date span { font-size: 10px; font-weight: 600; color: #0f172a; }
.io-xl { display: block; height: 5px; margin: 5px 0; border-radius: 2px; background: rgba(15, 23, 42, 0.16); }
.io-xp-lines { padding: 6px 0; }
.io-xp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid rgba(15, 23, 42, 0.45); }
.io-xp-box { min-width: 0; padding: 6px 8px; border-right: 1px solid rgba(15, 23, 42, 0.3); border-bottom: 1px solid rgba(15, 23, 42, 0.3); }
.io-xp-box:nth-child(2n) { border-right: 0; }
.io-xp-box:nth-last-child(-n+2) { border-bottom: 0; }
.io-xp-box small, .io-xp-h { display: block; margin-bottom: 3px; font-size: 7.5px; font-weight: 800; letter-spacing: 0.06em; color: #334155; }
.io-xp-h { margin-top: 10px; font-size: 9px; }
.io-xp-ins { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.io-xp-ins > span { flex: none; font-size: 7.5px; font-weight: 700; color: #475569; }
.io-xp-ins .io-xl { flex: 1; margin: 0; }
.io-xp-cov { display: grid; grid-template-columns: 1.5fr 1.15fr 0.9fr 0.9fr 1.6fr; margin-top: 2px; border: 1px solid rgba(15, 23, 42, 0.45); }
.io-xp-cov > span { min-width: 0; padding: 5px 6px; border-right: 1px solid rgba(15, 23, 42, 0.25); border-bottom: 1px solid rgba(15, 23, 42, 0.25); font-size: 8.5px; font-weight: 600; color: #1e293b; overflow-wrap: anywhere; }
.io-xp-cov > span:nth-child(5n) { border-right: 0; }
.io-xp-cov > span:nth-last-child(-n+5) { border-bottom: 0; }
.io-xp-cov > .io-xp-th { font-size: 7px; font-weight: 800; letter-spacing: 0.05em; color: #475569; background: rgba(15, 23, 42, 0.05); }
.io-xp-lim > span { display: block; font-size: 7px; font-weight: 700; color: #475569; }
.io-xreg { display: inline-block; max-width: 100%; padding: 1px 4px; border-radius: 3px; border: 1.5px dashed oklch(var(--o) / 0.55); background: oklch(var(--o) / 0.06); color: #0f172a; font-size: 10px; line-height: 1.3; font-weight: 700; text-align: left; overflow-wrap: anywhere; transition: background .15s, border-color .15s, box-shadow .15s; }
.io-xp-cov .io-xreg { font-size: 8.5px; }
.io-xreg:hover { background: oklch(var(--o) / 0.14); }
.io-xreg[aria-pressed="true"] { border-style: solid; border-color: var(--orange-500); background: oklch(var(--o) / 0.2); box-shadow: 0 0 0 3px oklch(var(--o) / 0.25); }
.io-xreg:focus-visible { outline: 2px solid var(--orange-600); outline-offset: 1px; }
.io-xf { min-width: 0; }
.io-xf-sum { margin-bottom: 8px; }
.io-xf-list { display: grid; gap: 6px; }
.io-xfield { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 7px 10px 7px 4px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--io-row); transition: border-color .15s, background .15s; }
.io-xfield.is-on { border-color: var(--io-sel-b); background: var(--io-sel-bg); }
.io-xf-main { min-width: 0; padding: 2px 8px; border: 0; border-radius: 8px; background: none; text-align: left; }
.io-xf-main small { display: block; font-size: 10.5px; line-height: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate-400); }
.io-xf-main .io-v { display: block; font-size: 13.5px; line-height: 1.4; font-weight: 600; color: var(--slate-100); overflow-wrap: anywhere; }
.io-xf-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 8px; }
.io-xf-conf { font-size: 12px; font-weight: 700; color: var(--slate-300); font-variant-numeric: tabular-nums; }
.io-xf-conf.is-low { color: var(--orange-400); }
.io-xf-src { padding: 1px 6px; border: 0; border-radius: 4px; background: none; color: var(--orange-400); text-decoration: underline; text-underline-offset: 2px; }
.io-xf-src:hover { color: var(--orange-300); }
@container io-screen (max-width: 720px) { .io-xr { grid-template-columns: minmax(0, 1fr); } .io-xscroll { max-height: 380px; } }
@container io-screen (max-width: 420px) { .io-xfield { grid-template-columns: minmax(0, 1fr); } .io-xf-meta { justify-content: flex-start; padding-left: 8px; } }

/* ---------- location-record: Summary view of a location record (October 22, 2026) ---------- */
.io-lr-tabs { flex-wrap: wrap; overflow: visible; }
.io-lr-tabs .io-tab:disabled { color: var(--slate-500); cursor: default; }
.io-lr-tabs .io-tab:disabled:hover { color: var(--slate-500); }
.io-lr-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 8px 0 16px; }
.io-lr-kpis .io-kpi b { font-size: 17px; }
.io-lr-photos { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 8px; align-items: center; margin-bottom: 18px; }
.io-lr-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.io-lr-strip img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 8px; }
.io-lr-arr { width: 28px; height: 28px; border-radius: 9999px; border: 1px solid var(--hairline-2); background: transparent; color: var(--slate-300); font-size: 18px; line-height: 1; display: grid; place-items: center; }
.io-lr-arr:hover { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.io-lr-deb { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--hairline); background: var(--io-row); margin-bottom: 14px; }
.io-lr-deb p, .io-lr-deb li { font-size: 12.5px; line-height: 1.55; color: var(--slate-300); }
.io-lr-deb p { margin-top: 8px; }
.io-lr-deb ul { display: grid; gap: 4px; margin-top: 8px; }
.io-lr-deb li b { color: var(--slate-100); font-weight: 600; }
.io-lr-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.io-lr-f { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--io-row); min-width: 0; }
.io-lr-f span { font-size: 12.5px; color: var(--slate-400); }
.io-lr-f b { font-size: 13px; font-weight: 700; color: var(--slate-100); text-align: right; overflow-wrap: anywhere; }
@container io-screen (max-width: 860px) { .io-lr-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container io-screen (max-width: 560px) {
  .io-lr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .io-lr-kpis .io-kpi b { font-size: 15px; overflow-wrap: normal; white-space: nowrap; }
  .io-lr-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .io-lr-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .io-lr-strip img:nth-child(n+3) { display: none; }
  .io-lr-fields { grid-template-columns: 1fr; }
  .io-lr-f { flex-direction: column; gap: 2px; } .io-lr-f b { text-align: left; }
}

/* ---------- Platform modules (October 22, 2026): full location record, Documents, Global Contacts, Loss Runs ---------- */
.io-ico { width: 15px; height: 15px; fill: none; stroke: var(--slate-400); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.io-mt td { vertical-align: top; color: var(--slate-300); white-space: nowrap; }
.io-mt td:first-child { color: var(--slate-100); }
.io-wrap { display: block; min-width: 180px; white-space: normal; line-height: 1.45; } .io-wrap.io-w160 { min-width: 130px; }
.io-mt-claims td { white-space: nowrap; } .io-mt-claims td .io-wrap { white-space: normal; }
.io-link { color: var(--orange-400); font-weight: 600; }
.io-strong { color: var(--slate-100); font-weight: 600; }
.io-mt16 { margin-top: 16px; }
.io-pager { margin-top: 10px; text-align: right; font-size: 12px; color: var(--slate-500); }
.io-tg { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 9999px; border: 1px solid var(--hairline-2); color: var(--slate-300); font-size: 11px; line-height: 17px; font-weight: 600; white-space: nowrap; }
.io-tg.is-ok { color: #3db67a; border-color: rgba(61, 182, 122, .35); background: rgba(61, 182, 122, .08); }
.io-tg.is-open { color: var(--orange-400); border-color: var(--io-sel-b); background: var(--io-sel-bg); }
.io-tg.is-view { color: var(--slate-300); border-color: var(--hairline-2); background: rgba(255, 255, 255, .04); }
.io-tg.is-dim { color: var(--slate-400); border-color: var(--hairline); }
.io-pp b { display: block; color: var(--slate-100); font-weight: 600; } .io-pp small { display: block; font-size: 11.5px; color: var(--slate-500); }
.io-act { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--orange-400); }
.io-act.io-dim { color: var(--slate-500); font-weight: 500; }
.io-opt { font-style: normal; margin-left: 6px; padding: 0 6px; border-radius: 6px; background: rgba(255, 255, 255, .06); font-size: 11px; color: var(--slate-400); white-space: nowrap; }
.io-lr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.io-lr-bar .io-meta:last-child { margin-left: auto; }
.io-fakein { flex: 1 1 220px; max-width: 420px; padding: 6px 12px; border-radius: 9999px; border: 1px solid var(--hairline-2); background: var(--io-row); color: var(--slate-500); font-size: 12.5px; line-height: 18px; }
.io-fakesel { position: relative; padding-right: 30px; color: var(--slate-100); }
.io-fakesel::after { content: ""; position: absolute; right: 13px; top: 50%; width: 6px; height: 6px; border-right: 2px solid var(--slate-400); border-bottom: 2px solid var(--slate-400); transform: translateY(-70%) rotate(45deg); }
.io-seg.io-static span { padding: 4px 12px; border-radius: 9999px; border: 1px solid var(--hairline-2); color: var(--slate-400); font-size: 12px; line-height: 18px; font-weight: 600; }
.io-seg.io-static span.on { background: var(--orange-500); border-color: var(--orange-500); color: var(--btn-ink); }
.io-subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.io-subtabs button { padding: 6px 13px; border-radius: 9999px; border: 1px solid var(--hairline-2); background: transparent; color: var(--slate-300); font-size: 12.5px; line-height: 18px; font-weight: 600; }
.io-subtabs button:hover { color: #fff; }
.io-subtabs button[aria-selected="true"] { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); color: #fff; }
.io-kvg + .io-kvg { margin-top: 16px; }
.io-kvh { margin-bottom: 8px; font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-400); }
.io-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.io-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--hairline); background: var(--io-row); min-width: 0; }
.io-kv span { font-size: 12.5px; color: var(--slate-400); } .io-kv b { font-size: 12.5px; font-weight: 700; color: var(--slate-100); text-align: right; overflow-wrap: anywhere; }
.io-kpis.io-k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .io-kpis.io-k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.io-kpis.io-lr-k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .io-kpis.io-lr-k7 { grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 14px; }
.io-kpis.io-lr-k5, .io-kpis.io-k4, .io-kpis.io-k2 { margin-bottom: 14px; }
.io-lr-k7 .io-kpi b { font-size: 15px; }
.io-card { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--hairline); background: rgba(2, 6, 23, .35); min-width: 0; }
.io-card + .io-card, .io-lr-split + .io-card { margin-top: 12px; } .io-lr-split > .io-card { margin-top: 0; }
.io-card .io-kpis { margin: 10px 0 0; }
.io-lr-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.io-dn-wrap { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 10px; }
.io-dn { width: 100%; height: auto; }
.io-leg { display: grid; gap: 7px; }
.io-leg li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: start; font-size: 12.5px; color: var(--slate-300); }
.io-leg i { width: 10px; height: 10px; border-radius: 3px; margin-top: 4px; }
.io-leg b { display: block; color: var(--slate-100); font-weight: 600; } .io-leg small { display: block; font-size: 11px; color: var(--slate-500); }
.io-leg em { font-style: normal; text-align: right; color: var(--slate-100); font-weight: 700; font-variant-numeric: tabular-nums; }
.io-leg-row { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.io-leg-row li { display: flex; gap: 6px; align-items: center; font-size: 11.5px; } .io-leg-row i { margin-top: 0; }
.io-ch { display: block; width: 100%; height: auto; margin-top: 8px; }
.io-gl { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.io-ax { fill: var(--slate-500); font-size: 10px; } .io-axv { fill: var(--slate-300); font-weight: 600; }
.io-top { display: grid; gap: 6px; margin-top: 10px; counter-reset: t; }
.io-top li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 9px; background: var(--io-row); counter-increment: t; font-size: 12.5px; }
.io-top li::before { content: counter(t); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--io-sel-bg); color: var(--orange-400); font-weight: 700; font-size: 11px; }
.io-top b { display: block; color: var(--slate-100); font-weight: 600; } .io-top small { color: var(--slate-500); } .io-top em { font-style: normal; color: var(--slate-100); font-weight: 700; }
.io-notes { margin-top: 14px; } .io-notebox { height: 56px; margin: 8px 0 10px; border-radius: 9px; border: 1px solid var(--hairline); background: var(--io-row); }
.io-coi { display: grid; gap: 8px; }
.io-coi li { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1.4fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--io-row); }
.io-coi-n b { display: block; color: var(--slate-100); font-size: 13px; } .io-coi-n small { display: block; font-size: 11.5px; color: var(--slate-500); }
.io-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.io-chips i { font-style: normal; padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, .07); color: var(--slate-300); font-size: 11px; line-height: 17px; white-space: nowrap; }
.io-chips i.more { background: var(--io-sel-bg); color: var(--orange-400); }
.io-crt { display: grid; grid-template-columns: minmax(120px, 1fr) 40px; gap: 8px; align-items: center; } .io-crt b { color: var(--slate-100); font-size: 12.5px; }
.io-cope2 { display: grid; grid-template-columns: 190px minmax(0, 1fr) 160px; gap: 14px; align-items: start; }
.io-cope2.io-nocard { grid-template-columns: 190px minmax(0, 1fr); }
.io-cats { display: grid; gap: 5px; max-height: 470px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--hairline-2) transparent; }
.io-cats li { padding: 8px 10px; border-radius: 9px; border: 1px solid var(--hairline); background: var(--io-row); font-size: 12px; }
.io-cats li.on { border-color: var(--io-sel-b); background: var(--io-sel-bg); }
.io-cats li.off { opacity: .6; }
.io-cats button { all: unset; display: block; width: 100%; cursor: pointer; }
.io-cats li:has(button[aria-pressed="true"]) { border-color: var(--io-sel-b); background: var(--io-sel-bg); }
.io-cats b { display: block; color: var(--slate-100); font-weight: 600; } .io-cats small { display: block; color: var(--slate-500); font-size: 11px; line-height: 1.35; } .io-cats span { color: var(--slate-400); font-size: 11.5px; }
.io-copep { min-width: 0; } .io-copep .io-tablewrap { margin-top: 10px; }
.io-ring-card { display: grid; gap: 6px; padding: 14px; border-radius: 12px; border: 1px solid var(--hairline); background: rgba(2, 6, 23, .35); text-align: center; }
.io-ring { --p: 0; width: 84px; height: 84px; margin: 0 auto 2px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--orange-500) calc(var(--p) * 1%), rgba(255, 255, 255, .08) 0); }
.io-ring b { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: var(--card); color: var(--slate-100); font-size: 15px; }
.io-ring-s { padding: 7px; border-radius: 9px; border: 1px solid var(--hairline); } .io-ring-s b { display: block; color: var(--slate-100); font-size: 16px; } .io-ring-s span { font-size: 11.5px; color: var(--slate-400); }
.io-ring-s.is-ok { background: rgba(61, 182, 122, .08); } .io-ring-s.is-open { background: var(--io-sel-bg); }
.io-events li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--io-row); font-size: 13px; }
.io-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--io-sel-bg); color: var(--orange-400); font-weight: 700; font-size: 12px; }
.io-events b { display: block; color: var(--slate-100); } .io-events small { display: block; color: var(--slate-500); font-size: 11.5px; margin-bottom: 4px; } .io-events span span { color: var(--slate-300); }
.io-cmp-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-bottom: 14px; }
.io-cmp-pick label { display: grid; gap: 5px; } .io-cmp-pick .io-fakein { max-width: none; }
.io-empty { padding: 26px; text-align: center; border: 1px dashed var(--hairline-2); border-radius: 12px; }
.io-searchbar { display: flex; gap: 10px; align-items: center; margin: 12px 0; } .io-searchbar .io-fakein { max-width: none; }
.io-suggest { display: flex; flex-wrap: wrap; gap: 8px; }
.io-rq { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--hairline); background: rgba(2, 6, 23, .35); }
.io-rq + .io-rq { margin-top: 12px; } .io-rq .io-tablewrap { margin: 10px 0 8px; }
.io-new { color: #3db67a; } .io-rq-done { margin-top: 8px; color: #3db67a; font-size: 12.5px; font-weight: 600; }
@container io-screen (max-width: 900px) {
  .io-kpis.io-lr-k7 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .io-kpis.io-lr-k5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .io-lr-split { grid-template-columns: minmax(0, 1fr); }
  .io-cope2, .io-cope2.io-nocard { grid-template-columns: minmax(0, 1fr); } .io-cats { max-height: 180px; }
  .io-ring-card { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; } .io-ring { width: 64px; height: 64px; } .io-ring b { width: 50px; height: 50px; font-size: 13px; } .io-ring-card > .io-meta { display: none; }
  .io-coi li { grid-template-columns: minmax(0, 1fr) auto; } .io-coi li .io-chips { grid-column: 1 / -1; }
}
@container io-screen (max-width: 560px) {
  .io-kpis.io-lr-k7, .io-kpis.io-lr-k5, .io-kpis.io-k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .io-kv { grid-template-columns: minmax(0, 1fr); } .io-kv > div { flex-direction: column; gap: 2px; } .io-kv b { text-align: left; }
  .io-dn-wrap { grid-template-columns: minmax(0, 1fr); } .io-dn { max-width: 160px; margin: 0 auto; }
  .io-cmp-pick { grid-template-columns: minmax(0, 1fr); }
  .io-ring-card { grid-template-columns: repeat(2, minmax(0, 1fr)); } .io-ring { grid-column: 1 / -1; }
}
.io-fn { display: inline-block; min-width: 120px; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.io-mt .io-chips { flex-wrap: nowrap; }
/* ---------- Documents on art-stage: comparison and search fields, the extraction review page (October 22, 2026) ---------- */
.io-cmp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; align-items: end; margin-bottom: 14px; }
.io-cmp-grid.io-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; }
.io-fld { display: grid; gap: 5px; min-width: 0; } .io-fld .io-fakein { max-width: none; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.io-ph { color: var(--slate-500) !important; }
.io-sq { position: relative; flex: 1 1 auto; display: flex; align-items: center; }
.io-sq input { width: 100%; padding: 7px 70px 7px 12px; border-radius: 9999px; border: 1px solid var(--hairline-2); background: var(--io-row); color: var(--slate-100); font-size: 13px; }
.io-sq .io-cnt { position: absolute; right: 12px; }
.io-btn.io-dis { opacity: .45; cursor: default; }
.io-rv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.io-rv-t { color: var(--slate-100); font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.io-rv-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.io-rv-bar .io-rv-tabs { margin-bottom: 0; border-bottom: 0; } .io-rv-acts { margin-top: 0; }
.io-rv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 14px; align-items: start; }
.io-rv-doc { border-radius: 12px; border: 1px solid var(--hairline); background: #1d2433; overflow: hidden; }
.io-rv-tool { display: flex; gap: 14px; padding: 8px 12px; background: #111827; color: var(--slate-400); font-size: 12px; }
.io-rv-page { margin: 12px; padding: 16px 16px 20px; border-radius: 4px; background: #f3f5f8; color: #1f2937; font-size: 11px; line-height: 1.5; }
.io-rv-ph { font-weight: 800; font-size: 12px; letter-spacing: .02em; } .io-rv-ps { color: #4b5563; margin-bottom: 10px; }
.io-rv-g { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .io-rv-g small { display: block; font-size: 9px; font-weight: 700; color: #6b7280; } .io-rv-g b, .io-rv-g span { display: block; }
.io-rv-l { margin-top: 6px; } .io-rv-page i { font-style: normal; } .io-rv-page .on, .io-rv-page b.on { background: rgba(255, 105, 0, .22); outline: 1.5px solid #ff6900; border-radius: 3px; }
.io-rv-lines { display: grid; gap: 6px; margin: 12px 0; } .io-rv-lines i { display: block; height: 6px; border-radius: 3px; background: #d6dbe3; } .io-rv-lines i:nth-child(2n) { width: 70%; }
.io-rv-data { display: grid; gap: 10px; min-width: 0; }
.io-rv-dh { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .io-rv-dh small { display: block; } .io-rv-pg { flex: 0 0 64px; }
.io-rv-gauge { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--hairline); border-left: 3px solid var(--orange-500); }
.io-rv-gauge .io-ring { width: 60px; height: 60px; margin: 0; } .io-rv-gauge .io-ring b { width: 46px; height: 46px; font-size: 13px; }
.io-rv-conf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.io-rv-conf div { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--io-row); } .io-rv-conf span { display: block; font-size: 11.5px; font-weight: 600; color: var(--slate-300); } .io-rv-conf b { font-size: 17px; color: var(--slate-100); }
.io-rv-conf .hi span { color: #3db67a; } .io-rv-conf .md span { color: var(--orange-400); } .io-rv-conf .lo span { color: #f87171; }
.io-rv-all { margin-top: -2px; }
.io-rv-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 420px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--hairline-2) transparent; }
.io-rv-f { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--hairline); background: var(--io-row); text-align: left; color: inherit; }
.io-rv-f[aria-pressed="true"] { border-color: var(--io-sel-b); background: var(--io-sel-bg); } .io-rv-f.ok { border-color: rgba(61, 182, 122, .4); }
.io-rv-cb { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--hairline-2); font-size: 11px; color: #3db67a; }
.io-rv-f small { display: block; font-size: 10.5px; color: var(--slate-500); } .io-rv-f b { display: block; font-size: 12.5px; color: var(--slate-100); font-weight: 600; overflow-wrap: anywhere; }
.io-rv-f em { font-style: normal; font-size: 11.5px; font-weight: 700; text-align: right; } .io-rv-f em.hi { color: #3db67a; } .io-rv-f em.md { color: var(--orange-400); } .io-rv-f em small { font-weight: 500; color: var(--slate-500); }
.io-rv-ev { display: grid; gap: 8px; } .io-rv-ev li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--io-row); font-size: 13px; } .io-rv-ev b { color: var(--slate-100); }
@container io-screen (max-width: 900px) { .io-rv { grid-template-columns: minmax(0, 1fr); } .io-cmp-grid, .io-cmp-grid.io-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container io-screen (max-width: 560px) { .io-cmp-grid, .io-cmp-grid.io-g4, .io-rv-fields, .io-rv-g { grid-template-columns: minmax(0, 1fr); } .io-searchbar { flex-wrap: wrap; } }
/* ---------- locations-list: the Locations Dashboard (October 22, 2026) ---------- */
.io-ll { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: start; }
.io-ll-f { display: grid; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--hairline); background: rgba(2, 6, 23, .35); }
.io-ll-g { display: grid; gap: 6px; } .io-ll-g .io-fakein { max-width: none; flex: none; }
.io-ll-r { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .io-ll-r i { font-style: normal; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--hairline-2); color: var(--slate-500); font-size: 11.5px; }
.io-ll-o { display: grid; gap: 4px; } .io-ll-o i { font-style: normal; position: relative; padding-left: 18px; font-size: 12px; color: var(--slate-300); }
.io-ll-o i::before { content: ""; position: absolute; left: 0; top: 3px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--hairline-2); }
.io-ll-o i.on::before { border-color: var(--orange-500); background: radial-gradient(var(--orange-500) 40%, transparent 45%); }
.io-ll-m { min-width: 0; }
.io-ll-go { all: unset; cursor: pointer; color: var(--orange-400); font-weight: 700; border-radius: 6px; padding: 2px 6px; margin: -2px -6px; box-shadow: 0 0 0 2px oklch(var(--o) / .55); animation: io-ll-pulse 1.8s ease-in-out infinite; }
.io-ll-go:hover { background: var(--io-sel-bg); } .io-ll-go:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 2px; }
@keyframes io-ll-pulse { 0%, 100% { box-shadow: 0 0 0 2px oklch(var(--o) / .55); } 50% { box-shadow: 0 0 0 5px oklch(var(--o) / .15); } }
@media (prefers-reduced-motion: reduce) { .io-ll-go { animation: none; } }
@container io-screen (max-width: 900px) { .io-ll { grid-template-columns: minmax(0, 1fr); } .io-ll-f { display: none; } }
.io-wrap.io-w110 { min-width: 104px; }
.io-ll { grid-template-columns: 160px minmax(0, 1fr); }
.io-ll-t { font-size: 12px; } .io-ll-t th, .io-ll-t td { padding: 8px 4px; } .io-ll-t th:first-child, .io-ll-t td:first-child { padding-left: 8px; } .io-ll-t thead th { font-size: 10px; letter-spacing: .05em; }
@container io-screen (max-width: 1180px) { .io-ll { grid-template-columns: minmax(0, 1fr); } .io-ll-f { display: none; } }