/* ═══════════════════════════════════════════════════════════════════════════
   deal.css — the advance screen and the two documents it prints.

   Everything here is scoped to something only these screens emit (.idbar,
   .deal-tabs, .menu.named, .dl, .doc-cols) or to a class this track invented.
   Nothing overrides a shared component: app.css, app-ext.css, theme-apple.css
   and components.css belong to other tracks and are read-only here.

   Order matters only in one place: the print block at the end, which has to
   win against the screen rules above it, and does so by repeating the same
   specificity inside @media print.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. the identity bar under the title ─────────────────────────────────── */
/* It lives inside .page-head's <p>, so everything in it is inline: a chip, the
   dates, the copyable id, the broker. Wrapping is the point — on a phone it
   becomes three or four short lines instead of one clipped one. */
.idbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
  margin-top:2px; font-size:12.5px; color:var(--ink-2);
}
.idbar .idb{display:inline-flex; align-items:center; gap:4px; min-width:0}
.idbar .idb .trunc{max-width:26ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.idbar .idc{display:inline-flex; align-items:center; gap:2px}
/* The status chip leads the bar, so it carries a little more weight than a
   chip inside a table row. This replaces three inline style="padding:…"
   overrides that used to sit on the three chips in the markup. */
.idbar > .st{padding:5px 11px 5px 9px; font-size:12px}

/* The renewal chip is a link: it has to look like the chip beside it and still
   answer to a pointer. */
a.st{text-decoration:none}
a.st:hover{filter:brightness(.97)}

/* ── 2. a named menu in the page head ────────────────────────────────────── */
/* components.css styles .menu > summary as a 28px square holding the three-dot
   glyph, which is right for a table row and wrong for "Modify schedule". */
.menu.named > summary{
  width:auto; height:auto; min-height:28px; padding:0 10px; gap:6px;
  display:inline-flex; align-items:center;
  border:1px solid var(--hair); border-radius:var(--r-c);
  background:var(--surface); color:var(--ink); font-size:12.5px; font-weight:500;
}
.menu.named > summary svg{width:11px; height:11px; color:var(--ink-3)}
.menu.named[open] > summary svg{transform:rotate(180deg)}
.menu.named .menu-pop{min-width:236px}

/* ── 3. the tab column ───────────────────────────────────────────────────── */
/* The tabs used to be the header of one big card, which meant every tab body
   had to be hand-written inside it. As their own strip above the content, each
   tab can render a real tableCard and get sorting, paging and the phone card
   layout from the kit. */
.deal-tabs{display:flex; flex-direction:column; gap:12px; min-width:0}
.deal-tabs > .tab-bar{
  background:var(--surface); border:1px solid var(--separator-2, var(--hair));
  border-radius:var(--r); box-shadow:var(--shadow-1); padding:0 10px;
}
.deal-tabs > .tab-bar a{padding:11px 11px 10px}
/* At 390 the strip is 490px in a 360px port and "Syndication" ends 6px from the
   edge, so it looked complete while Documents and Audit sat off-screen with
   nothing to suggest a swipe. The mask fades whichever end still has content —
   the same hint .t-wrap.more gives a scrolling table. */
.deal-tabs > .tab-bar{
  --tb-fade:transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%;
  -webkit-mask-image:linear-gradient(to right, var(--tb-fade));
  mask-image:linear-gradient(to right, var(--tb-fade));
}

/* ── 4. the left column ──────────────────────────────────────────────────── */
.ring-t .sub2{margin-top:2px; color:var(--ink-3)}
.kpis-2{grid-template-columns:1fr 1fr}
.owner-f{display:block; margin-top:3px}
.owner-f .chip-select{max-width:100%; font-size:12.5px}
/* 16px on a phone, like every other select: below that iOS Safari zooms in on
   focus and stays zoomed. */
@media (max-width:600px){ .owner-f .chip-select{font-size:16px} }
.fact .v .trunc{display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom}

.stack-sm{display:flex; flex-direction:column; gap:14px}
.lbl-sm{margin:0 0 3px; font-size:11px; color:var(--ink-3); font-weight:600}
.v-lg{margin:0; font-size:14px; font-weight:500}
.v-lg small{font-weight:400; color:var(--ink-3); font-size:11.5px}
p.mut.sm{margin:2px 0 0; font-size:11.5px}

/* ── 5. the renewal chain and the hint line ──────────────────────────────── */
.chain,.hint-line{
  display:flex; align-items:center; gap:8px; margin:0;
  font-size:12.5px; color:var(--ink-2);
  padding:9px 12px; border:1px solid var(--hair-2); border-radius:var(--r); background:var(--surface-2);
}
.chain svg,.hint-line svg{width:14px; height:14px; flex:none; color:var(--ink-3)}
.chain b{font-weight:600; color:var(--ink)}

/* ── 6. the ledger ───────────────────────────────────────────────────────── */
/* A credit is money going the other way; the minus sign carries the meaning and
   the colour is the second signal, never the only one. */
table.t .credit{color:var(--stop, var(--ink))}
/* A pending row whose banking day has passed: the note explains it and links to
   the console, so it is never a silent stall. */
.stranded{font-size:11.5px; color:var(--bad); text-decoration:underline; text-underline-offset:2px}
table.t td.mono .idc{display:inline-flex; align-items:center; gap:2px}

/* ── 7. the payoff tab ───────────────────────────────────────────────────── */
.card-head.sub-head{border-top:1px solid var(--hair-2)}
.card-head.sub-head h3{margin:0; font:600 12.5px/1.3 var(--ui, inherit); color:var(--ink)}
.next-dates{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:12.5px}
.next-dates li{display:flex; justify-content:space-between; gap:12px; max-width:32ch}
details.raw{margin-top:12px}
details.raw > summary{font-size:12px; color:var(--ink-2); cursor:pointer}
details.raw > summary:focus-visible{outline:none; box-shadow:var(--focus-ring)}
pre.payload{
  margin:8px 0 0; padding:12px; border:1px solid var(--hair-2); border-radius:var(--r-m, var(--r));
  background:var(--surface-2); font-size:11px; line-height:1.5; overflow:auto; max-height:340px;
}

/* ── 8. definition lists ─────────────────────────────────────────────────── */
/* Used by the payoff certificate and by both documents. Two columns on a wide
   screen, stacked pairs on a phone. */
.dl{
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:6px 18px; margin:0; font-size:12.5px;
}
.dl dt{color:var(--ink-3)}
.dl dd{margin:0; font-weight:500; overflow-wrap:anywhere}

/* ── 9. the documents ────────────────────────────────────────────────────── */
/* `.doc` is shared, and public/css/oversight.css builds its report shell on the
   same class and loads after this file: it widens the card to 900px and, in
   print, starts a new page at every `section + section`. A statement is one
   flowing document — three fact blocks and a ledger — so it opts out by name
   rather than by fighting a file this track does not own. */
.doc.doc-stmt{max-width:800px; padding:24px}
.doc-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px 28px; margin-bottom:8px}
.doc-block{min-width:0}
.doc-block > .doc-sub{margin-top:0}
/* A block heading needs air above it when it follows prose; inside .doc-cols
   it starts a grid cell and must not. */
