/* ═══════════════════════════════════════════════════════════════════════════
   origination.css — the pipeline board, the submission file and its lists.

   Loaded after theme-apple.css (src/web/layout.ts TRACK_STYLESHEETS), so the
   overrides below win without a single !important. Everything here uses the
   theme's own tokens; nothing defines a colour of its own.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the board ───────────────────────────────────────────────────────────── */

/* PIPE-2: each column is its own scroller, so a stage with forty files does not
   push the whole board down — and the stage name and its count stay put at the
   top of that column while the cards under them scroll. */
@media (min-width:601px){
  .board>div{max-height:calc(100vh - 230px); overflow-y:auto; overflow-x:hidden; min-height:0}
  @supports (height:100dvh){ .board>div{max-height:calc(100dvh - 230px)} }
}
.board .col-h{
  position:sticky; top:0; z-index:1;
  background:var(--ground); padding-top:2px;
}
.board .col-h .t{
  font-size:11.5px; font-weight:600; letter-spacing:.02em;
  color:inherit; text-decoration:none; border-radius:var(--r-s, 4px);
}
.board .col-h .t{display:inline-flex; align-items:center; min-height:24px}
@media (max-width:600px){ .board .col-h .t{min-height:44px} }   /* MOBILE-2: measured 28x24 */
.board .col-h .t:hover{text-decoration:underline; text-underline-offset:2px}
.board .col-h .t:focus-visible{box-shadow:var(--focus-ring)}

/* PIPE-1: files past the twelfth were reachable only through search. */
.col-more{
  display:flex; align-items:center; gap:4px;
  font-size:11.5px; padding:6px 2px; color:var(--ink-3); text-decoration:none;
}
.col-more:hover{color:var(--ink); text-decoration:underline; text-underline-offset:2px}
.col-more svg{width:11px; height:11px}
.col-empty{font-size:11.5px; padding:6px 2px}
.board-empty{margin-top:12px; font-size:12.5px}

/* PIPE-3: the flag, the age and the broker all read as words, not as a colour
   and a tooltip. The meta row wraps rather than clipping them.

   .deal is positioned so the visually-hidden flag text inside the card stays
   inside it: .visually-hidden is position:absolute, and with no positioned
   ancestor its containing block was the page, so a card scrolled 700px along a
   horizontally scrolling board pushed the document 328px wide (measured). */
.deal{position:relative}
.deal .m{flex-wrap:wrap; row-gap:4px}
.deal .m .mt{white-space:nowrap}
/* THEME-9: 11px is the type floor. theme-apple.css documents the only four
   exceptions (monograms, the keycap, count pips, the iOS tab bar) and a status
   chip on a board card is none of them. */
.deal .m .st{font-size:11px; padding:0 5px}
.deal .m .stale{
  font-size:11px; color:var(--ink-3); white-space:nowrap;   /* THEME-9 type floor */
  border:1px solid var(--hair); border-radius:var(--r-s, 4px); padding:0 4px;
}
.deal .stip{display:flex; gap:3px; margin-top:8px}
.deal .stip i{height:3px; flex:1; border-radius:2px; background:var(--hair-2)}
/* A requested item is not the same as one nobody has asked for. */
.deal .stip i.half{
  background:linear-gradient(to right, var(--ok) 50%, var(--hair-2) 50%);
}

/* PIPE-2: the picker is the phone's way through six columns. Above 600px the
   columns are all reachable by scrolling, so it is not rendered at all. */
.stage-pick{display:none}
.stage-pick a{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:var(--r-s, 6px);
  font-size:12px; font-weight:500; color:var(--label-2, var(--ink-2));
  text-decoration:none; white-space:nowrap;
}
/* The count sits on the segmented control's own grey fill, not on the white
   card, and --label-3 measured 4.27:1 there (11px, agent-browser at 390).
   --label-2 is the ink for tinted grounds. */
.stage-pick a .n{font-size:11px; color:var(--label-2, var(--ink-2))}
.stage-pick a[aria-current]{
  background:var(--surface); color:var(--label, var(--ink)); font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.10), 0 0 0 .5px rgba(0,0,0,.04);
}
.stage-pick a[aria-current] .n{color:inherit}

