/* ═══════════════════════════════════════════════════════════════════════════
   crosscut.css — notes, documents, follow-ups, the pre-check and the bank card.

   Loaded last of the track stylesheets (src/web/layout.ts TRACK_STYLESHEETS),
   so nothing here needs !important. Every colour is one of the theme's tokens;
   no rule defines a colour of its own, and no rule carries meaning in colour
   alone — each chip has its word beside it.

   Touch targets: every control below is at least 44px tall at 390px, which is
   what scripts/measure.js checks and what the phone loop measured before these
   rules existed.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the note composer (SUB-1) ───────────────────────────────────────────── */

.note-form{
  padding:12px 16px 14px;
  border-bottom:1px solid var(--hair);
  display:flex; flex-direction:column; gap:8px;
}
.note-form .field{margin:0}
.note-form textarea{min-height:56px; resize:vertical}
.note-acts-row{display:flex; justify-content:flex-end}

/* A note keeps the line breaks the person typed. */
.tl-t.note-body{white-space:pre-line}
.tl-i.note .tl-d{background:var(--accent-solid, var(--accent))}
.note-acts{display:flex; gap:4px; margin-top:4px}
.note-acts .inline-form{display:inline}
.tl-m .st{margin-right:4px}

/* The pinned note, repeated under the page head. */
.pin-callout{
  display:flex; gap:8px; align-items:flex-start;
  margin:0 0 12px; padding:10px 12px;
  border:1px solid var(--hair); border-radius:var(--r-c, 10px);
  background:var(--surface-2); color:var(--ink-2); font-size:12.5px;
}
.pin-callout svg{width:14px; height:14px; flex:none; margin-top:2px}
.pin-callout .pin-l{display:block}
.pin-callout .pin-l+.pin-l{margin-top:4px}

/* ── attachments (SUB-2, SUB-12, DEAL-17) ────────────────────────────────── */

.attach{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap}
.attach .file-field{gap:2px}
.attach-s{font-size:11.5px; color:var(--ink-3)}
.attach-s:empty{display:none}

table.t.docs td.act{white-space:nowrap}
table.t.docs td.act .btn+.inline-form{margin-left:4px}
table.t.docs .mono{font-size:11.5px; color:var(--ink-3)}

/* ── the file picker (FORM-9) ────────────────────────────────────────────── */

.file-field{display:flex; flex-direction:column; gap:6px}
.file-btn{
  display:inline-flex; align-items:center; gap:10px;
  min-height:44px; padding:0 14px;
  border:1px solid var(--hair); border-radius:var(--r, 8px);
  background:var(--surface); cursor:pointer;
}
.file-btn.sm{min-height:32px; padding:0 10px; gap:6px}
.file-field.compact{gap:2px}
.file-btn:hover{background:var(--surface-2)}
.file-btn:focus-within{box-shadow:var(--focus-ring)}
.file-l{font-size:12.5px; color:var(--ink-2)}
.file-cta{
  margin-left:auto; font-size:12.5px; font-weight:600;
  color:var(--accent-ink, var(--sys-blue-2));   /* 12.5px: the decoration accent is 4.02:1 */
}
/* The input IS the tap target, laid over the whole button at zero opacity.

   Three measured reasons for exactly this shape:
     * a 1x1 clipped input reads as a DEAD CONTROL to scripts/measure.js — it
       hit-tests the centre of each control's own box, and the centre of a 1px
       input is whatever text happens to sit on top of it;
     * the same 1px input is 44px short, so it also failed the phone pass;
     * and the theme's `.field input{width:100%}` beats a bare `.file-in`, which
       is how an invisible 390px input ended up hanging off the right edge and
       scrolling the whole page sideways.
   Laid over its own label the input is the thing under the thumb, at the
   label's size, inside the label's box. */
.file-field .file-in{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; padding:0; border:0; opacity:0; cursor:pointer;
}
.file-btn{position:relative; overflow:hidden}
.file-btn:focus-within{box-shadow:var(--focus-ring)}
.file-name{font-size:11.5px; color:var(--ink-3)}

/* ── follow-ups (SUB-8, DEAL-16) ─────────────────────────────────────────── */

ul.tasks{list-style:none; margin:0; padding:0}
.task{
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; min-height:44px;
  border-bottom:1px solid var(--hair);
}
.task:last-child{border-bottom:0}
.task-t{flex:1; min-width:0; font-size:12.5px}
.task-t .sub{display:block; font-size:11px; color:var(--ink-3)}
.task .inline-form{display:inline-flex}
/* The title owns a full line as soon as the CARD is narrow — which is a
   container question, not a viewport one. The ≤600px rule below does the same
   thing, but it is gated on the viewport, so at 1440 in the deal page's 320px
   sidebar `span.task-t` measured 83px wide and 141px tall: a seven-line title
   squeezed between "Done", a "Due today" chip and "Cancel". A container query
   fires on the box the row is actually in. */
