/* 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 {
  flex: 0 0 160px;
  width: 160px;
  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; }
.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; }

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; }
/* New posts are gold, the same gold as the board you are reading, with a small
   arrow in front. Read posts keep the ordinary link blue, so the page does not
   change character just because you have been away. */
a.subj.unread,
a.subj.unread:visited { 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; }

/* ==========================================================================
   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; }

  .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; }
}