/* PIPE-2: between 921 and 1180 the six columns squeezed to ~150px and a
   merchant name wrapped to three lines. */
@media (min-width:921px) and (max-width:1180px){
  .board{grid-template-columns:repeat(6,minmax(180px,1fr)); overflow-x:auto}
}

@media (max-width:600px){
  .stage-pick{
    display:flex; gap:2px; overflow-x:auto; scrollbar-width:none;
    background:rgba(120,120,128,.12); border-radius:var(--r-c, 8px); padding:2px;
    margin-bottom:10px; scroll-snap-type:x proximity;
  }
  .stage-pick::-webkit-scrollbar{display:none}
  .stage-pick a{min-height:44px; scroll-snap-align:start}
  /* An anchor jump must not tuck the column under the sticky top bar. */
  .board>div{scroll-margin-top:12px; scroll-margin-left:14px}
}

/* ── the intake sheet's optional half ────────────────────────────────────── */
/* PIPE-4: at desk width every field is visible with no click; on a phone the
   ten optional ones fold away so Create sits above the fold. A checkbox and two
   rules do it, which means it is right on the first paint with no script. */
/* Named .opt-more, not .more: a bare `.more{display:contents}` also matched the
   kit's `.t-wrap.more` scroller (which then stopped scrolling, so the vintage
   table pushed /app/portfolio 339px sideways at 390) and the shell's
   `dialog.sheet.more`. A layout primitive needs a name nobody else can claim. */
