/* Specificity note: every rule is prefixed `html:not(#o)` (= one ID) so these rules beat the app's legacy
 * blanket rules (#right-panel button, global table/th/td, .tab-content table{min-width:400px}).
 * PairReports (pair-reports.js) — Chart ▸ Aspects for the inner ↔ selected wheel cards.
 * Builds on osiris-controls.css (.o-seg/.o-pill). Colours only from theme tokens; sans-serif type.
 * Tables scroll horizontally inside their own .pr-scroll box — never the page or the panel. */
html:not(#o) .pr-root{display:flex;flex-direction:column;gap:6px;box-sizing:border-box;min-width:0;max-width:100%;
  color:var(--tx,#d6d8ea);font:500 12px/1.35 var(--o-font,system-ui,sans-serif)}
html:not(#o) .pr-root [hidden]{display:none!important}

/* ── head ── */
html:not(#o) .pr-head{display:flex;align-items:center;gap:6px;min-width:0}
html:not(#o) .pr-title{display:flex;align-items:baseline;gap:0;min-width:0;margin:0;padding:2px 0 0;
  font:700 13px/1.3 var(--o-font,system-ui,sans-serif);color:var(--tb,#eef0fb);letter-spacing:0}
html:not(#o) .pr-kicker{flex:none;font-size:var(--fs-caption);font-weight:800;letter-spacing:.08em;color:var(--ac,#9d8cff)}
html:not(#o) .pr-sep{flex:none;white-space:pre;color:var(--td,#aebbd2)}
html:not(#o) .pr-pair{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── frame filter (Direction Lab segmented pills) ── */
html:not(#o) .pr-seg{align-self:flex-start;max-width:100%;flex-wrap:wrap}
html:not(#o) .pr-seg>button{padding:2px 8px}

/* ── status ── */
html:not(#o) .pr-status,html:not(#o) .pr-note{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;box-sizing:border-box;
  padding:8px 10px;border:1px solid var(--bd,#2a2348);border-radius:10px;background:var(--pn,#13111f);color:var(--td,#aebbd2);font-size:12px}
html:not(#o) .pr-note{padding:4px 8px;border-radius:8px;font-size:11px}
html:not(#o) .pr-note[hidden]{display:none}
html:not(#o) .pr-msg{flex:1 1 160px;min-width:0;overflow-wrap:anywhere}
html:not(#o) :is(.pr-status,.pr-note)[data-pr-status=error]{border-color:color-mix(in srgb,#e05242 55%,var(--bd,#2a2348));color:var(--tb,#eef0fb)}
html:not(#o) :is(.pr-status,.pr-note)[data-pr-status=error]::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:#e05242}
html:not(#o) :is(.pr-status,.pr-note)[data-pr-status=unavailable]{border-style:dashed}
html:not(#o) .pr-spin{flex:none;width:11px;height:11px;box-sizing:border-box;border:2px solid color-mix(in srgb,var(--a2,#4fd8e8) 30%,transparent);
  border-top-color:var(--a2,#4fd8e8);border-radius:50%;animation:pr-spin .8s linear infinite}
@keyframes pr-spin{to{transform:rotate(360deg)}}
html:not(#o) .pr-root[data-pr-state=updating] .pr-section{opacity:.72;transition:opacity .2s}

/* ── frame sections ── */
html:not(#o) .pr-section{min-width:0;border:1px solid var(--bd,#2a2348);border-radius:10px;background:color-mix(in srgb,var(--pn,#13111f) 92%,transparent);overflow:hidden}
html:not(#o) .pr-sec-head{appearance:none;-webkit-appearance:none;display:flex;align-items:center;gap:6px;width:100%;min-width:0;box-sizing:border-box;margin:0;
  padding:6px 9px;border:0;border-radius:0;background:transparent;background-image:none;box-shadow:none;color:var(--tx,#d6d8ea);
  font:700 11.5px/1.25 var(--o-font,system-ui,sans-serif);text-align:left;text-transform:none;letter-spacing:0;cursor:pointer}
html:not(#o) .pr-sec-head:hover{background:color-mix(in srgb,var(--tx,#d6d8ea) 6%,transparent);box-shadow:none}
html:not(#o) .pr-sec-head:focus-visible{outline:2px solid var(--a2,#4fd8e8);outline-offset:-2px}
html:not(#o) .pr-caret{flex:none;width:10px;color:var(--td,#aebbd2);font-size:var(--fs-caption)}
html:not(#o) .pr-sec-title{flex:none;color:var(--tb,#eef0fb)}
html:not(#o) .pr-sec-pair{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:var(--fs-caption);color:var(--td,#aebbd2)}
html:not(#o) .pr-count{flex:none;min-width:18px;padding:1px 6px;box-sizing:border-box;border:1px solid var(--bd,#2a2348);border-radius:999px;
  text-align:center;font-size:var(--fs-caption);font-weight:700;color:var(--td,#aebbd2)}
html:not(#o) .pr-sec-body{border-top:1px solid var(--bd,#2a2348)}
html:not(#o) .pr-empty{margin:0;padding:6px 10px;color:var(--td,#aebbd2);font-size:11px}

/* ── tables (legacy buildAspectTable columns) ── */
html:not(#o) .pr-scroll{max-width:100%;overflow-x:auto;overflow-y:visible;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
html:not(#o) .pr-table{width:auto;min-width:max-content;border-collapse:collapse;font:500 11px/1.3 var(--o-font,system-ui,sans-serif);color:var(--tx,#d6d8ea)}
html:not(#o) .pr-table th{position:static;padding:4px 6px;border-bottom:1px solid var(--bd,#2a2348);background:transparent;color:var(--ac,#9d8cff);
  font:700 var(--fs-caption)/1.2 var(--o-font,system-ui,sans-serif);letter-spacing:.03em;text-align:left;white-space:nowrap}
html:not(#o) .pr-table th.pr-col-side{max-width:110px;overflow:hidden;text-overflow:ellipsis;color:var(--tb,#eef0fb)}
html:not(#o) .pr-table td{padding:3px 6px;border-bottom:1px solid color-mix(in srgb,var(--bd,#2a2348) 55%,transparent);white-space:nowrap;vertical-align:middle}
html:not(#o) .pr-table tbody tr:last-child td{border-bottom:0}
html:not(#o) .pr-table tbody tr:hover td{background:color-mix(in srgb,var(--ac,#9d8cff) 7%,transparent)}
html:not(#o) .pr-table .pr-gl{width:16px;padding-right:2px;text-align:center;font-size:13px;line-height:1}
html:not(#o) .pr-table .gl{font-family:var(--glyph-font)}
html:not(#o) .pr-table .pr-name{min-width:84px;color:var(--tb,#eef0fb)}
/* Fixed column floors so the five frames line up under each other (tables are content-width, not stretched). */
html:not(#o) .pr-table th:nth-child(2),html:not(#o) .pr-table th:nth-child(5){min-width:84px}
html:not(#o) .pr-table :is(td,th):nth-child(3){min-width:30px}
html:not(#o) .pr-table :is(td,th):nth-child(6){min-width:86px}
html:not(#o) .pr-table :is(td,th):nth-child(7){min-width:44px}
html:not(#o) .pr-table :is(td,th):nth-child(8){min-width:54px}
html:not(#o) .pr-table :is(td,th):nth-child(9){min-width:92px}
html:not(#o) .pr-table :is(td,th):nth-child(10){min-width:44px}
html:not(#o) .pr-table .aspect-h{color:var(--a2,#4fd8e8)}
html:not(#o) .pr-table .aspect-s{color:var(--a3,#74e0b4)}
html:not(#o) .pr-table .pr-orb{font-variant-numeric:tabular-nums}
html:not(#o) .pr-table .pr-h{color:var(--td,#aebbd2)}
html:not(#o) .pr-table .pr-small{font-size:var(--fs-caption)}
html:not(#o) .pr-table .pr-q{color:#a6f}
html:not(#o) .pr-table .pr-perf.is-app{color:var(--a2,#4fd8e8)}
html:not(#o) .pr-table .pr-perf.is-sep{color:var(--a3,#74e0b4)}
html:not(#o) .pr-table .pr-exact{color:var(--td,#aebbd2);font-size:var(--fs-caption);font-variant-numeric:tabular-nums}
html:not(#o) .pr-table .pr-res{text-align:center;font-weight:700;letter-spacing:-.5px}
html:not(#o) .pr-table tr.pr-row-sym td:first-child{box-shadow:inset 2px 0 0 #a6f}
html:not(#o) .pr-table tr.pr-row-ingress td:first-child{box-shadow:inset 2px 0 0 var(--pr-ig,#6fa)}
html:not(#o) .pr-table tr.pr-row-ingress .pr-ig{font-weight:700}
html:not(#o) .pr-table tr.pr-dual td{background:color-mix(in srgb,var(--ac,#9d8cff) 12%,transparent);font-weight:700}

@media (prefers-reduced-motion:reduce){html:not(#o) .pr-spin{animation:none}}

/* Right panel (about 440px, 110% text): the Aspects tables fit without a horizontal scroll. Names, headers and the
   exact-time column wrap; paddings and column floors tighten. Wider hosts keep the content-width layout above. */
html:not(#o) #right-panel .pr-scroll{overflow-x:auto}
html:not(#o) #right-panel .pr-table{width:100%;min-width:0;table-layout:auto}
html:not(#o) #right-panel .pr-table th{white-space:nowrap;padding:3px 1px;letter-spacing:0}
html:not(#o) #right-panel .pr-table td{padding:3px 1px}
html:not(#o) #right-panel .pr-table :is(.pr-name,.pr-exact){white-space:normal;min-width:0}
html:not(#o) #right-panel .pr-table :is(td,th){min-width:0}
html:not(#o) #right-panel .pr-table .pr-gl{width:14px;padding-left:1px;padding-right:1px}
html:not(#o) #right-panel .pr-table th.pr-col-side{max-width:none}