/* ==========================================================================
   Wandernote — Print stylesheet (css/print.css)
   Linked from app.html with media="print", so every rule here only ever
   applies to the print/PDF render — nothing here touches the on-screen app.

   Goal: "print to parchment" — take the single open note and lay it out as
   a warm, ink-brown, serif page. Everything that is chrome (header, sidebar,
   note list, divider, toolbar, per-note action buttons, footer, popovers,
   overlays, toasts, the firefly/seasonal decoration layers) is hidden; only
   the title and body of the note print.
   ========================================================================== */

@page {
  margin: 18mm;
}

/* --------------------------------------------------------------------------
   PRINT ALWAYS RENDERS THE PARCHMENT LOOK, regardless of the active on-screen
   theme (Daylight or Hearthlight). tokens.css sets Hearthlight's dark values
   on `html[data-theme="hearthlight"]`, which is MORE specific (0,1,1) than a
   plain `:root` rule (0,1,0) — so overriding the custom properties here would
   normally lose to that selector even though this stylesheet loads later.
   `!important` on the custom properties themselves sidesteps that: it wins
   regardless of selector specificity or source order, so print is always
   parchment/ink-brown even when printing straight out of Hearthlight. -------- */
:root,
html[data-theme="hearthlight"] {
  --bg:         #F6EFDE !important;   /* warm parchment page               */
  --bg-raised:  #FBF6EA !important;   /* unused for print but kept in sync */
  --ink:        #2E2417 !important;   /* ink-brown body/heading text       */
  --ink-soft:   #55473A !important;
  --ink-faint:  #6B5C48 !important;
  --accent:     #8B4E12 !important;   /* ornament + link ink                */
  --accent-soft:#8B4E12 !important;
  --accent-glow:rgba(139, 78, 18, 0.22) !important; /* <mark> fill, exact-printed below */
  --line:       rgba(46, 36, 23, 0.35) !important;
  --moss:       #46512F !important;   /* inline <code> stays legible on parchment */
}

/* Force exact colour reproduction (no browser "lighten for ink saving") on
   the surfaces that carry deliberate print colour: the page background and
   the highlight/checkbox fills. Both the standard and -webkit- prefixed
   forms are set, per spec.

   Also undo app.css's `html, body { height: 100% }` + `body { overflow:
   hidden }` (the app owns its own internal scroll regions on screen). Those
   two rules apply during print too because app.css is linked with no media
   attribute — left in place, Chrome's print engine treats the page as a
   single fixed-height, clipped viewport and truncates any note past the
   first printed page. Resetting to auto height / visible overflow here lets
   the content flow across as many printed pages as it needs. */
html, body {
  background: var(--bg) !important;
  height: auto !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
body {
  overflow: visible !important;
}

/* ==========================================================================
   HIDE ALL CHROME
   ========================================================================== */
.chrome,
#sidebar,
#note-list-pane,
#pane-divider,
#toolbar,
.editor__head,
#editor-footer,
#editor-empty,
.fireflies,
.wn-season,
#command-palette,
#template-picker,
#stats-overlay,
#shortcuts-overlay,
#ambient-popover,
#quote-scroll,
#toast-region,
.popmenu,
.popover,
.overlay {
  display: none !important;
}

/* ==========================================================================
   LAYOUT — collapse the app/workspace grid so the editor pane is the only
   thing left, full width, flowing normally instead of fixed to the viewport.
   ========================================================================== */
#app,
.workspace {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
}

#editor-pane {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  background: var(--bg) !important;
}

.editor__scroll {
  overflow: visible !important;
  height: auto !important;
  padding: 0 !important;
}

.editor {
  max-width: none !important;
  margin: 0 !important;
}

/* the note-switch entrance animation must never be mid-flight on a printed
   page — freeze it at its resting state */
.page-turn {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* ==========================================================================
   THE PAGE ITSELF — #note-editor prints full-width on parchment, ink-brown
   serif text, comfortable page margins (handled by @page above).
   ========================================================================== */
.prose {
  min-height: 0;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ink);
  font-family: var(--font-body);
}

/* subtle paper-grain texture is a screen nicety; the parchment background
   colour alone reads as "parchment" on paper without risking a printer
   dropping/mangling the data-URI grain layer */
.prose.texture-paper::after {
  content: none !important;
}

/* ~12pt print body: rem-based sizing throughout .prose (headings, list
   markers, spacing) is relative to the root font-size, so pinning that one
   value to 12pt scales the whole note proportionally without touching every
   rule individually. */
html {
  font-size: 12pt;
}

/* ==========================================================================
   NOTE TITLE — inputs don't reliably print their live value (CSS can only
   see the original `value` *attribute*, not the value the JS/store has set
   since), so app.js keeps a visually-hidden <h1 id="print-title"> in sync
   with the title field. On screen it stays off in the .visually-hidden
   corner; here we undo every property that utility sets and give it the
   ornamental treatment — a thin rule with the app's existing ❖ hr-mark
   above the title, small footer flourish below the note.
   ========================================================================== */
#note-title {
  display: none !important;
}

#print-title {
  /* undo tokens.css .visually-hidden clipping — this element only exists to
     be invisible on screen and visible here. `position: relative !important`
     is required so the ❖ ::before ornament (positioned absolutely) anchors to
     this title box; a plain `position: relative` here loses to the
     `!important` from .visually-hidden and the ornament mis-anchors into the
     top page margin. */
  position: relative !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 8mm !important;
  padding: 6mm 0 0 !important;
  border: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  display: block !important;

  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22pt;
  line-height: 1.2;
  color: var(--ink);
  page-break-inside: avoid;
  break-inside: avoid;
}
#print-title::before {
  content: "\2756"; /* ❖ — same ornament used on .prose hr elsewhere in the app */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 8px;
  background: var(--bg);
  color: var(--accent);
  font-size: 11pt;
}

/* small centred footer flourish, once, after the note body */
#editor-pane::after {
  content: "\2014 from the journal of a traveler \2014"; /* — from the journal of a traveler — */
  display: block;
  margin-top: 10mm;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 10pt;
  color: var(--ink-soft);
}

/* ==========================================================================
   PRINT TYPOGRAPHY
   ========================================================================== */
.prose h1, .prose h2, .prose h3 {
  page-break-inside: avoid;
  break-inside: avoid;
  page-break-after: avoid;
  break-after: avoid;
  color: var(--ink);
}
.prose p,
.prose li,
.prose blockquote {
  orphans: 3;
  widows: 3;
}
.prose blockquote {
  page-break-inside: avoid;
  break-inside: avoid;
  border-left-color: var(--accent);
  color: var(--ink-soft);
}

/* checklist boxes — draw them as plain printed squares rather than relying
   on a platform checkbox widget (which print engines often skip entirely).
   The existing appearance:none + explicit border/fill from app.css already
   does this; restated here so print.css is correct standalone, plus the
   exact-colour-adjust needed for the checked fill to actually print. */
.prose .checklist input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  border: 1.3pt solid var(--ink-soft);
  border-radius: 2pt;
  background: transparent;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.prose .checklist input[type="checkbox"]:checked {
  background: var(--accent) !important;
  border-color: var(--accent);
}

/* <mark> highlight — print with its exact fill rather than letting the
   browser strip it as a "background" the way it might a decorative tint */
.prose mark {
  background: var(--accent-glow) !important;
  color: var(--ink) !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.prose code {
  color: var(--moss);
  background: transparent;
  border: 1px solid var(--line);
}

/* links read as plain ink text, underlined — never expand into a literal
   URL after the link text */
.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
}
.prose a[href]::after {
  content: none !important;
}