/* ==========================================================================
   Zero-Delay — print / "Save as PDF" stylesheet
   --------------------------------------------------------------------------
   Linked from index.html with media="print", so NONE of this affects the
   on-screen page. It exists so that File → Print → Save as PDF (or the
   "PDFで保存" button in the header / drawer / footer) produces a clean,
   complete document of the page as it reads.

   Goals
     · Export the whole page — hero, live map, vision, both device mockups,
       benefits, roadmap, pre-registration and footer.
     · NEVER let a screen-only affordance hide content. The `.reveal` elements
       start at `opacity: 0` and are revealed by IntersectionObserver on
       scroll, so without the override below every section below the fold
       would print as blank paper.
     · Keep page breaks sane and the ink load reasonable.
   ========================================================================== */

@page {
  size: A4 portrait;
  margin: 12mm;
}

/* --------------------------------------------------------------------------
   1. Global print behaviour
   -------------------------------------------------------------------------- */

html,
body {
  background: #ffffff !important;
}

/* Keep the brand palette instead of letting the browser strip backgrounds
   and gradients (which would turn light-on-dark copy into invisible copy). */
*,
*::before,
*::after {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  box-shadow: none !important;
  animation: none !important;
  transition: none !important;
  text-shadow: none !important;
}

/* THE critical rule: nothing may remain hidden for print. */
.reveal,
.reveal:not(.is-visible) {
  opacity: 1 !important;
  transform: none !important;
}

body {
  font-size: 10pt;
  line-height: 1.6;
}

/* Show the print-only additions (contact address etc.) that are hidden on
   screen by css/style.css. */
.print-only {
  display: block !important;
}

.container {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

/* --------------------------------------------------------------------------
   2. Hide everything that only exists to be clicked
   --------------------------------------------------------------------------
   NOTE ON CASCADE ORDER. print.css is linked after style.css, so at equal
   specificity its rules win. But the responsive blocks in style.css use
   `!important` (e.g. the phone-width badge suppression), and those blocks DO
   match in print: an A4 page box is only ~700 CSS px wide, which trips
   `@media (max-width: 900px)` and `(max-width: 620px)`. Every rule below that
   must survive those breakpoints therefore carries `!important` too.
   -------------------------------------------------------------------------- */

.skip-link,
.lang-switch,
.nav-toggle,
.mobile-menu,
.primary-nav,
.header-actions,
.btn-print,
.map-card,
.modal {
  display: none !important;
}

/* --------------------------------------------------------------------------
   3. Neutralise the phone / tablet breakpoints
   --------------------------------------------------------------------------
   A4 is narrower than the 1080px / 900px / 620px breakpoints, so without these
   overrides the "paper" document would inherit the mobile layout: one column
   everywhere, the map badges suppressed, and the drawer nav hidden. These
   rules restore the intended document layout.
   -------------------------------------------------------------------------- */

.header-inner {
  justify-content: flex-start !important;
}

.map-body {
  display: block !important;
}

/* The map badges are the entire point of printing this page, so the
   `display:none` from the 620px block is explicitly reverted. */
.map-badge {
  display: inline-flex !important;
}

.map-leader {
  display: block !important;
}

.legend {
  gap: 5pt !important;
}

.legend-chip {
  padding: 2.5pt 6pt !important;
  font-size: 7.5pt !important;
}

.map-panel-head {
  padding: 9pt 11pt !important;
}

.map-stage {
  padding: 6pt 8pt 2pt !important;
}

.map-disclaimer {
  padding: 6pt 11pt 8pt !important;
  font-size: 7.5pt !important;
}

.section {
  padding: 16pt 0 !important;
}

.hero {
  padding: 4pt 0 14pt !important;
}

.hero-ctas {
  display: none !important;
}

.stat-strip {
  display: none !important;
}

.phone-caption {
  margin-top: 0 !important;
}

.vision-grid {
  display: block !important;
}

.vision-story {
  padding: 12pt 14pt !important;
  margin-top: 8pt !important;
}

.roadmap {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.feed-panel {
  border-left: none !important;
  border-top: 1px solid #cbd5e1 !important;
}

.feed-list {
  max-height: none !important;
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5pt !important;
  padding: 6pt 11pt 9pt !important;
}

.notify-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8pt !important;
}

.footer-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 12pt !important;
}

.brand-badge {
  display: inline-block !important;
}

.container {
  padding: 0 !important;
}

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: static !important;
  background: #ffffff !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

.site-header .header-inner {
  padding: 0 0 8pt !important;
  min-height: 0 !important;
  display: flex;
  align-items: center;
  gap: 10pt;
}

.logo-lockup {
  --logo-h: 22pt;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8pt;
  text-decoration: none;
}

.brand-badge {
  font-size: 9pt !important;
  color: #1e40af !important;
}

/* --------------------------------------------------------------------------
   4. Hero + live map
   -------------------------------------------------------------------------- */

