/* ============================================================
   THE MASTER PIPELINE — caseflow.css  (agent A)

   Everything here is prefixed .cf- and nothing outside it is touched. The
   KDS tokens already in styles.css do all the colour work, so this file adds
   no palette of its own.

   THE ONE COSMETIC RULE WORTH EXPLAINING: columns and tiles are tinted by
   [data-code], the roadmap's own 1..16 numbering, so the eye can tell the
   pre-filing half of the board (1–7) from the with-IRCC half (8–9), the
   decision (10–12), the after-care (13–14) and the parked ones (15–16)
   without reading sixteen headings. That grouping is presentation only —
   it is not stored, nothing keys off it, and the sixteen statuses remain a
   flat list exactly as the roadmap prints them.
   ============================================================ */

/* ---------- toolbar ---------- */
.cf-tools { gap: 8px; flex-wrap: wrap; }
.cf-search {
  flex: 1 1 260px; min-width: 180px; max-width: 420px;
  padding: 8px 12px; border: 1px solid var(--stroke); border-radius: var(--r-sm);
  background: var(--paper); font-size: 14px;
}
.cf-sel {
  padding: 8px 10px; border: 1px solid var(--stroke); border-radius: var(--r-sm);
  background: var(--paper); font-size: 13px; max-width: 220px;
}
.cf-prop-n {
  display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 8px;
  background: var(--gold-hi); color: var(--ink); font-size: 11px; font-weight: 700;
}

/* ---------- the unconfirmed mark ----------
   One definition. It must read as "PASSAGE guessed" at every size, so it is
   never the same shape as anything the firm typed. */
.cf-prop {
  display: inline-block; padding: 0 5px; border-radius: 7px;
  border: 1px dashed var(--gold); color: var(--gold-deep);
  background: rgba(216,184,119,.14);
  font-size: 10px; font-weight: 700; line-height: 15px; white-space: nowrap;
  vertical-align: middle;
}

/* ---------- roll-up strip (§7 "cases by stage") ---------- */
.cf-strip {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px; margin: 14px 0 16px;
}
.cf-tile {
  position: relative; text-align: left; padding: 10px 12px 9px;
  border: 1px solid var(--stroke); border-radius: var(--r-md);
  background: var(--paper); box-shadow: var(--shadow-soft);
  transition: transform .12s ease, border-color .12s ease;
}
.cf-tile:hover { transform: translateY(-2px); border-color: var(--gold); }
.cf-tile.on { border-color: var(--gold); background: var(--bone); box-shadow: inset 0 0 0 1px var(--gold); }
.cf-tile-0 { opacity: .55; }
.cf-tile-n { display: block; font-family: var(--disp); font-size: 24px; line-height: 1.1; color: var(--ink); }
.cf-tile-l { display: block; font-size: 11.5px; color: var(--ink-soft); line-height: 1.25; margin-top: 2px; }
.cf-tile-c {
  position: absolute; top: 8px; right: 10px;
  font-size: 10px; font-weight: 700; color: var(--ink-faint);
}
.cf-tile-park { background: var(--bone-2); }
.cf-tile-unplaced { border-style: dashed; }
.cf-tile-unplaced .cf-tile-n { color: var(--gold-deep); }

