/* The frame: the notice, the rail of icons, the case list, the workspace and its panes (contract C38 to C42).
   Queue and controls are moderately compact; the room is kept for the case. */

#app { height: 100%; display: flex; flex-direction: column; }

/* ---- the demonstration notice ---- */
.notice {
  flex: none; display: flex; align-items: center; gap: 8px;
  min-height: 28px; padding: 3px 12px;
  background: var(--sim-soft); color: var(--text-2);
  border-bottom: 1px solid var(--line);
  font-size: 13px; line-height: 1.4;
}
.notice-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-who { flex: none; display: flex; align-items: center; gap: 6px; color: var(--text-2); white-space: nowrap; }
.notice-who strong { font-weight: 600; color: var(--text); }

/* ---- the frame ---- */
.frame { position: relative; flex: 1; min-height: 0; display: flex; }

.side { flex: none; display: flex; min-height: 0; }

.rail {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 48px; padding: 7px 0 8px;
  background: var(--rail);
}
.rail .iconbtn { width: 34px; height: 34px; border-radius: var(--r-m); }
.rail-space { flex: 1; }
.rail-who {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-top: 4px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.rail-who:hover { background: var(--accent-hover); }
.rail-who:focus-visible { border-radius: 50%; }

/* ---- the case list ---- */
.queue {
  flex: none; min-height: 0; overflow: hidden;
  width: 0;
  background: var(--side);
  border-right: 1px solid var(--line);
  transition: width var(--t-pane) var(--ease);
}
.frame[data-sidebar="hidden"] .queue { border-right-width: 0; }
.frame[data-sidebar="compact"] .queue { width: var(--queue-compact); }
.frame[data-sidebar="expanded"] .queue { width: var(--queue-expanded); }
.frame { --queue-compact: 352px; --queue-expanded: clamp(680px, calc(100vw - 48px - 640px), 980px); }

/* The list is a grid. Its lists and the button that widens it share the first row; the tools, the filters that
   are on and the panel that unfolds each have a row when they have something to show; the rows take the rest. */
.queue-inner {
  display: grid; height: 100%; width: var(--queue-compact);
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: 44px auto auto auto minmax(0, 1fr);
  grid-template-areas: "head head wider" "tools tools tools" "on on on" "panel panel panel" "body body body";
}
.frame[data-sidebar="expanded"] .queue-inner { width: var(--queue-expanded); }

.queue-head { grid-area: head; min-width: 0; display: flex; align-items: center; padding-left: 20px; }
.queue-wider { grid-area: wider; align-self: center; margin: 0 8px 0 4px; }
.queue-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; }
.tabs { flex: 1; min-width: 0; display: flex; gap: 0; margin-left: -8px; overflow-x: auto; scrollbar-width: none; }
.tab {
  position: relative; flex: none;
  height: 30px; padding: 0 8px;
  border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--text-3);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.tab:hover { background: var(--hover); color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); font-weight: 600; }
.tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 1px; height: 2px;
  border-radius: 2px; background: var(--accent-ink);
}

/* ---- the list's tools: the search, the filters, the order and grouping ---- */
.q-tools { grid-area: tools; min-width: 0; display: flex; align-items: center; gap: 2px; padding: 0 8px 8px; }
.q-tools.is-folding { justify-content: flex-end; }
/* search=icon, for a person with one list: the tools stand beside the list's name, and the head is one row.
   While he searches, the box has the row and the name waits. */
