/* Open Talk: an old-school website look. Plain colours, serif text, real borders.
   Made with plain CSS, no images needed. */

:root {
  --bg: #f2efe0;
  --paper: #fff;
  --ink: #000;
  --muted: #444;
  --navy: #003366;
  --maroon: #800000;
  --link: #0000ee;
  --visited: #551a8b;
  --rule: #999;
  --gray: #d4d0c8;
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: Verdana, Arial, Helvetica, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* A percentage (not pixels), so the text size people chose in their browser is respected. */
html {
  font-size: 106.25%;
}

body {
  margin: 0;
  padding: 16px 12px 24px;
  font-family: var(--serif);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}

a {
  color: var(--link);
}
a:visited {
  color: var(--visited);
}
a:hover {
  color: #cc0000;
}
a:active {
  color: #ff0000;
}

:focus-visible {
  outline: 2px dashed #cc0000;
  outline-offset: 2px;
}

/* The header is dark, so its focus outline is light. */
.site-header a:focus-visible {
  outline: 2px dashed #ffffcc;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  padding: 6px 10px;
  background: #ffffcc;
  border: 1px solid #000;
  z-index: 10;
}
.skip-link:focus {
  top: 8px;
}

/* ---------- Page ---------- */

.page {
  max-width: 780px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid #000;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.site-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  color: #fff;
  background: var(--navy);
  border-bottom: 4px double #fff;
}
.site-header .icon {
  flex-shrink: 0;
  border: 2px solid #fff;
}
.brand {
  display: block;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.1;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.brand:visited,
.brand:hover {
  color: #fff;
}
.tagline {
  margin: 2px 0 0;
  color: #ffffcc;
  font-style: italic;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  padding: 5px 20px;
  font-family: var(--sans);
  font-size: 0.85rem;
  background: var(--gray);
  border-bottom: 1px solid #000;
}
.nav > * + *::before {
  content: "|";
  display: inline-block;
  margin: 0 10px;
  color: #000;
  text-decoration: none;
}
.nav a {
  white-space: nowrap;
}
.inline-form {
  display: inline;
  margin: 0;
}
.linklike {
  padding: 0;
  font: inherit;
  color: var(--link);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
}
.linklike:hover {
  color: #cc0000;
}
.linklike.danger {
  color: #cc0000;
}

.content {
  padding: 20px 24px 28px;
  overflow-wrap: anywhere;
}

.content h1 {
  margin: 0 0 14px;
  padding-bottom: 4px;
  font-size: 2rem;
  line-height: 1.2;
  color: var(--navy);
  border-bottom: 2px solid var(--navy);
}
.content h2 {
  margin: 26px 0 8px;
  font-size: 1.4rem;
  color: var(--maroon);
}
.content h3 {
  margin: 18px 0 6px;
  font-size: 1.15rem;
}
.content p {
  margin: 0 0 12px;
}
.content hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 20px 0;
}

.site-footer {
  padding: 10px 20px 14px;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--rule);
}
.site-footer p {
  margin: 4px 0;
}
.site-footer nav a + a::before {
  content: "|";
  margin: 0 8px;
  color: var(--muted);
}

/* ---------- Buttons and forms ---------- */

.btn {
  display: inline-block;
  min-width: 80px;
  padding: 3px 14px;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: #000;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: var(--gray);
  border: 2px outset #f4f4f4;
}
.btn:visited {
  color: #000;
}
.btn:hover:not(:disabled) {
  color: #000;
  background: #e4e0d8;
}
.btn:active:not(:disabled) {
  border-style: inset;
  padding: 4px 13px 2px 15px;
}
.btn:disabled {
  color: #777;
  cursor: default;
}
.btn-primary {
  font-weight: bold;
}
.btn-danger {
  color: #a00000;
  font-weight: bold;
}
.btn-danger:visited {
  color: #a00000;
}

.form {
  max-width: 560px;
}
fieldset {
  margin: 10px 0;
  padding: 10px 14px 12px;
  border: 2px groove #ccc;
}
legend {
  padding: 0 6px;
  font-weight: bold;
}

.field {
  margin: 0 0 12px;
}
.field label {
  display: block;
  margin-bottom: 2px;
  font-weight: bold;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="url"],
.field input[type="search"],
.field textarea {
  width: 100%;
  padding: 3px 5px;
  font: inherit;
  color: #000;
  background: #fff;
  border: 2px inset #aaa;
}
.field textarea {
  resize: vertical;
}
.field input:focus,
.field textarea:focus {
  background: #ffffee;
  outline: 2px solid var(--navy);
  outline-offset: 0;
}
.field [aria-invalid="true"] {
  border-color: #cc0000;
}
.field-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.field-check label {
  margin: 0;
  font-weight: normal;
}
.required {
  color: #cc0000;
}
.hint,
.counter {
  margin: 2px 0 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--muted);
}
.counter .over {
  color: #cc0000;
  font-weight: bold;
}
.field-error {
  margin: 2px 0 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: bold;
  color: #cc0000;
}

