/* LINE DETAIL — the slide-over drawer and the Line explorer sub-tab (pages/linedetail.js, pages/linedetail-charts.js). */
/* ---------- Drawer shell: backdrop, panel, open state ---------- */
#ld-drawer{position:fixed;inset:0;z-index:60;pointer-events:none}
#ld-drawer .ld-backdrop{position:absolute;inset:0;background:rgba(14,39,64,.38);opacity:0;transition:opacity .2s}
#ld-drawer .ld-panel{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:min(960px,86vw);
  background:var(--bg);
  box-shadow:-18px 0 48px rgba(14,39,64,.25);
  transform:translateX(24px);
  opacity:0;
  transition:transform .22s ease,opacity .18s;
  overflow-y:auto;
  padding:var(--space-6) var(--space-8) var(--space-10);
}
#ld-drawer.open{pointer-events:auto}
#ld-drawer.open .ld-backdrop{opacity:1}
#ld-drawer.open .ld-panel{transform:none;opacity:1}
body.ld-open{overflow:hidden}
/* ---------- Drawer head: eyebrow, title, chips, prev/next navigation ---------- */
.ld-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-5);margin-bottom:var(--space-3)}
.ld-eyebrow{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.ld-title h2{font-size:var(--text-xl);line-height:1.15;margin:4px 0 8px;letter-spacing:-.02em;font-weight:900}
.ld-chips{display:flex;flex-wrap:wrap;gap:6px}
.ld-nav{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.ld-nav select{
  font:inherit;
  font-size:var(--text-sm);
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:10px;
  max-width:280px;
  background:var(--white);
}
/* ---------- Plain-words summary and KPI tiles ---------- */
.ld-plain{
  font-size:var(--text-md,15px);
  line-height:1.55;
  color:var(--text);
  background:var(--white);
  border:1.5px solid var(--line);
  border-left:5px solid var(--g1);
  border-radius:var(--radius);
  padding:var(--space-4) var(--space-5);
  margin:0 0 var(--space-4);
}
.ld-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-5)}
.ld-kpi{
  background:linear-gradient(160deg,var(--white),color-mix(in srgb,var(--g1) 7%,var(--surface)));
  border:2px solid var(--line);
  border-radius:var(--radius);
  padding:10px 12px;
  min-width:0;
}
.ld-kpi span{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ld-kpi b{display:block;font-size:26px;font-weight:900;letter-spacing:-.02em;margin:2px 0}
.ld-kpi em{
  display:block;
  font-style:normal;
  font-size:11.5px;
  color:var(--faint);
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.ld-kpi.neg b{color:var(--red)}
.ld-kpi.pos b{color:var(--green)}
/* ---------- Chart cards and the facts list ---------- */
.ld-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-4)}
.ld-grid .card h3{
  font-size:var(--text-base,15px);
  font-weight:800;
  margin:0 0 2px;
  padding-bottom:8px;
  border-bottom:1px solid var(--row);
  margin-bottom:8px;
}
.ld-grid .chart-box{height:240px}
.ld-grid .chart-box.short{height:180px}
dl.ld-facts{margin:0;font-size:var(--text-sm);display:grid;grid-template-columns:auto 1fr;gap:0 14px}
dl.ld-facts dt{
  font-weight:800;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
  padding-top:2px;
  padding:7px 0;
  border-bottom:1px solid var(--row);
}
dl.ld-facts dd{margin:0;line-height:1.45;padding:7px 0;border-bottom:1px solid var(--row)}
dl.ld-facts a{color:var(--page);font-weight:700;text-decoration:none}
/* clickable line names anywhere in the cockpit */
button.lnk{
  all:unset;
  cursor:pointer;
  color:inherit;
  font:inherit;
  border-bottom:1px dotted color-mix(in srgb,var(--page) 55%,transparent);
  padding-bottom:1px;
}
button.lnk:hover,button.lnk:focus-visible{color:var(--page);border-bottom-style:solid;outline:0}
/* explorer */
.ld-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-4)}
.ld-cat{
  grid-column:1/-1;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:var(--space-2);
}
.ld-card{
  all:unset;
  box-sizing:border-box;
  cursor:pointer;
  display:block;
  background:var(--white);
  border:2px solid var(--line);
  border-radius:var(--radius);
  padding:12px 14px;
  transition:box-shadow .15s,transform .15s;
  min-width:0;
}
.ld-card:hover,.ld-card:focus-visible{
  box-shadow:var(--shadow);
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--page) 45%,var(--border));
}
.ld-card.sev-red{border-left:4px solid var(--red)}
.ld-card.sev-amber{border-left:4px solid var(--amber)}
.ld-card.sev-blue{border-left:4px solid var(--blue)}
.ld-card.sev-green{border-left:4px solid var(--green)}
.ld-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;font-size:var(--text-sm)}
.ld-card-top b{font-weight:700;line-height:1.3}
.ld-bar{
  position:relative;
  height:8px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:999px;
  margin:10px 0 6px;
  overflow:visible;
}
.ld-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px}
.ld-bar i.p{background:color-mix(in srgb,var(--page) 30%,#fff)}
.ld-bar i.a{background:var(--page)}
.ld-bar s{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--text);opacity:.55;transform:translateX(-1px)}
.ld-card-nums{display:flex;justify-content:space-between;gap:6px;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.search{
  font:inherit;
  font-size:var(--text-sm);
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  min-width:260px;
  background:var(--white);
}
/* the line's own row from the uploaded budget file */
.ld-file{margin-bottom:var(--space-4);border:2px solid var(--line);background:var(--white)}
table.ld-filerow{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
table.ld-filerow th{
  text-align:left;
  font-weight:700;
  color:var(--muted);
  padding:6px 10px 6px 0;
  width:42%;
  vertical-align:top;
  border-bottom:1px solid var(--border);
}
table.ld-filerow td{padding:6px 0;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
table.ld-filerow td .small{color:var(--faint);cursor:help}