/* The Ledger (js/ledger.js): the overview of the sessions at /agents, one line per session.
   Plain lines and plain controls; by hand are only the marks, the crown, the hand, the small drawings. */

#ledger { display: none; }
body[data-page="roster"] #ledger {
  display: block; grid-column: 2; min-width: 0; min-height: 0; overflow-y: auto; background: var(--surface);
  padding: var(--s-8) var(--gutter) var(--s-10); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.ledger-page { max-width: 1160px; margin-inline: auto; display: grid; gap: var(--s-4); }
.ledger-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-6); }
.ledger-head h2 { font: 800 clamp(2.2rem, 4vw, 3rem)/1.05 var(--display); letter-spacing: -.025em; }
.ledger-head p { font-size: var(--t-lg); color: var(--muted); }
.ledger-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
#ledger kbd { flex: none; font: 500 .68rem/1 var(--mono); padding: 3px 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); color: var(--muted); }
.ledger-find { flex: 1 1 260px; max-width: 360px; display: flex; align-items: center; gap: var(--s-2); height: 40px; padding: 0 10px 0 14px; border-radius: var(--r-md); background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); cursor: text; }
.ledger-find:focus-within { box-shadow: 0 0 0 2px var(--fg); }
.ledger-find input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: max(16px, var(--t-md)); color: var(--fg); appearance: none; -webkit-appearance: none; }
.ledger-find input::-webkit-search-cancel-button { display: none; }
.ledger-link { min-height: 36px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--fg); font: 600 var(--t-sm)/1 var(--font); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.ledger-link:hover { text-decoration-color: currentColor; }
.ledger-link:disabled { color: var(--faint); text-decoration: none; cursor: default; }
.ledger-note { padding: var(--s-2) var(--s-3); border: 1.5px dashed var(--urg-high); border-radius: var(--r-md); font-size: var(--t-sm); }

