/*
 * The connectome's big graph (index.html). One accent, and it means one thing: gold is a Permanent Release,
 * on a line between pickers or round a circle that is a piece of music.
 * Everything else is ink on paper. The same marks are on the musician pages' cards
 * (ext.pickipediaContent.connectome.css) and in Rabbithole's "Your rabbithole".
 *
 * One more colour, and it's a button, not a mark: green is the way into Rabbithole to play a track (the
 * wiki's own green for it, as on a song page's "On the record" row).
 */
:root {
	color-scheme: light dark;
	--surface: #fcfcfb;
	--plane: #f9f9f7;
	--ink: #0b0b0b;
	--ink2: #52514e;
	--muted: #898781;
	--hair: #e1e0d9;
	--axis: #c3c2b7;
	--gold: #eda100;
	--gold-wash: #fdf1cf;
	--link: #0645ad;
	--play: #4a7c59;
	--play-on: #3c6749;
	--ui: system-ui, -apple-system, "Segoe UI", sans-serif;
	--name: Georgia, "Times New Roman", serif;
	--hover: #f0efec;
	--halo: rgba( 11, 11, 11, 0.07 );
	--lift: rgba( 11, 11, 11, 0.14 );
}

/*
 * By night: the reader's system, unless they chose on the wiki (the cookie "pickipedia-mode", which
 * index.html reads into pp-dark or pp-light on <html> before anything paints; the wiki's own pages read
 * the same one, and Rabbithole will). The night's paper and ink are the wiki's
 * (extensions/PickiPediaContent/resources/night/night.less). Gold stays gold: it is the one mark that
 * means something, and it is as bright on dark paper as on light. A browser without light-dark() gets
 * the day, written out above.
 */
@supports ( color: light-dark( #000, #fff ) ) {
	:root {
		--surface: light-dark( #fcfcfb, #211c22 );
		--plane: light-dark( #f9f9f7, #18151a );
		--ink: light-dark( #0b0b0b, #ece3d8 );
		--ink2: light-dark( #52514e, #cfc4b8 );
		--muted: light-dark( #898781, #a2978c );
		--hair: light-dark( #e1e0d9, #3a323b );
		--axis: light-dark( #c3c2b7, #5a4f5c );
		--gold-wash: light-dark( #fdf1cf, #4a3a12 );
		--link: light-dark( #0645ad, #8fb1f2 );
		--hover: light-dark( #f0efec, #2f2832 );
		--halo: light-dark( rgba( 11, 11, 11, 0.07 ), rgba( 236, 227, 216, 0.12 ) );
		--lift: light-dark( rgba( 11, 11, 11, 0.14 ), rgba( 0, 0, 0, 0.5 ) );
	}
}
:root.pp-dark { color-scheme: dark; }
:root.pp-light { color-scheme: light; }

* { box-sizing: border-box; }

html, body {
	height: 100%;
	margin: 0;
}

body {
	display: flex;
	flex-direction: column;
	background: var( --surface );
	color: var( --ink );
	font: 14px/1.4 var( --ui );
}

.vh {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
}

a { color: var( --link ); }

/* A picker with no page yet: still a link (it's how a page gets started), but it doesn't shout. */
a.new {
	color: var( --ink );
	text-decoration-style: dotted;
}

/* ---- the bar: who is on, and where you've been ---- */
.bar {
	display: flex;
	flex: none;
	gap: 8px;
	align-items: center;
	padding: 6px 12px;
	border-bottom: 1px solid var( --hair );
	background: var( --plane );
}

.bar input {
	width: 13.5em;
	max-width: 34vw;
	padding: 4px 8px;
	border: 1px solid var( --axis );
	border-radius: 6px;
	background: var( --surface );
	color: var( --ink );
	font: 600 14px var( --name );
}

.bar input:focus-visible,
button:focus-visible,
#g [tabindex]:focus-visible {
	outline: 2px solid var( --link );
	outline-offset: 2px;
}

.bar .join { color: var( --muted ); }

#back {
	padding: 2px 9px;
	border: 1px solid var( --axis );
	border-radius: 6px;
	background: var( --surface );
	color: var( --ink );
	font: 16px var( --ui );
	cursor: pointer;
}

#crumbs {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	color: var( --ink2 );
	font-size: 12px;
	text-align: right;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#crumbs button {
	padding: 0;
	border: 0;
	background: none;
	color: var( --ink2 );
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* ---- the stage ---- */
main {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
}

#stage {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
}

#say {
	flex: none;
	padding: 12px 18px 0;
}

#say h1 {
	margin: 0;
	font: 700 22px/1.2 var( --name );
}

#say h1 a {
	color: inherit;
	text-decoration: none;
}

#say h1 a:hover,
#say h1 a:focus {
	color: var( --link );
	text-decoration: underline;
}

#say p {
	margin: 3px 0 0;
	color: var( --ink2 );
}

#say p b {
	color: var( --ink );
	font-weight: 600;
}

#g {
	display: block;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	user-select: none;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

#wait {
	position: absolute;
	inset: 40% 0 auto;
	color: var( --ink2 );
	text-align: center;
}

#legend {
	display: flex;
	flex: none;
	flex-wrap: wrap;
	gap: 3px 18px;
	padding: 6px 18px 8px;
	border-top: 1px solid var( --hair );
	color: var( --ink2 );
	font-size: 12px;
}

