/* ============================================================
   export.css · styles for the in-app document generator (export.js).

   Two parts:
   1. THE CONTROL. An inline Export button + a popover menu of download
      options. It sits inline in a surface toolbar, not in the floating
      dock column, so it never collides with the Help pill or the Ask-AI
      dock. Token-driven (cyan / gold / line), light + dark, overflow-safe.
   2. THE PRINT MODE. A hidden print root that export.js builds in this
      document. On screen it is display:none. In print, body.ti-printing
      hides the app and shows only the print root, so Save-as-PDF from the
      browser print dialog yields a clean report or deck. No new window.

   Token-driven: paints from the cyan / gold / warn / line / surface tokens
   aero.css defines, so the same control repaints in light + dark. No raw
   hex on screen. The print root carries a fixed print-clean palette inside
   @media print only (a printed page has no theme).

   CSP-safe: stylesheet only, no @import of a remote sheet, no url() to a
   remote host. Honors prefers-reduced-motion.
   ============================================================ */

/* ============================================================
   1. THE CONTROL
   ============================================================ */
.ti-export {
  position: relative;
  display: inline-flex;
  min-width: 0;
}

.ti-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent-deep);
  background: var(--accent-pale);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s ease, box-shadow 0.16s ease,
    background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.ti-export-btn:hover {
  transform: translateY(-1px);
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: var(--shadow-teal);
}
.ti-export-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-pale), var(--shadow-sm);
}
.ti-export-btn[aria-expanded="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.ti-export-glyph {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  color: var(--accent);
  transition: transform 0.16s ease;
}
.ti-export-btn[aria-expanded="true"] .ti-export-glyph {
  transform: rotate(180deg);
}

/* the popover menu, anchored to the button's right edge */
.ti-export-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: 290px;
  max-width: calc(100vw - 32px);
  padding: 14px 14px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.ti-export-menu[hidden] { display: none; }

.ti-export-menu-head {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.ti-export-note {
  margin: 0 0 12px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dimmer);
}

.ti-export-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ti-export-group {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dimmer);
  margin: 10px 0 4px;
  padding: 0 2px;
}
.ti-export-group:first-child { margin-top: 0; }

.ti-export-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-width: 0;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.ti-export-item:hover {
  background: var(--accent-pale);
  border-color: var(--border-accent);
  color: var(--accent-deep);
}
.ti-export-item:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-pale);
}

/* phone: the menu hugs the right edge but stays on-screen and scrolls if it
   is taller than the viewport (it never will be, but this is the safety) */
@media (max-width: 560px) {
  .ti-export-menu {
    width: min(290px, calc(100vw - 24px));
    max-height: 70vh;
    overflow-y: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ti-export-btn,
  .ti-export-glyph,
  .ti-export-item { transition: none; }
  .ti-export-btn:hover { transform: none; }
  .ti-export-btn[aria-expanded="true"] .ti-export-glyph { transform: none; }
}

/* ============================================================
   2. THE PRINT MODE
   ------------------------------------------------------------
   The print root is built into this document by export.js. On screen it is
   never shown. In the print dialog, body.ti-printing hides the live app and
   reveals only the print root, so the saved PDF is the report or the deck.
   ============================================================ */
.ti-print-root { display: none; }

@media print {
  /* hide the whole live app, show only the print root */
  body.ti-printing > *:not(.ti-print-root) { display: none !important; }
  body.ti-printing { background: #fff !important; margin: 0 !important; }

  .ti-print-root {
    display: block;
    color: #15171c;
    font: 12pt/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    max-width: 100%;
    padding: 0 6mm;
  }

  .ti-print-root .tip-kicker {
    font: 9pt/1 ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0e6e86;
    margin: 0 0 8pt;
  }
  .ti-print-root .tip-title { font-size: 20pt; margin: 0 0 3pt; letter-spacing: -0.01em; }
  .ti-print-root .tip-sub { color: #474c54; margin: 0 0 12pt; font-size: 12pt; }

  .ti-print-root .tip-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6pt 18pt;
    margin: 0 0 16pt;
    padding: 8pt 10pt;
    border: 1px solid #d9dbd4;
    border-radius: 6pt;
  }
  .ti-print-root .tip-meta-cell { min-width: 0; }
  .ti-print-root .tip-meta-label {
    display: block;
    font: 8pt/1 ui-monospace, Menlo, monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5c636d;
    margin-bottom: 2pt;
  }
  .ti-print-root .tip-meta-val { display: block; font-weight: 600; }

  .ti-print-root .tip-section {
    margin: 0 0 14pt;
    padding: 0 0 12pt;
    border-bottom: 1px solid #e2e4de;
    page-break-inside: avoid;
  }
  .ti-print-root .tip-section:last-of-type { border-bottom: 0; }
  .ti-print-root .tip-h2 { font-size: 14pt; margin: 0 0 3pt; }
  .ti-print-root .tip-note { color: #474c54; margin: 0 0 8pt; font-size: 11pt; }
  .ti-print-root .tip-text { margin: 0 0 8pt; }

  .ti-print-root .tip-dl { margin: 0; }
  .ti-print-root .tip-dl-row {
    display: flex;
    gap: 12pt;
    padding: 4pt 0;
    border-bottom: 1px solid #edeee9;
  }
  .ti-print-root .tip-dl-row:last-child { border-bottom: 0; }
  .ti-print-root .tip-dt { flex: 0 0 36%; color: #474c54; }
  .ti-print-root .tip-dd { flex: 1 1 auto; font-weight: 500; min-width: 0; }

  .ti-print-root .tip-ul { margin: 4pt 0 0; padding: 0 0 0 16pt; }
  .ti-print-root .tip-ul li { margin: 3pt 0; }

  .ti-print-root .tip-tbl { width: 100%; border-collapse: collapse; margin: 4pt 0 0; font-size: 10.5pt; }
  .ti-print-root .tip-tbl th,
  .ti-print-root .tip-tbl td {
    text-align: left;
    padding: 5pt 7pt;
    border: 1px solid #d9dbd4;
    vertical-align: top;
  }
  .ti-print-root .tip-tbl th { background: #e7f2f5; font-weight: 600; }

  .ti-print-root .tip-footer {
    margin-top: 18pt;
    padding-top: 10pt;
    border-top: 2px solid #0e6e86;
    color: #474c54;
    font-size: 10pt;
  }

  /* the deck: one slide per printed page */
  .ti-print-root.is-deck .tip-slide {
    page-break-after: always;
    padding: 8mm 4mm;
    min-height: 0;
  }
  .ti-print-root.is-deck .tip-slide:last-child { page-break-after: auto; }
  .ti-print-root.is-deck .tip-title { font-size: 28pt; }
  .ti-print-root.is-deck .tip-h2 { font-size: 22pt; margin: 0 0 8pt; }
  .ti-print-root.is-deck .tip-pageno {
    display: block;
    margin-top: 14pt;
    font: 8pt ui-monospace, Menlo, monospace;
    letter-spacing: 0.14em;
    color: #838d98;
  }
  .ti-print-root .tip-pageno { display: none; }
}