/* HabitableZone — dark theme.

   The layout is unchanged from the plain early-2000s board: small text, a
   narrow left menu, a dense thread tree. Only the colours differ, and they all
   come from the block below, so the whole board can be re-tinted by editing
   these dozen-odd values.

   The starfield tiles behind everything. The reading column sits on a nearly
   opaque panel over it — a busy background under dense 11px text is the fastest
   way to make a board unreadable, so the stars live in the margins and behind
   the furniture, not under the posts. */

:root {
  --star-tile: url('/starfield.webp');

  --void:       #070910;   /* deepest, behind the starfield */
  --panel:      #0e1220;   /* the reading column */
  --panel-2:    #141a29;   /* sidebar, table headers, post headings */
  --panel-3:    #1a2132;   /* raised: toolbar buttons, hovers */

  --ink:        #dfe4ee;   /* body text */
  --ink-dim:    #9aa4b8;   /* bylines, timestamps, hints */
  --ink-faint:  #6f7a8f;   /* the quietest text on the page */

  --line:       #2a3247;   /* borders */
  --line-soft:  #1d2434;

  --link:       #8ab6ff;
  --visited:    #c3a3ea;
  --hover:      #ff9d8b;
  --accent:     #ffce6b;   /* the board you are reading */
  --danger:     #ff8a80;
  --ok:         #8fd39a;
}
/* --- page ---------------------------------------------------------------- */
body {
  background-color: var(--void);
  background-image: var(--star-tile);
  background-repeat: repeat;
  background-attachment: fixed;   /* the sky stays put while the board scrolls */
  color: var(--ink);
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  margin: 0;
  padding: 0;
}

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

/* --- masthead ------------------------------------------------------------ */
#masthead {
  background: var(--panel-2);
  color: var(--ink);
  padding: 10px 14px;
  border-bottom: 2px solid var(--line);
}
#sitename {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1px;
  text-decoration: none;
}
#tagline { color: var(--ink-dim); font-size: 11px; margin-left: 10px; }

/* The banner carries the wordmark, so the site name lives in the image's alt
   text rather than being repeated as visible type. The surround is sampled from
   the artwork's own edges so a wide window shows no seam. */
#masthead.art {
  background: #241a1c;
  padding: 0;
  border-bottom: 1px solid var(--line);
  text-align: center;
  line-height: 0;
}
#masthead.art #bannerlink { display: block; }
/* Banners come from different places and are not all the same shape: the site
   masthead is wide and shallow, a board's own picture may be squarer. Whatever
   the shape, the WHOLE picture is shown — never cropped. A very tall one is
   scaled down to the height cap instead, which leaves a little of the surround
   colour at its sides rather than cutting anything off. */
#masthead.art img {
  display: inline-block;
  width: auto;
  max-width: 100%;
  max-height: 460px;
  height: auto;
  object-fit: contain;
  vertical-align: top;
}
@media (min-width: 1600px) { #masthead.art img { max-width: 1600px; } }
@media (max-width: 900px)  { #masthead.art img { max-height: 300px; } }

/* --- frame ---------------------------------------------------------------
   A menu column beside a reading column, which is the shape the board has
   always had. On a phone the two stack: the menu becomes a row of buttons
   across the top and the reading column takes the whole width. */
#frame { display: flex; align-items: stretch; width: 100%; }

#sidebar {
  /* Widened from 160px when the recent-posts panel arrived: a title, a name, a
     date and a board name need the extra inch to avoid reading as rubble. */
  flex: 0 0 186px;
  width: 186px;
  background: var(--panel-2);
  border-right: 1px solid var(--line);
  padding: 10px 8px;
  box-sizing: border-box;
}
.navbox { margin-bottom: 16px; }
#boardmenu > summary { display: none; }
ul.nav { list-style: none; margin: 0; padding: 0; }
ul.nav li { padding: 2px 0; }
ul.nav li.on > a { font-weight: bold; color: var(--accent); }
.userbox { font-size: 11px; border-top: 1px solid var(--line); padding-top: 8px; }

#main {
  flex: 1 1 auto;
  /* Without this a long unbroken address in a post can widen the whole column
     and push the page sideways. */
  min-width: 0;
  padding: 12px 16px;
  background: var(--panel);
}

