/* ============================================================================
   overview.css — the Overview page
   ----------------------------------------------------------------------------
   The plain-language layer: Cognia in about sixty seconds, then a short FAQ.
   The protocol page's vocabulary (a 1180px frame, mono labels over display
   statements, hairlines, the network's node-and-thread motif) restated for a
   page that is read top to bottom, not studied. Load order is the shell's:
   tokens.css, tokens-dark.css, shell.css, then this file.

   Nothing below invents a colour, blur, shadow, radius or type value beyond
   the two editorial sizes declared at the top: every declaration resolves
   through src/shared/tokens.css, so the [data-theme="dark"] block in
   tokens-dark.css re-points all of it — the figure included, whose fills and
   strokes are classes on this sheet.

   NOTE ON THE SPACING SCALE: it is a list, not a multiplier. --sp-9 is 10px,
   --sp-16 is 18px, --sp-22 is 40px. Sizes below are chosen by VALUE.
   ========================================================================== */

:root{
  --ov-title:       clamp(30px, 3.6vw, 44px);   /* the hero statement */
  --ov-big:         clamp(19px, 2vw, 23px);     /* a display sentence inside a section */
  --ov-measure:     62ch;                       /* the reading width for prose */
}

body{ font-size:var(--fs-lg); line-height:var(--lh-loose); }
.ov p, .ov h1, .ov h2, .ov h3, .ov figure, .ov dl, .ov dd{ margin:0; }
.ov a{ color:inherit; text-underline-offset:3px; }

.ov-skip{
  position:fixed; top:-80px; left:var(--sp-9); z-index:80;
  padding:var(--sp-11); background:var(--paper); color:var(--ink);
  border:1px solid var(--border); border-radius:var(--r-8);
}
.ov-skip:focus{ top:var(--sp-7); }

/* -- the frame ------------------------------------------------------------- */
.ov{
  width:100%; max-width:1180px; margin:0 auto; min-width:0;
  padding:var(--sp-22) var(--sp-16) var(--sp-22);
}

/* -- type roles ------------------------------------------------------------ */
.ov-eyebrow, .ov-h, .ov-label, .ov-num, .ov-node-l, .ov-thread span, .ov-qn{
  font-family:var(--font-mono); text-transform:uppercase;
}
.ov-eyebrow{ font-size:var(--fs-sm); letter-spacing:var(--ls-12); color:var(--brand); margin-bottom:var(--sp-15); }
/* a section's heading: a small technical label over a hairline, never a
   display headline competing with the hero */
.ov-h{
  font-size:var(--fs-md); font-weight:var(--fw-semibold); letter-spacing:var(--ls-12);
  color:var(--graphite); padding-top:var(--sp-15); margin-bottom:var(--sp-18);
  border-top:1px solid var(--border);
}
.ov-label{ font-size:var(--fs-sm); letter-spacing:var(--ls-10); color:var(--graphite); margin-bottom:var(--sp-9); }
.ov h1{
  font-family:var(--font-display); font-size:var(--ov-title); font-weight:var(--fw-medium);
  letter-spacing:-.04em; line-height:1.12; max-width:30ch;
}
.ov-lead{
  margin-top:var(--sp-15); color:var(--graphite);
  font-size:var(--fs-xl); line-height:var(--lh-loose); max-width:var(--ov-measure);
}
.ov-big{
  font-family:var(--font-display); font-size:var(--ov-big); font-weight:var(--fw-medium);
  letter-spacing:-.02em; line-height:1.3; max-width:var(--ov-measure);
}
.ov-p{ margin-top:var(--sp-11); color:var(--graphite); max-width:var(--ov-measure); }
.ov h3{ font:var(--fw-semibold) var(--fs-17)/1.3 var(--font-display); letter-spacing:var(--ls-tight); }
.ov-note{
  margin-top:var(--sp-16); padding-left:var(--sp-11); border-left:2px solid var(--brand);
  color:var(--graphite); font-size:var(--fs-base-p); line-height:var(--lh-loose); max-width:var(--ov-measure);
}
.ov-note-strong{ color:var(--ink); font-weight:var(--fw-semibold); }

/* -- sections' rhythm ------------------------------------------------------ */
.ov-sec{ margin-top:var(--sp-22); }
.ov-hero{ padding-top:var(--sp-9); }
.ov-two{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--sp-22); align-items:start; }

/* -- the figure: agent A → memory → agent B -------------------------------
   The network's nodes and threads as HTML: a dot in a ring, a hairline with a
   verb on it. The memory node wears the brand ring; the agents the ink dot.
   At phone width the row becomes a column and the threads turn vertical. */
