/* Google Ads Audit — application chrome and report document styles.
   Palette is deliberately neutral with a single accent so it can be re-skinned
   to Agital brand assets by changing the custom properties below. */

:root {
  --ink:      #14181f;
  --ink-2:    #3d4757;
  --muted:    #6b7787;
  --line:     #e3e7ed;
  --line-2:   #eef1f5;
  --bg:       #f6f7f9;
  --surface:  #ffffff;
  --accent:   #2b4c8c;
  --accent-2: #eaf0fa;

  --good:  #1f7a4d;  --good-bg:  #e8f5ee;
  --ok:    #8a6100;  --ok-bg:    #fdf3dd;
  --bad:   #a32a20;  --bad-bg:   #fdeceb;
  --none:  #5c6672;  --none-bg:  #eef0f3;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: .88em; background: var(--line-2);
       padding: .12em .38em; border-radius: 4px; }
pre { overflow-x: auto; background: var(--line-2); padding: 12px; border-radius: 8px; }
h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -0.011em; }

/* ------------------------------------------------------------- chrome */

.chrome { background: var(--surface); border-bottom: 1px solid var(--line); }
.chrome-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px;
                display: flex; align-items: center; gap: 28px; height: 56px; }
.brand { font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.chrome nav { display: flex; gap: 20px; }
.chrome nav a { color: var(--ink-2); font-size: 14px; }
.chrome nav a.on { color: var(--accent); font-weight: 550; }
.chrome-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* A finished run's views as one switcher, aligned with the chrome above it. */
.run-bar { background: var(--surface); border-bottom: 1px solid var(--line); }
.run-bar-inner { max-width: 1180px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center;
                 justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.run-views { display: inline-flex; gap: 2px; padding: 4px; background: var(--line-2); border-radius: 10px; }
.run-views a { padding: 7px 16px; border-radius: 7px; font-size: 14px; font-weight: 550; color: var(--ink-2);
               white-space: nowrap; }
.run-views a:hover { color: var(--ink); text-decoration: none; background: rgba(255, 255, 255, .6); }
.run-views a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 24, 31, .14); }
.run-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.run-actions form { margin: 0; }
.run-actions .btn { white-space: nowrap; padding: 8px 14px; }

.banner { background: #fff8e6; border-bottom: 1px solid #f0e0b0; color: #6b530d;
          padding: 10px 24px; font-size: 13.5px; text-align: center; }
.banner code { background: #f6ebcd; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 32px 24px 80px; }
.wrap.narrow { max-width: 720px; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between;
             gap: 24px; margin-bottom: 24px; }
.page-head h1 { margin: 0 0 4px; font-size: 26px; }
.page-head p { margin: 0; }

/* -------------------------------------------------------------- atoms */

.muted { color: var(--muted); }
.small { font-size: 13px; }
.right { text-align: right; }
.warn  { color: var(--bad); }
/* An unavailable pull is an expected outcome the report discloses, not an
   error. Amber keeps it visible without reading as a broken run. */
.skipped { color: var(--ok); }
.row { display: flex; gap: 12px; align-items: center; }
.row.between { justify-content: space-between; width: 100%; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hint { font-size: 13px; color: var(--muted); margin: -4px 0 4px; }

.card { background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--radius); padding: 22px; margin-bottom: 20px; }
.card h2 { margin: 0 0 8px; font-size: 18px; }
.card h3 { margin: 0 0 8px; font-size: 15px; }
.card.subtle { background: transparent; border-style: dashed; }
.card.empty { text-align: center; padding: 48px 24px; }
.card.auth { margin-top: 12vh; }

.stack { display: flex; flex-direction: column; gap: 14px; }
.stack label, .card label { display: flex; flex-direction: column; gap: 6px;
                            font-size: 13.5px; font-weight: 550; color: var(--ink-2); }

input[type=text], input[type=email], input[type=password], input[type=date],
select, textarea {
  font: inherit; font-weight: 400; color: var(--ink);
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-2);
}
textarea { font-family: var(--mono); font-size: 13px; line-height: 1.6; resize: vertical; }

.btn, button.primary {
  display: inline-block; font: inherit; font-size: 14px; font-weight: 550;
  padding: 9px 16px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--line-2); text-decoration: none; }
