/* Deal Explorer - dashboard layout */
.k0 { --k: var(--s1); } .k1 { --k: var(--s2); } .k2 { --k: var(--s3); } .k3 { --k: var(--s4); }
.k4 { --k: var(--s5); } .k5 { --k: var(--s6); } .k6 { --k: var(--s7); } .k7 { --k: var(--s8); }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { font-weight: 650; letter-spacing: 0.01em; margin-right: 6px; }
.deal-pick select { min-width: 220px; max-width: 70vw; font-weight: 600; }
.spacer { flex: 1; }
.find { position: relative; flex: 1 1 260px; max-width: 420px; }
.find input { width: 100%; }
.find-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; box-shadow: var(--shadow);
  margin: 0; padding: 4px; list-style: none; max-height: 360px; overflow: auto;
}
.find-list li { display: flex; gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.find-list li[aria-selected="true"], .find-list li:hover { background: var(--wash); }
.find-list .dim { color: var(--muted); font-size: 12px; min-width: 88px; }
.find-list .val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-list .amt { color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }

main { max-width: 1440px; margin: 0 auto; padding: 14px 16px 40px; transition: opacity 0.15s; }
main.loading { opacity: 0.45; pointer-events: none; }

.controls { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.ctl { display: flex; align-items: center; gap: 8px; }
.ctl > .lbl { color: var(--muted); font-size: 12px; }
.seg { display: inline-flex; border: 1px solid var(--border-2); border-radius: 8px; overflow: hidden; background: var(--surface); }
.seg button { border: 0; background: transparent; padding: 5px 10px; border-right: 1px solid var(--border); }
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--wash); }
.seg button[aria-pressed="true"] { background: var(--sel); font-weight: 600; }
.ctl select { padding: 5px 8px; }
.basis-note { font-size: 12px; color: var(--note-ink); background: var(--note-bg); padding: 3px 8px; border-radius: 6px; }

.trail { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 2px; min-height: 32px; }
.trail .hint { color: var(--muted); font-size: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  background: var(--sel); border-radius: 999px; padding: 3px 4px 3px 12px;
}
.chip .d { color: var(--ink-2); font-size: 12px; }
.chip .v { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }
.chip button { border: 0; background: transparent; width: 24px; height: 24px; border-radius: 50%; line-height: 1; }
.chip button:hover { background: var(--wash); }
.trail .sep { color: var(--muted); }

.songhead {
  margin: 10px 0 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline;
}
.songhead .name { font-size: 20px; font-weight: 650; }
.songhead .meta { color: var(--ink-2); }