h1 { font-size: 16px; margin: 0 0 4px 0; color: #ffffff; }
h2 { font-size: 13px; margin: 16px 0 6px 0; color: #f0f3f8; }
p.blurb { color: var(--ink-dim); margin: 0 0 12px 0; font-size: 11px; }

/* --- the thread tree ----------------------------------------------------- */
ul.thread { list-style: none; margin: 0; padding: 0 0 0 18px; }
ul.thread li { margin: 1px 0; line-height: 1.45; }
.meta { color: var(--ink-dim); font-size: 11px; }
.nt { color: var(--ink-faint); font-size: 11px; }

.thread-block {
  padding: 8px 0 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.thread-block:last-child { border-bottom: none; }
.thread-block > ul.thread { padding-left: 0; }

a.rootsubj { font-weight: bold; }
a.subj.open { color: var(--accent); }
a.subj.loading { opacity: 0.5; }

/* --- a post opened inside the thread ------------------------------------- */
.inline-post {
  margin: 4px 0 8px 0;
  border-left: 3px solid var(--line);
  background: var(--panel-2);
  padding: 7px 10px;
}
.inline-post .inline-body { line-height: 1.55; }
.inline-post .inline-body p { margin: 0 0 8px 0; }
.inline-post .inline-body p:last-child { margin-bottom: 0; }
.inline-actions {
  margin-top: 7px;
  padding-top: 5px;
  border-top: 1px solid var(--line);
  font-size: 11px;
}

/* --- a reply being written ------------------------------------------------ */
form.inline-reply {
  margin: 6px 0 10px 0;
  border: 1px solid var(--line);
  border-left: 3px solid var(--link);
  background: var(--panel-3);
  padding: 8px 10px;
  max-width: 720px;
}
form.inline-reply .reply-head {
  font-size: 11px;
  color: var(--ink-dim);
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
}
form.inline-reply label {
  display: block;
  font-weight: bold;
  font-size: 11px;
  margin: 6px 0 2px 0;
}
form.inline-reply input[type=text] { width: 100%; box-sizing: border-box; }
form.inline-reply textarea {
  width: 100%;
  box-sizing: border-box;
  height: auto;
  min-height: 70px;
  overflow: hidden;
  resize: vertical;
  line-height: 1.5;
}
form.inline-reply .reply-pics { margin-top: 6px; }
form.inline-reply .reply-buttons { margin-top: 8px; }
form.inline-reply .reply-buttons button[type=submit] { margin-top: 0; }
form.inline-reply .cancel { margin-left: 10px; }
.reply-status { margin-left: 10px; font-size: 11px; color: var(--ink-dim); }
.reply-status.err { color: var(--danger); font-weight: bold; }

li.fresh > a.subj { background: #3a3418; }

/* --- formatting toolbar --------------------------------------------------- */
.toolbar {
  border: 1px solid var(--line);
  border-bottom: none;
  background: var(--panel-2);
  padding: 3px 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  max-width: 720px;
  box-sizing: border-box;
}
.toolbar button.fmt {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  margin: 0;
  padding: 2px 7px;
  min-width: 26px;
  border: 1px solid var(--line);
  background: var(--panel-3);
  color: var(--ink);
  cursor: pointer;
  line-height: 1.4;
}
.toolbar button.fmt:hover { background: #232b3d; }
.toolbar button.fmt:active { background: #2c3549; }
.toolbar .sep { width: 1px; height: 16px; background: var(--line); margin: 0 3px; }
.toolbar .fmt-help {
  margin-left: auto;
  font-size: 11px;
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--panel-3);
  padding: 1px 6px;
}
.toolbar + textarea { border-top-color: var(--line); }

/* --- pictures chosen but not yet posted ----------------------------------- */
.pic-previews { margin-top: 6px; }
figure.pic-preview {
  display: inline-block;
  margin: 0 8px 8px 0;
  vertical-align: top;
  text-align: center;
}
figure.pic-preview img {
  max-width: 130px;
  max-height: 130px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  display: block;
}
figure.pic-preview figcaption { font-size: 10px; color: var(--ink-dim); margin-top: 2px; }

/* --- formatted text inside posts ------------------------------------------ */
.post .text .u, .inline-post .u { text-decoration: underline; }
/* A tagline may carry the same emphasis a post can — including underline, which
   would otherwise only be styled inside a post. */
p.blurb .u, .hint .u { text-decoration: underline; }
.post .text blockquote, .inline-post blockquote {
  margin: 8px 0;
  padding: 4px 10px;
  border-left: 3px solid var(--line);
  background: var(--panel-3);
  color: var(--ink-dim);
}
.video { margin: 10px 0; max-width: 560px; }
.video iframe, .video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 1px solid var(--line);
  background: #000;
}

/* --- a single post -------------------------------------------------------- */
.post { border: 1px solid var(--line); margin-bottom: 14px; background: var(--panel); }
.post .head {
  background: var(--panel-2);
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
  font-weight: bold;
}
.post .byline { font-weight: normal; color: var(--ink-dim); font-size: 11px; }
.post .text { padding: 10px 8px; line-height: 1.55; }
.post .actions {
  padding: 4px 8px;
  background: var(--panel-2);
  border-top: 1px solid var(--line);
  font-size: 11px;
}

.post .text p { margin: 0 0 10px 0; }
.post .text p:empty { display: none; }

figure.linked-image { margin: 10px 0; }
figure.linked-image img {
  max-width: 100%;
  max-height: 520px;
  width: auto;
  height: auto;
  border: 1px solid var(--line);
  background: var(--panel-2);
}
figure.linked-image figcaption {
  font-size: 10px; color: var(--ink-faint); margin-top: 2px; word-break: break-all;
}
figure.linked-image.broken img { display: none; }
figure.linked-image.broken figcaption { font-size: 12px; color: var(--ink); }

.attachments { margin-top: 12px; }
figure.shot { display: inline-block; margin: 0 10px 10px 0; vertical-align: top; }
figure.shot img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: var(--panel-2);
}
figure.shot figcaption { font-size: 10px; margin-top: 2px; }

/* --- forms ---------------------------------------------------------------- */
input[type=file] { font-size: 11px; color: var(--ink); }
form.stack label { display: block; margin: 8px 0 2px 0; font-weight: bold; }
input[type=text], input[type=email], input[type=password], textarea {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  padding: 4px;
  border: 1px solid var(--line);
  background: #080b13;
  color: var(--ink);
  width: 100%;
  max-width: 620px;
  box-sizing: border-box;
}
input[type=text]:focus, input[type=email]:focus,
input[type=password]:focus, textarea:focus {
  outline: none;
  border-color: var(--link);
}
textarea { height: 220px; }
button, input[type=submit] {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  padding: 4px 12px;
  margin-top: 10px;
  border: 1px solid var(--line);
  background: var(--panel-3);
  color: var(--ink);
  cursor: pointer;
}
button:hover, input[type=submit]:hover { background: #232b3d; }
form.inline { display: inline; }
button.linkish {
  background: none; border: none; padding: 0; margin: 0;
  color: var(--link); text-decoration: underline; cursor: pointer; font-size: 11px;
}
button.linkish:hover { background: none; color: var(--hover); }

.flash {
  background: #2b2a12;
  border: 1px solid #5c5822;
  color: #f3edcd;
  padding: 6px 8px;
}
.err { color: var(--danger); font-weight: bold; }
.hint { color: var(--ink-dim); font-size: 11px; }

/* Honeypot: kept in the layout (so a bot reading the DOM sees a normal field)
   but moved out of sight and off the tab order. A person never sees it; the
   server rejects any signup that fills it in. Not display:none — some bots
   deliberately skip hidden fields, and off-screen catches more of them. */
.hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* MetaZone dashboard: the population headline and the growth chart. */
.metric {
  font-weight: bold; font-size: 20px; letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 12px 16px; margin: 12px 0 22px;
}
.chart-wrap { overflow-x: auto; margin: 8px 0 4px; }
svg.chart { width: 100%; min-width: 520px; height: auto; display: block; }
svg.chart .grid { stroke: var(--line-soft); stroke-width: 1; }
svg.chart .axis { stroke: var(--line); stroke-width: 1; }
svg.chart .series { stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
svg.chart .pt { fill: var(--accent); stroke: var(--panel); stroke-width: 1; }
svg.chart .ylab, svg.chart .xlab { fill: var(--ink-dim); font-size: 11px; }
svg.chart .series-fill { fill: var(--accent); opacity: 0.15; stroke: none; }
.metric-row { display: flex; flex-wrap: wrap; gap: 12px; }
.metric-row .metric { margin: 12px 0; flex: 1 1 auto; }

/* Search: the query row and the structured-filter row beneath it. */
.searchrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.searchrow input[type="search"] { flex: 1 1 260px; min-width: 180px; }
.searchfilters { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
  margin-top: 8px; font-size: 12px; color: var(--ink-dim); }
.searchfilters label { display: inline-flex; align-items: center; gap: 5px; }
.searchfilters input[type="text"], .searchfilters input[type="number"], .searchfilters input[type="date"] {
  padding: 3px 6px; }
.snip mark, .results mark { background: var(--accent); color: #1a1200; padding: 0 1px; border-radius: 2px; }

/* Moderator "move thread to another board" control, inline with the other
   moderator actions under a thread. */
form.movebar { display: inline-flex; align-items: center; gap: 4px; }
form.movebar select { padding: 1px 4px; font-size: 12px; max-width: 150px; }

table.list { border-collapse: collapse; font-size: 12px; }
table.list td, table.list th {
  border: 1px solid var(--line);
  padding: 4px 8px;
  text-align: left;
}
table.list th { background: var(--panel-2); color: #f0f3f8; }

#foot {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding: 8px 14px;
  color: var(--ink-dim);
  font-size: 11px;
  background: var(--panel-2);
}
#credit { display: block; margin-top: 4px; color: var(--ink-faint); font-size: 10px; }

/* --- moderation ----------------------------------------------------------- */
form.setting { margin: 6px 0; }
label.switch { font-size: 12px; cursor: pointer; }
label.switch input { margin-right: 6px; vertical-align: middle; }
b.pending {
  background: #a5241d;
  color: #fff;
  padding: 0 5px;
  border-radius: 8px;
  font-size: 10px;
}
label.radio { display: block; margin: 5px 0; font-size: 12px; cursor: pointer; }
label.radio input { margin-right: 6px; }
label.radio .hint { display: block; margin-left: 22px; }
p.warn {
  background: #2e2413;
  border: 1px solid #7a5a22;
  color: #f0dcb4;
  padding: 6px 9px;
  font-size: 11px;
}
a.trace { font-family: monospace; font-size: 10px; color: var(--ink-dim); }

/* --- board menu and hierarchy --------------------------------------------- */
.lock { font-size: 10px; }
p.crumb { font-size: 11px; color: var(--ink-dim); margin: 0 0 4px 0; }
p.subboards {
  font-size: 11px;
  margin: 0 0 12px 0;
  padding: 5px 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}



/* --- new since your last visit -------------------------------------------
   A member coming back wants to find what has changed without reading the
   whole page again. Unread lines are brighter than read ones and carry a
   small mark; a conversation with anything new gets a count and a lit edge.
   None of this appears for a signed-out visitor, who has no last visit. */
.newcount {
  display: inline-block;
  background: var(--accent);
  color: #17120a;
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 8px;
  vertical-align: 1px;
  white-space: nowrap;
}
a.newcount { text-decoration: none; }
a.newcount:hover { background: #ffdc94; color: #17120a; }
/* Subject-line colour is decided by the BOARD, not by the browser.
   -----------------------------------------------------------------
   Left to itself a browser paints every link blue and every link you have ever
   clicked purple, from its own history — per-device, wiped when history is
   cleared, and blind to a post read by expanding it in place. That is what made
   the old colours look arbitrary. So the browser's :visited is neutralised on
   subject links here, and three board-driven classes decide the colour:

     (default)   blue   — unread: shown to you, not opened          --link
     .read       purple — you have opened it, or Mark-all-read'd    --visited
     .unread     gold   — new since your last visit (always wins)   --accent

   Order matters: .read must beat :visited (or a purple post you happen to have
   in browser history would fight the board), and .unread must beat .read (a new
   post is gold even if you once read an earlier version). */
a.subj { color: var(--link); }
a.subj:visited { color: var(--link); }          /* ignore browser history */
a.subj.read,
a.subj.read:visited { color: var(--visited); }  /* purple: read */
a.subj.read:hover { color: var(--hover); }

/* New posts are gold, the same gold as the board you are reading, with a small
   arrow in front — and gold wins over read. */
a.subj.unread,
a.subj.unread:visited,
a.subj.unread.read { color: var(--accent); font-weight: bold; }
a.subj.unread:hover { color: var(--hover); }
a.subj.unread::before { content: "\25B8\00a0"; color: var(--accent); }
ul.nav a.hasnew { font-weight: bold; color: var(--accent); }
p.newline { margin: 0 0 10px 0; }

/* --- search --------------------------------------------------------------- */
.searchbox form { display: flex; gap: 4px; }
.searchbox input[type=search] {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--void);
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  padding: 3px 5px;
}
.searchbox button { font-size: 11px; padding: 3px 6px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
form.searchform {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 6px 0;
}
form.searchform input[type=search] {
  flex: 1 1 260px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  padding: 4px 6px;
}
form.searchform select {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}
ol.results { padding-left: 28px; margin: 10px 0; }
ol.results li {
  margin: 0 0 14px 0;
  padding-left: 4px;
}
ol.results .meta { display: block; margin: 1px 0 3px 0; }
ol.results .snip { color: var(--ink); font-size: 12px; line-height: 1.5; }
mark {
  background: #4a3d16;
  color: #ffe9ae;
  padding: 0 1px;
}
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 11px; }

/* --- edited posts ---------------------------------------------------------
   A post can be edited at any time, with no deadline. What keeps that honest
   is this note: quiet, permanent, and always a link to what the post said
   before, so a disagreement about it takes five seconds to settle. */
a.edited {
  color: var(--ink-faint);
  font-size: 10px;
  text-decoration: none;
  border-bottom: 1px dotted var(--line);
}
a.edited:hover { color: var(--accent); border-bottom-color: var(--accent); }
.inline-edited { margin: 0 0 4px 0; }

.revision {
  border: 1px solid var(--line);
  margin: 0 0 14px 0;
  background: var(--panel-2);
}
.revision .head {
  background: var(--panel-3);
  padding: 5px 9px;
  border-bottom: 1px solid var(--line);
  font-weight: bold;
}
.revision .head .byline {
  font-weight: normal;
  font-size: 11px;
  color: var(--ink-dim);
  margin-top: 2px;
}
.revision .text { padding: 8px 9px; line-height: 1.55; }

/* --- the recent-posts panel ----------------------------------------------
   The sidebar list of conversations with the newest activity, across every
   board the reader may see. Built to read like the original board's panel: a
   small stack of entries, each one a title, a name, a date and the board it
   came from, with the unread ones bright and the caught-up ones quiet.

   The colours are the board's own tokens rather than the old board's greys, so
   the panel belongs to this stylesheet and re-tints with the rest of it. */
/* A heading bar, the way the old board's panel had one. */
.recentbox h3 {
  font-size: 11px;
  margin: 0 0 6px 0;
  padding: 4px 6px;
  color: #f0f3f8;
  font-weight: bold;
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: 3px;
}
#recentmenu > summary { display: none; }

ul.recent { list-style: none; margin: 0; padding: 0; }
ul.recent li {
  padding: 5px 0 6px 0;
  border-bottom: 1px solid var(--line-soft);
  line-height: 1.35;
  font-size: 11px;
}
ul.recent li:last-child { border-bottom: none; }

/* The title, then the byline and the board, each on its own line — a 170px
   column has no room to put them side by side. */
ul.recent a.rtitle { display: block; font-style: italic; }
ul.recent .rwho { display: block; }
ul.recent .rwho,
ul.recent .rwhen,
ul.recent .rboard { color: var(--ink-faint); }
/* The date stays in one piece: a stray "pm" on a line of its own is the
   fastest way to make a narrow column look broken. */
ul.recent .rwhen { font-style: italic; white-space: nowrap; }
ul.recent .rboard { display: block; font-style: italic; }

/* Caught up: the whole entry recedes, which is the panel's real work — the eye
   should land on the two or three lines that have something new in them. */
ul.recent li a.rtitle { color: var(--visited); opacity: 0.75; }
ul.recent li.new a.rtitle { color: var(--link); opacity: 1; font-weight: bold; }
ul.recent li.new .rwho { color: var(--ink-dim); }
ul.recent li a.rtitle:hover { color: var(--hover); opacity: 1; }

/* --- a pasted link that carries its own headline -------------------------
   The domain in small type beside the title. Always shown: a link wearing a
   headline must never hide where it actually goes. */
.linksrc { color: var(--ink-faint); font-size: 11px; white-space: nowrap; }

/* A link to a domain the board does not carry. It stays as text — struck
   through, so it is obvious the board did this on purpose rather than the
   post being broken. */
.blockedlink {
  color: var(--ink-faint);
  text-decoration: line-through;
  cursor: help;
}

/* --- the board tab strip -------------------------------------------------
   One row of buttons under the masthead, listing every board the reader may
   open — the original board's blue strip, in this board's colours. It wraps
   rather than scrolls: a member on a phone should be able to see that a board
   exists without dragging sideways to find it.

   Placed before the mobile block below on purpose, so the phone rules can
   override these. */
#boardtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
#boardtabs a.tab {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 9px;
  font-size: 11px;
  line-height: 1.4;
  text-decoration: none;
  color: var(--link);
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: 3px;
  white-space: nowrap;
}
#boardtabs a.tab:hover { color: var(--hover); border-color: var(--ink-faint); }
/* The board being read: the same gold the left-hand menu uses for it. */
#boardtabs a.tab.on {
  color: var(--accent);
  font-weight: bold;
  border-color: var(--accent);
  background: var(--panel);
}
/* A sub-board. Indentation means nothing in a row, so it gets the same hook
   the board table uses and a quieter button. */
#boardtabs a.tab.sub { background: var(--panel-2); font-size: 10px; }
#boardtabs a.tab .hook { color: var(--ink-faint); }
#boardtabs a.tab .lock { font-size: 9px; }

/* ==========================================================================
   Phones and small tablets.

   The board is a dense, indented tree of small type — a shape that came from
   1024-pixel screens and does not survive a 390-pixel one untouched. Four
   things change, and nothing else:

     1. The menu stops being a column and becomes a row of buttons above the
        board, so the reading column gets the whole width.
     2. Indentation drops from 18 pixels a level to 9. A reply eight deep
        still shows where it sits without walking off the right edge.
     3. Author and date move to their own line under the subject, so a long
        subject has the full width instead of a third of it.
     4. Everything you tap is at least 34 pixels tall, and text inputs are
        16-pixel type — below that, iOS zooms the page in when you tap into a
        box and does not zoom back out.

   Nothing is hidden on a phone that is visible on a desktop.
   ========================================================================== */
@media (max-width: 760px) {
  body { font-size: 15px; }

  #frame { display: block; }

  #sidebar {
    width: auto;
    flex: none;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 8px 10px;
  }
  .navbox { margin-bottom: 8px; }

  /* The board list folds away behind its own heading; public/board.js closes
     it on first load and remembers whether you left it open. */
  #boardmenu > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    cursor: pointer;
    padding: 9px 12px;
    background: var(--panel-3);
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 15px;
    font-weight: bold;
    color: var(--accent);
  }
  #boardmenu > summary::-webkit-details-marker { display: none; }
  #boardmenu .menu-icon { font-size: 16px; color: var(--ink-dim); }
  #boardmenu[open] > summary { margin-bottom: 8px; }

  /* The board list, as a wrapping row of buttons. */
  ul.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  /* The button is the whole list item, so a padlock or an unread count sits
     inside it beside the name instead of wrapping onto a line of its own. */
  ul.nav li {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px 0 0;
    background: var(--panel-3);
    border: 1px solid var(--line);
    border-radius: 4px;
  }
  ul.nav li a,
  ul.nav li form button.linkish {
    display: block;
    padding: 9px 2px 9px 11px;
    font-size: 14px;
    text-decoration: none;
    line-height: 1.3;
  }
  ul.nav li form { display: flex; }
  ul.nav li.on { border-color: var(--accent); }
  /* Sub-boards are indented in the sidebar by an inline style, which means
     nothing in a row of buttons. */
  ul.nav li[style] { padding-left: 0 !important; }

  .userbox {
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: baseline;
    padding-top: 8px;
  }
  .userbox br { display: none; }

  /* The recent-posts panel folds away behind its own heading, like the board
     list: on a phone the full list is taller than the screen. Folded is not
     hidden — the heading is right there and it remembers nothing, so it opens
     with one tap. */
  #recentmenu > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    cursor: pointer;
    padding: 9px 12px;
    background: var(--panel-3);
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 15px;
    font-weight: bold;
    color: var(--accent);
  }
  #recentmenu > summary::-webkit-details-marker { display: none; }
  #recentmenu > h3 { display: none; }
  #recentmenu[open] > summary { margin-bottom: 8px; }
  ul.recent li { font-size: 14px; padding: 8px 0; }
  ul.recent .rwho, ul.recent .rwhen, ul.recent .rboard { font-size: 13px; }

  /* Bigger targets for a finger, and a little more room between them. */
  #boardtabs { gap: 6px; padding: 8px 10px; }
  /* The tab strip lists every board the reader may open, so the folded board
     menu underneath it is the same list a second time. On a phone, where
     everything is stacked and the screen is the scarce thing, the duplicate
     goes: no board becomes unreachable, because the strip above IS the list.
     On a desktop both stay — the menu is beside the page, not above it. */
  .menubox { display: none; }
  #boardtabs a.tab { font-size: 14px; padding: 8px 11px; }
  #boardtabs a.tab.sub { font-size: 13px; }

  .searchbox { margin-bottom: 8px; }
  .searchbox input[type=search] { font-size: 16px; padding: 7px 8px; }
  .searchbox button { padding: 7px 12px; font-size: 14px; }

  #main { padding: 12px 11px; }
  h1 { font-size: 19px; }
  h2 { font-size: 16px; }
  p.blurb, .hint { font-size: 13px; }

  /* --- the tree ---------------------------------------------------------- */
  ul.thread { padding-left: 9px; }
  ul.thread li { margin: 0; }
  a.subj {
    display: inline-block;
    padding: 5px 0;
    line-height: 1.35;
  }
  /* The byline drops below the subject rather than trailing it. */
  ul.thread .meta {
    display: block;
    font-size: 12.5px;
    margin: -3px 0 4px 0;
  }
  ul.thread .meta::before { content: ""; }
  .thread-block { padding: 10px 0 12px 0; }

  /* --- reading and replying ---------------------------------------------- */
  .inline-post { padding: 9px 10px; }
  .inline-post .inline-body { font-size: 15px; }
  .inline-actions { font-size: 13px; }
  .inline-actions a,
  .inline-actions button.linkish { display: inline-block; padding: 6px 0; }

  input[type=text], input[type=email], input[type=password], input[type=search],
  textarea, select {
    font-size: 16px;      /* anything smaller makes iOS zoom in on focus */
    padding: 7px;
  }
  textarea { height: 160px; }
  button, input[type=submit] { font-size: 15px; padding: 9px 14px; }
  button.linkish { font-size: 14px; padding: 4px 0; }

  .toolbar { gap: 5px; padding: 5px; }
  .toolbar button.fmt { font-size: 14px; padding: 7px 11px; min-width: 38px; }
  .toolbar .fmt-help { padding: 6px 11px; }
  form.inline-reply { padding: 9px; }
  form.inline-reply .reply-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  form.inline-reply .cancel { margin-left: 0; }
  .reply-status { margin-left: 0; font-size: 13px; }

  /* --- a post on its own page -------------------------------------------- */
  .post .text { font-size: 15px; padding: 10px; }
  .post .actions { font-size: 13px; padding: 7px 10px; }
  .post .actions a, .post .actions button.linkish { display: inline-block; padding: 5px 0; }

  /* --- tables ------------------------------------------------------------
     Nothing here is narrow enough for a phone, so they scroll sideways inside
     their own box rather than stretching the page. */
  table.list {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    font-size: 13px;
    -webkit-overflow-scrolling: touch;
  }
  /* On the home page the post count is the least useful column; the board,
     what is new, and the latest post all matter more. */
  table.boards { display: table; width: 100%; }
  table.boards th:nth-child(2), table.boards td:nth-child(2) { display: none; }

  ol.results { padding-left: 22px; }
  ol.results .snip { font-size: 14px; }
  form.searchform { gap: 8px; }
  form.searchform input[type=search] { flex: 1 1 100%; }

  #masthead.art img { max-height: 220px; }
  #foot { font-size: 12px; }
}

/* Very narrow phones: the last 30 pixels of width are worth having. */
@media (max-width: 400px) {
  #main { padding: 10px 8px; }
  ul.thread { padding-left: 7px; }
  ul.nav li a { padding: 8px 9px; font-size: 13.5px; }
}

/* --- pictures placed in the message ---------------------------------------
   A member writes [pic1] where they want their first picture; these are the
   sizes and the two wrapping options that go with it. Sizes are proportions of
   the reading column rather than fixed pixel counts, so a "large" picture is
   large on a desktop and still fits on a phone. */
figure.shot.placed { display: block; margin: 12px 0; }
figure.shot.placed img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: var(--panel-2);
}
figure.shot.placed.sz-small  { max-width: 200px; }
figure.shot.placed.sz-medium { max-width: 380px; }
figure.shot.placed.sz-large  { max-width: 620px; }
figure.shot.placed.sz-full   { max-width: 100%; }

