/* tellers.css -- the ticket counters (tellers.js): tables with a number per state, every number a button. Tokens from core.css. */

.tel-card { width: 1000px; max-width: calc(100vw - 16px); max-height: calc(100vh - 32px); overflow: auto; position: relative; }
.tel-head { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.tel-h { margin: 0; flex: 1; font-size: calc(var(--ui-fs) * 18 / 13); font-weight: 600; color: var(--text-strong); }
.tel-x { background: none; border: 0; color: var(--text-dim); font-size: 22px; line-height: 1; padding: 2px 6px; border-radius: var(--radius-sm); cursor: pointer; }
.tel-x:hover { background: var(--hover); color: var(--text); }
.tel-x:focus-visible, .tel-num:focus-visible, .tel-row:focus-visible { outline: 1px solid var(--focus); outline-offset: 1px; }

.tel-body { display: flex; flex-direction: column; gap: 14px; }
.tel-h3 { margin: 0 0 4px; font-size: calc(var(--ui-fs) * 11 / 13); letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.tel-wrap { overflow-x: auto; }
.tel-table { border-collapse: collapse; width: 100%; }
.tel-table th, .tel-table td { padding: 4px 8px; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
.tel-table thead th { font-weight: 400; color: var(--text-dim); font-size: calc(var(--ui-fs) * 12 / 13); white-space: normal; vertical-align: bottom; }
.tel-table th.tel-key { text-align: left; font-weight: 500; color: var(--text-strong); }
.tel-table .c-open { font-weight: 600; }
.tel-table .c-blocked { background: color-mix(in srgb, var(--attn) 8%, transparent); }
.tel-table .c-done { color: var(--text-dim); }
.tel-table td.tel-stuck { background: color-mix(in srgb, var(--danger) 14%, transparent); box-shadow: inset 0 0 0 1px var(--danger); }
.tel-total th, .tel-total td { border-top: 2px solid var(--rule); font-weight: 600; }
.tel-num { min-width: 36px; min-height: 28px; background: none; border: 1px solid transparent; border-radius: var(--radius-sm); font: inherit; color: var(--text-strong); cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); }
.tel-num:hover { border-color: var(--text-dim); }
.tel-zero { color: var(--text-muted); padding-right: 8px; }
.tel-flow-warn { color: var(--attn); }
.tel-note { color: var(--text-muted); margin: 0; font-size: calc(var(--ui-fs) * 12 / 13); }

.tel-list { position: absolute; inset: 0; z-index: 2; overflow: auto; padding: 14px; background: var(--bg-panel, var(--bg, Canvas)); }
.tel-lh { display: flex; align-items: center; gap: 12px; }
.tel-lt { margin: 0; flex: 1; font-size: calc(var(--ui-fs) * 15 / 13); color: var(--text-strong); }
.tel-search { display: block; width: 100%; min-height: 36px; margin: 10px 0; box-sizing: border-box; }
.tel-rows { display: flex; flex-direction: column; }
.tel-row { display: flex; gap: 10px; align-items: baseline; width: 100%; min-height: 36px; padding: 6px 4px; background: none; border: 0; border-bottom: 1px solid var(--rule); font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.tel-row:hover { background: var(--hover); }
.tel-row .tel-id, .tel-row .tel-prio, .tel-row .tel-who { color: var(--text-dim); white-space: nowrap; font-size: calc(var(--ui-fs) * 12 / 13); }
.tel-why { color: var(--text-dim); white-space: normal; max-width: 45%; font-size: calc(var(--ui-fs) * 12 / 13); }
.tel-rt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tel-none { color: var(--text-muted); text-align: center; margin: 8px 0; }

/* the build-up (laden.js): grey lines where the numbers come */
.tel-table .ld-line { height: 12px; }
.tel-table .ld-line.tel-ph { width: 24px; margin-left: auto; }
.tel-table th.tel-key .ld-line { width: 80px; }