/* ---- the lines ---- */
.ledger { display: grid; user-select: none; -webkit-user-select: none; }
.ledger-line {
  --c: var(--urg-normal);
  position: relative; display: grid; grid-template-columns: 18px 44px minmax(0, 1.3fr) 104px minmax(0, 1.9fr) minmax(0, 104px) minmax(0, 112px) 88px 132px;
  align-items: center; gap: 0 var(--s-3); min-height: 56px; padding: 0 6px; border-bottom: 1px solid var(--line); outline: 0;
}
.ledger-line[data-urgency="high"] { --c: var(--urg-high); }
.ledger-line[data-urgency="critical"] { --c: var(--urg-critical); }
.ledger-line[data-urgency="low"] { --c: var(--urg-low); }
.ledger-line.is-head { min-height: 36px; border-bottom-color: var(--line-strong); }
@media (any-hover: hover) { .ledger-line:not(.is-head):hover { background: var(--surface-2); } }
.ledger-line.is-cur { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--fg); }
.ledger-line:focus-visible { box-shadow: inset 3px 0 0 var(--accent); }
.ledger-line.is-carried { opacity: .35; }
.ledger-line.is-pairing { box-shadow: inset 0 0 0 2px var(--urg-high); border-radius: var(--r-sm); }
.ledger[data-pairing] .ledger-line[data-id]:not(.is-pairing) { cursor: pointer; }
.ledger-th { justify-self: start; display: inline-flex; gap: 5px; padding: 0; border: 0; background: none; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
button.ledger-th { min-height: 32px; align-items: center; }
button.ledger-th:hover, .ledger-th[aria-sort="ascending"], .ledger-th[aria-sort="descending"] { color: var(--fg); }
.ledger-th i { font-style: normal; }
.ledger-sub { margin: 0; padding: var(--s-6) 6px var(--s-2); border-bottom: 1px solid var(--line-strong); font: 600 var(--t-xs)/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
/* The grip: three plain strokes; there only in your own order. */
.ledger-grip { display: grid; gap: 3px; width: 18px; padding: 10px 2px; }
.ledger-grip[data-grab] { cursor: grab; }
.ledger-grip i { height: 2px; border-radius: 2px; background: var(--line-strong); }
.ledger-line:hover .ledger-grip i { background: var(--muted); }
.ledger-face { position: relative; display: block; width: 40px; height: 40px; }
.ledger-mark { display: block; padding: 0; border: 0; border-radius: 12px; background: none; }
.ledger-face .agent-avatar { width: 38px; height: 38px; }
@media (any-hover: hover) { .ledger-mark:hover .agent-avatar { box-shadow: 0 0 0 2px var(--line-strong); } }
.ledger-face .crown-toggle { left: 5px; top: -14px; }
@media (hover: hover) {
  .ledger-face .crown-toggle[aria-pressed="false"] { opacity: 0; }
  .ledger-line:hover .crown-toggle[aria-pressed="false"], .ledger-line.is-cur .crown-toggle[aria-pressed="false"] { opacity: .5; }
  .ledger-face .crown-toggle[aria-pressed="false"]:is(:hover, :focus-visible) { opacity: 1; }
  /* sent here from a memo that found no crown on the desk (quicksend.js toCrowns): every line shows the crown to give */
  body[data-crown-hint] .ledger-face .crown-toggle[aria-pressed="false"] { opacity: .85; }
}
.ledger-name { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s-2); }
.ledger-rename { max-width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.ledger-name strong { display: block; font: 700 1.02rem/1.25 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (any-hover: hover) { .ledger-rename:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--line-strong); } }
.ledger-name small { font-size: var(--t-xs); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ledger-with { display: inline-flex; align-items: center; gap: 2px; padding-left: 8px; border-radius: var(--r-pill); background: var(--sunken); color: var(--muted); font-size: var(--t-xs); font-weight: 600; white-space: nowrap; max-width: 100%; }
.ledger-with { min-width: 0; }
.ledger-with-names { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ledger-with button { flex: none; width: 26px; height: 24px; padding: 3px; border: 0; border-radius: 50%; background: none; color: inherit; }
.ledger-with button:hover { color: var(--fg); }
.ledger-with .sketch { width: 18px; height: 18px; }
.ledger-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--muted); white-space: nowrap; }
.ledger-state b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ledger-line[data-state="waiting"] .ledger-state { color: var(--urg-critical); }
.ledger-state .agent-badge { flex: none; margin: 0; }
.ledger-sep { font-style: normal; color: var(--faint); margin-inline: -2px; }
.ledger-acts .ledger-menu { display: none; font: 700 1.2rem/1 var(--font); letter-spacing: .05em; }
/* A phone's sheet for one line: plain rows, at the lower edge. */
.ledger-sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; padding: var(--s-3) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface); color: var(--fg); box-shadow: var(--shadow-lg); }
.ledger-sheet[open] { display: grid; gap: 2px; }
/* No veil over the page: a line and a shadow set the sheet off; Escape, Close or a tap beside it closes. */
.ledger-sheet { box-shadow: 0 0 0 1px var(--line-strong), 0 -12px 40px -12px rgb(20 30 25 / .35); }
.ledger-sheet::backdrop { background: transparent; }
.ledger-sheet h3 { padding: var(--s-2) var(--s-3) var(--s-3); font: 800 1.2rem/1.2 var(--display); }
.ledger-sheet-item { min-height: 48px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-md); background: none; color: var(--fg); font: 500 1rem/1.2 var(--font); text-align: left; }
.ledger-sheet-item:hover, .ledger-sheet-item:focus-visible { background: var(--sunken); }
.ledger-sheet-item.is-close { margin-top: var(--s-2); text-align: center; font-weight: 600; background: var(--sunken); }
.ledger-line[data-state="away"] .ledger-state, .ledger-line.is-archived .ledger-state { color: var(--faint); }
.ledger-line[data-state="away"] .ledger-name strong { font-weight: 600; color: var(--muted); }
.ledger-does { min-width: 0; display: flex; align-items: center; gap: 6px; }
.ledger-q { flex: 0 1 auto; min-width: 0; padding: 0; border: 0; background: none; font: 600 var(--t-md)/1.3 var(--font); color: var(--fg); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-q:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.ledger-more { flex: none; min-height: 26px; padding: 0 7px; border: 0; border-radius: var(--r-pill); background: var(--sunken); color: var(--muted); font: 600 var(--t-xs)/1 var(--font); }
.ledger-more:hover { color: var(--fg); }
.ledger-ans { position: relative; flex: none; display: inline-grid; place-items: center; min-width: 38px; height: 34px; padding: 0 9px; border: 0; border-radius: var(--r-sm); background: color-mix(in srgb, var(--c) 10%, var(--surface)); color: color-mix(in srgb, var(--c) 70%, var(--fg)); font: 600 var(--t-sm)/1 var(--font); }
.ledger-ans:first-of-type { margin-left: auto; }
.ledger-ans .sketch { width: 20px; height: 20px; }
.ledger-ans.is-lead { background: var(--c); color: var(--surface); }
.ledger-ans.is-advised { box-shadow: 0 2px 0 var(--urg-high); }
.ledger-ans:hover { box-shadow: inset 0 0 0 2px var(--c); }
.ledger-ans.is-lead:hover { filter: brightness(.92); }
.ledger-ans:disabled { opacity: .4; }
.ledger-task { color: var(--muted); font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-cell { color: var(--muted); font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ledger-acts { display: flex; justify-content: flex-end; gap: 0; }
.ledger-ib { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); }
.ledger-ib:hover { background: var(--sunken); color: var(--fg); }
.ledger-ib .sketch { width: 20px; height: 20px; }
.ledger-line.is-archived { min-height: 46px; }
.ledger-line.is-archived .ledger-name strong { font: 600 var(--t-md)/1.3 var(--font); color: var(--muted); }
.ledger-line.is-archived .agent-avatar { width: 30px; height: 30px; }
.ledger-none { padding: var(--s-6) 6px; color: var(--muted); }
/* Let go here: a line between two lines (move), or a dashed frame (lay together). */
.ledger-line[data-drop="before"]::before, .ledger-line[data-drop="after"]::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--fg); pointer-events: none; }
.ledger-line[data-drop="before"]::before { top: -2px; }
.ledger-line[data-drop="after"]::before { bottom: -2px; }
.ledger-line[data-drop="pair"] { outline: 2px dashed var(--fg); outline-offset: -2px; border-radius: var(--r-sm); }