figure.shot.placed.side-left  { float: left;  margin: 6px 14px 8px 0; }
figure.shot.placed.side-right { float: right; margin: 6px 0 8px 14px; }
figure.shot.placed.side-center { margin-left: auto; margin-right: auto; }
/* A float must not escape its own post and push the next one around. */
.post .text::after, .inline-post .inline-body::after, .preview-body::after {
  content: "";
  display: block;
  clear: both;
}
.pic-missing { color: var(--ink-faint); font-size: 11px; }

/* --- choosing where a picture goes, while writing ------------------------- */
.place-pic {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 3px;
}
.place-pic button.put-pic {
  margin: 0;
  font-size: 11px;
  padding: 3px 8px;
}
.place-pic select {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: inherit;
  font-size: 10px;
  padding: 2px;
}
figure.pic-preview { max-width: 172px; }

/* --- the preview of a whole post ------------------------------------------ */
.post-preview {
  border: 1px solid var(--line);
  border-top: none;
  background: var(--panel);
  max-width: 720px;
  margin-bottom: 8px;
}
.post-preview .preview-head {
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  padding: 3px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-dim);
}
.post-preview .preview-body { padding: 9px 10px; line-height: 1.55; }
.post-preview .preview-body p { margin: 0 0 10px 0; }
button.preview-toggle.on { background: var(--panel-2); color: var(--accent); }

