/*
  Responsive rules. Loaded last so it can override without !important.

  The reference is a fixed-width print-ish document, so every breakpoint here is a
  decision the source does not make for us. The rule followed throughout: collapse
  columns, never shrink type below legibility. The one exception is .figlet, which
  scales rather than reflows because ASCII art cannot wrap — and which is dropped
  outright when scaling would make it illegible.
*/

/* ---- wide-ish: the six-across bands stop being six-across ---- */
@media (max-width: 860px) {
  .cover-band.countries { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 8px; }
  .cover-band.facilities { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }

  .dossier-split { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .filecard { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .filecard .portrait-frame { max-width: 240px; }
}

/* ---- the cover stacks ---- */
@media (max-width: 720px) {
  .cover-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 24px 0;
  }
  .cover-mark svg { width: min(60%, 180px); }
  .cover-id h1 { font-size: clamp(22px, 7vw, 34px); }

  /* The drawer stops being a 288px slide-over and becomes a full sheet. */
  .drawer { width: calc(100vw - var(--rail-w)); }
  .statusbar .seg { max-width: 54vw; }
  .statusbar .clearance { display: none; }
}

/* ---- narrow ---- */
@media (max-width: 520px) {
  /* The rail leaves; the hamburger moves into the tmux line where a thumb
     expects it. The drawer becomes a full sheet from the left edge. */
  .rail, .app-shell::before { display: none; }
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .desk { grid-column: 1; }
  .drawer { left: 0; width: 100vw; max-width: 100vw; }
  .scrim { left: 0; }
  .sb-menu, .sb-menu-sep { display: inline; }

  .cover-band.countries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cover-band.facilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .statblock .row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 7px 0; }

  .grid, .grid.wide, .grid.duo { grid-template-columns: minmax(0, 1fr); }
}

/*
  The ASCII wordmark. Below ~600px the scaled glyphs fall under about 4px and stop
  reading as letters, so the banner is removed and the plain heading it decorates
  is shown instead. Hiding it is better than shipping illegible noise.
*/
@media (max-width: 600px) {
  .figlet { display: none; }
  .figlet-fallback {
    display: block;
    text-align: center;
    font-family: var(--mono-family);
    font-size: clamp(18px, 6.5vw, 28px);
    color: var(--accent);
    letter-spacing: 0.06em;
    margin: 0;
  }
}

/* ---- print: the dossier as an actual paper dossier ---- */
@media print {
  :root { --bg: #fff; --pane: #fff; }
  body { background: #fff; color: #000; }
  .rail, .drawer, .scrim, .statusbar, .decode { display: none; }
  .app-shell { display: block; }
  .panel { border: 1px solid #000; break-inside: avoid; }
  .cover-band.countries a, .cover-band.countries span,
  .cover-band.facilities a, .cover-band.facilities span,
  .figlet, .figlet-caption, .gutter-note { color: #000; }
  .panel-head h2, .panel-head .name, .cover-id h1, .cover-id .tagline { color: #000; }
  .doc h2, .doc h3, .entry h3, .statblock .k, .statblock .v { color: #000; }
  a { color: #000; border-bottom: 0; }
  a[href^="http"]::after { content: " <" attr(href) ">"; font-size: 9px; color: #444; }
}

/* ---- motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}