:root {
  --bg: #0e1116;
  --surface: #161b22;
  --surface-2: #1c2230;
  --border: #2a3240;
  /* Post cards use a slightly brighter border than the rest of the UI, so a
     publication reads as a distinct block without becoming loud. */
  --border-strong: #3c4859;
  --video-accent: #8b7bff;
  --text: #e6edf3;
  --muted: #9aa7b4;
  --accent: #4c8dff;
  --danger: #ff6b6b;
  --warning: #f0b429;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

.topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .3px;
  color: var(--text);
  text-decoration: none;
}

.brand-private { color: var(--accent); }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.container {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.footer {
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  border-top: 1px solid var(--border);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
}

.card-narrow { max-width: 460px; margin: 40px auto; }

h1 { font-size: 22px; margin: 0 0 12px; }

.page-title { margin-bottom: 20px; }

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

.badge {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--muted);
}

.btn {
  display: inline-block;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 15px;
  text-decoration: none;
}

.btn-ghost { background: transparent; color: var(--accent); }

.code-form { display: grid; gap: 10px; margin-top: 16px; }

.code-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.alert {
  border-radius: 8px;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 14px;
}

.alert-error { background: rgba(255, 107, 107, .12); border: 1px solid var(--danger); }
.alert-warning { background: rgba(240, 180, 41, .12); border: 1px solid var(--warning); }
.alert ul { margin: 0; padding-left: 18px; }

.message { margin: 12px 0 16px; }

/* ---------------------------------------------------------------------------
   Public landing page (/)
   The only page an anonymous visitor sees.  It reuses the tokens, typography
   and 12px radius family of the private pages, so the site reads as one design
   - no second design system and no external CDN.
   --------------------------------------------------------------------------- */
.hero {
  max-width: 620px;
  margin: 32px auto 0;
  text-align: center;
}

.hero-title {
  margin: 0 0 12px;
  font-size: 34px;
  letter-spacing: .3px;
}

.hero-lead {
  margin: 0 0 24px;
  font-size: 17px;
  color: var(--muted);
}

.hero-cta { margin: 0; }

.hero-hint { margin: 14px 0 0; font-size: 14px; }

/* The main call to action: a larger tap target than the buttons inside the
   private pages, without turning into a different style. */
.btn-lg {
  padding: 14px 28px;
  font-size: 17px;
  font-weight: 600;
}

.landing-card { max-width: 620px; margin: 28px auto 0; }

.landing-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
}

.landing-list li::marker { color: var(--accent); }

/* Small "back to the landing" / navigation link under a card or a form. */
.back-link { margin: 16px 0 0; font-size: 14px; }

/* Information block of the feed header: native <details>, rendered only when the
   administrator filled SiteSettings.information_html.  The panel floats under the
   header so it never pushes the feed layout around. */
.info { position: relative; }

.info-toggle {
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--accent);
  background: transparent;
  user-select: none;
  white-space: nowrap;
}

.info-toggle::-webkit-details-marker { display: none; }
.info-toggle::after { content: " ▾"; font-size: 11px; }
.info[open] .info-toggle::after { content: " ▴"; }

.info-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: min(380px, calc(100vw - 32px));
  max-height: 70vh;
  overflow: auto;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}

.info-panel p:first-child { margin-top: 0; }
.info-panel p:last-child { margin-bottom: 0; }
.info-panel ul, .info-panel ol { padding-left: 20px; }
.info-panel li { margin: 4px 0; }

/* Feed: one block per calendar day, date header above the first post of the day. */
.feed { display: block; }

.feed-day { margin-bottom: 26px; }
.feed-day:last-child { margin-bottom: 0; }

.feed-day-title {
  margin: 0 0 12px;
  padding-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.feed-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }

.feed-item {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 18px;
}

/* VIDEO posts: same card family, one quiet accent (left bar + tint + small chip)
   so the type is obvious at a glance - no heavy gradient, no oversized heading. */
.feed-item--video {
  border-color: rgba(139, 123, 255, .55);
  box-shadow: inset 3px 0 0 rgba(139, 123, 255, .8);
}

.type-chip {
  border: 1px solid rgba(139, 123, 255, .55);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #c9c1ff;
  background: rgba(139, 123, 255, .12);
}

.feed-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
}

.feed-head-main {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.feed-title { font-size: 18px; margin: 0; }

.feed-time { color: var(--muted); font-size: 13px; margin-left: auto; }

.post { margin-top: 14px; }

/* Optional post illustration: responsive, never wider than the feed item and
   always keeping its own aspect ratio. */
.post-image { margin: 0 0 14px; }

.post-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  background: var(--surface-2);
}

/* The illustration is the "click to enlarge" trigger: a real button, so the
   cursor, the keyboard and screen readers all agree that it is interactive. */
.post-image-trigger {
  display: inline-block;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: zoom-in;
}

.post-image-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.post-html { overflow-x: auto; }

.post-html table { border-collapse: collapse; max-width: 100%; }
.post-html th, .post-html td { border: 1px solid var(--border); padding: 4px 8px; }

.video-player { width: 100%; max-height: 70vh; background: #000; border-radius: 8px; }

/* Lightbox: native <dialog>, no library.  The overlay fills the viewport, the
   backdrop is dimmed and the image uses as much of the screen as it can while
   keeping its proportions (charts and tables stay readable on a phone). */
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
}

/* Hidden until the script opens it (also covers browsers without <dialog>). */
dialog.lightbox:not([open]) { display: none; }

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 16px;
}

.lightbox::backdrop { background: rgba(6, 8, 12, .88); }

.lightbox-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  background: var(--surface);
  /* Pinch zoom / two finger gestures stay native. */
  touch-action: pinch-zoom;
}

.lightbox-close {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(22, 27, 34, .92);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover { border-color: var(--accent); color: var(--accent); }

body.lightbox-open { overflow: hidden; }

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
}

.page-link {
  display: inline-block;
  min-width: 38px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}

.page-link:hover { border-color: var(--accent); color: var(--accent); }

.page-link.is-current {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.page-link.is-disabled { color: var(--muted); opacity: .5; }

.page-gap { padding: 0 2px; color: var(--muted); }

.pagination-info { margin: 8px 0 0; text-align: center; font-size: 13px; }

.logout-form { display: inline; }

@media (max-width: 600px) {
  .card { padding: 18px; }
  .feed-item { padding: 14px; }
  .code-input { font-size: 16px; letter-spacing: 1px; }
  .page-link { min-width: 34px; padding: 6px 8px; font-size: 13px; }
  .info-toggle { padding: 6px 10px; font-size: 13px; }
  .info-panel { width: calc(100vw - 24px); }
  .lightbox-close { top: 8px; right: 8px; width: 38px; height: 38px; }
  /* Landing: the call to action becomes a full width, easy to hit block. */
  .hero { margin-top: 18px; }
  .hero-title { font-size: 26px; }
  .hero-lead { font-size: 16px; }
  .btn-lg { display: block; width: 100%; padding: 15px 20px; }
}