:root {
  /* Let the browser supply readable defaults in both light and dark. */
  color-scheme: light dark;

  /* Vote colors: the arrow and count before voting, dark enough to read on a
     light background. */
  --up: #c2410c;
  --down: #1d4ed8;

  /* The same hues as a filled button once voted. Light enough that the black
     arrow and count on top stay readable, in either theme. */
  --up-fill: #fb923c;
  --down-fill: #60a5fa;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Lightened to read on a dark background; the fills do not change. */
    --up: #fb923c;
    --down: #60a5fa;
  }
}

body {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
  font:
    1rem/1.5 system-ui,
    sans-serif;
}

/* Title on the left, name field and actions pushed to the right. */
header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

header h1 {
  margin: 0 auto 0 0;
}

h1 a {
  color: inherit;
  text-decoration: none;
}

input,
textarea,
button,
.button {
  font: inherit;
  padding: 0.4rem 0.8rem;
}

/* A link that navigates, drawn with the platform's own button colors. */
.button {
  border: 1px solid ButtonBorder;
  border-radius: 4px;
  background: ButtonFace;
  color: ButtonText;
  text-decoration: none;
}

button {
  cursor: pointer;
}

form {
  display: grid;
  gap: 0.5rem;
}

form button {
  justify-self: start;
}

article {
  border: 1px solid #8884;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.title {
  font-size: 1.25rem;
  margin: 0 0 0.25rem;
  overflow-wrap: break-word;
}

.author {
  font-weight: 600;
  margin: 0;
}

.body {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.votes {
  display: flex;
  gap: 0.5rem;
}

/* The default button face is a mid grey in dark mode, where no orange or blue
   is readable. Canvas is the page's own background in either theme. */
.votes button {
  background: Canvas;
  border: 1px solid #8888;
}

.votes .up {
  color: var(--up);
}

.votes .down {
  color: var(--down);
}

/* The side this browser voted for: the colors swap over, so the button itself
   is the vote color with a black arrow and count on it. Clicking it again takes
   the vote back; clicking the other one switches sides. */
.votes button.chosen {
  color: #000;
  font-weight: 700;
}

.votes .up.chosen {
  background: var(--up-fill);
  border-color: var(--up-fill);
}

.votes .down.chosen {
  background: var(--down-fill);
  border-color: var(--down-fill);
}

/* Pictures in a post: one under the other, never wider than the post. */
.images {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.images img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* A post without pictures has an empty box: no gap for it. */
.images:empty {
  display: none;
}

/* --- Error popup notifications (frontend/src/notify.ts) --------------
   Fixed at the top centre, where the eye already is, so a popup is visible
   without scrolling. Red background-tint, thick red border, a "!" badge and
   a short slide-in + shake make it hard to miss; the "Error" label means it
   does not rely on colour alone. Only one popup is shown at a time. Motion is skipped for users who ask
   for reduced motion. */
#notifications {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(32rem, calc(100vw - 2rem));
}

.notification {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 3px solid #d62828;
  border-radius: 8px;
  background: #fde8e8;
  color: #5c0a0a;
  font-weight: 600;
  box-shadow:
    0 0 0 4px #d6282833,
    0 6px 20px #0006;
  transition: opacity 0.5s ease-in;
  animation:
    notification-in 0.35s ease-out,
    notification-shake 0.4s 0.35s;
}

.notification::before {
  content: "!";
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: #d62828;
  color: #fff;
  text-align: center;
  line-height: 1.6rem;
  font-weight: 800;
}

.notification p {
  flex: 1;
  margin: 0;
  overflow-wrap: break-word;
}

.notification .notification-title {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #b01212;
}

.notification button {
  flex: none;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0 0.2rem;
}

.notification.fading {
  opacity: 0;
}

@keyframes notification-in {
  from {
    opacity: 0;
    transform: translateY(-1.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes notification-shake {
  25% {
    transform: translateX(-6px);
  }
  50% {
    transform: translateX(6px);
  }
  75% {
    transform: translateX(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .notification {
    animation: none;
  }
}