.hero {
  padding: 4pt 0 14pt !important;
  background: #ffffff !important;
}

.hero-inner {
  display: block !important;
}

.hero-title {
  font-size: 21pt !important;
  line-height: 1.25 !important;
}

.hero-title .accent {
  color: #1e40af !important;
}

.hero-sub {
  font-size: 10pt !important;
  color: #334155 !important;
  margin-top: 6pt !important;
}

/* The CTAs are links; print them as a compact note rather than two buttons. */
.hero-ctas,
.hero-note i,
.stat-strip {
  display: none !important;
}

.hero-note {
  margin-top: 6pt !important;
  font-size: 8.5pt !important;
  color: #475569 !important;
}

.map-panel {
  margin-top: 14pt !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12pt !important;
  overflow: hidden !important;
}

.map-panel-head {
  padding: 9pt 11pt !important;
  background: #f8fafc !important;
  gap: 8pt !important;
}

.map-panel-title {
  font-size: 10pt !important;
}

.map-updated {
  font-size: 8pt !important;
}

.legend {
  gap: 5pt !important;
}

.legend-chip {
  padding: 2.5pt 6pt !important;
  font-size: 7.5pt !important;
  border-color: #cbd5e1 !important;
}

.legend-glyph {
  width: 10pt !important;
  height: 10pt !important;
}

/* Single column: the map gets the full width (so the incident badges stay
   legible) and the feed follows underneath in two columns. */
.map-body {
  display: block !important;
}

.map-stage {
  padding: 6pt 8pt 2pt !important;
  /* NOT white: the SVG draws the sea, so a white stage would show the square
     canvas as a blue-grey tile floating on a white page. Matching the sea's
     outer tone keeps the water continuous out to the panel border. */
  background: #e9eff2 !important;
  min-height: 0 !important;
  display: block !important;
}

.map-canvas {
  max-width: 118mm !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.feed-panel {
  border-left: none !important;
  border-top: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
}

.feed-head {
  padding: 7pt 11pt 5pt !important;
}

.feed-head h3 {
  font-size: 9.5pt !important;
}

.feed-head p {
  font-size: 8pt !important;
}

.feed-list {
  max-height: none !important;
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5pt !important;
  padding: 6pt 11pt 9pt !important;
}

.feed-list li {
  break-inside: avoid;
}

.feed-item {
  padding: 6pt 7pt !important;
  border-color: #cbd5e1 !important;
}

.feed-item__line {
  font-size: 8.5pt !important;
}

.feed-item__meta {
  font-size: 7.5pt !important;
}

.feed-item__rec {
  font-size: 7pt !important;
}

.sev-pill {
  font-size: 6.5pt !important;
  padding: 1.5pt 5pt !important;
}

/* On-map incident badges are the whole point of the map, so they are kept —
   sized down a little so all eleven still fit the narrower sheet. */
.map-badge {
  font-size: 6.5pt !important;
  padding: 1pt 5pt 1pt 4pt !important;
  box-shadow: none !important;
  border-color: #cbd5e1 !important;
}

.map-disclaimer {
  padding: 6pt 11pt 8pt !important;
  font-size: 7.5pt !important;
  background: #ffffff !important;
}

/* --------------------------------------------------------------------------
   5. Sections
   -------------------------------------------------------------------------- */

.section {
  padding: 16pt 0 !important;
  background: #ffffff !important;
}

.section-head {
  margin-bottom: 10pt !important;
  text-align: left !important;
}

.section-title {
  font-size: 15pt !important;
  margin: 0 0 5pt !important;
}

.section-sub {
  font-size: 9.5pt !important;
}

.badge {
  font-size: 7.5pt !important;
  padding: 3pt 7pt !important;
  margin-bottom: 5pt !important;
}

/* --- vision --- */
.vision-grid {
  display: block !important;
}

.vision-story {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10pt !important;
  padding: 12pt 14pt !important;
  margin-top: 8pt !important;
}

.vision-story::after {
  display: none !important;
}

.vision-story h3 {
  color: #0f172a !important;
  font-size: 11.5pt !important;
  margin-bottom: 6pt !important;
}

.vision-story p {
  color: #334155 !important;
  font-size: 9.5pt !important;
}

.vision-quote {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-left: 3px solid #1e40af !important;
  color: #1e293b !important;
  margin-top: 8pt !important;
  font-size: 9.5pt !important;
}

.pillar-list {
  margin-top: 10pt !important;
  gap: 6pt !important;
}

.pillar {
  padding: 8pt 10pt !important;
  grid-template-columns: 26pt minmax(0, 1fr) !important;
  gap: 8pt !important;
  break-inside: avoid;
}

.pillar__icon {
  width: 26pt !important;
  height: 26pt !important;
  font-size: 10pt !important;
}

.pillar h3 {
  font-size: 10pt !important;
}

.pillar p {
  font-size: 9pt !important;
}

/* --- phones --- */
.phones {
  gap: 12pt !important;
}

.phone-unit {
  break-inside: avoid;
}

/* The mockups are pure CSS, so they print — just scaled to fit the sheet. */
.phone {
  transform: scale(0.82);
  transform-origin: top center;
}

.phone-caption {
  margin-top: 0 !important;
}

.phone-caption h3 {
  font-size: 11pt !important;
}

.phone-caption p {
  font-size: 9pt !important;
}

.callout {
  font-size: 8.5pt !important;
}

/* --- benefits --- */
.benefit-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8pt !important;
}

