/* BRACAI brand tokens, shared by the deck and the builder. */
:root{
  --ground:#FFFFFF; --raised:#FFFFFF; --surface:#E8EEF0;
  --ink:#2D3945; --ink-muted:#5F6E7C; --ink-faint:#8A98A4;
  --teal:#0097B2; --teal-cta:#007A91; --teal-wash:#E4F2F5; --on-cta:#FFFFFF;
  --line-soft:#E3EAEE; --line:#D8E1E6;
  --add:#0F7B5A; --add-wash:#E3F3ED;
  --del:#A33A2A; --del-wash:#F8E9E6;
  --shadow:0 1px 2px rgba(45,57,69,.05), 0 10px 30px -12px rgba(45,57,69,.18);
  --focus:#0097B2;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#1A222A; --raised:#232E38; --surface:#2B3742;
    --ink:#EDF3F6; --ink-muted:#A6B4BF; --ink-faint:#7F8D99;
    --teal:#43BBD2; --teal-cta:#43BBD2; --teal-wash:#22323B; --on-cta:#12191F;
    --line-soft:#2F3C47; --line:#3A4956;
    --add:#5FD3A6; --add-wash:#1E3830;
    --del:#F09A8A; --del-wash:#3A2622;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 34px -14px rgba(0,0,0,.6);
    --focus:#43BBD2;
  }
}
:root[data-theme="dark"]{
  --ground:#1A222A; --raised:#232E38; --surface:#2B3742;
  --ink:#EDF3F6; --ink-muted:#A6B4BF; --ink-faint:#7F8D99;
  --teal:#43BBD2; --teal-cta:#43BBD2; --teal-wash:#22323B; --on-cta:#12191F;
  --line-soft:#2F3C47; --line:#3A4956;
  --add:#5FD3A6; --add-wash:#1E3830;
  --del:#F09A8A; --del-wash:#3A2622;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 34px -14px rgba(0,0,0,.6);
  --focus:#43BBD2;
}

*{box-sizing:border-box;}
body{
  background:var(--ground); color:var(--ink);
  font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  margin:0; padding:0 24px 72px;
}
.wrap{max-width:820px;margin:0 auto;}

.brandbar{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:26px 0 18px;
  font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--ink);
}
.brandbar em{
  font-style:normal; font-weight:400; letter-spacing:.06em;
  color:var(--ink-faint); text-transform:none; font-size:13px;
}

.modules{display:flex;flex-wrap:wrap;gap:26px;border-bottom:1px solid var(--line-soft);}
.mod{
  appearance:none; background:none; border:0;
  border-bottom:2px solid transparent; margin-bottom:-1px; padding:0 0 12px;
  font-family:inherit; font-size:13px; font-weight:700;
  color:var(--ink-faint); cursor:pointer; transition:color .15s, border-color .15s;
}
.mod:hover{color:var(--teal);}
.mod[aria-current="true"]{color:var(--ink);border-bottom-color:var(--teal);}

.steps-nav{display:flex;flex-wrap:wrap;gap:8px;padding:18px 0 0;}
.pill{
  appearance:none; border:1px solid var(--line); background:transparent;
  color:var(--ink-muted); font-family:inherit; font-size:12px; font-weight:700;
  letter-spacing:.04em; padding:6px 12px; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.pill:hover{border-color:var(--teal);color:var(--teal);}
.pill[aria-current="true"]{background:var(--teal-cta);border-color:var(--teal-cta);color:var(--on-cta);}

.card{
  background:var(--raised); border:1px solid var(--line-soft);
  box-shadow:var(--shadow); padding:36px 44px 26px; margin-top:26px;
}
.head{display:flex;flex-direction:column;gap:14px;padding-bottom:20px;}
.eyebrow{
  display:flex; align-items:center; gap:14px; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--teal);
}
.eyebrow .sep{width:22px;height:2px;background:var(--teal);display:block;flex:none;}
h1{
  font-size:33px; line-height:1.16; letter-spacing:-.015em; font-weight:700;
  margin:0; text-wrap:balance; max-width:22ch;
}

