PISG/layout/modern.css

/* pisg theme: modern - Ink on paper, colour only for data; follows the visitor's light/dark setting.
   Generated by layout/build-themes.py, edit the palette there. */
:root {
  color-scheme: light dark;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --fg: #171b21;
  --muted: #59626d;
  --line: #e0e3e8;
  --line2: #c6ccd4;
  --hover: #eceff3;
  --mark: #2a78d6;
  --t0: #4a3aa7;
  --t1: #eda100;
  --t2: #1baf7a;
  --t3: #eb6834;
  --male: #2a5fb0;
  --female: #b03a72;
  --shadow: 0 18px 32px -14px rgba(20,24,30,.28);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1318;
    --surface: #171c23;
    --fg: #e8ebef;
    --muted: #98a2ae;
    --line: #252c35;
    --line2: #38414c;
    --hover: #1b2129;
    --mark: #3987e5;
    --t0: #9085e9;
    --t1: #c98500;
    --t2: #199e70;
    --t3: #d95926;
    --male: #7aa7ea;
    --female: #e58ab5;
    --shadow: 0 18px 32px -14px rgba(0,0,0,.6);
  }
}

/* pisg output is table markup, so these rules restyle the existing classes (headtext, hicell,
   tdtop, rankc ...). The generator wraps each section in <div class="card" id="...">. */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 32px 24px 96px;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}
body > div { max-width: 1040px; margin: 0 auto; text-align: left; }   /* pisg centres it with align=center */

/* Fixed 925/929px table widths are attributes, so plain CSS overrides them. */
table { border-collapse: separate; border-spacing: 0; max-width: 100%; }
table[width] { width: 100%; }
table[width="520"] { width: auto; margin: 10px 0 0; }
td { color: var(--fg); font-family: inherit; font-size: 14px; text-align: left; padding: 9px 10px; vertical-align: middle; overflow-wrap: anywhere; }   /* long URLs and nicks wrap instead of forcing a scrollbar */