ul.tasks{container-type:inline-size; container-name:tasks}
@container tasks (max-width:460px){
  .task{flex-wrap:wrap; row-gap:6px}
  .task-t{flex:1 1 100%; order:-1}
}
/* Where @container is not supported the row still reads: the title keeps its
   own line inside any card narrower than the sidebar breakpoint. */
@supports not (container-type:inline-size){
  .card:not(.wide) ul.tasks .task{flex-wrap:wrap; row-gap:6px}
  .card:not(.wide) ul.tasks .task-t{flex:1 1 100%; order:-1}
}

.today-strip{
  margin:0 0 12px; padding:10px 12px;
  border:1px solid var(--hair); border-left:3px solid var(--accent-solid, var(--accent));
  border-radius:var(--r-c, 10px); background:var(--surface);
}
.today-strip a{font-size:12.5px; font-weight:600; text-decoration:none; color:var(--ink)}
.today-strip a:hover{text-decoration:underline; text-underline-offset:2px}

/* The task queue's own filter bar: links, never radios. */
.seg-nav{
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  padding:8px 16px; border-bottom:1px solid var(--hair);
}
.seg-nav a{
  display:inline-flex; align-items:center; min-height:32px; padding:0 10px;
  font-size:12px; color:var(--ink-2); text-decoration:none;
  border:1px solid transparent; border-radius:var(--r-s, 6px);
}
.seg-nav a:hover{background:var(--surface-2)}
.seg-nav a[aria-current="page"]{
  background:var(--surface-2); border-color:var(--hair); color:var(--ink); font-weight:600;
}
.seg-gap{width:12px}

/* ── the pre-check (SUB-19) ──────────────────────────────────────────────── */

ul.precheck{list-style:none; margin:0; padding:0}
.pc{
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 16px; border-bottom:1px solid var(--hair);
}
.pc:last-child{border-bottom:0}
.pc-t{font-size:12.5px; min-width:0}
.pc-t .sub{display:block; font-size:11px; color:var(--ink-3)}
.pc .st{flex:none; margin-top:1px}

/* ── the bank account (CUST-2) ───────────────────────────────────────────── */

.acct-line{font-variant-numeric:tabular-nums}
.acct-v{color:var(--sys-green-text, var(--ink-2))}

/* ── stipulations v2 (SUB-12) ────────────────────────────────────────────── */

.stip-why{
  display:inline-block; margin-left:6px;
  font-size:11px; color:var(--ink-3);
}
/* Four controls on one line, not four lines of one control.
   `flex-wrap:wrap` broke "Attach / Received / Request… / Waive…" onto four
   lines in a row that had 810px of width, blowing each stipulation row to
   153px — five of them filling ~700px of the screen an operator opened the
   file for. The phone rule below keeps the wrap, where it is the right answer. */
.stip-row .row-acts{display:flex; gap:6px; flex-wrap:nowrap; justify-content:flex-end; align-items:center}
.stip-row .row-acts .btn{white-space:nowrap}
.stip-due{font-variant-numeric:tabular-nums}

/* ── two tap targets the phone loop measured under 44px ──────────────────── */
/* Both live on the submission file: the link that clears a funding gate, and
   the Fund button itself — the two controls an operator is most likely to be
   reaching for one-handed. */

@media (max-width:600px){
  .gate-fix{
    display:inline-flex; align-items:center;
    min-height:44px; padding:0 4px;
  }
  .fund-w .btn, .page-head .acts .btn{min-height:44px}
  /* The renewal chain on the advance: a 36px link between two advances. */
  .chain a{display:inline-flex; align-items:center; min-height:44px}
}

/* ── the phone (≤600px) ──────────────────────────────────────────────────── */

@media (max-width:600px){
  .task{flex-wrap:wrap; row-gap:6px}
  .task-t{flex:1 1 100%; order:-1}
  .task .btn{min-height:44px}
  .file-btn.sm{min-height:44px; padding:0 14px}
  .seg-nav{padding:8px 12px}
  .seg-nav a{min-height:44px}
  .seg-gap{display:none}
  .note-form{padding:12px}
  table.t.docs td.act{display:flex; gap:6px; flex-wrap:wrap}
  table.t.docs td.act .btn{min-height:44px}
  .stip-row .row-acts{flex-wrap:wrap; justify-content:flex-start}
  .stip-row .row-acts .btn{min-height:44px}
}

/* Printing a file should print what happened on it, not the controls. */
@media print{
  .note-form, .note-acts, .attach, .today-strip, .seg-nav{display:none}
}