.attach{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:14px;
  padding:11px 14px; background:var(--teal-wash); border-left:3px solid var(--teal);
  word-break:break-word;
}
.attach .tag{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--teal); flex:none;
}
.attach a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
.attach a:hover{color:var(--teal);}

details.sec{border-top:1px solid var(--line-soft);}
details.sec > summary{
  display:flex; align-items:center; gap:16px; cursor:pointer;
  list-style:none; padding:14px 0; user-select:none;
}
details.sec > summary::-webkit-details-marker{display:none;}
.sum-label{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--ink-faint); transition:color .15s; flex:none;
}
details.sec[open] > summary .sum-label{color:var(--ink);}
details.sec > summary:hover .sum-label{color:var(--teal);}
.sum-rule{flex:1;height:1px;background:var(--line-soft);min-width:12px;}
.chev{
  flex:none; width:8px; height:8px;
  border-right:2px solid var(--teal); border-bottom:2px solid var(--teal);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s ease;
}
details.sec[open] > summary .chev{transform:rotate(-135deg) translate(-2px,-2px);}
.sec-body{padding:0 0 24px;}

.context{font-size:17px;color:var(--ink-muted);max-width:60ch;margin:0;}

ol.steps{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column;
  gap:10px; counter-reset:step; max-width:60ch;
}
ol.steps li{
  counter-increment:step; display:grid; grid-template-columns:24px 1fr;
  gap:12px; align-items:baseline;
}
ol.steps li::before{
  content:counter(step,decimal-leading-zero); color:var(--teal);
  font-weight:700; font-size:13px; font-variant-numeric:tabular-nums;
}

.copy{
  appearance:none; border:1px solid var(--teal-cta); background:var(--teal-cta);
  color:var(--on-cta); font-family:inherit; font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:7px 14px;
  cursor:pointer; flex:none; transition:opacity .15s;
}
.copy:hover{opacity:.86;}
.copy[data-state="done"]{background:transparent;color:var(--teal);}

pre.prompt{
  margin:0; background:var(--surface); border-left:3px solid var(--teal);
  padding:20px 22px;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;
  font-size:13.5px; line-height:1.65; color:var(--ink);
  white-space:pre-wrap; word-break:break-word; overflow-x:auto;
}

.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;}
.nav{
  appearance:none; background:transparent; border:1px solid var(--line);
  color:var(--ink); font-family:inherit; font-size:14px; font-weight:700;
  padding:11px 20px; cursor:pointer; transition:border-color .15s,color .15s;
}
.nav:hover:not(:disabled){border-color:var(--teal);color:var(--teal);}
.nav:disabled{opacity:.35;cursor:default;}
.count{font-size:13px;color:var(--ink-faint);letter-spacing:.1em;font-variant-numeric:tabular-nums;}

.msg{padding:40px 0;color:var(--ink-muted);font-size:16px;}

:focus-visible{outline:2px solid var(--focus);outline-offset:3px;}

@media (max-width:640px){
  body{padding:0 16px 56px;}
  .card{padding:26px 20px 18px;}
  h1{font-size:26px;}
  .modules{gap:18px;}
  .mod{font-size:12px;}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important;} }

/* Language switcher. Hidden unless more than one language has content. */
.brandbar{justify-content:space-between;}
.langs{display:flex;gap:6px;margin-left:auto;}
.langs[hidden]{display:none;}
.lang{
  appearance:none; border:1px solid var(--line); background:transparent;
  color:var(--ink-muted); font-family:inherit; font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:5px 10px;
  cursor:pointer; transition:border-color .15s,color .15s,background .15s;
}
.lang:hover{border-color:var(--teal);color:var(--teal);}
.lang[aria-current="true"]{background:var(--teal-cta);border-color:var(--teal-cta);color:var(--on-cta);}

/* Standing instruction closing the page, below the pager. */
.standing{
  display:flex; align-items:center; gap:10px;
  margin:26px 0 0; padding-top:18px;
  border-top:1px solid var(--line-soft);
  font-size:13px; color:var(--ink-muted);
}
.standing::before{
  content:""; flex:none; width:14px; height:2px; background:var(--teal);
}
.standing:empty{display:none;}