@import url("fonts/fonts.css");

/* ============================================================
   Fynch AI — Wellington CRE Underwriting Workshop
   Built on the Parcel "Precision Instrument" design system.
   styles.css — tokens, base, deck shell, slide layouts, components.
   ============================================================ */

:root{
  /* ----- Type families ----- */
  --font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ----- Brand (single accent) ----- */
  --brand-50:#f0f6ff; --brand-100:#eff6ff; --brand-200:#dbe8ff; --brand-300:#93c5fd;
  --brand-500:#2563eb; --brand-600:#1d4ed8; --brand-700:#1e40af;

  /* ----- Ink ----- */
  --ink-900:#0f172a; --ink-800:#1e293b; --ink-700:#334155; --ink-600:#475569;
  --ink-500:#64748b; --ink-400:#94a3b8; --ink-300:#cbd5e1; --ink-200:#e2e8f0;

  /* ----- Navy (presentation depth — section starters, cover) ----- */
  --navy-900:#0b1220; --navy-800:#0f172a; --navy-700:#172033; --navy-600:#1e293b;
  --navy-line:#243049;

  /* ----- Surfaces & hairlines ----- */
  --surface:#ffffff; --canvas:#f8fafc; --subtle:#fbfdff;
  --line-100:#f1f5f9; --line-200:#e2e8f0; --line-300:#cbd5e1;

  /* ----- Status semantic triples (bg/fg/border) ----- */
  --approved-bg:#ecfdf5;  --approved-fg:#059669;  --approved-border:#a7f3d0;
  --verified-bg:#ecfeff;  --verified-fg:#0e7490;  --verified-border:#a5f3fc;
  --review-bg:#fffbeb;    --review-fg:#b45309;    --review-border:#fde68a;
  --conflict-bg:#fef2f2;  --conflict-fg:#dc2626;  --conflict-border:#fecaca;
  --missing-bg:#f1f5f9;   --missing-fg:#64748b;   --missing-border:#e2e8f0;
  --unverified-bg:#f5f3ff;--unverified-fg:#7c3aed;--unverified-border:#ddd6fe;
  --processing-bg:#e0f2fe;--processing-fg:#0284c7;--processing-border:#bae6fd;
  --highlight-bg:#fef3c7; --highlight-bar:#d97706;

  /* ----- Radius ----- */
  --r-chip:5px; --r-control:7px; --r-card:8px; --r-modal:11px; --r-pill:9999px;

  /* ----- Shadow (overlays only) ----- */
  --shadow-pop:0 4px 16px rgba(15,23,42,.10);
  --shadow-modal:0 16px 50px rgba(15,23,42,.22);
  --shadow-drawer:-8px 0 30px rgba(15,23,42,.12);
  --ring:0 0 0 3px rgba(37,99,235,.28);

  /* ----- Presentation type scale (for the 1920×1080 canvas) ----- */
  --s-cover:120px; --s-h1:76px; --s-h2:60px; --s-h3:46px; --s-h4:34px;
  --s-lead:31px; --s-body:26px; --s-sm:22px; --s-kicker:19px; --s-meta:17px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font-sans); color:var(--ink-900);
  background:#0a0e16; -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 1; overflow:hidden;
}

/* ============================================================
   DECK STAGE — fixed 1920×1080 canvas scaled to fit viewport
   ============================================================ */
#stage{
  position:fixed; inset:0; overflow:hidden;
  background:#0a0e16;
}
#canvas{
  width:1920px; height:1080px; position:absolute; top:50%; left:50%;
  transform-origin:center center; transform:translate(-50%,-50%) scale(1);
  background:var(--canvas);
  overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.55);
}

/* ----- Slide base ----- */
.slide{position:absolute; inset:0; opacity:0; pointer-events:none;
  transition:opacity .38s ease; display:flex; flex-direction:column;}
.slide[data-active]{opacity:1; pointer-events:auto;}
.slide-pad{padding:84px 104px; flex:1; display:flex; flex-direction:column; min-height:0;}

/* entrance: lift children once active, respecting reduced motion */
@media (prefers-reduced-motion: no-preference){
  .slide [data-rise]{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;}
  .slide[data-active] [data-rise]{opacity:1; transform:none;}
  .slide[data-active] [data-rise]{transition-delay:calc(var(--i,0) * 70ms);}
}

