/* Inklings reading room. Every visual choice below is a member switch
   (R-TYP-1): theme, type, size, measure, reference numbers. */
:root {
  --paper: #fbf8f2; --ink: #1d1a17; --quiet: #6b6560; --rule: #d9d2c6;
  --accent: #7a3e2e; --mark: #f3e3a2; --mark-sugg: #d5e8d0; --warn: #8a2d2d;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --measure: 36rem; --base: 1.05rem;
}
html.theme-dark { --paper: #1b1917; --ink: #e8e2d8; --quiet: #a39c92; --rule: #3a3531; --accent: #d89a7e; --mark: #5a4b1e; --mark-sugg: #2d4a2a; --warn: #e08a8a; }
@media (prefers-color-scheme: dark) {
  html.theme-auto { --paper: #1b1917; --ink: #e8e2d8; --quiet: #a39c92; --rule: #3a3531; --accent: #d89a7e; --mark: #5a4b1e; --mark-sugg: #2d4a2a; --warn: #e08a8a; }
}
/* Five rooms from the shelf (item n8). Each is the whole palette, so a
   member's other switches (type, size, measure) carry through unchanged. */
/* Narnia: always winter, and a lamp-post burning in the snow. */
html.theme-narnia { --paper: #eef3f7; --ink: #1c2a30; --quiet: #5f7480; --rule: #cfdbe3; --accent: #b8862b; --mark: #f4e6b4; --mark-sugg: #d3e6da; --warn: #9c2f2f; }
/* Lord of the Rings: the Red Book of Westmarch, parchment and umber, a ring of gold. */
html.theme-lord-of-the-rings { --paper: #efe4c9; --ink: #2b2118; --quiet: #6e5b45; --rule: #d6c49d; --accent: #8c6a12; --mark: #ecd68c; --mark-sugg: #cfd9b3; --warn: #a3321f; }
/* Hobbit: Bag End, cream walls, a round green door, honey on the table. */
html.theme-hobbit { --paper: #f7eedb; --ink: #2e2416; --quiet: #7a6a50; --rule: #dccbaa; --accent: #3f6b3a; --mark: #f2d68a; --mark-sugg: #d4e3c0; --warn: #b04a2a; }
/* Space Trilogy: the heavens, which are not dark but full of light; Perelandra gold on deep field. */
html.theme-space-trilogy { --paper: #141426; --ink: #e9dfc0; --quiet: #9d9ab8; --rule: #2e2d4a; --accent: #e0b043; --mark: #4a3d1a; --mark-sugg: #26402c; --warn: #e07c6a; }
/* Rivendell: the Last Homely House, silver twilight, autumn on the ledge. */
html.theme-rivendell { --paper: #f1f0f6; --ink: #1e2140; --quiet: #5c5f80; --rule: #cfd0e0; --accent: #4a6fa5; --mark: #efe2b3; --mark-sugg: #d5e0d8; --warn: #a83a4c; }
html.theme-dark, html.theme-space-trilogy { color-scheme: dark; }
@media (prefers-color-scheme: dark) { html.theme-auto { color-scheme: dark; } }
html.size-small { --base: 0.92rem; } html.size-large { --base: 1.22rem; }
html.measure-narrow { --measure: 30rem; } html.measure-wide { --measure: 46rem; }
html.font-sans body { font-family: var(--sans); }

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: var(--base); line-height: 1.55; }
a { color: var(--accent); }
h1, h2, h3 { font-weight: 600; line-height: 1.2; } h1 { font-size: 1.7em; } h2 { font-size: 1.2em; margin-top: 1.6em; }
main { max-width: 64rem; margin: 0 auto; padding: 1rem 1.2rem 3rem; }
.narrow { max-width: var(--measure); margin: 0 auto; }
.top { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; padding: .8rem 1.2rem; border-bottom: 1px solid var(--rule); }
.top .brand { font-weight: 700; text-decoration: none; color: var(--ink); font-size: 1.15em; }
.top nav { display: flex; flex-wrap: wrap; gap: .9rem; margin-left: auto; font-family: var(--sans); font-size: .85rem; }
.top nav a { text-decoration: none; }
.foot { text-align: center; color: var(--quiet); font-size: .8rem; padding: 2rem; border-top: 1px solid var(--rule); font-family: var(--sans); }
.flash { max-width: 64rem; margin: .8rem auto 0; padding: .5rem 1rem; background: var(--mark); border-radius: 4px; font-family: var(--sans); font-size: .9rem; }
.warn { color: var(--warn); } .quiet, .meta { color: var(--quiet); font-size: .88em; font-family: var(--sans); }
.tag { font-family: var(--sans); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--rule); border-radius: 3px; padding: 0 .35em; color: var(--quiet); margin-left: .3em; }
.by { color: var(--quiet); }
code { font-family: var(--mono); font-size: .9em; }

form label { display: block; margin: .8rem 0 .3rem; }
input[type=text], input[type=email], input:not([type]), textarea, select { width: 100%; font: inherit; color: inherit; background: transparent; border: 1px solid var(--rule); border-radius: 4px; padding: .45rem .6rem; }
textarea#draft { font-family: var(--mono); font-size: .92rem; line-height: 1.45; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
html.font-sans textarea#draft, textarea#draft.prose { white-space: pre-wrap; }
button { font: inherit; font-family: var(--sans); font-size: .9rem; padding: .45rem .9rem; margin: .8rem .4rem 0 0; border: 1px solid var(--accent); background: transparent; color: var(--accent); border-radius: 4px; cursor: pointer; }
button.primary { background: var(--accent); color: var(--paper); }
button.link { border: 0; padding: 0; margin: 0; text-decoration: underline; font-size: inherit; }
button.small { font-size: .78rem; padding: .2rem .5rem; margin: 0 .2rem; }
form.inline { display: inline; } .inline-form { display: flex; gap: .5rem; align-items: end; }
label.switch { display: flex; justify-content: space-between; gap: 1rem; align-items: center; border-bottom: 1px dotted var(--rule); padding: .3rem 0; }
label.switch select { width: auto; }
.columns { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; } @media (max-width: 50rem) { .columns { grid-template-columns: 1fr; } }
ul.works, ul.members { list-style: none; padding: 0; } ul.works li, ul.members li { padding: .5rem 0; border-bottom: 1px solid var(--rule); }
ul.works .title { font-size: 1.05em; } ul.works .meta, ul.members .meta { display: block; }
.avatar { width: 6rem; height: 6rem; object-fit: cover; border-radius: 50%; } .avatar.small { width: 2rem; height: 2rem; vertical-align: middle; margin-right: .4rem; } .avatar.tiny { width: 1.4rem; height: 1.4rem; vertical-align: middle; margin-right: .3rem; border-radius: 50%; }
blockquote.note { border-left: 3px solid var(--rule); margin: 1rem 0; padding: .2rem 1rem; color: var(--quiet); font-style: italic; }
table.plain th { text-align: left; padding-right: 1rem; color: var(--quiet); font-weight: normal; }
ol.parts li { margin: .4rem 0; } a.small { font-size: .8em; margin-left: .5em; }
.pending { border: 1px solid var(--rule); padding: .5rem 1rem; margin: 1rem 0; background: var(--mark-sugg); }

/* The reading view: text on the left within the measure, marginalia beside it. */
.reading { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(16rem, 1fr); gap: 3rem; }
.reading > .work-head { grid-column: 1 / -1; max-width: var(--measure); }
@media (max-width: 60rem) { .reading { grid-template-columns: 1fr; } }
.text { font-size: 1.04em; }
.text p { margin: 0 0 1em; } .text [data-ref] { position: relative; }
.text [data-ref]::before { content: attr(data-ref); position: absolute; left: -3.2rem; width: 2.6rem; text-align: right; color: var(--quiet); font-family: var(--sans); font-size: .68rem; top: .35em; opacity: 0; transition: opacity .15s; }
html.refs-hover .text [data-ref]:hover::before { opacity: 1; } html.refs-always .text [data-ref]::before { opacity: 1; } html.refs-never .text [data-ref]::before { display: none; }
@media (max-width: 60rem) { .text [data-ref]::before { left: -2.4rem; width: 2rem; } main { padding-left: 2.6rem; } }
.verse { white-space: pre; font-family: inherit; margin: 0 0 1em; }
.verse .line { display: block; } .verse .stanza-break { display: block; height: 1em; }
.text mark { background: var(--mark); color: inherit; cursor: pointer; padding: 0; } .text mark.suggestion { background: var(--mark-sugg); }
.text mark.lit { outline: 2px solid var(--accent); }
.changes { margin: 1rem 0 1.5rem; font-size: .95em; } .changes summary { cursor: pointer; color: var(--accent); font-family: var(--sans); font-size: .88rem; }
.diff ins { background: var(--mark-sugg); text-decoration: none; } .diff del { background: var(--mark); color: var(--quiet); }
.marginalia { font-size: .92em; } .marginalia h2 { margin-top: 0; }
#comment-form textarea { font-size: .95em; } #comment-form #f-quote { color: var(--quiet); font-style: italic; }
ol.comments, ol.replies { list-style: none; padding: 0; } ol.replies { margin-left: 1.2rem; border-left: 2px solid var(--rule); padding-left: .8rem; }
.comment { border-top: 1px solid var(--rule); padding: .7rem 0; } .comment.lit { background: var(--mark); }
.comment .who { margin: 0 0 .3rem; } .comment .body { margin: .2rem 0; white-space: pre-wrap; } .comment.struck .body { color: var(--quiet); }
.comment q.quote { display: block; color: var(--quiet); font-style: italic; margin: .2rem 0; }
.comment .proposal q { font-style: normal; background: var(--mark-sugg); }
.comment .actions { font-family: var(--sans); font-size: .8rem; margin: .3rem 0 0; } .comment .actions > * { margin-right: .7rem; }
a.current { font-weight: bold; text-decoration: none; }
a.outside::after { content: " \2197"; font-size: .8em; }
.desk h1 { margin-bottom: .2rem; }

/* Meetings */
ol.parts li.now { background: var(--mark-sugg); padding: .2rem .4rem; }
.minutes { white-space: pre-wrap; border-left: 3px solid var(--rule); padding: .2rem 1rem; }
label.switch input.short { width: 14rem; }
.adopted { background: var(--mark-sugg); }

/* Notices, fireside, search */
li.unseen { font-weight: 600; }
.nav-search { width: 8rem; font-size: .85rem; padding: .2rem .4rem; }
ol.fire { list-style: none; padding: 0; } ol.fire li { padding: .4rem 0; border-bottom: 1px dotted var(--rule); white-space: pre-wrap; } ol.fire li.struck { color: var(--quiet); }
.fireside-side { position: fixed; right: 1rem; bottom: 0; width: 20rem; max-width: 90vw; font-family: var(--sans); font-size: .85rem; z-index: 5; }
.fire-toggle { width: 100%; margin: 0; border-radius: 6px 6px 0 0; background: var(--paper); border-bottom: 0; }
.fire-body { background: var(--paper); border: 1px solid var(--accent); border-top: 0; padding: .5rem; max-height: 40vh; overflow: auto; }
.fire-body ol.fire { margin: 0 0 .5rem; } .fire-body form { display: flex; gap: .3rem; } .fire-body input { flex: 1; }
a.tag { text-decoration: none; }
.books li.finished { color: var(--quiet); text-decoration: line-through; }
details.inline { display: inline; } details.inline summary { display: inline; cursor: pointer; }
.link-box { display: block; padding: .5rem; border: 1px solid var(--rule); word-break: break-all; user-select: all; }
li.outside { border-left: 3px solid var(--rule); padding-left: .6rem; }
.public .margin { max-width: 40rem; margin: 2rem auto; }
.help h2 { margin-top: 1.6rem; } .help code { font-size: .9em; } .topics { padding-left: 1.2rem; }

/* Printing (R-TYP-3): the text and its marginalia, numbers in the margin, nothing else. */
@media print {
  header.top, nav, aside#fireside, form, .flash, .noprint, details.changes, details.suggest, button { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  main { padding: 0; max-width: none; }
  .reading { display: block; }
  .text [data-ref]::before { opacity: 1; color: #666; }
  .comments { page-break-before: auto; border-top: 1px solid #999; margin-top: 1.5em; padding-top: .5em; }
  a { color: inherit; text-decoration: none; }
}
/* The suggestion box, and the help tables as a bordered grid (Q62). */
details.suggest { max-width: 40rem; margin: 2rem auto 0; padding: .5rem .8rem; border: 1px dashed var(--rule); border-radius: 4px; color: var(--quiet); }
details.suggest summary { cursor: pointer; }
details.suggest textarea { width: 100%; margin: .5rem 0; }
ol.suggestions li { margin-bottom: 1rem; } ol.suggestions .reply { margin-left: 1rem; }
ol.suggestions .status-done, ol.suggestions .status-declined { opacity: .6; }
.help table { border-collapse: collapse; margin: 1rem 0; }
.help th, .help td { border: 1px solid var(--rule); padding: .3rem .6rem; text-align: left; vertical-align: top; }
.help th { font-weight: 600; }
.isbn { font-family: var(--mono); font-size: .8em; } label.check { display: block; font-size: .9em; margin: .3rem 0; }