.ov-flow{
  display:grid; grid-template-columns:auto minmax(48px,1fr) auto minmax(48px,1fr) auto;
  align-items:center; gap:0; max-width:720px; margin-top:var(--sp-22); padding-top:var(--sp-9);
}
.ov-node{ display:grid; justify-items:center; gap:var(--sp-4); text-align:center; }
.ov-dot{
  width:44px; height:44px; border-radius:var(--r-circle); box-sizing:border-box;
  border:1px solid var(--border); background:var(--paper-93);
  display:grid; place-items:center;
}
.ov-dot::after{ content:""; width:8px; height:8px; border-radius:var(--r-circle); background:var(--ink); }
.ov-node.is-memory .ov-dot{ width:56px; height:56px; border-color:var(--brand); }
.ov-node.is-memory .ov-dot::after{ width:12px; height:12px; background:var(--brand); }
.ov-node-l{ font-size:var(--fs-sm); letter-spacing:var(--ls-10); color:var(--ink); margin-top:var(--sp-3); }
.ov-node-s{ font-size:var(--fs-md); color:var(--graphite); }
.ov-thread{
  position:relative; height:1px; background:var(--graphite); opacity:.7;
  align-self:start; margin-top:22px;               /* centred on the 44px agent ring */
}
.ov-thread::after{
  content:""; position:absolute; right:-1px; top:50%; width:5px; height:5px;
  border-radius:var(--r-circle); background:var(--brand); transform:translateY(-50%);
}
.ov-thread span{
  position:absolute; left:50%; top:-16px; transform:translateX(-50%);
  font-size:var(--fs-xs); letter-spacing:var(--ls-08); color:var(--graphite); background:var(--paper); padding:0 4px;
}

/* -- the three steps ------------------------------------------------------
   One row, three columns, and the thread that runs through their numbers:
   the same hairline the figure uses, so the model reads as one motion. */
.ov-steps-list{
  list-style:none; margin:0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-18);
}
.ov-steps-list::before{
  content:""; position:absolute; left:0; right:0; top:15px; height:1px;
  background:var(--border);
}
.ov-step{ position:relative; padding-top:var(--sp-21); min-width:0; }
.ov-num{
  position:absolute; top:0; left:0;
  height:30px; padding:0 var(--sp-6); display:inline-flex; align-items:center;
  background:var(--paper); border:1px solid var(--brand); border-radius:var(--r-6);
  font-size:var(--fs-sm); letter-spacing:var(--ls-10); color:var(--brand);
}
.ov-step h3{ text-transform:uppercase; letter-spacing:var(--ls-08); font-size:var(--fs-lg-p); }
.ov-step p{ margin-top:var(--sp-8); color:var(--graphite); }

/* -- lists ----------------------------------------------------------------- */
.ov-kinds, .ov-list{ list-style:none; margin:0; padding:0; }
.ov-kinds li{
  padding:var(--sp-6) 0; border-top:1px solid var(--border);
  font-family:var(--font-mono); font-size:var(--fs-base); color:var(--ink);
}
.ov-kinds li:last-child{ border-bottom:1px solid var(--border); }
.ov-list li{ position:relative; padding:var(--sp-3) 0 var(--sp-3) var(--sp-14); color:var(--ink); }
.ov-list li::before{
  content:""; position:absolute; left:0; top:.78em; width:6px; height:6px;
  border-radius:var(--r-circle); background:var(--brand);
}

/* -- private / public ------------------------------------------------------ */
.ov-cols{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-18); }
.ov-col{ padding:var(--sp-17) var(--sp-16); border:1px solid var(--border); border-radius:var(--r-12); background:var(--paper-93); }
.ov-col h3{ text-transform:uppercase; letter-spacing:var(--ls-10); font-size:var(--fs-base-p); color:var(--brand); }
.ov-col .ov-p{ margin-top:var(--sp-5); }
.ov-col .ov-list{ margin-top:var(--sp-11); }

/* -- use cases ------------------------------------------------------------- */
.ov-cases{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 var(--sp-18); }
.ov-cases > div{ padding:var(--sp-13) 0; border-top:1px solid var(--border); min-width:0; }
.ov-cases dt{
  font:var(--fw-semibold) var(--fs-sm) var(--font-mono); letter-spacing:var(--ls-10);
  text-transform:uppercase; color:var(--ink);
}
.ov-cases dd{ margin-top:var(--sp-5); color:var(--graphite); font-size:var(--fs-base-p); line-height:var(--lh-loose); }

/* -- trust ----------------------------------------------------------------- */
.ov-trust-rows{ margin-top:var(--sp-16); max-width:720px; }
.ov-trust-rows > div{
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:var(--sp-11);
  padding:var(--sp-9) 0; border-top:1px solid var(--border);
}
.ov-trust-rows > div:last-child{ border-bottom:1px solid var(--border); }
.ov-trust-rows dt{
  font:var(--fw-semibold) var(--fs-sm) var(--font-mono); letter-spacing:var(--ls-10);
  text-transform:uppercase; color:var(--brand); padding-top:2px;
}
.ov-trust-rows dd{ color:var(--ink); }