#legend .lg { white-space: nowrap; }
#legend svg { vertical-align: -1px; }
#legend a { color: inherit; }

/* ---- lines: music between pickers ---- */
.glow {
	fill: none;
	stroke: var( --gold );
	stroke-linecap: round;
	stroke-width: 8;
	opacity: 0.6;
}

.core {
	fill: none;
	stroke-linecap: round;
	stroke-width: 2;
}

.core.t2 { stroke: var( --ink ); }
.core.t1 { stroke: var( --ink2 ); }

.core.t0 {
	stroke: var( --muted );
	stroke-dasharray: 1 5;
}

.thread {
	fill: none;
	stroke: var( --gold );
	stroke-linecap: round;
}

.ln .hit {
	fill: none;
	stroke: transparent;
	stroke-width: 16;
	pointer-events: stroke;
	cursor: pointer;
}

.ln { transition: opacity 0.12s; }
.ln.quiet { pointer-events: none; }
.ln.hot { opacity: 1; }

/* The web among those round the middle, the ways on a step further, the thin lines to the rest of the company:
   the same marks, thin and behind; plain when either end is pointed at. */
.ln.fine.hot .thread,
.ln.fine.hot .core { stroke-width: 2.6px; }

/* A picker's own picture in their circle: the ring is drawn again over its edge. */
.pk .ring.rim { fill: none; }
.pk image.face { pointer-events: none; }

/* What a line is, said only while its far end is pointed at or touched. */
.pill.shy { pointer-events: none; }
.pill.shy.hot { opacity: 1; }

/* The one in the middle is named over whatever runs under the name: more paper round the letters. */
.pk.subject text,
.pk.song text { stroke-width: 6px; }
.pk.song text { font-size: 17px; }

/* What kind of thing a headline names, when it isn't a picker. */
#say .kind svg { vertical-align: -2px; margin-right: 6px; }

/* A picker a step further out: a small dot, and a name in lighter type than the company's. */
.pk.far text { font-weight: 400; font-size: 13px; }

/* ---- pickers ---- */
.dot {
	fill: var( --ink );
	stroke: var( --surface );
	stroke-width: 2;
}

.dot.hollow {
	fill: var( --surface );
	stroke: var( --ink );
	stroke-width: 1.5;
}

.dot.big { stroke-width: 2; }

.pk { cursor: pointer; }
.pk .halo { fill: transparent; }

.pk .ring {
	fill: var( --surface );
	stroke: var( --ink );
	stroke-width: 2;
}

.pk.subject .ring { stroke-width: 2.5; }

.pk.hot .ring,
.pk.lit .ring {
	stroke-width: 3.5;
}

.pk.hot .dot { stroke: var( --ink ); stroke-width: 1.5; }
.pk.hot .dot.hollow { stroke-width: 2.5; }

.pk text {
	font: 700 14px var( --name );
	fill: var( --link );
	paint-order: stroke;
	stroke: var( --surface );
	stroke-width: 4px;
	stroke-linejoin: round;
}

.pk.nopage text { fill: var( --ink ); }
.pk.subject text { font-size: 17px; }
.pk a:hover text,
.pk a:focus text { text-decoration: underline; }

.pk .rab { fill: var( --ink ); }
.pk .rab .eye { fill: var( --surface ); }

/* ---- music: a track, a record, a show ---- */
.pill { cursor: pointer; }

.pill rect {
	fill: var( --surface );
	stroke: var( --ink2 );
	stroke-width: 1;
}

.pill.t2 rect {
	fill: var( --gold-wash );
	stroke: var( --gold );
	stroke-width: 1.5;
}

