/* Nelson's books, dressed as the weblog: a patterned tile (red here; the weblog's is
   blue, the linkblog's green), the cream title bar and sidebar, white boxes, Source Serif
   for everything. The books are a plain list, one line each; the facets live in the
   sidebar as text, folded up until wanted. */

/* The weblog's fonts and @font-face rules (its weblog.css): Source Serif Pro in four
   faces, and Source Code Pro for any code in a review. */
@font-face {
	font-family: "source-serif-pro"; font-style: normal; font-weight: 400;
	src: url("fonts/SourceSerifPro-Regular.otf.woff2") format("woff2"); font-display: optional;
}
@font-face {
	font-family: "source-serif-pro"; font-style: italic; font-weight: 400;
	src: url("fonts/SourceSerifPro-It.otf.woff2") format("woff2"); font-display: optional;
}
@font-face {
	font-family: "source-serif-pro"; font-style: normal; font-weight: 700;
	src: url("fonts/SourceSerifPro-Bold.otf.woff2") format("woff2"); font-display: optional;
}
@font-face {
	font-family: "source-serif-pro"; font-style: italic; font-weight: 700;
	src: url("fonts/SourceSerifPro-BoldIt.otf.woff2") format("woff2"); font-display: optional;
}
@font-face {
	font-family: "source-code-pro"; font-style: normal; font-weight: 400;
	src: url("fonts/SourceCodePro-Regular.otf.woff2") format("woff2"); font-display: optional;
}

