/* The Firstline console's trip page (js/case.js), the strip staff see while working inside a customer org, the customer
   page (js/customers.js) and the agent's desk additions (js/desk.js). Tokens only, so an accent swap follows. */

/* ---------- working inside a customer org ---------- */
.working-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: -8px 0 24px; padding: 10px 16px; background: var(--warn); color: var(--on-warn); font-size: 14px; }
.working-in strong { font-weight: 600; }
.working-links { display: flex; flex-wrap: wrap; gap: 4px 16px; flex: 1 1 auto; }
.working-links a { color: var(--on-warn); font-weight: 500; text-decoration: none; }
.working-links a[aria-current="page"], .working-links a:hover { text-decoration: underline; }
.working-in .btn { background: var(--on-warn); color: var(--warn); box-shadow: none; }
.working-in .btn:hover { background: var(--ground); color: var(--ink); }
.ws-links { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 6px; }
.ws-links .btn { margin: 0; }

/* ---------- one quiet line of what needs a coordinator ---------- */
.needs-line { margin: -8px 0 20px; font-size: 14px; color: var(--ink-muted); }
.needs-line a { color: var(--ink); font-weight: 600; }

/* ---------- the console's trip page ---------- */
.case { display: grid; gap: 22px; min-inline-size: 0; }
.case .page-head { margin-block-end: 0; gap: 10px; }
.case .page-head h1 .mono { font-family: var(--font); font-size: inherit; font-weight: 600; letter-spacing: 0; }
.cs-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 14px; color: var(--ink-muted); }
.cs-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 14px 16px; background: var(--ground-alt); }
.cs-band > div:first-child { display: grid; gap: 2px; flex: 1 1 280px; }
.cs-band.bad strong { color: var(--critical); }
.cs-figs { display: flex; gap: 20px; font-weight: 600; }
.cs-figs > span { display: grid; gap: 0; }
.cs-figs .lbl { font: 500 12px/1.3 var(--font); color: var(--ink-muted); }
.cs-block { display: grid; gap: 10px; min-inline-size: 0; }
.cs-block > h2 { font-size: 16px; }
.cs-block > h2::after { display: none; }
.cs-asks, .cs-help, .cs-items, .cs-done, .cs-legs { list-style: none; margin: 0; padding: 0; }
.cs-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 12px 0; border-block-end: 1px solid var(--line); }
.cs-ask-text { display: grid; gap: 2px; flex: 1 1 320px; }
.cs-help li { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-block: 6px; }
.cs-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.cs-main { display: grid; gap: 26px; min-inline-size: 0; }
.cs-side { display: grid; gap: 22px; min-inline-size: 0; }
.cs-side summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.cs-done li { display: grid; gap: 2px; padding-block: 6px; font-size: 14px; }
.cs-person { display: grid; gap: 8px; min-inline-size: 0; }
.cs-person-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; padding-block-end: 8px; border-block-end: 1px solid var(--line-strong); }
.cs-person-head h3 { font-size: 17px; }
.cs-person-head .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cs-prof { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 14px; }
.cs-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) 220px auto; grid-template-areas: "kind what refs acts" "err err err err"; gap: 4px 16px; align-items: start; padding: 12px 0; border-block-end: 1px solid var(--line); }
.cs-item.off { color: var(--ink-muted); }
.cs-item.off strong { text-decoration: line-through; }
.cs-kind { grid-area: kind; font: 500 12px/1.6 var(--font); color: var(--ink-muted); }
.cs-what { grid-area: what; display: grid; gap: 3px; min-inline-size: 0; font-size: 14px; }
.cs-legs li { display: flex; flex-wrap: wrap; gap: 0 10px; }
.cs-refs { grid-area: refs; display: grid; gap: 4px; justify-items: start; font-size: 14px; }
.cs-conf { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cs-conf .lbl { font: 500 12px/1.3 var(--font); color: var(--ink-muted); }
.cs-acts { grid-area: acts; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.cs-err { grid-area: err; }
.cs-alert { color: var(--critical); font-weight: 600; }
.cs-what .lbl { font: 500 12px/1.3 var(--font); color: var(--ink-muted); margin-inline-end: 4px; }
.cs-asked { display: grid; gap: 2px; padding: 10px 12px; background: var(--ground-alt); }
.cs-asked p { margin: 0; font-weight: 500; }
.cs-opts { display: grid; gap: 4px; max-block-size: 50vh; overflow: auto; }
.cs-opt { display: flex; align-items: start; gap: 10px; padding: 8px 0; border-block-end: 1px solid var(--line); }
.cs-opt > span { display: grid; gap: 2px; }

/* ---------- the desk: column headings, search, problems, receipts beside their file ---------- */
.dk-cols { display: grid; grid-template-columns: 28px minmax(0, 1fr) 176px 110px 64px 150px; gap: 16px; padding: 8px 0 4px; font: 500 12px/1.3 var(--font); color: var(--ink-muted); border-block-end: 1px solid var(--line); }
.dk-case { text-decoration: none; color: var(--ink); }
.dk-case:hover { text-decoration: underline; }
.dk-search input { inline-size: 260px; }
.dk-picks { align-items: end; }
.btn.dk-btn1 { white-space: nowrap; }
.dk-done { margin-block-start: 16px; }
.dk-done summary { cursor: pointer; font-weight: 600; font-size: 14px; padding-block: 8px; }
.dk-item.with-file { grid-template-areas: "org main state acts" "file file file file" "err err err err"; }
.dk-file { grid-area: file; }
.dk-file iframe { inline-size: 100%; block-size: 520px; border: 1px solid var(--line); background: var(--field); }
.dk-incoming { display: grid; gap: 28px; min-inline-size: 0; }
.dk-prob .dk-main { gap: 4px; }

/* ---------- customers ---------- */
.cust-acts { justify-content: end; flex-wrap: nowrap; }
.cust-approvers { list-style: none; margin: 0 0 12px; padding: 0; }
.cust-approvers li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-block: 8px; border-block-end: 1px solid var(--line); }
.add-approver { display: inline-grid; margin-block-start: 12px; }
.add-approver select { inline-size: auto; min-inline-size: 240px; }
.cust .manage-head h1 .swatch { inline-size: 16px; block-size: 16px; }
.setup-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-block-start: 28px; padding: 14px 16px; background: var(--ground-alt); font-weight: 500; }
.sec-save { margin-block-start: 14px; }

@media (max-width: 1080px) {
  .cs-cols { grid-template-columns: minmax(0, 1fr); }
  .cs-item { grid-template-columns: 56px minmax(0, 1fr) 180px; grid-template-areas: "kind what refs" "kind acts acts" "err err err"; }
  .cs-acts { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .dk-cols { display: none; }
  .dk-item.with-file { grid-template-areas: "org state" "main main" "acts acts" "file file" "err err"; }
}
@media (max-width: 720px) {
  .working-in { margin-block-start: -4px; padding: 10px 12px; }
  .cs-item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kind" "what" "refs" "acts" "err"; }
  .cs-figs { gap: 14px; }
  .dk-search input { inline-size: 100%; }
  .dk-search { flex: 1 1 100%; }
  .dk-file iframe { block-size: 360px; }
  .add-approver select { min-inline-size: 0; inline-size: 100%; }
}