/* Conversation Architecture, the 13-page linear reading.
   Ported from drafts/catalyst/conversation-architecture-rebuild.html in
   fontanini-advisor-os at 507078f. That draft was built against module.css, so
   only the reading's own components live here; the eyebrow, lede, facts,
   callout, card, grid and promptblock components come from module.css.
   The Trust Boundary is built the same way and links this file for the shared
   pager, progress bar and reading components, adding only its own in
   reading-trust-boundary.css. A change here reaches both readings.
   Tokens only. No new color, radius, or shadow. */

/* Progress bar: part label, page counter, one tick per page. It sticks directly
   under the site header. The header is 72px on desktop but wraps to a variable
   height below 700px, so reading-conversation-architecture.js measures it and
   sets top to match; 72px holds until the script runs. */
.ca-progress{
  position:sticky; top:72px; z-index:39;
  background:rgba(26,26,26,0.96); border-bottom:1px solid rgba(247,245,242,0.08);
}
.ca-progress .wrap{padding-block:12px; display:flex; flex-direction:column; gap:10px;}
.ca-toprow{display:flex; justify-content:space-between; align-items:center; gap:12px; font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.12em; text-transform:uppercase; color:rgba(247,245,242,0.6);}
.ca-toprow b{color:var(--paper); font-weight:500; white-space:nowrap;}
.ca-ticks{display:flex; gap:4px;}
.tick{flex:1; min-width:0; height:4px; border:0; padding:0; border-radius:2px; background:rgba(247,245,242,0.12); cursor:pointer;}
.tick.done{background:var(--whiskey);}
.tick.here{background:var(--rust);}

.ca-pages{padding-top:36px;}
.pg{scroll-margin-top:100px;}
.pg p, .pg li{max-width:65ch;}
.pg h2{text-wrap:balance;}
.pg .callout p{margin:0;}
.pg .card .k.keep{color:var(--whiskey);}

/* a turn in the running example conversation */
.turn{border:1px solid rgba(247,245,242,0.12); border-radius:2px; padding:12px 16px; margin:14px 0; font-size:1rem; max-width:65ch;}
.turn.you{background:rgba(247,245,242,0.07);}
.turn.ai{background:var(--ink);}
.turn .who{display:block; font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--whiskey); margin-bottom:4px;}
.turn .who em{font-style:normal; color:rgba(247,245,242,0.45);}

/* numbered problem markers, keyed to the list below the turn */
.flag{display:inline-flex; align-items:center; justify-content:center; width:1.45em; height:1.45em; border-radius:50%; background:var(--rust); color:var(--paper); font-family:var(--font-mono); font-size:0.68rem; vertical-align:middle;}
.flags{padding-left:24px;}
.flags li{margin:8px 0;}
.flags li::marker{color:var(--rust); font-family:var(--font-mono);}

.checks{list-style:none; padding:0; margin:20px 0;}
.checks li{position:relative; padding:12px 0 12px 34px; border-bottom:1px solid rgba(247,245,242,0.08);}
.checks li::before{content:""; position:absolute; left:0; top:17px; width:14px; height:14px; border:1.5px solid var(--rust);}

.credit{font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--whiskey);}
.quote{margin:24px 0; padding:4px 0 4px 20px; border-left:3px solid var(--whiskey);}
.quote p{font-family:var(--font-display); font-size:1.35rem; line-height:1.35; margin:0 0 8px;}
.quote cite{font-style:normal; font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--whiskey);}

/* the context window diagram */
.window{margin:24px 0; max-width:65ch;}
.wlabel{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:rgba(247,245,242,0.6); margin-bottom:6px;}
.wbar{display:flex; border:1px solid rgba(247,245,242,0.25); border-right:3px solid var(--rust);}
.wseg{flex:1; padding:12px 10px; border-right:1px solid rgba(247,245,242,0.12); background:rgba(212,165,116,0.10); display:flex; flex-direction:column; gap:2px; min-width:0;}
.wseg:last-child{border-right:0;}
.wseg b{font-family:var(--font-mono); font-size:0.66rem; font-weight:500; letter-spacing:0.06em; color:var(--paper);}
.wseg span{font-size:0.84rem; color:rgba(247,245,242,0.65); line-height:1.3;}
.wseg.old{background:rgba(247,245,242,0.02); border-style:dashed; opacity:0.6;}

.card ul.plain{margin:0; padding-left:18px;}
.card ul.plain li{margin:4px 0; color:var(--paper); font-size:1rem;}
.deeper{margin-top:28px; padding-top:18px; border-top:1px solid rgba(247,245,242,0.08);}
.deeper .k{display:block; font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:rgba(247,245,242,0.6); margin-bottom:8px;}
.deeper p{margin:0 0 6px;}

/* Back and Next within the reading. The readnav below it moves between readings. */
.pnav{display:flex; justify-content:space-between; gap:12px; margin-top:36px; padding-top:22px; border-top:1px solid rgba(247,245,242,0.08);}
.pnav .rnav:disabled{opacity:0.3; cursor:not-allowed;}

@media (max-width:700px){
  .ca-progress .wrap, .ca-pages .wrap{padding-inline:16px;}
  .ca-pages{font-size:17px;}
  .ca-pages .grid.two{grid-template-columns:1fr;}
  .wbar{flex-direction:column; border-right:1px solid rgba(247,245,242,0.25); border-bottom:3px solid var(--rust);}
  .wseg{border-right:0; border-bottom:1px solid rgba(247,245,242,0.12); flex-direction:row; align-items:baseline; gap:10px;}
  .ca-pages .fact{grid-template-columns:1fr; gap:4px;}
  .pnav .rnav{padding:14px 18px;}
  .quote p{font-size:1.15rem;}
}