.benefit-card {
  padding: 10pt 11pt !important;
  break-inside: avoid;
}

.benefit-icon {
  width: 26pt !important;
  height: 26pt !important;
  margin: 7pt 0 !important;
  font-size: 11pt !important;
}

.benefit-card h3 {
  font-size: 10.5pt !important;
}

.benefit-card p {
  font-size: 9pt !important;
}

/* --- roadmap --- */
.roadmap {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8pt !important;
}

.roadmap::before {
  display: none !important;
}

.milestone {
  padding: 9pt 10pt !important;
  break-inside: avoid;
}

.milestone__when {
  font-size: 7.5pt !important;
}

.milestone h3 {
  font-size: 10pt !important;
}

.milestone p {
  font-size: 8.5pt !important;
}

/* --- pre-registration --- */
.notify-section {
  padding: 18pt 0 !important;
  background: #f1f5f9 !important;
  color: #1e293b !important;
}

.notify-inner h2 {
  color: #0f172a !important;
  font-size: 15pt !important;
}

.notify-section p,
.notify-inner p {
  color: #334155 !important;
}

/* The email field and submit button are unusable on paper — replace them with
   the contact address (see .print-only in index.html). */
.notify-form,
.notify-meta,
.form-message {
  display: none !important;
}

.notify-steps {
  margin-top: 10pt !important;
  gap: 8pt !important;
}

/* The steps are glassy white-on-dark cards on screen. On the light paper
   background that treatment disappears, so they become plain bordered cards
   and their pale-blue step numbers are darkened to stay legible. */
.notify-step {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8pt !important;
  padding: 8pt 10pt !important;
  break-inside: avoid;
}

.notify-step__num {
  color: #1e40af !important;
  font-size: 7pt !important;
}

.notify-step p {
  font-size: 8.5pt !important;
  margin-top: 3pt !important;
}

/* Same problem for the badge pills that are tinted for a dark background. */
.badge--navy {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1e40af !important;
}

/* Contact block that stands in for the form on paper. */
.print-contact {
  margin: 10pt 0 0 !important;
  padding: 9pt 11pt !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8pt !important;
  font-size: 9.5pt !important;
  color: #1e293b !important;
}

.print-contact strong {
  color: #1e40af;
}

/* --------------------------------------------------------------------------
   6. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding: 14pt 0 0 !important;
  background: #ffffff !important;
  color: #334155 !important;
  border-top: 1px solid #cbd5e1 !important;
  break-before: auto;
}

.footer-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 12pt !important;
  padding: 10pt 0 !important;
}

.footer-brand p,
.footer-links a,
.footer-bottom p,
.footer-bottom a,
.footer-bottom button {
  font-size: 8.5pt !important;
  color: #334155 !important;
}

.footer-col h3 {
  font-size: 9pt !important;
  color: #0f172a !important;
}

.footer-links a {
  padding: 1pt 0 !important;
  background: none !important;
}

.footer-bottom {
  border-top: 1px solid #cbd5e1 !important;
  padding: 7pt 0 0 !important;
}

/* Footer nav duplicates the header links; on paper only the legal items and
   the contact address carry any information. */
.footer-bottom nav a[href="#vision"],
.footer-bottom nav a[href="#contact"] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   7. Page-break hygiene
   -------------------------------------------------------------------------- */

h1,
h2,
h3 {
  break-after: avoid;
  break-inside: avoid;
}

p,
li {
  orphans: 3;
  widows: 3;
}

img {
  max-width: 100% !important;
}

/* The logo lockup depends on the image being WIDER and TALLER than its box
   (it is cropped and offset to trim the master file's white padding). A blanket
   `max-width: 100%` would clamp it back and the crop would collapse. */
.logo-lockup img {
  max-width: none !important;
  width: var(--logo-crop-w) !important;
  height: var(--logo-crop-h) !important;
}

/* Never split a small atomic block across two sheets. */
.pillar,
.benefit-card,
.milestone,
.feed-list li,
.phone-unit,
.vision-story,
.vision-quote,
.print-contact {
  break-inside: avoid;
}

/* The map panel is taller than a page, so it may break — but keep the head and
   the map itself together. */
.map-panel-head,
.map-stage {
  break-inside: avoid;
  break-after: avoid;
}