.queue-inner.is-onerow {
  grid-template-rows: 44px auto auto minmax(0, 1fr);
  grid-template-areas: "head tools wider" "on on on" "panel panel panel" "body body body";
}
.queue-inner.is-onerow .q-tools { padding: 0; }
.queue-inner.is-onerow.is-searching { grid-template-areas: "tools tools wider" "on on on" "panel panel panel" "body body body"; }
.queue-inner.is-onerow.is-searching .queue-head { display: none; }
.queue-inner.is-onerow.is-searching .q-tools { padding-left: 8px; }
.queue-inner.is-onerow .q-on:not(:empty), .queue-inner.is-onerow .q-panel.is-open { margin-top: 2px; }
.q-search {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center;
  height: 30px; margin-right: 2px; border-radius: var(--r-m);
  background: var(--hover);
  transition: flex-grow var(--t-pane) var(--ease), background var(--t-fast), box-shadow var(--t-fast);
}
.q-search:hover { background: var(--press); }
.q-search:focus-within { background: var(--raised); box-shadow: inset 0 0 0 1px var(--accent-ink), var(--focus); }
.q-search-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--text-3); }
.q-search-input {
  flex: 1; min-width: 0; height: 30px; padding: 0 6px 0 0;
  border: 0; background: transparent; color: var(--text); font-size: 13px;
}
.q-search-input::placeholder { color: var(--text-3); }
.q-search-input:focus-visible { box-shadow: none; }       /* the box around it shows where the keyboard is */
.q-search-clear { width: 22px; height: 22px; margin-right: 4px; border-radius: 50%; }
/* search=icon: the box is folded into its icon until it is asked for, and grows gently out of it */
.q-search.is-shut { flex-grow: 0; flex-basis: 30px; margin-right: 0; background: transparent; }
.q-search.is-shut .q-search-input, .q-search.is-shut .q-search-clear { display: none; }
.q-search.is-folding:not(.is-shut) .q-search-icon { pointer-events: none; }
.q-tools .iconbtn[aria-expanded="true"] { background: var(--press); color: var(--text); }
.q-tools .iconbtn.has-mark { position: relative; color: var(--accent-ink); }
.q-tools .iconbtn.has-mark::after {
  content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent-ink);
}

/* which filters are on (and, with filters=row, the filters themselves) */
.q-on { grid-area: on; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 8px 8px; }
.q-on:empty { display: none; }
.q-clear { padding: 2px 4px; border-radius: var(--r-s); }

.chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  min-height: 24px; padding: 2px 9px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: transparent; color: var(--text-2);
  font-size: 13px; font-weight: 500; line-height: 1.3; text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.chip:hover { background: var(--hover); color: var(--text); }
.chip[aria-pressed="true"], .chip[aria-checked="true"], .chip.is-on {
  border-color: transparent; background: var(--accent-soft); color: var(--accent-ink);
}
.chip.is-on .icon, .chip.is-menu .icon { margin-right: -3px; opacity: .8; }
.chip.is-menu[aria-expanded="true"] { background: var(--press); color: var(--text); }

