/* Take Interest · Crestline Aerosystems · brief.css · readout layout + print
   =================================================================
   Pairs with brief.html (the RESULT surface / executive readout).
   Reads crestline.css "Datum" tokens ONLY. No new colors, no new fonts,
   no new identity. This file adds two things on top of the reused
   crestline.css component classes:
     1. thin layout helpers for the readout masthead, glance rows,
        status pills, sign strip (all composed from existing tokens), and
     2. a print stylesheet so the readout prints clean on one paper trail
        (the CEO / AIP can print or save-to-PDF the drafted narrative).
   Same pattern as walkthrough.css: a page-specific sheet linked after
   crestline.css + shell.css. CSP-safe (no @import of remote, no fonts).
   ================================================================= */

/* ---- "drafted, you always send" banner ---- */
.brief-draft {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--surface-3), var(--accent-pale));
  border: 1px solid var(--border-accent);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 18px 0 26px;
}
.brief-draft-tag {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--accent-deep); background: var(--surface);
  border: 1px solid var(--border-accent); border-radius: 999px;
  padding: 4px 12px; white-space: nowrap; flex-shrink: 0;
}
.brief-draft p { font-size: 14px; color: var(--text-dim); margin: 0; flex: 1; min-width: 220px; }
.brief-draft-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.brief-draft-actions a { border-bottom: none; }

/* ---- the readout document wrapper (a calm sheet, not a dashboard) ---- */
.brief-doc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 34px 38px 30px;
}

/* ---- masthead ---- */
.brief-masthead {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px;
  align-items: start;
}
.brief-mast-copy h1 { font-size: 30px; margin: 8px 0 10px; }
.brief-mast-sub { font-size: 15px; color: var(--text-dim); max-width: 54ch; }
.brief-mast-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.brief-mast-rows { width: 100%; }
.brief-mast-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--border-soft);
}
.brief-mast-row:last-child { border-bottom: none; }
.brief-mast-row .k {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-dimmer); white-space: nowrap;
}
.brief-mast-row .v { font-size: 12.5px; color: var(--text); text-align: right; }

/* ---- section heads inside the doc ---- */
.brief-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin: 4px 0 14px;
}
.brief-section-head h2 { font-size: 20px; }

/* ---- portfolio glance rows ---- */
.brief-glance { display: flex; flex-direction: column; }
.brief-glance-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) auto auto;
  grid-template-areas: "name phase status" "note note note";
  gap: 6px 12px; align-items: center;
  padding: 4px 0;
}
.brief-glance-row .bg-name { grid-area: name; font-weight: 600; font-size: 15px; }
.brief-glance-row .src-tag { grid-area: phase; justify-self: start; }
.brief-glance-row .brief-status { grid-area: status; justify-self: end; }
.brief-glance-row .bg-note { grid-area: note; font-size: 13px; color: var(--text-dim); }

/* status pills · built from existing semantic tokens, no new palette.
   "watch" uses the reserved attention amber; that is its sanctioned use. */
.brief-status {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  border-radius: 999px; padding: 3px 11px; white-space: nowrap;
  border: 1px solid var(--border);
}
.brief-status.on-track { color: var(--ok); background: var(--ok-wash); border-color: var(--ok); }
.brief-status.watch    { color: var(--gold-deep); background: var(--gold-pale); border-color: var(--gold); }
.brief-status.steady   { color: var(--text-dim); background: var(--surface-2); border-color: var(--border); }

/* ---- aside key/value + the "clear" closing row ---- */
.aside-card .row .brief-kv {
  float: right; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text);
}
.aside-card .row.brief-row-clear {
  font-family: var(--mono); font-size: 11px; color: var(--text-dimmer);
  letter-spacing: 0.2px; line-height: 1.5;
}
.aside-card.brief-aside-scope { border-left: 3px solid var(--accent); }
.aside-card.brief-aside-scope .row { color: var(--text-dim); }