/* ============================================================
   SLIDE CHROME — kicker, titles, leads
   ============================================================ */
.kicker{font-family:var(--font-mono); font-size:var(--s-kicker); font-weight:500;
  letter-spacing:2.5px; text-transform:uppercase; color:var(--brand-600);}
.kicker.muted{color:var(--ink-400);}
.slide-title{font-size:var(--s-h3); font-weight:600; letter-spacing:-.02em; line-height:1.05; margin:0;}
.slide-h2{font-size:var(--s-h2); font-weight:600; letter-spacing:-.025em; line-height:1.04; margin:0;}
.lead{font-size:var(--s-lead); line-height:1.45; color:var(--ink-600); font-weight:400; max-width:1180px; text-wrap:pretty;}
.headrule{display:flex; align-items:baseline; gap:18px; margin-bottom:8px;}
.eyebrow-row{display:flex; align-items:center; gap:16px; margin-bottom:26px;}

/* slide footer chrome */
.slide-foot{position:absolute; left:104px; right:104px; bottom:46px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:var(--s-meta); color:var(--ink-400); font-family:var(--font-mono); letter-spacing:.5px;}
.slide-foot .mark{display:flex; align-items:center; gap:10px; font-weight:500; color:var(--ink-500); letter-spacing:0; font-family:var(--font-sans);}
.slide-foot .mark img{width:22px; height:22px;}