.form-status:empty {
  display: none;
}
.form-status {
  margin: 0 0 10px;
  padding: 6px 10px;
  font-family: var(--sans);
  font-size: 0.85rem;
  border: 1px solid #000;
}
.form-status-error {
  color: #800000;
  background: #ffdddd;
}
.form-status-ok {
  color: #004400;
  background: #ddffdd;
}
.notice-inline.error {
  color: #cc0000;
  font-weight: bold;
}

/* ---------- Notices ---------- */

.notice {
  margin: 14px 0;
  padding: 8px 12px;
  background: #ffffcc;
  border: 1px solid #000;
  border-left-width: 8px;
}
.notice p {
  margin: 0;
}
.notice .notice-title {
  margin: 0 0 2px;
  padding: 0;
  font-size: 1rem;
  font-weight: bold;
  color: #000;
  border: 0;
}
.notice-info {
  background: #e6f0fa;
  border-left-color: var(--navy);
}
.notice-warning {
  border-left-color: #cc9900;
}
.notice-error {
  background: #ffe6e6;
  border-left-color: #cc0000;
}

/* ---------- Profile ---------- */

.profile-head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.profile-head h1 {
  margin-bottom: 8px;
}
.avatar {
  display: block;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--gray);
  border: 2px inset #aaa;
}
.bio {
  font-style: italic;
}

/* Hidden field for simple bots: off screen, never display:none */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Posts ---------- */

.post-list {
  margin: 12px 0;
}
.post {
  padding: 10px 0 12px;
  border-bottom: 1px solid #ccc;
}
.post:first-child {
  border-top: 1px solid #ccc;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 4px;
  font-family: var(--sans);
  font-size: 0.8rem;
}
.post-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
}
.avatar-small {
  width: 32px;
  height: 32px;
  object-fit: cover;
  background: var(--gray);
  border: 1px solid #888;
}
.post-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* The picture of a linked news article (the link is also in the text, so this one is skipped by keyboards and screen readers) */
.link-preview {
  display: block;
  margin-top: 8px;
  max-width: 520px;
  border: 1px solid #888;
  background: var(--gray);
}
.link-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.post-actions {
  display: flex;
  gap: 14px;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 0.8rem;
}
.post-actions:empty {
  display: none;
}
.post-deleted {
  color: var(--muted);
  font-style: italic;
}
.compose {
  margin: 10px 0 18px;
}
.empty {
  color: var(--muted);
  font-style: italic;
}
.tabs {
  display: flex;
  gap: 0;
  margin: 18px 0 8px;
  font-family: var(--sans);
  font-size: 0.85rem;
  border-bottom: 2px solid var(--navy);
}
.tabs a {
  padding: 4px 16px;
  margin-right: 4px;
  color: #000;
  text-decoration: none;
  background: var(--gray);
  border: 1px solid #888;
  border-bottom: 0;
}
.tabs a[aria-current="page"] {
  color: #fff;
  font-weight: bold;
  background: var(--navy);
  border-color: var(--navy);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Tables and admin ---------- */

.table {
  width: 100%;
  margin: 12px 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  border-collapse: collapse;
}
.table th,
.table td {
  padding: 5px 8px;
  text-align: left;
  vertical-align: top;
  border: 1px solid #bbb;
}
.table thead th {
  background: var(--gray);
}
.table tbody th {
  width: 14em;
  font-weight: bold;
  background: #f2f2f2;
}
.table code {
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}
.search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  font-family: var(--sans);
  font-size: 0.85rem;
}
.search input {
  padding: 3px 5px;
  font: inherit;
  border: 2px inset #aaa;
}

/* ---------- Reports ---------- */

.report {
  margin: 12px 0;
  padding: 8px 12px;
  border: 1px solid #888;
  background: #fafaf5;
}
.report p {
  margin: 4px 0;
}
.report-head {
  font-family: var(--sans);
  font-size: 0.85rem;
}
.report-text {
  white-space: pre-wrap;
}
.report-preview {
  margin: 12px 0;
  padding: 6px 14px;
  background: #f4f1e4;
  border-left: 4px solid var(--navy);
}

/* ---------- Legal text and policy editor ---------- */

.legal h2 {
  margin-top: 28px;
}
.legal ul {
  padding-left: 1.4em;
}
.policy-text {
  min-height: 24em;
  font-family: Consolas, "Courier New", monospace !important;
  font-size: 0.85rem !important;
}

/* ---------- Misc ---------- */

.icon {
  vertical-align: middle;
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 16px 0;
}

time {
  white-space: nowrap;
}

/* ---------- Small screens ---------- */

@media (max-width: 600px) {
  html {
    font-size: 100%;
  }
  body {
    padding: 0;
  }
  .page {
    border-width: 0 0 1px;
    box-shadow: none;
  }
  .site-header {
    padding: 12px 14px;
  }
  .brand {
    font-size: 1.6rem;
  }
  .nav {
    padding: 6px 14px;
  }
  .content {
    padding: 14px;
  }
  .profile-head {
    flex-direction: column;
  }
}