/* Styles for the cases screen (step 4). Tokens only, no raw colors. The m- case list kit is made of divs; the inbox is a real table
   that turns into two-line rows inside a narrow box, the same way the kit's case row does. */

.cs-box { margin-top: 4px; }
.cs-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cs-table thead th {
  text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--hair);
  font: 500 11.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft);
}
.cs-table td { padding: 13px 16px; border-top: 1px solid var(--hair); vertical-align: middle; }
.cs-table tbody tr:first-child td { border-top: 0; }
.cs-table tbody tr { cursor: pointer; }
.cs-table tbody tr:hover { background: var(--veil); }
.cs-table tr.is-pick { background: var(--m-2); }
.cs-table tr.is-pick td:first-child { box-shadow: inset 3px 0 0 var(--pink); }
.cs-who b, .cs-due b { display: block; font-weight: 500; }
.cs-who span, .cs-step span, .cs-due span { display: block; color: var(--soft); font-size: 12.5px; font-weight: 400; }
.cs-ref .m-id { font: 500 12.5px/1.4 var(--mono); color: var(--soft); }
.cs-act { text-align: right; white-space: nowrap; }
.cs-act .m-btn { min-height: 34px; }
.cs-nope { display: block; margin-top: 4px; color: var(--soft); font-size: 12.5px; white-space: normal; }
.cs-nope:empty { display: none; }
.cs-next { margin: 14px 0 0; }
.cs-foot { margin-top: 12px; }

@container (max-width: 980px) {
  .cs-table td, .cs-table thead th { padding-inline: 12px; }
  .cs-due span { display: none; }
}
@container (max-width: 760px) {
  .cs-step span { display: none; }
}

/* Two-line rows: the ID and the status on the first line, the client and the step on the second, the deadline and the button on the third. */
@container (max-width: 620px) {
  .cs-table, .cs-table tbody { display: block; }
  .cs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cs-table tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 13px 16px;
    grid-template-areas: "ref status" "who step" "due act"; border-top: 1px solid var(--hair);
  }
  .cs-table tbody tr:first-child { border-top: 0; }
  .cs-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .cs-table tr.is-pick td:first-child { box-shadow: none; }
  .cs-table tr.is-pick { box-shadow: inset 3px 0 0 var(--pink); }
  .cs-ref { grid-area: ref; }
  .cs-status { grid-area: status; justify-self: end; text-align: right; }
  .cs-who { grid-area: who; }
  .cs-step { grid-area: step; }
  .cs-step span, .cs-due span { display: block; }
  .cs-due { grid-area: due; align-self: center; }
  .cs-act { grid-area: act; justify-self: end; }
  .cs-status .m-mark { white-space: normal; }
}