/* ----- dark slides (section starters & cover) ----- */
.slide.dark{background:var(--navy-800); color:#e9eef6;}
.slide.dark .lead{color:#aab6cc;}
.slide.dark .kicker{color:var(--brand-300);}
.slide.dark .slide-title,.slide.dark .slide-h2{color:#f4f7fc;}
.slide.dark .slide-foot{color:#64748b;}
.slide.dark .slide-foot .mark{color:#94a3b8;}

/* ============================================================
   FLOW BAND — Documents → Evidence → Facts → Policy → Outputs → Audit
   ============================================================ */
.flowband{display:flex; align-items:stretch; gap:0; width:100%;}
.flowband .step{flex:1; display:flex; flex-direction:column; gap:6px; padding:18px 22px;
  border:1px solid var(--line-200); border-right:0; background:var(--surface);}
.flowband .step:last-child{border-right:1px solid var(--line-200);}
.flowband .step:first-child{border-radius:var(--r-card) 0 0 var(--r-card);}
.flowband .step:last-child{border-radius:0 var(--r-card) var(--r-card) 0;}
.flowband .step .n{font-family:var(--font-mono); font-size:13px; color:var(--ink-400);}
.flowband .step .t{font-size:21px; font-weight:600; letter-spacing:-.01em;}
.flowband .step .d{font-size:15px; color:var(--ink-500); line-height:1.4;}
.flowband.compact .step{padding:13px 16px;}
.flowband.compact .step .t{font-size:17px;}
.flowband .arrow{align-self:center; color:var(--ink-300); flex:0 0 auto; padding:0 2px; font-size:20px;}
/* dark variant */
.dark .flowband .step{background:rgba(255,255,255,.03); border-color:var(--navy-line);}
.dark .flowband .step .t{color:#eaf0fa;}
.dark .flowband .step .d{color:#8696b3;}
.dark .flowband .step .n{color:#5b6b86;}

/* inline pipeline of words (Intake → Organize → …) */
.wordflow{display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-family:var(--font-mono);
  font-size:18px; color:var(--ink-500); letter-spacing:.3px;}
.wordflow b{color:var(--ink-800); font-weight:600;}
.wordflow .sep{color:var(--brand-500);}

/* ============================================================
   COMPONENTS — chips, pills, buttons, cards (Parcel)
   ============================================================ */
.chip{display:inline-flex; align-items:center; gap:7px; font-size:15px; font-weight:600;
  padding:4px 11px; border-radius:var(--r-chip); border:1px solid; line-height:1.3;
  white-space:nowrap; flex:0 0 auto;}
.chip .dot{width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto;}
.chip.sm{font-size:12px; padding:2px 8px;}
.chip.approved{background:var(--approved-bg); color:var(--approved-fg); border-color:var(--approved-border);}
.chip.verified{background:var(--verified-bg); color:var(--verified-fg); border-color:var(--verified-border);}
.chip.review{background:var(--review-bg); color:var(--review-fg); border-color:var(--review-border);}
.chip.conflict{background:var(--conflict-bg); color:var(--conflict-fg); border-color:var(--conflict-border);}
.chip.processing{background:var(--processing-bg); color:var(--processing-fg); border-color:var(--processing-border);}
.chip.unverified{background:var(--unverified-bg); color:var(--unverified-fg); border-color:var(--unverified-border);}
.chip.missing{background:var(--missing-bg); color:var(--missing-fg); border-color:var(--missing-border);}

.btn{display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-size:16px;
  font-weight:600; line-height:1; border-radius:var(--r-control); border:1px solid transparent;
  cursor:pointer; height:42px; padding:0 18px; white-space:nowrap; flex:0 0 auto;
  transition:background .12s,border-color .12s,box-shadow .12s,color .12s;}
.btn svg{width:18px; height:18px; stroke-width:2;}
.btn:focus-visible{outline:none; box-shadow:var(--ring);}
.btn.primary{background:var(--brand-500); color:#fff;}
.btn.primary:hover{background:var(--brand-600);}
.btn.secondary{background:var(--surface); color:var(--ink-700); border-color:var(--line-200);}
.btn.secondary:hover{background:var(--canvas); border-color:var(--line-300);}
.btn.ghost{background:transparent; color:var(--ink-600);}
.btn.ghost:hover{background:var(--line-100); color:var(--ink-900);}
.btn.sm{height:34px; padding:0 13px; font-size:14px;}
.btn.lg{height:50px; padding:0 24px; font-size:18px;}

/* status pill (header style, soft tint, not button-shaped) */
.pill{display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; font-size:14px; font-weight:600;
  padding:3px 11px; border-radius:var(--r-pill); background:var(--approved-bg); color:var(--approved-fg); border:1px solid var(--approved-border);}
.pill .dot{width:7px; height:7px; border-radius:50%; background:currentColor;}

/* card */
.card{background:var(--surface); border:1px solid var(--line-200); border-radius:var(--r-card);}
.card.pad{padding:24px 26px;}
.dark .card{background:rgba(255,255,255,.035); border-color:var(--navy-line); color:#dfe7f2;}

/* ============================================================
   "SOLVES / STATUS" PRODUCT TAG — top-right of product slides
   ============================================================ */
.solves-tag{position:absolute; top:40px; right:40px; z-index:5;
  display:flex; gap:0; background:var(--surface); border:1px solid var(--line-200);
  border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-pop); min-width:330px;}
.solves-tag .col{padding:11px 16px; flex:1;}
.solves-tag .col+.col{border-left:1px solid var(--line-100);}
.solves-tag .k{font-size:11px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--ink-400);}
.solves-tag .v{font-size:15px; font-weight:600; color:var(--ink-900); margin-top:4px; line-height:1.25;}
.solves-tag .v .sdot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:middle;}
.s-live{background:var(--approved-fg);} .s-config{background:var(--processing-fg);}
.s-provider{background:var(--unverified-fg);} .s-road{background:var(--ink-400);}

/* status badge inline (live today / configurable / roadmap) */
.maturity{display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600;
  padding:3px 10px; border-radius:var(--r-pill); border:1px solid;}
.maturity .dot{width:7px;height:7px;border-radius:50%;background:currentColor;}
.maturity.live{background:var(--approved-bg); color:var(--approved-fg); border-color:var(--approved-border);}
.maturity.config{background:var(--processing-bg); color:var(--processing-fg); border-color:var(--processing-border);}
.maturity.provider{background:var(--unverified-bg); color:var(--unverified-fg); border-color:var(--unverified-border);}
.maturity.road{background:var(--missing-bg); color:var(--missing-fg); border-color:var(--missing-border);}

/* ============================================================
   LISTS
   ============================================================ */
.tick-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
.tick-list li{display:flex; gap:15px; align-items:flex-start; font-size:var(--s-body); line-height:1.4; color:var(--ink-700);}
.tick-list li .mk{flex:0 0 auto; margin-top:4px; color:var(--brand-500);}
.tick-list li .mk svg{width:20px; height:20px; stroke-width:2.4;}
.tick-list.tight li{font-size:var(--s-sm); gap:12px;}
.dark .tick-list li{color:#c4cfdf;}
.dark .tick-list li .mk{color:var(--brand-300);}

.q-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.q-list li{font-size:var(--s-body); line-height:1.4; color:var(--ink-700); padding-left:30px; position:relative;}
.q-list li::before{content:"?"; position:absolute; left:0; top:0; font-family:var(--font-mono);
  font-weight:600; color:var(--brand-500);}

/* number badges */
.numbadge{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:var(--r-pill); background:var(--brand-500); color:#fff; font-size:20px; font-weight:600;
  font-family:var(--font-mono); flex:0 0 auto;}
.numbadge.big{width:64px; height:64px; font-size:30px;}
.numbadge.ghost{background:transparent; color:var(--brand-500); border:2px solid var(--brand-300);}
.dark .numbadge.ghost{color:var(--brand-300); border-color:var(--navy-line);}

/* ============================================================
   DATA TABLE (Parcel)
   ============================================================ */
.tbl{background:var(--surface); border:1px solid var(--line-200); border-radius:var(--r-card); overflow:hidden;}
.tbl table{width:100%; border-collapse:collapse; font-size:15px;}
.tbl thead th{background:var(--subtle); text-align:left; font-size:12px; font-weight:600; letter-spacing:.5px;
  text-transform:uppercase; color:var(--ink-400); padding:11px 16px; border-bottom:1px solid var(--line-200);}
.tbl th.num,.tbl td.num{text-align:right; font-variant-numeric:tabular-nums;}
.tbl tbody td{padding:13px 16px; border-top:1px solid var(--line-100); color:var(--ink-700); vertical-align:middle;}
.tbl tbody tr:first-child td{border-top:0;}
.tbl tbody tr:hover{background:var(--canvas);}
.tbl tbody tr.conflict-row{background:#fef6f6;}
.tbl .field{font-weight:600; color:var(--ink-900);}
.tbl .key{font-family:var(--font-mono); font-size:13px; color:var(--ink-500);}
.tbl .val{font-variant-numeric:tabular-nums; color:var(--ink-900); font-weight:500;}
.tbl .src{color:var(--ink-500);}
.tbl .pg{font-family:var(--font-mono); font-size:13px; color:var(--ink-400);}

/* ============================================================
   GRID HELPERS
   ============================================================ */
.cols{display:grid; gap:40px;}
.cols.c2{grid-template-columns:1fr 1fr;}
.cols.c2-wide-l{grid-template-columns:1.4fr 1fr;}
.cols.c2-wide-r{grid-template-columns:1fr 1.4fr;}
.cols.c3{grid-template-columns:repeat(3,1fr);}
.stack{display:flex; flex-direction:column;}
.gap-s{gap:12px;} .gap-m{gap:20px;} .gap-l{gap:32px;}
.grow{flex:1; min-height:0;}

/* ============================================================
   DECK NAV / CHROME (outside the scaled canvas)
   ============================================================ */
.deck-controls{position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:4px; z-index:50;
  background:rgba(15,23,42,.82); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-pill); padding:6px 8px; color:#cbd5e1; font-size:13px;
  opacity:.25; transition:opacity .2s;}
.deck-controls:hover{opacity:1;}
.deck-controls button{background:transparent; border:0; color:#cbd5e1; cursor:pointer;
  width:30px; height:30px; border-radius:var(--r-pill); display:inline-flex; align-items:center; justify-content:center;}
.deck-controls button:hover{background:rgba(255,255,255,.12); color:#fff;}
.deck-controls .count{font-family:var(--font-mono); padding:0 8px; min-width:64px; text-align:center; letter-spacing:.5px;}
.deck-controls .seg{width:1px; height:20px; background:rgba(255,255,255,.12); margin:0 4px;}

.progressbar{position:fixed; top:0; left:0; height:3px; background:var(--brand-500); z-index:60; transition:width .35s ease;}

/* section nav (top, 6 phases) */
.section-nav{position:fixed; top:11px; left:50%; transform:translateX(-50%); z-index:55; display:flex; gap:3px;
  background:rgba(15,23,42,.88); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.08); border-radius:9999px; padding:5px; opacity:.45; transition:opacity .2s;}
.section-nav:hover{opacity:1;}
.sn-tab{position:relative; display:flex; align-items:center; gap:8px; background:transparent; border:0; color:#94a3b8;
  font-family:inherit; font-size:13px; font-weight:600; padding:7px 14px; border-radius:9999px; cursor:pointer; white-space:nowrap;}
.sn-tab .sn-i{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.08); font-size:11px; font-family:var(--font-mono);}
.sn-tab.done{color:#cbd5e1;}
.sn-tab.done .sn-i{background:rgba(37,99,235,.45); color:#dbe8ff;}
.sn-tab:hover{color:#fff;}
.sn-tab.active{background:#fff; color:#0f172a;}
.sn-tab.active .sn-i{background:var(--brand-500); color:#fff;}
.sn-min{font-family:var(--font-mono); font-size:11px; opacity:.6;}
.sn-prog{position:absolute; left:12px; right:12px; bottom:3px; height:2px; background:rgba(15,23,42,.14); border-radius:2px; overflow:hidden;}
.sn-prog span{display:block; height:100%; background:var(--brand-500); transition:width .4s;}

/* presenter timer (top-right) */
.pres-timer{position:fixed; top:14px; right:16px; z-index:55; display:inline-flex; align-items:center; gap:8px;
  background:rgba(15,23,42,.88); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.08); color:#cbd5e1;
  border-radius:9999px; padding:8px 15px; font-family:var(--font-mono); font-size:14px; cursor:pointer; opacity:.4; transition:opacity .2s;}
.pres-timer:hover{opacity:1;}
.pres-timer .tt{color:#5b6b86; font-size:12px;}

/* client framing footer */
.client-foot{display:inline-flex; align-items:center; gap:8px;}
.client-foot img{width:22px; height:22px;}
body.hide-client .client-foot{display:none;}

/* host indicator badge */
.host-badge{position:fixed; top:14px; left:16px; z-index:55; display:flex; align-items:center; gap:9px;
  background:rgba(15,23,42,.82); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.08);
  color:#cbd5e1; border-radius:var(--r-pill); padding:7px 13px 7px 10px; font-size:13px; opacity:.3; transition:opacity .2s;}
.host-badge:hover{opacity:1;}
.host-badge img{width:18px;height:18px;}
.host-badge .live{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.2);}
.host-badge b{color:#f1f5f9;font-weight:600;}
.host-badge .mono{font-family:var(--font-mono);color:#93c5fd;letter-spacing:1px;}

/* agenda overlay */
.agenda-overlay{position:fixed; inset:0; z-index:80; background:rgba(8,12,20,.6); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center;}
.agenda-overlay.open{display:flex;}
.agenda-panel{width:min(1100px,92vw); max-height:86vh; overflow:auto; background:var(--surface);
  border-radius:var(--r-modal); box-shadow:var(--shadow-modal); padding:36px 40px;}
.agenda-panel h2{font-size:26px; font-weight:600; margin:0 0 4px;}
.agenda-panel .sub{color:var(--ink-500); font-size:15px; margin:0 0 24px;}
.agenda-list{display:flex; flex-direction:column; gap:2px;}
.agenda-item{display:grid; grid-template-columns:64px 1fr auto; gap:18px; align-items:center;
  padding:11px 14px; border-radius:var(--r-control); cursor:pointer; border:1px solid transparent;}
.agenda-item:hover{background:var(--canvas); border-color:var(--line-200);}
.agenda-item .time{font-family:var(--font-mono); font-size:13px; color:var(--ink-400);}
.agenda-item .nm{font-size:16px; font-weight:600; color:var(--ink-900);}
.agenda-item .ph{font-size:13px; color:var(--ink-500);}
.agenda-item .sl{font-family:var(--font-mono); font-size:12px; color:var(--ink-400);}
.agenda-item.section-head{margin-top:14px; pointer-events:none;}
.agenda-item.section-head .nm{font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:var(--brand-600);}

/* utility */
.mono{font-family:var(--font-mono);}
.muted{color:var(--ink-500);}
.faint{color:var(--ink-400);}
.tnum{font-variant-numeric:tabular-nums;}
.nowrap{white-space:nowrap;}
.hr{height:1px; background:var(--line-200); border:0; margin:0;}
.dark .hr{background:var(--navy-line);}
.bignum{font-size:64px; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1;}
.label-meta{font-size:var(--s-meta); font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--ink-400);}