/* ── THE 90 MINUTES ── signature interaction. All selectors scoped under .sp ── */

.sp{padding:0 0 8px}

/* ---------- head ---------- */
.sp-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end;padding:52px 0 26px}
.sp-head h1{margin:9px 0 0;font-size:30px;line-height:1.14;font-weight:600;letter-spacing:-.022em}
.sp-lede{margin:11px 0 0;font-size:13px;line-height:1.6;color:var(--ink-3);max-width:64ch}
.sp-lede em{font-style:normal;color:var(--ink-2);border-bottom:1px dashed var(--line-2);padding-bottom:1px}
.sp-head-r{display:flex;flex-direction:column;align-items:flex-end;gap:9px;text-align:right;flex:0 0 auto}
.sp-btn{border:1px solid var(--line-2);background:var(--bg-2);border-radius:999px;padding:10px 20px;
  font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--ink);white-space:nowrap;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.sp-btn:hover{background:var(--bg-3);border-color:#3B424E}
.sp-btn:active{transform:translateY(1px)}
.sp-btn[aria-pressed=true]{background:var(--bg-1);color:var(--ink-2)}
.sp-basis{font-size:11px;color:var(--ink-3);margin:0;letter-spacing:.01em;text-align:right;
  border:1px solid transparent;border-radius:var(--r-s);padding:4px 6px}
.sp-src{font-size:10.5px;color:var(--ink-4);margin:0}

/* ---------- stage ---------- */
.sp-rail{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:0 2px 10px;border-bottom:1px solid var(--line);margin-bottom:16px}
.sp-rail-r{font-size:11px;color:var(--ink-4)}

.sp-barwrap{position:relative}
.sp-bar{display:flex;gap:0;height:150px;border-radius:var(--r);transition:gap .5s var(--ease),box-shadow .4s var(--ease)}
.sp-stage[data-state=after] .sp-bar{box-shadow:inset 0 0 0 1px var(--line)}
.sp-stage[data-state=after] .sp-bar.burst{gap:14px}

.sp-seg{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:space-between;
  align-items:flex-start;text-align:left;padding:15px 16px;overflow:hidden;border-radius:0;
  background:var(--bg-3);transform-origin:50% 100%;
  transition:background-color .5s var(--ease) var(--d),box-shadow .5s var(--ease) var(--d),
             transform .6s var(--ease) var(--d),opacity .25s var(--ease)}
.sp-seg:first-child{border-radius:var(--r) 0 0 var(--r)}
.sp-seg:last-child{border-radius:0 var(--r) var(--r) 0}
.sp-stage[data-state=before] .sp-seg{transform:translateY(0) scaleY(.88);pointer-events:none}

/* attributed: a tinted field with an accent edge — the colour is an owner code, not decoration */
.sp-stage[data-state=after] .sp-seg{transform:none;background:rgba(var(--rgb),.16);
  box-shadow:inset 0 3px 0 var(--a)}
.sp-stage[data-state=after] .sp-seg+.sp-seg{border-left:1px solid var(--divider)}
.sp-stage[data-state=after] .sp-seg:not(.on){opacity:.84}
.sp-stage[data-state=after] .sp-seg:hover{opacity:1;background:rgba(var(--rgb),.24)}
.sp-stage[data-state=after] .sp-seg.on{opacity:1;background:rgba(var(--rgb),.28);
  box-shadow:inset 0 0 0 2px var(--a);transition-delay:0s}

.sp-seg>*{opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease) calc(var(--d) + 140ms),transform .45s var(--ease) calc(var(--d) + 140ms)}
.sp-stage[data-state=after] .sp-seg>*{opacity:1;transform:none}
.sp-seg-top{display:flex;align-items:baseline;gap:5px;color:var(--a)}
.sp-seg-top b{font-family:var(--serif);font-size:34px;line-height:1;letter-spacing:-.02em}
.sp-seg-top i{font-style:normal;font-size:11px;color:var(--ink-3)}
.sp-seg-cause{font-size:12.5px;font-weight:600;line-height:1.28;letter-spacing:-.005em;color:var(--ink);
  padding-right:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sp-seg-foot{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;
  border-top:1px solid var(--divider);padding-top:8px}
.sp-seg-own{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--a);line-height:1.2}
.sp-seg-val{font-family:var(--mono);font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--ink)}

/* the conventional single bar, laid over the split */
.sp-veil{position:absolute;inset:0;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 26px;
  transform-origin:50% 50%;transition:opacity .42s var(--ease),transform .52s var(--ease)}
