/* ============================================================
   Working Ledger — blog + live-demo theme extension
   (blog/* EN+ES incl. index, demo/index EN)
   Loads AFTER /css/ledger.css (tokens, fonts, body, .btn base).
   Replaces 14 divergent legacy inline <style> blocks with one
   alias layer: legacy token names map onto ledger tokens so
   page markup stays untouched (pure head swaps).
   Brand refs: brand identity spec v1 §2 palette, §3 type,
   §4 layout rules (no centered hero / equal-card SaaS look).
   ============================================================ */

/* Legacy inline-style token aliases → ledger tokens */
:root{
  --bg:var(--paper);
  --bg-alt:var(--paper-deep);
  --card:transparent;
  --border:var(--rule-strong);
  --text:var(--ink);
  --muted:var(--ink-soft);
  --accent:var(--pine);
  --accent2:var(--signal-ink);
  --radius:0;
  --maxw:1140px;
  /* live-demo palette */
  --panel:transparent;
  --panel2:var(--paper-deep);
  --line:var(--rule-strong);
  --txt:var(--ink);
  --dim:var(--ink-soft);
  --acc:var(--pine);
  --ok:var(--pine);
  --warn:var(--color-accent-800);
  --err:var(--color-accent-800);
  --lesson:var(--color-accent-700);
}

.container{max-width:1140px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}

/* ---------- Topbar (mast-top vocabulary) ---------- */
header{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--color-bg) 92%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:2px solid var(--ink);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:58px}
/* .logo / .logo-mark deliberately NOT redefined here — see ledger.css. This
   sheet used to set the wordmark in mono beside the superseded outlined mark,
   which made the brand on every blog page differ from the rest of the site. */
nav ul{list-style:none;display:flex;gap:22px}
nav a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);text-decoration:none;
}
nav a:hover,nav a.active{color:var(--ink)}
nav a.active{box-shadow:0 2px 0 var(--signal)}
/* ui-auditor 9/4 (P1): mobile keeps the nav — wrapped row, not display:none. */
@media (max-width:900px){
  .nav{height:auto;min-height:58px;flex-wrap:wrap;padding:8px 0}
  nav ul{display:flex;flex-wrap:wrap;gap:10px 16px}
}

/* ---------- Page head: asymmetric editorial spread ---------- */
.page-head{padding:clamp(52px,7vw,104px) 0 clamp(36px,5vw,64px);text-align:left}
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-weight:400;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:clamp(18px,2.5vw,28px);
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule-strong)}
.page-head h1,h1{
  font-family:var(--serif);font-optical-sizing:auto;font-weight:640;
  font-variation-settings:"opsz" 144;
  font-size:clamp(2.3rem,5.4vw,4rem);
  line-height:1.05;letter-spacing:-.02em;color:var(--ink);
}
h1 .grad{background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:currentColor;color:var(--signal)}
.sub,.lede{color:var(--ink);font-size:1.12rem;max-width:62ch;margin:0}

/* ---------- Blog index: post list as ruled ledger entries ---------- */
section.posts{padding:clamp(40px,6vw,80px) 0 clamp(56px,7vw,104px)}
.post-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(28px,3.5vw,44px) clamp(24px,3vw,40px);
}
.post-list article{margin:0}
a.card,a.post-card,article.card{
  display:flex;flex-direction:column;gap:10px;height:100%;
  background:none;border:0;border-radius:0;
  border-top:2px solid var(--ink);
  padding:18px 0 8px;text-decoration:none;color:inherit;
}
a.card:hover,article.card:hover{
  color:inherit;
  box-shadow:0 8px 0 color-mix(in srgb,var(--color-text) 18%,transparent);
  transform:translateY(-2px);
}
.card h2{
  font-family:var(--serif);font-optical-sizing:auto;font-weight:640;
  font-variation-settings:"opsz" 60;
  font-size:clamp(1.25rem,2.2vw,1.55rem);
  line-height:1.16;letter-spacing:-.01em;margin:0;color:var(--ink);
}
.card p{color:var(--ink);font-size:.95rem;margin:0}
.tag,.post-tag{
  display:inline-block;font-family:var(--mono);font-size:.66rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--pine);
  border:1px solid var(--pine);border-radius:0;padding:3px 12px;
  align-self:flex-start;
}
.read-more{
  margin-top:auto;font-family:var(--mono);font-size:.74rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--signal-ink);
}
.meta{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);letter-spacing:.06em;margin:0 0 6px}

/* ---------- Long-form article typography ---------- */
main{padding-bottom:clamp(48px,6vw,88px)}
article.container{max-width:78ch;padding-top:clamp(40px,6vw,80px)}
article h1{max-width:22ch;margin:14px 0 18px}
article h2{
  font-family:var(--serif);font-optical-sizing:auto;font-weight:640;
  font-variation-settings:"opsz" 60;
  font-size:clamp(1.45rem,2.8vw,2rem);
  line-height:1.14;letter-spacing:-.01em;color:var(--ink);
  margin:clamp(34px,5vw,54px) 0 14px;padding-top:18px;border-top:2px solid var(--ink);
}
article h3{font-family:var(--grot);font-weight:600;font-size:1.08rem;margin:26px 0 10px;color:var(--ink)}
article p{color:var(--ink);font-size:.99rem;margin:0 0 14px}
article ul{margin:0 0 16px;padding-left:0;list-style:none}
article ul li{position:relative;padding-left:1.6ch;margin-bottom:8px;color:var(--ink);font-size:.97rem}
article ul li::before{content:"—";position:absolute;left:0;color:var(--signal-ink)}
article ol{margin:0 0 16px;padding-left:1.6ch;list-style:none;counter-reset:li}
article ol li{
  position:relative;padding-left:2.4ch;margin-bottom:8px;
  color:var(--ink);font-size:.97rem;counter-increment:li;
}
article ol li::before{
  content:counter(li,decimal-leading-zero) ".";
  position:absolute;left:0;font-family:var(--mono);font-size:.82em;
  color:var(--pine);top:.25em;
}
li strong,p strong,strong{color:var(--ink)}