/* the panel that unfolds under the tools: the filters, or the order and grouping */
.q-panel {
  grid-area: panel; min-width: 0; display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows var(--t-pane) var(--ease), visibility 0s linear var(--t-pane);
}
.q-panel.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--t-pane) var(--ease), visibility 0s; }
.q-panel-in { min-height: 0; overflow: hidden; }
.q-panel-box {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px;
  max-height: 46vh; overflow-y: auto;
  margin: 0 8px 8px; padding: 10px 12px 12px;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--pane);
}
.q-set h4 { margin-bottom: 6px; color: var(--text-3); font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.q-set .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.q-set-note, .q-set-none { margin-top: 8px; color: var(--text-3); font-size: 13px; line-height: 1.4; }
.q-set-none { margin-top: 0; }
.q-panel-foot { grid-column: 1 / -1; margin: -2px 0 -4px -4px; }
/* in the expanded list there is room: the search box keeps a readable width, the filters sit side by side */
.frame[data-sidebar="expanded"] .q-search { max-width: 380px; }

.queue-body { grid-area: body; min-width: 0; min-height: 0; overflow-y: auto; padding: 0 8px 12px; }
/* live mode: when the cases were read from the store, at the top of the rows (F8); quiet unless the read failed */
.q-fresh { margin: 0 4px 8px; padding: 6px 8px; border-radius: var(--r-s); color: var(--text-3); font-size: 12px; line-height: 1.45; }
.q-fresh[hidden] { display: none; }
.q-fresh.is-warn { background: var(--warn-soft); color: var(--warn); }
.q-fresh-say { display: flex; align-items: flex-start; gap: 6px; margin: 0; overflow-wrap: anywhere; }
.q-fresh-say > svg { flex: none; margin-top: 2px; }
.q-fresh-say > span { flex: 1 1 auto; min-width: 0; }
.q-fresh-acts { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 2px 0 0 19px; }
.q-fresh .linkbtn { font-size: 12px; }
.q-fresh.is-warn .linkbtn { color: inherit; text-decoration: underline; }
.q-fresh-list { margin: 4px 0 0 19px; padding-left: 16px; }
.q-fresh-list[hidden] { display: none; }
.q-fresh .error { margin: 4px 0 0 19px; }
.queue-empty { padding: 16px 8px; color: var(--text-3); font-size: 13px; }
.queue-error { padding: 12px 8px; }
.q-nomatch { padding: 14px 12px 8px; color: var(--text-2); font-size: 13px; overflow-wrap: anywhere; }
.q-nomatch-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* a searched word, where it stands in a row */
.hit { background: var(--hit); color: var(--text); border-radius: 2px; }

.q-level {
  margin: 16px 0 4px; padding: 10px 12px 0;
  border-top: 1px solid var(--line);
  color: var(--text-3); font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}
.q-level:first-child { margin-top: 2px; padding-top: 6px; border-top: 0; }
.q-cols + .q-level { margin-top: 2px; padding-top: 8px; border-top: 0; }
.q-none { padding: 2px 12px 6px; color: var(--text-3); font-size: 13px; }
.q-group {
  margin: 6px 12px 0;
  font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text);
}
/* an advertiser's heading and its cases, one unit: a line above each but the first, the open case's group in accent */
.q-gbox { margin-top: 6px; padding-top: 2px; border-top: 1px solid var(--line-strong); }
.q-gbox:first-child, .q-level + .q-gbox, .q-cols + .q-gbox { margin-top: 0; padding-top: 0; border-top: 0; }
.q-gbox:has(.row.is-current) > .q-group { color: var(--accent-ink); }
.q-gbox.is-many > .row { box-shadow: inset 2px 0 0 var(--line-strong); border-radius: 0 var(--r-m) var(--r-m) 0; }
.q-gbox.is-many > .row.is-current { box-shadow: none; border-radius: var(--r-m); }
.q-gbox.is-many > .row:focus-visible { box-shadow: var(--focus); }

.row {
  position: relative; display: block; width: 100%;
  margin: 1px 0; padding: 8px 8px 9px 12px;
  border: 0; border-radius: var(--r-m);
  background: transparent; text-align: left;
  transition: background var(--t-fast);
}
.row:hover { background: var(--hover); }
.row.is-current { background: var(--press); }
.row.is-current::before {
  content: ""; position: absolute; left: 3px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 3px; background: var(--accent-ink);
}
.row > span, .row-main > span { display: block; }
.row-adv { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.row-problem {
  margin-top: 1px; font-size: 14px; line-height: 1.4; color: var(--text); text-wrap: pretty;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.row.in-group { padding-top: 6px; padding-bottom: 7px; }
.row.in-group .row-problem { margin-top: 0; }
.row.in-group.is-current::before { top: 7px; bottom: 7px; }
.row-where, .row-why { margin-top: 2px; font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; }
/* Rows that would read alike lead with what tells them apart, larger and bold; the words their tactics share and
   the problem they share step back, smaller and in the third grey. Every word stays, in its order. */
.row-where.is-lead { margin-top: 0; font-size: 14.5px; font-weight: 650; line-height: 1.35; color: var(--text); }
.row-adv + .row-where.is-lead { margin-top: 2px; }
.row-where.is-lead .wh-same { font-size: 13px; font-weight: 400; color: var(--text-3); }
.row-problem.is-repeat { margin-top: 1px; font-size: 13px; color: var(--text-3); }
.row-facts { margin-top: 3px; overflow: hidden; font-size: 13px; line-height: 1.45; color: var(--text-3); }
.row-facts-in { display: flex !important; flex-wrap: wrap; margin-left: -13px; }
.row-facts .fact { position: relative; padding-left: 13px; }
.row-facts .fact::before { content: "·"; position: absolute; left: 4px; }
.row-facts .fact.is-due { color: var(--text-2); font-weight: 500; }
.row-facts .fact.is-amount { color: var(--text); }
.row-mark { display: flex !important; gap: 5px; margin-top: 4px; font-size: 13px; line-height: 1.4; }
.row-mark .icon { margin-top: 2px; }
.row-mark.is-urgent { color: var(--danger); font-weight: 500; }
.row-mark.is-manager { color: var(--warn); }
.row-mark.is-urgent, .row-mark.is-manager { width: fit-content; max-width: 100%; padding: 2px 6px; border-radius: var(--r-s); }
.row-mark.is-urgent { background: var(--danger-soft); }
.row-mark.is-manager { background: var(--warn-soft); }
.row-state { display: flex !important; align-items: baseline; gap: 6px; margin-top: 4px; font-size: 13px; color: var(--text-2); }
.dot { flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); transform: translateY(-.5px); }
.dot.is-accent { background: var(--accent-ink); }
.dot.is-warn { background: var(--warn); }
.dot.is-ok { background: var(--ok); }
.dot.is-quiet { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-3); }

