/* ============================================================
   MEMO — The AI Data Interpreter · Deck stylesheet (Studio / Light)
   Mood: bright, airy, engineering-grade. Porcelain + violet→teal.
   ============================================================ */

:root {
  /* brand surfaces & text */
  --porcelain: #F6F5F2;
  --white:     #FFFFFF;
  --graphite:  #1E2227;

  /* accents — grounded ink-blue + warm clay (no purple/teal) */
  --violet:        #235A97;
  --violet-soft:   #4A7BC0;
  --teal:          #C2683C;
  --teal-soft:     #D4855E;

  /* semantic */
  --green: #22A06B;
  --amber: #E8A33D;
  --red:   #E5484D;

  /* neutral ramp */
  --n900: #1E2227;
  --n700: #3A4048;
  --n500: #6B7280;
  --n300: #A1A8B0;
  --n200: #D2D6DB;
  --n100: #ECEEF0;
  --n0:   #F6F5F2;

  --grad: linear-gradient(125deg, #3C72B6 0%, #1F4E86 100%);

  --f-head: "Space Grotesk", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  --m: 112px; /* page margin */

  --shadow-sm: 0 2px 8px rgba(30,34,39,.05);
  --shadow:    0 18px 44px rgba(30,34,39,.09), 0 2px 8px rgba(30,34,39,.04);
  --shadow-lg: 0 34px 80px rgba(30,34,39,.13), 0 4px 12px rgba(30,34,39,.05);
}

* { box-sizing: border-box; }

deck-stage:not(:defined) { visibility: hidden; }

section {
  font-family: var(--f-body);
  background: var(--porcelain);
  color: var(--graphite);
  overflow: hidden;
}
/* single soft gradient wash per slide (garnish, not wallpaper) */
section.wash::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(820px 620px at 92% -6%, rgba(35,90,151,.13), transparent 58%),
              radial-gradient(680px 560px at 100% 108%, rgba(194,104,60,.12), transparent 60%);
  pointer-events: none;
}
section.wash-l::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(720px 560px at 4% 102%, rgba(194,104,60,.12), transparent 58%);
  pointer-events: none;
}

.pad { position: absolute; inset: 0; padding: var(--m); }

/* ---- logo lockup (monogram + wordmark) ------------------- */
.logo {
  position: absolute; top: 58px; left: var(--m);
  display: flex; align-items: center; gap: 14px; z-index: 6;
}
.mono { background: var(--grad); display: grid; place-items: center; }
.logo .mono {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--grad);
  display: grid; place-items: center; flex: 0 0 auto;
  box-shadow: 0 6px 16px rgba(35,90,151,.28);
}
.logo .lk { display: flex; flex-direction: column; gap: 3px; }
.logo .mark {
  font-family: var(--f-head); font-weight: 700; font-size: 23px;
  letter-spacing: -.02em; line-height: 1; color: var(--graphite);
}
.logo .tag {
  font-family: var(--f-body); font-weight: 500; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--n500);
}
/* reversed lockup on gradient/dark fills */
.logo.rev .mark { color: #fff; }
.logo.rev .tag  { color: rgba(255,255,255,.8); }
.logo.rev .mono { background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.18); }

/* page counter */
.pgnum {
  position: absolute; bottom: 58px; right: var(--m);
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .18em;
  color: var(--n300); z-index: 6;
}
.pgnum b { color: var(--violet); font-weight: 600; }

