/* graphs.sgit.ai — the universe reader: extraction on the left, the frozen source and
   the local graph in a resizable panel on the right. The highlights are driven by the
   same verified byte offsets gate 23 checks, never by re-searching the text. */

.uni-layout { display: flex; align-items: stretch; gap: 0; }
.uni-left { min-width: 0; flex: 1 1 58%; }
.uni-panel { display: none; flex: 0 0 42%; min-width: 320px; max-width: 64%;
  position: sticky; top: 0; height: 100vh; box-sizing: border-box;
  border-left: 1px solid var(--line2, #ddd); background: var(--panel2, #fafafa);
  flex-direction: column; }
body.uni-panel-on .uni-panel { display: flex; }
body.uni-panel-on .uni-left { flex-basis: 58%; }

.uni-vsplit { flex: 0 0 6px; cursor: col-resize; display: none;
  background: transparent; position: relative; z-index: 5; }
body.uni-panel-on .uni-vsplit { display: block; }
.uni-vsplit:hover, .uni-vsplit.drag { background: var(--accent, #3f6ad8); opacity: .35; }

.uni-graphbox { flex: 0 0 44%; min-height: 120px; border-bottom: 1px solid var(--line2, #ddd);
  position: relative; background: #fff; }
.uni-graphbox .uni-cy { position: absolute; inset: 0 0 1.4rem 0; }
/* maximised: the graph takes the viewport until toggled back */
.uni-graphbox.uni-gmax { position: fixed; inset: 0; z-index: 70; border-bottom: 0; }
/* the stats bar: what the view holds, and what the next hop would add */
.uni-gstats { position: absolute; left: 0; right: 0; bottom: 0; height: 1.4rem;
  padding: .15rem .6rem 0 .6rem; font-size: .68rem; color: #555; background: var(--panel2, #fafafa);
  border-top: 1px solid var(--line2, #eee); white-space: nowrap; overflow: hidden;
  scrollbar-width: thin; z-index: 6; }
.uni-gstats:hover { overflow-x: auto; }
.uni-hsplit { flex: 0 0 6px; cursor: row-resize; background: transparent; }
.uni-hsplit:hover, .uni-hsplit.drag { background: var(--accent, #3f6ad8); opacity: .35; }

.uni-srcbox { flex: 1 1 auto; min-height: 120px; overflow: auto; background: #fff; }
.uni-srcbox .uni-srchead { position: sticky; top: 0; z-index: 3;
  background: var(--panel2, #fafafa); border-bottom: 1px solid var(--line2, #ddd);
  padding: .45rem .9rem; font-size: .78rem; display: flex; gap: .8rem; align-items: center;
  flex-wrap: wrap; }
.uni-srcbox .uni-srcbody { padding: 1rem 1.4rem 3rem; }
.uni-srcbox .uni-srcbody h1 { font-size: 1.35rem; }
.uni-srcbox .uni-srcbody h2 { font-size: 1.12rem; }
.uni-srcbox .uni-srcbody h3 { font-size: .98rem; }

/* the toolbar above the page content */
.uni-tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  margin: .6rem 0 1rem; }
.uni-tools button { font: inherit; font-size: .8rem; padding: .32rem .7rem;
  border: 1px solid var(--line2, #ccc); border-radius: 7px; background: #fff;
  cursor: pointer; color: inherit; }
.uni-tools button[aria-pressed="true"] { background: var(--accent, #3f6ad8); color: #fff;
  border-color: var(--accent, #3f6ad8); }
.uni-tools .dim { font-size: .76rem; }

/* the reader page uses every pixel it can get */
main.doc.uni-full { max-width: none; padding: 1.6rem 1.6rem 3rem; }
main.doc.uni-full .uni-left { padding-right: 1.2rem; }

/* anchor highlights in the rendered source; .uni-vis is set per mark by the
   family filter in the reader options */
mark.uni-anchor { background: transparent; color: inherit; border-bottom: 2px solid transparent;
  cursor: pointer; border-radius: 2px; padding: 0; transition: background .18s, border-color .18s; }
mark.uni-anchor.uni-vis { background: rgba(63, 106, 216, .13);
  border-bottom-color: rgba(63, 106, 216, .55); }
mark.uni-anchor:hover { background: rgba(63, 106, 216, .22); border-bottom-color: var(--accent, #3f6ad8); }
mark.uni-anchor.uni-hit { animation: uniflash 1.6s ease-out; background: rgba(240, 180, 41, .45);
  border-bottom-color: #c58f00; }
@keyframes uniflash { 0% { background: rgba(240, 180, 41, .85); } 100% { background: rgba(240, 180, 41, .45); } }

/* the persistent selection: row, marks and graph node stay lit until cleared.
   The selected row NEVER fades: its flash ends at the selection colour, not at
   transparent, so the arrival animation cannot wash the selection away. */
tr.uni-sel > td { background: rgba(63, 106, 216, .16); }
tr.uni-sel > td:first-child { box-shadow: inset 4px 0 0 var(--accent, #3f6ad8); }
#uni-clear { border-color: #c58f00; }

/* the row flash on the left when arriving from the source or the graph */
tr.uni-hit > td { animation: unirow 1.6s ease-out; }
tr.uni-sel.uni-hit > td { animation: unirowsel 1.6s ease-out; }
@keyframes unirow { 0% { background: rgba(240, 180, 41, .5); } 100% { background: transparent; } }
@keyframes unirowsel { 0% { background: rgba(240, 180, 41, .55); } 100% { background: rgba(63, 106, 216, .16); } }

/* highlights colour-coded by what the anchor is: the graph's own palette */
mark.uni-anchor.uni-k-concept.uni-vis { background: rgba(63, 106, 216, .14); border-bottom-color: #3f6ad8; }
mark.uni-anchor.uni-k-claim.uni-vis { background: rgba(47, 158, 99, .16); border-bottom-color: #2f9e63; }
mark.uni-anchor.uni-k-hypothesis.uni-vis { background: rgba(197, 143, 0, .16); border-bottom-color: #c58f00; }
mark.uni-anchor.uni-k-objective.uni-vis { background: rgba(155, 89, 182, .15); border-bottom-color: #9b59b6; }
mark.uni-anchor.uni-k-example.uni-vis { background: rgba(208, 101, 78, .15); border-bottom-color: #d0654e; }
mark.uni-anchor.uni-k-edge.uni-vis { background: rgba(63, 106, 216, .10); border-bottom-color: #8fa7e0; }
mark.uni-anchor.uni-k-nbn.uni-vis { background: rgba(160, 60, 60, .12); border-bottom-color: #b06060; }
mark.uni-anchor.uni-k-alias.uni-vis { background: rgba(120, 120, 130, .14); border-bottom-color: #8a8f98; }

/* the selection outranks every kind colour: last rule at equal specificity wins */
mark.uni-anchor.uni-sel, mark.uni-anchor.uni-sel.uni-vis, mark.uni-anchor.uni-sel:hover { background: rgba(240, 180, 41, .5); border-bottom-color: #c58f00; }

/* the hover chip: names the kind of link (plus how many more share the span)
   without reflowing the text; the kind bar below is where a kind is hidden */
mark.uni-anchor { position: relative; }
mark.uni-anchor:hover::after { content: attr(data-kind) attr(data-more);
  position: absolute; left: 0; top: -1.5em; z-index: 8; pointer-events: none;
  font-size: .62rem; font-weight: 600; letter-spacing: .03em; line-height: 1.5;
  padding: 0 .45em; border-radius: 8px; color: #fff; background: #8a8f98;
  white-space: nowrap; }
mark.uni-k-concept:hover::after { background: #3f6ad8; }
mark.uni-k-claim:hover::after { background: #2f9e63; }
mark.uni-k-hypothesis:hover::after { background: #c58f00; }
mark.uni-k-objective:hover::after { background: #9b59b6; }
mark.uni-k-example:hover::after { background: #d0654e; }
mark.uni-k-edge:hover::after { background: #8fa7e0; }
mark.uni-k-nbn:hover::after { background: #b06060; }
mark.uni-k-alias:hover::after { background: #8a8f98; }

/* the source pane's kind bar: the same toggles that filter the graph families */
.uni-kbar { display: flex; gap: .3rem; flex-wrap: wrap; width: 100%; }
.uni-kbar button { font: inherit; font-size: .68rem; padding: .1rem .5rem;
  border: 1px solid var(--line2, #ccc); border-left-width: 4px; border-radius: 9px;
  background: #fff; cursor: pointer; color: #666; opacity: .45; }
.uni-kbar button.on { opacity: 1; color: #222; font-weight: 600; }
.uni-kbar button span { font-weight: 400; opacity: .6; }
.uni-kbar .uni-kb-concept { border-left-color: #3f6ad8; }
.uni-kbar .uni-kb-claim { border-left-color: #2f9e63; }
.uni-kbar .uni-kb-hypothesis { border-left-color: #c58f00; }
.uni-kbar .uni-kb-objective { border-left-color: #9b59b6; }
.uni-kbar .uni-kb-example { border-left-color: #d0654e; }
.uni-kbar .uni-kb-edge { border-left-color: #8fa7e0; }
.uni-kbar .uni-kb-nbn { border-left-color: #b06060; }
.uni-kbar .uni-kb-alias { border-left-color: #8a8f98; }

/* anchor blocks in the left tables become jump affordances */
.anchgo { cursor: pointer; border-radius: 6px; }
.anchgo:hover { background: rgba(63, 106, 216, .08); outline: 1px solid rgba(63, 106, 216, .3); }
.anchgo .uni-goglyph { opacity: .45; font-size: .85em; }
.anchgo:hover .uni-goglyph { opacity: 1; }

body.uni-panel-on #unigraph-inline { display: none; }

/* component hosts are transparent to layout: their children are the flex items */
uni-graph, uni-source, uni-options { display: contents; }

/* the reader options popover */
.uni-optwrap { position: relative; }
.uni-opts { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 300px;
  background: #fff; border: 1px solid var(--line2, #ccc); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14); padding: .9rem 1rem; font-size: .82rem; }
.uni-opts h5 { margin: .6rem 0 .3rem; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; opacity: .6; }
.uni-opts h5:first-child { margin-top: 0; }
.uni-opts label { display: inline-flex; align-items: center; gap: .3rem; margin: .1rem .7rem .1rem 0; }
.uni-opts .uni-quick { font-size: .76rem; opacity: .75; cursor: pointer; text-decoration: underline; margin-right: .6rem; }

/* the source pane's location trail and anchor stepper */
.uni-trail { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; width: 100%;
  min-height: 1.2rem; font-size: .76rem; }
.uni-trail span.crumbsep { opacity: .4; }
.uni-trail a { cursor: pointer; color: var(--accent-dk, #2b4eae); }
.uni-step { display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; }
.uni-step button { font: inherit; font-size: .78rem; border: 1px solid var(--line2, #ccc);
  border-radius: 6px; background: #fff; cursor: pointer; padding: .1rem .5rem; }
.uni-step .cnt { font-size: .74rem; opacity: .7; min-width: 4.2em; text-align: center; }

/* the data mode: the raw extraction JSON, item by item, selection-synced */
.uni-mode { display: inline-flex; gap: 0; border: 1px solid var(--line2, #ccc); border-radius: 7px; overflow: hidden; }
.uni-mode button { font: inherit; font-size: .74rem; border: 0; background: #fff; cursor: pointer; padding: .15rem .55rem; }
.uni-mode button.on { background: var(--accent, #3f6ad8); color: #fff; }
.uni-jhead { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; opacity: .55; margin: 1.1rem 0 .4rem; }
.uni-jlinks { font-size: .78rem; margin-bottom: .6rem; }
.uni-jitem { border: 1px solid var(--line2, #e2e2e2); border-radius: 8px; margin: .35rem 0; cursor: pointer; }
.uni-jitem pre { margin: 0; padding: .5rem .7rem; font-size: .72rem; line-height: 1.45; white-space: pre-wrap;
  word-break: break-word; background: transparent; }
.uni-jitem:hover { border-color: var(--accent, #3f6ad8); }
.uni-jitem.uni-sel { border-color: #c58f00; background: rgba(240, 180, 41, .12); }
.uni-jitem.uni-hit { animation: unirow 1.6s ease-out; }

/* the graph's collapsible config strip */
.uni-gopts { position: absolute; top: 6px; left: 6px; right: 6px; z-index: 6;
  background: rgba(255,255,255,.95); border: 1px solid var(--line2, #ddd); border-radius: 8px;
  padding: .35rem .55rem; font-size: .74rem; max-height: 70%; overflow: auto; }
.uni-gopts .grow { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; margin: .15rem 0; }
/* the first row starts clear of the floating gear and maximise buttons */
.uni-gopts .grow:first-child { margin-left: 68px; }
.uni-gopts .glab { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em;
  opacity: .55; min-width: 3.6rem; }
.uni-gopts input[type="range"] { width: 7rem; vertical-align: middle; }
.uni-gopts .gval { font-size: .68rem; opacity: .6; min-width: 2.2rem; }
.uni-gopts button { font: inherit; font-size: .74rem; border: 1px solid var(--line2, #ccc);
  border-radius: 6px; background: #fff; cursor: pointer; padding: .1rem .45rem; }
.uni-gopts button.on { background: var(--accent, #3f6ad8); color: #fff; border-color: var(--accent, #3f6ad8); }
.uni-gbig { position: absolute; top: 6px; left: 40px; z-index: 7; font-size: .8rem;
  border: 1px solid var(--line2, #ccc); border-radius: 7px; background: #fff; cursor: pointer;
  padding: .2rem .45rem; }
.uni-graphbox.uni-gmax .uni-gbig { background: var(--accent, #3f6ad8); color: #fff;
  border-color: var(--accent, #3f6ad8); }
.uni-gopts .gdeg { font-size: .74rem; min-width: 1.3rem; text-align: center; font-weight: 600; }
.uni-gcog { position: absolute; top: 6px; left: 6px; z-index: 7; font-size: .8rem;
  border: 1px solid var(--line2, #ccc); border-radius: 6px; background: rgba(255,255,255,.92);
  cursor: pointer; padding: .05rem .4rem; }
body.uni-graph-off .uni-graphbox, body.uni-graph-off .uni-hsplit { display: none; }

@media (max-width: 1099px) {
  body.uni-panel-on .uni-panel, body.uni-panel-on .uni-vsplit { display: none; }
  .uni-tools .uni-wide-only { display: none; }
}

/* ---- the document-of-one-node page (brief 24, programmatic phase) -------- */
.ndoc-fam { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #fff; background: #8a8f98; border-radius: 8px;
  padding: .05rem .5rem; vertical-align: middle; }
.ndoc-f-concept { background: #3f6ad8; }
.ndoc-f-claim { background: #2f9e63; }
.ndoc-f-hypothesis { background: #c58f00; }
.ndoc-f-objective { background: #9b59b6; }
.ndoc-f-example { background: #d0654e; }
.ndoc-f-edge { background: #8fa7e0; }
.ndoc-f-nbn { background: #b06060; }
.ndoc-f-alias, .ndoc-f-derived, .ndoc-f-ref { background: #8a8f98; }
.ndoc-item { margin: .7rem 0; padding: .55rem .8rem; border: 1px solid var(--line2, #e2e5ea);
  border-radius: 8px; background: var(--panel2, #fbfbfc); }
.ndoc-anchor { font-size: .82rem; color: #556; margin-top: .3rem; }
.ndoc-anchor blockquote { margin: .25rem 0 0 0; padding: .1rem .7rem; border-left: 3px solid #c9a227;
  font-style: italic; color: #444; }
.crumbline { font-size: .82rem; margin: .2rem 0 1rem; }
.rate-aligned { color: #2f9e63; }
.rate-stretched { color: #c58f00; }
.rate-misaligned { color: #b04040; }
.rate-unrated { color: #777; }
@media print {
  nav.site, footer.site, .crumb, .crumbline, .note { display: none; }
  .ndoc-item { break-inside: avoid; }
}

/* maximised graph: the page chrome yields — nav and splitters hidden, no
   background scroll — so the canvas truly owns the viewport (also the fix for
   the sticky nav and a splitter painting over the maximised canvas: sticky
   ancestors trap the box's z-index in their own stacking context) */
body.uni-gmax-on { overflow: hidden; }
body.uni-gmax-on nav.site { display: none; }
body.uni-gmax-on .uni-vsplit, body.uni-gmax-on .uni-hsplit { display: none; }

/* ---- the maximised view's inspector (brief 26) --------------------------- */
.uni-inspect { display: none; position: absolute; top: 0; right: 0; bottom: 1.4rem;
  width: 300px; z-index: 7; overflow: auto; background: rgba(255,255,255,.96);
  border-left: 1px solid var(--line2, #ddd); padding: .8rem .9rem; font-size: .82rem; }
.uni-gmax .uni-inspect { display: block; }
.uni-inspect h6 { margin: .9rem 0 .3rem; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .05em; color: #667; }
.uni-inspect .ndoc-anchor blockquote { margin: .25rem 0 0; padding: .1rem .6rem;
  border-left: 3px solid #c9a227; font-style: italic; color: #444; }
.uni-insp-legend div { display: flex; align-items: center; gap: .45rem; padding: .12rem 0;
  cursor: pointer; border-radius: 5px; }
.uni-insp-legend div:hover { background: rgba(63, 106, 216, .08); }
.uni-insp-legend div.off { opacity: .45; text-decoration: line-through; }
.uni-insp-legend i { width: .7rem; height: .7rem; border-radius: 3px; flex: 0 0 auto; }
.uni-insp-legend .dim { margin-left: auto; }

/* ---- the peak board (brief 26): four border areas, aligned slots --------- */
.uni-pinboard { position: absolute; left: .6rem; bottom: 1.8rem; top: auto; right: auto;
  width: 500px; max-width: 46%; height: min(66%, 600px); z-index: 9;
  background: rgba(255,255,255,.94); border: 1px solid var(--line2, #ccc);
  border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.18); display: flex;
  flex-direction: column; padding: .6rem .8rem; font-size: .76rem; }
.pb-head { display: flex; gap: .6rem; align-items: center; }
.pb-head .sp { flex: 1; }
.pb-head button { font: inherit; font-size: .75rem; border: 1px solid var(--line2, #ccc);
  border-radius: 6px; background: #fff; cursor: pointer; padding: .2rem .55rem; }
.pb-grid { flex: 1; display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; min-height: 0; }
.pb-mid { flex: 1; display: flex; gap: .5rem; min-height: 0; }
.pb-area { border: 1px dashed #c2cad8; border-radius: 8px; padding: .4rem;
  display: flex; gap: .35rem; align-items: center; }
.pb-top, .pb-bottom { flex-direction: row; justify-content: center; }
.pb-left, .pb-right { flex-direction: column; width: 24%; overflow: auto; align-items: stretch; }
.pb-area h6 { margin: 0 .3rem 0 0; font-size: .62rem; text-transform: uppercase; color: #99a; }
.pb-left h6, .pb-right h6 { margin: 0 0 .2rem; }
.pb-slot { min-width: 52px; min-height: 24px; border: 1px dashed #d5d9e0; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center; padding: 2px; }
.pb-slot.full { border-style: solid; }
.pb-tray { flex: 1; border: 1px solid var(--line2, #eee); border-radius: 8px;
  padding: .4rem .6rem; overflow: auto; }
.pb-traybox { display: flex; flex-wrap: wrap; gap: .35rem; }
.pb-chip { color: #fff; border-radius: 8px; padding: .15rem .55rem; font-size: .72rem;
  cursor: grab; user-select: none; max-width: 160px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pb-chip.picked { outline: 3px solid #c9a227; }

/* ---- the state pane (brief 27 follow-on): page state broadcast into the
   pixels a screen recording captures; off unless narrating or debugging ----- */
.uni-statepane { position: fixed; right: .7rem; bottom: 4.9rem; z-index: 90;
  background: rgba(15, 18, 28, .92); color: #d9e4f5; border-radius: 8px;
  padding: .45rem .65rem; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  max-width: 350px; pointer-events: none; white-space: nowrap; }
.uni-statepane div { overflow: hidden; text-overflow: ellipsis; }
.uni-statepane div:first-child { color: #9fd6a8; font-weight: 700; }

/* ---- brief 28: panes shrink the canvas instead of covering it ------------ */
.uni-graphbox.uni-gmax .uni-cy { inset: 0 300px 1.4rem 0; }
.uni-graphbox.uni-gmax.pb-open .uni-cy { left: 520px; }

/* the inspector's link rows and the path trail they build */
.uni-inspect .ilv { font-style: italic; color: #667; font-size: .74rem; }
.uni-insp-trail { font-size: .76rem; color: #8a6d1a; margin: 0 0 .55rem;
  line-height: 1.6; }
.uni-insp-trail .ilv { color: #8a6d1a; }
.uni-insp-trail [data-trailclear] { cursor: pointer; text-decoration: underline;
  margin-left: .3rem; color: #667; }

/* ---- the blast-radius mini graph (brief 28, answer 1): the same component,
   features disabled, living in the inspector -------------------------------- */
uni-graph[mini] { display: none; margin: .7rem 0; }
uni-graph[mini].has-sel { display: block; }
uni-graph[mini] .uni-graphbox { position: relative; height: 250px; flex: none;
  border: 1px solid var(--line2, #ddd); border-radius: 8px; overflow: hidden; }
uni-graph[mini] .uni-graphbox .uni-cy { inset: 0 0 1.2rem 0; }
uni-graph[mini] .uni-gbig, uni-graph[mini] .uni-inspect,
uni-graph[mini] .uni-gopts .grow { display: none; }
uni-graph[mini] .uni-gopts .grow[data-g="layout"],
uni-graph[mini] .uni-gopts .grow[data-g="explore"] { display: flex; }
uni-graph[mini] .uni-gstats { height: 1.2rem; font-size: .6rem; }

/* the trail board (brief 28, answers 2 and 3) */
.uni-trailboard { position: absolute; right: 310px; bottom: 1.8rem; width: 520px;
  max-width: 55%; max-height: 70%; z-index: 9; background: rgba(255,255,255,.96);
  border: 1px solid var(--line2, #ccc); border-radius: 10px; overflow: auto;
  resize: both; box-shadow: 0 12px 40px rgba(0,0,0,.18); padding: .6rem .8rem;
  font-size: .78rem; }
.tb-steps { margin: .5rem 0; line-height: 2.1; }
.tb-chip { background: #2b3446; color: #fff; border-radius: 8px; padding: .18rem .55rem;
  cursor: pointer; user-select: none; }
.tb-chip.wild { background: #2a9d8f; font-style: italic; }
.tb-chip .tb-x { opacity: .6; margin-left: .25rem; cursor: pointer; }
.tb-chip .tb-x:hover { opacity: 1; }
.tb-project { margin: .4rem 0; }
.tb-verb, .tb-load { font: inherit; font-size: .72rem; border: 1px solid var(--line2, #ccc);
  border-radius: 8px; background: #fff; cursor: pointer; padding: .1rem .5rem; margin: .1rem 0; }
.tb-results { margin: .5rem 0; line-height: 1.7; }
.tb-res { cursor: pointer; }
.tb-res:hover { background: rgba(42, 157, 143, .12); }
.uni-trailboard .pb-head button { font: inherit; font-size: .75rem;
  border: 1px solid var(--line2, #ccc); border-radius: 6px; background: #fff;
  cursor: pointer; padding: .2rem .55rem; }
.uni-trailboard h6 { margin: .6rem 0 .25rem; font-size: .64rem;
  text-transform: uppercase; color: #99a; }

/* the peak board is now resizable (brief 28's aside) */
.uni-pinboard { resize: both; overflow: auto; min-width: 380px; min-height: 300px; }

/* ---- the strip in two tabs (brief 29: the controls outgrew one row) ------- */
.uni-gopts .gtabs { display: flex; gap: .3rem; margin-bottom: .25rem; }
.uni-gopts .gtabs button { font-size: .66rem; padding: .1rem .55rem; opacity: .6; }
.uni-gopts .gtabs button.on { opacity: 1; font-weight: 700; border-bottom: 2px solid #2a9d8f; }
.uni-gopts .gtabpane { display: none; }
.uni-gopts .gtabpane.on { display: block; }
uni-graph[mini] .uni-gopts .gtabs { display: none; }
uni-graph[mini] .uni-gopts .gtabpane { display: contents; }

/* ---- the core tree (brief 29): the document expanded to the word ---------- */
.uni-coretree { position: absolute; left: .6rem; top: 3rem; bottom: 1.8rem; z-index: 30;
  width: 460px; max-width: 44%; min-width: 320px; min-height: 260px;
  resize: both; overflow: auto; background: rgba(255,255,255,.96);
  border: 1px solid var(--line2, #ccc); border-radius: 8px; padding: .5rem .6rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.14); }
.uni-gmax .uni-coretree { top: 3.4rem; }
.uni-coretree .ct-rows { margin-top: .35rem; font-size: .74rem; line-height: 1.45; }
.ct-row { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-radius: 4px; padding: 0 .25rem; }
.ct-row:hover { background: rgba(42,157,143,.1); }
.ct-row.on { background: rgba(42,157,143,.22); }
.ct-exp { display: inline-block; width: .95em; color: #8a8f98; cursor: pointer; }
.ct-n { font-size: .62rem; color: #8a8f98; }
.ct-bold .ct-lab { font-weight: 700; }
.ct-ital .ct-lab { font-style: italic; }
.ct-code .ct-lab { font-family: ui-monospace, monospace; font-size: .95em; }
.ct-link .ct-lab { text-decoration: underline; }

/* ---- everything on record (brief 29's inspector ask) ---------------------- */
.ev-row { display: flex; gap: .45rem; font-size: .72rem; line-height: 1.5;
  border-top: 1px dotted #e2e4e9; }
.ev-row .dim { flex: 0 0 5.4rem; }
.ev-row span + * { min-width: 0; }
.ndoc-f-core { background: #5a5f6a; }

/* ---- the words mode of the core tree (brief 30) --------------------------- */
.uni-coretree .ct-mode { font-size: .62rem; padding: 0 .45rem; opacity: .55; margin-left: .3rem; }
.uni-coretree .ct-mode.on { opacity: 1; font-weight: 700; border-bottom: 2px solid #2a9d8f; }
.ct-w { display: inline-block; margin-right: .15rem; }
.ct-w.ctc-padding { opacity: .45; }
.ct-w.ctc-verb .ct-lab { font-style: italic; }
.ct-w.ctc-code .ct-lab { font-family: ui-monospace, monospace; font-size: .95em; }
.ct-w.ctc-number .ct-lab { color: #8a8f98; }

/* ---- the standalone graph page (v0.4.39): the component with no reader ---- */
body.uni-standalone { margin: 0; overflow: hidden; background: #fff; }
.uni-standalone .uni-gbig { display: none; }
.uni-pagebar { position: absolute; top: 6px; left: 40px; z-index: 7; font-size: .72rem;
  background: rgba(255,255,255,.92); border: 1px solid var(--line2, #ddd);
  border-radius: 8px; padding: .18rem .55rem; display: flex; gap: .6rem;
  align-items: center; white-space: nowrap; }
.uni-pagebar a { text-decoration: none; font-weight: 600; }

/* ---- small screens: the maximised graph on a phone ------------------------ */
@media (max-width: 760px) {
  .uni-graphbox.uni-gmax .uni-cy { inset: 0 0 1.4rem 0; }
  /* the inspector becomes a bottom sheet, shown only while something is selected */
  .uni-gmax .uni-inspect { top: auto; left: 0; right: 0; bottom: 1.4rem; width: auto;
    max-height: 44%; border-left: 0; border-top: 1px solid var(--line2, #ddd);
    display: none; }
  .uni-gmax.uni-hassel .uni-inspect { display: block; }
  .uni-gmax .uni-inspect uni-graph[mini] .uni-graphbox { height: 170px; }
  /* every floating pane goes full width, margins kept */
  .uni-coretree { left: .4rem; right: .4rem; width: auto; max-width: none; min-width: 0;
    top: 2.8rem; bottom: 46%; }
  .uni-trailboard { left: .4rem; right: .4rem; width: auto; max-width: none; min-width: 0; }
  .uni-pinboard { left: .4rem; right: .4rem; width: auto; max-width: none; min-width: 0;
    height: min(50%, 420px); }
  .uni-graphbox.uni-gmax.pb-open .uni-cy { left: 0; }
  .uni-gopts { max-height: 52%; }
  .uni-pagebar span.dim { display: none; }
}

/* ---- the file explorer (v0.5.1): the document's artefacts, raw and viewed - */
.fx { display: flex; gap: 0; border: 1px solid var(--line2, #ddd); border-radius: 10px;
  overflow: hidden; height: 78vh; min-height: 420px; background: #fff; }
.fx-tree { flex: 0 0 280px; overflow: auto; border-right: 1px solid var(--line2, #ddd);
  background: var(--panel2, #fafafa); padding: .5rem 0; font-size: .78rem; }
.fx-folder { padding: .45rem .7rem .2rem; font-weight: 700; font-size: .68rem;
  letter-spacing: .04em; color: #667; text-transform: none; }
.fx-file { display: flex; gap: .5rem; align-items: baseline; padding: .16rem .7rem .16rem 1.1rem;
  cursor: pointer; white-space: nowrap; }
.fx-file:hover { background: rgba(42,157,143,.08); }
.fx-file.on { background: rgba(42,157,143,.16); font-weight: 600; }
.fx-fn { overflow: hidden; text-overflow: ellipsis; }
.fx-fb { margin-left: auto; font-size: .64rem; }
.fx-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.fx-head { display: flex; gap: .6rem; align-items: center; padding: .4rem .8rem;
  border-bottom: 1px solid var(--line2, #eee); font-size: .76rem; flex-wrap: wrap; }
.fx-head .sp { flex: 1; }
.fx-tab { font: inherit; font-size: .7rem; padding: .12rem .6rem; cursor: pointer;
  border: 1px solid var(--line2, #ccc); border-radius: 7px; background: #fff; opacity: .6; }
.fx-tab.on { opacity: 1; font-weight: 700; border-color: #2a9d8f; }
.fx-body { flex: 1; overflow: auto; padding: .8rem 1rem; }
.fv-raw { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem;
  line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.fv-key { color: #1d6a63; }
.fv-str { color: #2f6b2f; }
.fv-num { color: #a15c00; }
.fv-kw { color: #7a4fb0; font-weight: 600; }
.fv-h { color: #24466e; font-weight: 700; }
.fv-fence, .fv-code { color: #6a3f8f; }
.fv-q { color: #6b6f78; font-style: italic; }
.fv-li { color: #a15c00; }
.fv-t { font-size: .74rem; }
.fv-t td, .fv-t th { padding: .18rem .5rem; vertical-align: top; }
.fv-bar { display: flex; align-items: center; gap: .5rem; font-size: .74rem; margin: .1rem 0; }
.fv-barlab { flex: 0 0 9rem; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.fv-bar i { display: block; height: .68rem; background: rgba(42,157,143,.5); border-radius: 3px; }
.fv-bar b { font-size: .68rem; }
.fv-bar .ctc-padding { opacity: .5; }
.fv-bar .ctc-code { font-family: ui-monospace, monospace; }
@media (max-width: 760px) {
  .fx { flex-direction: column; height: 82vh; }
  .fx-tree { flex: 0 0 32%; border-right: 0; border-bottom: 1px solid var(--line2, #ddd); }
}