/* DevRails — epic page. Evolved type + density on the existing palette.
   Rail · tree · work canvas · storyline drawer. Light and dark. */

/* every light value is the system token from app/app.css — no new hexes */
.ep{
  --bg:var(--canvas); --surface:var(--paper); --recess:var(--paper-2); --raise:var(--paper-3);
  --line:var(--hair-2); --line-2:var(--hair-2); --line-3:var(--hair);
  --ink:#0B0B0C; --ink-2:var(--ink-soft); --ink-3:var(--muted); --ink-4:var(--muted-2);
  --green:var(--signal); --green-deep:var(--signal-deep); --green-text:var(--signal-text); --green-soft:var(--signal-soft);
  --amber:var(--warn); --amber-soft:color-mix(in srgb,var(--warn) 14%,var(--paper));
  --red:var(--err); --red-soft:color-mix(in srgb,var(--err) 12%,var(--paper));
  --blue:var(--info); --blue-soft:color-mix(in srgb,var(--info) 12%,var(--paper)); --violet:var(--sage);
  --rail:#0B0B0C; --rail-2:#161618; --rail-line:#252527; --rail-tx:#B9B5AC; --rail-tx-2:#87837A;
  --sans:'Geist',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --shadow:0 1px 2px rgba(18,18,15,.05);
}
/* the system documents no dark palette — this ramp is an invention, bound to the same local names */
.ep[data-theme="dark"]{
  --bg:#0E0E10; --surface:#161619; --recess:#1C1C20; --raise:#202024;
  --line:#28282C; --line-2:#38383E; --line-3:#4A4A51;
  --ink:#F3F0E8; --ink-2:#CFCBC1; --ink-3:#A6A196; --ink-4:#98938A;
  --green-text:#3FDD8C; --green-soft:#0F3323;
  --amber:#D9A441; --amber-soft:#33280F; --red:#E1705C; --red-soft:#331815;
  --blue:#8FB0CC; --blue-soft:#16232E; --violet:#8FA383;
  --rail:#08080A; --rail-2:#111113; --rail-line:#1F1F22;
  --shadow:0 1px 2px rgba(0,0,0,.35);
}

.ep,.ep *{ box-sizing:border-box; font-family:var(--sans); }
/* one type system for the whole page — tabular figures throughout, tracking tightens as size grows */
.ep{ font-feature-settings:"cv11" 1,"ss01" 1; font-variant-numeric:tabular-nums; letter-spacing:-.006em; }
.ep .h1{ font-size:24px; font-weight:600; letter-spacing:-.032em; line-height:1.18; color:var(--ink); }
.ep .h2{ font-size:18px; font-weight:600; letter-spacing:-.026em; line-height:1.28; color:var(--ink); }
.ep .h3{ font-size:16px; font-weight:600; letter-spacing:-.021em; line-height:1.3; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ep .h4{ font-size:15px; font-weight:600; letter-spacing:-.016em; line-height:1.35; color:var(--ink); }
.ep .lead{ font-size:17px; font-weight:500; letter-spacing:-.019em; line-height:1.46; color:var(--ink); text-wrap:pretty; }
.ep .prose{ font-size:14.5px; font-weight:400; letter-spacing:-.001em; line-height:1.62; color:var(--ink-2); max-width:72ch; text-wrap:pretty; }
.ep .sub{ font-size:13.5px; font-weight:400; line-height:1.5; color:var(--ink-3); }
.ep .sub2{ font-size:13.5px; font-weight:400; line-height:1.5; color:var(--ink-2); }
.ep .num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.ep{ width:100%; height:100%; display:grid; grid-template-columns:212px 316px 1fr auto; background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5; overflow:hidden; -webkit-font-smoothing:antialiased; }
.ep.no-tree{ grid-template-columns:216px 1fr auto; }
.ep .mono{ font-family:var(--mono); }
.ep b{ font-weight:600; }

/* type atoms */
.ep .k{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); }
.ep .meta{ font-size:12.5px; line-height:1.4; color:var(--ink-3); }
.ep .meta.num,.ep .meta .num{ font-family:var(--mono); font-size:11.5px; }
.ep .cap{ font-size:12.5px; font-weight:400; color:var(--ink-3); line-height:1.45; }
.ep .measure{ max-width:66ch; }