.q-closed { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 4px; }
.q-closed-toggle {
  display: flex; align-items: center; gap: 4px; width: 100%;
  height: 30px; padding: 0 8px; border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--text-2); font-size: 13px; font-weight: 500; text-align: left;
}
.q-closed-toggle:hover { background: var(--hover); color: var(--text); }
.q-closed-toggle.is-plain { padding: 0 12px; }
.q-closed-toggle.is-plain:hover { background: transparent; color: var(--text-2); }
.q-closed .row { opacity: .9; }

/* the open case, when the search or the filters leave it out: kept at the foot, apart from the rows found */
.q-kept { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 6px; }
.q-kept-say { padding: 2px 12px 3px; color: var(--text-3); font-size: 13px; line-height: 1.4; }

/* The expanded list: the same rows, with columns beside them. */
.q-cols, .frame[data-sidebar="expanded"] .row {
  display: grid; column-gap: 12px; align-items: start;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(96px, .6fr) minmax(0, 1.3fr);
}
/* The case column is the tallest in nearly every row, so it has the most width; the state keeps room for a state
   that has moved on, which is longer than "To review". */
.q-cols.has-who, .frame[data-sidebar="expanded"] .row.has-who {
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.05fr) minmax(88px, .55fr) minmax(72px, .4fr) minmax(0, 1.15fr);
}
/* A list under 752px wide (a window under 1440 beside the case): who has the case stands under its state, in one
   column, and its width goes to the tactic and to what is wanted. The headings and the words are the same. */
@media (min-width: 1180px) and (max-width: 1439px) {
  .frame:not(.is-over) .q-cols.has-who, .frame[data-sidebar="expanded"]:not(.is-over) .row.has-who {
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.15fr) minmax(88px, .6fr) minmax(0, 1.25fr);
    grid-template-rows: auto 1fr;
  }
  .frame:not(.is-over) .q-cols.has-who > *, .frame[data-sidebar="expanded"]:not(.is-over) .row.has-who > * { grid-row: 1 / span 2; }
  .frame:not(.is-over) .q-cols.has-who > :nth-child(3), .frame[data-sidebar="expanded"]:not(.is-over) .row.has-who > :nth-child(3) { grid-column: 3; grid-row: 1; }
  .frame:not(.is-over) .q-cols.has-who > :nth-child(4), .frame[data-sidebar="expanded"]:not(.is-over) .row.has-who > :nth-child(4) { grid-column: 3; grid-row: 2; }
  .frame[data-sidebar="expanded"]:not(.is-over) .row.has-who > :nth-child(4) { margin-top: 2px; }
}
.q-cols {
  position: sticky; top: 0; z-index: 1;
  padding: 6px 8px 6px 12px; margin-bottom: 2px;
  background: var(--side); border-bottom: 1px solid var(--line);
  color: var(--text-3); font-size: 13px; font-weight: 500;
}
.row-col { font-size: 14px; line-height: 1.4; color: var(--text-2); padding-top: 1px; overflow-wrap: anywhere; }
.row-col .dot { margin-right: 6px; }
/* the tactic on one line, the channel under it */
.row-where-col .wh-t, .row-where-col .wh-c { display: block; }
.row-where-col .wh-t { color: var(--text); }
/* rows that would read alike: the words of the tactic they share step back, what tells them apart is bold */
.row-where-col.is-lead .wh-same { color: var(--text-3); }
.row-where-col.is-lead .wh-diff, .row-where-col.is-lead .wh-c { font-weight: 600; color: var(--text); }
/* a state that has moved on, in the narrow column: the pill wraps as lines of text, not a word to a line */
.row-col .pill.is-wrap { display: inline; padding: 1px 6px; border-radius: 6px; line-height: 1.75; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---- the workspace ---- */
.work { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

.workbar {
  flex: none; display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 8px 0 25px;
}
.workbar-list { display: none; margin-left: -8px; }
.workbar-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-3); }
.workbar-title strong { font-weight: 600; color: var(--text-2); }