.sp-stage[data-state=after] .sp-veil{opacity:0;transform:translateY(-14px) scaleY(.9);pointer-events:none}
.sp-veil-l{display:flex;flex-direction:column;gap:7px;min-width:0}
.sp-veil-name{font-size:22px;font-weight:600;letter-spacing:-.015em;color:var(--ink-2)}
.sp-veil-r{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;justify-content:flex-end;text-align:right}
.sp-veil-r b{font-family:var(--serif);font-size:40px;line-height:1;color:var(--ink-2);letter-spacing:-.02em}
.sp-veil-r i{font-style:normal;font-size:12px;color:var(--ink-4)}
.sp-veil-blame{width:100%;font-size:11px;color:var(--ink-4);letter-spacing:.01em}

/* ---------- detail panel ---------- */
.sp-panel{display:grid;margin-top:16px;min-height:206px;background:var(--bg-1);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 20px}
.sp-pb,.sp-pa{grid-area:1/1;transition:opacity .3s var(--ease),transform .34s var(--ease)}
.sp-stage[data-state=before] .sp-pa,.sp-stage[data-state=after] .sp-pb{opacity:0;visibility:hidden;transform:translateY(8px)}
.sp-stage[data-state=after] .sp-pa{transition-delay:.24s}
.sp-pb-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:16px}
.sp-k{display:block;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);margin-bottom:6px}
.sp-v{display:block;font-size:13px;color:var(--ink-2);line-height:1.5}
.sp-pb .sp-v{color:var(--ink-3);font-style:italic}

.sp-d-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:13px;border-bottom:1px solid var(--line)}
.sp-d-dot{width:9px;height:9px;border-radius:50%;background:var(--a);flex:0 0 auto}
.sp-d-cause{font-size:16px;font-weight:600;letter-spacing:-.012em}
.sp-d-owner{font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:999px;padding:3px 9px}
.sp-d-mins{font-size:12px;color:var(--ink-2);margin-left:auto}
.sp-d-val{font-family:var(--serif);font-size:21px;letter-spacing:-.02em;color:var(--a)}
.sp-d-grid{display:grid;grid-template-columns:1.1fr 1.3fr 1fr;gap:22px;padding:14px 0 15px}
.sp-d-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
.sp-d-math{font-size:11.5px;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-s);padding:6px 10px}
.sp-d-band{font-size:11px;color:var(--ink-4)}
.sp-d-open{margin-left:auto;font-size:12px;color:var(--ink-2);border:1px solid var(--line-2);
  border-radius:999px;padding:6px 13px;white-space:nowrap;transition:.16s var(--ease)}
.sp-d-open:hover{color:var(--ink);background:var(--bg-3)}

/* ---------- after: verdict, ledger, arithmetic ---------- */
.sp-after{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:20px;margin-top:20px;
  opacity:0;visibility:hidden;transform:translateY(18px);
  transition:opacity .5s var(--ease) .34s,transform .55s var(--ease) .34s,visibility 0s linear .34s}
.sp-after[data-state=after]{opacity:1;visibility:visible;transform:none;transition-delay:.34s,.34s,0s}

.sp-verdict,.sp-ledger,.sp-maths{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.sp-maths{grid-column:1/-1}

.sp-vk{margin:0}
.sp-vline{margin:8px 0 14px;font-size:12px;color:var(--ink-4)}
.sp-vline s{color:var(--ink-4);text-decoration-color:var(--neg)}
.sp-vgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sp-vcard{border:1px solid var(--line);border-radius:var(--r-s);padding:14px 15px;background:var(--bg-2);text-align:left;
  display:flex;flex-direction:column;gap:4px}
.sp-vcard.is-emp{border-color:var(--neg-line);background:var(--neg-tint)}
.sp-vnum{font-family:var(--serif);font-size:38px;line-height:1.05;letter-spacing:-.028em;margin-top:6px}
.sp-vnum i{font-style:normal;font-size:12px;color:var(--ink-3);margin-left:5px;letter-spacing:0}
.sp-vmoney{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.sp-vcard.is-emp .sp-vmoney{color:var(--neg-ink)}
.sp-vpct{font-size:11px;color:var(--ink-3)}
.sp-vsub{font-size:11px;color:var(--ink-4);line-height:1.45;margin-top:5px;border-top:1px solid var(--line);padding-top:8px}
.sp-vmeter{display:flex;gap:2px;height:7px;margin-top:14px}
.sp-vmeter > button{border-radius:2px;display:block;opacity:.9;height:100%;border:0;padding:0}
.sp-vmeter > button:first-child{opacity:1}

.sp-led-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding-bottom:10px;
  border-bottom:1px solid var(--line);margin-bottom:4px}
.sp-led-note{font-size:10.5px;color:var(--ink-4)}
.sp-led-row{display:grid;grid-template-columns:minmax(0,1fr) 52px 118px minmax(44px,80px) 78px;
  align-items:center;gap:6px 14px;width:100%;padding:11px 6px;border-bottom:1px solid var(--line);
  text-align:left;transition:background .16s var(--ease)}
.sp-led-row:last-child{border-bottom:0}
.sp-led-row:hover{background:var(--bg-2)}
.sp-led-own{display:flex;align-items:center;gap:10px;min-width:0}
.sp-led-own>i{width:8px;height:8px;border-radius:2px;background:var(--a);flex:0 0 auto}
.sp-led-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.sp-led-t b{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.25}
.sp-led-t small{font-size:11px;color:var(--ink-4);line-height:1.3}
.sp-led-own em{font-style:normal;font-size:9px;letter-spacing:.1em;text-transform:uppercase;flex:0 0 auto;
  color:var(--neg-ink);border:1px solid var(--neg-line);border-radius:999px;padding:2px 6px;font-weight:700}
.sp-led-min{font-size:11.5px;color:var(--ink-2);text-align:right}
.sp-led-track{height:5px;background:var(--bg-3);border-radius:3px;overflow:hidden}
.sp-led-track b{display:block;height:100%;background:var(--a);border-radius:3px}
.sp-led-val{font-size:13px;color:var(--ink);text-align:right;font-weight:600}

.sp-m-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:11px;border-bottom:1px solid var(--line);margin-bottom:4px}
.sp-m-basis{font-size:11px;color:var(--ink-3)}
.sp-m-row,.sp-m-total{display:grid;grid-template-columns:minmax(0,1fr) auto 108px;align-items:baseline;gap:20px;
  padding:9px 4px;border-bottom:1px solid var(--line)}
