/* ==========================================================================
   ladder.css — "Ladder cards": an interactive left-nav + right-stage explainer.
   A vertical ladder of selectable rows (.cmt-nav > .cmt-row) paired with one
   tinted stage (.cmt-panel) that swaps a floating mini-UI scene (.cmt-scene)
   to match the selection. Pairs with ladder.js (wires every .cmt on the page).
   Depends on tokens.css for --accent / --surface / --brown* / fonts.
   ========================================================================== */

/* layout */
.cmt { display:grid; grid-template-columns:minmax(320px,430px) 1fr; gap:30px; max-width:1100px; margin:52px auto 0; align-items:stretch; }
.cmt-nav { display:flex; flex-direction:column; gap:6px; }
.cmt-row { display:flex; align-items:center; gap:16px; width:100%; text-align:left; background:transparent; border:1px solid transparent; border-radius:16px; padding:15px 14px; cursor:pointer; transition:background .16s ease, box-shadow .2s ease, border-color .16s ease; font-family:var(--sans); }
.cmt-row:hover { background:rgba(36,30,22,0.045); }
.cmt-ic { flex:0 0 auto; width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--surface-2); color:var(--accent); font-size:23px; transition:background .16s ease; }
.cmt-lab { flex:1 1 auto; font-size:17px; font-weight:600; color:var(--brown); letter-spacing:-0.005em; }
.cmt-go { flex:0 0 auto; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; color:var(--brown-3); font-size:18px; opacity:0; transform:translateX(-4px); transition:opacity .16s ease, transform .16s ease; }
.cmt-row.is-active { background:#fff; border-color:var(--line); box-shadow:0 20px 50px -34px rgba(8,40,42,0.5); }
.cmt-row.is-active .cmt-ic { background:rgba(23,95,100,0.12); }
.cmt-row.is-active .cmt-go { opacity:1; transform:none; background:var(--surface-2); }

/* stage */
.cmt-stage { position:relative; }
.cmt-panel { position:relative; height:100%; min-height:430px; border-radius:22px; overflow:hidden; background:linear-gradient(160deg,#d4e4e2,#bcd6d3); display:flex; flex-direction:column; padding:34px; box-sizing:border-box; }
/* modifier: light-yellow stage — use to distinguish a second ladder card on the same page */
.cmt--yellow .cmt-panel { background:linear-gradient(160deg,#f7f0d6,#efe2b6); }
.cmt-scene { display:none; flex-direction:column; height:100%; }
.cmt-scene.is-active { display:flex; animation:cmtFade .28s ease; }
@media (prefers-reduced-motion: no-preference){ @keyframes cmtFade { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} } }
.cmt-art { flex:1 1 auto; display:grid; place-items:center; }
.cmt-cap { flex:0 0 auto; padding-top:24px; }
.cmt-cap h3 { font-family:var(--serif); font-size:25px; font-weight:600; margin:0 0 8px; color:var(--brown); letter-spacing:-0.01em; }
.cmt-cap p { font-size:16px; line-height:1.55; color:var(--brown-3); margin:0; max-width:48ch; text-wrap:pretty; }

/* mini-UI primitives (building blocks for the scenes) */
.ui-card { width:min(88%,360px); background:#fff; border-radius:16px; padding:20px 20px 22px; box-shadow:0 24px 50px -28px rgba(20,40,38,0.55); box-sizing:border-box; }
.ui-card.center { text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; padding:30px 24px; }
.ui-ic { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:rgba(23,95,100,0.12); color:var(--accent); font-size:20px; }
.ui-ic.lg { width:58px; height:58px; font-size:28px; border-radius:15px; }
.ui-row-top { display:flex; align-items:center; gap:11px; margin-bottom:14px; font-weight:600; color:var(--brown); font-size:15px; }
.ui-row-top .ui-ic { width:38px; height:38px; font-size:18px; }
.ui-pill { font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; background:var(--surface-2); color:var(--brown-3); letter-spacing:0.02em; }
.ui-row-top .ui-pill { margin-left:auto; }
.ui-pill.on { background:rgba(23,95,100,0.12); color:var(--accent); }
.ui-line { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--brown-3); padding:11px 0; border-top:1px solid var(--line); }
.ui-line i { font-size:17px; color:var(--brown-4); }
.ui-line b { margin-left:auto; font-weight:700; font-size:12.5px; }
.ui-line b.off { color:var(--brown-4); }
.ui-line b.on2 { color:var(--accent); }
.ui-lab { font-size:11px; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; color:var(--brown-4); margin-bottom:14px; }
.ui-person { display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line); }
.ui-person:first-of-type{ border-top:0; }
.ui-av { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-size:14px; flex:0 0 auto; }
.ui-av.g{ background:var(--accent);} .ui-av.b{ background:var(--gold);}
.ui-pname { display:flex; flex-direction:column; font-size:14px; font-weight:600; color:var(--brown); }
.ui-pname small{ font-weight:500; font-size:12px; color:var(--brown-4);}
.ui-remove { margin-left:auto; font-size:12.5px; font-weight:600; color:var(--accent); }
.ui-h { font-family:var(--serif); font-size:22px; font-weight:600; color:var(--brown); }
.ui-code { display:flex; gap:8px; }
.ui-code i { width:34px; height:44px; border-radius:9px; background:var(--surface-2); display:grid; place-items:center; font-style:normal; font-family:var(--mono); font-size:19px; font-weight:600; color:var(--brown); }
.ui-sub { font-size:13.5px; color:var(--brown-4); line-height:1.4; }
.ui-line2 { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-top:1px solid var(--line); font-size:14px; font-weight:600; color:var(--brown); }
.ui-line2:first-of-type{ border-top:0; }
.ui-chips { display:flex; flex-wrap:wrap; gap:10px; }
.ui-chip { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--brown-2); background:var(--surface-2); border-radius:10px; padding:9px 13px; }
.ui-chip i { color:var(--accent); font-size:16px; }

@media (max-width:860px){ .cmt{ grid-template-columns:1fr; } .cmt-go{ display:none;} .cmt-panel{ min-height:360px; } }