/* The gap left for a picture that is still on the member's own computer. */
.pic-slot {
  display: block;
  margin: 10px 0;
  border: 1px dashed var(--line);
  background: var(--panel-2);
  min-height: 20px;
}
.pic-slot img { display: block; width: 100%; height: auto; }
.pic-slot.sz-small  { max-width: 200px; }
.pic-slot.sz-medium { max-width: 380px; }
.pic-slot.sz-large  { max-width: 620px; }
.pic-slot.sz-full   { max-width: 100%; }
.pic-slot.side-left  { float: left;  margin-right: 14px; }
.pic-slot.side-right { float: right; margin-left: 14px; }
.pic-slot.empty {
  padding: 8px;
  font-size: 11px;
  color: var(--ink-faint);
  text-align: center;
}

/* --- equations ------------------------------------------------------------ */
.eq math { font-size: 1.08em; }
.eq-display {
  display: block;
  text-align: center;
  margin: 12px 0;
  overflow-x: auto;
}
.eq-display math { font-size: 1.25em; }
.eq-error {
  color: var(--danger);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px;
  border-bottom: 1px dotted var(--danger);
}

.math-panel {
  border: 1px solid var(--link);
  border-top: none;
  background: var(--panel-2);
  padding: 8px 9px;
  max-width: 720px;
  box-sizing: border-box;
}
.math-pal {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 7px;
  max-height: 96px;
  overflow-y: auto;
}
.math-pal button.math-key {
  margin: 0;
  padding: 3px 7px;
  min-width: 28px;
  font-size: 13px;
  line-height: 1.2;
  background: var(--panel-3);
  border: 1px solid var(--line);
  color: var(--ink);
}
.math-pal button.math-key:hover { background: #232b3d; border-color: var(--link); }
.math-row input.math-src {
  width: 100%;
  box-sizing: border-box;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
  padding: 6px;
}
.math-opts {
  font-size: 11px;
  color: var(--ink-dim);
  margin: 5px 0;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.math-opts input { margin-right: 4px; vertical-align: middle; }
.math-out {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 10px 8px;
  min-height: 34px;
  text-align: center;
  overflow-x: auto;
}
.math-buttons { margin-top: 7px; display: flex; gap: 12px; align-items: center; }
.math-buttons button.math-insert { margin-top: 0; }

@media (max-width: 760px) {
  .math-pal button.math-key { font-size: 15px; padding: 7px 10px; min-width: 38px; }
  .math-pal { max-height: 132px; }
  .math-row input.math-src { font-size: 16px; }
  figure.shot.placed.side-left, figure.shot.placed.side-right {
    /* Wrapping text around a picture needs width a phone does not have. */
    float: none;
    margin: 12px 0;
  }
  .place-pic select { font-size: 13px; padding: 5px; }
  .place-pic button.put-pic { font-size: 13px; padding: 6px 10px; }
}

/* Something to say about the pictures chosen so far — over the limit, or
   renumbered because one was removed. */
.pic-note, .pic-renumber {
  font-size: 11px;
  font-weight: normal;
  margin: 0 0 6px 0;
  width: 100%;
}
.pic-renumber { margin-top: 6px; }

/* One picture per post may be kept at its original resolution. */
label.hires-pick {
  display: block;
  font-size: 10px;
  color: var(--ink-dim);
  margin-top: 3px;
  cursor: pointer;
}
label.hires-pick input { margin: 0 4px 0 0; vertical-align: middle; }
figure.shot.hires .hires-note,
figure.shot.placed.hires .hires-note {
  font-size: 10px;
  color: var(--ink-faint);
  margin-top: 2px;
}
figure.shot.hires a:hover .hires-note { color: var(--accent); }
@media (max-width: 760px) {
  label.hires-pick { font-size: 13px; padding: 4px 0; }
}

/* --- a post its author deleted ------------------------------------------- */
/* Distinct from a moderator's [removed]: the wording is the member's, and it is
   deliberately quiet — the line exists to hold the replies together, not to
   draw the eye to a gap. */
.gone {
  color: var(--ink-faint);
  font-weight: normal;
  letter-spacing: 0.5px;
}
a.subj .gone { color: var(--ink-faint); }

/* --- the activity commentary --------------------------------------------- */
table.list.activity td.when {
  white-space: nowrap;
  color: var(--ink-dim);
  width: 1%;
  font-variant-numeric: tabular-nums;
}
/* Sign-ins are the most numerous and the least interesting, so they recede;
   the things a moderator actually needs to notice stay at full contrast. */
tr.act-login td, tr.act-logout td { color: var(--ink-faint); }
tr.act-register td, tr.act-mod td { background: var(--panel-2); }
tr.act-delete td { color: var(--danger); }

/* --- members' own pages --------------------------------------------------- */
.bio { margin-top: 10px; }
.bio p { line-height: 1.5; }
table.list.members td { vertical-align: top; }
table.list.files td { vertical-align: middle; }
img.tiny {
  height: 24px;
  width: auto;
  vertical-align: middle;
  margin-right: 5px;
  border: 1px solid var(--line);
}

/* The row of "put this picture here" buttons on the page editor. */
.picrefs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
}
button.picref {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--panel-3);
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 3px;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
button.picref img { height: 40px; width: auto; display: block; }
button.picref:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 760px) {
  table.list.activity td.when { white-space: normal; }
  button.picref img { height: 56px; }
  button.picref { padding: 6px; font-size: 12px; }
}