:root {
	--tile: #750313;          /* the red tile's colour */
	--plum: #4a0710;          /* a darker red, for selected bars and tooltips */
	--cream: #ffffdd;         /* title bar and sidebar, as on the weblog */
	--cream-line: #e6e2b4;
	--cream-dark: #f4efc4;
	--mark: #f2e58a;          /* a highlighter, for what's selected */
	--box: #ffffff;
	--fg: #111;
	--muted: #6f666b;
	--faint: #a59ca1;
	--line: #ebe6e8;
	--link: #00008f;          /* the weblog's blue */
	--star: #b07a12;
	--spoiler: #d9cfd5;
	--warm: #b8481e; --cool: #2b5c9e; --agree: #9a9097;
	--serif: source-serif-pro, Cambria, serif;
	--mono: source-code-pro, Menlo, Consolas, "DejaVu Sans Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 16px; }
body {
	margin: 0; padding: 21px 24px 16px;   /* at least a little tile either side */
	background: var(--tile) url(img/stile-red.png);
	color: var(--fg); font: 18px/1.3 var(--serif);
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; color: inherit; }
.link { background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; }
.link:hover { text-decoration: underline; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }

/* Made for a 1280px window: 40px of tile either side (about 30 beside a scrollbar) */
.page { width: 1200px; max-width: 100%; margin: 0 auto; }
/* The title bar exactly as the weblog's, so the masthead sits the same */
header.title { background: var(--cream); padding: 6px 13px 0 0; margin-bottom: 20px; font-size: 144%; text-align: right; }
header.title img { max-width: 100%; height: auto; position: relative; top: 4px; }
.columns { display: flex; align-items: flex-start; gap: 20px; }
main { flex: 1; min-width: 0; }
.bbox { background: var(--box); padding: 22px 25px; margin-bottom: 20px; }
.footer { background: var(--cream); padding: 4px 8px; font-size: 83%; text-align: right; }

/* --- The sidebar: facets as the weblog sidebar's bold headings, each opening to a few
   lines of text. Selected options get a highlighter stroke. --- */

.sidebar {
	flex: none; width: 230px; background: var(--cream); padding: 13px 12px 18px;
	position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow-y: auto; scrollbar-width: thin;
	font-size: 15px; line-height: 1.35;
}
.side-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.sbt { font-weight: bold; font-size: 17px; }
.side-head .link { font-size: 14px; }
.facet { border-top: 1px solid var(--cream-line); }
.facet > h3 { margin: 0; font: inherit; }
.facet > h3 button {
	display: flex; width: 100%; align-items: baseline; gap: 6px; border: 0; background: none;
	padding: 6px 0; cursor: pointer; text-align: left; font-weight: bold;
}
.facet > h3 button::before { content: '▸'; font-weight: normal; color: var(--faint); font-size: 11px; width: 8px; transition: transform .15s; }
.facet.open > h3 button::before { transform: rotate(90deg); }
.facet > h3 .picked { flex: 1; text-align: right; font-weight: normal; color: var(--muted); font-size: 13px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.facet .body { display: none; padding: 0 0 10px 14px; }
.facet.open .body { display: block; }
.facet .hint { color: var(--muted); font-size: 13px; font-style: italic; margin: -2px 0 4px; }

.opt {
	display: flex; width: 100%; justify-content: space-between; gap: 8px; border: 0; background: none;
	padding: 1px 0; cursor: pointer; text-align: left; color: var(--link);
}
.opt:hover .l { text-decoration: underline; }
.n { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.opt .n { align-self: center; }
.on .l, .tagopt.on { color: var(--fg); font-weight: bold; box-shadow: inset 0 -.42em var(--mark); }
.zero:not(.on) { color: var(--faint); }
.stars-l { color: var(--star); letter-spacing: 1px; }
.on .stars-l { color: var(--star); }

/* Genres and authors: a run of text, like an index */
.tagrun { line-height: 1.45; }
.tagitem { display: inline-block; margin-right: 9px; }
.tagopt { border: 0; background: none; padding: 0; cursor: pointer; color: var(--link); text-align: left; }
.tagopt:hover { text-decoration: underline; }
.more-opts { font-size: 13px; margin-top: 3px; }

/* Histograms (decade published, year read): each bar a button */
.hist { display: flex; align-items: flex-end; gap: 1px; height: 46px; margin-top: 4px; }
.hist button { flex: 1; min-width: 0; border: 0; padding: 0; background: #d8d29a; cursor: pointer; }
.hist button:hover { background: var(--muted); }
.hist button.on { background: var(--plum); }
.hist button.ghost { background: #ece7b8; }
.hist-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-top: 2px; }

/* --- The intro box: a sentence, some slices, the search --- */

.intro { padding-bottom: 14px; }
.summary { margin: 0 0 8px; font-size: 19px; line-height: 1.4; }
h1.summary { font-weight: normal; }   /* the archive's, a heading for search engines */
.summary .stats { color: var(--muted); font-size: 16px; }
.pick { white-space: nowrap; box-shadow: inset 0 -.42em var(--mark); font-weight: bold; cursor: pointer; border: 0; background: none; padding: 0 1px; }
.pick::after { content: '×'; font-weight: normal; color: var(--muted); margin-left: 3px; font-size: 85%; }
.pick:hover::after { color: var(--warm); }
.slices { margin: 0 0 14px; font-size: 15px; color: var(--muted); }
.slices .slice { font-size: inherit; }
.slices .slice.on { color: var(--fg); font-weight: bold; box-shadow: inset 0 -.42em var(--mark); }
.slices .dot { color: var(--faint); margin: 0 .35em; }

.toolbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-size: 15px; }
#q {
	flex: 1 1 200px; min-width: 0; border: 0; border-bottom: 1px solid #bbb; padding: 3px 0; background: none; outline: 0;
	font-size: 16px;
}
#q:focus { border-bottom-color: var(--plum); }
#q::-webkit-search-cancel-button { cursor: pointer; }
.views a { color: var(--link); white-space: nowrap; }
.views a + a::before { content: '·'; color: var(--faint); margin: 0 .45em; display: inline-block; }
.views a[aria-current="page"] { color: var(--fg); font-weight: bold; }
.summary .sort { white-space: nowrap; }
.summary select {
	border: 0; border-bottom: 1px dotted var(--link); background: none; padding: 0; cursor: pointer; color: var(--link);
	appearance: none; -webkit-appearance: none; font: inherit; field-sizing: content; border-radius: 0;
}
.summary select:hover { border-bottom-style: solid; }
.open-facets { display: none; }

/* --- The list: one line a book --- */

.list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15em) auto max-content; column-gap: 18px; }
.list .row { display: contents; cursor: pointer; }
.list .row > * { padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* An empty inline at the title's size in every cell, so each line box is the title's height and
   the smaller author, sort key and stars sit on its baseline, not at the top */
.list .row > ::before { content: ''; font-size: 20px; }
.list .row:hover > * { background: var(--cream); }
.list .row:hover > :first-child { box-shadow: -6px 0 0 var(--cream); }
.list .row:hover > :last-child { box-shadow: 6px 0 0 var(--cream); }
.list .t { color: var(--fg); font-size: 20px; }
.list .row:hover .t { text-decoration: underline; color: var(--link); }
.list .au { color: #4a4247; font-style: italic; }
.list .k { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; font-size: 16px; }
.list .k.soft { color: var(--faint); font-style: italic; }
/* A book on the to-read shelf: dimmer, as it isn't read yet */
.list .unread .t { color: var(--muted); }
.list .unread .au { color: var(--faint); }
.list .st { color: var(--star); letter-spacing: 1px; font-size: 15px; overflow: visible !important; text-overflow: clip !important; min-width: 5.6em; }
.note { color: var(--muted); font-style: italic; font-size: 15px; }
.list .gh {
	grid-column: 1 / -1; margin: 22px 0 6px; padding-bottom: 2px; border-bottom: 1px solid var(--line);
	display: flex; align-items: baseline; gap: 10px;
}
.list .gh:first-child { margin-top: 0; }
.list .gh b { font-size: 22px; }
.list .gh .n { font-size: 14px; color: var(--muted); }
.list .gh button.link { font-size: 14px; margin-left: auto; opacity: 0; }
.list .gh:hover button.link, .list .gh button.link:focus { opacity: 1; }
.empty { padding: 40px 0; text-align: center; color: var(--muted); font-style: italic; }

/* --- The covers: each as wide as in the reviews view, all cut to 2:3, a tenth of that
   between them. The box's padding is a little less, so six fit across. --- */

.covers-box { padding-left: 20px; padding-right: 20px; }
.covers { display: grid; grid-template-columns: repeat(auto-fill, 140px); gap: 14px; }
.covers .gh { grid-column: 1 / -1; margin: 8px 0 -4px; padding-bottom: 2px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; }
.covers .gh:first-child { margin-top: 0; }
.covers .gh b { font-size: 22px; }
.covers .gh .n { font-size: 14px; color: var(--muted); }
.cover { display: block; aspect-ratio: 2 / 3; background: var(--cream); box-shadow: 0 1px 4px rgb(40 20 30 / .3); }
.cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover:hover { outline: 2px solid var(--plum); outline-offset: 2px; }
.cover .blank { display: flex; height: 100%; align-items: center; padding: 10px; text-align: center; color: var(--fg); font-size: 15px; }

/* --- A book: a weblog post, in the dialog and in the reviews view --- */

.post .btitle { font-size: 24px; font-weight: bold; line-height: 1.25; margin: 0 0 4px -1px; }
.post .byline { color: var(--muted); margin-bottom: 10px; }
.post .byline a { color: var(--link); }
.post .rimg { float: right; margin: 4px 0 10px 20px; width: 110px; height: auto; box-shadow: 0 1px 4px rgb(40 20 30 / .3); }
.post .rated { margin-bottom: 12px; font-size: 15px; color: var(--muted); }
.post .rated .stars { color: var(--star); font-size: 20px; letter-spacing: 2px; margin-right: 8px; vertical-align: -1px; }
.post .rated .stars .off { opacity: .2; }
.bentry { text-align: justify; hyphens: auto; }
.bentry p:first-child { margin-top: 0; }
.bentry .none { color: var(--muted); font-style: italic; }
.bentry img { max-width: 100%; }
tt, pre, code { font-family: var(--mono); font-size: 1em; font-size-adjust: 0.475; }
pre { font-size: 80%; overflow-x: auto; }
blockquote { font-size: 83%; margin: .7em 1em; text-align: justify; }
.spoiler { background: var(--spoiler); color: transparent; cursor: pointer; }
.spoiler:hover, .spoiler:focus, .spoiler.shown { color: inherit; background: none; }
.bfooter { clear: both; margin-top: 14px; font-size: 83%; text-align: right; color: var(--muted); }
.post .about {
	clear: both; margin-top: 18px; padding: 10px 12px; background: var(--cream); font-size: 15px; line-height: 1.45;
}
.about .crowd { display: flex; align-items: center; gap: 12px; }
.dist { display: flex; align-items: flex-end; gap: 2px; height: 26px; flex: none; }
.dist span { width: 9px; background: #d8d29a; min-height: 1px; }
.dist span.mine { background: var(--star); }
.delta { font-weight: bold; font-variant-numeric: tabular-nums; }
.delta.up { color: var(--cool); }
.delta.down { color: var(--warm); }
.about .facts { margin-top: 6px; }
.about .facts a { white-space: nowrap; }
.about .facts .lbl { color: var(--muted); }

/* The reviews view is the weblog: a white box a review */
/* The reviews view: the cover in a column of its own, so the text's lines aren't too long */
.post.bbox { padding: 25px; display: grid; grid-template-columns: 140px minmax(0, 1fr); column-gap: 28px; align-items: start; }
.post.bbox > * { grid-column: 2; }
.post.bbox > .rimg { grid-column: 1; grid-row: 1 / span 5; float: none; margin: 4px 0 0; width: 100%; }
.post.bbox .btitle a { color: var(--fg); }

/* --- The dialog --- */

dialog {
	border: 0; padding: 0; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
	background: var(--box); color: var(--fg); box-shadow: 0 0 0 10px var(--cream), 0 20px 60px rgb(0 0 0 / .5);
}
dialog::backdrop { background: rgb(40 6 10 / .6); }
dialog .post { padding: 26px 28px 16px; }
dialog .x {
	position: sticky; top: 0; float: right; margin: 6px 6px 0 0; border: 0; background: none;
	width: 32px; height: 32px; cursor: pointer; font-size: 24px; line-height: 1; color: var(--muted); z-index: 1;
}
dialog .x:hover { color: var(--fg); }
dialog nav { display: flex; justify-content: space-between; gap: 16px; padding: 10px 28px 18px; font-size: 15px; border-top: 1px solid var(--line); }
dialog nav a { max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Charts --- */

.chart { font-size: 13px; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--serif); }
.chart .axis line, .chart .grid line { stroke: var(--line); }
.chart .axis text, .chart .label { fill: var(--muted); }
.chart .diag { stroke: var(--plum); stroke-dasharray: 4 4; opacity: .55; }
.chart .dot { cursor: pointer; stroke: var(--box); stroke-width: 1; }
.chart .dot:hover { stroke: var(--fg); stroke-width: 2; }
.chart .zone { font-style: italic; font-size: 15px; fill: var(--muted); }
.chart-note { font-size: 17px; line-height: 1.4; margin-top: 0; text-align: justify; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font-size: 14px; margin-top: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
.extremes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 26px; }
.chart h3 { font-size: 18px; margin: 0 0 8px; }
.extremes ol { margin: 0; padding-left: 22px; font-size: 15px; line-height: 1.5; }
.extremes small { color: var(--muted); }

/* By year: each year a strip from January to December, a tick per book where it was read */
.years .yr { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; padding: 3px 0; }
.years .yr + .yr { border-top: 1px solid var(--line); }
.years .yl b { font-size: 18px; font-variant-numeric: tabular-nums; }
.years .yl .n { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; }
.years svg { width: 100%; height: 34px; display: block; overflow: visible; }
.years .tick { cursor: pointer; }
.years .tick rect.hit { fill: transparent; }
.years .tick:hover rect.mark { fill: var(--fg); }
.years .months text { fill: var(--faint); font-size: 11px; }
.years .months line { stroke: var(--line); }
.years .undated { display: flex; flex-wrap: wrap; gap: 2px; }
.years .undated span { width: 6px; height: 18px; cursor: pointer; }
.years .undated span:hover { background: var(--fg) !important; }
.years-note { margin: 0 0 14px; font-size: 16px; color: var(--muted); }

.tip {
	position: fixed; pointer-events: none; z-index: 10; background: var(--plum); color: var(--cream); padding: 5px 8px;
	font-size: 14px; line-height: 1.35; max-width: 280px; opacity: 0; transition: opacity .1s; white-space: pre-line;
}
.tip.on { opacity: 1; }

/* --- Narrow screens: the sidebar opens above the list on request --- */

@media (max-width: 820px) {
	body { padding: 8px 4px; font-size: 17px; }
	.columns { flex-direction: column; gap: 0; }
	.sidebar { position: static; width: 100%; max-height: none; display: none; margin-bottom: 12px; }
	.sidebar.open { display: block; }
	.open-facets { display: inline; }
	.bbox { padding: 16px; }
	.extremes { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.post.bbox { display: block; }
	.post.bbox > .rimg { float: right; margin: 4px 0 10px 16px; width: 80px; }
	.list { grid-template-columns: minmax(0, 1fr) auto; }
	.list .row > * { padding: 0; }
	.list .row > ::before { content: none; }
	.list .t { grid-column: 1 / -1; padding-top: 6px !important; white-space: normal; }
	.list .au { font-size: 15px; color: var(--muted); }
	.list .k { display: none; }
	.covers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
	.list .st { text-align: right; }
	.list .row:hover > * { box-shadow: none !important; }
	.bentry { text-align: left; }
	.post .rimg { width: 80px; }
	dialog .post { padding: 18px 16px 12px; }
	dialog nav { padding: 10px 16px 14px; }
	.years .yr { grid-template-columns: 52px 1fr; gap: 8px; }
	.toolbar { gap: 8px 12px; }
}