PISG/layout/insights-base.css

/* Base styles for the newer sections (navigation bar, overview, relation map, roles ...).
   pisg puts this in front of the theme, so any theme can restyle these classes, and
   the old themes still show them properly. Colours come from the theme's variables
   when it has them (modern, midnight ...), otherwise from the page's own text colour. */

html { scroll-behavior: smooth; }
.card { scroll-margin-top: 64px; }

.pisg-nav {
  position: sticky; top: 0; z-index: 30; margin: 0 0 8px; text-align: left;
  background: var(--bg, #fff); border-bottom: 1px solid rgba(128, 128, 128, .35);
}
.nav-menu > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 2px; cursor: pointer; list-style: none; user-select: none;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-current { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-toggle { flex: 0 0 auto; font-size: 13px; opacity: .8; }
.nav-toggle::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 2px 2px 8px;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .15s; }
.nav-menu[open] .nav-toggle::after { transform: rotate(-135deg); margin-bottom: -2px; }
.nav-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 40; margin: 0; padding: 8px;
  list-style: none; max-height: 70vh; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 12px;
  background: var(--bg, #fff); border: 1px solid rgba(128, 128, 128, .35); border-top: 0;
  box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .28);
}
.nav-list a { display: block; padding: 8px 10px; border-radius: 6px; text-decoration: none; }
.nav-list a:hover { background: rgba(128, 128, 128, .18); text-decoration: none; }
.nav-list a.active { font-weight: 700; }
.nav-list a.active::before { content: "\2022"; margin-right: 8px; }
.nav-menu > summary:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

.intro { margin: 4px 0 12px; text-align: left; opacity: .85; }

.hero { margin: 2px 0 18px; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.3; font-weight: 600; text-wrap: balance; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 48px; margin: 0; }
.fact { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(128, 128, 128, .3); }
.fact dt { opacity: .75; }
.fact dd { margin: 0; text-align: right; font-weight: 600; }
.fact dd small { display: block; font-weight: 400; opacity: .7; }

.cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 6px 0; }
.minicard {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 12px 14px; border: 1px solid rgba(128, 128, 128, .35); border-radius: 12px;
}
.mc-title { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.mc-name { font-size: 20px; font-weight: 700; line-height: 1.3; word-break: break-word; }
.mc-desc { font-size: 12px; opacity: .7; }
.mc-value { margin-top: 6px; font-size: 13px; font-weight: 600; }
.mc-list { margin: 8px 0 0; padding: 0; list-style: none; }
.mc-list li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-top: 1px solid rgba(128, 128, 128, .25); }
.mc-list span { opacity: .75; }

.bar { display: inline-block; vertical-align: middle; width: 130px; max-width: 100%; height: 8px; border-radius: 4px; background: rgba(128, 128, 128, .28); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 4px; background: var(--accent, currentColor); opacity: .85; }
.sigword { font-weight: 600; }

/* ---- relation map ---- */
.relmap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(230px, 1fr); gap: 14px; align-items: start; text-align: left; }
@media (max-width: 820px) { .relmap { grid-template-columns: 1fr; } }
.relmap-canvas svg { display: block; width: 100%; height: auto; border: 1px solid rgba(128, 128, 128, .3); border-radius: 12px; }
.relmap-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; font-size: 12px; }
.relmap-legend .lg i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; vertical-align: middle; }
.lg0 i { background: var(--t0, #4a3aa7); } .lg1 i { background: var(--t1, #eda100); }
.lg2 i { background: var(--t2, #1baf7a); } .lg3 i { background: var(--t3, #eb6834); }
.relmap-info { padding: 12px 14px; min-height: 7em; border: 1px solid rgba(128, 128, 128, .35); border-radius: 12px; font-size: 13px; }
.ri-title { margin: 0 0 4px; font-size: 17px; }
.ri-sub { margin: 10px 0 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.ri-meta, .ri-row { margin: 2px 0; opacity: .9; }
.ri-list { margin: 0; padding: 0; list-style: none; }
.ri-list li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-top: 1px solid rgba(128, 128, 128, .25); }
.ri-num { opacity: .7; }
.ri-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

.rm-line { stroke: currentColor; stroke-opacity: .32; stroke-linecap: round; }
.rm-hit { stroke: transparent; cursor: pointer; }
.rm-edge:hover .rm-line, .rm-edge.hl .rm-line { stroke-opacity: .8; }
.rm-edge.sel .rm-line { stroke: var(--accent, currentColor); stroke-opacity: 1; }
.rm-node { cursor: pointer; outline: none; }
.rm-node circle { stroke: rgba(255, 255, 255, .55); stroke-width: 2; }
.rm-node text { font-size: 12px; fill: currentColor; paint-order: stroke; stroke: var(--card, var(--bg, transparent)); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.rm-node.t0 circle { fill: var(--t0, #4a3aa7); } .rm-node.t1 circle { fill: var(--t1, #eda100); }
.rm-node.t2 circle { fill: var(--t2, #1baf7a); } .rm-node.t3 circle { fill: var(--t3, #eb6834); }
.rm-node:focus-visible circle, .rm-node.sel circle { stroke: var(--accent, currentColor); stroke-width: 4; }
svg.dim .rm-node:not(.hl) { opacity: .28; }
svg.dim .rm-edge:not(.hl) { opacity: .1; }

/* labels that found no free space appear on hover, focus, selection, or as a neighbour of one */
.rm-lbl.off { opacity: 0; }
.rm-node:hover .rm-lbl.off, .rm-node:focus .rm-lbl.off, .rm-node.hl .rm-lbl.off, .rm-node.sel .rm-lbl.off { opacity: 1; }
.minicard.t0 { border-top: 3px solid var(--t0, #4a3aa7); } .minicard.t1 { border-top: 3px solid var(--t1, #eda100); }
.minicard.t2 { border-top: 3px solid var(--t2, #1baf7a); } .minicard.t3 { border-top: 3px solid var(--t3, #eb6834); }
td.asmall .v { display: inline; }

/* The left-hand menu only exists in themes that lay it out (see build-themes.py). */
.nav-side { display: none; }

.homebar { margin: 0 0 10px; text-align: left; }