/* Print-ready layouts (poster, greeting card). Shares tokens/fonts with
   static/archipelago/map.css (linked alongside this file) so print output
   matches the on-screen map exactly -- this is deliberately the same
   ocean/parchment system as the rest of the product, just laid out at
   real physical dimensions instead of viewport dimensions.

   map.css doesn't define --rose/--deep-rose (theme.css does, but these
   pages don't load theme.css), so they're defined locally here. */
:root {
  --rose: #e0517a;
  --deep-rose: #b83a5e;
  /* Soft/line tones for the print panels specifically (kept separate from
     map.css's own --parchment etc. since those are also used for the
     unrelated card-inside page and the demo intro copy, which don't theme). */
  --parchment-soft: rgba(244, 233, 211, 0.92);
  --callout-line: rgba(219, 164, 58, 0.55);
}

/* ------------------------------------------------------------------ */
/* Background themes for the framed photo / card front. Applied via
   data-print-theme="..." on .framed-page / .card-front. Accent (--rose)
   stays constant across themes for brand recognition; only the background
   gradient and on-background text tones change. Swapped live by
   static/print/theme-picker.js on the example pages (and could drive a
   real customer's choice in /create the same way). */
/* ------------------------------------------------------------------ */
.framed-page[data-print-theme="midnight"],
.card-front[data-print-theme="midnight"] {
  --ocean-1: #23394a;
  --ocean-2: #16242f;
  --parchment: #f4e9d3;
  --parchment-soft: rgba(244, 233, 211, 0.92);
  --callout-line: rgba(219, 164, 58, 0.55);
}

.framed-page[data-print-theme="wine"],
.card-front[data-print-theme="wine"] {
  --ocean-1: #4a1f35;
  --ocean-2: #23101c;
  --parchment: #f9e6ee;
  --parchment-soft: rgba(249, 230, 238, 0.88);
  --callout-line: rgba(240, 170, 195, 0.5);
}

.framed-page[data-print-theme="ink"],
.card-front[data-print-theme="ink"] {
  --ocean-1: #202024;
  --ocean-2: #09090b;
  --parchment: #f4ece0;
  --parchment-soft: rgba(244, 236, 224, 0.85);
  --callout-line: rgba(224, 81, 122, 0.45);
}

.framed-page[data-print-theme="blush"],
.card-front[data-print-theme="blush"] {
  --ocean-1: #fbeaf0;
  --ocean-2: #f5d9e3;
  --parchment: #2a2118;
  --parchment-soft: rgba(42, 33, 24, 0.72);
  --callout-line: rgba(184, 58, 94, 0.45);
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--ocean-2);
  /* map.css (loaded alongside this file) sets overflow:hidden + height:100%
     for the fullscreen interactive map -- these print pages are taller than
     one viewport (intro copy + an 8-10in page), so that has to be undone
     here or the page can't scroll and content gets clipped. */
  overflow: visible;
  height: auto;
  min-height: 100%;
}

/* ------------------------------------------------------------------ */
/* Framed Photo: 10in x 8in landscape -- a bedside-table print, not a wall
   poster. The heart map sits smaller in the frame on purpose, leaving a
   margin for leader-line callouts that surface 1-2 standout texts per
   major section, since a static print can't offer the interactive map's
   zoom-to-explore. See callouts.js. */
/* ------------------------------------------------------------------ */
.framed-page {
  width: 10in;
  height: 8in;
  margin: 0 auto;
  padding: 0.4in 0.5in 0.35in;
  background: radial-gradient(ellipse at 50% 15%, var(--ocean-1) 0%, var(--ocean-2) 75%);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  font-family: -apple-system, "SF Pro Rounded", "Segoe UI", Roboto, sans-serif;
  color: var(--parchment);
  border: 0.09in solid #12141a;
  outline: 0.012in solid rgba(219, 164, 58, 0.35);
  outline-offset: -0.14in;
}

.framed-header {
  flex: 0 0 auto;
  text-align: center;
  margin-bottom: 0.12in;
}

.framed-eyebrow {
  font-family: "Fredoka", ui-rounded, sans-serif;
  font-size: 0.1in;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 0 0 0.05in;
}

.framed-title {
  font-family: "Fredoka", ui-rounded, sans-serif;
  font-size: calc(0.3in * var(--headline-scale, 1));
  font-weight: 700;
  color: var(--parchment);
  margin: 0;
}

.framed-map-frame {
  flex: 1 1 auto;
  min-height: 0;
  max-width: 100%;
  /* Matches the widened viewBox in print_designs.py's render_poster_html
     (-650 -320 2300 1640) -- the landscape page has more horizontal room
     than a 1:1 square used, so this fills that unused margin instead of
     leaving it blank on either side. */
  aspect-ratio: 2300 / 1640;
  align-self: center;
  /* Sized by the available height (not width:100%) so a landscape page
     doesn't stretch this into a non-square/overflowing shape -- the
     browser computes width to match via aspect-ratio. */
  height: 100%;
  width: auto;
  position: relative;
}