.panebtns { flex: none; display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--hover); }
.panebtn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  border: 0; border-radius: 7px;
  background: transparent; color: var(--text-2);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.panebtn:hover { color: var(--text); }
.panebtn[aria-pressed="true"] { background: var(--pane); color: var(--text); box-shadow: 0 0 0 1px var(--line), 0 1px 1px rgba(0, 0, 0, .04); }
/* open, but not on the screen now (another pane is maximized, or a narrow window shows one pane at a time) */
.panebtn[aria-pressed="true"]:not(.is-shown) { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
/* A narrow stage: the pane buttons are icons only. (Four open panes shown one at a time on a wide stage keep their
   words: there is room for them.) */
.work.is-narrow .panebtn { padding: 0 9px; }
.work.is-narrow .panebtn .label { display: none; }

.stage { position: relative; flex: 1; min-height: 0; display: flex; padding: 0 8px 8px; overflow-x: auto; }

.pane {
  flex: 1 1 0; min-width: 0; display: flex; overflow: hidden;
  background: var(--pane);
  border: 1px solid var(--line); border-radius: var(--r-l);
  opacity: 1; visibility: visible;
  transition: flex-grow var(--t-pane) var(--ease), opacity 180ms ease, visibility 0s;
}
.pane.is-off {
  flex-grow: 0 !important; opacity: 0; visibility: hidden; border-width: 0;
  transition: flex-grow var(--t-pane) var(--ease), opacity 100ms ease, visibility 0s linear var(--t-pane);
}
/* A pane that cannot shrink further scrolls the stage sideways rather than being cut off at its edge. */
.pane:not(.is-off) { min-width: 264px; }
/* Four panes side by side: each may be a little narrower, so that the four fit a 1440 window beside the compact list.
   Where they still do not fit, workspace.js shows them one at a time. */
.stage.is-four .pane:not(.is-off), .stage.is-four .pane-inner { min-width: 248px; }
.work.is-single .pane { min-width: 0; }
/* Three panes side by side beside the compact list, in a window under 1600 wide: the list gives back the width it
   has below 1180, so each pane is about 17px wider. No pane opens, closes or moves by itself (C40); only the list
   is narrower, as it is below 1180 wide. A wider window has room for three panes and keeps the list as it is. */
@media (max-width: 1599px) {
  .frame[data-sidebar="compact"]:has(.stage > .pane:not(.is-off) ~ .pane:not(.is-off) ~ .pane:not(.is-off)) { --queue-compact: 300px; }
}
.stage.is-dragging .pane { transition: none; }
.stage.is-dragging { cursor: col-resize; user-select: none; }
.stage.is-still .pane, .stage.is-still .divider { transition: none; }
.pane-inner { flex: 1; min-width: 264px; display: flex; flex-direction: column; min-height: 0; }
.work.is-single .pane-inner { min-width: 0; }

.pane-head {
  flex: none; display: flex; align-items: center; gap: 2px;
  height: 40px; padding: 0 6px 0 16px;
  border-bottom: 1px solid var(--line);
}
.pane-title { flex: none; font-size: 13px; font-weight: 600; color: var(--text-2); }
.pane-note { flex: 1; min-width: 0; margin: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-3); text-align: right; }
.pane-head .iconbtn { width: 28px; height: 28px; }
.pane-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; container: pane / inline-size; }
.pane-foot { container: pane / inline-size; }
.pane-foot { flex: none; border-top: 1px solid var(--line); }
.work.is-single .pane-max { display: none; }

