/* ============================================================================
   ByteCosts — Story Engine · mechanic widget styles
   Pairs with articles.css (chrome) + ledger-theme.css. Styles the three
   spec-driven dashboard mechanics: rankedBars, crossoverLines, buildingInvoice.
   ============================================================================ */

/* ---- rankedBars ---- */
.se-bars{display:flex; flex-direction:column; gap:11px;}
.se-bar{display:grid; grid-template-columns:96px 1fr 58px; align-items:center; gap:10px;}
.se-bar .nm{font-family:var(--mono); font-size:.64rem; color:var(--ink-2); line-height:1.1;}
.se-bar .track{height:16px; background:var(--paper-2); border-radius:3px; overflow:hidden; border:var(--bw-hair) solid var(--rule-soft);}
.se-bar .fill{height:100%; width:2%; background:var(--bc-ink-300); border-radius:3px; transition:background var(--transition), opacity var(--transition);}
.se-bar .val{font-family:var(--mono); font-size:.66rem; font-weight:600; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums;}
.se-chead{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:11px;}

/* ---- crossoverLines ---- */
.se-chart{position:relative; width:100%; height:168px; margin-bottom:16px;}
.se-chart canvas{display:block; width:100%; height:100%;}
.se-axis{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.56rem; color:var(--dim); margin-top:4px;}
.se-legend{display:flex; flex-direction:column; gap:1px; background:var(--rule-soft); border:var(--bw-hair) solid var(--rule-soft); border-radius:var(--r-sm); overflow:hidden;}
.se-lg{display:flex; align-items:center; gap:10px; padding:10px 13px; background:var(--card); transition:background var(--transition);}
.se-lg.lead{background:var(--bc-teal-025);}
.se-lg .dot{width:10px; height:10px; border-radius:2px; flex:0 0 auto;}
.se-lg .nm{font-family:var(--read); font-weight:600; font-size:.9rem; color:var(--ink);}
.se-lg .tag{font-family:var(--mono); font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep); margin-left:6px; opacity:0;}
.se-lg.lead .tag{opacity:1;}
.se-lg .lgv{margin-left:auto; font-family:var(--mono); font-weight:600; font-size:1rem; color:var(--ink); font-variant-numeric:tabular-nums;}

/* ---- buildingInvoice ---- */
.se-split{display:flex; height:14px; border-radius:999px; overflow:hidden; border:var(--bw-hair) solid var(--rule-soft); margin-bottom:7px;}
.se-split div{height:100%; transition:width 600ms cubic-bezier(.4,0,.2,1);}
.se-split .a{background:var(--accent);}
.se-split .b{background:var(--signal);}
.se-split-key{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.6rem; color:var(--ink-soft); margin-bottom:16px;}
.se-split-key b{color:var(--ink);}
.se-inv{border:var(--bw) solid var(--ink); border-radius:var(--r-sm); overflow:hidden;}
.se-inv-head{font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); padding:10px 14px; background:var(--paper-2); border-bottom:var(--bw-hair) solid var(--rule-soft); display:flex; justify-content:space-between;}
.se-row{display:flex; justify-content:space-between; align-items:center; padding:0 14px; height:0; opacity:0; overflow:hidden;
  font-family:var(--mono); font-size:.78rem; color:var(--ink-2); border-bottom:1px dashed var(--rule-soft);
  transition:height var(--transition), opacity var(--transition);}
.se-row.show{height:38px; opacity:1;}
.se-row .amt{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;}
.se-row.base .amt{color:var(--accent-deep);}
.se-row.add.show .amt{color:var(--signal);}

/* ---- stackedArea / donutShift shared legend share column ---- */
.se-lg .lgs{font-family:var(--mono); font-size:.62rem; font-weight:500; color:var(--ink-soft); margin-left:10px; min-width:34px; text-align:right; font-variant-numeric:tabular-nums;}
.se-lg.lead .lgs{color:var(--accent-deep);}

/* ---- bubbleQuadrant ---- */
.se-quad{position:relative; width:100%; height:208px; margin-bottom:6px;}
.se-quad canvas{display:block; width:100%; height:100%;}
.se-quad .qc{position:absolute; font-family:var(--mono); font-size:.52rem; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); pointer-events:none; max-width:44%; line-height:1.25;}
.se-quad .qc.tl{top:8px; left:34px;}
.se-quad .qc.tr{top:8px; right:16px; text-align:right;}
.se-quad .qc.bl{bottom:26px; left:34px;}
.se-quad .qc.br{bottom:26px; right:16px; text-align:right;}

/* ---- donutShift ---- */
.se-donut{height:206px;}
.se-donut canvas{display:block; width:100%; height:100%;}