/* servicing — the console, the returns workbench and the schedules list.
   Only what those three screens need; anything reusable belongs in the kit. */

/* ── the business-date bar on the console (CONSOLE-2) ─────────────────────── */
.date-nav{
  display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap;
  margin:0 0 14px;
}
.date-nav .field{margin:0; min-width:170px}
.date-nav .field > span{font-size:11px}
.date-nav .btn{margin-bottom:1px}
/* The chevron points the way the control moves you.
   `icons.chevron` is a DOWN chevron, so rotating it 180° gave "Previous
   banking day" an UP arrow — measured matrix(-1,0,0,-1,0,0) — on a control
   that moves you backwards in time. 90° each way is left and right. */
.date-nav .btn[aria-label="Previous banking day"] svg{transform:rotate(90deg)}
.date-nav .btn[aria-label="Next banking day"] svg{transform:rotate(-90deg)}

/* ── the run card's file block (CONSOLE-6) ────────────────────────────────── */
.run-file{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 16px; border-top:1px solid var(--hair-2); font-size:12px; color:var(--ink-3);
}
.run-file .lbl{font-weight:600; color:var(--ink-2)}
.run-file .mono{color:var(--ink)}

/* ── a sheet's footer row, when the form itself lives in the body ─────────── */
.sheet-foot-form{display:flex; gap:8px; align-items:center; justify-content:flex-end; width:100%}
.sheet-foot-form .btn.ghost{margin-right:auto}

/* a measured figure a sheet must not let the operator miss */
.stop-line{
  margin:0 0 12px; padding:9px 11px; border-radius:var(--r-c);
  background:var(--stop-tint); border:1px solid #D6CEE6; color:#3A2D54; font-size:12.5px;
}

/* ── the returns workbench (RETURNS-8) ────────────────────────────────────── */
/* The group head is a real disclosure: only the title and the chevron toggle it,
   so tapping the guidance text or the count no longer collapses the group. */
details.card > summary.group-t{
  display:flex; align-items:center; gap:7px; cursor:pointer;
  padding:12px 16px 0; list-style:none; width:fit-content; max-width:100%;
}
details.card > summary.group-t::-webkit-details-marker{display:none}
summary.group-t h2{margin:0}
summary.group-t .disc{
  width:14px; height:14px; flex:none; color:var(--ink-3);
  transform:rotate(0deg); transition:transform .12s ease;
}
details[open] > summary.group-t .disc{transform:rotate(90deg)}
summary.group-t:focus-visible{outline:none; box-shadow:var(--focus-ring); border-radius:var(--r-c)}
.group-meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:6px 16px 12px; border-bottom:1px solid var(--hair-2); font-size:12px; color:var(--ink-3);
}

/* the remediation panel under a suspended return */
.remedy{padding:12px 16px; border-top:1px solid var(--hair-2); display:grid; gap:10px}
.remedy h3{margin:0; font-size:12.5px; font-weight:600; color:var(--ink)}
.remedy ul{margin:0; padding-left:18px; display:grid; gap:4px; font-size:12px; color:var(--ink-2)}
.remedy .instr{
  margin:0; padding:9px 11px; border-radius:var(--r-c); background:var(--surface-2);
  border:1px solid var(--hair); font-size:12px; color:var(--ink-2); white-space:pre-wrap;
}
.remedy .acts{display:flex; gap:8px; flex-wrap:wrap}