.divider {
  position: relative; flex: none; width: 8px; margin: 0;
  cursor: col-resize; touch-action: none;
  transition: width var(--t-pane) var(--ease);
}
.divider.is-off { width: 0; pointer-events: none; }
.divider::after {
  content: ""; position: absolute; top: 12px; bottom: 12px; left: 3px; width: 2px;
  border-radius: 2px; background: transparent; transition: background var(--t-fast);
}
.divider:hover::after, .divider:focus-visible::after, .stage.is-dragging .divider.is-held::after { background: var(--accent-ink); }
.divider:focus-visible { box-shadow: none; }

.stage-empty {
  position: absolute; inset: 0 8px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 24px; text-align: center; color: var(--text-3); font-size: 14px;
}
.stage-empty .panebtns { background: transparent; gap: 8px; }
.stage-empty .panebtn { background: var(--pane); box-shadow: 0 0 0 1px var(--line); height: 32px; }
.stage-empty .panebtn .label { display: inline; }

/* ---- a page in place of the case: all decisions, settings ---- */
.page {
  flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--pane); border: 1px solid var(--line); border-radius: var(--r-l);
}
.page-body { flex: 1; min-height: 0; overflow-y: auto; }
.page-col { max-width: 880px; margin: 0 auto; padding: 24px 32px 40px; }
.page-col.is-slim { max-width: 560px; }
.page h1 { font: 600 20px/1.3 var(--font-display); margin-bottom: 4px; }
.page-lead { color: var(--text-3); font-size: 13px; margin-bottom: 20px; }

.log { width: 100%; }
.log-row {
  display: grid; grid-template-columns: 148px 132px minmax(0, 1fr); column-gap: 16px;
  padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.45;
}
.log-row:first-child { border-top: 0; }
.log-when, .log-who { color: var(--text-3); font-size: 13px; padding-top: 1px; }
.log-who { color: var(--text-2); }
.log-what .sim { margin-left: 6px; }
.log-case { display: inline; padding: 0; border: 0; background: none; color: var(--accent-ink); font-weight: 500; text-align: left; }
.log-case:hover { text-decoration: underline; }
.log-case-plain { color: var(--text-2); font-weight: 500; }

.set { padding: 20px 0; border-top: 1px solid var(--line); }
.set:first-of-type { border-top: 0; padding-top: 4px; }
.set h2 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.set p { color: var(--text-2); font-size: 13px; }
.set-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.set-row .input { width: 72px; }
.set-row .select { width: auto; min-width: 208px; }
.seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: 9px; background: var(--hover); }
.seg button {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px;
  border: 0; border-radius: 7px; background: transparent; color: var(--text-2); font-size: 13px; font-weight: 500;
}
.seg button[aria-pressed="true"] { background: var(--pane); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.confirm { margin-top: 12px; padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--raised); }
.confirm p { color: var(--text); }
.set .ok-line { margin-top: 8px; color: var(--ok); font-size: 13px; }

/* ---- choosing who you are ---- */
/* The card stands in the middle by its own margins: on a window shorter than the card they give way, and the
   card starts at the top and scrolls, where centring by the box would cut its head off. */
.chooser { flex: 1; display: flex; padding: 24px; overflow: auto; }
.chooser-card { width: 100%; max-width: 420px; margin: auto; }
.chooser h1 { font: 600 22px/1.25 var(--font-display); }
.chooser-lead { margin: 4px 0 20px; color: var(--text-2); }
.chooser-pick {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin-top: 8px; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-l);
  background: var(--pane); text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.chooser-pick:hover { border-color: var(--accent); background: var(--raised); }
.chooser-pick .name { display: block; font-size: 14.5px; font-weight: 600; }
.chooser-pick .what { display: block; margin-top: 1px; font-size: 13px; color: var(--text-2); }
.chooser-pick .icon { color: var(--text-3); }
.chooser-pick .go { margin-left: auto; }
.chooser-note { margin-top: 16px; font-size: 13px; color: var(--text-3); }

