/* Demo mode (8 October 2026; web/demo.py): the same site, less of it, for a screen seen across a table. The
   body carries class "demo" while the session is in demo mode; every page shows its one main object and folds
   the rest behind a single "more". Base 17px, generous line height, the site's one accent, nothing decorative.
   Also here: the header's Demo switch (on every page, both states), the "more" disclosure, the atlas's demo
   view (the quadrant chart, the ranked reading, the card, their dark theme; the old circle map behind "more" as
   the citation map) and the person's career line. */

/* ---- the switch in the header ------------------------------------------------------------------------------ */
.demoswitch { display:inline-flex; align-items:center; gap:.35rem; margin:0; }
.demoswitch .demobtn { background:#fff; color:var(--accent); border:1px solid var(--accent); padding:.2rem .75rem; border-radius:14px; font-size:.9rem; font-weight:600; }
.demoswitch .demobtn:hover { background:var(--accent); color:#fff; }
.demoswitch.on { background:var(--accent); color:#fff; border-radius:14px; padding:.15rem .25rem .15rem .75rem; font-size:.9rem; }
.demoswitch.on .demotag { font-weight:600; }
.demoswitch.on .demosep { opacity:.7; }
.demoswitch.on .demoexit { background:transparent; border:0; color:#fff; text-decoration:underline; padding:.1rem .5rem .1rem .1rem; font-size:.9rem; cursor:pointer; }

/* ---- the presentation state -------------------------------------------------------------------------------- */
body.demo { font-size:17px; line-height:1.6; }
body.demo header.top { padding:.7rem 1.6rem; gap:1.2rem; }
body.demo nav.views a { font-size:1rem; padding:4px 12px; }
body.demo .who { gap:.6rem; }
body.demo .who > form:last-child button { font-size:.85rem; padding:.15rem .55rem; }
/* the fields bar folds away; the "fields" button (sticky.js) brings it back */
body.demo main { max-width:none; padding:.8rem 1rem 1rem; }
body.demo h1 { font-size:2rem; line-height:1.25; margin:.3rem 0 .35rem; letter-spacing:-.01em; }
body.demo h2 { font-size:1.3rem; margin:1.5rem 0 .5rem; }
body.demo h3 { font-size:1.08rem; }
body.demo .lead { font-size:1rem; max-width:72ch; }
body.demo .small { font-size:.88rem; }
body.demo footer { font-size:.85rem; max-width:none; padding:0 1rem; }
/* the one-line caption under every title: what the view is and where its data comes from */
.caption { color:#4a4843; font-size:1rem; line-height:1.5; margin:0 0 1.3rem; max-width:110ch; }
@media (max-width:760px) {
  body.demo { font-size:16px; }
  body.demo header.top { padding:.5rem .8rem; gap:.35rem .5rem; }
  /* on a phone the switch sits on the brand's row and the views wrap under them; logging out waits for "exit" */
  body.demo header.top .brand { font-size:.95rem; }
  body.demo header.top .who { order:1; }
  body.demo header.top nav.views { order:2; flex-basis:100%; }
  body.demo nav.views a { font-size:.92rem; padding:2px 8px; }
  body.demo .who > form:last-child { display:none; }
  body.demo main { padding:1rem .9rem .6rem; }
  body.demo h1 { font-size:1.55rem; }
  .caption { font-size:.95rem; }
}

/* ---- "more": everything expert, one disclosure, revealed in place ------------------------------------------- */
details.more { margin:2.2rem 0 0; border-top:1px solid var(--line); padding-top:.6rem; }
details.more > summary { cursor:pointer; color:var(--accent); font-weight:600; font-size:1.05rem; list-style:none; display:inline-block; padding:.35rem .9rem; border:1px solid var(--accent); border-radius:16px; background:#fff; }
details.more > summary::-webkit-details-marker { display:none; }
details.more > summary::after { content:" ▾"; }
details.more[open] > summary::after { content:" ▴"; }
details.more > summary:hover { background:#eef2f6; }
details.more[open] > summary { margin-bottom:1rem; }
details.more .morenote { margin:.2rem 0 1rem; }
@media print { details.more { display:none; } }

/* ---- the atlas's demo view: the quadrant chart, the ranked reading beside it, the charts under both ---------------
   (8 October 2026, second pass; static/atlasdemo.js). One white panel per object, hairline axes, no heavy borders;
   the colour carries one thing, UZH's momentum, in four muted hues of one diverging family and a hollow grey for
   absent, validated for colour-blind separation on the light and the dark surface (docs/design/demo-mode.md). */
#demoatlas, #atlasmore {
  --q-surface:#ffffff; --q-card:#ffffff; --q-ink:#1d1d1b; --q-ink2:var(--chart-ink); --q-muted:var(--chart-muted);
  --q-hair:rgba(24,24,20,.09); --q-hair2:#e8e6e0; --q-band:#f4f3ef; --q-grid:var(--chart-grid); --q-ref:#a9a59b; --q-axis:var(--chart-axis); --q-axis2:#9d998f;
  --m-ahead:#23538e; --m-new:#0f919c; --m-pace:#a6b3c1; --m-behind:#c45e39; --m-absent:#9aa1aa; --m-unknown:#e3e5e8;
  --flag-missing:#b3261e; --flag-strong:#2e7d32; --flag-losing:#c78a1c;
  --q-shadow:0 10px 30px rgba(20,20,18,.14);
  /* the people inside a circle: a darker tone of its momentum colour (lighter on the dark surface), the peer's
     orange in the peer view (the works-per-year line's) */
  --mx-ahead:#173d6b; --mx-new:#08666e; --mx-pace:#4f5d6c; --mx-behind:#8c3a1b; --mx-absent:#5f656d; --mx-unknown:#7b8189;
  --q-peer:#a4520a; --q-dotx:.3;
}
.m-ahead { --m:var(--m-ahead); } .m-new { --m:var(--m-new); } .m-pace { --m:var(--m-pace); } .m-behind { --m:var(--m-behind); }
.m-absent { --m:var(--m-absent); } .m-unknown { --m:var(--m-unknown); }
.m-ahead { --mx:var(--mx-ahead); } .m-new { --mx:var(--mx-new); } .m-pace { --mx:var(--mx-pace); } .m-behind { --mx:var(--mx-behind); }
.m-absent { --mx:var(--mx-absent); } .m-unknown { --mx:var(--mx-unknown); }
main:has(#demoatlas) { max-width:none; }
body.demo main:has(#demoatlas) { padding:.8rem 1rem .8rem; max-width:none; }
#demoatlas .caption { max-width:none; margin-bottom:.9rem; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* the title with the controls on its right: the peer control, then the search */
#demoatlas .dhead { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.4rem 1.6rem; }
#demoatlas .dhead h1 { margin:.2rem 0 .3rem; }
#demoatlas .dctl { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin:0; }
#demoatlas .seg { display:inline-flex; align-items:stretch; gap:2px; padding:3px; border-radius:11px; background:var(--q-band); box-shadow:inset 0 0 0 1px var(--q-hair); }
#demoatlas .seg[hidden] { display:none; }
#demoatlas .seg button { background:transparent; color:var(--q-ink2); border:0; border-radius:8px; padding:.32rem .95rem; font:inherit; font-size:.95rem; font-weight:600; cursor:pointer; }
#demoatlas .seg button:hover { color:var(--q-ink); }
#demoatlas .seg button[aria-pressed="true"] { background:var(--q-surface); color:var(--q-ink); box-shadow:0 1px 2px rgba(0,0,0,.12), 0 0 0 1px var(--q-hair); }
#demoatlas .segsel { position:relative; display:inline-flex; }
#demoatlas .segsel select { appearance:none; -webkit-appearance:none; border:0; border-radius:8px; background:transparent; color:var(--q-ink2); font:inherit; font-size:.95rem; font-weight:600; padding:.32rem 2rem .32rem .9rem; width:13.5rem; text-overflow:ellipsis; cursor:pointer; }
#demoatlas .segsel::after { content:"▾"; position:absolute; right:.7rem; top:50%; transform:translateY(-52%); color:var(--q-muted); pointer-events:none; font-size:.85rem; }
#demoatlas .segsel.on select { background:var(--q-surface); color:var(--q-ink); box-shadow:0 1px 2px rgba(0,0,0,.12), 0 0 0 1px var(--q-hair); }
#demoatlas .dfind input { font:inherit; font-size:.95rem; width:17rem; max-width:100%; padding:.42rem .8rem; border:0; border-radius:10px; background:var(--q-surface); color:var(--q-ink); box-shadow:inset 0 0 0 1px var(--q-hair2); }
#demoatlas .dfind input:focus { outline:none; box-shadow:inset 0 0 0 2px var(--accent); }

/* the chart beside the reading */
#demoatlas .dgrid { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,360px); gap:20px; align-items:start; }
#demoatlas .dshow > summary { display:none; }
#demoatlas .dchart { margin:0; background:var(--q-surface); border-radius:14px; padding:16px 22px 14px; box-shadow:0 0 0 1px var(--q-hair); }
/* over the chart: whose view it is and how to read it, the colour key under that, the size key on the right */
#demoatlas .dfigcap { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:8px 28px; margin:0 0 2px; }
#demoatlas .dwholine { flex:1 1 560px; min-width:0; }
#demoatlas .dwho1 { font-size:.95rem; color:var(--q-muted); margin:0 0 6px; line-height:1.4; }
#demoatlas .dwho1 b { color:var(--q-ink); font-size:1.05rem; margin-right:.35rem; }
#demoatlas .dchartwrap { position:relative; }
#demoatlas svg.qchart { display:block; width:100%; height:auto; overflow:visible; font-family:inherit; }
.qchart .qband { fill:var(--q-band); }
.qchart .qmid { fill:var(--q-ink); fill-opacity:.04; }
.qchart .qgrid { stroke:var(--q-grid); stroke-width:1; shape-rendering:crispEdges; }
.qchart .qref { stroke:var(--q-ref); stroke-width:1; shape-rendering:crispEdges; }
.qchart .qaxis { stroke:var(--q-axis); stroke-width:1; shape-rendering:crispEdges; }
.qchart .qtick { font-size:13px; fill:var(--q-muted); font-variant-numeric:tabular-nums; }
.qchart .qbandl { font-size:12px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; fill:var(--q-muted); }
.qchart .qaxt { font-size:13px; fill:var(--q-muted); }
.qchart .qcorner { font-size:13px; font-weight:600; fill:var(--q-ink2); opacity:.78; }
.qchart .qfield { stroke:var(--q-ink2); stroke-width:1.5; }
.qchart .qfieldl { font-size:12.5px; font-weight:500; fill:var(--q-ink2); }
.qchart .qs { cursor:pointer; outline:none; transition:opacity .12s; }
.qchart .qs .dot { fill:var(--m); fill-opacity:.9; stroke:var(--q-surface); stroke-width:1.5; }
.qchart .qs.m-absent .dot { fill:var(--q-surface); fill-opacity:1; stroke:var(--m-absent); stroke-width:1.6; }
.qchart .qs .hit { fill:transparent; }
.qchart .qs .fring { fill:none; stroke:var(--q-ink2); stroke-width:1.7; stroke-dasharray:.1 3.6; stroke-linecap:round; }
.qchart .qclip { fill:var(--q-muted); }
.qchart .qs:hover .dot, .qchart .qs:focus-visible .dot, .qchart .qs.focus .dot { stroke:var(--q-ink); stroke-width:2.2; fill-opacity:1; }
.qchart .qs.pin .dot { stroke:var(--q-ink); stroke-width:2.8; fill-opacity:1; }
.qchart.focusing .qs:not(.focus):not(.pin) { opacity:.32; }
.qchart.searching .qs:not(.hit) { opacity:.16; }
.qchart.searching .ql:not(.hitl), .qchart.searching .qlead:not(.hitl) { opacity:.25; }
.qchart .ql { font-size:14px; font-weight:500; fill:var(--q-ink); paint-order:stroke; stroke:var(--q-surface); stroke-width:4px; stroke-linejoin:round; pointer-events:none; }
.qchart .qlead { stroke:var(--q-axis2); stroke-width:1; }
/* the people inside a circle (8 October 2026, third pass): the circle steps back to a tint of its momentum colour,
   its people are hexagons in a darker tone of it with a hairline edge in the panel's colour; a "+n" for those not
   drawn, or the count alone in a circle too small for them. They sit in a layer of their own over the circles
   (.qhx, one group per strand, dimmed and marked with its circle), packed clear of the circles drawn over theirs. */
.qchart .qs.hp .dot, .qchart .qs.hp:hover .dot, .qchart .qs.hp:focus-visible .dot, .qchart .qs.hp.focus .dot { fill-opacity:var(--q-dotx); }
.qchart .qs.hp.pin .dot { fill-opacity:calc(var(--q-dotx) + .08); }
/* the tint as an opaque colour where the browser can mix one, so the circles hide what lies under them as the
   full-colour circles did */
@supports (color: color-mix(in srgb, red 50%, white)) {
  .qchart .qs.hp .dot, .qchart .qs.hp:hover .dot, .qchart .qs.hp:focus-visible .dot, .qchart .qs.hp.focus .dot {
    fill:color-mix(in srgb, var(--m) calc(var(--q-dotx) * 100%), var(--q-surface)); fill-opacity:1; }
  .qchart .qs.hp.pin .dot { fill:color-mix(in srgb, var(--m) calc(var(--q-dotx) * 100% + 8%), var(--q-surface)); fill-opacity:1; }
}
.qchart .qhx { transition:opacity .12s; }
.qchart.focusing .qhx:not(.focus):not(.pin) { opacity:.32; }
.qchart.searching .qhx:not(.hit) { opacity:.16; }
.qchart.peer .qs, .qchart.peer .qhx { --mx:var(--q-peer); }
.qchart .hx { cursor:pointer; outline:none; }
.qchart .hx path { fill:var(--mx); stroke:var(--q-surface); stroke-width:.6; stroke-linejoin:round; }
.qchart .hx:hover path, .qchart .hx:focus-visible path, .qchart .hx.on path { stroke:var(--q-ink); stroke-width:1.6; }
.qchart .hx.on, .qchart .hx:focus-visible { filter:drop-shadow(0 0 1.5px var(--q-surface)); }
.qchart .hxn { font-size:10.5px; font-weight:700; fill:var(--mx); font-variant-numeric:tabular-nums; pointer-events:none; }
.qchart .hxn.s10 { font-size:9.5px; } .qchart .hxn.s9 { font-size:8.5px; }
.qchart .hxmore { font-size:9px; font-weight:650; fill:var(--mx); font-variant-numeric:tabular-nums; pointer-events:none; }
.qchart .hxmore.on { font-size:10px; text-decoration:underline; }
.qchart .hxtip { pointer-events:none; }
.qchart .hxtip rect { fill:var(--q-card); stroke:var(--q-hair2); stroke-width:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.12)); }
.qchart .hxtip text { font-size:13px; font-weight:600; fill:var(--q-ink); }
#demoatlas .lgsize .lghex { grid-column:2; align-self:start; max-width:23rem; margin-top:3px; line-height:1.4; color:var(--q-ink2); }
#demoatlas .lgsize .lgring { grid-column:2; }
#demoatlas .lhx { display:inline-block; vertical-align:-2px; margin-right:6px; overflow:visible; }
#demoatlas .lhx path { fill:var(--mx-ahead); stroke:var(--q-surface); stroke-width:.6; }
#demoatlas .lhx.peer path { fill:var(--q-peer); }
.dcard .dpeople li.on { background:var(--q-band); border-radius:4px; }

/* the keys and the note under the chart */
#demoatlas .dfoot { display:flex; gap:12px 28px; align-items:flex-start; margin:8px 0 0; padding-top:10px; border-top:1px solid var(--q-hair2); }
#demoatlas .dfoot .dnote { margin:0; flex:1 1 400px; }
#demoatlas .dlegend { flex:none; }
#demoatlas .lgsize { display:grid; grid-template-columns:auto auto; column-gap:12px; align-items:center; }
#demoatlas .lgsize .lsize { grid-row:1 / span 2; }
#demoatlas .lgsize .lgs { font-size:.82rem; color:var(--q-muted); align-self:end; }
#demoatlas .lgsize .lgring { align-self:start; margin-top:3px; }
#demoatlas .lgsize .lgs:only-of-type { grid-row:1 / span 2; align-self:center; }
#demoatlas .lsize { display:block; overflow:visible; }
#demoatlas .lsz { fill:none; stroke:var(--q-axis2); stroke-width:1.2; }
#demoatlas .lszl { stroke:var(--q-axis2); stroke-width:1; }
#demoatlas .lszt { font-size:12.5px; fill:var(--q-ink2); font-variant-numeric:tabular-nums; }
#demoatlas .lgsw { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 15px; font-size:.9rem; color:var(--q-ink2); }
#demoatlas .lgsw li { white-space:nowrap; }
#demoatlas .lgsw .lgk { color:var(--q-muted); margin-right:-6px; }
#demoatlas .lgsize .lgring { color:var(--q-ink2); }
.sw { display:inline-block; flex:none; width:12px; height:12px; border-radius:50%; background:var(--m); margin-right:7px; vertical-align:-1px; }
.sw.m-absent { background:transparent; box-shadow:inset 0 0 0 1.6px var(--m-absent); }
.sw.ring { background:transparent; border:2px dotted var(--q-ink2); }
#demoatlas .dnote { font-size:.86rem; color:var(--q-muted); margin:10px 0 0; line-height:1.5; }
@media (max-width:900px) { #demoatlas .dfoot { flex-wrap:wrap; } }
#demoatlas #dstatus { color:var(--q-muted); }
#demoatlas .dtable { margin:10px 0 0; }
#demoatlas .dtable > summary { cursor:pointer; color:var(--accent); font-size:.88rem; font-weight:600; }
#demoatlas .dtab { font-size:.86rem; background:transparent; margin-top:6px; }
#demoatlas .dtab th, #demoatlas .dtab td { border-bottom:1px solid var(--q-hair2); color:var(--q-ink); padding:.3rem .5rem; }
#demoatlas .dtab th { color:var(--q-muted); }

/* the card: on hover beside its circle, on a click it stays with a close button; on a phone under its line */
.dcard { position:absolute; z-index:6; width:370px; max-width:calc(100% - 8px); background:var(--q-card); color:var(--q-ink); border-radius:12px;
  box-shadow:var(--q-shadow), 0 0 0 1px var(--q-hair); padding:14px 16px 12px; font-size:.92rem; line-height:1.45; }
.dcard[hidden] { display:none; }
.dcard h3 { margin:0 26px 6px 0; font-size:1.1rem; line-height:1.3; }
.dcard p { margin:0 0 6px; }
.dcard .cclose { position:absolute; top:6px; right:6px; width:28px; height:28px; padding:0; border:0; border-radius:14px; background:transparent; color:var(--q-muted); font-size:1.25rem; line-height:1; cursor:pointer; }
.dcard .cclose:hover { background:var(--q-band); color:var(--q-ink); }
.dcard:not(.pinned):not(.dinline) .cclose { display:none; }
.dcard .tag { font-size:.72rem; border:1px solid var(--q-hair2); border-radius:8px; padding:0 6px; margin-left:6px; color:var(--q-muted); font-weight:400; vertical-align:2px; }
.dcard .copen a { font-weight:600; }
.dcard .cdesc { color:var(--q-ink2); }
.dcard .cgrow { color:var(--q-ink2); }
.dcard .cgrow { margin:0; }
.dcard .cgrow .gw { color:var(--q-ink); text-transform:capitalize; margin-right:.25rem; }
.dcard .cnums { color:var(--q-muted); font-size:.86rem; font-variant-numeric:tabular-nums; }
.dcard .cmom { display:flex; align-items:baseline; color:var(--q-ink); }
.dcard .cmom .sw { margin-top:.2em; }
.dcard .cpres { color:var(--q-ink2); }
.dcard .cfund { color:var(--q-ink2); padding:4px 0 4px 10px; border-left:2px solid var(--q-axis); }
.dcard .fmarkt { color:var(--q-ink); font-weight:600; }
.dcard .ckv { display:grid; grid-template-columns:max-content 1fr; gap:1px 10px; margin:8px 0 4px; font-size:.88rem; }
.dcard .ckv dt { text-align:right; font-weight:650; font-variant-numeric:tabular-nums; }
.dcard .ckv dd { margin:0; color:var(--q-muted); }
.dcard h4 { margin:10px 0 4px; font-size:.95rem; display:flex; justify-content:space-between; align-items:baseline; }
.dcard h4 .cnt { color:var(--q-muted); font-weight:600; font-variant-numeric:tabular-nums; }
.dcard .cpeople { max-height:210px; overflow-y:auto; margin-right:-6px; padding-right:6px; }
.dcard .cnone { color:var(--q-muted); font-size:.85rem; }
.dcard .dpeople { list-style:none; margin:0; padding:0; }
.dcard .dpeople li { display:grid; grid-template-columns:2.4em minmax(0,1fr); column-gap:.5em; margin:2px 0; align-items:baseline; }
.dcard .dpeople .w19 { text-align:right; font-variant-numeric:tabular-nums; font-weight:650; }
.dcard .dpeople .pm { grid-column:2; font-size:.8rem; color:var(--q-muted); line-height:1.25; }
.dcard .snsf { font-size:.7rem; border:1px solid #7a9c6b; color:#3e6b2c; border-radius:6px; padding:0 4px; }
.dcard.dinline { position:relative; left:auto; top:auto; width:auto; max-width:none; margin:6px 0 10px; box-shadow:0 0 0 1px var(--q-hair2); }

/* the ranked reading: three groups, each line a strand with its population and the side's people */
#demoatlas .dpanel { position:sticky; top:calc(var(--hdr, 60px) + 12px); max-height:calc(100vh - var(--hdr, 60px) - 24px); overflow-y:auto;
  background:var(--q-surface); color:var(--q-ink); border-radius:14px; padding:16px 16px 12px; box-shadow:0 0 0 1px var(--q-hair); }
#demoatlas .rhead h2 { margin:0 0 2px; font-size:1.2rem; }
#demoatlas .rhead p { margin:0 0 14px; color:var(--q-muted); font-size:.86rem; line-height:1.4; }
#demoatlas .rg { margin:0 0 16px; padding-left:12px; border-left:3px solid var(--g); }
#demoatlas .rg-missing { --g:var(--flag-missing); } #demoatlas .rg-strong { --g:var(--flag-strong); } #demoatlas .rg-losing { --g:var(--flag-losing); }
#demoatlas .rg h3 { margin:0; font-size:1rem; line-height:1.3; display:flex; justify-content:space-between; gap:.6rem; align-items:baseline; }
#demoatlas .rg .rn { flex:none; font-size:.85rem; font-weight:650; color:var(--q-ink2); background:var(--q-band); border-radius:10px; padding:0 .55rem; font-variant-numeric:tabular-nums; }
#demoatlas .rsub { margin:2px 0 6px; font-size:.8rem; color:var(--q-muted); line-height:1.35; }
#demoatlas .rlist { list-style:none; margin:0; padding:0; }
#demoatlas .ri { display:grid; grid-template-columns:12px minmax(0,1fr); column-gap:9px; width:100%; text-align:left; background:transparent; color:var(--q-ink);
  border:0; border-radius:7px; padding:5px 6px; margin:0 0 1px -6px; font:inherit; cursor:pointer; }
#demoatlas .ri .sw { grid-row:1 / span 2; margin:.38em 0 0; }
#demoatlas .ri .rt { font-size:.95rem; font-weight:560; line-height:1.3; }
#demoatlas .ri .rv { grid-column:2; font-size:.82rem; color:var(--q-muted); font-variant-numeric:tabular-nums; }
#demoatlas .ri .ru { color:var(--q-muted); }
#demoatlas .ri:hover, #demoatlas .ri.on { background:var(--q-band); }
#demoatlas .ri:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
#demoatlas .rmore { background:transparent; border:0; color:var(--accent); padding:2px 0; font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; }
#demoatlas .rnone { margin:2px 0; color:var(--q-muted); font-size:.86rem; }
#demoatlas .rnote { font-size:.8rem; color:var(--q-muted); margin:6px 0 0; }
#demoatlas .primer { border-top:1px solid var(--q-hair2); padding-top:10px; margin-top:4px; font-size:.92rem; color:var(--q-ink2); }
#demoatlas .primer h3 { margin:0 0 4px; font-size:.95rem; color:var(--q-ink); }

/* the boxes under the chart: works per year, careers, grants */
#demoatlas .dbox, #atlasmore .dbox { background:var(--q-surface); color:var(--q-ink); border:0; box-shadow:0 0 0 1px var(--q-hair); border-radius:12px; padding:12px 16px; }
#demoatlas .dbox[hidden] { display:none; }
#demoatlas .small { font-size:.85rem; } #demoatlas .dim { color:var(--q-muted); } #demoatlas .warn { color:#9a4b40; }
#demoatlas .dcharts { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:16px; margin-top:20px; align-items:start; }
#demoatlas .dcharts.with-careers { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
#demoatlas .dcharts.with-careers .dwide { grid-column:1 / -1; }
#demoatlas .dcharts .fundgrid { grid-template-columns:1fr 1fr; gap:18px; }
#demoatlas .fundchart { max-width:560px; }
#demoatlas .fundhead { font-size:1.02rem; margin:0 0 4px; }
#demoatlas .fundcap { font-size:.92rem; }
#demoatlas .fundlegend { font-size:.85rem; }
#demoatlas .fundbox .small { font-size:.85rem; }
#demoatlas .trendchart .tbase { stroke:var(--q-axis); stroke-width:1; }
#demoatlas .trendchart .tt { font-size:10px; fill:var(--q-muted); }
#demoatlas .trendchart polyline { fill:none; stroke-width:2.2; }
#demoatlas .trendchart polyline.part { stroke-width:1.6; stroke-dasharray:3 3; }
#demoatlas .trendchart .tl-field { stroke:#6b6963; } #demoatlas .trendchart .tl-uzh { stroke:#2b5c8a; } #demoatlas .trendchart .tl-other { stroke:#c46a1c; }
/* careers: two short ranked lists side by side */
#demoatlas .cflows { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
#demoatlas .clist { margin:.2rem 0 .4rem; padding-left:1.3rem; font-size:.95rem; }
#demoatlas .clist li { display:flex; justify-content:space-between; gap:.6rem; }
#demoatlas .clist li b { font-variant-numeric:tabular-nums; }
#demoatlas .ctti { margin:.5rem 0 .2rem; }

/* behind "more": the citation map, the light atlas's map, kept for the owner's own use */
#atlasmore .dcite { margin:0 0 1.2rem; }
#atlasmore .dcitewrap { position:relative; }
#atlasmore #dcitesvg { width:100%; height:auto; max-height:80vh; display:block; }
#dcitesvg .st { cursor:pointer; outline:none; }
#dcitesvg .st circle { stroke:#b9b3a4; stroke-width:1; }
#dcitesvg .st.none circle { stroke:#a8a49a; }
#dcitesvg .st:hover circle, #dcitesvg .st:focus circle { stroke:#1d1d1b; stroke-width:2.2; }
#dcitesvg .st .cnt { font-size:18px; font-weight:700; fill:#1d1d1b; pointer-events:none; }
#dcitesvg .st .lbl { font-size:16px; fill:#2f2e2a; paint-order:stroke; stroke:#fff; stroke-width:3px; stroke-linejoin:round; pointer-events:none; }
#dcitesvg .st.quiet .lbl { display:none; }
#dcitesvg .st.quiet:hover .lbl, #dcitesvg .st.quiet:focus .lbl { display:inline; }
#dcitesvg .st .fmark { font-size:13px; font-weight:600; fill:#8a3b12; paint-order:stroke; stroke:#fff; stroke-width:3px; pointer-events:none; }
#demoatlas #dmap #dcitesvg { width:100%; height:auto; display:block; }

@media (max-width:1100px) {
  #demoatlas .dgrid { grid-template-columns:1fr; }
  #demoatlas .dpanel { position:static; max-height:none; }
}
/* a phone: the reading is the view, the chart waits behind "show the chart" */
@media (max-width:760px) {
  body.demo main:has(#demoatlas) { padding:.8rem .8rem; }
  #demoatlas .dgrid { display:flex; flex-direction:column-reverse; gap:12px; }
  #demoatlas .dshow > summary { display:inline-block; cursor:pointer; list-style:none; color:var(--accent); font-weight:600; padding:.35rem .9rem; border-radius:16px; box-shadow:inset 0 0 0 1px var(--accent); background:var(--q-surface); }
  #demoatlas .dshow > summary::-webkit-details-marker { display:none; }
  #demoatlas .dshow[open] > summary { margin-bottom:.6rem; }
  #demoatlas .dchart { padding:10px 10px 10px; }
  #demoatlas .dctl { gap:.5rem; }
  #demoatlas .dhead, #demoatlas .dctl { width:100%; }
  #demoatlas .seg { display:flex; flex-wrap:wrap; width:100%; }
  #demoatlas .seg button { flex:1 1 auto; }
  #demoatlas .segsel { flex:1 1 100%; }
  #demoatlas .segsel select { width:100%; }
  #demoatlas .dfind, #demoatlas .dfind input { width:100%; }
  #demoatlas .dcharts, #demoatlas .dcharts.with-careers, #demoatlas .dcharts .fundgrid, #demoatlas .cflows { grid-template-columns:1fr; }
  #demoatlas .lgsize { grid-template-columns:auto; }
  #demoatlas .lgsize .lsize { grid-row:auto; }
  #demoatlas .lgsize .lghex, #demoatlas .lgsize .lgring { grid-column:auto; max-width:none; }
  #demoatlas .dlegend { flex:1 1 100%; min-width:0; }
  #demoatlas .ri .rt { font-size:1rem; }
}
/* the ERC panel list in the atlas's "more" */
.ercpanels { margin:0 0 1.2rem; }
.ercpanels table.erc { font-size:.92rem; }

/* ---- the dark theme of the chart pages in demo mode (prefers-color-scheme): the chart, the reading, the card,
   the boxes under them and the page around them; what is behind "more" (the full atlas) stays on its light ground.
   The momentum hues are the same four, stepped for the dark surface. ------------------------------------------- */
@media (prefers-color-scheme: dark) {
  body.demo:has(#demoatlas) { color-scheme:dark; --ink:#e9e7e2; --dim:#a3a09a; --line:#2e2f34; --bg:#111214; --card:#1b1c1f; --accent:#8db3e2; background:#111214; color:#e9e7e2; }
  body.demo:has(#demoatlas) header.top { background:#17181b; border-bottom-color:#26272b; }
  body.demo:has(#demoatlas) nav.views a:hover { background:#24262b; color:#cfe0f5; }
  body.demo:has(#demoatlas) nav.views a.cur { background:#8db3e2; color:#0f1f33; }
  body.demo:has(#demoatlas) header.top .demobtn { background:#1b1c1f; color:#d8d6d0; border-color:#34353a; }
  body.demo:has(#demoatlas) .demoswitch.on { color:#0f1f33; }
  body.demo:has(#demoatlas) .demoswitch.on .demoexit { color:#0f1f33; }
  body.demo:has(#demoatlas) .caption { color:#b9b6af; }
  body.demo:has(#demoatlas) footer { color:#8e8b85; }
  body.demo:has(#demoatlas) details.more > summary { background:#1b1c1f; }
  body.demo:has(#demoatlas) details.more > summary:hover { background:#24262b; }
  body.demo:has(#demoatlas) details.more[open] { color-scheme:light; --ink:#1b1b1b; --dim:#666; --line:#ddd; --card:#fff; --accent:#1f4e79; background:#fafaf8; color:#1b1b1b; border-radius:14px; padding:.6rem 1rem 1rem; }
  body.demo:has(#demoatlas) details.more[open] > summary { background:#fff; }
  #demoatlas {
    --q-surface:#1b1c1f; --q-card:#222327; --q-ink:#ecebe7; --q-ink2:#c9c6bf; --q-muted:#9c9992;
    --q-hair:rgba(255,255,255,.08); --q-hair2:#2f3035; --q-band:#232428; --q-grid:#2a2b30; --q-ref:#6c6a65; --q-axis:#45464c; --q-axis2:#77746e;
    --m-ahead:#467cc0; --m-new:#48b7c2; --m-pace:#4e5966; --m-behind:#d8714c; --m-absent:#6f767e; --m-unknown:#2e3035;
    --flag-missing:#e0675f; --flag-strong:#5fae63; --flag-losing:#d9a43c;
    --q-shadow:0 12px 32px rgba(0,0,0,.5);
    --mx-ahead:#a3c4ef; --mx-new:#8fdbe2; --mx-pace:#b4bec9; --mx-behind:#f4ac8e; --mx-absent:#a7adb4; --mx-unknown:#8f959c;
    --q-peer:#eb9a62; --q-dotx:.36;
  }
  #demoatlas .dcard .snsf { border-color:#6f9a5c; color:#9fcf8a; }
  /* the slate neutral recedes into the dark panel by design; a hairline keeps its edge */
  #demoatlas .qchart .qs.m-pace .dot { stroke:rgba(255,255,255,.2); stroke-width:1; }
  #demoatlas .sw.m-pace { box-shadow:0 0 0 1px rgba(255,255,255,.22); }
  #demoatlas .trendchart .tl-field { stroke:#9c9992; } #demoatlas .trendchart .tl-uzh { stroke:#7aa7d9; } #demoatlas .trendchart .tl-other { stroke:#e08a4f; }
  #demoatlas .fundlegend { color:#a3a09a; }
  #demoatlas .fundlegend .k-uzh { background:#7aa7d9; } #demoatlas .fundlegend .k-other { background:#e08a4f; } #demoatlas .fundlegend .k-field { background:#9c9992; }
  #demoatlas .fundlegend .k-inc { background:#2c2d31; } #demoatlas .fundlegend .k-gap { background:#4a2c29; }
  /* the grants charts (static/funding.js) carry their colours as SVG attributes; CSS wins over those */
  #demoatlas .fundbox svg text { fill:#a3a09a; }
  #demoatlas .fundbox svg [stroke="#c9c3b3"] { stroke:#45464c; }
  #demoatlas .fundbox svg [stroke="#2b5c8a"] { stroke:#7aa7d9; } #demoatlas .fundbox svg [fill="#2b5c8a"] { fill:#7aa7d9; }
  #demoatlas .fundbox svg [stroke="#c46a1c"] { stroke:#e08a4f; } #demoatlas .fundbox svg [fill="#c46a1c"] { fill:#e08a4f; }
  #demoatlas .fundbox svg [fill="#f3dcd8"] { fill:#4a2c29; } #demoatlas .fundbox svg [fill="#ece9e2"] { fill:#2c2d31; }
  #demoatlas .fundbox svg [fill="#fff"] { fill:#1b1c1f; }
  #demoatlas .fundbox svg text[fill="#9a4b40"] { fill:#e3958b; }
  #demoatlas a { color:#8db3e2; }
}

/* ---- the Strukturbericht page in demo mode: one profile, its footprint, its funnel, its pool ---------------- */
.pfocus .pchoose { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:0 0 1.2rem; }
.pfocus .pchoose select { font:inherit; font-size:.95rem; padding:4px 8px; border:1px solid #c9c3b3; border-radius:6px; background:#fff; max-width:100%; }
.pfocus .pchoose button { font-size:.9rem; padding:.3rem .8rem; }
.pfocus .pmeta { color:#4a4843; margin:0 0 .3rem; }
.pfocus > section { background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 18px; margin:0 0 1.1rem; }
.pfocus > section h2 { margin:0 0 .4rem; font-size:1.2rem; }
.pfocus > section .briefdoc section { margin:0; }
.pfocus table.foot { width:100%; border-collapse:collapse; font-size:.98rem; background:transparent; }
.pfocus table.foot td, .pfocus table.foot th { padding:.35rem .5rem; border-bottom:1px solid #ecebe6; vertical-align:middle; }
.pfocus table.foot svg.fbar { width:100%; max-width:260px; height:14px; display:block; }
.pfocus .pool td.cf { color:#8a3b12; }
.pfocus .briefdoc { border:0; padding:0; background:transparent; font-size:inherit; }
.pfocus .briefdoc h2 { border:0; padding:0; }
@media (max-width:760px) { .pfocus table.foot .fb { display:none; } .pfocus > section { padding:10px 12px; } }

/* ---- the briefs page in demo mode: the brief itself ----------------------------------------------------------- */
body.demo .briefdoc { font-size:17px; line-height:1.6; }
body.demo .briefdoc h1 { font-size:1.8rem; }
body.demo .briefdoc h2 { font-size:1.25rem; }
body.demo main:has(.briefwrap) { max-width:none; }
@media (max-width:760px) { body.demo .briefdoc h1 { font-size:1.4rem; } body.demo .briefdoc { padding:.9rem .9rem 1.2rem; } }

/* ---- findings in demo mode: the findings themselves --------------------------------------------------------- */
.dfindings { list-style:none; padding:0; margin:0 0 1rem; counter-reset:f; max-width:900px; }
.dfindings li { counter-increment:f; position:relative; padding:12px 16px 12px 58px; margin:0 0 12px; border:1px solid #e1ddd2; border-radius:10px; background:#fffdf8; }
.dfindings li::before { content:counter(f); position:absolute; left:16px; top:14px; width:28px; height:28px; border-radius:14px; background:#1d1d1b; color:#fff; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; }
.dfindings .head { font-size:1.12rem; font-weight:700; line-height:1.4; }
.dfindings .meaning { margin-top:.35rem; }
.dfindings .foot { margin-top:.35rem; font-size:.92rem; }

/* ---- sources in demo mode: the list itself -------------------------------------------------------------------- */
.dsources { list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:10px; max-width:980px; }
.dsources li { background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 16px; }
.dsources .sname { font-weight:700; }
.dsources .swhat { color:#3b3a36; }

/* ---- the person page: the reading, the career line, demo's split ------------------------------------------------ */
#person .reading { background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 16px; margin:.4rem 0 .8rem; }
#person .reading p { margin:.2rem 0 .5rem; }
#person .reading .prov { font-size:.85rem; color:#6b6963; }
#person ol.career { list-style:none; margin:.4rem 0 .6rem; padding:0 0 0 18px; border-left:2px solid #c9c3b3; }
#person ol.career li { position:relative; margin:0 0 .45rem; line-height:1.4; }
#person ol.career li::before { content:""; position:absolute; left:-24px; top:.45em; width:10px; height:10px; border-radius:5px; background:#fff; border:2px solid var(--accent); }
#person ol.career li.k-doctorate::before { background:var(--accent); }
#person ol.career li.k-grant::before { border-color:#3e6b2c; }
#person ol.career .yr { display:inline-block; min-width:3.2em; font-variant-numeric:tabular-nums; font-weight:600; }
#person ol.career .kind { font-size:.8rem; color:#6b6963; }
body.demo #person { max-width:none; }
body.demo #person h2 { font-size:1.3rem; margin:1.4rem 0 .4rem; }
body.demo #person .kv, body.demo #person table, body.demo #person ul.works li { font-size:1rem; }

/* the strand's details in the side column (8 October 2026): the card sits above the ranked reading, in flow */
.dside { display:flex; flex-direction:column; gap:12px; min-width:0; }
.ddetail[hidden] { display:none; }
.ddetail .dcard { position:static; width:auto; max-width:none; box-shadow:none; border:1px solid var(--q-hair); border-left:4px solid var(--q-accent, #23538e); }
/* the field measure (web/atlas_measure.py, 12 November 2026): a strand under 100 listed articles (no rank there), or on
   the overview a field where UZH has no rank or no measure is adopted, is drawn hollow, its ring in its momentum colour */
.qchart .qs.hollow .dot, .qchart .qs.hollow.hp .dot { fill:var(--q-surface); fill-opacity:1; stroke:var(--m); stroke-width:1.8; stroke-dasharray:3 2; }
#demoatlas .lgsize .lghollow { grid-column:2; color:var(--q-ink2); display:flex; align-items:center; gap:.35rem; }
#demoatlas .lhollow { fill:none; stroke:var(--q-axis2); stroke-width:1.4; stroke-dasharray:3 2; }
#demoatlas .cmeasure { margin:.35rem 0; }
#demoatlas .clead { margin:.2rem 0 .5rem; font-size:.86rem; color:var(--q-ink2); }