/* -- FAQ: native details/summary ------------------------------------------ */
.ov-qs{ max-width:820px; border-top:1px solid var(--border); }
.ov-q{ border-bottom:1px solid var(--border); }
.ov-q summary{
  list-style:none; cursor:pointer; display:grid; grid-template-columns:34px minmax(0,1fr) 20px;
  align-items:center; gap:var(--sp-9); min-height:52px; padding:var(--sp-9) var(--sp-3);
  border-radius:var(--r-7);
}
.ov-q summary::-webkit-details-marker{ display:none; }
@media (hover:hover){ .ov-q summary:hover{ background:var(--brand-06); } }
.ov-q summary:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.ov-qn{ font-size:var(--fs-sm); letter-spacing:var(--ls-10); color:var(--brand); }
.ov-qt{ font:var(--fw-medium) var(--fs-2xl)/1.35 var(--font-display); letter-spacing:var(--ls-tight); color:var(--ink); }
.ov-chev{
  color:var(--brand); font-size:var(--fs-lg); line-height:1; text-align:center;
  transform:rotate(-90deg); transition:transform var(--dur-150) var(--ease);
}
.ov-q[open] .ov-chev{ transform:rotate(0deg); }
.ov-a{ padding:0 var(--sp-3) var(--sp-15) calc(34px + var(--sp-9) + var(--sp-3)); color:var(--graphite); max-width:var(--ov-measure); }
.ov-a p + p{ margin-top:var(--sp-8); }
.ov-a b{ color:var(--ink); font-weight:var(--fw-semibold); }

/* -- the two actions ------------------------------------------------------- */
.ov-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-9) var(--sp-11); }
.ov-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 var(--sp-16); border:1px solid var(--border); border-radius:var(--r-11);
  background:var(--paper); color:var(--ink); font:var(--fw-semibold) var(--fs-lg)/1 var(--font-body);
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:border-color var(--dur-140) var(--ease), color var(--dur-140) var(--ease), background var(--dur-140) var(--ease);
}
.ov-btn:hover{ border-color:var(--brand); color:var(--brand); }
.ov-btn.primary{ background:var(--brand); border-color:var(--brand); color:var(--white); }
.ov-btn.primary:hover{ background:var(--brand-88); border-color:var(--brand-88); color:var(--white); }
.ov-btn:focus-visible, .ov-quiet:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.ov-quiet{
  display:inline-flex; align-items:center; min-height:44px; padding:0 var(--sp-5);
  color:var(--graphite); text-decoration:none; font-size:var(--fs-lg);
}
.ov-quiet:hover{ color:var(--brand); }

/* -- dark ------------------------------------------------------------------ */
[data-theme="dark"] .ov-col, [data-theme="dark"] .ov-dot{ background:var(--surface-raised, var(--paper-93)); }
[data-theme="dark"] .ov-num, [data-theme="dark"] .ov-thread span{ background:var(--surface, var(--paper)); }

/* -- 900px: the two-column blocks tighten ----------------------------------- */
@media (max-width:900px){
  .ov-two{ grid-template-columns:1fr; gap:var(--sp-18); }
  .ov-cases{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* -- phone: everything stacks; nothing is hidden --------------------------- */
@media (max-width:640px){
  .ov{ padding:var(--sp-20) var(--sp-15) var(--sp-21); }
  .ov h1{ letter-spacing:-.03em; }
  .ov-br{ display:none; }
  .ov-flow{
    grid-template-columns:1fr; justify-items:center; gap:var(--sp-5);
    margin-top:var(--sp-18);
  }
  .ov-thread{ width:1px; height:40px; margin-top:0; align-self:auto; }
  .ov-thread::after{ right:auto; top:auto; bottom:-1px; left:50%; transform:translateX(-50%); }
  .ov-thread span{ left:14px; top:50%; transform:translateY(-50%); }
  .ov-steps-list{ grid-template-columns:1fr; gap:var(--sp-17); }
  .ov-steps-list::before{ left:15px; right:auto; top:0; bottom:0; width:1px; height:auto; }
  .ov-step{ padding-top:0; padding-left:calc(30px + var(--sp-13)); }
  .ov-num{ top:0; }
  .ov-cols, .ov-cases{ grid-template-columns:1fr; }
  .ov-trust-rows > div{ grid-template-columns:1fr; gap:var(--sp-2); }
  .ov-q summary{ grid-template-columns:28px minmax(0,1fr) 20px; }
  .ov-a{ padding-left:calc(28px + var(--sp-9) + var(--sp-3)); }
  .ov-actions .ov-btn{ flex:1 1 auto; }
}

@media (prefers-reduced-motion: reduce){
  .ov-chev, .ov-btn{ transition:none; }
}