/* ---- shared type ----------------------------------------- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 16px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--violet);
  display: inline-flex; align-items: center; gap: 14px; font-weight: 500;
}
.eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--violet); border-radius: 2px; }
.eyebrow.teal { color: #A8542C; }
.eyebrow.teal::before { background: var(--teal); }
.eyebrow.amber { color: #B9791F; }
.eyebrow.amber::before { background: var(--amber); }
.eyebrow.red { color: var(--red); }
.eyebrow.red::before { background: var(--red); }

h1.title {
  font-family: var(--f-head); font-weight: 700;
  font-size: 64px; line-height: 1.04; letter-spacing: -.025em;
  margin: 0; color: var(--graphite); text-wrap: balance;
}
.lead { font-size: 24px; line-height: 1.55; color: var(--n700); font-weight: 400; }

.hl-violet { color: var(--violet); }
.hl-teal   { color: #A8542C; }
.hl-red    { color: var(--red); }
.grad-text {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- chips / pills --------------------------------------- */
.chip {
  font-family: var(--f-mono); font-size: 15px; letter-spacing: .02em;
  padding: 10px 18px; border-radius: 100px;
  border: 1px solid var(--n200); background: var(--white);
  color: var(--n700); display: inline-flex; align-items: center; gap: 9px;
  box-shadow: var(--shadow-sm);
}
.chip .d { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
.chip .d.t { background: var(--teal); }
.chiprow { display: flex; flex-wrap: wrap; gap: 13px; }

.conf {
  font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .04em;
  padding: 5px 11px; border-radius: 100px; display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600;
}
.conf .d { width: 7px; height: 7px; border-radius: 50%; }
.conf.high { background: rgba(34,160,107,.12); color: var(--green); }
.conf.high .d { background: var(--green); }
.conf.med  { background: rgba(232,163,61,.16); color: #B9791F; }
.conf.med .d  { background: var(--amber); }
.conf.low  { background: rgba(229,72,77,.12); color: var(--red); }
.conf.low .d  { background: var(--red); }

/* ---- cards ----------------------------------------------- */
.card {
  background: var(--white); border: 1px solid var(--n100);
  border-radius: 18px; padding: 32px; position: relative;
  box-shadow: var(--shadow);
}

/* ---- document → data motif ------------------------------- */
.motif { position: relative; }
.paper {
  position: relative; width: 234px; height: 304px; border-radius: 10px;
  background: var(--white);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--n100);
  padding: 28px 24px; overflow: hidden;
}
.paper .ln { height: 7px; border-radius: 3px; background: var(--n200); margin-bottom: 13px; }
.paper .ln.s { width: 56%; } .paper .ln.m { width: 84%; }
.paper .ln.head { height: 12px; width: 64%; background: var(--n300); margin-bottom: 22px; }

.fields { display: flex; flex-direction: column; gap: 12px; }
.field {
  font-family: var(--f-mono); font-size: 14px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 11px;
  background: var(--white); border: 1px solid var(--n100);
  box-shadow: var(--shadow-sm);
}
.field .k { color: var(--n500); }
.field .v { color: var(--graphite); font-weight: 600; margin-left: auto; white-space: nowrap; }
.field .bar { width: 4px; align-self: stretch; border-radius: 3px; background: var(--grad); }

/* value-swap reveal when a new page is scanned */
@media (prefers-reduced-motion: no-preference) {
  .field.swap { animation: rowflash .55s ease-out; }
  .field.swap .k, .field.swap .v { animation: swapval .5s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--sd, 0s); }
}
@keyframes swapval {
  0%   { opacity: 0; transform: translateY(-7px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes rowflash {
  0%   { border-color: var(--violet); box-shadow: 0 0 0 2px rgba(35,90,151,.18), var(--shadow-sm); }
  100% { border-color: var(--n100); box-shadow: var(--shadow-sm); }
}

.particle {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--violet); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  body.anim-ready [data-deck-active] .particle { animation: drift 2.8s linear infinite; }
}
@keyframes drift {
  0%   { opacity: 0; transform: translateX(0) scale(.6); }
  8%   { opacity: 1; }
  46%  { opacity: 1; transform: translateX(var(--dx, 160px)) scale(1); }  /* lands as the beam clears the page & values swap */
  56%  { opacity: 0; transform: translateX(var(--dx, 160px)) scale(1); }
  100% { opacity: 0; transform: translateX(var(--dx, 160px)) scale(1); }
}

/* ---- nodes & connectors ---------------------------------- */
.node {
  width: 96px; height: 96px; border-radius: 20px;
  display: grid; place-items: center; background: var(--white);
  border: 1px solid var(--n100); box-shadow: var(--shadow); position: relative;
}
.node .num {
  font-family: var(--f-mono); font-size: 14px; color: #fff; font-weight: 600;
  position: absolute; top: -12px; left: -12px; width: 30px; height: 30px;
  border-radius: 50%; background: var(--grad); display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(35,90,151,.3);
}
.glyph { stroke: var(--graphite); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.glyph.v { stroke: var(--violet); }
.glyph.t { stroke: #A8542C; }

/* ---- entrance animations (gated, settle curve) ----------- */
.rise { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  body.anim-ready [data-deck-active] .rise { animation: rise .6s cubic-bezier(.16,1,.3,1) both; }
  body.anim-ready [data-deck-active] .rise.d1 { animation-delay: .06s; }
  body.anim-ready [data-deck-active] .rise.d2 { animation-delay: .14s; }
  body.anim-ready [data-deck-active] .rise.d3 { animation-delay: .22s; }
  body.anim-ready [data-deck-active] .rise.d4 { animation-delay: .30s; }
  body.anim-ready [data-deck-active] .rise.d5 { animation-delay: .38s; }
  body.anim-ready [data-deck-active] .rise.d6 { animation-delay: .46s; }
  body.anim-ready [data-deck-active] .rise.d7 { animation-delay: .54s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: no-preference) {
  body.anim-ready [data-deck-active] .flow-line { stroke-dasharray: 7 11; animation: flow 1.3s linear infinite; }
  body.anim-ready [data-deck-active] .spin-loop { animation: spin 30s linear infinite; transform-origin: center; }
  body.anim-ready [data-deck-active] .settle-pop { animation: settle .7s cubic-bezier(.16,1,.3,1) both; animation-delay: .5s; }
}
@keyframes flow { to { stroke-dashoffset: -36; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes settle { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

@media print {
  .rise, .particle, .flow-line, .spin-loop, .settle-pop {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ============================================================
   PER-SLIDE COMPONENTS
   ============================================================ */

/* agenda list */
.agenda { display: flex; flex-direction: column; gap: 6px; }
.ag-item {
  display: flex; align-items: center; gap: 28px;
  padding: 24px 4px; border-bottom: 1px solid var(--n100);
}
.ag-item .agn { font-family: var(--f-mono); font-size: 18px; color: var(--n300); width: 44px; font-weight: 500; }
.ag-item .agt { font-family: var(--f-head); font-weight: 500; font-size: 30px; color: var(--graphite); }
.ag-item .agdot { width: 9px; height: 9px; border-radius: 50%; background: var(--n200); margin-left: auto; }
.ag-item.on .agn { color: var(--violet); }
.ag-item.on .agdot { background: var(--teal); box-shadow: 0 0 0 5px rgba(194,104,60,.15); }

/* results panel */
.res-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 26px; border-bottom: 1px solid var(--n100);
}
.res-row { display: flex; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--n100); }
.res-row .rk { font-size: 16px; color: var(--n500); flex: 1; }
.res-row .rv { font-family: var(--f-mono); font-size: 15px; color: var(--graphite); font-weight: 600; white-space: nowrap; }
.res-row .conf { min-width: 60px; justify-content: center; }

/* pipeline steps */
.step { width: 230px; }
.step .st-t { font-family: var(--f-head); font-weight: 600; font-size: 24px; margin-top: 24px; color: var(--graphite); }
.step .st-d { font-size: 16px; line-height: 1.5; color: var(--n500); margin-top: 8px; max-width: 21ch; }
.fork-chip {
  font-family: var(--f-mono); font-size: 14px; padding: 8px 16px; border-radius: 100px;
  border: 1px solid var(--n200); background: var(--white); box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

/* format cards */
.fmt { display: flex; flex-direction: column; min-height: 232px; }
.fmt-ext { font-family: var(--f-head); font-weight: 700; font-size: 32px; letter-spacing: -.01em; }
.fmt-d { font-size: 18px; line-height: 1.5; color: var(--n500); margin: 16px 0 auto; }
.fmt-tag { font-family: var(--f-mono); font-size: 13px; padding: 7px 14px; border-radius: 100px; align-self: flex-start; margin-top: 22px; }
.fmt-tag.ok   { background: rgba(34,160,107,.12); color: var(--green); }
.fmt-tag.step { background: rgba(232,163,61,.16); color: #B9791F; }

/* feedback loop */
.loop-node {
  position: absolute; width: 110px; height: 110px; border-radius: 50%;
  display: grid; place-items: center; text-align: center; background: var(--white);
  border: 1px solid var(--n100); font-family: var(--f-head); font-weight: 600;
  font-size: 17px; color: var(--graphite); box-shadow: var(--shadow);
}
.loop-node.n1 { top: -8px;  left: 206px; }
.loop-node.n2 { top: 150px; right: -8px; }
.loop-node.n3 { bottom: 18px; right: 60px; }
.loop-node.n4 { bottom: 18px; left: 60px; }
.loop-node.n5 { top: 150px; left: -8px; font-size: 15px; line-height: 1.15; }
.loop-node.glow {
  border: none; color: #fff; background: var(--grad);
  box-shadow: 0 14px 34px rgba(35,90,151,.4);
}

/* option panels (key slide) */
.opt { background: var(--white); border: 1px solid var(--n100); border-radius: 22px; padding: 32px 36px; box-shadow: var(--shadow); }
.opt.a { border-top: 4px solid var(--violet); }
.opt.b { border-top: 4px solid var(--teal); }
.opt-head { display: flex; align-items: center; gap: 16px; }
.opt-badge { width: 50px; height: 50px; border-radius: 13px; color: #fff; font-family: var(--f-head); font-weight: 700; font-size: 24px; display: grid; place-items: center; }
.opt-kick { font-family: var(--f-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.opt-title { font-family: var(--f-head); font-weight: 600; font-size: 30px; line-height: 1; margin-top: 4px; color: var(--graphite); }
.opt-graph { display: flex; align-items: center; margin: 24px 0; padding: 18px; border-radius: 14px; background: var(--porcelain); }
.g-node {
  flex: 1; text-align: center; font-family: var(--f-mono); font-size: 13px;
  padding: 13px 6px; border-radius: 9px; color: var(--n700);
  border: 1px solid var(--n200); background: var(--white); line-height: 1.3;
}
.g-node small { color: var(--n500); }
.g-node.accent-v { border-color: var(--violet); color: var(--violet); }
.g-node.accent-t { border-color: var(--teal); color: #A8542C; }
.g-line { width: 24px; height: 2px; flex: 0 0 24px; }
.g-line.v { background: var(--violet); } .g-line.t { background: var(--teal); }
.opt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.opt-list li { position: relative; padding-left: 24px; font-size: 17px; line-height: 1.5; color: var(--n700); }
.opt-list li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--n300); }
.opt-list li b { color: var(--graphite); font-weight: 600; }
.opt-foot { font-family: var(--f-mono); font-size: 15px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--n100); }

/* security points */
.sec-pt { display: flex; gap: 18px; align-items: flex-start; font-size: 19px; line-height: 1.5; color: var(--n700); }
.sec-pt .ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--white); border: 1px solid var(--n100); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.sec-pt b { color: var(--graphite); font-weight: 600; }
.lock {
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--n100); display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
}

/* big stats */
.stat-n { font-family: var(--f-head); font-weight: 700; font-size: 100px; line-height: 1; letter-spacing: -.03em; }
.stat-l { font-family: var(--f-mono); font-size: 17px; color: var(--n500); margin-top: 14px; max-width: 26ch; }

/* why-memo pillars */
.pillar { display: flex; flex-direction: column; }
.pillar .pico { width: 56px; height: 56px; border-radius: 15px; background: var(--grad); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(35,90,151,.25); }
.pillar .pt { font-family: var(--f-head); font-weight: 600; font-size: 25px; margin-top: 26px; color: var(--graphite); }
.pillar .pd { font-size: 17px; line-height: 1.55; color: var(--n500); margin-top: 12px; }

/* roadmap phases */
.phase { padding-top: 8px; }
.ph-marker { width: 20px; height: 20px; border-radius: 50%; background: var(--white); border: 2px solid var(--n200); margin-bottom: 26px; box-shadow: var(--shadow-sm); }
.ph-marker.now { background: var(--grad); border: none; box-shadow: 0 0 0 6px rgba(35,90,151,.14), 0 6px 16px rgba(35,90,151,.3); }
.ph-tag { font-family: var(--f-mono); font-size: 14px; letter-spacing: .08em; color: var(--n500); text-transform: uppercase; }
.ph-title { font-family: var(--f-head); font-weight: 600; font-size: 27px; margin-top: 10px; color: var(--graphite); }
.ph-d { font-size: 17px; line-height: 1.55; color: var(--n500); margin-top: 12px; max-width: 30ch; }
.phase.now .ph-title { color: var(--violet); }

/* app screen (slide 8) */
.app {
  background: var(--white); border: 1px solid var(--n100); border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow-lg);
}
.app-bar { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--n100); }
.app-body { display: grid; grid-template-columns: 1fr 1fr; }
.app-left { padding: 22px; background: var(--porcelain); border-right: 1px solid var(--n100); }
.app-doc { background: var(--white); border: 1px solid var(--n100); border-radius: 8px; padding: 20px; box-shadow: var(--shadow-sm); height: 100%; }
.app-doc .dl { height: 6px; border-radius: 3px; background: var(--n200); margin-bottom: 11px; }
.app-right { padding: 20px 24px; }
.app-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--n100); }
.app-row .ark { font-family: var(--f-mono); font-size: 13px; color: var(--n500); width: 130px; }
.app-row .arv { font-size: 15px; color: var(--graphite); font-weight: 500; flex: 1; }
.app-row.editing { background: rgba(35,90,151,.05); border-radius: 8px; padding: 13px 12px; border-bottom: none; }
.app-row .edit-input { font-size: 15px; color: var(--graphite); font-weight: 600; flex: 1; border: 1.5px solid var(--violet); border-radius: 7px; padding: 7px 10px; background: #fff; display: flex; align-items: center; }
.app-row .caret { width: 1.5px; height: 17px; background: var(--violet); margin-left: 2px; }
.edited-tag { font-family: var(--f-mono); font-size: 11px; color: var(--violet); background: rgba(35,90,151,.1); padding: 3px 8px; border-radius: 6px; }
.confirm-btn { font-family: var(--f-body); font-weight: 600; font-size: 14px; color: #fff; background: var(--teal); padding: 11px 22px; border-radius: 9px; box-shadow: 0 6px 14px rgba(194,104,60,.3); }

/* multi-page scanning motif (hero) */
.scan-doc { display: flex; align-items: center; gap: 0; }
.pages { position: relative; width: 178px; height: 226px; flex: 0 0 auto; }
.page {
  position: absolute; inset: 0; background: var(--white);
  border-radius: 11px; border: 1px solid var(--n100); box-shadow: var(--shadow);
}
.page.pg1 { z-index: 3; padding: 22px 20px; overflow: hidden; }
.page.pg2 { z-index: 2; transform: translate(12px, 12px); opacity: .65; }
.page.pg3 { z-index: 1; transform: translate(24px, 24px); opacity: .4; }
.pl { height: 7px; border-radius: 3px; background: var(--n200); margin-bottom: 14px; }
.pl.s { width: 56%; } .pl.m { width: 84%; }
.pl.head { height: 12px; width: 64%; background: var(--n300); margin-bottom: 22px; }
.scanbeam {
  position: absolute; left: 0; right: 0; top: -40px; height: 40px;
  background: linear-gradient(180deg, transparent, rgba(35,90,151,.16), transparent);
  border-bottom: 2px solid var(--violet);
  box-shadow: 0 0 18px rgba(35,90,151,.35);
}
@media (prefers-reduced-motion: no-preference) {
  body.anim-ready [data-deck-active] .scanbeam { animation: scan 2.8s cubic-bezier(.45,0,.55,1) infinite; }
  body.anim-ready [data-deck-active] .page.pg1 { animation: pageflip 2.8s ease-in-out infinite; }
}
@keyframes scan {
  0%   { top: -40px; opacity: 0; }
  10%  { opacity: 1; }
  46%  { top: 226px; opacity: 1; }
  54%  { top: 226px; opacity: 0; }
  100% { top: 226px; opacity: 0; }
}
@keyframes pageflip {
  0%, 54%   { transform: translate(0,0) rotate(0); opacity: 1; }
  66%       { transform: translate(-26px,-8px) rotate(-4deg); opacity: 0; }
  67%       { transform: translate(0,0) rotate(0); opacity: 0; }
  78%, 100% { transform: translate(0,0) rotate(0); opacity: 1; }
}