.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.tile .label { color: var(--ink-2); font-size: 12px; }
.tile .value { font-size: 24px; font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .sub { color: var(--muted); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up { color: var(--good); } .down { color: var(--bad); }
.anchor-note { color: var(--muted); font-size: 12px; margin: 8px 2px 0; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-top: 14px; min-width: 0; }
.card-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.card-h h2 { font-size: 15px; font-weight: 600; margin: 0; }
.card-h .count { color: var(--muted); font-size: 12px; }
.card-h .spacer { flex: 1; }
.card-h input[type="search"] { width: 200px; padding: 4px 8px; }

.card-h h2 .within { color: var(--ink-2); font-weight: 500; }
.path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.path .lbl { color: var(--muted); font-size: 12px; margin-right: 2px; }
.path select { padding: 4px 8px; }
.path select.cur { border-color: var(--accent); background: var(--sel); font-weight: 600; }
.path .sep { color: var(--muted); }
.path .hint { color: var(--muted); font-size: 12px; margin-left: 6px; }
.tree-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.tree-bar .note { margin: 0; }
.tree-bar .spacer { flex: 1; }
table.tree td.name { white-space: nowrap; max-width: 440px; overflow: hidden; text-overflow: ellipsis; }
table.tree .caret { border: 0; background: transparent; width: 22px; height: 22px; border-radius: 4px; color: var(--ink-2); padding: 0; }
table.tree .caret:hover { background: var(--wash); }
table.tree .caret-pad { display: inline-block; width: 22px; }
table.tree .drill { border: 0; background: transparent; padding: 2px 4px; border-radius: 4px; color: var(--ink); text-align: left; }
table.tree .drill:hover { background: var(--wash); text-decoration: underline; }
table.tree tr.d0 td { background: var(--surface-2); }
table.tree tr.d0 .drill, table.tree tr.d0 td.strong { font-weight: 650; }
table.tree tr.d2 td { color: var(--ink-2); }
table.tree td.strong { font-weight: 600; }
table.tree th.partial { color: var(--note-ink); cursor: help; }
table.tree tr td.lump { background: var(--note-bg); color: var(--note-ink); font-weight: 650; }
.lump-tag { font-size: 11px; color: var(--note-ink); background: var(--note-bg); border-radius: 999px; padding: 0 7px; margin-left: 6px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 2px 0 6px; }
.legend button {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: transparent;
  border-radius: 6px; padding: 2px 8px 2px 6px; color: var(--ink-2); font-size: 12px;
}
.legend button:hover { background: var(--wash); }
.legend button[aria-pressed="true"] { border-color: var(--border-2); background: var(--sel); color: var(--ink); }
.legend .amt { color: var(--muted); font-variant-numeric: tabular-nums; }
.sw { width: 10px; height: 10px; border-radius: 2px; background: var(--k); flex: none; }

.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .grid line { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart .base { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.chart text { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .seg { fill: var(--k); cursor: pointer; transition: filter 0.1s; }
.chart .seg.hot { filter: brightness(1.18) saturate(1.05); }
.chart .partial { opacity: 0.42; }
.chart .hit { fill: transparent; }
.chart .hit:focus { outline: none; }
.chart .hit:focus-visible { stroke: var(--accent); stroke-width: 2; }
.chart .empty { fill: var(--muted); font-size: 13px; }
.note { color: var(--muted); font-size: 12px; margin: 6px 0 0; }

.tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
table.t { border-collapse: collapse; width: 100%; font-size: 13px; }
table.t th, table.t td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
table.t th { color: var(--ink-2); font-weight: 600; font-size: 12px; background: var(--surface-2); position: sticky; top: 0; }
table.t td.l, table.t th.l { text-align: left; }
table.t td { font-variant-numeric: tabular-nums; }
table.t tr.total td { font-weight: 650; }
table.t .stick { position: sticky; left: 0; background: var(--surface); z-index: 1; }
table.t th.stick { background: var(--surface-2); z-index: 2; }
table.t th button { border: 0; background: transparent; font-weight: 600; color: inherit; padding: 0; }
table.t th button[aria-sort] { color: var(--ink); }
table.t td .muted { color: var(--muted); }
table.t td.wrap { white-space: normal; min-width: 160px; max-width: 360px; }

.songs tbody tr { cursor: pointer; }
.songs tbody tr:hover td { background: var(--wash); }
.songs tbody tr.on td { background: var(--sel); }
.songs .rank { color: var(--muted); width: 32px; }
.songs tr.untitled .song { font-style: italic; color: var(--ink-2); }
.songs .song .isrc { color: var(--muted); font-size: 11px; margin-left: 8px; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.01em; }
.btn.small { padding: 2px 8px; font-size: 12px; }
.isrc-box { margin-top: 8px; max-width: 520px; }
table.isrcs td.muted { color: var(--muted); }
.songs .song { text-align: left; max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.songs .song .artist { color: var(--muted); font-size: 12px; margin-left: 6px; }
.spark { display: block; }
.spark .ln { fill: none; stroke: var(--s1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark .ar { fill: var(--s1); opacity: 0.10; }
.spark .dt { fill: var(--s1); stroke: var(--surface); stroke-width: 2; }
.spark .zero { stroke: var(--grid); stroke-width: 1; }

.panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.panels .card { margin-top: 14px; }
.plist { display: flex; flex-direction: column; gap: 2px; }
.prow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; grid-template-rows: auto 4px; column-gap: 10px;
  text-align: left; border: 0; background: transparent; border-radius: 6px; padding: 5px 6px 6px;
}
.prow:hover { background: var(--wash); }
.prow[aria-pressed="true"] { background: var(--sel); }
.prow .nm { display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; }
.prow .nm span { overflow: hidden; text-overflow: ellipsis; }
.prow[aria-pressed="true"] .nm { font-weight: 600; }
.prow .amt { font-variant-numeric: tabular-nums; }
.prow .chg { font-variant-numeric: tabular-nums; font-size: 12px; text-align: right; color: var(--muted); }
.prow .chg.up { color: var(--good); } .prow .chg.down { color: var(--bad); }
.prow .bar { grid-column: 1 / 2; height: 4px; border-radius: 2px; background: var(--grid); overflow: hidden; margin-top: 3px; }
.prow .bar i { display: block; height: 100%; background: var(--s1); border-radius: 2px; }
.prow .bar i.neg { background: var(--bad); }
.phead { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; column-gap: 10px; padding: 0 6px 4px;
  color: var(--muted); font-size: 11px; }
.phead span:nth-child(2), .phead span:nth-child(3) { text-align: right; }
.more { margin-top: 6px; }
.empty-msg { color: var(--muted); padding: 8px 6px; }

.lines .detail td { font-size: 12px; }
.lines .bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; color: var(--ink-2); font-size: 12px; }

.tip {
  position: fixed; z-index: 50; pointer-events: none; min-width: 200px; max-width: 360px;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; box-shadow: var(--shadow);
  padding: 10px 12px; font-size: 12px;
}
.tip .t-h { font-weight: 600; margin-bottom: 6px; font-size: 13px; }
.tip .t-warn { color: var(--note-ink); background: var(--note-bg); border-radius: 6px; padding: 3px 6px; margin-bottom: 6px; }
.tip .t-r { display: grid; grid-template-columns: 12px auto 1fr; gap: 8px; align-items: center; padding: 1px 4px; border-radius: 4px; }
.tip .t-r.hot { background: var(--wash); }
.tip .t-r b { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink); text-align: right; }
.tip .t-r span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tip .key { width: 12px; height: 2px; border-radius: 1px; background: var(--k); }
.tip .t-tot { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; display: flex; justify-content: space-between; }
.tip .t-tot b { font-variant-numeric: tabular-nums; }

.about { border: 1px solid var(--border-2); border-radius: 14px; padding: 0; width: min(860px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.about::backdrop { background: rgba(0, 0, 0, 0.35); }
.about .ab-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); }
.about .ab-h h2 { margin: 0; font-size: 16px; }
.about .ab-b { padding: 6px 18px 18px; }
.about h3 { font-size: 13px; margin: 18px 0 6px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; }
.about dl { display: grid; grid-template-columns: 150px 1fr; gap: 4px 12px; margin: 0; }
.about dt { color: var(--muted); }
.about dd { margin: 0; overflow-wrap: anywhere; }
.about ul { margin: 0; padding-left: 18px; }
.pill { display: inline-block; border-radius: 999px; padding: 0 8px; font-size: 12px; background: var(--surface-2); }
.pill.pass { color: var(--good); } .pill.warn { color: var(--note-ink); background: var(--note-bg); } .pill.fail { color: var(--bad); }

.foot { color: var(--muted); font-size: 12px; margin-top: 18px; }
.stale-banner { background: var(--note-bg); color: var(--note-ink); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.stale-banner b { font-weight: 650; }
.stale-banner ul { margin: 4px 0 0; padding-left: 18px; }
.stale-banner code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; }
.err-box { margin: 40px auto; max-width: 560px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }

@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panels { grid-template-columns: minmax(0, 1fr); }
  .deal-pick select { min-width: 0; width: 100%; }
  .deal-pick, .find { flex: 1 1 100%; max-width: none; }
  .card-h input[type="search"] { width: 100%; }
  .about dl { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- deal terms (prototype, terms.js) */
.terms .terms-banner { background: var(--note-bg); color: var(--note-ink); border-radius: 8px; padding: 8px 12px; margin: 2px 0 0; font-size: 13px; }
.tsec { margin-top: 20px; }
.tsec h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; margin: 0 0 4px; }
.tsec .tsub { margin: 0 0 8px; }
.tnum { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--sel); color: var(--accent-ink); font-size: 11px; font-weight: 700; }
.terms .muted { color: var(--muted); }
.terms .small { font-size: 12px; }
.pill.miss { color: var(--bad); }

.rights { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.right { border: 1px dashed var(--border-2); border-radius: 10px; padding: 10px 12px; color: var(--muted); min-width: 0; }
.right.on { border: 1px solid var(--border); border-top: 3px solid var(--accent); color: var(--ink); background: var(--surface); }
.right .r-top { display: flex; gap: 6px; align-items: center; font-weight: 600; }
.right .r-mark { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; background: var(--surface-2); flex: none; }
.right.on .r-mark { background: var(--accent); color: #fff; }
.right .r-val { font-size: 18px; font-weight: 650; margin-top: 6px; font-variant-numeric: tabular-nums; }
.right:not(.on) .r-val { font-size: 13px; font-weight: 500; }
.right .r-sub { font-size: 11px; color: var(--muted); }
.right .r-via { font-size: 11px; color: var(--ink-2); margin-top: 6px; line-height: 1.35; }
.right:not(.on) .r-via { color: var(--muted); }

table.rates td { vertical-align: top; }
table.rates .rr-name { font-weight: 600; }
table.rates .rr-basis { font-size: 11px; color: var(--muted); white-space: normal; max-width: 230px; }
table.rates td.rate b { font-size: 14px; font-weight: 650; }
table.rates td.rate b.off { color: var(--bad); }
table.rates td.rate .blend, table.rates td.rate .contract { display: block; font-size: 11px; color: var(--muted); }
table.rates td.rate.txt .rtxt { font-size: 12px; color: var(--ink-2); white-space: normal; display: inline-block; max-width: 140px; }

.tbar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 8px; }
.tbar .note { margin: 0; }
table.terr td.heat { text-align: center; }
table.terr td.heat b { display: block; font-size: 14px; font-weight: 650; }
table.terr td.heat small { color: var(--ink-2); font-size: 11px; }
table.terr tr.all td, table.terr td.all { font-weight: 650; background: var(--surface-2); }

/* the rate tables fit the page (Alex, 21 Oct 2026: no scrolling left and right): words wrap, a rate and its amount stay
   together, the columns share the width */
.terms table.terr, .terms table.sched, .terms table.rates { table-layout: auto; }
.terms table.terr th, .terms table.terr td { padding: 5px 6px; white-space: normal; }
.terms table.terr td.heat b, .terms table.terr td.heat small, .terms table.terr td.heat .blend { white-space: nowrap; }
.terms table.rates th, .terms table.rates td { padding: 6px 7px; white-space: normal; }
.terms table.rates td.rate .rtline, .terms table.rates td.rate b, .terms table.rates td.rate .blend { white-space: nowrap; }
.terms td.rate.txt .rtxt, .terms table.terr td.rate.txt .rtxt { white-space: normal; overflow-wrap: anywhere; max-width: none; display: block;
  text-align: left; font-size: 12px; line-height: 1.35; }
.terms table.sched td.l { white-space: normal; overflow-wrap: anywhere; }
.terms table.sched td.l:first-child { overflow-wrap: normal; min-width: 7em; }
.terms table.sched td.rule { min-width: 260px; }
.terms table.sched td.mixcell { white-space: normal; }
.terms table.sched td.mixcell .mix { white-space: nowrap; }
.terms .says { margin: 4px 0 10px; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--wash); border-radius: 0 8px 8px 0; font-size: 13px; }
.terms .says ul { margin: 4px 0 0 18px; padding: 0; }
.terms .says li { margin: 2px 0; }
/* the contract check: what the agreement says should have been paid, against what was paid (Alex, 21 Oct 2026) */
.terms .check { margin: 4px 0 14px; padding: 10px 14px 6px; border: 1px solid var(--border); border-top: 3px solid var(--accent);
  border-radius: 10px; background: var(--surface); }
.terms .check-h { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 14px; }
.terms .check-say { margin: 8px 0 2px; font-size: 14px; line-height: 1.5; }
.terms .check-how { margin: 2px 0 8px; }
.terms .check h5 { margin: 12px 0 4px; font-size: 13px; }
.terms .check-ex { margin: 10px 0 4px; padding: 6px 10px; background: var(--wash); border-radius: 8px; font-size: 13px; line-height: 1.5; }
.terms .check-notes { margin: 6px 0 4px 18px; padding: 0; }
.terms .check-notes li { margin: 2px 0; }
.terms table.chk td, .terms table.chk th { white-space: normal; }
.terms table.chk td:not(.l) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.terms table.chk tr.pick { cursor: pointer; }
.terms table.chk tr.pick:hover td { background: var(--wash); }
.terms table.chk tr.pick.on td { background: var(--surface-2); font-weight: 600; }
table.sched td.over { color: var(--note-ink); font-weight: 600; }
table.rates .rr-check { display: block; margin-top: 3px; font-size: 11px; text-align: left; white-space: normal; }
table.rates .rr-check.ok { color: var(--good); } table.rates .rr-check.under { color: var(--bad); } table.rates .rr-check.over { color: var(--note-ink); }
@media (max-width: 900px) {
  .terms table.terr th, .terms table.terr td { padding: 4px 4px; font-size: 12px; }
  .terms table.terr td.heat small { display: block; }
}

.agrs { display: flex; flex-direction: column; gap: 8px; }
details.agr { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
details.agr.purchase { border-left: 3px solid var(--s4); }
details.agr > summary { list-style: none; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 92px 80px; gap: 12px;
  align-items: center; padding: 10px 12px; cursor: pointer; border-radius: 10px; }
details.agr > summary::-webkit-details-marker { display: none; }
details.agr > summary:hover { background: var(--wash); }
details.agr .caret::before { content: '▸'; color: var(--ink-2); }
details.agr[open] > summary .caret::before { content: '▾'; }
details.agr[open] > summary { border-bottom: 1px solid var(--border); border-radius: 10px 10px 0 0; }
.a-name { display: flex; flex-direction: column; min-width: 0; }
.a-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.a-type, .a-when { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-num { text-align: right; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.a-num small { color: var(--muted); font-size: 11px; }
.a-body { padding: 8px 14px 14px 40px; }
.a-fields { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 5px 14px; margin: 4px 0 10px; font-size: 13px; }
.a-fields dt { color: var(--muted); }
.a-fields dd { margin: 0; overflow-wrap: anywhere; }
.a-flags { margin: 4px 0 10px; padding: 8px 12px 8px 28px; background: var(--note-bg); color: var(--note-ink); border-radius: 8px; font-size: 12px; }
details.agr.child { background: var(--surface-2); }
details.agr.child > summary { grid-template-columns: 16px minmax(0, 1fr) 170px 92px 80px; padding: 8px 12px; }
details.agr.child .a-body { padding-left: 34px; }

.tl { margin: 2px 0 4px; max-width: 760px; }
.tl svg { display: block; width: 100%; height: auto; overflow: visible; }
.tl .axis { stroke: var(--axis); stroke-width: 1; }
.tl .tick { stroke: var(--grid); stroke-width: 1; }
.tl text { fill: var(--muted); font-size: 10px; }
.tl .stmt { fill: var(--s3); }
.tl .rel { fill: var(--s1); opacity: 0.9; }
.tl .term { stroke: var(--s2); stroke-width: 2; stroke-dasharray: 4 3; }
.tl-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--muted); margin: 2px 0 10px; }
.tl-key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--s1); margin-right: 5px; vertical-align: -1px; }
.tl-key i.stmt { border-radius: 2px; width: 12px; height: 6px; background: var(--s3); }
.tl-key i.term { border-radius: 0; width: 12px; height: 0; border-top: 2px dashed var(--s2); background: none; vertical-align: 3px; }
.a-songs .btn { margin-bottom: 6px; }
.a-songtab { max-height: 520px; overflow: auto; }
table.songs-t td.s-title { font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
table.songs-t td.s-artist { color: var(--ink-2); max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
table.ents td { vertical-align: top; }

@media (max-width: 1100px) { .rights { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .rights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  details.agr > summary, details.agr.child > summary { grid-template-columns: 16px minmax(0, 1fr) auto; }
  details.agr > summary .a-num, details.agr.child > summary .a-when { display: none; }
  .a-body, details.agr.child .a-body { padding-left: 14px; }
  .a-fields { grid-template-columns: minmax(0, 1fr); }
}

/* deal terms v2 (15 Oct 2026): dropdowns, rate schedules, entity cards */
details.drop { border: 1px solid var(--border); border-radius: 8px; margin: 8px 0; background: var(--surface); }
details.drop > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; border-radius: 8px; font-weight: 600; font-size: 13px; }
details.drop > summary::-webkit-details-marker { display: none; }
details.drop > summary:hover { background: var(--wash); }
details.drop .caret::before { content: '▸'; color: var(--ink-2); font-weight: 400; }
details.drop[open] > summary .caret::before { content: '▾'; }
details.drop .d-count { color: var(--muted); font-weight: 500; font-size: 12px; background: var(--surface-2); border-radius: 999px; padding: 0 7px; }
details.drop > .d-body { padding: 4px 10px 10px; }
details.drop.rates { border-left: 3px solid var(--accent); }
details.drop.inner { margin-top: 10px; }
.linkish { border: 0; background: transparent; padding: 0; color: var(--accent-ink); font-weight: 600; text-align: left; cursor: pointer; }
.linkish:hover { text-decoration: underline; }
.warnish { color: var(--note-ink); }
table.rates .rr-name { color: var(--accent-ink); }
table.rates td.rate small, table.terr td.rate small { display: block; font-size: 11px; color: var(--ink-2); }
table.terr td.rate { text-align: center; }
table.sched td { vertical-align: top; }
table.sched td.mixcell { white-space: normal; min-width: 220px; }
table.sched .mix { display: inline-block; margin: 0 10px 2px 0; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
table.sched .mix b { color: var(--ink); font-weight: 650; }
.agr-pick { max-width: min(560px, 100%); font-weight: 600; }
.kid-find { width: 100%; max-width: 520px; margin: 4px 0 8px; }
.tbar input[type="search"] { width: 280px; max-width: 100%; }
.acct-list { margin: 0; padding-left: 18px; font-size: 12px; }
.acct-list li { margin: 2px 0; }
.ents-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ent { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.ent-h { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin-bottom: 4px; }
.ent .a-fields { grid-template-columns: 120px minmax(0, 1fr); margin-bottom: 4px; }
table.hist td.wrap { min-width: 260px; }
@media (max-width: 900px) { .ents-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .tbar input[type="search"] { width: 100%; } .ent .a-fields { grid-template-columns: minmax(0, 1fr); } }
/* rate audit (Checked against the statements) */
table.sched td.ok { color: var(--good); }
table.sched td.off { color: var(--bad); font-weight: 600; }
table.sched td.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
table.terr tr.subcode td { font-size: 12px; opacity: 0.92; }
table.terr tr.subcode td.stick { padding-left: 18px; }
table.terr tr.subcode small { color: var(--ink-2); }
td.rate.rts .rtline { display: flex; gap: 6px; align-items: baseline; justify-content: flex-end; white-space: nowrap; }
td.rate.rts .rtline small { color: var(--ink-2); font-size: 11px; }
td.rate.rts .rtline + .rtline { margin-top: 2px; }
table.sched tr.subcode td { font-size: 12px; }
table.sched tr.subcode td:first-child { padding-left: 18px; color: var(--ink-2); }
/* Files and statements - a deal made from uploads (uploads.js) */
.uploads .up-sum { margin: 2px 0 6px; font-size: 13px; }
.uploads details.up-more { margin-top: 6px; }
.uploads details.up-more > summary { cursor: pointer; font-size: 13px; color: var(--ink-2); padding: 4px 0; }
.uploads table.uploads td { font-size: 12px; vertical-align: top; }
.uploads table.uploads td.why { white-space: normal; max-width: 520px; color: var(--ink-2); }
.uploads table.uploads td.num { text-align: right; font-variant-numeric: tabular-nums; }
.uploads table.uploads th, .uploads table.uploads td { text-align: left; }
a.brand { color: inherit; text-decoration: none; }   /* Recover Royalties: the name links home */
.uploads .up-agr { margin: 8px 0 14px; }

/* agreements read by Claude: fixed columns so long terms wrap instead of squeezing the text */
.uploads details.up-agr { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 8px 0; }
.uploads details.up-agr > summary { cursor: pointer; font-size: 13px; }
.uploads .parties { font-size: 12px; margin: 6px 0; }
.uploads table.agr { table-layout: fixed; width: 100%; }
.uploads table.agr col.c-term { width: 20%; } .uploads table.agr col.c-what { width: 36%; }
.uploads table.agr col.c-quote { width: 30%; } .uploads table.agr col.c-page { width: 5%; } .uploads table.agr col.c-check { width: 9%; }
.uploads table.agr td { white-space: normal; overflow-wrap: anywhere; }
.uploads table.agr td.quote { font-style: italic; color: var(--ink-2); }

/* From income to what was paid (a deal made from uploads with a summary waterfall) */
.earned .up-sum { margin: 2px 0 6px; font-size: 13px; }
.earned details.up-more > summary { cursor: pointer; font-size: 13px; color: var(--ink-2); padding: 4px 0; }
.earned table.uploads td { font-size: 12px; vertical-align: top; text-align: left; }
.earned table.uploads td.num { text-align: right; font-variant-numeric: tabular-nums; }
.earned table.uploads td.why { white-space: normal; max-width: 420px; color: var(--ink-2); }
/* phones (Alex, 21 Oct 2026: most people see it first on a phone): the header scrolls away and takes two short rows,
   the songs keep their key columns, the contract check's rows become cards, wide tables keep their first column */
.swipe-hint { display: none; }
@media (max-width: 700px) {
  .topbar { position: static; padding: 8px 12px; gap: 6px 8px; }
  .topbar .brand { order: 0; font-size: 15px; }
  .topbar .spacer { order: 1; }
  .topbar > .btn, .topbar > a.btn { order: 2; padding: 4px 8px; font-size: 13px; }
  .topbar .deal-pick { order: 3; }
  .topbar .find { order: 4; }
  main { padding: 10px 10px 32px; }
  .controls { gap: 8px 12px; font-size: 14px; }
  #songs th:nth-child(3), #songs td:nth-child(3), #songs th:nth-child(4), #songs td:nth-child(4), #songs th:nth-child(5), #songs td:nth-child(5),
  #songs th:nth-child(7), #songs td:nth-child(7), #songs th:nth-child(9), #songs td:nth-child(9) { display: none; }
  #songs .song { max-width: 36vw; }
  #songs th, #songs td { padding-left: 4px; padding-right: 4px; }
  .terms .hide-sm { display: none; }
  .swipe-hint { display: block; color: var(--muted); font-size: 12px; margin: 2px 0 4px; }
  .terms table.sched:not(.chk) td:first-child, .terms table.sched:not(.chk) th:first-child,
  .terms table.rates td.stick, .terms table.rates th.stick, .terms table.terr td.stick, .terms table.terr th.stick {
    position: sticky; left: 0; z-index: 1; background: var(--surface); max-width: 38vw; }
  .terms table.rates .rr-basis { display: none; }
  /* the contract check: one card per row - each figure with its own label */
  .terms table.chk thead { display: none; }
  .terms table.chk, .terms table.chk tbody, .terms table.chk tr { display: block; width: 100%; }
  .terms table.chk tr { border-bottom: 1px solid var(--border); padding: 6px 2px; }
  .terms table.chk td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 2px 4px; white-space: normal; text-align: right; }
  .terms table.chk td::before { content: attr(data-label); color: var(--muted); text-align: left; }
  .terms table.chk td:first-child { font-weight: 650; text-align: left; }
  .terms .check { padding: 8px 10px 4px; }
  .terms .check-say { font-size: 15px; }
}

/* the website's example dashboard (/demo): says it is invented, and where to upload your own */
.demo-note { padding: 8px 16px; background: #3a2f12; color: #f3e3b5; font-size: 14px; }
.demo-note a { color: #fff; font-weight: 600; }