/* ============================================================
 * HOUSE PRINT — the ONE house print path (AP-6 render half).
 * Canon: Tide design-system (alongside c29-printsheet, the
 * order half: estimate + ready order, never placed).
 * Round: apps-in-pleasant-2026-11-02 R4-PRINT.
 *
 * Contract: the app registers its printable content with
 * print.js (window.HousePrint.register) and mounts the actions
 * where it wants them (<div data-house-print></div>). On print,
 * ONLY #house-print-root renders — the app's actual content,
 * clean on paper: no app chrome, no shell chrome, house type.
 *
 * Consumed as a live canonical asset, never forked per app:
 *   <link rel="stylesheet" href="https://tide.29court.com/print.css">
 *   <script src="https://tide.29court.com/print.js" defer></script>
 * ============================================================ */

/* Screen: the print root and its paper frame never show. */
#house-print-root { display: none; }
.hp-actions { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; min-width: 0; }
.hp-btn {
  flex: 0 1 auto; min-width: 44px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--29d-border, rgba(30,42,48,.16)); border-radius: 999px;
  background: var(--29d-surface, #FFFDF8); color: var(--29d-text-1, #1E2A30);
  font: 600 14px/1.2 var(--29d-font-ui, system-ui, sans-serif);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.hp-btn:hover { background: var(--29d-sunken, #EFEAE0); }
.hp-btn:focus-visible { outline: 3px solid var(--29d-coral-400, #FB7E54); outline-offset: 1px; }
.hp-btn:active { transform: scale(.98); }
.hp-note { flex: 1 1 45%; min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.45; color: var(--29d-text-3, #5C686E); margin: 0; }

/* Paper geometry: one portrait page of record; poster kind goes
   landscape via a named page (print.js sets page: on the root). */
@page { size: A4 portrait; margin: 18mm 16mm; }
@page hp-landscape { size: A4 landscape; margin: 14mm; }

@media print {
  /* Everything the app and shell put on screen stays off paper. */
  body > *:not(#house-print-root) { display: none !important; }
  /* The @page margins ARE the paper margins: a host page's own
     body margin (the browser default 8px in the shell receiver's
     print window, which loads no other stylesheet) must not add
     to them — it pushed a fitted poster onto a second page (R13). */
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; margin: 0 !important; padding: 0 !important; }

  #house-print-root {
    display: block !important; color: #111; background: #fff;
    font-family: Georgia, "Times New Roman", serif; font-size: 11.5pt; line-height: 1.55;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  #house-print-root[data-hp-orientation="landscape"] { page: hp-landscape; }

  /* The house paper frame: title block the kit renders, then content. */
  .hp-paper-title { font-family: system-ui, sans-serif; font-size: 20pt; font-weight: 700; line-height: 1.25; margin: 0 0 4mm; overflow-wrap: anywhere; }
  .hp-paper-meta { font-family: system-ui, sans-serif; font-size: 9pt; color: #555; margin: 0 0 6mm; }
  .hp-paper-body { min-width: 0; overflow-wrap: anywhere; }
  .hp-paper-body h1, .hp-paper-body h2, .hp-paper-body h3 { font-family: system-ui, sans-serif; line-height: 1.3; break-after: avoid; }
  .hp-paper-body p { margin: 0 0 3.5mm; white-space: pre-wrap; }
  .hp-paper-body img, .hp-paper-body canvas, .hp-paper-body svg { max-width: 100%; height: auto; }
  .hp-paper-body table { border-collapse: collapse; max-width: 100%; }
  .hp-paper-body th, .hp-paper-body td { border: 0.5pt solid #999; padding: 1.5mm 2mm; text-align: left; }
  .hp-paper-body .hp-keep { break-inside: avoid; }

  /* FIT-TO-PAGE (R13): poster artefacts are wrapped by print.js
     in .hp-fitbox > .hp-fit and scaled DOWN to the declared
     paper's content box (scale + box height pinned inline by
     the kit's measurement; transform survives into print).
     One sheet: the box never breaks across pages. */
  .hp-fitbox { overflow: hidden; position: relative; break-inside: avoid; page-break-inside: avoid; display: flex; justify-content: center; }
  .hp-fit { transform-origin: top center; flex: 0 0 auto; }
}

/* FIT MEASUREMENT MIRROR (R13, screen-only): print.js measures
   poster artefacts in a .hp-measure clone at content-box width.
   These rules mirror the @media print paper typography above so
   the screen measurement IS the print layout. Keep the values in
   step with the print block — they are the same paper. */
.hp-measure {
  position: absolute; left: -100000px; top: 0; visibility: hidden;
  display: block; color: #111; background: #fff;
  font-family: Georgia, "Times New Roman", serif; font-size: 11.5pt; line-height: 1.55;
}
.hp-measure .hp-paper-title { font-family: system-ui, sans-serif; font-size: 20pt; font-weight: 700; line-height: 1.25; margin: 0 0 4mm; overflow-wrap: anywhere; }
.hp-measure .hp-paper-meta { font-family: system-ui, sans-serif; font-size: 9pt; color: #555; margin: 0 0 6mm; }
.hp-measure .hp-paper-body { min-width: 0; overflow-wrap: anywhere; }
.hp-measure .hp-paper-body h1, .hp-measure .hp-paper-body h2, .hp-measure .hp-paper-body h3 { font-family: system-ui, sans-serif; line-height: 1.3; }
.hp-measure .hp-paper-body p { margin: 0 0 3.5mm; white-space: pre-wrap; }
.hp-measure .hp-paper-body img, .hp-measure .hp-paper-body canvas, .hp-measure .hp-paper-body svg { max-width: 100%; height: auto; }
.hp-measure .hp-paper-body table { border-collapse: collapse; max-width: 100%; }
.hp-measure .hp-paper-body th, .hp-measure .hp-paper-body td { border: 0.5pt solid #999; padding: 1.5mm 2mm; text-align: left; }

/* ============================================================
 * THE UNIVERSAL PRINT MODAL (R6, apps-rethink-2026-11-03).
 * One modal for every kit consumer, rendered by print.js.
 * Screen-only: the @media print block above already keeps
 * everything except #house-print-root off paper, and the
 * explicit rule at the end of this section pins that for the
 * modal. Colours ride Tide tokens (--29d-*) with the kit's
 * literal fallbacks; the night values below mirror Tide's
 * [data-theme="dark"] ramp for consumers that don't load
 * tokens.css. Prose is defended (Squish Law): text-bearing
 * children carry min-width:0, furniture wraps below prose.
 * ============================================================ */
html.hp-modal-open { overflow: hidden; }
.hp-modal-backdrop {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(16, 28, 36, .52);
  transition: opacity var(--d2, 220ms) var(--ease, cubic-bezier(.22,1,.36,1));
}
.hp-modal-backdrop[hidden] { display: none; }
.hp-modal {
  --hp-face: var(--29d-raised, #FFFDF8); --hp-ink: var(--29d-text-1, #1E2A30);
  --hp-ink2: var(--29d-text-2, #46535A); --hp-ink3: var(--29d-text-3, #5C686E);
  --hp-edge: var(--29d-border, #E2D6C0); --hp-well: var(--29d-sunken, #ECE3D2);
  --hp-accent: var(--29d-teal-600, #2A7C71); --hp-accent-soft: var(--29d-teal-100, #DAEFE9);
  --hp-primary: var(--29d-coral-500, #F46036); --hp-on-primary: var(--29d-on-coral, #FFFFFF);
  --hp-focus: var(--focus-ring, #1F6158);
  width: min(560px, 100%); max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--hp-face); color: var(--hp-ink);
  border: 1px solid var(--hp-edge); border-radius: 20px 20px 0 0;
  box-shadow: var(--lift-hi, 0 34px 64px -20px rgba(92,70,40,.30), 0 4px 10px -4px rgba(92,70,40,.10));
  font: 400 15px/1.5 var(--29d-font-ui, system-ui, sans-serif);
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  transition: transform var(--d2, 220ms) var(--ease, cubic-bezier(.22,1,.36,1));
  min-width: 0;
}
@media (min-width: 640px) {
  .hp-modal-backdrop { align-items: center; padding: 20px; }
  .hp-modal { border-radius: 20px; }
}
[data-theme="dark"] .hp-modal, [data-sky="dusk"] .hp-modal {
  --hp-face: #132233; --hp-ink: #EDE7DA; --hp-ink2: #B9C2C4; --hp-ink3: #A9B6BB;
  --hp-edge: rgba(196,214,224,.22); --hp-well: #08121C;
  --hp-accent: #62C9B7; --hp-accent-soft: #123A37;
  --hp-primary: #FFA25E; --hp-on-primary: #2A1503; --hp-focus: #8DCABD;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="day"]):not([data-sky="day"]) .hp-modal {
    --hp-face: #132233; --hp-ink: #EDE7DA; --hp-ink2: #B9C2C4; --hp-ink3: #A9B6BB;
    --hp-edge: rgba(196,214,224,.22); --hp-well: #08121C;
    --hp-accent: #62C9B7; --hp-accent-soft: #123A37;
    --hp-primary: #FFA25E; --hp-on-primary: #2A1503; --hp-focus: #8DCABD;
  }
}
.hp-modal-head { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.hp-modal-titles { flex: 1 1 auto; min-width: 0; }
.hp-modal-title { font: 700 20px/1.25 var(--29d-font-ui, system-ui, sans-serif); margin: 0; overflow-wrap: anywhere; }
.hp-modal-sub { margin: 2px 0 0; font-size: 13px; color: var(--hp-ink3); overflow-wrap: anywhere; min-width: 0; }
.hp-icon-btn {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--hp-edge); background: var(--hp-face); color: var(--hp-ink);
  font-size: 22px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.hp-icon-btn:hover { background: var(--hp-well); }
.hp-routes { display: flex; gap: 8px; margin: 14px 0 4px; min-width: 0; flex-wrap: wrap; }
.hp-route-tab {
  flex: 1 1 45%; min-width: 0; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--hp-edge); border-radius: 999px;
  background: var(--hp-face); color: var(--hp-ink2);
  font: 600 14.5px/1.2 var(--29d-font-ui, system-ui, sans-serif); cursor: pointer;
  overflow-wrap: anywhere;
}
.hp-route-tab[aria-selected="true"] { background: var(--hp-accent-soft); border-color: var(--hp-accent); color: var(--hp-ink); }
.hp-panel { min-width: 0; padding-top: 10px; }
.hp-panel[hidden] { display: none; }
.hp-lede { margin: 0 0 12px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; min-width: 0; }
.hp-spec {
  display: flex; gap: 10px; align-items: baseline; min-width: 0; flex-wrap: wrap;
  border: 1px solid var(--hp-edge); border-radius: 14px; padding: 10px 12px; margin: 0 0 14px;
  background: var(--hp-well);
}
.hp-spec-k { flex: 0 1 auto; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hp-ink3); }
.hp-spec-v { flex: 1 1 45%; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.hp-modal .hp-btn { min-height: 48px; padding: 0 18px; font-size: 15px; }
.hp-btn.hp-primary { background: var(--hp-primary); border-color: transparent; color: var(--hp-on-primary); }
.hp-btn.hp-primary:hover { filter: brightness(1.05); background: var(--hp-primary); }
.hp-modal .hp-note { margin-top: 12px; color: var(--hp-ink3); font-size: 13px; }
.hp-modal .hp-note strong { color: var(--hp-ink2); }
.hp-modal :focus-visible, .hp-btn:focus-visible, .hp-chip:focus-visible, .hp-icon-btn:focus-visible, .hp-route-tab:focus-visible {
  outline: 3px solid var(--hp-focus, var(--focus-ring, #1F6158)); outline-offset: 2px;
}
.hp-chips, .hp-sizes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; margin: 0 0 10px; }
.hp-chip {
  flex: 0 1 auto; min-width: 44px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--hp-edge); border-radius: 999px;
  background: var(--hp-face); color: var(--hp-ink2);
  font: 600 14px/1.2 var(--29d-font-ui, system-ui, sans-serif); cursor: pointer;
}
.hp-chip.hp-on { background: var(--hp-accent-soft); border-color: var(--hp-accent); color: var(--hp-ink); }
.hp-sizes-label { flex: 0 1 auto; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hp-ink3); }
.hp-preview { min-width: 0; margin: 4px 0 2px; }
.hp-poster-frame {
  position: relative; width: 100%; overflow: hidden;
  background: #fff; border: 1px solid var(--hp-edge); border-radius: 10px;
  box-shadow: 0 10px 24px -12px rgba(30,42,48,.28);
}
.hp-preview-scale { position: absolute; top: 0; left: 0; width: 794px; transform-origin: top left; }
.hp-preview-body {
  width: 794px; padding: 30px; box-sizing: border-box;
  color: #111; background: #fff;
  font-family: Georgia, "Times New Roman", serif; font-size: 15px; line-height: 1.55;
  overflow-wrap: anywhere;
}
.hp-preview-title { font-family: system-ui, sans-serif; font-size: 27px; font-weight: 700; line-height: 1.25; margin: 0 0 6px; overflow-wrap: anywhere; }
.hp-preview-meta { font-family: system-ui, sans-serif; font-size: 13px; color: #555; margin: 0 0 16px; }
.hp-preview-body img, .hp-preview-body canvas, .hp-preview-body svg { max-width: 100%; height: auto; }
.hp-preview-body table { border-collapse: collapse; max-width: 100%; }
.hp-preview-body th, .hp-preview-body td { border: 0.5pt solid #999; padding: 4px 6px; text-align: left; }
.hp-preview-cap { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--hp-ink3); overflow-wrap: anywhere; min-width: 0; }
.hp-honest { border: 1px solid var(--hp-edge); border-radius: 14px; padding: 10px 12px; background: var(--hp-well); }
.hp-handoff { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; min-width: 0; margin-top: 12px; }
.hp-handoff .hp-btn { flex: 0 1 auto; }

@media (prefers-reduced-motion: reduce) {
  .hp-modal-backdrop, .hp-modal { transition: none; }
}
html[data-motion="reduced"] .hp-modal-backdrop, html[data-motion="reduced"] .hp-modal { transition: none; }

@media print {
  .hp-modal-backdrop { display: none !important; }
}