/* --- colours a member can use in a post ---------------------------------- */
/* These are the ONLY colours a post can produce. views.js matches the word a
   member typed against a fixed list and emits one of these class names; the
   values live here, where nothing a member writes can reach them.

   All of them are chosen to be legible on the dark reading column. There is
   deliberately no black, and no way to write an arbitrary colour: "invisible
   text" is not a joke anyone gets to make twice on a message board. */
.c-red     { color: #ff8a80; }
/* Deliberately louder than c-red (which is the urgent mark's softer shade):
   this one is for a line that must not be skimmed past. */
.c-scarlet { color: #ff2b2b; }
.c-orange  { color: #ffb066; }
.c-gold    { color: #ffce6b; }
.c-yellow  { color: #f2e07a; }
.c-green   { color: #8fd39a; }
.c-teal    { color: #6fd3c4; }
.c-cyan    { color: #7fd8ff; }
.c-blue    { color: #8ab6ff; }
.c-violet  { color: #c3a3ea; }
.c-magenta { color: #f08ad0; }
.c-pink    { color: #ffa8c0; }
.c-grey    { color: #9aa4b8; }
.c-white   { color: #ffffff; }

/* Larger text needs its line spacing brought back under control, or a 40pt
   word pushes the lines around it apart. */
.sized { line-height: 1.1; }
.post .text .sized, .inline-body .sized, .bio .sized { overflow-wrap: anywhere; }

/* --- the size, colour and emoji panels ----------------------------------- */
.pick-panel {
  border: 1px solid var(--line);
  background: var(--panel-2);
  padding: 6px 8px 4px;
  margin: 0 0 6px 0;
  max-width: 720px;
  max-height: 340px;
  overflow-y: auto;
}
.pick-head {
  font-size: 10px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 4px 0 3px;
}
.pick-row { display: flex; flex-wrap: wrap; gap: 3px; }
button.pick-key {
  background: var(--panel-3);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 2px;
  min-width: 26px;
  padding: 3px 5px;
  font: inherit;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
}
button.pick-key:hover { border-color: var(--accent); background: var(--panel); }
/* The colour swatches: the dot takes its colour from the same class the post
   would use, so the button always shows the truth. */
button.pick-key.swatch { min-width: 30px; }
button.pick-key.swatch .dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}
.pick-foot { margin-top: 5px; }

@media (max-width: 760px) {
  .pick-panel { max-height: 260px; }
  button.pick-key { font-size: 20px; min-width: 36px; padding: 6px; }
  button.pick-key.swatch { min-width: 40px; }
}

/* --- typefaces a signature can use --------------------------------------- */
/* Same arrangement as the colours: views.js matches the word a member typed
   against a fixed list and emits one of these class names. The stacks are here,
   where nothing typed can reach them.

   Every one ends in a generic family, so a reader whose computer lacks the face
   gets something sensible rather than something arbitrary. NOTHING SYMBOLIC IS
   ON THIS LIST — see the note in views.js. */
.f-sans      { font-family: Verdana, Geneva, sans-serif; }
.f-serif     { font-family: "Times New Roman", Times, serif; }
.f-mono      { font-family: Consolas, "Courier New", monospace; }
.f-georgia   { font-family: Georgia, "Times New Roman", serif; }
.f-garamond  { font-family: Garamond, Georgia, serif; }
.f-palatino  { font-family: "Palatino Linotype", Palatino, Georgia, serif; }
.f-times     { font-family: "Times New Roman", Times, serif; }
.f-courier   { font-family: "Courier New", Courier, monospace; }
.f-trebuchet { font-family: "Trebuchet MS", Verdana, sans-serif; }
.f-tahoma    { font-family: Tahoma, Verdana, sans-serif; }
.f-impact    { font-family: Impact, "Arial Black", sans-serif; }
.f-comic     { font-family: "Comic Sans MS", "Segoe Print", cursive; }
.f-script    { font-family: "Brush Script MT", "Segoe Script", cursive; }

/* --- signatures ----------------------------------------------------------- */
/* Set apart from the message by a rule and by being quieter, the way a
   signature has always been: it is not part of what the person is saying. */
.sig {
  border-top: 1px solid var(--line-soft);
  margin: 10px 0 0;
  padding-top: 5px;
  font-size: 11px;
  color: var(--ink-dim);
  line-height: 1.35;
}
.sig p { margin: 0; }
/* The little picture. Constrained here as well as on the way in, so an old
   signature picture from before the limits changed still cannot dominate. */
img.sigpic {
  max-width: 200px;
  max-height: 60px;
  width: auto;
  vertical-align: middle;
  margin: 0 4px;
}
.sig-preview {
  border: 1px solid var(--line);
  background: var(--panel-2);
  padding: 6px 8px;
  margin-bottom: 8px;
  max-width: 720px;
}

/* --- documents attached to a post ----------------------------------------- */
.postfiles {
  margin: 10px 0 0;
  border-top: 1px solid var(--line-soft);
  padding-top: 6px;
}
.postfiles-head {
  font-size: 10px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}
.postfiles table.list { max-width: 620px; }
.postfiles p.hint { margin-top: 4px; }

/* --- a moderator's urgent post -------------------------------------------- */
/* Red, and only a moderator can produce it — see the note in app.js. The colour
   is the same --danger the board uses everywhere else for "pay attention",
   rather than a new one, so the board keeps one vocabulary.

   Note the specificity: a.subj.urgent has to beat a.subj:visited, or an urgent
   post turns purple the moment somebody reads it and stops being urgent to
   exactly the people who most need to see it again. */
a.subj.urgent,
a.subj.urgent:visited,
a.subj.urgent.read,
a.subj.urgent.read:visited,
.post .head .urgent {
  color: var(--danger);
  font-weight: bold;
}
a.subj.urgent:hover { color: #ffb4ab; }
/* An urgent post that is also new keeps the new-post arrow, but stays red:
   urgent is the stronger signal and the arrow already says "new". */
a.subj.unread.urgent, a.subj.unread.urgent:visited { color: var(--danger); }

.urgent-pick { margin: 4px 0; }
.urgent-pick input { margin-right: 5px; vertical-align: middle; }
a.subj.unread.urgent::before { color: var(--danger); }

/* The quiet "(all times UTC)" note after a board's description. */
.blurb .tz { color: var(--ink-faint); font-size: 11px; white-space: nowrap; }

/* The message box while a picture is being dragged onto it. */
textarea.drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  background: var(--panel-3);
}


/* --- "email me about answers" --------------------------------------------
   The two notification boxes on the posting form. A fieldset rather than two
   loose checkboxes because they are one question with two parts, and because
   the legend gives a screen reader something to announce. */
fieldset.notify {
  margin: 10px 0;
  padding: 8px 10px 4px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-2);
}
fieldset.notify legend {
  padding: 0 5px;
  font-size: 11px;
  font-weight: bold;
  color: var(--ink-dim);
}
fieldset.notify .switch { display: block; margin: 3px 0; }
fieldset.notify .hint { margin: 6px 0 4px 0; }
.inline-reply fieldset.notify { margin: 8px 0 4px 0; }