/* Sentence case, at source. layout.ts links the track sheets AFTER
   theme-apple.css, so the theme's un-uppercasing (theme-apple.css:153) lost
   every time and these labels stayed all-caps and letterspaced — including on
   the printed statement. The source strings are already sentence case. */
.doc-sub{margin:20px 0 6px; font:600 12px/1.3 var(--ui, inherit); letter-spacing:0; text-transform:none; color:var(--ink-3)}
.doc-lede{margin:14px 0 0; font-size:12.5px; line-height:1.6; color:var(--ink-2); max-width:70ch}
.doc-lede b{color:var(--ink)}
/* theme-apple.css sizes and places .doc-totals; as a <table> its label column
   has to stay left-aligned or the two columns run into each other. */
table.doc-totals{border-collapse:collapse; font-size:12.5px}
table.doc-totals td{padding:3px 0}
table.doc-totals td.l{text-align:left; white-space:nowrap}
table.doc-totals td:last-child{text-align:right; padding-left:24px; font-variant-numeric:tabular-nums}
.doc .card{margin-top:16px}
.doc .doc-acts{margin:12px 0 4px}

/* ── 10. phone ───────────────────────────────────────────────────────────── */
@media (max-width:600px){
  .idbar{gap:6px 10px}
  .idbar .idb .trunc{max-width:18ch}
  .menu.named > summary{min-height:44px; padding:0 14px}
  /* The page head wraps on a phone, so the menu trigger sits near the LEFT
     edge. components.css anchors .menu-pop with right:0, which then hangs a
     236px panel off the left of the viewport — measured at 390px: the panel's
     centre landed at x = −13 and every item was unclickable. Anchor it to the
     start instead, and never let it be wider than the screen. */
  .menu.named .menu-pop{right:auto; left:0; min-width:0; width:max-content; max-width:calc(100vw - 32px)}
  .deal-tabs > .tab-bar{border-radius:var(--r-c)}
  .kpis-2{grid-template-columns:1fr 1fr}
  .dl{grid-template-columns:minmax(0,1fr); gap:2px}
  .dl dd{margin-bottom:8px}
  .next-dates li{max-width:none}
}

/* ── 11. paper ───────────────────────────────────────────────────────────── */
@media print{
  html body .doc.doc-stmt section + section{break-before:auto; page-break-before:auto}
  html body .doc.doc-stmt section{margin:0 0 10pt}
  /* The tab strip is chrome: print.css hides .tab-bar, so the column collapses
     to the content card on its own. These two are this track's own classes and
     print.css has never seen them. */
  html .named-menu,html .menu.named,html .stranded,html .hint-line{display:none!important}
  html .chain{border:0; background:#fff; padding:0; margin-bottom:6pt}
  html details.raw{display:none!important}
  html .doc-cols{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10pt}
  html .dl{font-size:9.5pt; gap:2pt 12pt}
  html table.doc-totals{font-size:10pt}
  html .doc-lede{font-size:10pt; color:#000}
}