/* ============================================================
   PITCH26 — RELEASE NOTICE BOARD + DATA ACCURACY STRIP
   Ticket-stock paper card that matches the "Floodlight
   Almanac" identity: ink background, paper surface, gold
   accents, Space Mono for dates/numbers.
   ============================================================ */

/* ---------- Board shell ---------- */
.notice-board {
  margin: var(--space-xxl) auto var(--space-xl);
  padding: 0 16px;
  max-width: 1200px;
}

.notice-board-inner {
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 14px;
  padding: 32px 34px 26px;
  box-shadow:
    0 24px 48px -20px rgba(11, 15, 30, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  position: relative;
  overflow: hidden;
}

/* Ticket-stub perforation down the left edge */
.notice-board-inner::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: repeating-linear-gradient(
    to bottom,
    var(--fwc-amber) 0 12px,
    transparent 12px 22px
  );
  opacity: 0.85;
}

.notice-board--leaving {
  animation: noticeBoardLeave 0.28s ease forwards;
}

@keyframes noticeBoardLeave {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

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

/* ---------- Header ---------- */
.notice-board-head {
  padding-right: 46px;
  padding-left: 14px;
}

.notice-board-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8a6d1a;
  margin: 0 0 6px;
}

.notice-board-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 38px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

/* Corner-pinned close button — same pattern as the modal, so
   dismissing the board never fights the title for space on any
   screen size (that's what caused the awkward mobile stacking). */
.notice-dismiss {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(11, 15, 30, 0.2);
  background: var(--paper);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease;
}

.notice-dismiss:hover,
.notice-dismiss:focus-visible {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: rotate(90deg);
}

.notice-dismiss-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.notice-dismiss-x {
  font-size: 18px;
  line-height: 1;
}

/* ---------- Notes list ---------- */
.notice-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0 0 0 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.notice-item {
  border-top: 1px dashed var(--paper-line);
  padding-top: 14px;
}

.notice-item-date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #9b8a63;
}

.notice-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  border-radius: 4px;
  padding: 3px 8px;
  margin: 10px 0 8px;
}

.notice-tag--amber {
  background: rgba(242, 183, 5, 0.18);
  color: #8a6d1a;
}

.notice-tag--green {
  background: rgba(43, 207, 156, 0.18);
  color: #10785a;
}

.notice-tag--sky {
  background: rgba(76, 201, 240, 0.18);
  color: #1d6f8f;
}

.notice-tag--red {
  background: rgba(239, 67, 96, 0.14);
  color: #b02a45;
}

.notice-item-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 6px;
}

.notice-item-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(11, 15, 30, 0.72);
  margin: 0;
}

.notice-footnote {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #9b8a63;
  margin: 18px 0 0;
  padding-left: 14px;
}

/* ---------- Data accuracy strip ---------- */
.accuracy-strip {
  margin: 14px auto 32px;
  padding: 0 16px;
  max-width: 1200px;
}

.accuracy-strip-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border: 1px solid var(--ink-line);
  border-radius: 10px;
  padding: 12px 18px;
  background: rgba(26, 36, 64, 0.55);
  backdrop-filter: blur(4px);
}

.accuracy-strip-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--fwc-amber);
}

.accuracy-strip-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-muted);
  flex: 1 1 380px;
}

.accuracy-strip-text strong {
  color: var(--ink-text);
  font-weight: 600;
}

.accuracy-strip-text a {
  color: var(--fwc-amber);
  text-decoration: underline;
  text-decoration-color: rgba(242, 183, 5, 0.4);
  text-underline-offset: 3px;
}

.accuracy-strip-text a:hover,
.accuracy-strip-text a:focus-visible {
  text-decoration-color: var(--fwc-amber);
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .notice-board {
    margin: var(--space-xl) auto var(--space-lg);
  }

  .notice-board-inner {
    padding: 24px 18px 18px;
  }

  .notice-board-head {
    padding-right: 40px;
    padding-left: 10px;
  }

  .notice-dismiss {
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
  }

  .notice-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ---------- Board intro line ---------- */
.notice-board-intro {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(11, 15, 30, 0.72);
  margin: 8px 0 0;
  max-width: 640px;
}

/* ---------- Floating "What's New" trigger ---------- */
.notice-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: calc(24px + env(safe-area-inset-right, 0px));
  z-index: var(--z-dropdown, 100);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(242, 183, 5, 0.55);
  background: var(--ink-2);
  color: var(--ink-text);
  cursor: pointer;
  box-shadow:
    0 12px 28px -8px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(11, 15, 30, 0.4);
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.notice-fab:hover,
.notice-fab:focus-visible {
  background: var(--ink-3);
  border-color: var(--fwc-amber);
  transform: translateY(-2px);
}

.notice-fab svg {
  width: 18px;
  height: 18px;
  color: var(--fwc-amber);
  flex-shrink: 0;
}

.notice-fab-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.notice-fab-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fwc-red);
  box-shadow: 0 0 0 2px var(--ink);
}