/* ── the schedules list (SCHED-3, SCHED-4) ────────────────────────────────── */
.day-strip{
  display:flex; gap:8px; overflow-x:auto; padding:12px 16px; scrollbar-width:none;
  border-bottom:1px solid var(--hair-2);
}
.day-strip::-webkit-scrollbar{display:none}
.day-cell{
  flex:0 0 auto; min-width:104px; padding:8px 10px; border:1px solid var(--hair);
  border-radius:var(--r-c); background:var(--surface); display:grid; gap:2px;
  /* It is an <a>, and nothing else set this: all ten cards of the day strip
     rendered fully underlined — title, amount and sub-line. */
  text-decoration:none;
}
.day-cell .d{font-size:11px; color:var(--ink-3); font-weight:600}
.day-cell .v{font-size:14px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.day-cell .n{font-size:11px; color:var(--ink-3)}
.day-cell.today{border-color:var(--navy); background:var(--navy-tint)}
.day-cell.today .d{color:var(--sys-blue-3, var(--navy))}   /* 11px on the blue tint: 3.53:1 with systemBlue */
.day-cell.closed{background:var(--surface-2); color:var(--ink-3)}
.day-cell.closed .v{color:var(--ink-3); font-size:12px; font-weight:500}

/* The per-code select-all, for the width where the header row is gone.
   `table.t.cards thead{display:none}` takes the three `[data-select-all]` boxes
   with it, so on a phone an operator could select one row or every row in the
   view but never one return code. Above 600px the header's own box is the
   control and this one would be a second copy of it. */
.group-all{display:none}
@media (max-width:600px){
  .group-all{
    display:inline-flex; align-items:center; gap:6px; min-height:44px;
    margin-left:auto; font-size:12px; color:var(--ink-2); cursor:pointer;
  }
}

/* ── compact width ────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* CONSOLE-12: the four-step run stepper used to drop "Settled" onto a line of
     its own. Two by two, with the connectors already hidden by app-ext.css. */
  .card-head .steps{
    display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; width:100%;
  }
  .card-head .acts:has(.steps){width:100%}
  .date-nav{gap:6px}
  .date-nav .field{flex:1 1 100%; min-width:0}
  .date-nav .btn{min-height:44px; flex:1 1 auto; justify-content:center}
  .run-file{padding:12px 14px}
  .day-cell{min-width:96px; min-height:44px}
  details.card > summary.group-t{min-height:44px; padding:10px 14px 0}
  .group-meta{padding:6px 14px 10px}
  .remedy{padding:12px 14px}
  .sheet-foot-form{flex-wrap:wrap}
  .sheet-foot-form .btn{min-height:44px; flex:1 1 auto; justify-content:center}
}

/* the schedules totals, above the table because the pager owns the card foot */
.tot-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 16px; border-bottom:1px solid var(--hair-2); font-size:12px; color:var(--ink-3);
}
.tot-row b{color:var(--ink); font-variant-numeric:tabular-nums}
@media (max-width: 600px){ .tot-row{padding:10px 14px} .tot-row .mut{display:none} }

/* A child row explains the row above it — in card mode it has to span the whole
   card rather than sit in the first grid column. */
@media (max-width: 600px){
  table.t.cards tbody tr.child{grid-template-columns:1fr}
  table.t.cards tbody tr.child > td{grid-column:1 / -1}
}

/* A `1fr` grid track floors at min-content, so one unwrappable chip
   ("Schedule suspended automatically") pushed the whole phone card wider than
   the screen. minmax(0,1fr) lets the track shrink and the chip wrap. Scoped to
   the servicing screens; the same fix belongs in the kit — study/requests/servicing.md. */
@media (max-width: 600px){
  main.page details.card table.t.cards tbody tr,
  main.page section.card table.t.cards tbody tr{grid-template-columns:minmax(0,1fr) auto}
  main.page details.card table.t.cards tbody tr:has(td.pick),
  main.page section.card table.t.cards tbody tr:has(td.pick){grid-template-columns:auto minmax(0,1fr) auto}
  main.page table.t.cards .st{white-space:normal}
  main.page table.t.cards td,
  main.page table.t.cards th{min-width:0; overflow-wrap:anywhere}
  /* On a phone the row heading is the tap target for that row: a 17px text
     link is not one. Scoped to the servicing tables (.svc and the schedules
     card) — the same rule belongs in the kit, see study/requests/servicing.md. */
  main.page table.t.cards.svc th.who a,
  main.page #sched-card table.t.cards th.who a{display:inline-flex; align-items:center; min-height:44px}
}