.sp-m-cause{font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;gap:9px;min-width:0}
.sp-m-cause i{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.sp-m-f{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.sp-m-v{font-size:13px;color:var(--ink);text-align:right;font-weight:600}
.sp-m-total{border-bottom:0;border-top:1px solid var(--line-2);margin-top:4px;padding-top:14px}
.sp-m-total .sp-m-cause{font-size:13px;color:var(--ink);font-weight:600}
.sp-m-total .sp-m-v{font-family:var(--serif);font-size:24px;letter-spacing:-.02em;font-weight:400}
.sp-m-foot{margin:10px 0 0;font-size:11.5px;color:var(--ink-4);max-width:70ch}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .sp-after{grid-template-columns:minmax(0,1fr)}
  .sp-d-grid{grid-template-columns:1fr 1fr}
  .sp-d-grid>*:last-child{grid-column:1/-1}
}
@media (max-width:900px){
  .sp-head{grid-template-columns:minmax(0,1fr);gap:18px}
  .sp-head-r{align-items:flex-start;text-align:left}
  .sp-pb-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .sp-bar{flex-direction:column;height:396px}
  .sp-seg{flex-direction:row;align-items:center;justify-content:space-between;gap:14px;padding:10px 15px;
    transform-origin:0 50%}
  .sp-seg:first-child{border-radius:var(--r) var(--r) 0 0}
  .sp-seg:last-child{border-radius:0 0 var(--r) var(--r)}
  .sp-stage[data-state=before] .sp-seg{transform:translateY(0) scaleX(.94)}
  .sp-stage[data-state=after] .sp-seg{transform:none;box-shadow:inset 3px 0 0 var(--a)}
  .sp-stage[data-state=after] .sp-seg+.sp-seg{border-left:0;border-top:1px solid var(--divider)}
  .sp-stage[data-state=after] .sp-seg.on{box-shadow:inset 0 0 0 2px var(--a)}
  .sp-seg-top b{font-size:26px}
  .sp-seg-cause{flex:1 1 auto;-webkit-line-clamp:2}
  .sp-seg-foot{width:auto;border-top:0;padding-top:0;align-items:flex-end;gap:2px;flex:0 0 auto}
  .sp-veil{flex-direction:column;align-items:flex-start;justify-content:center;gap:16px;padding:20px 22px}
  .sp-veil-r{justify-content:flex-start;text-align:left}
}
@media (max-width:640px){
  .sp-head h1{font-size:24px}
  .sp-rail{flex-direction:column;gap:5px}
  .sp-vgrid{grid-template-columns:1fr}
  .sp-d-grid,.sp-pb-grid{grid-template-columns:1fr}
  .sp-d-grid>*:last-child{grid-column:auto}
  .sp-d-mins{margin-left:0}
  .sp-d-open{margin-left:0}
  .sp-panel{min-height:0}
  .sp-led-row{grid-template-columns:minmax(0,1fr) 52px 74px;gap:4px 10px}
  .sp-led-cap{display:none}
  .sp-led-track{display:none}
  .sp-led-own em{display:none}
  .sp-led-row.is-emp .sp-led-t b{color:var(--neg-ink)}
  .sp-m-row,.sp-m-total{grid-template-columns:minmax(0,1fr) 104px}
  .sp-m-total .sp-m-v{font-size:19px;white-space:nowrap}
  .sp-m-row,.sp-m-total{grid-template-columns:minmax(0,1fr) 92px;gap:6px 14px}
  .sp-m-f{grid-column:1/-1;order:3;white-space:normal}
  .sp-veil-r b{font-size:32px}
  .sp-bar{height:430px}
}
@media (prefers-reduced-motion:reduce){
  .sp-seg,.sp-seg>*,.sp-veil,.sp-after,.sp-pb,.sp-pa{transition:none!important}
}

/* ---------- value type + evidence ---------- */
.sp-kind{
  margin-top:26px; display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap;
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 18px; box-shadow:var(--shadow-1);
}
.sp-kind-chip{
  display:inline-flex; align-items:center; gap:5px; flex:0 0 auto;
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  padding:3px 8px; border-radius:999px; white-space:nowrap;
  color:var(--brand-deep); background:var(--brand-tint); border:1px solid var(--brand-soft);
}
.sp-kind-chip::before{ content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.sp-kind-line{ margin:0; font-size:12.5px; color:var(--ink-2); flex:1 1 320px; }

.sp-ev{ margin-top:26px; }
.sp-ev-h{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-bottom:10px; border-bottom:1px solid var(--line-2); margin-bottom:16px;
}
.sp-ev-note{ font-size:11.5px; color:var(--ink-3); }

.sp-d-kind{
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  padding:3px 8px; border-radius:999px; white-space:nowrap;
  color:var(--brand-deep); background:var(--brand-tint); border:1px solid var(--brand-soft);
}
.sp-led-cap{ font-size:10.5px; color:var(--ink-4); white-space:nowrap; }


/* ---------- live affordance ----------
   One quiet cue across all five views: anything that opens or filters
   something carries a pointer, a hover lift, a focus ring, and — where it
   drills — a chevron that fades in before the pointer arrives. */
.sp .is-live{
  position: relative; cursor: pointer; text-align: left;
  transition: background-color .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.sp .is-live:hover{ background: var(--bg-2); border-color: var(--brand-soft); box-shadow: var(--shadow-1); }
.sp .is-live:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; }
.sp .is-live::after{
  content: '\203A'; position: absolute; right: 12px; top: 12px;
  font-size: 15px; line-height: 1; color: var(--brand);
  opacity: 0; transform: translateX(-3px); pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.sp .is-live:hover::after, .sp .is-live:focus-visible::after{ opacity: .75; transform: translateX(0); }
.sp .is-live.is-on{ border-color: var(--brand); background: var(--brand-tint); }

/* chips, badges and figures — the same cue without the chevron */
.sp .is-live-chip{
  cursor: pointer;
  transition: background-color .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.sp .is-live-chip:hover{ border-color: var(--brand-soft); box-shadow: 0 0 0 2px var(--brand-tint); }
.sp .is-live-chip:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; }
.sp .is-live-chip.is-on{ border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-tint-2); }

/* chart marks brighten and take a stroke on hover */
.sp .is-live-mark{
  cursor: pointer; border: 0; padding: 0;
  transition: filter .16s var(--ease), box-shadow .16s var(--ease);
}
.sp .is-live-mark:hover{ filter: saturate(1.12) brightness(1.06); box-shadow: 0 0 0 2px var(--brand-tint-2); }
.sp .is-live-mark:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  .sp .is-live, .sp .is-live-chip, .sp .is-live-mark, .sp .is-live::after{ transition: none; }
}


/* every field, row and mark on this screen is a way in */
.sp-d-item{
  display:block; text-align:left; width:100%; padding:6px 8px; margin:-6px -8px;
  border:1px solid transparent; border-radius:var(--r-s); background:none;
}
.sp-m-row{ width:100%; text-align:left; border:0; border-bottom:1px solid var(--line); background:none; }
.sp-rail-l{ text-align:left; border:1px solid transparent; border-radius:var(--r-s); padding:4px 6px; margin:-4px -6px; }
.sp-note{ display:none; }
.is-on > .sp-note{
  display:block; max-width:34ch; margin-top:6px;
  font-size:11px; color:var(--ink-3); line-height:1.45; letter-spacing:0; text-transform:none;
}
.sp .is-live::after{ top:8px; right:8px; }
/* row-shaped targets keep the chevron clear of the value column */
.sp-m-row.is-live, .sp-led-row.is-live{ padding-right:22px; }
.sp-m-row.is-live::after, .sp-led-row.is-live::after{ top:50%; margin-top:-8px; right:3px; }
.sp-led-row.is-live{ border:0; border-bottom:1px solid var(--line); }
.sp-led-row.is-live:last-child{ border-bottom:0; }
.sp-led-row.is-emp.is-live:hover{ background:var(--neg-tint); }