/* ==========================================================================
   Announcements — a brick wall with a notice board bolted to it.
   Layers on top of site.css: the shared chrome (footer, tokens) stays, the
   space backdrop does not.
   ========================================================================== */

:root {
  --mortar: #2b1512;
  --board:  #f4ecd6;
  --ink:    #241a10;
  --chrome: #c0c0c0;
}

/* --------------------------------------------------------------- backdrop */
/* site.css hangs the starfields off <html>, which no body class can reach —
   so the theme is matched on the ancestor with :has(). html::before becomes
   the brick tile, html::after (the second, drifting starfield) is dropped,
   and body::before turns into the shading that keeps a flat tile from
   reading like wallpaper. */
html:has(.theme-brick) { background: var(--mortar); }

html:has(.theme-brick)::before {
  inset: 0;
  /* 50x49 source, doubled: chunky bricks, and the seam lands off-screen. */
  background: url("/img/announcements/bg-bricks.png") repeat 0 0 / 100px 98px;
  image-rendering: pixelated;
  animation: none;
}
html:has(.theme-brick)::after { content: none; }

.theme-brick::before {
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(255, 214, 140, .16), transparent 70%),
    radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0, 0, 0, .62));
}

/* ------------------------------------------------------------------ layout */
.wall {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 620px);
  align-items: start;
  justify-content: center;
  gap: clamp(16px, 3vw, 34px);
  max-width: 900px;
  margin: 0 auto;
  /* The top padding is a fixed number, not a clamp: it is the gap under the
     corner button, and a viewport-relative one made the board creep toward
     the button as the window narrowed. Same reason the button's own offsets
     below are fixed. Mobile picks its own pair, once, in the media query. */
  padding: 92px clamp(12px, 4vw, 28px) 8px;
}

