/* ============================================================================
   print.css : paper is the Daylight ground (brand book ch.07 · B "Daylight":
   documents, print). Linked with media="print", so the screen never sees it.

   · Motion — every `prefers-reduced-motion: reduce` block on the site also
     matches `print`, so paper gets the site's own composed static end state;
     main.js lands the JS-driven ones (the gate's verdict, how-it-works' last
     beat) on beforeprint.
   · Colour — the Deep Space tokens take their Sea Foam values (brand book
     tokens.css, [data-theme="light"]): ink text, coral and orange text darken
     to Coral Ink / Ember Ink, the core sinks to Tide. #00E5FF never reaches
     paper, and nothing glows.
   · The product screens in #how-it-works are pictures of the real UI: they
     print exactly as they are, dark theme included. Everything else is the
     site, and the site prints in Daylight.
   ============================================================================ */

@page { margin: 14mm 12mm 16mm; }

:root {
  color-scheme: light;
  /* paper: a white ground, ink hairlines */
  --bg: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-card: rgba(10, 12, 16, 0.025);
  --bg-input: #FFFFFF;
  --bg-hover: rgba(10, 12, 16, 0.06);
  --bg-navbar: transparent;
  --border: rgba(10, 12, 16, 0.12);
  --border-strong: rgba(10, 12, 16, 0.2);
  --border-cyan: rgba(0, 116, 136, 0.35);
  /* ink · contrast on white */
  --text: #0A0C10;              /* 19.6 : 1 */
  --text-secondary: #475569;    /*  7.6 : 1 */
  --text-muted: #5B6B80;        /*  5.4 : 1 */
  /* warm text darkens to its ink (#FF6B6B is 2.8 : 1 on paper); the core sinks to Tide */
  --coral: #C93F3F;             /* Coral Ink 4.9 : 1 */
  --orange: #C2410C;            /* Ember Ink 5.2 : 1 */
  --cyan: #007488;              /* Tide      5.4 : 1 */
  --cyan-soft: #005E6E;
  --cyan-glow: transparent;
  --grad-brand: linear-gradient(135deg, #FF6B6B, #FF8E53 40%, #007488);   /* the waterline */
  /* verdicts */
  --success-fg: #047857;  --success-bg: rgba(4, 120, 87, 0.08);   --success-border: rgba(4, 120, 87, 0.35);
  --warning-fg: #B45309;  --warning-bg: rgba(180, 83, 9, 0.08);
  --denied-fg: #475569;   --denied-bg: rgba(71, 85, 105, 0.08);
  --error-fg: #BE123C;    --error-bg: rgba(190, 18, 60, 0.08);
  --shadow-float: none;
  --shadow-glow: none;
}

/* ─── Ground + stillness ─── */
html, body { background: #FFFFFF; }
/* belt and braces over the reduced-motion blocks: nothing is caught mid-flight,
   and nothing glows on paper */
*, *::before, *::after {
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* decoration, and controls that do nothing on paper */
.aurora, .dot-grid, .hero::after, .story-card::after, .gradient-frame::after, .audit-caret,
.nav-links, .nav-cta, .hero-cta, .hw-replay, .hw-door-replay, .composer,
.eco-locale-switch, .eco-cta-row, .story-cta, .faq-more, .faq-ico, .page-next, .door-cta, .foot-nav { display: none !important; }

/* dots, rails and caps are colour, not ground: they print even when the reader
   leaves "Background graphics" off (the brand gradient at its smallest scale) */
.chip-dot, .hero-badge-dot, .hw-dot, .lv, .ea-share i, .deploy-dot, .flow-line, .hh-link,
.story-points li::before, .stat-lines li::before, .stat-lines li:last-child::after, .eco-legend::before,
.hero-proofcard::before, .gate-card::before, .eco-board::before,
.story-card::before, .close-band::before, .band-layer::before, .cap-card::before, .eco-sub::before,
.lf-head .lf-own::before, .tk-board::before, .crm-board::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* the marks' cores follow the token: Tide on paper (inside the product screens
   the token is still #00E5FF, on its own dark ground) */
[stroke="#00E5FF" i] { stroke: var(--cyan); }
[fill="#00E5FF" i] { fill: var(--cyan); }

/* a page of its own starts at the top of the sheet: the nav is the static masthead on paper */
.page-lead { padding-top: 26px; }

/* ─── Page flow ─── */
.wrap { max-width: none; padding-inline: 0; }
.section { padding: 26px 0; }
h1, h2, h3, .eyebrow, .hw-door-head { break-after: avoid; }
h1, h2, h3 { break-inside: avoid; }
.hero-proofcard, .hw-door, .hw-plane, .tk-step, .tk-board, .crm-facet, .crm-board, .lf-head, .lf-table tbody tr, .stat-lines li, .gate-card,
.cap-card, .posture-tile, .eco-board, .arch-diagram, .locale-card, .faq-item, .story-card, .site-footer { break-inside: avoid; }
p, li { orphans: 3; widows: 3; }
/* layout grids that are one column at this width flow as plain blocks on paper:
   Chrome won't break a page between the rows of nested grids, it pushes the whole
   section to the next page instead (each rule keeps its own screen breakpoint, so a
   landscape sheet still gets the multi-column layouts) */
.gate-wrap { display: block; }
.composer-micro { margin-top: 12px; }
@media (max-width: 980px) {
  .hero-grid { display: block; }
  .hero-proofcard { margin-top: 32px; }
}
@media (max-width: 1024px) {
  .tk-grid, .crm-grid { display: block; }
  .tk-board, .crm-board { margin-top: 30px; }
}
@media (max-width: 940px) {
  .moat-grid, .eco-grid, .hw-stage, .faq-grid { display: block; }
  .moat-thesis, .eco-intro, .faq-intro { margin-bottom: 32px; }
  .hw-stage > * + * { margin-top: 26px; }
}
@media (max-width: 760px) {
  .cap-grid, .posture-grid { display: block; }
  .cap-grid > * + *, .posture-grid > * + * { margin-top: 14px; }
}

/* ─── Masthead: the mark, the name, the address ─── */
.nav { position: static; height: auto; padding-bottom: 12px; border-bottom: 1px solid var(--border); background: none; }
.nav .wrap::after { content: "enhydralab.ai"; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--text-muted); }

/* ─── Shared pieces ─── */
.card, .lf-card, .gate-card, .eco-board, .hw-board, .hw-plane, .tk-board, .crm-board, .story-card, .arch-band, .band-layer,
.hero-proofcard, .close-band, .explore-card, .local, .problem, .moat, .ecosystem, .posture, .faq, .faq-list { background: none; }
/* the FAQ intro stops being sticky; every answer prints open (main.js opens them on beforeprint) */
.faq-intro { position: static; }
.hero-proofcard, .gate-card, .eco-board, .tk-board, .crm-board, .story-card, .close-band { border-color: var(--border-strong); }
.eyebrow, .hw-caption, .tk-caption, .lf-caption, .crm-caption, .moat-caption { opacity: 1; }
.chip, .hero-badge, .hw-node.is-on, .beat.is-active, .hh-ai, .ea-mark, .story-tone { background: rgba(0, 116, 136, 0.06); }
.hero-sub a, .lead a, .eco-sub-body a, .eco-archnote a, .cap-card p a { text-decoration-color: rgba(0, 116, 136, 0.45); }
.site-footer a[href^="http"]::after { content: " · " attr(href); font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

/* "Cleared to act." prints solid Coral Ink. Text-clipped backgrounds don't survive
   every PDF renderer (Preview paints part of the line as a solid block), and paper
   can't risk losing the tagline. */
.text-gradient { background: none; color: var(--coral); -webkit-text-fill-color: currentColor; }

/* ─── Hero ─── */
.hero { min-height: 0; padding: 22px 0 6px; overflow: visible; }
.hero-logo { width: 64px; height: 64px; margin-bottom: 18px; }
.hero-proofcard { max-width: none; }
/* the live tape stops where it stands: every written line shows, none clipped mid-shift */
.ledger-view { height: auto !important; overflow: visible; }
.ledger { transform: none !important; }
/* a printed log line is never truncated: no edge-fade mask (PDF viewers render it as a
   soft mask, and some cut the line at a hard edge when zoomed), no clip — it wraps */
.ledger li {
  border-bottom-color: var(--border);
  flex-wrap: wrap; row-gap: 0; white-space: normal; overflow: visible;
  -webkit-mask-image: none; mask-image: none;
}
/* …and keeps every field: the narrow-width rules that drop the amount, stamp and
   approver exist to keep a screen line on one line; paper wraps instead */
.ledger .led-amt, .ledger .led-ts, .ledger .led-tail, .ledger .led-id { display: inline; }
.ledger li.led-exit { display: none; }
.ledger .led-dip { opacity: 1; }

/* ─── How it works: the frame goes Daylight, the screens stay the product ───
   Each surface is a figure of its own page; the board's frame and label would
   only draw an empty box around the page break. */
.hw-board { border: 0; border-radius: 0; padding: 0; }
.hw-board::before, .hw-head { display: none; }
.hw-door-n { background: none; border: 1.5px solid var(--cyan); color: var(--cyan); }
.hw-node { background: none; }
.hw-dot { background: var(--border-strong); }
.hw-audit { border-top-color: rgba(0, 116, 136, 0.3); }
.hub-core-disc, .hub-core-cap, .hub-node, .flow-gate { background: #FFFFFF; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.hub-core-disc::after { border-color: rgba(0, 116, 136, 0.45); }
.hw-screen, .tk-screen, .crm-screen {
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
  border-color: rgba(10, 12, 16, 0.2);
  /* the product's own theme, restored inside its screens */
  --text: #E2E8F0; --text-secondary: #94A3B8; --text-muted: #6E7F96;
  --coral: #FF6B6B; --orange: #FF8E53; --cyan: #00E5FF; --cyan-soft: #7EE8FF;
  --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --border-cyan: rgba(0, 229, 255, 0.22);
  --success-fg: #6EE7B7; --warning-fg: #FCD34D; --denied-fg: #94A3B8; --error-fg: #F43F5E;
  color: var(--text);   /* inherited colour follows the product's theme too, not the paper's */
}

/* ─── Turnkey: the frame goes Daylight, the two screens stay the product ─── */
.tk-n, .tk-step:last-child .tk-n { background: none; border: 1.5px solid var(--cyan); color: var(--cyan); }
/* the path line is a screen flourish: the section is taller than a page, and a line running
   into a page break reads as broken, so paper keeps just the numbered steps */
.tk-step::before { display: none; }
/* the sign-in heading's gradient is clipped text: paper gets the solid coral (see .text-gradient) */
.tk-app-h span { background: none; color: var(--coral); -webkit-text-fill-color: currentColor; }

/* ─── Enhydra CRM: the frame goes Daylight, the two screens stay the product ─── */
.crm-tile { background: none; }
:is(.crm-facet-team, .crm-facet-offer) .crm-tile { border-color: rgba(201, 63, 63, 0.35); }
/* each half's key stays with its heading, and the heading with its points */
.crm-part-k, .crm-part-head { break-after: avoid; }
.crm-part + .crm-part { border-top-color: var(--border-strong); }

/* ─── Local-first: the Enhydra column stays one band ─── */
.lf-own, .lf-table tbody .lf-k::after { background: rgba(0, 116, 136, 0.05); }
.lf-table tbody .lf-own { border-block-start-color: rgba(0, 116, 136, 0.15); }

/* ─── The gate ─── */
.beat { opacity: 1; background: none; }
.beat.is-done { border-color: rgba(4, 120, 87, 0.35); }
.hh-human { background: rgba(201, 63, 63, 0.06); border-color: rgba(201, 63, 63, 0.35); }
.gate-audit { border-top-color: rgba(0, 116, 136, 0.3); }

/* ─── Capabilities · architecture ─── */
.cap-card code { background: rgba(0, 116, 136, 0.08); }
.pill-live, .deploy-pill { background: none; }
.flow-line { background: rgba(0, 116, 136, 0.45); }

/* ─── Ecosystem: every scope chip in its access colour — the composed end state ─── */
.eco-legend::before { background: var(--border-strong); }   /* solid: a fade-to-transparent is a soft mask in PDF too */
.hub-link { stroke-opacity: 0.45; }
.ea-share i { border-color: #FFFFFF; }
.eco-board-foot { border-top-color: rgba(0, 116, 136, 0.3); }
.eco-stage .ea-scope.sc-org  { color: var(--cyan) !important; background: rgba(0, 116, 136, 0.06) !important; border-color: var(--border-cyan) !important; }
.eco-stage .ea-scope.sc-dept { color: var(--coral) !important; background: rgba(201, 63, 63, 0.06) !important; border-color: rgba(201, 63, 63, 0.35) !important; }
.eco-stage .ea-scope.sc-role { color: var(--orange) !important; background: rgba(194, 65, 12, 0.06) !important; border-color: rgba(194, 65, 12, 0.35) !important; }
.eco-stage .ea-scope.sc-user { color: var(--text-secondary) !important; background: none !important; border-color: var(--border-strong) !important; }

/* ─── Global ─── */
.lc-audit { background: var(--success-bg); }

/* ─── Close ─── */
.story-card { padding: 24px; }
/* the brand block folds into one line: the masthead and the footer already carry
   the mark, and the room it frees keeps the footer on the last page */
.story-visual { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0; border: 0; background: none; }
.story-logo { width: 40px; height: 40px; }
.story-wordmark { font-size: 22px; }
.story-wordmark, .story-title, .story-points li { color: var(--text); }
.story-mono { color: var(--cyan); }
.story-lead { color: var(--text-secondary); }
.story-points li::before { background: var(--cyan); }
.story-footer { border-top-color: rgba(201, 63, 63, 0.3); color: var(--orange); }
.close .close-band-lead { color: var(--text); }
.close-band-strip { color: var(--text-secondary); }
.explore-arrow { color: var(--cyan); }
/* one line per item: a wrapping flex row won't honour break-inside on paper */
.site-footer { padding: 16px 0 0; }
.site-footer .wrap { display: block; }
.site-footer .wrap > * + * { margin-top: 6px; }
.foot-contact { display: flex; }
/* the sign-in links print with their addresses (the a[href^="http"]::after rule): one product
   per line under the label, no separator, no underline */
.foot-doors { display: flex; }
.foot-doors-l { flex: 1 1 100%; flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; }
.foot-doors a { padding-block: 0; margin-block: 0; text-decoration: none; }
.foot-doors a + a::before { content: none; }