@media (max-width: 1500px) {
  .ledger-line { grid-template-columns: 18px 44px minmax(0, 1.3fr) 104px minmax(0, 1.9fr) minmax(0, 104px) 88px var(--acts, 132px); }
  .ledger-line > :nth-child(7) { display: none; }
}
@media (max-width: 1240px) {
  .ledger-line { grid-template-columns: 18px 44px minmax(0, 1.2fr) 104px minmax(0, 1.8fr) var(--acts, 132px); }
  .ledger-line > :nth-child(6), .ledger-line > :nth-child(8) { display: none; }
}
/* The selects of a line (its desk, its main agent) have room of their own in the last column, so they never lie on
   the model, "last seen" or the question. The column is as wide in every line (also where a line has no select).
   Up to 1500px the model gives way to them; up to 1360px each select is a small drawn button (its list says the rest). */
@media (min-width: 861px) {
  .ledger { --acts: calc(136px + var(--pick-desk, 0px) + var(--pick-main, 0px)); }
  .ledger:has(select.ledger-desk:not(.ledger-main)) { --pick-desk: 100px; }
  .ledger:has(select.ledger-main) { --pick-main: 120px; }
  .ledger-line { grid-template-columns: 18px 44px minmax(0, 1.3fr) 104px minmax(0, 1.9fr) minmax(0, 104px) minmax(0, 112px) 88px var(--acts, 132px); }
  .ledger-acts .ledger-desk { flex: none; width: 96px; max-width: none; text-overflow: ellipsis; }
  .ledger-acts .ledger-main { width: 116px; }
  .ledger-desk option { color: var(--fg); background: var(--surface); }
}
@media (min-width: 1501px) { .ledger-line { grid-template-columns: 18px 44px minmax(0, 1.3fr) 104px minmax(0, 1.9fr) minmax(0, 104px) minmax(0, 112px) 88px var(--acts, 132px); } }
@media (min-width: 1241px) and (max-width: 1500px) {
  .ledger-line { grid-template-columns: 18px 44px minmax(0, 1.3fr) 104px minmax(0, 1.9fr) minmax(0, 104px) 88px var(--acts, 132px); }
  .ledger:has(select.ledger-desk) .ledger-line { grid-template-columns: 18px 44px minmax(0, 1.3fr) 104px minmax(0, 1.9fr) 88px var(--acts, 132px); }
  /* (Named by class, not a bare :nth-child: a :has() rule whose subject is any element makes the browser restyle
     the whole page after every change to it.) */
  .ledger:has(select.ledger-desk) .ledger-line > :is(.ledger-cell, .ledger-th):nth-child(6) { display: none; }
}
@media (min-width: 861px) and (max-width: 1240px) { .ledger-line { grid-template-columns: 18px 44px minmax(0, 1.2fr) 104px minmax(0, 1.8fr) var(--acts, 132px); } }
@media (min-width: 861px) and (max-width: 1360px) {
  .ledger:has(select.ledger-desk:not(.ledger-main)) { --pick-desk: 38px; }
  .ledger:has(select.ledger-main) { --pick-main: 38px; }
  .ledger-acts .ledger-desk { width: 34px; height: 34px; padding: 0; border-color: transparent; color: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; background: center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808a85' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 9.6Q12 9.2 21.4 9.6M5 10L5.2 19.6M19 10L18.8 19.6M5.2 14.4Q12 14 18.8 14.4'/%3E%3C/svg%3E"); }
  .ledger-acts .ledger-main { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23808a85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 24L4.6 9.6L11 17L16 7L21 17L27.400 9.6L27 24.2Z'/%3E%3C/svg%3E"); }
  .ledger-acts .ledger-desk:hover, .ledger-acts .ledger-desk:focus-visible { background-color: var(--sunken); }
  .ledger-acts .ledger-main:not(:has(option[value=""]:checked)) { border-color: var(--line-strong); }
}
/* ---- phone: mark, name, state and count; a tap opens ---- */
@media (max-width: 860px) {
  body[data-page="roster"] #ledger { grid-column: 1; grid-row: 3; padding: var(--s-5) var(--gutter) var(--s-8); }
  .ledger-line.is-head, .ledger-grip, .ledger-does, .ledger-acts .ledger-ib:not(.ledger-menu), .ledger-find kbd, .ledger-tools .ledger-link { display: none; }
  .ledger-acts .ledger-menu { display: grid; width: 44px; height: 44px; }
  .ledger-with button { width: 36px; height: 36px; }
  .ledger-line { grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 0 var(--s-3); min-height: 60px; padding: 0; }
  /* A line of a pair holds the name and "with …" under it: room above and below, so the name does not touch the rule. */
  .ledger-line:has(.ledger-with) { padding-block: 8px; }
  .ledger-line.is-archived { grid-template-columns: 44px minmax(0, 1fr) auto auto; }
  .ledger-line.is-archived .ledger-state { display: none; }
  .ledger-find { max-width: none; }
  .ledger-face .crown-toggle { pointer-events: none; }
  .ledger-face .crown-toggle[aria-pressed="false"] { display: none; }
}