/* ---- AIP narrative card ---- */
.brief-narrative p { font-size: 14.5px; color: var(--text); margin-bottom: 12px; }
.brief-narrative p:last-child { margin-bottom: 0; }
.brief-narrative strong { font-weight: 600; }

/* ---- sign strip ---- */
.brief-sign {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap;
  padding-top: 6px;
}
.brief-sign-line { display: flex; flex-direction: column; gap: 3px; }
.brief-sign-from { font-size: 14px; color: var(--text); }
.brief-sign-note { font-family: var(--mono); font-size: 11px; color: var(--text-dimmer); letter-spacing: 0.2px; }
.brief-sign a { border-bottom: none; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  .brief-doc { padding: 24px 20px; }
  .brief-masthead { grid-template-columns: 1fr; gap: 16px; }
  .brief-mast-meta { align-items: flex-start; }
  .brief-mast-row .v { text-align: left; }
  .brief-glance-row { grid-template-columns: 1fr auto; grid-template-areas: "name status" "phase phase" "note note"; }
  .brief-glance-row .src-tag { justify-self: start; }
}

/* ============================================================
   PRINT · the CEO / AIP print or save-to-PDF the drafted readout.
   One clean paper trail: drop the app shell, the rail, the draft
   banner and the send buttons; keep the readout document only.
   Force the light "paper" identity so it prints on white, never the
   dark hangar theme. Avoid breaking a section across a page.
   ============================================================ */
@media print {
  /* re-assert the paper palette regardless of toggle / OS dark mode */
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F4F5F1; --surface-3: #F1F4F8;
    --paper: #FFFFFF; --bg-warm: #F4F5F1; --text: #15171C; --text-dim: #3A3F47; --text-dimmer: #5A616A;
    --accent: #123A92; --accent-deep: #0E2E75; --accent-soft: rgba(18,58,146,.12); --accent-pale: rgba(18,58,146,.06); --accent-bright: #123A92;
    --gold: #7A4D0E; --gold-deep: #5E3B0A; --gold-soft: rgba(122,77,14,.14); --gold-pale: rgba(122,77,14,.07);
    --subtle: #B6BBC1; --border: #C9CDC7; --border-soft: #E0E2DC; --border-accent: rgba(18,58,146,.30);
    --ok: #226A4A; --warn: #8E2A22; --info: #1F4F9E; --ok-wash: #EDF4EF;
    --shadow-sm: none; --shadow: none; --shadow-lg: none; --shadow-teal: none;
  }
  html, body { background: #FFFFFF !important; }

  /* collapse the app grid → the readout becomes the whole page */
  .app-shell { display: block !important; }
  .ti-shell-nav, #ti-shell-nav,
  .brief-draft, .ti-theme-toggle, #ti-role, #ti-gate,
  .brief-sign a, .brief-draft-actions { display: none !important; }

  main.workspace { padding: 0 !important; max-width: none !important; width: auto !important; }

  /* the scope line + footer SHOULD print; they are the compliance frame */
  .scope-banner {
    border: 1px solid var(--border) !important; border-left: 3px solid var(--accent) !important;
    margin-bottom: 14px;
  }

  .brief-doc {
    border: none !important; border-radius: 0 !important; box-shadow: none !important;
    padding: 0 !important;
  }

  /* keep a section + its head from splitting across pages */
  .brief-doc section, .brief-glance-row, .tl-item, .aside-card,
  .next-action-card, .pattern, .brief-narrative, .phase-track, .brief-masthead {
    break-inside: avoid; page-break-inside: avoid;
  }
  .brief-section-head h2, h1, h2 { break-after: avoid; page-break-after: avoid; }

  /* two-column readout body stacks for a single print column */
  .two-col { display: block !important; }
  .two-col > div + div { margin-top: 8px; }

  /* hairline economy on paper */
  a { color: var(--text) !important; border-bottom: none !important; }
  .src-tag, .brief-status { box-shadow: none !important; }

  .page-footer { margin-top: 22px; }
}