/* ---------- board ---------- */
.cf-board {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 14px;
  scroll-snap-type: x proximity;
}
.cf-board-one { display: block; }
.cf-board-one .cf-col { width: 100%; }
.cf-col {
  flex: 0 0 248px; width: 248px; scroll-snap-align: start;
  border: 1px solid var(--stroke); border-radius: var(--r-md);
  background: var(--bone); display: flex; flex-direction: column; max-height: 62vh;
}
/* Phase tint — presentation only, see the header. */
.cf-col[data-code="1"], .cf-col[data-code="2"], .cf-col[data-code="3"],
.cf-col[data-code="4"], .cf-col[data-code="5"], .cf-col[data-code="6"],
.cf-col[data-code="7"] { background: var(--bone); }
.cf-col[data-code="8"], .cf-col[data-code="9"] { background: #EFEDE2; }
.cf-col[data-code="10"], .cf-col[data-code="11"], .cf-col[data-code="12"] { background: #EDF0EA; }
.cf-col[data-code="13"], .cf-col[data-code="14"] { background: #F1EEE6; }
.cf-col-park { background: var(--bone-2); }
.cf-col-unplaced { border-style: dashed; border-color: var(--gold); background: rgba(216,184,119,.10); }

.cf-col-h {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px;
  border-bottom: 1px solid var(--stroke-soft);
}
.cf-col-t {
  flex: 1; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--ink); line-height: 1.25;
}
.cf-col-code {
  display: inline-block; min-width: 17px; margin-right: 6px; padding: 0 4px;
  border-radius: 6px; background: var(--ink); color: var(--paper);
  font-size: 10px; text-align: center; line-height: 16px;
}
.cf-col-n { font-family: var(--disp); font-size: 16px; color: var(--ink-soft); }
.cf-col-note { padding: 6px 12px 0; font-size: 11px; color: var(--ink-soft); line-height: 1.35; }
.cf-col-b { padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.cf-empty { text-align: center; color: var(--ink-faint); font-size: 12px; padding: 10px 0; }

/* ---------- card ---------- */
.cf-card {
  background: var(--paper); border: 1px solid var(--stroke-soft); border-radius: var(--r-sm);
  padding: 9px 10px; cursor: pointer; transition: border-color .12s ease, transform .12s ease;
}
.cf-card:hover { border-color: var(--gold); transform: translateY(-1px); }
.cf-c-name { font-weight: 600; font-size: 13.5px; line-height: 1.25; }
.cf-c-type { font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; }
.cf-c-detail { font-size: 11.5px; color: var(--ink); margin-top: 5px; }
.cf-c-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.cf-c-stage {
  font-size: 10.5px; color: var(--ink-faint); border: 1px solid var(--stroke-soft);
  border-radius: 6px; padding: 0 5px; line-height: 16px;
}
.cf-c-who { font-size: 10.5px; color: var(--ink-faint); margin-top: 5px; }
.cf-none { color: var(--ink-faint); font-style: italic; }

.cf-age {
  font-size: 10.5px; font-weight: 700; color: var(--ink-soft);
  background: var(--bone-2); border-radius: 6px; padding: 0 5px; line-height: 16px;
}
.cf-age-old { color: var(--red); background: rgba(140,59,46,.10); }
.cf-due { font-size: 10.5px; color: var(--ink-soft); }
.cf-due.hot { color: var(--red); font-weight: 700; }

/* ---------- roll-up key ---------- */
.cf-key { margin-bottom: 16px; }
.cf-key-note { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 12px; }
.cf-k-stage { margin-top: 14px; }
.cf-k-stage-h { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.cf-k-no {
  display: inline-block; margin-right: 8px; padding: 0 6px; border-radius: 7px;
  background: var(--bone-2); color: var(--ink-soft); font-size: 10.5px; line-height: 17px;
}
.cf-k-tbl td { font-size: 12.5px; padding: 5px 8px; vertical-align: middle; }
.cf-k-arrow { color: var(--ink-faint); width: 24px; text-align: center; }
.cf-k-m b {
  display: inline-block; min-width: 17px; margin-right: 5px; padding: 0 4px;
  border-radius: 6px; background: var(--ink); color: var(--paper);
  font-size: 10px; text-align: center; line-height: 16px;
}
.cf-k-src { white-space: nowrap; }
.cf-k-road { font-size: 10.5px; color: var(--ink-faint); }
.cf-k-firm { font-size: 10.5px; color: var(--green-soft); font-weight: 600; }
.cf-k-prop td { background: rgba(216,184,119,.08); }

/* ---------- the case modal ---------- */
.cf-now {
  border: 1px solid var(--stroke); border-radius: var(--r-md);
  background: var(--bone); padding: 12px 14px; margin: 4px 0 14px;
}
.cf-now-empty { border-style: dashed; border-color: var(--gold); background: rgba(216,184,119,.10); }
.cf-now-m { font-family: var(--disp); font-size: 19px; line-height: 1.2; }
.cf-now-c {
  display: inline-block; min-width: 22px; margin-right: 8px; padding: 0 5px;
  border-radius: 7px; background: var(--ink); color: var(--paper);
  font-size: 12px; font-family: var(--body); text-align: center; line-height: 21px;
  vertical-align: 2px;
}
.cf-now-d { font-size: 13px; color: var(--ink-soft); margin-top: 4px; line-height: 1.45; }
.cf-now-since { font-size: 11.5px; color: var(--ink-faint); margin-top: 5px; }

.cf-resume {
  border: 1px solid var(--gold); border-radius: var(--r-sm);
  background: rgba(216,184,119,.12); padding: 9px 12px; margin-bottom: 14px;
  font-size: 12.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

.cf-lbl {
  display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin-bottom: 8px;
}
.cf-lbl-s { text-transform: none; letter-spacing: 0; font-weight: 400; }
.cf-hint { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }

.cf-stage-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cf-stage-btn {
  display: flex; align-items: center; gap: 6px; padding: 5px 9px;
  border: 1px solid var(--stroke); border-radius: 999px; background: var(--paper);
  font-size: 12px; color: var(--ink-soft);
}
.cf-stage-btn.on { border-color: var(--gold); background: var(--bone); color: var(--ink); font-weight: 600; }
.cf-stage-no {
  display: inline-block; min-width: 16px; text-align: center;
  background: var(--bone-2); border-radius: 5px; font-size: 10px; line-height: 16px;
}
.cf-stage-btn.on .cf-stage-no { background: var(--gold-hi); }
.cf-stage-nm { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cf-det-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 7px; }
.cf-det-btn {
  text-align: left; padding: 8px 10px; border: 1px solid var(--stroke);
  border-radius: var(--r-sm); background: var(--paper); line-height: 1.3;
}
.cf-det-btn:hover { border-color: var(--gold); }
.cf-det-btn.on { border-color: var(--gold); background: var(--bone); box-shadow: inset 0 0 0 1px var(--gold); }
.cf-det-prop { background: rgba(216,184,119,.07); }
.cf-det-l { display: block; font-size: 13px; font-weight: 600; }
.cf-det-m { display: block; font-size: 10.5px; color: var(--ink-faint); margin-top: 3px; }
.cf-det-m b {
  display: inline-block; min-width: 15px; padding: 0 3px; border-radius: 5px;
  background: var(--bone-2); text-align: center;
}

.cf-m-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-m-row-wide { margin: 10px 0 14px; }
.cf-m-btn {
  display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--stroke); border-radius: 999px; background: var(--paper);
  font-size: 12px; color: var(--ink-soft);
}
.cf-m-btn:hover { border-color: var(--gold); }
.cf-m-btn.on { border-color: var(--gold); background: var(--bone); color: var(--ink); font-weight: 600; }
.cf-m-park { background: var(--bone-2); }
.cf-m-c {
  display: inline-block; min-width: 16px; text-align: center;
  background: var(--bone-2); border-radius: 5px; font-size: 10px; line-height: 16px;
}
.cf-m-btn.on .cf-m-c { background: var(--gold-hi); }

/* ---------- history ---------- */
.cf-hist-panel { background: var(--bone); margin-top: 14px; }
.cf-hist { display: flex; flex-direction: column; gap: 2px; }
.cf-hist-row {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--stroke-soft); align-items: baseline;
}
.cf-hist-row:last-child { border-bottom: 0; }
.cf-hist-when { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.cf-hist-what { font-size: 12.5px; line-height: 1.4; }
.cf-hist-from { color: var(--ink-faint); }
.cf-hist-arr { color: var(--ink-faint); }
.cf-hist-det { color: var(--ink-soft); }
.cf-hist-src {
  display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 6px;
  background: var(--bone-2); color: var(--ink-soft); font-size: 10px; line-height: 15px;
}
.cf-hist-who { font-size: 11.5px; color: var(--ink-soft); text-align: right; }
.cf-hist-note {
  grid-column: 1 / -1; font-size: 12px; color: var(--ink-soft);
  border-left: 2px solid var(--stroke); padding-left: 8px; margin-top: 2px;
}

/* ---------- the panel inside the existing case modal ---------- */
.cf-case-panel { background: var(--bone); margin-top: 6px; }
.cf-case-now { font-size: 13.5px; line-height: 1.5; }
.cf-case-since { color: var(--ink-faint); font-size: 11.5px; margin-left: 6px; white-space: nowrap; }
.cf-case-act { margin-top: 8px; }

.cf-note, .cf-err { font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; }
.cf-err { border-left: 3px solid var(--red); }

/* ============================================================
   PHONE — 390px

   The board is sixteen columns; on a phone it becomes one column a screen
   wide that the thumb swipes through, with the roll-up strip above it as
   two-across tiles. The history grid stacks, because a 150px date column
   next to a name leaves nothing for the sentence in between.
   ============================================================ */
@media (max-width: 720px) {
  .cf-strip { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
  .cf-tile { padding: 8px 9px 7px; }
  .cf-tile-n { font-size: 20px; }
  .cf-tile-l { font-size: 10.5px; }
  .cf-search { flex-basis: 100%; max-width: none; }
  .cf-sel { max-width: none; flex: 1 1 100%; }
  .cf-col { flex-basis: 84vw; width: 84vw; max-height: none; }
  .cf-board { scroll-snap-type: x mandatory; }
  .cf-det-row { grid-template-columns: 1fr; }
  .cf-stage-nm { max-width: 46vw; }
  .cf-hist-row { grid-template-columns: 1fr; gap: 2px; }
  .cf-hist-who { text-align: left; }
  .cf-k-tbl td { font-size: 12px; padding: 4px 4px; }
  .cf-k-src { white-space: normal; }
}

/* ---------- a column draws 25 cards and offers the rest ----------
   Added 25 Sep 2026: 400 cases on the board meant 400 cards and 285 KB of
   HTML rebuilt on every tile click. The column header count is still the
   true total. */
.cf-col-more {
  display: block; width: 100%; margin-top: 6px;
  padding: 8px 10px; font: inherit; font-size: 12px; text-align: left;
  color: var(--ink-soft); background: var(--bone);
  border: 1px dashed var(--rule); border-radius: 8px; cursor: pointer;
}
.cf-col-more:hover { color: var(--ink); border-color: var(--gold-deep); }