/* Explanatory figures for the four September Claude articles. */
.ce-figure {
  --ce-paper:#f9f5ed; --ce-card:#fffdf8; --ce-ink:#20243d;
  --ce-muted:#55596c; --ce-line:#d9d4e3; --ce-purple:#61428b;
  --ce-tint:#eee7f5; --ce-green:#246248; --ce-red:#963e3a;
  color:var(--ce-ink); margin:34px 0 40px; font-family:inherit;
  font-size:15px; line-height:1.5; letter-spacing:0; overflow-wrap:anywhere;
}
.ce-figure * { box-sizing:border-box; }
.ce-panel { padding:28px; background:var(--ce-paper); border:1px solid var(--ce-line); border-radius:14px; }
.ce-figure .ce-eyebrow { display:block; font-size:11px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:var(--ce-purple); margin:0 0 9px; }
.ce-figure .ce-title { display:block; font-size:clamp(21px,3vw,27px); font-weight:650; letter-spacing:-.025em; line-height:1.2; margin:0 0 23px; color:var(--ce-ink); }
.ce-figure .ce-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ce-figure .ce-card { min-width:0; padding:19px; border:1px solid var(--ce-line); border-radius:8px; background:var(--ce-card); }
.ce-figure .ce-card strong, .ce-figure .ce-step strong { display:block; font-size:16px; font-weight:700; margin-bottom:6px; color:var(--ce-ink); }
.ce-figure p { margin:0; font-size:15px; line-height:1.55; color:var(--ce-muted); }
.ce-figure code { padding:1px 4px; background:var(--ce-tint); color:var(--ce-purple); font-size:13px; white-space:normal; border-radius:3px; }
.ce-figure .ce-note { margin:19px 0 0; padding:13px 0 0; border-top:1px solid var(--ce-line); font-size:14px; line-height:1.55; color:var(--ce-muted); }
.ce-figure figcaption { margin:12px 2px 0; color:var(--text-2,var(--ce-muted)); font-size:13px; line-height:1.6; }
.ce-figure .ce-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:0; margin:0; list-style:none; gap:25px; }
.ce-figure .ce-step { position:relative; padding:17px; margin:0; border:1px solid var(--ce-line); border-radius:8px; background:var(--ce-card); min-width:0; }
.ce-figure .ce-step + .ce-step::before { content:'→'; position:absolute; left:-22px; top:22px; color:var(--ce-purple); font-size:18px; }
.ce-figure .ce-number { display:block; font-size:12px; color:var(--ce-purple); font-weight:700; letter-spacing:.07em; margin-bottom:8px; }
.ce-figure .ce-accent { background:var(--ce-tint); border-color:#b4a0cc; }
.ce-figure .ce-label { display:block; font-size:12px; font-weight:650; color:var(--ce-purple); margin-bottom:8px; }
.ce-figure .ce-tree { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; padding:17px 0 0 24px; margin-left:18px; border-left:2px solid #b4a0cc; }
.ce-figure .ce-tree > .ce-card { position:relative; }
.ce-figure .ce-tree > .ce-card::before { content:''; position:absolute; width:12px; height:2px; background:#b4a0cc; left:-13px; top:27px; }
.ce-figure .ce-full { grid-column:1 / -1; }
.ce-figure .ce-connector { padding:9px 0; text-align:center; color:var(--ce-purple); font-size:13px; font-weight:600; }
.ce-figure .ce-decisions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.ce-figure .ce-decisions .ce-card { padding:16px; }
.ce-figure .ce-deny strong { color:var(--ce-red); }
.ce-figure .ce-allow strong { color:var(--ce-green); }
.ce-figure .ce-statuses { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ce-figure .ce-result { display:flex; gap:12px; padding:15px; background:var(--ce-card); border:1px solid var(--ce-line); border-radius:8px; align-items:flex-start; }
.ce-figure .ce-result strong { display:block; margin:0 0 5px; font-size:14px; }
.ce-figure .ce-dot { flex:0 0 9px; height:9px; border-radius:50%; background:var(--ce-purple); margin-top:7px; }
.ce-figure .ce-result:first-child .ce-dot { background:var(--ce-green); }
.ce-figure .ce-ledger { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ce-figure .ce-ledger-row { padding:12px 14px; border:1px solid var(--ce-line); border-radius:6px; background:var(--ce-card); }
.ce-figure .ce-ledger-row span { display:block; font-size:13px; color:var(--ce-muted); margin-top:5px; }
.ce-figure .ce-review { list-style:none; padding:0; margin:0; counter-reset:review; }
.ce-figure .ce-review li { position:relative; padding:0 0 19px 43px; margin:0 0 0 13px; border-left:1px solid #b4a0cc; counter-increment:review; }
.ce-figure .ce-review li:last-child { padding-bottom:0; border-left-color:transparent; }
.ce-figure .ce-review li::before { content:counter(review); position:absolute; left:-14px; top:0; width:27px; height:27px; border-radius:50%; background:var(--ce-purple); color:white; text-align:center; font-size:13px; font-weight:700; line-height:27px; }
.ce-figure .ce-review strong { display:block; font-size:16px; margin-bottom:5px; }
.ce-hero .ce-panel { border-top:4px solid var(--ce-purple); }
[data-theme='dark'] .ce-figure { --ce-paper:#191923; --ce-card:#22222f; --ce-ink:#f2eef7; --ce-muted:#c0bdcd; --ce-line:#484255; --ce-purple:#cfb6f3; --ce-tint:#342940; --ce-green:#9bd3b9; --ce-red:#edb0a8; }
[data-theme='dark'] .ce-figure .ce-review li::before { background:#cfb6f3; color:#20243d; }
@media(max-width:620px) {
  .ce-figure .ce-panel { padding:20px 17px; }
  .ce-figure .ce-grid,.ce-figure .ce-tree,.ce-figure .ce-decisions,.ce-figure .ce-statuses { grid-template-columns:1fr; }
  .ce-figure .ce-flow { grid-template-columns:1fr; gap:27px; }
  .ce-figure .ce-step + .ce-step::before { content:'↓'; left:19px; top:-27px; }
  .ce-figure .ce-title { font-size:23px; }
  .ce-figure .ce-tree { margin-left:10px; padding-left:17px; }
  .ce-figure .ce-card { padding:16px; }
  .ce-figure .ce-ledger { gap:8px; }
  .ce-figure .ce-ledger-row { padding:11px 9px; }
}
@media print { .ce-figure { break-inside:avoid; } .ce-panel { background:white; } }