.opt-more{display:contents}
.more-t{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.more-l{
  display:none; align-items:center; gap:6px; cursor:pointer;
  margin:4px 0 2px; padding:10px 0; min-height:44px;
  font-size:13px; font-weight:600; color:var(--accent-ink, var(--navy));
}
.more-l::before{content:"+ "}
.more-t:checked ~ .more-l::before{content:"− "}
.more-b{display:grid}
@media (max-width:920px){
  .more-l{display:flex}
  .more-b{display:none}
  .more-t:checked ~ .more-b{display:grid}
  .more-t:focus-visible ~ .more-l{box-shadow:var(--focus-ring); border-radius:var(--r-s, 4px)}
}

/* ── facts as definition lists ───────────────────────────────────────────── */
/* SUB-16: the pairs are real <dt>/<dd> now. These four rules keep the rendered
   result identical to the paragraphs they replaced. */
.facts.pairs{margin:0}
.facts.pairs dt,.facts.pairs dd{margin:0}
.facts.pairs .fact .l{font-size:11px}   /* THEME-9 type floor */
.facts.pairs .fact .v{margin-top:3px}
/* A contact detail is not prose, and it must not be broken mid-word. The
   Merchant card's Email cell measured 124px and rendered three client rects —
   "ridgewaydentalgr / oup@example.co / m", cutting the TLD in half, each
   fragment carrying its own underline. `break-word` breaks between words and at
   the @ and the dots, never inside a run of letters, and the address takes the
   full width of the card (the `:has()` rule below) so there is somewhere for it
   to go. `title` on the anchor carries the whole address for a pointer.
   The identity column's own `overflow-wrap:anywhere` is narrowed where that
   rule lives, in public/css/people.css, at the same selector plus the
   attribute; this rule covers the facts cards outside that column. */
.facts .fact .v a[href^="mailto:"],.facts .fact .v a[href^="tel:"]{
  overflow-wrap:break-word; word-break:normal; hyphens:none;
}
.facts.pairs .fact:has(> .v > a[href^="mailto:"]){grid-column:1 / -1; border-right:0}

/* A bare <small> is 0.83em of its parent, so inside a 12.5px table cell it
   renders at 10.4px — under the 11px type floor. The contract packet carried
   four of them ("dba …", three × "signature and date"); this is the same floor
   `.v small` sets on a record page. */
.doc table.t small{font-size:11px; color:var(--ink-3)}

@media (max-width:600px){
  /* The theme sends every .facts to one column at this width, which put eight
     mostly-empty Terms rows above the stipulations an operator came for. Short
     facts stay two-up; only the wide ones (money, dates) take a whole row. */
  .facts.pairs{grid-template-columns:1fr 1fr}
  .facts.pairs .fact:nth-child(odd){border-right:1px solid var(--separator-2, var(--hair-2))}
  .facts.pairs.long{grid-template-columns:1fr}
  .facts.pairs.long .fact:nth-child(odd){border-right:0}
  .facts.pairs .fact.w{grid-column:1 / -1; border-right:0}
}

/* SUB-16: when the focus grid stacks, the stipulations and the activity are
   what the operator came for; terms and merchant follow. */
@media (max-width:1180px){
  .g-focus>.focus{order:1}
  .g-focus>.side{order:2}
}

/* ── the submission file ─────────────────────────────────────────────────── */

/* SUB-10: a submission file carries eight actions plus the queue. `.acts` is
   flex:none in app.css, so it took whatever width it wanted and squeezed the
   merchant name into a three-line column (measured at 1440: the title block was
   200px wide). Let the row wrap and give the title its half back. */
.page-head .acts{flex-wrap:wrap; row-gap:8px; justify-content:flex-end; flex:0 1 auto; max-width:64%}
.page-head>div:first-child{min-width:0; flex:1 1 34%}

/* SUB-5: a disabled primary action says why, in words, under itself. */
.fund-w{display:inline-flex; flex-direction:column; gap:2px; align-items:flex-start}
.fund-w .hint{font-size:11.5px; color:var(--ink-3); max-width:34ch}

/* SUB-10: the current step says how long it has been there. */
.steps .step .sub{
  display:block; font-size:11px; font-weight:400;   /* THEME-9 type floor */
  color:var(--ink-3); margin-top:2px; white-space:nowrap;
}

/* SUB-15: stepping through a stage without going back to the list. */
.queue{display:inline-flex; align-items:center; gap:2px}
.queue .q-n{font-size:11.5px; color:var(--ink-3); padding:0 4px; white-space:nowrap}
.queue .btn.icon.off{opacity:.35; pointer-events:none}
.queue a[rel="prev"] svg{transform:rotate(90deg)}
.queue a[rel="next"] svg,.queue span:last-child svg{transform:rotate(-90deg)}
.queue span:first-child svg{transform:rotate(90deg)}

/* SUB-4: what the numbers in the sheet come to, laid out where they are typed. */
.totals{
  margin-top:12px; padding:10px 12px;
  background:var(--surface-2); border:1px solid var(--hair); border-radius:var(--r-m, 8px);
}
/* 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. */
.totals .t-h{font-size:11px; font-weight:600; letter-spacing:0; color:var(--ink-3); margin:0 0 6px}
.totals .facts{border:0}
.totals .fact{padding:5px 0; border-bottom:0}
.totals .fact:nth-child(odd){border-right:0}
.totals .hint{display:block; margin-top:6px; font-size:11px; color:var(--ink-3)}

/* SUB-5: the gate card at offer stage is a preview, not a checklist to work. */
.card.ahead{opacity:.72}
.card.ahead .btn,.card.ahead .quiet-link{pointer-events:none; opacity:.6}

/* SUB-13: one warning per line, each naming the number it was raised on. */
.warn-foot .warn-l{display:block}
.warn-foot .warn-l + .warn-l{margin-top:3px}

/* ── SUB-17: the activity timeline ───────────────────────────────────────── */
/* The kit's .tl draws the rail and the dots; these add the day headers and the
   right-aligned time. No animation, and both survive print. */
.tl-day{
  list-style:none; position:relative;
  font-size:11px; font-weight:600; letter-spacing:0;
  color:var(--ink-3); padding:2px 0 8px 20px;
}
.tl-day:not(:first-child){margin-top:6px}
.tl-i{display:flex; align-items:flex-start; gap:8px}
.tl-i>div{flex:1; min-width:0}
.tl-time{
  font-size:11px; color:var(--ink-3); white-space:nowrap;
  font-variant-numeric:tabular-nums; padding-top:1px;
}

@media print{
  html .tl-day{color:#000}
  html .tl-time{color:#333}
  html .stage-pick,html .col-more,html .queue{display:none}
}

@media (prefers-reduced-motion:reduce){
  .tl-i,.tl-d{transition:none; animation:none}
}