/* ------------------------------------------------------------- the board */
/* A slab screwed to the wall: outset frame, hard drop shadow, inset well. */
.wall__board {
  position: relative;
  padding: 8px;
  border: 5px outset #8a6b3a;
  background: linear-gradient(180deg, #6b4a22, #4a3116);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(0, 0, 0, .35);
}

.wall__list {
  height: min(60vh, 460px);
  overflow-y: scroll;      /* always shown — the scrollbar is half the look */
  overscroll-behavior: contain;
  padding: 10px 12px;
  border: 3px inset #e7dcc0;
  background: var(--board);
  color: var(--ink);
}

/* ------------------------------------------------------------- the posts */
.post {
  position: relative;
  padding: 12px 14px 14px;
  border: 2px ridge #b9a77c;
  background: #fffaf0;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .18);
}
.post + .post { margin-top: 12px; }

/* The stamp sits in the section's corner, riding up over its own border. */
.post__stamp {
  position: absolute;
  top: -9px;
  right: 8px;
  margin: 0;
  padding: 1px 6px;
  border: 1px solid #8a6b3a;
  background: #e8ddbd;
  font: 700 10px/1.4 var(--mono);
  letter-spacing: .12em;
  color: #6a4b1c;
}

.post__body {
  margin: 0;
  font: 17px/1.5 var(--serif);
  /* The body is one <p> holding the text as it was typed, newlines and all:
     pre-wrap is what keeps the line breaks the author pressed enter for,
     since HTML would otherwise collapse them into single spaces. */
  white-space: pre-wrap;
}

/* Admin mode's X, in the post's other corner from the stamp. It ships
   hidden and js/announce.js unhides it; one tap arms it ("SURE?"), the next
   deletes, so a mis-tap on a small screen costs nothing. */
.post__del {
  position: absolute;
  top: -9px;
  left: 8px;
  padding: 1px 6px;
  border: 1px solid #8a2018;
  background: #e8ddbd;
  font: 700 10px/1.4 var(--mono);
  letter-spacing: .12em;
  color: #8a2018;
  cursor: pointer;
}
.post__del:hover,
.post__del:focus-visible { background: #8a2018; color: #fff; }
.post__del.is-armed {
  background: #8a2018;
  color: #fff;
  letter-spacing: .08em;
}

.post__by {
  margin: 6px 0 0;
  font: italic 12px/1.4 var(--serif);
  text-align: right;
  color: #6a4b1c;
}

.post__empty {
  margin: 0;
  font: 15px/1.5 var(--mono);
  text-align: center;
  color: #6a5c44;
}

/* ------------------------------------------------- the Netscape scrollbar */
/* Win95/Netscape chrome: a stippled track, outset buttons with arrows, and a
   thumb with a bevel. Firefox gets `scrollbar-color`, which is as close as it
   allows. The arrows are inline SVG so there's no extra image to ship. */
.wall__list { scrollbar-color: var(--chrome) #dedede; }

.wall__list::-webkit-scrollbar { width: 17px; }

.wall__list::-webkit-scrollbar-track {
  background:
    repeating-conic-gradient(#fff 0 25%, #cfcfcf 0 50%) 0 0 / 2px 2px;
  border-left: 1px solid #808080;
}

.wall__list::-webkit-scrollbar-thumb {
  background: var(--chrome);
  border: 1px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
}

.wall__list::-webkit-scrollbar-button:vertical {
  height: 17px;
  background: var(--chrome) center / 7px 4px no-repeat;
  border: 1px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
}
/* :start/:end keep the arrows pointing the right way and, more importantly,
   stop webkit drawing a third phantom button at each end. */
.wall__list::-webkit-scrollbar-button:vertical:start:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4'%3E%3Cpath d='M3.5 0 7 4H0z' fill='%23000'/%3E%3C/svg%3E");
}
.wall__list::-webkit-scrollbar-button:vertical:end:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4'%3E%3Cpath d='M0 0h7L3.5 4z' fill='%23000'/%3E%3C/svg%3E");
}
.wall__list::-webkit-scrollbar-button:vertical:start:increment,
.wall__list::-webkit-scrollbar-button:vertical:end:decrement { display: none; }

.wall__list::-webkit-scrollbar-corner { background: var(--chrome); }

/* ----------------------------------------------------------- back buttons */
.brick-btn {
  display: inline-block;
  padding: 7px 16px;
  border: 4px outset #d8b25e;
  background: linear-gradient(180deg, #8c2018, #5a0f0a);
  font: 400 19px/1.2 var(--display);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gold-hi);
  text-decoration: none;
  text-shadow: 1px 1px 0 #000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .55);
}
.brick-btn:hover,
.brick-btn:focus-visible {
  border-color: #ffe9a8;
  background: linear-gradient(180deg, #b32a20, #6f140d);
  color: #fff;
}

/* Pinned to the top-right of the page, not the viewport: scrolled past, it
   goes away, and the one under the board takes over. */
.brick-btn--corner {
  position: absolute;
  z-index: 4;
  top: 24px;
  right: 24px;
}

/* BACK stays centred on the page; ADMIN rides at the right end of the same
   line. Three columns rather than a flex row so the middle one is centred on
   the page, not on what's left after the admin button. */
.wall__back {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  /* The board's own width, so ADMIN's right edge lines up with the board's
     rather than with the page's. */
  width: min(620px, calc(100% - 2 * clamp(12px, 4vw, 28px)));
  margin: 26px auto 6px;
  text-align: center;
}
.wall__back > .brick-btn { grid-column: 2; }

.wall__admin {
  position: relative;
  grid-column: 3;
  justify-self: end;
}

/* ------------------------------------------------------- the footer dancer */
/* Same treatment the homepage gives its astronaut, including the bob, so the
   two pages sign off the same way. */
.mascot {
  position: relative;
  z-index: 2;
  margin: -12px 0 0;
  padding-bottom: 26px;
  text-align: center;
  line-height: 0;
}
.mascot img { width: auto; height: 40px; }

@media (prefers-reduced-motion: no-preference) {
  .mascot img { animation: bob 3.4s ease-in-out infinite alternate; }
}
@keyframes bob { to { transform: translateY(-9px); } }

/* ------------------------------------------------------------ admin mode */
/* Two controls in two places: ADMIN/EXIT ADMIN on the bottom line beside
   BACK, and NEW POST floating in the board's own bottom-right corner. Each
   raises its panel over what it belongs to — the password over the line, the
   post form over the posts. Both wear the back button's brass-and-red chrome
   so they read as part of the wall. */
.admin__toggle {
  padding: 7px 16px;
  border: 4px outset #d8b25e;
  background: linear-gradient(180deg, #8c2018, #5a0f0a);
  font: 400 19px/1.2 var(--display);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gold-hi);
  text-shadow: 1px 1px 0 #000;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .55);
}
.admin__toggle:hover,
.admin__toggle:focus-visible {
  border-color: #ffe9a8;
  background: linear-gradient(180deg, #b32a20, #6f140d);
  color: #fff;
}
.admin__toggle.is-cancel { background: linear-gradient(180deg, #4a3116, #2b1a08); }

/* Bolted to the board's inner corner, over the scrollbar's end — the posts
   keep scrolling underneath it. */
.admin__new {
  position: absolute;
  z-index: 5;
  right: 14px;
  bottom: 14px;
  padding: 6px 12px;
  border: 3px outset #d8b25e;
  background: linear-gradient(180deg, #8c2018, #5a0f0a);
  font: 400 15px/1.2 var(--display);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gold-hi);
  text-shadow: 1px 1px 0 #000;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .55);
}
.admin__new:hover,
.admin__new:focus-visible {
  border-color: #ffe9a8;
  background: linear-gradient(180deg, #b32a20, #6f140d);
  color: #fff;
}

/* The panels are the board again, one size down: outset frame, inset well. */
.admin__panel {
  position: absolute;
  z-index: 6;
  padding: 10px 12px 12px;
  border: 4px outset #8a6b3a;
  background: linear-gradient(180deg, #6b4a22, #4a3116);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .6);
  text-align: left;
}

/* Over the posts, filling the well it was raised from. */
.admin__panel--post {
  right: 14px;
  bottom: 14px;
  width: min(340px, calc(100% - 28px));
}

/* Above ADMIN, hanging off its right edge so it stays on screen. */
.admin__panel--login {
  right: 0;
  bottom: calc(100% + 8px);
  width: min(280px, calc(100vw - 32px));
}

.admin__title {
  margin: 0 0 8px;
  font: 400 16px/1.2 var(--display);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-hi);
  text-shadow: 1px 1px 0 #000;
}

.admin__field {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 6px 8px;
  border: 3px inset #e7dcc0;
  background: var(--board);
  font: 15px/1.4 var(--serif);
  color: var(--ink);
}
.admin__field--body { resize: vertical; }

/* iOS Safari sizes a date input from its own picker widget and ignores the
   width, so it runs past the panel's right edge; strip the native appearance
   and let it shrink to the same box as the fields above it. */
.admin__field[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 0;
}
.admin__field[type="date"]::-webkit-date-and-time-value { text-align: left; }

.admin__act {
  display: block;
  width: 100%;
  padding: 7px 12px;
  border: 3px outset #d8b25e;
  background: linear-gradient(180deg, #8c2018, #5a0f0a);
  font: 400 16px/1.2 var(--display);
  letter-spacing: .05em;
  color: var(--gold-hi);
  text-shadow: 1px 1px 0 #000;
  cursor: pointer;
}
.admin__act:hover:not(:disabled) { background: linear-gradient(180deg, #b32a20, #6f140d); color: #fff; }
.admin__act:disabled { opacity: .6; cursor: default; }

.admin__note {
  margin: 8px 0 0;
  font: 700 12px/1.4 var(--mono);
  color: #ffd0c4;
}
.admin__note:empty { display: none; }

/* ------------------------------------------------------------------ small */
@media (max-width: 720px) {
  .wall {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding-top: 76px;
  }
  .brick-btn--corner { top: 14px; right: 12px; }
  /* Narrow enough that a centred BACK plus ADMIN would collide: stack the
     three columns into one line of two, packed to the middle. */
  .wall__back {
    grid-template-columns: auto auto;
    justify-content: center;
  }
  .wall__back > .brick-btn { grid-column: 1; }
  .wall__admin { grid-column: 2; }
  .wall__board { width: 100%; }
  .wall__list { height: min(64vh, 420px); }
}