.framed-map-frame #map-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Interactive-only chrome hidden in print; callouts.js draws its own labels. */
.framed-map-frame .reset-btn,
.framed-map-frame #popup,
.framed-map-frame .title-plate,
.framed-map-frame .legend-plate {
  display: none !important;
}

/* Simplified print look: just the top-level island shapes/colors -- no
   sub-cell divides, no message-dot texture, no sub-labels (those only
   matter for the interactive zoom-in, which print doesn't have). */
.framed-map-frame .sub-cell,
.framed-map-frame .dot,
.framed-map-frame .sub-label {
  display: none !important;
}

/* Draggable callout text: the line's heart-end stays put ("sticky"); the
   text end follows wherever the label is dragged. Shared across both
   .framed-map-frame and .card-front-map-frame. */
.callout-text-group {
  cursor: grab;
  touch-action: none; /* let pointer events drive dragging instead of scroll/pan gestures */
}
.callout-text-group.dragging {
  cursor: grabbing;
}
.callout-hit-area {
  fill: transparent;
}
.callout-text-group:hover .callout-hit-area,
.callout-text-group.dragging .callout-hit-area {
  fill: rgba(224, 81, 122, 0.1);
  rx: 6;
}

.framed-map-frame .heart-outline {
  stroke: var(--parchment);
  stroke-width: 4;
  stroke-opacity: 0.85;
  stroke-linejoin: round;
}

.framed-map-frame .callout-line {
  stroke: var(--callout-line);
  stroke-width: 1.2;
}
.framed-map-frame .callout-dot {
  fill: var(--rose);
}
.framed-map-frame .callout-sender {
  font-family: "Fredoka", ui-rounded, sans-serif;
  font-size: calc(15px * var(--callout-scale, 1));
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  fill: var(--rose);
}
.framed-map-frame .callout-text {
  font-family: -apple-system, "SF Pro Rounded", "Segoe UI", Roboto, sans-serif;
  font-style: italic;
  font-size: calc(17px * var(--callout-scale, 1));
  fill: var(--parchment-soft);
}

.framed-footer {
  flex: 0 0 auto;
  margin-top: 0.1in;
  text-align: center;
}

.framed-footer blockquote {
  margin: 0;
  font-family: "Fredoka", ui-rounded, sans-serif;
  font-style: italic;
  font-size: calc(0.145in * var(--headline-scale, 1));
  line-height: 1.35;
  color: var(--parchment);
}