a, a:link, a:visited { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
a.background, a.background:link, a.background:visited { color: var(--muted); font-weight: 500; }

/* ---- Masthead: reads like an IRC header, "#channel @ network" ---- */
.title, #pagetitle1 {
  margin: 4px 0 8px;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(24px, 4.6vw, 40px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.subtitle { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.subtitle b { color: var(--fg); font-weight: 600; }

/* ---- Sections: a rule and space, no boxes ---- */
.card { margin: 56px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line2); overflow-x: auto; text-align: left; scroll-margin-top: 64px; }
.card > br { display: none; }
.pisg-nav + .card { margin-top: 28px; border-top: 0; padding-top: 0; }
#overview .headlinebg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* the sentence below is its headline; the menu still links here */
.card > table:first-of-type { margin-bottom: 8px; }
.headlinebg { background: none; padding: 0; }
.headtext { margin: 0; padding: 0; border: 0; background: none; color: var(--fg);
            font-size: 20px; line-height: 1.25; font-weight: 650; letter-spacing: -0.01em; text-align: left; }
.intro { margin: 2px 0 16px; max-width: 68ch; color: var(--muted); }

/* ---- Wide screens: a menu down the left, the page fills the rest ---- */
body { container-type: inline-size; }
.nav-side { display: none; }
@media (min-width: 1000px) {
  body { padding-left: 272px; padding-right: 28px; }
  body > div { max-width: 1720px; }
  .pisg-nav { box-sizing: border-box; position: fixed; top: 0; left: 0; bottom: 0; width: 232px; margin: 0; padding: 26px 12px 24px 24px;
              border: 0; border-right: 1px solid var(--line2); background: var(--bg); overflow-y: auto; z-index: 30; }
  .nav-menu { display: none; }
  .nav-side { display: block; }
  .nav-brand, .nav-brand:link, .nav-brand:visited { display: block; margin: 0 0 18px; font-family: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 18px; font-weight: 700;
              letter-spacing: -0.02em; text-decoration: none; overflow-wrap: anywhere; }
  .nav-side-list { margin: 0; padding: 0; list-style: none; }
  .nav-side-list a, .nav-side-list a:link, .nav-side-list a:visited { display: block; margin-left: -10px; padding: 6px 10px; border-left: 2px solid transparent;
              color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; }
  .nav-side-list a:hover { color: var(--fg); background: var(--hover); }
  .nav-side-list a.active { color: var(--fg); font-weight: 650; border-left-color: var(--mark); }
  .card { scroll-margin-top: 24px; }
  .card td:not(.headtext):not(.headlinebg) { padding-left: 8px; padding-right: 8px; }   /* the 10-column nick table just fits beside the menu */
  .pisg-nav + .card { margin-top: 20px; }
}
/* Two short sections share a row when the page is wide enough (measured on the page, so it also holds inside a frame). */
@container (min-width: 1080px) {
  body > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; grid-auto-flow: dense; }
  body > div > * { grid-column: 1 / -1; }
  body > div > .card.half { grid-column: auto; }
}

/* Way back to the landing page (option HomeLink) */
.homebar { margin: 0 0 14px; text-align: left; }
.homebtn, .homebtn:link, .homebtn:visited { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line2); border-radius: 6px;
  background: var(--surface); color: var(--fg); font-size: 13px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.homebtn:hover { background: var(--hover); border-color: var(--fg); }

/* Column titles */
.tdtop { background: none; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em;
         text-transform: uppercase; border-bottom: 1px solid var(--line2); padding: 8px 10px; }
.tdtop { white-space: nowrap; }   /* column titles stay on one line; the table scrolls instead */
.tdtop b { font-weight: 600; }

/* Rows: one hairline each */
.hicell { background: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 11px 10px; }
.hicell10 { background: none; font-size: 12px; border-bottom: 1px solid var(--line); }
tr:last-child > .hicell { border-bottom: 0; }
/* pisg writes an inline colour gradient on the top-nicks rows (HiCell/HiCell2); the theme owns colour. */
td[style*="background-color"] { background: transparent !important; border-bottom: 1px solid var(--line); }
tr:hover > td[style*="background-color"], tr:hover > .rankc, tr:hover > .hirankc { background: var(--hover) !important; }

.rankc, .hirankc, .rankc10 { background: transparent; color: var(--muted); font-family: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px;
                              font-weight: 500; text-align: center; border-bottom: 1px solid var(--line); }
.hirankc { color: var(--fg); font-weight: 700; }
.rankc, .hirankc, .rankc10 { white-space: nowrap; }
.rankc10 { text-align: left; }
/* nicks are set in monospace, as in an IRC client */
.rankc + td, .hirankc + td { font-family: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; font-weight: 600; }
.small, .asmall { color: var(--muted); font-family: inherit; font-size: 12px; }
.asmall { text-align: center; }

/* ---- Bar charts (marks: thin, 4px rounded data end, 2px gap between segments) ---- */
table:not([width]) { width: 100%; table-layout: fixed; margin: 6px 0; }
td.asmall { padding: 0 2px; line-height: 1.3; vertical-align: bottom; }   /* bars stand on one baseline */
table:not([width]) tr:first-child > td.asmall { border-bottom: 1px solid var(--line2); }
td.asmall br { display: none; }
td.rankc10center, td.hirankc10center { background: none; border: 0; color: var(--muted); font-family: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
                                         font-size: 11px; text-align: center; padding: 6px 0 0; min-width: 0; letter-spacing: -0.02em; }   /* no side padding: 24 narrow columns must not poke out of the table */
td.hirankc10center { color: var(--fg); font-weight: 700; }
/* a number over every bar is noise: the peak keeps its label, the rest are in the tooltip */
td.asmall .v { display: none; }
td.asmall .v.pk { display: block; color: var(--fg); font-family: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; font-weight: 600; }
.rankc10center.skip { visibility: hidden; }

img[id$="-v"] { display: block; width: min(64%, 22px); margin: 0 auto; border-radius: 0; }
img[id$="-v"]:first-of-type { border-radius: 4px 4px 0 0; }
img[id$="-v"]:not(:first-of-type) { margin-top: 2px; }
img[id$="-v"]:only-of-type { border-radius: 4px 4px 0 0; }
img[id$="-h"] { height: 8px; vertical-align: middle; margin: 0 1px 0 0; border-radius: 0; }
td[nowrap] img[id$="-h"] { background: var(--mark); margin-right: 0; }   /* lines: one value, one colour; the "when" column keeps the four */
img[id$="-h"]:first-of-type { border-radius: 4px 0 0 4px; }
img[id$="-h"]:last-of-type { margin-right: 0; border-radius: 0 4px 4px 0; }
img[id$="-h"]:only-of-type { border-radius: 4px; }
td.asmall img[id$="-h"] { margin-right: 6px; }
table[width="520"] img[id$="-h"] { width: 14px; height: 8px; border-radius: 2px; }   /* legend: a colour key, not a bar */
table[width="520"] td.asmall { text-align: left; padding: 0 14px 0 0; white-space: nowrap; }
/* the colour key wraps instead of forcing a sideways scrollbar on a narrow screen */
table[width="520"] { display: flex; flex-wrap: wrap; gap: 4px 0; width: auto; max-width: 100%; }
table[width="520"] tbody, table[width="520"] tr { display: contents; }
img[id="blue-h"],   img[id="blue-v"]   { background: var(--t0); }
img[id="green-h"],  img[id="green-v"]  { background: var(--t1); }
img[id="yellow-h"], img[id="yellow-v"] { background: var(--t2); }
img[id="red-h"],    img[id="red-v"]    { background: var(--t3); }

td[rowspan] img { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; display: block; margin: 0 auto; }
td[rowspan] img.defpic { width: 26px; height: 26px; opacity: .3; }   /* the shared default picture: a quiet placeholder */

/* ranked tables: one left edge, and no stray rule under the last row */
tr:first-child > td:not([class]):first-child { border-bottom: 1px solid var(--line2); }
tr:last-child > .rankc, tr:last-child > .hirankc, tr:last-child > td[style*="background-color"] { border-bottom: 0; }
.rankc, .hirankc { width: 44px; }
td[style*="background-color"] { white-space: nowrap; }          /* "3 days ago" stays on one line ... */
td[style*="background-color"].quote { white-space: normal; }    /* ... only the quote may wrap */
.male, .male a { color: var(--male); }
.female, .female a { color: var(--female); }
.bot, .bot a { color: var(--muted); font-style: italic; }

/* single-series bars */
.bar { display: inline-block; vertical-align: middle; width: 140px; max-width: 100%; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 4px; background: var(--mark); opacity: 1; }
.sigword { font-family: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; font-weight: 600; }

/* "These didn't make it to the top:" is a bare <b><i> under the table; give it the same voice as a column title */
.card > b { display: block; margin: 26px 0 4px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.card > b > i { font-style: normal; }

#totallines { margin-top: 56px; padding-top: 14px; border-top: 1px solid var(--line2); color: var(--muted); font-size: 12px; }
#footer { margin-top: 2px; color: var(--muted); }
#footer .small { font-size: 12px; }
::selection { background: var(--fg); color: var(--bg); }

/* ---- Section menu: one slim bar, one panel ---- */
.pisg-nav { background: var(--bg); border-bottom-color: var(--line2); margin-bottom: 0; }
.nav-current { color: var(--fg); font-weight: 650; }
.nav-toggle { color: var(--muted); opacity: 1; }
.nav-list { background: var(--surface); border-color: var(--line2); box-shadow: var(--shadow); }
.nav-list a, .nav-list a:link, .nav-list a:visited { color: var(--fg); font-weight: 500; text-decoration: none; }
.nav-list a:hover { background: var(--hover); }
.nav-list a.active { font-weight: 700; }

/* ---- Overview: a sentence and a list of facts, not a wall of tiles ---- */
.hero { margin: 2px 0 22px; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.3; font-weight: 650; letter-spacing: -0.02em; text-wrap: balance; }
.hero b { font-family: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; font-weight: 700; letter-spacing: -0.05em; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 56px; margin: 0; }
.fact { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.fact dt { color: var(--muted); }
.fact dd { margin: 0; text-align: right; font-family: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; font-weight: 600; font-variant-numeric: tabular-nums; }
.fact dd small { display: block; color: var(--muted); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 12px; font-weight: 400; }

/* ---- Roles, personalities: columns split by a rule, no boxes ---- */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 28px 32px; margin: 8px 0 0; }
.minicard { display: flex; flex-direction: column; gap: 3px; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line2); border-radius: 0; background: none; text-align: left; }
.mc-title { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.mc-name { font-family: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 19px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.mc-desc { color: var(--muted); font-size: 13px; }
.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: 5px 0; border-top: 1px solid var(--line); font-family: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 13px; }
.mc-list span { color: var(--muted); }
.minicard.t0 { border-top: 3px solid var(--t0); } .minicard.t1 { border-top: 3px solid var(--t1); }
.minicard.t2 { border-top: 3px solid var(--t2); } .minicard.t3 { border-top: 3px solid var(--t3); }

/* ---- Relation map: the one lifted surface ---- */
.relmap-canvas svg { box-sizing: border-box; background: var(--surface); border: 1px solid var(--line2); border-radius: 8px; }   /* width:100% must include the border */
.relmap-info { background: none; border: 0; border-top: 1px solid var(--line2); border-radius: 0; padding: 12px 0 0; }
.relmap-legend { color: var(--muted); }
.ri-title { font-family: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; color: var(--fg); }
.ri-sub, .ri-num { color: var(--muted); opacity: 1; }
.ri-list li { border-top-color: var(--line); }
.ri-link { color: var(--fg); font-family: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; text-decoration-color: var(--line2); }
.lg0 i, .rm-node.t0 circle { background: var(--t0); fill: var(--t0); } .lg1 i, .rm-node.t1 circle { background: var(--t1); fill: var(--t1); }
.lg2 i, .rm-node.t2 circle { background: var(--t2); fill: var(--t2); } .lg3 i, .rm-node.t3 circle { background: var(--t3); fill: var(--t3); }
.rm-line { stroke: var(--muted); }
.rm-node circle { stroke: var(--surface); }
.rm-node text { fill: var(--fg); stroke: var(--surface); font-family: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; }
.rm-edge.sel .rm-line { stroke: var(--fg); }
.rm-node:focus-visible circle, .rm-node.sel circle { stroke: var(--fg); }

@media (max-width: 720px) {
  body { padding: 20px 16px 72px; font-size: 14px; }
  .hr.rankc10center:nth-child(even) { visibility: hidden; }     /* every second hour label on a phone */
  td { padding: 7px 6px; font-size: 13px; }
  .bar { width: 64px; }
  .card { margin-top: 44px; }
  .facts { grid-template-columns: 1fr; }
  td[rowspan] img { width: 30px; height: 30px; }
}