/* Blockquotes → signal-ruled pull rows */
blockquote{
  background:var(--paper-deep);border-left:3px solid var(--signal);
  padding:16px 20px;margin:18px 0;color:var(--ink);
}
blockquote p{margin:0 0 8px}
blockquote p:last-child{margin:0}

/* Code → mono on paper-deep */
code{
  font-family:var(--mono);font-size:.86em;
  background:var(--paper-deep);border:1px solid var(--rule);
  padding:1px 5px;border-radius:0;color:var(--ink);
}
pre{
  background:var(--paper-deep);border:1px solid var(--rule-strong);
  padding:16px;overflow-x:auto;margin:0 0 16px;
}
pre code{background:none;border:0;padding:0}

/* Tables → ruled ledger tables */
table{width:100%;border-collapse:collapse;background:transparent;border:0;border-top:2px solid var(--ink);margin:0 0 18px}
th{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);background:transparent;text-align:left;
  padding:12px 18px 12px 0;border-bottom:1px solid var(--rule-strong);
}
td{padding:13px 18px 13px 0;border-bottom:1px solid var(--rule);color:var(--ink);font-size:.94rem;vertical-align:top}
td:first-child{color:var(--pine);font-weight:600}
td code,th code{background:none;border:0;padding:0}

/* Language switch in-page (non-masthead instances) */
.lang-switch{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  display:inline-flex;gap:10px;align-items:center;
}
.lang-switch a{text-decoration:none}
.lang-switch a:hover{color:var(--signal-ink)}

/* ---------- Live demo (noindex surface) ---------- */
/* ---------- Agent loop demo (/demo/) ----------
   The one page on this sheet that is an app view rather than an article, so it
   takes the container gutters and a top offset under the sticky topbar instead
   of article.container's prose measure. */
.demo-page{padding-top:clamp(26px,4vw,44px)}
.demo-head{margin-bottom:clamp(20px,3vw,30px)}
.demo-head h1{margin:0 0 10px}
.demo-note{
  margin:clamp(26px,4vw,42px) 0 0;padding-top:16px;
  border-top:1px solid var(--color-divider);
  font-family:var(--mono);font-size:.74rem;line-height:1.7;
  letter-spacing:.02em;color:var(--ink-soft);max-width:78ch;
}

.controls{margin:16px 0;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
button{
  font-family:var(--grot);font-weight:600;font-size:.9rem;
  background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);border-radius:0;
  padding:10px 18px;cursor:pointer;
}
button:hover:not(:disabled){box-shadow:0 6px 0 color-mix(in srgb,var(--color-text) 25%,transparent);transform:translateY(-1px)}
button:disabled{opacity:.35;cursor:not-allowed}
button.ghost{background:transparent;border-width:1px;border-color:var(--rule-strong);color:var(--ink-soft)}
select{
  font-family:var(--grot);font-size:.92rem;background:color-mix(in srgb,var(--color-bg) 55%,transparent);
  color:var(--ink);border:1px solid var(--rule-strong);border-radius:0;padding:10px 14px;
  -webkit-appearance:none;appearance:none;
}
select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.badge{
  display:inline-block;font-family:var(--mono);font-size:.62rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;border-radius:0;padding:2px 10px;
  color:var(--signal-ink);border:1px dashed var(--signal-ink);background:none;vertical-align:middle;
}
.grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(18px,3vw,32px);margin-top:18px}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
#loopbar{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.phase{
  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);
  border:1px solid var(--rule-strong);padding:5px 12px;
}
.phase.active{color:var(--color-bg);background:var(--pine);border-color:var(--pine)}
.phase.done{color:var(--pine);border-color:var(--pine)}
#transcript{
  background:var(--paper-deep);border:1px solid var(--rule-strong);
  padding:18px;min-height:320px;max-height:520px;overflow:auto;
}
.msg{padding:10px 0;border-bottom:1px solid var(--rule);font-size:.93rem;line-height:1.65;color:var(--ink)}
.msg .who{
  display:block;font-family:var(--mono);font-size:.62rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px;color:var(--ink-soft);
}
.msg.customer .who{color:var(--ink)}
.msg.agent .who{color:var(--pine)}
.msg.system .who{color:var(--signal-ink)}
.thinking{color:var(--ink-soft);font-style:italic}
#lessons{
  background:transparent;border:2px solid var(--ink);padding:16px;margin-top:18px;
}
#lessons ul{list-style:none;margin:0;padding:0}
#lessons li{
  position:relative;padding-left:1.6ch;margin-bottom:8px;
  font-size:.88rem;color:var(--ink);
}
#lessons li::before{content:"—";position:absolute;left:0;color:var(--lesson)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px;margin-top:18px}
.stat{border-top:2px solid var(--ink);padding:10px 0 2px}
.stat b{
  display:block;font-family:var(--serif);font-optical-sizing:auto;font-weight:640;
  font-variation-settings:"opsz" 144;font-size:1.6rem;color:var(--ink);
}
.stat span,.stat .label{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- Footer as closing rule strip ---------- */
footer{
  border-top:3px solid var(--ink);background:var(--paper-deep);
  padding:26px 0;color:var(--ink-soft);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;
}
footer .container{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}