.pill.t0 rect {
	stroke: var( --muted );
	stroke-dasharray: 2 3;
}

.pill text {
	font: 600 12.5px var( --ui );
	fill: var( --ink );
}

.pill.more text { font-weight: 400; fill: var( --ink2 ); }
.pill.more rect { fill: var( --surface ); stroke: var( --axis ); stroke-width: 1; }
.pill.hot rect, .pill.lit rect { stroke: var( --ink ); stroke-width: 2; }

.gl { fill: none; stroke: var( --ink ); stroke-width: 1.3; }
.gl .f { fill: var( --ink ); stroke: none; }

/* ---- the note beside the pointer ---- */
#tip {
	position: absolute;
	z-index: 5;
	max-width: 290px;
	padding: 6px 9px;
	border: 1px solid var( --axis );
	border-radius: 6px;
	background: var( --surface );
	box-shadow: 0 3px 12px var( --lift );
	color: var( --ink2 );
	font-size: 12.5px;
	pointer-events: none;
}

#tip b {
	display: block;
	color: var( --ink );
	font: 700 14px var( --name );
}

#tip .do {
	display: block;
	margin-top: 3px;
	color: var( --muted );
}

/* ---- the drawer: the list folds away at any width, and the graph takes the room (Justin, #connectome,
   15 Nov 2026). Beside the graph it is a strip down the list's edge; under it, a bar across. ---- */
#drawer {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 22px;
	padding: 0;
	border: 0;
	border-left: 1px solid var( --hair );
	background: var( --plane );
	color: var( --ink2 );
	font: 700 15px var( --ui );
	cursor: pointer;
}
#drawer:hover { background: var( --hover ); color: var( --ink ); }
#drawer:focus-visible { outline: 2px solid var( --link ); outline-offset: -2px; }
#drawer .word { display: none; }
main.shut #panel { display: none; }

/* ---- the panel: the same, as a list a reader can check ---- */
#panel {
	flex: none;
	width: 330px;
	overflow-y: auto;
	padding: 12px 14px 20px;
	border-left: 1px solid var( --hair );
	background: var( --plane );
}

#panel h2 {
	margin: 0 0 2px;
	font: 700 17px/1.25 var( --name );
}

#panel h3 {
	margin: 16px 0 5px;
	color: var( --ink2 );
	font: 600 11.5px var( --ui );
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

#panel h3.row {
	display: flex;
	gap: 8px;
	align-items: baseline;
	justify-content: space-between;
}

#panel .mini {
	flex: none;
	padding: 1px 7px;
	border: 1px solid var( --axis );
	border-radius: 6px;
	background: var( --surface );
	color: var( --ink );
	font: 12px var( --ui );
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

#panel p { margin: 4px 0; }
#panel .sub { color: var( --ink2 ); }

#panel ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#panel li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	padding: 6px 6px;
	border-radius: 6px;
}

#panel li + li { border-top: 1px solid var( --hair ); }
#panel li.go { cursor: pointer; }
#panel li.go:hover, #panel li.hot { background: var( --hover ); }
#panel li .mark { flex: none; width: 18px; margin-top: 2px; }
#panel li .body { flex: 1 1 auto; min-width: 0; }
#panel li .t { font-weight: 600; }
#panel li .s { color: var( --ink2 ); font-size: 12.5px; overflow-wrap: anywhere; }
#panel li .n { flex: none; color: var( --ink2 ); font-size: 12.5px; text-align: right; white-space: nowrap; }
#panel .who { font: 700 14px var( --name ); }

.badge {
	display: inline-block;
	padding: 0 6px;
	border: 1px solid var( --axis );
	border-radius: 9px;
	color: var( --ink2 );
	font-size: 11px;
	white-space: nowrap;
}

.badge.t2 {
	border-color: var( --gold );
	background: var( --gold-wash );
	color: var( --ink );
}

.acts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 2px;
}

.acts a, .acts button {
	padding: 3px 9px;
	border: 1px solid var( --axis );
	border-radius: 6px;
	background: var( --surface );
	color: var( --ink );
	font: 13px var( --ui );
	text-decoration: none;
	cursor: pointer;
}

.acts a.page { border-color: var( --link ); color: var( --link ); }
.acts a.page.new { border-color: var( --axis ); color: var( --ink ); }
.acts a:hover, .acts button:hover { background: var( --hover ); }

#panel .foot {
	margin-top: 18px;
	color: var( --muted );
	font-size: 12px;
}