.framed-footer .framed-quote-meta {
  margin: 0.05in 0 0;
  font-size: 0.09in;
  color: var(--rose);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Greeting card: 5in x 7in front cover + inside spread, printed        */
/* separately (most POD vendors want front/inside as separate panels)  */
/* ------------------------------------------------------------------ */
.card-panel {
  width: 5in;
  height: 7in;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, "SF Pro Rounded", "Segoe UI", Roboto, sans-serif;
}

.card-front {
  background: radial-gradient(ellipse at 50% 15%, var(--ocean-1) 0%, var(--ocean-2) 85%);
  color: var(--parchment);
  padding: 0.4in 0.35in 0.3in;
  position: relative;
}

.card-front .card-eyebrow {
  font-family: "Fredoka", ui-rounded, sans-serif;
  font-size: calc(0.11in * var(--headline-scale, 1));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 0 0 0.08in;
  text-align: center;
}

.card-front-map-frame {
  flex: 1 1 auto;
  min-height: 0;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  align-self: center;
  height: 100%;
  width: auto;
  position: relative;
}

.card-front-map-frame #map-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.card-front-map-frame .reset-btn,
.card-front-map-frame #popup,
.card-front-map-frame .title-plate,
.card-front-map-frame .legend-plate {
  display: none !important;
}

.card-front-map-frame .sub-cell,
.card-front-map-frame .dot,
.card-front-map-frame .sub-label {
  display: none !important;
}

.card-front-map-frame .heart-outline {
  stroke: var(--parchment);
  stroke-width: 4;
  stroke-opacity: 0.85;
  stroke-linejoin: round;
}

.card-front-map-frame .callout-line {
  stroke: var(--callout-line);
  stroke-width: 1.4;
}
.card-front-map-frame .callout-dot { fill: var(--rose); }
.card-front-map-frame .callout-sender {
  font-family: "Fredoka", ui-rounded, sans-serif;
  font-size: calc(20px * var(--callout-scale, 1));
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  fill: var(--rose);
}
.card-front-map-frame .callout-text {
  font-family: -apple-system, "SF Pro Rounded", "Segoe UI", Roboto, sans-serif;
  font-style: italic;
  font-size: calc(22px * var(--callout-scale, 1));
  fill: var(--parchment-soft);
}

.card-front blockquote {
  margin: 0.1in 0 0;
  font-family: "Fredoka", ui-rounded, sans-serif;
  font-style: italic;
  font-size: calc(0.155in * var(--headline-scale, 1));
  line-height: 1.35;
  text-align: center;
  color: var(--parchment);
}

.card-front .card-names {
  margin-top: 0.08in;
  font-size: calc(0.1in * var(--headline-scale, 1));
  letter-spacing: 0.05em;
  color: var(--parchment-soft);
  text-align: center;
}

.card-inside {
  background: var(--parchment);
  color: var(--ink);
  padding: 0.55in 0.5in;
  justify-content: space-between;
}

.card-inside .card-inside-icon {
  width: 0.55in;
  height: auto;
  opacity: 0.85;
  margin: 0 auto 0.3in;
  display: block;
}

/* Condensed version of the digital example page's timeline sidebar --
   same icon/label/date/quote shape, sized down to share the inside panel
   with the write-your-own-note area below it. */
.card-inside .card-timeline {
  margin-top: 0.05in;
}

.card-inside .card-timeline-item {
  display: flex;
  gap: 0.1in;
  margin-bottom: 0.14in;
}

.card-inside .card-timeline-item .ct-icon {
  font-size: 0.16in;
  line-height: 1.3;
  flex: 0 0 auto;
}

.card-inside .card-timeline-item .ct-label {
  font-family: "Fredoka", ui-rounded, sans-serif;
  font-size: 0.1in;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.card-inside .card-timeline-item .ct-date {
  font-size: 0.08in;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin: 1px 0 0;
}

.card-inside .card-timeline-item .ct-quote {
  margin: 0.04in 0 0;
  font-size: 0.09in;
  font-style: italic;
  color: var(--ink);
}

.card-inside .card-write-area {
  flex: 1 1 auto;
  min-height: 0.6in;
  border-top: 0.012in dashed var(--parchment-edge);
  margin-top: 0.1in;
}

.card-inside .card-stat-caption {
  text-align: center;
  font-size: 0.12in;
  color: var(--ink-faint);
  border-top: 0.012in solid var(--parchment-edge);
  padding-top: 0.18in;
}

.card-inside .card-stat-caption strong {
  color: var(--deep-rose);
  font-family: "Fredoka", ui-rounded, sans-serif;
}

/* On-screen preview chrome (hidden entirely when actually printing) */
.print-preview-wrap {
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  background: #0b1319;
  min-height: 100vh;
}

.print-preview-label {
  font-family: "Fredoka", ui-rounded, sans-serif;
  color: #f4e9d3;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* Richer intro hero for the browsable example pages (poster-example.html,
   card-example.html) -- matches static/example.html's level of polish
   instead of just a small gray caption. */
.print-intro {
  max-width: 640px;
  text-align: center;
  color: #f4e9d3;
  padding: 0 20px;
}

.print-intro-eyebrow {
  font-family: "Fredoka", ui-rounded, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 0 0 10px;
}

.print-intro h1 {
  font-family: "Fredoka", ui-rounded, sans-serif;
  font-size: 30px;
  margin: 0 0 12px;
  color: #f4e9d3;
}

.print-intro p {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(244, 233, 211, 0.75);
  margin: 0 0 14px;
}

.print-intro a {
  color: var(--rose);
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
}

.print-intro a:hover { text-decoration: underline; }

/* Gelato mockup section: a real render from our print partner, shown below
   the live CSS preview above (not instead of it -- the live preview still
   has the theme swatches/interactivity; this is just "here's what actually
   ships"). */
.mockup-section {
  max-width: 640px;
  text-align: center;
  color: #f4e9d3;
  padding: 32px 20px 0;
  margin-top: 12px;
  border-top: 1px solid rgba(244, 233, 211, 0.15);
}

.mockup-label {
  font-family: "Fredoka", ui-rounded, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 0 0 14px;
}

.mockup-image {
  max-width: 100%;
  width: 520px;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.mockup-caption {
  font-size: 13px;
  color: rgba(244, 233, 211, 0.65);
  margin: 14px 0 0;
}

/* Card example page: front + inside shown together */
.card-spread {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

/* Live background-theme swatch picker (on-screen preview only) */
.theme-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 4px;
}

.theme-picker .theme-picker-label {
  font-family: "Fredoka", ui-rounded, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 233, 211, 0.6);
  margin-right: 2px;
}

.theme-picker button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(244, 233, 211, 0.25);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s, border-color 0.15s;
}

.theme-picker button:hover { transform: scale(1.08); }

.theme-picker button.active {
  border-color: var(--rose);
}

.theme-picker button[data-theme-choice="midnight"] { background: linear-gradient(135deg, #23394a, #16242f); }
.theme-picker button[data-theme-choice="wine"] { background: linear-gradient(135deg, #4a1f35, #23101c); }
.theme-picker button[data-theme-choice="ink"] { background: linear-gradient(135deg, #202024, #09090b); }
.theme-picker button[data-theme-choice="blush"] { background: linear-gradient(135deg, #fbeaf0, #f5d9e3); }

@media print {
  .print-preview-label, .print-intro, .theme-picker, .mockup-section { display: none; }
  .print-preview-wrap { padding: 0; background: none; min-height: 0; display: block; gap: 0; }
  .card-spread { display: block; }
}