/* ── rail ───────────────────────────────────────────── */
.ep .rail{ background:var(--rail); display:flex; flex-direction:column; padding:13px 10px; gap:1px; overflow:hidden; }
.ep .rail-brand{ display:flex; align-items:center; gap:9px; padding:5px 8px 14px; }
.ep .rail-brand .word{ font-weight:600; font-size:16px; color:#F2EFE7; letter-spacing:-.02em; }
.ep .rail-brand .word i{ font-style:normal; color:#77726A; }
.ep .rail-ws{ display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:8px; background:var(--rail-2); border:1px solid var(--rail-line); margin-bottom:12px; }
.ep .rail-ws .mk{ width:24px; height:24px; border-radius:6px; background:var(--green-deep); color:#04170D; display:grid; place-items:center; font-family:var(--mono); font-size:12px; font-weight:600; flex:0 0 auto; }
.ep .rail-ws .nm{ font-size:14px; font-weight:600; color:#F2EFE7; letter-spacing:-.01em; }
.ep .rail-ws .sub{ font-family:var(--mono); font-size:10px; color:var(--rail-tx-2); letter-spacing:.05em; }
.ep .rail-k{ font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#6E6A62; padding:13px 9px 6px; }
.ep .rail-i{ display:flex; align-items:center; gap:10px; padding:6px 9px; border-radius:7px; color:var(--rail-tx); position:relative; }
.ep .rail-i .lbl{ font-size:14.5px; font-weight:500; letter-spacing:-.01em; }
.ep .rail-i .n{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--rail-tx-2); }
.ep .rail-i .n.hot{ color:#04170D; background:var(--green); border-radius:9px; padding:1px 6px; font-weight:600; }
.ep .rail-i.on{ background:#232320; color:#fff; }
.ep .rail-i.on::before{ content:""; position:absolute; left:-10px; top:6px; bottom:6px; width:3px; border-radius:0 3px 3px 0; background:var(--green); }
.ep .rail-i .gl{ width:15px; display:grid; place-items:center; opacity:.85; }
.ep .rail-i.on .gl{ color:var(--green); opacity:1; }
.ep .rail-sp{ flex:1; }
.ep .rail-collapse{ display:flex; align-items:center; gap:10px; padding:6px 9px; border-radius:7px; color:#87837A; }
.ep .rail-collapse .lbl{ font-size:14.5px; font-weight:500; letter-spacing:-.01em; }
.ep .rail-collapse .gl{ width:15px; display:grid; place-items:center; }
.ep .rail-u{ display:flex; align-items:center; gap:9px; padding:9px 8px 2px; border-top:1px solid var(--rail-line); margin-top:8px; }
.ep .rail-u .av{ width:24px; height:24px; border-radius:50%; background:#3A3A3E; color:#F2EFE7; display:grid; place-items:center; font-family:var(--mono); font-size:11px; font-weight:600; }
.ep .rail-u .un{ font-size:13px; color:var(--rail-tx); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ep .rail-u .ur{ font-family:var(--mono); font-size:10px; color:var(--rail-tx-2); }

/* ── tree column ────────────────────────────────────── */
.ep .tree{ background:var(--recess); border-right:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden; }
.ep .tree-h{ padding:14px 15px 12px; border-bottom:1px solid var(--line); }
.ep .tree-h .back{ display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-bottom:9px; }
.ep .tree-h .nm{ font-size:16px; font-weight:600; letter-spacing:-.021em; line-height:1.3; }
.ep .tree-h .sub{ display:flex; align-items:center; gap:7px; margin-top:6px; font-size:12.5px; color:var(--ink-3); }
.ep .tree-h .sub .mono{ font-family:var(--mono); font-size:11.5px; }
/* epic stage — groom · plan · build · validate · ship */
.ep .estage{ display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin-top:13px; }
.ep .es i{ display:block; height:3px; border-radius:2px; background:var(--line-2); }
.ep .es span{ display:block; font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-top:5px; }
.ep .es.done i{ background:var(--green-deep); }
.ep .es.done span{ color:var(--ink-3); }
.ep .es.now i{ background:var(--ink); }
.ep .es.now span{ color:var(--ink); }
.ep[data-theme="dark"] .es.now i{ background:var(--green); }
.ep .meter{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:12px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.ep .meter .mc{ background:var(--surface); padding:7px 9px; }
.ep .mk{ display:block; font-family:var(--mono); font-size:13.5px; font-weight:600; color:var(--ink); letter-spacing:-.015em; }
.ep .ml{ display:block; font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-4); margin-top:2px; }
.ep .trow.q{ min-height:26px; }
.ep .trow.q.sel .tt{ color:var(--ink); font-weight:500; }
.ep .qg{ width:9px; height:9px; border-radius:2px; flex:0 0 auto; border:1.5px solid var(--line-3); }
.ep .qg.done{ background:var(--green-deep); border-color:var(--green-deep); }
.ep .qg.you{ background:var(--green); border-color:var(--green); }
.ep .tree-filter{ display:flex; align-items:center; gap:5px; padding:9px 12px; border-bottom:1px solid var(--line); }
.ep .tf{ font-size:12.5px; font-weight:500; letter-spacing:-.005em; color:var(--ink-3); border:1px solid var(--line-2); background:transparent; border-radius:20px; padding:3px 10px; white-space:nowrap; }
.ep .tf.on{ color:var(--ink); border-color:var(--ink); background:var(--surface); }
.ep .tf.you{ color:var(--green-text); border-color:var(--green-deep); background:var(--green-soft); }
.ep .tree-body{ flex:1; overflow:hidden; padding:6px 6px 14px; }
.ep .tgrp{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); padding:16px 9px 6px; }
.ep .tgrp:first-child{ padding-top:8px; }

.ep .trow{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; padding:6px 8px; border-radius:7px; position:relative; min-height:32px; }
.ep .trow.l2{ padding-left:24px; } .ep .trow.l3{ padding-left:38px; }
.ep .trow.sel{ background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2); }
.ep .trow.you::after{ content:""; position:absolute; left:0; top:5px; bottom:5px; width:2px; border-radius:2px; background:var(--green); }
.ep .trow .tn{ min-width:0; }
.ep .trow .tt{ font-size:14px; font-weight:500; letter-spacing:-.008em; line-height:1.35; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ep .trow.sel .tt,.ep .trow.you .tt{ color:var(--ink); font-weight:600; }

/* areas — one row each; the questions themselves open in the canvas */
.ep .trow.area{ min-height:36px; }
.ep .trow.area .tt{ font-size:14px; font-weight:500; color:var(--ink-2); }
.ep .trow.area.sel .tt,.ep .trow.area.you .tt{ color:var(--ink); font-weight:600; }
.ep .qn{ font-family:var(--mono); font-size:11px; font-weight:600; color:var(--ink-4); white-space:nowrap; }
.ep .qn.you{ font-size:10.5px; letter-spacing:.02em; color:#04170D; background:var(--green); border-radius:10px; padding:2px 8px; }

/* documents — artifacts, no agent, no workflow */
.ep .trow.doc{ min-height:36px; }
.ep .trow.doc .tt{ font-weight:500; }
.ep .trow.doc .ts{ font-size:11.5px; }
.ep .dg{ display:grid; place-items:center; width:16px; height:16px; color:var(--ink-4); flex:0 0 auto; }
.ep .trow.doc.sel .dg,.ep .trow.doc.you .dg{ color:var(--ink-2); }
.ep .trow .ts{ font-size:12px; line-height:1.35; color:var(--ink-3); margin-top:2px; display:flex; align-items:center; gap:6px; min-width:0; }
.ep .trow .ts .tsx{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ep .trow .tr{ display:flex; align-items:center; gap:7px; flex:0 0 auto; }

/* state glyph */
.ep .g{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; border:1.5px solid var(--line-3); background:transparent; }
.ep .g.done{ background:var(--green-deep); border-color:var(--green-deep); }
.ep .g.now{ border-color:var(--ink); background:var(--ink); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 32%,transparent); }
.ep .g.you{ background:var(--green); border-color:var(--green); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 24%,transparent); }
.ep .g.fail{ background:var(--red); border-color:var(--red); }
.ep .g.hold{ border-style:dashed; }
.ep .g.sq{ border-radius:3px; }

/* micro workflow — one dot per step of THIS item's workflow */
.ep .mf{ display:flex; align-items:center; gap:2.5px; }
.ep .mf i{ width:4px; height:4px; border-radius:50%; background:var(--line-2); display:block; }
.ep .mf i.d{ background:var(--green-deep); }
.ep .mf em{ font-family:var(--mono); font-style:normal; font-size:9px; color:var(--ink-4); margin-left:1px; }
.ep .mf i.c{ background:var(--ink); width:5px; height:5px; }
.ep .mf i.f{ background:var(--red); width:5px; height:5px; }
.ep[data-theme="dark"] .mf i.c{ background:var(--ink-2); }

.ep .ag{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.02em; color:var(--ink-3); background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:1px 5px; white-space:nowrap; flex:0 0 auto; }
.ep .ag.code{ color:var(--blue); border-color:color-mix(in srgb,var(--blue) 34%,var(--line)); }
.ep .ag.docs{ color:var(--violet); border-color:color-mix(in srgb,var(--violet) 34%,var(--line)); }
.ep .ag.arch{ color:var(--green-text); border-color:color-mix(in srgb,var(--green-deep) 38%,var(--line)); background:var(--green-soft); }
.ep .ag.rsch{ color:var(--amber); border-color:color-mix(in srgb,var(--amber) 34%,var(--line)); }
.ep .ag.dsgn{ color:var(--violet); border-color:color-mix(in srgb,var(--violet) 40%,var(--line)); }
.ep[data-theme="dark"] .ag.dsgn{ color:#B49CDE; }
.ep .ag.you{ color:var(--ink); border-color:var(--line-3); }

.ep .tree-f{ border-top:1px solid var(--line); padding:10px 13px; display:flex; align-items:center; gap:8px; }

/* ── work canvas ────────────────────────────────────── */
.ep .work{ display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.ep .work-top{ display:flex; align-items:center; gap:12px; padding:0 24px; height:50px; border-bottom:1px solid var(--line); flex:0 0 auto; }
.ep .crumb{ display:flex; align-items:center; gap:9px; font-size:13px; letter-spacing:-.005em; color:var(--ink-3); }
.ep .crumb b{ color:var(--ink-2); font-weight:500; }
.ep .crumb b:last-child{ color:var(--ink); font-weight:600; }
.ep .work-top .sp{ flex:1; }
.ep .work-body{ flex:1; overflow:hidden; padding:20px 24px 28px; }

/* attention band — the one thing that answers "what now" */
.ep .att{ display:flex; align-items:center; flex-wrap:wrap; gap:15px; row-gap:12px; padding:13px 16px 13px 18px; border-radius:11px; background:var(--ink); color:var(--bg); margin-bottom:20px; position:relative; overflow:hidden; }
.ep[data-theme="dark"] .att{ background:var(--raise); box-shadow:inset 0 0 0 1px var(--line-2); }
.ep .att::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--green); }
.ep .att .ic{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto; background:var(--green); color:#04170D; }
.ep .att .ic.calm{ background:rgba(255,255,255,.09); color:var(--green); }
.ep .att .m{ flex:1 1 300px; min-width:300px; }
.ep .att .k2{ font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--green); margin-bottom:3px; }
.ep .att .t{ font-size:17px; font-weight:600; letter-spacing:-.022em; color:#fff; line-height:1.3; text-wrap:pretty; }
.ep[data-theme="dark"] .att .t{ color:var(--ink); }
.ep .att .s{ font-size:13px; line-height:1.45; color:rgba(255,255,255,.62); margin-top:4px; }
.ep[data-theme="dark"] .att .s{ color:var(--ink-3); }
.ep .att .a{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; flex:0 0 auto; margin-left:auto; }

/* per-item workflow strip — only this item's steps, done ones collapsed */
.ep .wf{ display:flex; align-items:stretch; flex-wrap:wrap; gap:6px; row-gap:7px; margin-bottom:18px; }
.ep .st{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:9px; border:1px solid var(--line); background:var(--surface); min-width:0; }
.ep .st .sn{ font-size:13px; font-weight:500; letter-spacing:-.012em; color:var(--ink-2); white-space:nowrap; }
.ep .st .sw{ font-size:11.5px; line-height:1.3; color:var(--ink-4); margin-top:2px; white-space:nowrap; }
.ep .st.past{ background:var(--surface); border-color:var(--line); }
.ep .st.past .sn{ color:var(--ink); }
.ep .st.past .sw{ color:var(--green-text); }
.ep .st.past .vd{ width:15px; height:15px; margin:0; }
.ep .st.past.fold{ background:var(--recess); }
.ep .st.past.fold .sw{ color:var(--ink-4); }
.ep .st.ahead{ background:transparent; border-style:dashed; border-color:var(--line-2); }
.ep .st.ahead .sn{ color:var(--ink-4); font-weight:500; }
.ep .st.ahead .sw{ color:var(--ink-4); }
.ep .st.cur{ background:var(--ink); border-color:var(--ink); flex:0 1 auto; }
.ep[data-theme="dark"] .st.cur{ background:var(--raise); border-color:var(--line-3); }
.ep .st.cur .sn{ color:#fff; } .ep[data-theme="dark"] .st.cur .sn{ color:var(--ink); }
.ep .st.cur .sw{ color:var(--green); }
.ep .st.cur.bad{ background:var(--red); border-color:var(--red); }
.ep .st.rest{ border-style:dashed; border-color:var(--line); color:var(--ink-4); align-items:center; background:transparent; }
.ep .st.rest .sn{ color:var(--ink-4); font-weight:500; font-size:12.5px; }
.ep .wf .sep{ align-self:center; color:var(--line-3); font-size:11px; }
.ep .st .tick{ display:flex; gap:2px; } .ep .st .tick i{ width:4px; height:4px; border-radius:50%; background:var(--green-deep); display:block; }

/* section heads */
.ep .sec{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; row-gap:8px; margin:26px 0 11px; }
.ep .sec:first-child{ margin-top:0; }
.ep .sec h3{ font-size:15px; font-weight:600; letter-spacing:-.016em; margin:0; flex:0 0 auto; white-space:nowrap; }
.ep .sec .c{ font-size:12.5px; color:var(--ink-3); flex:0 0 auto; white-space:nowrap; }
.ep .sec .sp{ flex:1; }

/* ── cards ──────────────────────────────────────────── */
.ep .card{ background:var(--surface); border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow); }
.ep .card + .card{ margin-top:10px; }
.ep .pad{ padding:15px 17px; }

/* decision card — real questions from the architect */
.ep .dq{ background:var(--surface); border:1px solid var(--line-2); border-radius:12px; padding:16px 18px 14px; box-shadow:var(--shadow); position:relative; }
.ep .dq + .dq{ margin-top:11px; }
.ep .dq::before{ content:""; position:absolute; left:-1px; top:14px; bottom:14px; width:2px; border-radius:2px; background:var(--green); }
.ep .dq .qh{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.ep .dq .q{ font-size:18px; font-weight:600; letter-spacing:-.026em; line-height:1.28; max-width:52ch; text-wrap:pretty; }
.ep .dq .why{ font-size:14px; color:var(--ink-3); line-height:1.55; margin-top:7px; max-width:62ch; }
.ep .dq .opts{ display:flex; flex-direction:column; gap:7px; margin:13px 0 0; }
.ep .opt{ display:flex; align-items:flex-start; gap:10px; padding:9px 13px; border:1px solid var(--line); border-radius:9px; background:var(--bg); }
.ep .opt .rd{ width:15px; height:15px; border-radius:50%; border:1.5px solid var(--line-3); flex:0 0 auto; margin-top:1px; }
.ep .opt.rec{ border-color:color-mix(in srgb,var(--green-deep) 40%,var(--line)); background:var(--green-soft); }
.ep .opt.rec .rd{ border-color:var(--green-deep); background:radial-gradient(circle,var(--green-deep) 0 4px,transparent 5px); }
.ep .opt .ot{ font-size:14.5px; font-weight:500; color:var(--ink); line-height:1.4; letter-spacing:-.01em; }
.ep .opt .oc{ font-size:13px; font-weight:400; color:var(--ink-3); margin-top:3px; line-height:1.5; }
.ep .opt .tag{ margin-left:auto; flex:0 0 auto; }
.ep .dq .foot{ display:flex; align-items:center; gap:9px; margin-top:13px; padding-top:12px; border-top:1px solid var(--line); }
.ep .dq .foot .sp{ flex:1; }

/* bulk acknowledgement — 50 identical failures become one line */
.ep .bulk{ border:1px solid var(--line); border-radius:11px; background:var(--recess); overflow:hidden; }
.ep .bulk + .bulk{ margin-top:9px; }
.ep .bulk-h{ display:flex; align-items:center; gap:12px; padding:12px 15px; }
.ep .bulk-h .chev{ color:var(--ink-4); font-size:11px; width:10px; }
.ep .bulk-h .bt{ font-size:14.5px; font-weight:500; color:var(--ink); letter-spacing:-.012em; line-height:1.4; }
.ep .bulk-h .bs{ font-size:12.5px; line-height:1.4; color:var(--ink-3); margin-top:3px; }
.ep .bulk-h .sp{ flex:1; }
.ep .bulk-b{ border-top:1px solid var(--line); background:var(--surface); padding:4px 0; }
.ep .brow{ display:grid; grid-template-columns:16px 1fr auto auto; gap:11px; align-items:center; padding:7px 15px; }
.ep .brow + .brow{ border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent); }
.ep .brow .cb{ width:14px; height:14px; border-radius:4px; border:1.5px solid var(--line-3); }
.ep .brow .cb.on{ background:var(--green-deep); border-color:var(--green-deep); display:grid; place-items:center; color:#fff; font-size:9px; }
.ep .brow .bn{ font-family:var(--mono); font-size:12px; color:var(--ink-2); }
.ep .brow .bw{ font-family:var(--mono); font-size:11px; color:var(--ink-4); }
.ep .bulk-f{ padding:10px 15px; border-top:1px solid var(--line); display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-3); }

/* plan table */
.ep .tbl{ border:1px solid var(--line); border-radius:11px; overflow:hidden; background:var(--surface); }
.ep .thd,.ep .tr{ display:grid; grid-template-columns:minmax(0,1fr) 148px 122px 68px 62px 52px; gap:14px; align-items:center; padding:0 15px; }
.ep .thd{ height:34px; background:var(--recess); border-bottom:1px solid var(--line); }
.ep .thd span{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); }
.ep .tr{ min-height:46px; border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent); }
.ep .tr:first-of-type{ border-top:0; }
.ep .tr.child{ background:color-mix(in srgb,var(--blue) 6%,var(--surface)); }
.ep .tr .nm{ font-size:14px; font-weight:500; color:var(--ink); letter-spacing:-.012em; display:flex; align-items:center; gap:9px; min-width:0; }
.ep .tr .nm .t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ep .tr .v{ font-family:var(--mono); font-size:12px; color:var(--ink-2); }
.ep .tr .v.dim{ color:var(--ink-3); }
.ep .tfoot{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; padding:13px 16px; border-top:1px solid var(--line-2); background:var(--recess); }
.ep .tfoot .tot{ font-size:13.5px; color:var(--ink-3); white-space:nowrap; }
.ep .tfoot .tot b{ font-family:var(--mono); font-size:14.5px; color:var(--ink); font-weight:600; letter-spacing:-.01em; }
.ep .tfoot .sp{ flex:1; }

/* live agent engagement rows */
.ep .actrow{ display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:13px; }
.ep .actrow .meta{ margin-left:auto; }
.ep .eng{ display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:center; padding:12px 15px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.ep .eng + .eng{ margin-top:8px; }
.ep .eng.bad{ border-color:color-mix(in srgb,var(--red) 42%,var(--line)); background:color-mix(in srgb,var(--red) 5%,var(--surface)); }
.ep .eng .et{ font-size:14.5px; font-weight:500; letter-spacing:-.012em; }
.ep .eng .em{ display:flex; align-items:center; gap:8px; margin-top:4px; font-size:12.5px; color:var(--ink-3); }
.ep .eng .bar{ height:3px; border-radius:2px; background:var(--line); overflow:hidden; margin-top:8px; max-width:340px; }
.ep .eng .bar i{ display:block; height:100%; background:var(--green-deep); }
.ep .eng .rt{ text-align:right; font-family:var(--mono); font-size:11.5px; color:var(--ink-4); white-space:nowrap; }

/* failure block */
.ep .fail-c{ border:1px solid color-mix(in srgb,var(--red) 40%,var(--line)); border-radius:11px; background:var(--surface); overflow:hidden; }
.ep .fail-h{ display:flex; align-items:center; gap:11px; padding:13px 16px; background:var(--red-soft); }
.ep .fail-h .ft{ font-size:15px; font-weight:600; letter-spacing:-.016em; color:var(--ink); }
.ep .fail-h .fs{ font-size:12.5px; color:var(--ink-3); margin-top:3px; }
.ep .fail-b{ padding:13px 16px; }
.ep .log{ font-family:var(--mono); font-size:11.5px; line-height:1.75; letter-spacing:-.01em; color:var(--ink-3); background:var(--recess); border:1px solid var(--line); border-radius:8px; padding:11px 13px; white-space:pre-wrap; }
.ep .log b{ color:var(--red); font-weight:500; }

/* document reading */
.ep .doc{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:26px 32px 30px; box-shadow:var(--shadow); }
.ep .doc h1{ font-size:24px; font-weight:600; letter-spacing:-.032em; line-height:1.18; margin:0 0 6px; }
.ep .doc .dm{ font-size:12.5px; color:var(--ink-3); margin-bottom:22px; display:flex; gap:10px; align-items:center; }
.ep .doc h2{ font-size:13px; font-weight:600; letter-spacing:.02em; margin:24px 0 9px; color:var(--ink); }
.ep .doc p{ font-size:14.5px; font-weight:400; letter-spacing:-.001em; line-height:1.62; color:var(--ink-2); margin:0 0 12px; max-width:64ch; text-wrap:pretty; }
.ep .doc p.hl{ background:color-mix(in srgb,var(--green) 15%,transparent); border-radius:3px; box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 15%,transparent); }
.ep .doc p.was{ color:var(--ink-4); text-decoration:line-through; text-decoration-color:var(--line-3); }
.ep .doc ul{ margin:0 0 11px; padding-left:19px; } .ep .doc li{ font-size:14.5px; font-weight:400; line-height:1.62; color:var(--ink-2); margin-bottom:6px; max-width:62ch; }
.ep .chg{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--green-text); background:var(--green-soft); border-radius:4px; padding:2px 7px; }

/* thread */
.ep .thread{ background:var(--recess); border:1px solid var(--line); border-radius:11px; overflow:hidden; }
.ep .th-h{ padding:11px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:9px; }
.ep .th-h .tq{ font-size:13px; color:var(--ink-3); font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ep .th-b{ padding:4px 14px 12px; }
.ep .cm{ padding:11px 0; border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent); }
.ep .cm:first-child{ border-top:0; }
.ep .cm .cw{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.ep .cm .cn{ font-size:13px; font-weight:600; }
.ep .cm .cr{ font-size:12px; color:var(--ink-4); }
.ep .cm .ct{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-4); }
.ep .cm .cb{ font-size:13.5px; font-weight:400; line-height:1.58; color:var(--ink-2); text-wrap:pretty; }
.ep .cm.out{ border-left:2px solid var(--green-deep); padding-left:11px; margin-left:-1px; background:color-mix(in srgb,var(--green-soft) 55%,transparent); border-radius:0 8px 8px 0; }
.ep .th-c{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-top:1px solid var(--line); background:var(--surface); }
.ep .inp{ flex:1; border:1px solid var(--line-2); border-radius:8px; background:var(--bg); padding:8px 11px; font-size:13px; color:var(--ink-4); }

/* ── storyline drawer ───────────────────────────────── */
.ep .story{ border-left:1px solid var(--line); background:var(--recess); display:flex; flex-direction:column; overflow:hidden; }
.ep .story.shut{ width:50px; align-items:center; padding:14px 0; gap:12px; }
.ep .story.shut .vlabel{ writing-mode:vertical-rl; font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.ep .story.shut .vc{ font-family:var(--mono); font-size:10.5px; color:var(--ink-4); writing-mode:vertical-rl; }
.ep .story.open{ width:300px; }
.ep.drawer{ grid-template-columns:212px 316px minmax(0,1fr) auto; }
.ep .story.wide{ width:520px; }
.ep .story-h{ padding:13px 15px 11px; border-bottom:1px solid var(--line); flex:0 0 auto; }
.ep .story-h .t{ font-size:15px; font-weight:600; letter-spacing:-.015em; display:flex; align-items:center; gap:8px; }
.ep .story-h .s{ font-size:12.5px; color:var(--ink-3); margin-top:4px; line-height:1.45; }
.ep .story-b{ flex:1; overflow:hidden; padding:4px 13px 10px; }
.ep .sday{ font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); padding:14px 2px 6px; }
.ep .ev{ position:relative; padding:9px 0 9px 19px; }
.ep .ev::before{ content:""; position:absolute; left:3.5px; top:0; bottom:0; width:1px; background:var(--line-2); }
.ep .ev:last-child::before{ bottom:auto; height:14px; }
.ep .ev .dot{ position:absolute; left:0; top:13px; width:8px; height:8px; border-radius:50%; background:var(--line-3); border:2px solid var(--recess); box-sizing:content-box; }
.ep .ev.dec .dot{ background:var(--green-deep); }
.ep .ev.bad .dot{ background:var(--red); }
.ep .ev .eh{ display:flex; align-items:center; gap:7px; margin-bottom:3px; }
.ep .ev .en{ font-size:13.5px; font-weight:600; letter-spacing:-.012em; }
.ep .ev .ew{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-4); white-space:nowrap; }
.ep .ev .eb{ font-size:13.5px; font-weight:400; line-height:1.55; color:var(--ink-3); text-wrap:pretty; }
.ep .ev .more{ font-size:12px; font-weight:500; color:var(--green-text); margin-top:6px; display:inline-block; }
.ep .ev.dec .eb{ color:var(--ink-2); }
.ep .ev .decd{ margin-top:8px; padding:9px 11px; background:var(--green-soft); border-radius:8px; font-size:13px; font-weight:400; line-height:1.5; color:var(--ink); }
.ep .ev .decd .kk{ font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--green-text); display:block; margin-bottom:3px; }
.ep .story-ask{ flex:0 0 auto; border-top:1px solid var(--line); background:var(--surface); padding:11px 13px; }
.ep .story-ask .q{ display:flex; align-items:center; gap:8px; }
.ep .ans{ margin-top:10px; padding:11px 12px; border-radius:9px; background:var(--bg); border:1px solid var(--line); }
.ep .ans .at{ font-size:13px; font-weight:400; line-height:1.58; color:var(--ink-2); }
.ep .ans .src{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }

/* task detail — right panel, same page */
.ep .tp{ background:var(--surface); }
.ep .tp-tabs{ display:flex; align-items:center; gap:3px; padding:9px 11px; border-bottom:1px solid var(--line); flex:0 0 auto; }
.ep .tp-tabs b{ font-size:12.5px; font-weight:500; color:var(--ink-3); border-radius:6px; padding:4px 10px; }
.ep .tp-tabs b.on{ background:var(--ink); color:var(--bg); font-weight:600; }
.ep[data-theme="dark"] .tp-tabs b.on{ background:var(--raise); color:var(--ink); }
.ep .tp-x{ color:var(--ink-4); display:grid; }
.ep .tp-h{ padding:13px 15px 12px; border-bottom:1px solid var(--line); flex:0 0 auto; }
.ep .tp-nm{ font-size:16px; font-weight:600; letter-spacing:-.021em; line-height:1.3; }
.ep .tp-sub{ display:flex; align-items:center; gap:8px; margin-top:7px; font-size:12.5px; color:var(--ink-3); }
.ep .tp-sub .mono{ font-family:var(--mono); font-size:11.5px; }
.ep .tp-b{ padding:0 15px 12px; }
.ep .tp-sec{ font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); padding:16px 0 7px; }
.ep .tp-agent{ display:flex; align-items:center; gap:9px; }
.ep .tp-an{ font-size:13.5px; font-weight:500; color:var(--ink); }
.ep .tp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.ep .tp-grid > div{ background:var(--recess); border-radius:7px; padding:8px 9px; }
.ep .tp-f{ flex:0 0 auto; border-top:1px solid var(--line); padding:11px 13px; display:flex; flex-direction:column; gap:7px; background:var(--recess); }
.ep .tp-f .btn{ justify-content:center; }
.ep .vf{ display:flex; flex-direction:column; }
.ep .vs{ display:flex; gap:10px; padding:5px 0; position:relative; }
.ep .vs::before{ content:""; position:absolute; left:5px; top:0; bottom:0; width:1px; background:var(--line-2); }
.ep .vs:first-child::before{ top:12px; } .ep .vs:last-child::before{ bottom:auto; height:12px; }
.ep .vd{ width:11px; height:11px; border-radius:50%; border:1.5px solid var(--line-3); background:var(--surface); flex:0 0 auto; margin-top:3px; z-index:1; display:grid; place-items:center; color:transparent; box-sizing:border-box; }
.ep .vs.done .vd,.ep .vd.done{ background:var(--green-deep); border-color:var(--green-deep); color:#fff; }
.ep .vs.cur .vd{ background:var(--ink); border-color:var(--ink); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 30%,transparent); }
.ep .vs.fail .vd{ background:var(--red); border-color:var(--red); }
.ep .vn{ font-size:13.5px; font-weight:500; color:var(--ink-3); letter-spacing:-.01em; }
.ep .vs.cur .vn,.ep .vs.fail .vn{ color:var(--ink); font-weight:600; }
.ep .vs.done .vn{ color:var(--ink-2); }
.ep .vw{ font-size:12px; color:var(--ink-4); margin-top:2px; }
.ep .tp .log{ font-size:11px; }
.ep .tp .ev{ padding:8px 0 8px 19px; }

/* ── small parts ────────────────────────────────────── */
.ep .btn{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font-size:13.5px; font-weight:500; letter-spacing:-.008em; border:1px solid var(--line-2); border-radius:8px; padding:7px 12px; background:var(--surface); color:var(--ink); }
.ep .btn.sm{ padding:5px 10px; font-size:12.5px; }
.ep .btn.go{ background:var(--green); border-color:var(--green); color:#04170D; font-weight:600; }
.ep .btn.dark{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
.ep[data-theme="dark"] .btn.dark{ background:var(--raise); border-color:var(--line-3); color:var(--ink); }
.ep .btn.ghost{ background:transparent; border-color:transparent; color:var(--ink-3); }
.ep .btn.onink{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); color:#fff; }
.ep[data-theme="dark"] .btn.onink{ background:var(--recess); border-color:var(--line-2); color:var(--ink); }
.ep .pill{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; border-radius:20px; padding:2px 8px; background:var(--recess); color:var(--ink-3); white-space:nowrap; }
.ep .pill.you{ background:var(--green); color:#04170D; }
.ep .pill.ok{ background:var(--green-soft); color:var(--green-text); }
.ep .pill.run{ background:var(--blue-soft); color:var(--blue); }
.ep .pill.warn{ background:var(--amber-soft); color:var(--amber); }
.ep .pill.bad{ background:var(--red-soft); color:var(--red); }
.ep .live{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 55%,transparent); animation:eplp 2.4s ease-out infinite; }
@keyframes eplp{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 50%,transparent);} 70%{ box-shadow:0 0 0 6px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }
.ep .kbd{ font-family:var(--mono); font-size:10.5px; color:var(--ink-4); border:1px solid var(--line-2); border-radius:4px; padding:1px 5px; }
.ep .note{ font-size:13px; color:var(--ink-3); line-height:1.6; max-width:76ch; }
.ep .split{ height:1px; background:var(--line); margin:20px 0; }

/* two-column reading layout — document + thread, timeline + digest */
.ep .docrow{ display:grid; grid-template-columns:minmax(0,1fr) 322px; gap:16px; align-items:start; }
.ep .src{ display:flex; flex-wrap:wrap; gap:5px; margin-top:12px; }
.ep .doc h2.k{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-4); margin:24px 0 9px; display:flex; align-items:center; gap:9px; }
.ep .card .ev .dot{ border-color:var(--surface); }
.ep .card .ev::before{ background:var(--line); }

/* narrow-screen frames — compact rail is scoped to .rail, so any row inherits it */
.ep.w1180{ grid-template-columns:56px 292px minmax(0,1fr) auto; }
.ep.w860{ grid-template-columns:56px minmax(0,1fr); }
.ep.w860 .tree,.ep.w860 .story{ display:none; }
.ep.w1180 .rail,.ep.w860 .rail{ padding:13px 8px; align-items:center; }
.ep.w1180 .rail > *,.ep.w860 .rail > *{ justify-content:center; }
.ep.w1180 .rail .word,.ep.w1180 .rail .nm,.ep.w1180 .rail .sub,.ep.w1180 .rail .lbl,.ep.w1180 .rail .n,.ep.w1180 .rail .un,.ep.w1180 .rail .ur,.ep.w1180 .rail-k,
.ep.w860 .rail .word,.ep.w860 .rail .nm,.ep.w860 .rail .sub,.ep.w860 .rail .lbl,.ep.w860 .rail .n,.ep.w860 .rail .un,.ep.w860 .rail .ur,.ep.w860 .rail-k{ display:none; }
.ep .tabs{ display:flex; gap:3px; background:var(--recess); border:1px solid var(--line); border-radius:9px; padding:3px; }
.ep .tabs b{ font-size:12.5px; font-weight:500; letter-spacing:-.008em; color:var(--ink-3); border-radius:6px; padding:4px 10px; white-space:nowrap; }
.ep .tabs b.on{ background:var(--ink); color:var(--bg); font-weight:600; }
.ep[data-theme="dark"] .tabs b.on{ background:var(--raise); color:var(--ink); }