#panel table { width: 100%; border-collapse: collapse; }
#panel td { padding: 4px 6px; border-top: 1px solid var( --hair ); }
#panel td.num { width: 3em; font-weight: 700; text-align: center; }
#panel tr.go { cursor: pointer; }
#panel tr.go:hover { background: var( --hover ); }

/* ---- the way into Rabbithole: a rabbit and a play mark, green, beside a track's name ---- */
#g a.play rect {
	fill: var( --play );
	stroke: none;
}

#g a.play:hover rect,
#g a.play:focus rect {
	fill: var( --play-on );
}

.pm .rab,
#g a.play .rab,
.tri {
	fill: #fff;
}

.pm .rab .eye,
#g a.play .rab .eye {
	fill: var( --play );
}

a.play {
	display: inline-flex;
	align-items: center;
	margin-left: 6px;
	padding: 1px 3px;
	border-radius: 11px;
	background: var( --play );
	line-height: 0;
	vertical-align: middle;
}

a.play:hover,
a.play:focus {
	background: var( --play-on );
}

/* ---- the sheet: what a finger touched, and the ways on from it ---- */
#sheet {
	position: absolute;
	right: 8px;
	bottom: 8px;
	left: 8px;
	z-index: 6;
	max-width: 440px;
	margin: 0 auto;
	padding: 10px 12px 12px;
	border: 1px solid var( --axis );
	border-radius: 12px;
	background: var( --surface );
	box-shadow: 0 6px 24px var( --lift );
	color: var( --ink2 );
	font-size: 14px;
	overflow: auto;                 /* never taller than the room beside what it's about (openSheet) */
}

#sheet[ hidden ] { display: none; }

#sheet.up {
	top: 8px;
	bottom: auto;
}

#sheet .x {
	float: right;
	width: 42px;
	height: 42px;
	margin: -7px -9px 0 6px;
	border: 0;
	background: none;
	color: var( --ink );
	font: 28px/1 var( --ui );
	cursor: pointer;
}

#sheet .k {
	color: var( --muted );
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

#sheet b {
	display: block;
	color: var( --ink );
	font: 700 18px/1.25 var( --name );
}

#sheet .l {
	margin-top: 2px;
	overflow-wrap: anywhere;
}

#sheet .acts {
	gap: 8px;
	margin: 10px 0 0;
}

#sheet .acts a,
#sheet .acts button {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	min-height: 42px;
	padding: 8px 13px;
	border-radius: 9px;
	font-size: 15px;
}

#sheet .acts .first {
	border-color: var( --ink );
	background: var( --ink );
	color: var( --surface );
}

#sheet .acts a.play {
	margin: 0;
	border-color: var( --play );
	background: var( --play );
	color: #fff;
	line-height: inherit;
}

#sheet .again {
	margin-top: 6px;
	color: var( --muted );
	font-size: 12px;
}

/* The mark the sheet is about. */
.held .halo {
	fill: var( --halo );
	stroke: var( --ink );
	stroke-width: 1.5;
}

/* More to land on than can be seen: under a pill, for a finger. */
.pill rect.reach {
	fill: transparent;
	stroke: none;
}

/* ---- inside out: the music is the circles, the pickers are the lines ---- */
/* A piece's ring is as free as the piece: gold for a Permanent Release, ink for a Full one, dotted for the rest. */
.mu .ring {
	fill: var( --surface );
	stroke: var( --ink2 );
	stroke-width: 2;
}

.mu.t2 .ring {
	fill: var( --gold-wash );
	stroke: var( --gold );
	stroke-width: 3.5;
}

.mu.t0 .ring {
	stroke: var( --muted );
	stroke-dasharray: 2 4;
}

.mu.subject .ring { stroke-width: 3; }
.mu.subject.t2 .ring { stroke-width: 5; }
.mu.hot .ring { stroke-width: 3.5; }
.mu.t2.hot .ring { stroke-width: 5.5; }

.mu .bead {
	fill: var( --ink2 );
	stroke: var( --surface );
	stroke-width: 1.5;
}

.mu.t2 .bead {
	fill: var( --gold );
	stroke: var( --ink2 );
	stroke-width: 0.9;
}

.mu.t0 .bead {
	fill: var( --surface );
	stroke: var( --muted );
	stroke-width: 1.2;
	stroke-dasharray: 1.5 2;
}

.mu.hot .bead {
	stroke: var( --ink );
	stroke-width: 1.8;
	stroke-dasharray: none;
}