/* ---------- Release notes modal ---------- */
.notice-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 1000);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Anchored a fixed distance below the sticky nav instead of
     vh-centered — centering shrank to almost nothing on shorter
     viewports (and the dark backdrop blending into the dark nav
     made even that small gap invisible), so the panel read as
     glued to the nav. A fixed offset guarantees a real, visible
     gap on every screen. */
  padding: 104px 16px 40px;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.notice-modal--open {
  opacity: 1;
}

.notice-modal--leaving {
  opacity: 0;
}

.notice-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 15, 30, 0.72);
  backdrop-filter: blur(2px);
}

/* Panel is a flex column so the header can stay put while only
   the notes list scrolls — this is what makes long lists feel
   smooth instead of the whole card jumping around. */
.notice-modal-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: 16px;
  width: 100%;
  max-width: 640px;
  max-height: min(calc(100vh - 144px), 620px);
  max-height: min(calc(100dvh - 144px), 620px);

  overflow: hidden;
  box-shadow: 0 32px 64px -20px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition:
    opacity 0.24s ease,
    transform 0.24s ease;
}

.notice-modal--open .notice-modal-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.notice-modal--leaving .notice-modal-panel {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
}

.notice-modal-panel:focus {
  outline: none;
}

/* Close button — pinned to the panel corner, never fights the
   header text for space, always reachable regardless of scroll
   position. Real 40px hit target for mobile thumbs. */
.notice-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(11, 15, 30, 0.18);
  background: var(--paper);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease;
}

.notice-modal-close:hover,
.notice-modal-close:focus-visible {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: rotate(90deg);
}

/* Header — fixed in place, not part of the scroll region */
.notice-modal-header {
  flex-shrink: 0;
  padding: 28px 64px 18px 28px;
  border-bottom: 1px dashed var(--paper-line);
}

.notice-modal-header .notice-board-eyebrow {
  margin-bottom: 6px;
}

.notice-modal-header .notice-board-title {
  font-size: clamp(22px, 4vw, 30px);
}

.notice-modal-header .notice-board-intro {
  margin-top: 10px;
}

/* Scrollable body — this is the piece that fixes the "jumpy"
   scroll feel: momentum scrolling on touch, contained overscroll
   so it never chains into a page scroll behind the modal, and a
   themed slim scrollbar instead of the default chunky one. */
.notice-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 20px 28px 26px;
  scrollbar-width: thin;
  scrollbar-color: rgba(11, 15, 30, 0.28) transparent;
}

.notice-modal-body::-webkit-scrollbar {
  width: 8px;
}

.notice-modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.notice-modal-body::-webkit-scrollbar-thumb {
  background: rgba(11, 15, 30, 0.22);
  border-radius: 999px;
}

.notice-modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(11, 15, 30, 0.38);
}

.notice-modal-body .notice-list {
  padding-left: 0;
  margin-top: 0;
}

.notice-modal-body .notice-item:first-child {
  border-top: none;
  padding-top: 0;
}

/* Prevents the page behind the modal from scrolling on any
   device — the real fix for the "not smooth" scroll feel, since
   without it touch/wheel input can leak through to the body. */
.notice-scroll-lock {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .notice-modal,
  .notice-modal-panel,
  .notice-modal-close {
    transition: none;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  /* Icon-only circle on mobile — equal width/height, zero
     asymmetric padding, flex-centered. The old label-hide +
     leftover left/right padding is what made the bell sit
     off-center in its ring. */
  .notice-fab {
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
    gap: 0;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
  }

  .notice-fab-label {
    display: none;
  }

  .notice-modal {
    padding: 0;
    align-items: flex-end;
  }

  .notice-modal-panel {
    max-width: 100%;
    max-height: 84vh;
    max-height: 84dvh;
    border-radius: 20px 20px 0 0;
  }

  .notice-modal--open .notice-modal-panel {
    transform: translateY(0);
  }

  .notice-modal-panel {
    transform: translateY(24px);
  }

  .notice-modal-header {
    padding: 22px 56px 16px 20px;
  }

  .notice-modal-close {
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
  }

  .notice-modal-body {
    padding: 16px 20px 24px;
  }
}