/* ---- signing in (live mode): the chooser's card, with a form in it ---- */
.signin-form { display: flex; flex-direction: column; gap: 12px; }
.field { display: block; }
.field-label { display: block; margin-bottom: 4px; color: var(--text-2); font-size: 13px; font-weight: 500; }
.signin-form .input { min-height: 36px; font-size: 14px; }
.signin-go { min-height: 36px; margin-top: 4px; font-size: 14px; }
.signin-form .error { margin-top: 0; }
/* the server's words when a sign-in has ended */
.signin-said {
  margin: -8px 0 16px; padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-m);
  background: var(--raised); color: var(--text); font-size: 13px; line-height: 1.45;
}
/* over the workspace, when a sign-in ends while a person is working: nothing of the cases shows through */
.chooser.is-over { position: fixed; inset: 0; z-index: 50; background: var(--canvas); }

/* ---- the expanded list lying over the workspace, as a page of its own: below 1180 wide, or when the address
        says expanded=over. Choosing a case then puts the list back as it was, and shows the case. ---- */
.frame.is-over[data-sidebar="expanded"] .queue {
  position: absolute; z-index: 5; left: 48px; top: 0; bottom: 0; width: calc(100% - 48px);
  border-right-width: 0; transition: none;
}
.frame.is-over[data-sidebar="expanded"] .queue-inner { width: 100%; }
.frame.is-over[data-sidebar="expanded"] .queue-body { padding: 0 16px 16px; }
.frame.is-over[data-sidebar="expanded"] .queue-head { padding-left: 28px; }
.frame.is-over[data-sidebar="expanded"] .queue-wider { margin-right: 16px; }
.frame.is-over[data-sidebar="expanded"] .q-tools, .frame.is-over[data-sidebar="expanded"] .q-on { padding-left: 16px; padding-right: 16px; }
.frame.is-over[data-sidebar="expanded"] .q-panel-box { margin-left: 16px; margin-right: 16px; }
@media (max-width: 1179px) {
  .frame { --queue-compact: 300px; }
}

/* ---- a phone: the list is a drawer, the rail lies along its foot ---- */
@media (max-width: 639px) {
  .notice-who .long { display: none; }
  .side {
    position: absolute; z-index: 20; left: 0; top: 0; bottom: 0;
    flex-direction: column-reverse;
    width: min(100%, 400px);
    transform: translateX(-102%);
    transition: transform var(--t-pane) var(--ease);
    box-shadow: var(--shadow);
  }
  .frame.is-drawer-open .side { transform: none; }
  .scrim { position: absolute; z-index: 15; inset: 0; background: rgba(0, 0, 0, .32); border: 0; padding: 0; opacity: 0; pointer-events: none; transition: opacity var(--t-pane); }
  .frame.is-drawer-open .scrim { opacity: 1; pointer-events: auto; }
  .rail { flex-direction: row; width: 100%; padding: 6px 8px; border-top: 1px solid var(--line); }
  .rail-who { margin: 0 0 0 4px; }
  .queue, .frame[data-sidebar] .queue { position: static; flex: 1; width: 100%; border-right-width: 0; transition: none; }
  .queue-inner, .frame[data-sidebar] .queue-inner { width: 100%; }
  .queue-wider { display: none; }
  .frame[data-sidebar] .q-search { max-width: none; }
  .queue-inner.is-onerow .q-tools { padding-right: 8px; }     /* the button that widens the list is not here to keep the edge */
  .q-search-input, .signin-form .input { font-size: 16px; }   /* a phone does not zoom into a field whose letters are this size */
  .workbar { padding: 0 8px 0 12px; }
  .workbar-list { display: inline-flex; margin-left: -6px; }
  .stage { padding: 0 6px 6px; }
  .page-col { padding: 20px 16px 32px; }
  .log-row { grid-template-columns: 1fr; row-gap: 2px; }
  .frame[data-sidebar="expanded"] .row, .q-cols { display: block; }
  .q-cols { display: none; }
}
@media (min-width: 640px) {
  .scrim { display: none; }
}

/* ---- a short window: the bars give a little, so the decision is on the first screen ---- */
@media (max-height: 820px) {
  .workbar { height: 40px; }
  .pane-head { height: 36px; }
}