/* A piece's name is set as music is on a pill, not as a picker's name is. */
.mu text {
	font: 600 13px var( --ui );
	fill: var( --ink );
}

.mu text.sub {
	font: 400 11.5px var( --ui );
	fill: var( --ink2 );
}

/* Pickers between two pieces: a line of ink, and on it a tag with the name. */
.core.th { stroke: var( --ink2 ); }
.core.th.on { stroke: var( --ink ); }

.pill.tag rect:not( .reach ) {
	fill: var( --surface );
	stroke: var( --axis );
	stroke-width: 1;
}

.pill.tag text {
	font: 700 12.5px var( --name );
	fill: var( --link );
}

.pill.tag.nopage text { fill: var( --ink ); }

.pill.tag tspan.n {
	font: 400 11.5px var( --ui );
	fill: var( --ink2 );
}

.pill.tag.hot rect,
.pill.tag.held rect {
	stroke: var( --ink );
	stroke-width: 1.6;
}

.pill.tag a:hover text,
.pill.tag a:focus text { text-decoration: underline; }

/* The way out to a wiki page, said as one. */
a.out {
	margin-left: 5px;
	font: 400 12px var( --ui );
	text-decoration: none;
	white-space: nowrap;
}

#say h1 a.out {
	margin-left: 10px;
	color: var( --link );
	font-size: 13px;
	vertical-align: 2px;
}

a.out:hover,
a.out:focus { text-decoration: underline; }

/* The legend says what the marks mean in the view that's on. */
#stage.dual #legend .pv,
#stage:not( .dual ) #legend .dv,
#stage:not( .webbed ) #legend .wb,
#stage:not( .deep ) #legend .dp { display: none; }

/* Its height is set from the script (steady()): as tall as it is with every entry a frame this wide could show. */
#legend { box-sizing: border-box; }

/* ---- narrow: the list under the graph ---- */
@media ( max-width: 760px ) {
	body { height: auto; min-height: 100%; }
	main { flex-direction: column; }
	#stage { flex: none; height: 78vh; height: 78svh; min-height: 460px; }
	#legend { gap: 2px 12px; padding: 5px 12px 6px; font-size: 12px; }
	#legend .lg.more { display: none; }
	#say { padding: 10px 12px 0; }
	#panel { width: auto; border-top: 1px solid var( --hair ); border-left: 0; }
	#drawer { gap: 8px; width: auto; min-height: 36px; border-top: 1px solid var( --hair ); border-left: 0; font-size: 13px; }
	#drawer .word { display: inline; font-weight: 600; }
	#drawer .chev { transform: rotate( -90deg ); }        /* under the graph: up to fold it, down to open it */
	#say h1 { font-size: 18px; }
	#crumbs { display: none; }
	.bar { gap: 6px; padding: 6px 8px; }
	.bar label { flex: 1 1 0; min-width: 0; }
	/* 16px: a phone zooms the whole page in when a smaller box is typed in. */
	.bar input { width: 100%; max-width: none; padding: 7px 8px; font-size: 16px; }
	#back { padding: 6px 12px; }
	#panel h3 { font-size: 12px; }
	.badge { font-size: 12px; }
}

/* ---- short: a phone on its side. The graph gets what height there is ---- */
@media ( max-height: 480px ) {
	#legend { gap: 2px 12px; padding: 4px 12px 5px; }
	#legend .lg.more { display: none; }
	#say { padding-top: 6px; }
	#say h1 { font-size: 17px; }
}

/* ---- a finger wants more to land on than a pointer does ---- */
@media ( pointer: coarse ) {
	.acts a, .acts button { padding: 8px 12px; font-size: 14px; }
	#panel .mini { padding: 6px 10px; font-size: 13px; }
	#panel li { padding: 10px 6px; }
	#panel td { padding: 10px 6px; }
	#panel a.play { padding: 5px 7px; border-radius: 14px; }
	/* The arrow out to a page is small to the eye, and no smaller than a fingertip to the touch. */
	#panel a.out { display: inline-block; margin: -9px 0 -9px 2px; padding: 9px 12px; font-size: 14px; }
	#say h1 a.out { display: inline-block; padding: 6px 4px; }
	.ln .hit { stroke-width: 24; }
}
@media ( pointer: coarse ) and ( min-width: 761px ) {
	#drawer { width: 32px; }                               /* beside the graph: wide enough for a fingertip */
}

@media ( prefers-reduced-motion: reduce ) {
	.ln { transition: none; }
}