.btn.primary, button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover, button.primary:hover { filter: brightness(1.08); }
.btn.small { padding: 5px 11px; font-size: 13px; }
.btn.danger { color: var(--bad); }
.btn.danger:hover { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.run-row-actions { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; }
.run-row-actions form { margin: 0; }
.run-rename { margin: 2px 0 0; }
.run-rename button { font-size: 12px; }
.btn:disabled, button:disabled { opacity: .5; cursor: not-allowed; }
button.link { background: none; border: none; padding: 0; color: var(--accent);
              cursor: pointer; font: inherit; font-size: 13px; }

.pill { display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
        padding: 2px 8px; border-radius: 20px; background: var(--line-2); color: var(--ink-2); }
.warn-pill { background: var(--ok-bg); color: var(--ok); }

.status { font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.status-complete   { background: var(--good-bg); color: var(--good); }
.status-failed     { background: var(--bad-bg);  color: var(--bad); }
.status-queued     { background: var(--none-bg); color: var(--none); }
.status-collecting,
.status-analyzing,
.status-rendering  { background: var(--accent-2); color: var(--accent); }

.error { background: var(--bad-bg); color: var(--bad); padding: 10px 14px;
         border-radius: 8px; font-size: 14px; }
.error.block pre { background: transparent; padding: 8px 0 0; white-space: pre-wrap; }
.notice { background: var(--accent-2); color: #23406f; padding: 12px 14px;
          border-radius: 8px; font-size: 13.5px; }
.notice.block { margin: 14px 0; }

table.grid { width: 100%; border-collapse: collapse; background: var(--surface);
             border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.grid th { text-align: left; font-size: 12px; text-transform: uppercase;
                letter-spacing: .05em; color: var(--muted); font-weight: 600;
                padding: 11px 14px; border-bottom: 1px solid var(--line); background: #fafbfc; }
table.grid td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
table.grid tr:last-child td { border-bottom: none; }
table.grid.compact td, table.grid.compact th { padding: 7px 12px; }

/* ------------------------------------------------------------ progress */

.steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; }
.steps li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.steps .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.steps li.done { color: var(--ink-2); }
.steps li.done .dot { background: var(--good); }
.steps li.active { color: var(--accent); font-weight: 600; }
.steps li.active .dot { background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* -------------------------------------------------------- prompt editor */

.prompt-editor { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.version-list { list-style: none; margin: 0; padding: 0; }
.version-list li { padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.version-list li:last-child { border-bottom: none; }
.version-list li.active { background: var(--accent-2); margin: 0 -12px; padding: 10px 12px;
                          border-radius: 8px; border-bottom: none; }
.cost-inputs summary { cursor: pointer; font-weight: 550; font-size: 13.5px; color: var(--ink-2); }
.cost-inputs > *:not(summary) { margin-top: 12px; }

/* =================================================================
   REPORT DOCUMENT
   ================================================================= */

/* ---- Go Fish brand, report only -------------------------------------------

   The client-facing document carries the brand; the working chrome stays
   neutral so nobody mistakes the tool for the deliverable. Scoping the tokens
   to .report-page means the same variable names resolve to brand values inside
   the report and to the neutral defaults everywhere else, which is why the
   rules below mostly do not need to be rewritten.

   Hexes are exact per prompts/brand-visual.md, not approximate. Two things
   there are deliberately not implemented here: the derived chart-mark tokens
   and the PPTX/DOCX/slide traps. This app renders neither charts nor those
   formats — if it ever does, §1 and §5 of that file carry values that were
   contrast- and colorblind-validated, and they should not be re-derived.      */

.report-page, .deck-page {
  --gf-navy:   #072262;  /* Midnight Abyss  PMS 2758 */
  --gf-orchid: #985FB4;  /* Electric Orchid PMS 2583 */
  --gf-blush:  #EEDADB;  /* Blush           PMS 705  */
  --gf-turbo:  #77D7B9;  /* Turbo Green     PMS 338  — dark grounds only */
  --gf-shadow: #555C66;  /* Shadow          PMS 6223 */
  --gf-lilac:  #F6F1F8;  /* Pale Lilac      PMS 663  */

  --ink:      #1A1A1A;
  --ink-2:    var(--gf-shadow);
  --muted:    #7A818C;
  --line:     #EBEDF0;
  --line-2:   #F1EEF5;
  --accent:   var(--gf-orchid);
  --accent-2: var(--gf-lilac);

  /* Status colours are reserved. Never reused as a data series. */
  --good: #1E7A5C;  --good-bg: #E6F2ED;
  --ok:   #8A6100;  --ok-bg:   #FDF3DD;
  --bad:  #C0392B;  --bad-bg:  #FBEAE8;
  --none: var(--gf-shadow); --none-bg: var(--gf-lilac);

  --sans:    "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: "Funnel Display", "Mulish", Georgia, serif;
  --eyebrow: "Fira Sans Condensed", "Mulish", "Segoe UI", sans-serif;

  font-family: var(--sans);
}

.report-page h1, .report-page h2, .report-page h3, .report-page h4,
.report-page .grade .mark {
  font-family: var(--display);
}

/* Fira caps at .08em tracking is the label voice throughout the brand. */
.report-page .eyebrow, .report-page .toc-title, .report-page .verdict h2,
.report-page .findings h2, .report-page .grade .dimension,
.report-page .report thead th, .report-page .hero-meta dt, .section-label {
  font-family: var(--eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Cover grammar: full navy ground, wordmark in Blush, title in white. */
.report-page .report-hero { background: var(--gf-navy); border-color: var(--gf-navy);
                            color: #fff; }
.report-page .report-hero h1 { color: #fff; }
.report-page .report-hero .eyebrow { color: var(--gf-blush); }
.report-page .hero-meta dt { color: var(--gf-blush); opacity: .85; }
.report-page .hero-meta dd { color: #fff; }
.report-page .readonly-note { color: var(--gf-blush); opacity: .8; }

.report-page .verdict { background: var(--gf-navy); color: #fff; }
.report-page .verdict h2 { color: var(--gf-blush); }

/* Muted card grounds so the data reads as the figure, per the illustration rules. */
.report-page .grade { background: var(--gf-lilac); border-color: var(--line); }
.report-page .findings { border-left: 3px solid var(--gf-orchid); }

/* The navy section-label chip, for titling a dense block or table. */
.section-label { display: inline-block; background: var(--gf-navy); color: #fff;
                 font-size: 11px; font-weight: 700; padding: 4px 10px;
                 border-radius: 4px; margin: 0 0 10px; }

/* Findings flags and impact pills. Applied by the renderer to whole table
   cells only, so prose containing the same word is never touched. */
.flag-gap, .flag-risk, .flag-opp, .pill-high, .pill-med {
  display: inline-block; font-family: var(--eyebrow); font-size: 11px;
  font-weight: 700; letter-spacing: .06em; white-space: nowrap;
}
.flag-gap  { color: var(--gf-orchid); }
.flag-risk { color: var(--bad); }
.flag-opp  { color: var(--good); }
.pill-high, .pill-med { color: #fff; padding: 3px 9px; border-radius: 999px; }
.pill-high { background: var(--bad); }
.pill-med  { background: var(--gf-navy); }

/* ---- Scorecard view -------------------------------------------------------

   The same grades the report shows as cards, laid out as the deliverable: one
   column per dimension, opportunities and strengths in one list separated by
   colour, and the letter grades on a single bar underneath. It is built to
   print as one page, because that is how it gets used.                        */

.deck-page { max-width: 1180px; margin: 0 auto; padding: 22px 16px 60px; }

.slide { position: relative; background: #fff; border-radius: 3px;
         padding: 44px 52px 62px; overflow: hidden; margin-bottom: 22px;
         box-shadow: 0 2px 18px rgba(7, 34, 98, .22); }
.slide.navy { background: var(--gf-navy); color: #fff; }

/* The brand's line motifs: flowing lines on navy, a grid on white. They sit
   under the content, so everything else on a slide is lifted above them. */
.slide .deco { position: absolute; top: 0; right: 0; height: 100%; pointer-events: none; z-index: 0; }
.slide .flow { width: 210px; opacity: .32; }
.slide .gridmotif { width: 230px; opacity: .55; }
.slide > :not(.deco):not(.foot):not(.pageno) { position: relative; z-index: 1; }

.slide .eyebrow { font-family: var(--eyebrow); font-weight: 700; font-size: 13px;
                  letter-spacing: .10em; text-transform: uppercase; margin: 0 0 6px;
                  color: var(--gf-blush); }
.slide-title { font-family: var(--display); font-weight: 800; font-size: 44px;
               line-height: 1.04; letter-spacing: -.015em; margin: 0 0 22px;
               color: var(--gf-navy); text-wrap: balance; }
.slide.navy .slide-title { color: #fff; }
.slide-title.sc-title { font-size: 38px; margin-bottom: 18px; }
.slide .lede { font-size: 16px; line-height: 1.6; max-width: 74ch; }
.slide.navy .lede, .slide.navy .lede a { color: var(--gf-blush); }

.foot { position: absolute; left: 52px; bottom: 22px; z-index: 1; }
.wordmark { font-family: var(--display); font-weight: 800; font-size: 19px;
            letter-spacing: .02em; color: var(--gf-blush); }
.pageno { position: absolute; right: 52px; bottom: 22px; font-size: 13px; z-index: 1;
          color: rgba(238, 218, 219, .55); }

/* --cols is set inline: the canonical nine, or whatever an older audit graded.
   minmax(0, 1fr), not 1fr: a 1fr track never shrinks below its longest word,
   so one "existing_customers" pushed the last column off the slide. */
.sc { display: grid; grid-template-columns: repeat(var(--cols, 9), minmax(0, 1fr)); margin-top: 6px;
      --sc-opportunity: #E4573D; --sc-strength: #3FB68B; --sc-unchecked: #9AA3B2; --sc-warn: #E8B931; }
.sc-check, .sc-s { overflow-wrap: anywhere; }
.sc-col { padding: 0 13px; border-right: 1px solid rgba(238, 218, 219, .28); }
.sc-col:last-child { border-right: none; }
/* Fixed heights on both header rows: dimension names come from the audit and
   run from "Waste" to "New-customer profitability", so without them one column
   wraps and every bullet list below it sits a line lower than its neighbours. */
.sc-h { font-family: var(--eyebrow); font-weight: 700; font-size: 12.5px;
        letter-spacing: .07em; text-transform: uppercase; text-align: center;
        color: #fff; margin-bottom: 5px; line-height: 1.2;
        height: 3.2em; display: flex; align-items: flex-end; justify-content: center; }
.sc-s { font-size: 11.5px; text-align: center; color: #C9A8DC; font-weight: 700;
        line-height: 1.3; margin-bottom: 10px; min-height: 30px; }
.sc-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.sc-check { position: relative; border-radius: 6px; padding: 5px 7px; font-size: 11.5px; font-weight: 700;
            line-height: 1.2; text-align: center; cursor: default; }
.sc-check.opportunity { background: var(--sc-opportunity); color: #fff; }
.sc-check.strength { background: var(--sc-strength); color: #04291b; }
.sc-check.unchecked { background: var(--sc-unchecked); color: #fff; }
.sc-check.warn { background: var(--sc-warn); color: #3A2C00; }
.sc-check:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* The figures live behind each check, so the face stays readable and nothing
   the audit found is lost. Columns near the right edge open leftwards, or the
   slide's overflow clips the panel. */
.sc-pop { display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 5; width: 270px;
          background: #fff; color: #1a1a1a; border-radius: 10px; padding: 11px 13px; text-align: left;
          font-size: 12.5px; font-weight: 400; line-height: 1.45; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.sc-pop b { display: block; font-size: 13px; margin-bottom: 4px; }
.sc-col:nth-last-child(-n+3) .sc-pop { left: auto; right: 0; }
.slide > .sc:not(.deco):not(.foot):not(.pageno) { z-index: 2; }
.sc-check:hover .sc-pop, .sc-check:focus .sc-pop { display: block; }
/* Nine columns on one landscape sheet: tighter gutters and a size down. */
.sc.dense .sc-col { padding: 0 7px; }
.sc.dense .sc-h { font-size: 11px; letter-spacing: .05em; height: 3.6em; }
.sc.dense .sc-s, .sc.dense .sc-check { font-size: 10.5px; }
.sc.dense .sc-check { padding: 5px 4px; }
.sc.dense .sc-s { min-height: 4em; }

.gradebar { display: grid; grid-template-columns: repeat(var(--cols, 9), minmax(0, 1fr));
            margin-top: 14px;
            background: linear-gradient(90deg, #7A4A93, var(--gf-orchid) 55%, #B27FC9); }
.gradebar div { font-family: var(--display); font-weight: 800; font-size: 30px;
                color: #fff; text-align: center; padding: 7px 0; }
.gradebar div.refused { color: rgba(255, 255, 255, .62); }
/* The bar is sized for one character. An audit that answers "Incomplete"
   instead of a letter keeps its word, set small enough not to blow the row. */
.gradebar div.long { font-size: 15px; line-height: 2; letter-spacing: .01em; }

.legend { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; font-size: 12px;
          margin-top: 12px; color: var(--gf-blush); }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px;
            vertical-align: -1px; }
.legend i.strength { background: #3FB68B; }
.legend i.opportunity { background: #E4573D; }
.legend i.unchecked { background: #9AA3B2; }
.legend i.warn { background: #E8B931; }
.sc-col.variant .sc-h { color: #C9A8DC; }

/* screen only: a landscape sheet is ~980px wide, and paper keeps every column. */
@media screen and (max-width: 1000px) {
  .sc, .gradebar { grid-template-columns: repeat(2, 1fr); }
  .sc-col { border-right: none; margin-bottom: 16px; }
}

/* ---- Deck slides ----------------------------------------------------------

   Every slide sits on one of three grounds, so anything that carries colour
   needs a rule per ground rather than inheriting. The brand has no dark
   variant: a client deliverable must render the same for every viewer, which
   means painting explicitly instead of leaning on defaults.                  */

.slide.lilac { background: var(--gf-lilac); }
.slide.white .eyebrow, .slide.lilac .eyebrow { color: var(--gf-shadow); }
.slide.white .wordmark, .slide.lilac .wordmark { color: var(--gf-navy); }
.slide.white .pageno, .slide.lilac .pageno { color: #B9B3C4; }

.cover-slide { min-height: 430px; display: flex; flex-direction: column; }
.cover-mark { font-family: var(--display); font-weight: 800; font-size: 26px;
              letter-spacing: .01em; color: var(--gf-blush); }
.cover-mark span { opacity: .45; font-weight: 600; }
.cover { margin-top: auto; padding-top: 56px; }
.cover-title { font-size: 52px; max-width: 30ch; margin-bottom: 10px; }
.cover-sub { font-size: 19px; font-weight: 600; line-height: 1.5; max-width: 62ch;
             color: #C9A8DC; margin: 0; }
.cover-meta { margin-top: 26px; max-width: 72ch; }
.cover-meta p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--gf-blush); }
.cover-meta b { font-weight: 700; }

.slide .note { font-size: 12.5px; line-height: 1.5; margin-top: 14px;
               font-style: italic; color: var(--gf-shadow); }
.slide.navy .note { color: var(--gf-blush); }

.deck-bullets { margin: 14px 0 0; padding-left: 20px; max-width: 88ch; }
.deck-bullets li { font-size: 14.5px; line-height: 1.5; margin-bottom: 7px; }

.kpis { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 9px; margin-top: 14px; }
.kpi { background: linear-gradient(160deg, #C9A8DC 0%, #B98FD0 100%);
       padding: 13px 10px; text-align: center; color: var(--gf-navy); }
.kpi.flat { background: var(--gf-lilac); border: 1px solid #DCD6E4; }
.kpi .k-l { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.kpi .k-v { font-family: var(--display); font-weight: 800; font-size: 29px;
            line-height: 1.1; margin: 3px 0 2px; font-variant-numeric: tabular-nums; }
.kpi .k-s { font-size: 11.5px; font-weight: 600; color: #2A4079; }
.kpi .k-s.good { color: #1D6B52; }
.kpi .k-s.bad  { color: #C0392B; }

.callouts { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.callout { flex: 1 1 240px; padding: 13px 16px; background: var(--gf-lilac);
           border-left: 3px solid var(--gf-orchid); }
.callout .ct { font-family: var(--eyebrow); font-weight: 700; font-size: 12.5px;
               letter-spacing: .07em; text-transform: uppercase;
               color: var(--gf-navy); margin-bottom: 4px; }
.callout .cb { font-size: 13.5px; line-height: 1.45; color: var(--gf-ink); }
.callout.tone-bad  { border-left-color: #C0392B; }
.callout.tone-good { border-left-color: #1E7A5C; }
.slide.navy .callout { background: rgba(255, 255, 255, .07); }
.slide.navy .callout .ct { color: var(--gf-blush); }
.slide.navy .callout .cb { color: #fff; }

.deck-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 12.5px; }
.deck-table th { font-family: var(--eyebrow); font-weight: 700; font-size: 11.5px;
                 letter-spacing: .07em; text-transform: uppercase; text-align: left;
                 background: var(--gf-navy); color: #fff; padding: 8px 10px; }
.deck-table td { padding: 8px 10px; border-bottom: 1px solid #DCD6E4;
                 vertical-align: top; line-height: 1.4; }
.deck-table tbody tr:nth-child(even) { background: var(--gf-lilac); }
.slide.navy .deck-table td { border-bottom-color: rgba(238, 218, 219, .2); color: #fff; }
.slide.navy .deck-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .05); }
.deck-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.deck-table td.num, .deck-table th.num { text-align: right; }
.deck-table td.strong { font-weight: 800; color: var(--gf-navy); }
.deck-table code { font-size: 11px; background: none; padding: 0; color: var(--gf-shadow); }
.findings-table .ra { display: block; font-weight: 400; font-size: 11.5px;
                      color: var(--gf-shadow); margin-top: 3px; }
/* The opportunity cell can be a phrase ("$2,452.72 deployable in October"),
   so it wraps like the rest of the row and reads left like its header. */
.findings-table td.num { white-space: normal; text-align: left; min-width: 9em; }
.slide.navy .deck-table code { color: rgba(238, 218, 219, .78); }
.slide.navy .findings-table .ra { color: var(--gf-blush); opacity: .8; }
.slide.navy .deck-table th { background: rgba(255, 255, 255, .1); }
.deck-total { font-family: var(--display); font-weight: 800; font-size: 17px;
              color: var(--gf-navy); margin-top: 12px; }

.plan { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 16px; margin-top: 16px; }
.plan-when { font-family: var(--eyebrow); font-weight: 700; font-size: 12.5px;
             letter-spacing: .08em; text-transform: uppercase; background: var(--gf-navy);
             color: #fff; padding: 5px 12px; display: inline-block; margin-bottom: 9px; }
.plan-col ol { margin: 0; padding-left: 18px; }
.plan-col li { font-size: 13px; line-height: 1.45; margin-bottom: 7px; }

.provenance { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 30px; margin-top: 16px; }
.provenance dt { font-family: var(--eyebrow); font-weight: 700; font-size: 11.5px;
                 letter-spacing: .07em; text-transform: uppercase; color: var(--gf-shadow); }
.provenance dd { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; }

.chartcard { margin-top: 16px; background: var(--gf-lilac); padding: 20px 24px; }
.slide.lilac .chartcard { background: #fff; }

.slide.navy .chartcard { background: rgba(255, 255, 255, .06); }
.chart { width: 100%; height: auto; max-height: 380px; }
.svglab { font-family: "Mulish", sans-serif; font-size: 12px; fill: #555C66; }
.svgtxt { font-family: "Mulish", sans-serif; font-size: 12.5px; fill: #0B1B3F; }
.svgtxt.b { font-weight: 700; }
.svgval { font-family: "Mulish", sans-serif; font-size: 12.5px; font-weight: 700;
          fill: #0B1B3F; font-variant-numeric: tabular-nums; }
.svgval.big { font-size: 17px; }
.slide.navy .svglab { fill: var(--gf-blush); }
.slide.navy .svgtxt, .slide.navy .svgval { fill: #fff; }
.pill { font-family: "Mulish", sans-serif; font-size: 10.5px; font-weight: 700; fill: #111; }

/* A panel slide stacks whatever it carries: tiles, then a table beside a
   checklist or picture, then callouts, cards and the connection strip. */
.panel-title { font-size: 32px; margin-bottom: 12px; }
.panel-quote { font-size: 15px; font-style: italic; font-weight: 600; color: var(--gf-orchid); margin: 0 0 6px; }
.panel-badge { font-family: var(--eyebrow); font-weight: 700; font-size: 11px; letter-spacing: .08em;
               text-transform: uppercase; background: #E8B931; color: #3A2C00; padding: 2px 8px;
               border-radius: 4px; margin-left: 8px; vertical-align: 2px; }
.panel-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px;
               align-items: start; margin-top: 14px; }
.panel-split.pic { grid-template-columns: minmax(0, 16fr) minmax(0, 9fr); }
.panel-split .deck-table, .panel-split .chartcard { margin-top: 0; }
.panel-split .chartcard { padding: 14px; margin-bottom: 12px; }
.deck-table tr.total td { font-weight: 800; color: var(--gf-navy); border-top: 2px solid var(--gf-navy); }
.kpi.bad { background: var(--gf-lilac); border: 1px solid #C0392B; }
.checklist-h { font-family: var(--eyebrow); font-weight: 700; font-size: 12px; letter-spacing: .07em;
               text-transform: uppercase; color: var(--gf-navy); margin: 0 0 8px; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.checklist.two { grid-template-columns: 1fr 1fr; gap: 9px 20px; margin-top: 4px; }
.checklist li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.checklist .ic { width: 18px; height: 18px; border-radius: 4px; font-size: 11px; font-weight: 800;
                 display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.checklist .ic.pass { background: #3FB68B; color: #04291B; }
.checklist .ic.fail { background: #E4573D; color: #fff; }
.checklist .ic.warn { background: #E8B931; color: #3A2C00; }
.checklist .ic.unchecked { background: #9AA3B2; color: #fff; }
.checklist b { display: block; font-size: 12.5px; line-height: 1.3; }
.checklist span.d { display: block; font-size: 11px; line-height: 1.4; color: var(--gf-shadow); margin-top: 2px; }
.cards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.card-o { background: var(--gf-lilac); border-left: 3px solid #C0392B; border-radius: 4px; padding: 12px 16px; }
.card-o .t { font-family: var(--display); font-weight: 800; font-size: 14.5px; color: var(--gf-navy);
             line-height: 1.25; margin-bottom: 4px; }
.card-o .t i { font-style: normal; color: var(--gf-orchid); margin-right: 6px; }
.card-o p { margin: 0; font-size: 12.5px; line-height: 1.45; }
.card-o code { display: block; margin-top: 5px; font-size: 10.5px; color: var(--gf-shadow); background: none; padding: 0; }
.strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.strip-h { font-family: var(--eyebrow); font-weight: 700; font-size: 12px; letter-spacing: .07em;
           text-transform: uppercase; color: var(--gf-navy); margin-right: 6px; }
.strip .chip { font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.strip .chip.good { background: #3FB68B; color: #04291B; }
.strip .chip.warn { background: #E8B931; color: #3A2C00; }
.strip .chip.unknown { background: #9AA3B2; color: #fff; }
.reserved-slot { margin-top: 20px; min-height: 180px; border: 1.5px dashed var(--gf-orchid); border-radius: 6px;
                 background: #fff; display: flex; align-items: center; justify-content: center;
                 font-family: var(--eyebrow); font-weight: 700; font-size: 14px; letter-spacing: .1em;
                 text-transform: uppercase; color: var(--gf-orchid); }
.plan-card { background: var(--gf-lilac); border-left: 3px solid var(--gf-orchid); border-radius: 4px;
             padding: 11px 14px 11px 16px; margin-bottom: 10px; }
.plan-card .t { font-family: var(--display); font-weight: 800; font-size: 14.5px; color: var(--gf-navy);
                line-height: 1.25; margin-bottom: 3px; }
.plan-card p { margin: 0; font-size: 12.5px; line-height: 1.45; }
.plan-card .i { margin-top: 5px; font-family: var(--eyebrow); font-weight: 700; font-size: 12.5px;
                letter-spacing: .03em; color: var(--good); }
.plan-card .size { float: right; font-family: var(--eyebrow); font-weight: 700; font-size: 10.5px;
                   letter-spacing: .06em; color: #fff; background: var(--gf-navy); padding: 1px 6px; border-radius: 3px; }
.plan-card .size.high { background: #C0392B; }
.plan-card.reserved { background: #fff; border: 1px dashed #DCD6E4; border-left: 3px solid var(--gf-blush); }
.plan-card.reserved .t, .plan-card.reserved p { color: var(--gf-shadow); }
.plan-card.reserved p { font-style: italic; }

/* Measurement provenance, carried at the point of claim rather than in a
   footnote — the doctrine treats a segment inference presented as measured as
   a failure of the whole audit, so the label has to travel with the number. */
.measured, .inferred { display: inline-block; font-family: var(--eyebrow);
                       font-weight: 700; font-size: 10.5px; letter-spacing: .06em;
                       text-transform: uppercase; padding: 2px 7px;
                       border-radius: 2px; vertical-align: middle; }
.measured { background: var(--good-bg); color: var(--good); }
.inferred { background: var(--gf-blush); color: var(--gf-navy); }

@media screen and (max-width: 1000px) {
  .kpis, .plan, .provenance { grid-template-columns: 1fr 1fr; }
  .pillar-grid, .panel3 { grid-template-columns: 1fr 1fr; }
}

/* Wider than the app chrome: the document carries wide data tables alongside a
   fixed table of contents, and 1180px leaves the tables scrolling horizontally. */
.report-page { max-width: 1320px; margin: 0 auto; padding: 28px 24px 90px; }

.report-hero { background: var(--surface); border: 1px solid var(--line);
               border-radius: var(--radius); padding: 32px;
               display: flex; justify-content: space-between; align-items: flex-start;
               gap: 24px; margin-bottom: 18px; }
.eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 650; letter-spacing: .09em;
           text-transform: uppercase; color: var(--accent); }
.report-hero h1 { margin: 0 0 18px; font-size: 34px; letter-spacing: -.022em; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 28px; margin: 0; }
.hero-meta dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
                color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.hero-meta dd { margin: 0; font-size: 14px; font-weight: 550; }
.readonly-note { margin: 18px 0 0; font-size: 12.5px; color: var(--muted); }

.verdict { background: #1d2531; color: #eef1f5; border-radius: var(--radius);
           padding: 26px 32px; margin-bottom: 18px; }
.verdict h2 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase;
              letter-spacing: .09em; color: #93a3b8; font-weight: 650; }
.verdict p { margin: 0; font-size: 19px; line-height: 1.5; letter-spacing: -.012em; }

.scorecard { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
             gap: 12px; margin-bottom: 18px; }
.grade { background: var(--surface); border: 1px solid var(--line);
         border-radius: var(--radius); padding: 16px 18px;
         display: flex; flex-direction: column; }
.grade .dimension { margin: 0; font-size: 12px; font-weight: 650; min-height: 2.5em;
                    text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
/* Fixed mark row so grades line up across cards regardless of label length. */
.grade .mark { margin: 4px 0 12px; font-size: 34px; font-weight: 700; line-height: 1.1;
               letter-spacing: -.03em; height: 38px; display: flex; align-items: center; }
.grade .mark-word { font-size: 17px; letter-spacing: -.01em; }
.grade .note { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.tone-good .mark { color: var(--good); }
.tone-ok   .mark { color: var(--ok); }
.tone-bad  .mark { color: var(--bad); }
.tone-none .mark { color: var(--none); }

.findings { background: var(--surface); border: 1px solid var(--line);
            border-radius: var(--radius); padding: 24px 28px; margin-bottom: 22px; }
.findings h2 { margin: 0 0 12px; font-size: 12px; text-transform: uppercase;
               letter-spacing: .09em; color: var(--muted); font-weight: 650; }
.findings ol { margin: 0; padding-left: 22px; }
.findings li { margin-bottom: 8px; font-size: 15.5px; }

/* minmax(0, 1fr) rather than 1fr: a grid track's automatic minimum size is its
   content, so one wide table would otherwise stretch the whole page. */
.report-body { display: grid; grid-template-columns: 218px minmax(0, 1fr);
               gap: 34px; align-items: start; }

.toc { position: sticky; top: 24px; max-height: calc(100vh - 60px); overflow-y: auto; }
.toc-title { margin: 0 0 10px; font-size: 11.5px; text-transform: uppercase;
             letter-spacing: .07em; color: var(--muted); font-weight: 650; }
.toc nav { display: flex; flex-direction: column; gap: 1px; }
.toc a { font-size: 13px; color: var(--ink-2); padding: 4px 10px;
         border-left: 2px solid var(--line); line-height: 1.4; }
.toc a:hover { color: var(--accent); border-left-color: var(--accent);
               background: var(--accent-2); text-decoration: none; }
.toc a.lvl-3 { padding-left: 22px; font-size: 12.5px; color: var(--muted); }

/* ---- the document itself ---- */

.report { background: var(--surface); border: 1px solid var(--line);
          border-radius: var(--radius); padding: 52px 64px; font-size: 15.5px;
          line-height: 1.68; color: var(--ink-2); }
/* Constrain the measure of running prose without narrowing the card, so tables
   and code blocks can use the full width they need. */
.report > p, .report > ul, .report > ol, .report > blockquote { max-width: 74ch; }
.report > *:first-child { margin-top: 0; }
.report h1 { font-size: 30px; margin: 0 0 24px; color: var(--ink); letter-spacing: -.022em; }
.report h2 { font-size: 22px; margin: 46px 0 14px; padding-top: 22px;
             border-top: 1px solid var(--line); color: var(--ink); letter-spacing: -.018em; }
.report h2:first-of-type { border-top: none; padding-top: 0; }
.report h3 { font-size: 16.5px; margin: 30px 0 10px; color: var(--ink); }
.report h4 { font-size: 14.5px; margin: 22px 0 8px; color: var(--ink); }
.report p { margin: 0 0 15px; }
.report strong { color: var(--ink); font-weight: 650; }
.report ul, .report ol { margin: 0 0 16px; padding-left: 24px; }
.report li { margin-bottom: 7px; }
.report hr { border: none; border-top: 1px solid var(--line); margin: 38px 0; }

.report blockquote {
  margin: 20px 0; padding: 16px 22px; background: var(--accent-2);
  border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; color: #23406f;
}
.report blockquote p:last-child { margin-bottom: 0; }

.table-scroll { margin: 22px 0; overflow-x: auto; max-width: 100%;
                border: 1px solid var(--line-2); border-radius: 8px; }
.report table {
  width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 480px;
}
.report thead th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .045em;
  color: var(--muted); font-weight: 650; padding: 9px 12px; background: #fafbfc;
  border-bottom: 1.5px solid var(--line);
}
.report tbody td { padding: 9px 12px; border-bottom: 1px solid var(--line-2);
                   vertical-align: top; }
.report tbody tr:last-child td { border-bottom: none; }
.report tbody tr:hover { background: #fafbfc; }
/* Zebra rows on Pale Lilac, so a wide Revenue Impact Model table stays
   trackable across its columns. Hover still wins over the stripe. */
.report-page .report thead th { background: var(--gf-lilac); color: var(--gf-navy); }
.report-page .report tbody tr:nth-child(even) { background: var(--gf-lilac); }
.report-page .report tbody tr:hover { background: var(--gf-blush); }
/* Long identifiers and parameter strings must wrap rather than force the table
   into a horizontal scroll the reader will not discover. */
.report table code { background: transparent; padding: 0; font-size: .92em;
                     overflow-wrap: break-word; }
.report td:first-child, .report th:first-child { white-space: nowrap; }
/* Keep the result column readable when a parameters column wants to hog width. */
.report td:last-child, .report th:last-child { min-width: 8.5rem; }

.report pre { background: #1d2531; color: #dfe6ee; padding: 18px 20px;
              border-radius: 8px; font-size: 13px; line-height: 1.6; margin: 20px 0; }
.report pre code { background: transparent; color: inherit; padding: 0; }

.report-foot { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px;
               padding-top: 16px; font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------------- print */

@media print {
  :root { --bg: #fff; }
  body { background: #fff; font-size: 10.5pt; }
  .chrome, body > .banner, .no-print, .toc, .report-foot { display: none !important; }
  .report-page { max-width: none; padding: 0; }
  .report-body { display: block; }
  .report { border: none; border-radius: 0; padding: 0; max-width: none;
            font-size: 10.5pt; line-height: 1.5; }
  .report-hero, .findings, .grade { border: 1px solid #ccc; break-inside: avoid; }
  .verdict { background: #1d2531 !important; -webkit-print-color-adjust: exact;
             print-color-adjust: exact; break-inside: avoid; }
  /* A client deliverable must render identically for every viewer, so the
     branded grounds are painted rather than dropped to save toner. */
  .report-page .report-hero, .report-page .verdict, .report-page .grade,
  .report-page .report thead th, .report-page .report tbody tr:nth-child(even),
  .pill-high, .pill-med {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .report-page .report-hero, .report-page .verdict { border-color: var(--gf-navy); }

  /* The scorecard is a one-page handout, and landscape is what makes seven
     columns of captions legible on paper. */
  .deck-page { max-width: none; padding: 0; }
  .slide { box-shadow: none; border-radius: 0; padding: 26px 30px 46px; margin: 0;
           break-inside: avoid; }
  .foot { left: 30px; bottom: 10px; }
  .pageno { right: 30px; bottom: 14px; }
  .slide.navy, .gradebar, .sc-check, .legend i {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .slide-title { font-size: 26pt; }
  .slide-title.sc-title { font-size: 22pt; margin-bottom: 10px; }
  .sc-check, .sc-s { font-size: 8pt; }
  .sc-checks { gap: 3px; }
  .sc-check { padding: 3px 5px; }
  .sc-pop { display: none !important; }
  .sc.dense .sc-check, .sc.dense .sc-s { font-size: 7pt; line-height: 1.2; }
  .sc.dense .sc-col { padding: 0 4px; }
  .sc.dense .sc-h { font-size: 7.5pt; height: 3.4em; }
  .sc.dense .sc-s { min-height: 3.6em; }
  .gradebar div { padding: 6px 0; }
  .gradebar div { font-size: 20pt; }

  /* One slide per sheet. Without the explicit break a short slide pairs up
     with the next one and the page numbers stop matching the paper. */
  .slide { page-break-after: always; break-after: page; min-height: 0; }
  .slide:last-child { page-break-after: auto; break-after: auto; }
  /* If a slide does overrun despite the caps, spill it onto a second sheet with
     whole rows rather than slicing a row through the middle. */
  .deck-table tr, .callout, .kpi, .plan-col, .p3, .pillar-def, .opps li {
    break-inside: avoid;
  }
  .banner, .kpi, .deck-table th, .plan-when, .callout, .slide.lilac,
  .deck-table tbody tr:nth-child(even), .p3, .takeaway, .measured, .inferred {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  /* A pillar slide carries nine bullets across three panels plus a takeaway
     bar, which is the densest page in the pillars deck. These sizes are what
     keep it on one landscape sheet. */
  .pillar-title { font-size: 21pt; }
  .slide-sub { font-size: 11pt; }
  .p3 li { font-size: 9pt; margin-bottom: 6px; }
  .p3 h4 { font-size: 9pt; }
  .takeaway .ts { font-size: 10.5pt; }
  .pillar-def p { font-size: 9pt; }
  .opps p { font-size: 10pt; }
  .chart { max-height: 300px; }
  .cover-title { font-size: 34pt; }
  /* A findings slide is the densest page in the deck and lands within a few
     pixels of a landscape sheet at screen sizes. Print sizing buys the margin. */
  .deck-table { font-size: 8.5pt; }
  .deck-table td, .deck-table th { padding: 5px 7px; }
  .deck-table code, .findings-table .ra { font-size: 7.5pt; }
  .deck-bullets li, .plan-col li { font-size: 9.5pt; }
  .scorecard { grid-template-columns: repeat(3, 1fr); }
  .report h2 { break-after: avoid; page-break-after: avoid; }
  .report table, .report pre, .report blockquote { break-inside: avoid; }
  .table-scroll { overflow: visible; border: none; }
  .report table { min-width: 0; font-size: 8.5pt; }
  a { color: inherit; text-decoration: none; }
}

@media (max-width: 900px) {
  .report-body { grid-template-columns: 1fr; }
  .toc { position: static; }
  .prompt-editor { grid-template-columns: 1fr; }
  .report { padding: 30px 24px; }
  .report-hero { flex-direction: column; }
}

/* ---------------------------------------------------------------- semantic map */
.sem-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 12px; }
.sem-summary div { display: flex; flex-direction: column; gap: 2px; }
.sem-summary b { font-size: 24px; line-height: 1.15; }
.sem-summary span { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.sem-rows { width: 100%; border-collapse: collapse; font-size: 13px; }
.sem-rows th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
               color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.sem-rows td { padding: 8px 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.sem-rows .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ audit chat
   Follow-up questions about a finished audit. A right-hand flyout over any of
   the run's pages; the body inside it is the only thing that re-renders. */
.btn.chat-launch { display: inline-flex; align-items: center; gap: 7px; background: var(--accent-2);
                   border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent); }
.btn.chat-launch:hover { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.btn.chat-launch svg { flex: none; }
.chat-flyout { position: fixed; inset: 0; z-index: 1000; }
.chat-flyout[hidden] { display: none; }
.chat-backdrop { position: absolute; inset: 0; background: rgba(20, 24, 31, .28); animation: chat-fade .15s ease-out; }
.chat-panel { animation: chat-slide .18s ease-out; }
@keyframes chat-fade { from { opacity: 0; } }
@keyframes chat-slide { from { opacity: 0; transform: translateX(48px); } }
@media (prefers-reduced-motion: reduce) { .chat-backdrop, .chat-panel { animation: none; } }
.chat-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 520px; max-width: 100vw;
              background: var(--surface); border-left: 1px solid var(--line); display: flex; flex-direction: column;
              box-shadow: -8px 0 24px rgba(0, 0, 0, .08); font-family: var(--sans); color: var(--ink); }
.chat-head { position: relative; padding: 18px 48px 14px 20px; border-bottom: 1px solid var(--line); }
.chat-head h3 { margin: 0 0 2px; font-size: 16px; font-family: var(--sans); }
.chat-head p { margin: 0; }
.chat-x { position: absolute; top: 12px; right: 14px; border: none; background: none; font-size: 24px;
          line-height: 1; color: var(--muted); cursor: pointer; }
.chat-slot { flex: 1; min-height: 0; display: flex; }
.chat-body { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 20px; display: flex;
            flex-direction: column; gap: 18px; }
.chat-turn { font-size: 14px; min-width: 0; }
.chat-who { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.chat-turn.user .chat-who { justify-content: flex-end; flex-direction: row-reverse; }
.chat-badge { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 20px; color: #fff; }
.chat-badge.you { background: var(--accent); }
.chat-badge.analyst { background: #0e7490; }
.chat-text { padding: 10px 14px; border-radius: 10px; line-height: 1.55; overflow-wrap: anywhere; }
.chat-turn.user .chat-text { background: var(--accent-2); white-space: pre-line; margin-left: 32px; }
.chat-turn.assistant .chat-text { background: var(--line-2); }
.chat-text.md > :first-child { margin-top: 0; }
.chat-text.md > :last-child { margin-bottom: 0; }
.chat-text.md h1, .chat-text.md h2, .chat-text.md h3, .chat-text.md h4 { font-size: 14.5px; margin: 12px 0 6px; font-family: var(--sans); }
.chat-text.md ul, .chat-text.md ol { padding-left: 20px; margin: 6px 0; }
.chat-text.md table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse;
                      font-size: 12.5px; margin: 8px 0; }
.chat-text.md th, .chat-text.md td { border: 1px solid var(--line); padding: 4px 6px; text-align: left;
                                     overflow-wrap: normal; min-width: 4.5em; }
.chat-thinking { margin: 0; color: #0369a1; font-style: italic; }
.chat-empty ul { padding-left: 18px; margin: 8px 0 0; }
.chat-empty li { margin-bottom: 4px; }
.chat-error { border: 1px solid #fecaca; background: var(--bad-bg); color: var(--bad); border-radius: 10px;
              padding: 10px 12px; font-size: 13px; }
.chat-error p { margin: 0 0 8px; white-space: pre-line; }
.chat-form { border-top: 1px solid var(--line); padding: 12px 20px 16px; display: flex; flex-direction: column; gap: 8px; }
.chat-modes { display: flex; gap: 14px; }
.chat-modes label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-weight: 500; }
.chat-ask { display: flex; gap: 8px; }
.chat-ask input { flex: 1; }
body.chat-open { overflow: hidden; }