/* dotplan.club: plain text in a narrow column, like a .plan file. */

:root {
  color-scheme: light dark;
  --fg: #1f1f1f;
  --bg: #fbfaf6;
  --muted: #6e6a60;
  --rule: #e2ded3;
  --link: #1b5aa6;
  --focus: #fff4c2;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e4e2dc;
    --bg: #151514;
    --muted: #9b978d;
    --rule: #2f2e2b;
    --link: #8ab4f8;
    --focus: #33301f;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

header,
main,
footer {
  max-width: 82ch;
  margin: 0 auto;
  padding: 0 16px;
}

header {
  padding-top: 24px;
  padding-bottom: 8px;
}

footer {
  padding-top: 32px;
  padding-bottom: 32px;
}

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

.site {
  font-weight: bold;
  text-decoration: none;
}

h1,
h2 {
  font-size: 1em;
  margin: 1.5em 0 0.25em;
}

pre {
  margin: 0.5em 0;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.meta {
  color: var(--muted);
  font-size: 0.9em;
}

.intro {
  color: var(--muted);
}

.member {
  border-top: 1px solid var(--rule);
}

.post {
  padding: 0.75em 0;
  border-top: 1px dashed var(--rule);
}

.member .post {
  border-top: none;
  padding-top: 0;
}

.post.reply {
  margin-left: calc(var(--depth) * 2ch);
  padding-left: 1ch;
  border-left: 1px solid var(--rule);
}

.post.focus {
  background: var(--focus);
}

.pager {
  padding: 1em 0;
}