/* Managerial inbox classifier: the inbox on the left, the documents flowing through two systems into department
   trays on the right. Light, warm white and nude tones only, hex colours only. One accent per system. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("/static/vendor/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("/static/vendor/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("/static/vendor/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("/static/vendor/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("/static/vendor/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --page: #f7f4ee;
  --card: #ffffff;
  --sunken: #fbf9f5;
  --raised: #efe9df;
  --track: #e6ddd0;
  --rule: #e6ddd0;
  --text: #2b211b;
  --text-2: #62554a;
  --text-3: #7b7266;
  --line: #2b211b1a;
  --line-2: #2b211b2e;
  --jev: #9a6848;
  --jev-soft: #f3e9e0;
  --llm: #827568;
  --llm-soft: #eeebe7;
  --alert: #7a5236;
  --manager: #3f2e22;
  --shadow: 0 1px 2px #2b211b0f;
  --r: 8px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh; background: var(--page); color: var(--text);
  font: 400 18px/1.45 var(--sans); padding: 16px 24px 24px; -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
.hidden { display: none !important; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--jev); outline-offset: 2px; }
.field { display: block; color: var(--text-2); font-size: 18px; line-height: 1.3; }

/* ---------- header and presenter bar ---------- */
.screen { display: flex; flex-direction: column; }
.top { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px 24px; flex-wrap: wrap; }
.brand h1 { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }
.brand .strap { margin: 2px 0 0; color: var(--text-2); font-size: 18px; }
.status { display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; color: var(--text-2); font-size: 18px; }
.status .meta b { color: var(--text); font-weight: 500; }
.status .credit { color: var(--text-3); }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px;
  border: 2px solid var(--rule); background: var(--card); font-size: 16px; font-weight: 600; color: var(--text);
}
.chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); }
.chip.live i { background: var(--jev); animation: live 1.6s var(--ease) infinite; }
.chip.sim i { background: var(--llm); }
@keyframes live { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.btn {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--r); border: 2px solid var(--rule);
  background: var(--card); color: var(--text); font-size: 16px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), opacity 160ms var(--ease);
}
.btn:hover:not(:disabled) { background: var(--raised); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.primary { background: var(--text); border-color: var(--text); color: var(--card); }
.btn.primary:hover:not(:disabled) { background: #3d322a; }
.btn.big { height: 50px; padding: 0 22px; font-size: 19px; font-weight: 600; }
.controls { margin-top: 10px; display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.controls label { color: var(--text-2); display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.controls input, .controls select {
  height: 36px; background: var(--card); border: 2px solid var(--rule); border-radius: var(--r); padding: 0 8px; font-size: 16px;
}
.controls input[type=number] { width: 76px; font-family: var(--mono); }
.controls input[type=range] { padding: 0; height: auto; width: 140px; accent-color: var(--jev); border: 0; background: none; }
.controls b { font-size: 16px; font-weight: 500; min-width: 56px; }
.more-btn { color: var(--text-2); }
.more-btn::after { content: ""; width: 7px; height: 7px; margin-left: 10px; border: solid var(--text-2); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.more-btn[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.more-body { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.msg { color: var(--text-2); font-size: 16px; margin-left: 4px; }
.notice { margin: 10px 0 0; padding: 10px 14px; border-radius: var(--r); border: 2px solid var(--alert); background: var(--card); color: var(--alert); font-size: 17px; font-weight: 600; }

/* ---------- the room: inbox on the left, the two systems on the right ---------- */
.room { flex: 1; margin-top: 14px; display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); grid-template-rows: minmax(0, 1fr); gap: 20px; min-height: 0; }
.inbox { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.inbox-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; }
.inbox-head h2 { margin: 0; font-size: 22px; font-weight: 600; }
.inbox-head span { color: var(--text-2); font-size: 18px; }

/* the request in focus is the top sheet of the inbox */
.focus {
  position: relative; z-index: 2; display: flex; flex-direction: column; padding: 20px 26px 20px; background: var(--card);
  border: 2px solid var(--rule); border-radius: var(--r); box-shadow: 0 10px 28px #2b211b14, 0 1px 2px #2b211b14;
}
.focus-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.focus-meta { display: flex; flex-wrap: wrap; align-items: baseline; color: var(--text-2); font-size: 18px; }
.focus-meta b { color: var(--text); font-weight: 600; }
.focus-meta > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 10px 4px; border-radius: 50%; background: var(--text-3); }
.pill {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; white-space: nowrap;
  background: var(--raised); color: var(--text-2); font-size: 16px; font-weight: 600;
}
.focus[data-state="sending"] .pill { background: var(--text); color: var(--card); }
.focus[data-state="done"] .pill { background: var(--jev-soft); color: var(--text); }
.focus-text {
  margin: 16px 0 0; padding: 0; font-size: 28px; line-height: 38px; font-weight: 400; color: var(--text);
  white-space: pre-wrap; overflow-wrap: break-word; min-height: 114px;
}
.focus-text.arrive { animation: arrive 420ms var(--ease); }
@keyframes arrive { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.focus-foot { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.focus-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.focus-hint { margin: 0; color: var(--text-2); font-size: 19px; line-height: 1.4; min-height: 27px; }
/* the two answers to the request in focus, on the request itself */
.focus-answers { margin: 4px 0 0; display: grid; gap: 6px; }
.fa { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 7px 12px; border-radius: var(--r); background: var(--sunken); }
.fa dt { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.fa dt i { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--jev); }
.fa.llm dt i { background: var(--llm); }
.fa dd { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; font-size: 17px; line-height: 1.35; color: var(--text-2); min-height: 26px; }
.fa dd b { font-size: 21px; font-weight: 600; color: var(--text); }
.fa dd .sug { color: var(--text-2); font-size: 15px; }
.fa[data-state="unsent"] dd { color: var(--text-3); }
.fa[data-state="done"] { background: var(--jev-soft); }
.fa.llm[data-state="done"] { background: var(--llm-soft); }
.fa[data-state="done"] dd { animation: arrive 360ms var(--ease); }
.fa[data-state="error"] dd { color: var(--alert); }
.focus-hint b { color: var(--text); font-weight: 600; }

/* the rest of the inbox: new requests, raw and in full, with a way to the requests waiting for a person */
.inbox-bar { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bar-title { font-size: 18px; font-weight: 600; }
.to-review {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: var(--r); border: 2px solid var(--rule);
  background: var(--card); color: var(--text); font-size: 17px; font-weight: 600; text-decoration: none;
}
.to-review:hover { background: var(--raised); }
.to-review::after { content: ""; width: 7px; height: 7px; border: solid var(--text-2); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.to-review b { min-width: 28px; padding: 1px 8px; border-radius: 999px; background: var(--jev); color: var(--card); font-size: 15px; text-align: center; }
.feed { position: relative; flex: 1; min-height: 160px; margin-top: 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.feed ol { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; gap: 10px; will-change: transform; }
.feed li { padding: 14px 20px 16px; background: var(--card); border: 2px solid var(--rule); border-radius: var(--r); box-shadow: 0 2px 6px #2b211b0d; }
.feed .ch { display: block; margin-bottom: 4px; font-size: 16px; color: var(--text-2); }
.feed .tx { display: block; font-size: 20px; line-height: 1.45; color: var(--text); white-space: pre-wrap; overflow-wrap: break-word; }

/* the two systems */
.lanes { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; min-width: 0; min-height: 0; }
.lane {
  display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 14px 20px 12px; background: var(--card);
  border: 2px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow);
}
.lane-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
.lane-head h2 { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 24px; font-weight: 600; white-space: nowrap; }
.lane-head h2 i { width: 14px; height: 14px; border-radius: 3px; background: var(--jev); align-self: center; }
.lane.llm h2 i { background: var(--llm); }
.lane-head small { color: var(--text-2); font-size: 18px; font-weight: 400; }
.figs { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 26px; color: var(--text-2); font-size: 18px; }
.fig { white-space: nowrap; }
.figs b { color: var(--text); font-size: 30px; font-weight: 500; }
canvas.flow { display: block; width: 100%; flex: 1; min-height: 200px; margin-top: 6px; }
.lane-status { margin: 4px 0 0; font-size: 18px; color: var(--text-2); min-height: 26px; }
.lane-status b { color: var(--text); font-weight: 600; }
.lane-status.alert b { color: var(--alert); }

/* the bottom strip: live tone and agreement */
.strip {
  margin-top: 14px; display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; padding: 10px 16px; background: var(--card);
  border: 2px solid var(--rule); border-radius: var(--r); font-size: 18px; color: var(--text-2);
}
.strip .ts-label { color: var(--text-2); }
.ts-bar { display: inline-flex; width: 200px; height: 12px; border-radius: 6px; overflow: hidden; background: var(--raised); }
.ts-bar i { display: block; height: 100%; width: 0; transition: width 600ms var(--ease); }
.ts-text { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.ts-text b { font-weight: 500; }
.ts-text .tg { display: inline-flex; align-items: center; gap: 8px; margin-right: 12px; white-space: nowrap; }
.tk { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.tk.neg, .ts-bar .neg { background: #7a5236; }
.tk.neu, .ts-bar .neu { background: #ddd4c7; }
.tk.pos, .ts-bar .pos { background: #c9a35e; }
.strip .agree { margin-left: auto; }
.strip .agree b { color: var(--text); font-weight: 600; }
.strip a { color: var(--text); text-underline-offset: 3px; }

/* a sheet flying from the request in focus to a system */
.flyer {
  position: fixed; left: 0; top: 0; z-index: 50; width: 64px; height: 80px; margin: -40px 0 0 -32px; border-radius: 4px; pointer-events: none;
  background: repeating-linear-gradient(180deg, #ffffff 0 14px, #e6ddd0 14px 16px); border: 2px solid var(--text); box-shadow: 0 8px 20px #2b211b29;
}
.foot.small { margin-top: 24px; font-size: 14px; color: var(--text-3); }

/* ---------- details below the fold ---------- */
.details { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; scroll-margin-top: 16px; }
.details > .inspector, .details > .foot, .details > .review-panel, .details > .browse { grid-column: 1 / -1; }

/* the human in the loop: every request waiting for a person, with its reason, Jev's guesses and the choice */
.review-panel { padding: 0; scroll-margin-top: 12px; }
.rp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 16px 16px 12px; border-bottom: 2px solid var(--raised); }
.rp-head .lede { margin-bottom: 0; max-width: 72ch; }
.rp-head .seg b { margin-left: 6px; font-size: 13px; color: var(--text-2); }
.rp-dept { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 15px; }
.rp-dept select { height: 36px; border: 2px solid var(--rule); border-radius: var(--r); background: var(--card); padding: 0 8px; font-size: 15px; }
.rp-state { margin: 0; padding: 10px 16px 0; color: var(--text-2); font-size: 15px; }
.rp-list {
  list-style: none; margin: 0; padding: 10px 16px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 10px; align-content: start; max-height: 760px; overflow-y: auto;
}
.rp-list li { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 2px solid var(--raised); border-radius: var(--r); background: var(--card); }
.rp-list li.leaving { opacity: 0; transform: scale(0.98); transition: opacity 280ms var(--ease), transform 280ms var(--ease); }
.rp-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 14px; color: var(--text-2); }
.why { font-weight: 700; border-radius: 4px; padding: 1px 8px; font-size: 13px; }
.why.unsure { border: 1px dashed var(--manager); color: var(--manager); }
.why.manager { border: 1px solid var(--manager); color: var(--manager); }
.rp-guess { margin: 0; font-size: 16px; color: var(--text-2); }
.rp-guess b { color: var(--text); }
.rp-text {
  margin: 0; font-size: 16px; line-height: 1.5; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.rp-text.open { display: block; -webkit-line-clamp: unset; cursor: auto; }
.rp-more { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--text-2); font-size: 14px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pick { display: flex; flex-wrap: wrap; gap: 6px; }
.pick button {
  height: 32px; padding: 0 10px; border-radius: var(--r); border: 2px solid var(--rule); background: var(--card); color: var(--text);
  font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 160ms var(--ease);
}
.pick button:hover:not(:disabled) { background: var(--raised); }
.pick button.guessed { border-color: var(--jev); font-weight: 700; }
.rp-list .empty { grid-column: 1 / -1; color: var(--text-3); font-size: 16px; padding: 24px 4px; border: 0; background: none; }
.card { min-width: 0; padding: 16px; background: var(--card); border: 2px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); }
.card h3 { margin: 0; font-size: 20px; font-weight: 600; }
.card .lede { margin: 4px 0 12px; color: var(--text-2); font-size: 15px; max-width: 80ch; }
.note { color: var(--text-2); font-size: 15px; margin: 12px 0 0; }
.sankey-card { position: relative; display: flex; flex-direction: column; }
.sankey-card #sankey { width: 100%; flex: 1; min-height: 380px; }
.chart-empty { position: absolute; left: 0; right: 0; top: 50%; margin: 0; text-align: center; color: var(--text-3); font-size: 15px; }

.dept {
  display: inline-flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--text);
}
.dept:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-2); }
.mark { font-size: 14px; color: var(--text-2); }
.out { font-size: 14px; color: var(--text-2); }
.out.auto_routed { color: var(--alert); }
.out.manager_decision { color: var(--manager); font-weight: 500; border: 1px solid var(--manager); border-radius: 4px; padding: 0 4px; }
.out.human_review { color: var(--manager); font-weight: 500; border: 1px dashed var(--manager); border-radius: 4px; padding: 0 4px; }

.inspector { padding: 0; scroll-margin-top: 16px; }
.inspector.flash { animation: flash 900ms var(--ease); }
@keyframes flash { 0% { box-shadow: 0 0 0 4px #9a684866; } 100% { box-shadow: var(--shadow); } }
.insp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 16px 16px 12px; border-bottom: 2px solid var(--raised); }
.insp-head .lede { margin-bottom: 0; }
.insp-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.seg { display: inline-flex; padding: 2px; border-radius: 10px; background: var(--raised); }
.seg button {
  height: 34px; padding: 0 12px; border: 0; border-radius: var(--r); background: none; color: var(--text-2);
  font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.seg button[aria-pressed="true"] { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.insp-body { display: grid; grid-template-columns: 248px 1fr; min-height: 520px; }
.insp-nav { display: grid; align-content: start; gap: 2px; padding: 12px 8px; border-right: 2px solid var(--raised); background: var(--sunken); border-bottom-left-radius: var(--r); }
.insp-nav button {
  display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center;
  width: 100%; padding: 8px 10px; border: 2px solid transparent; border-radius: var(--r); background: none; cursor: pointer; text-align: left;
  transition: background-color 160ms var(--ease);
}
.insp-nav button:hover { background: var(--raised); }
.insp-nav button[aria-pressed="true"] { background: var(--card); border-color: var(--rule); }
.insp-nav .name { font-size: 16px; font-weight: 500; }
.insp-nav .count { font: 500 15px var(--mono); color: var(--text-2); }
.insp-nav .sub2 { grid-column: 1 / 3; font-size: 14px; color: var(--text-3); }
.insp-main { padding: 12px 16px 16px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.insp-summary { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.insp-summary .tile { background: var(--sunken); border: 2px solid var(--raised); border-radius: var(--r); padding: 8px 12px; min-width: 120px; }
.insp-summary .tile span { display: block; color: var(--text-2); font-size: 14px; }
.insp-summary .tile b { display: block; font: 500 22px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.insp-from { margin: 0; color: var(--text); font-size: 16px; }
.insp-state { display: flex; gap: 8px; align-items: center; color: var(--text-2); font-size: 14px; min-height: 32px; }
.insp-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--jev); }
.insp-state.held i { background: var(--text-3); }
.insp-state .btn { height: 30px; font-size: 14px; }
.insp-list {
  list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 8px; align-content: start; max-height: 640px; overflow-y: auto;
}
.insp-list li { border: 2px solid var(--raised); border-radius: var(--r); padding: 16px; background: var(--card); display: flex; flex-direction: column; gap: 8px; }
.insp-list li.fresh { animation: slidein 360ms var(--ease); }
.insp-list li.differ { border-color: #7a523640; background: #fdf9f5; }
@keyframes slidein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mi-top { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 14px; }
.mi-top .urgent { color: var(--alert); font-weight: 600; }
.mi-top .hand { color: var(--text); font-weight: 600; border: 1px solid var(--line-2); border-radius: 4px; padding: 0 6px; }
.mi-top .verdict { margin-left: auto; color: var(--text-2); }
.mi-text { margin: 0; font-size: 16px; line-height: 1.55; max-width: 72ch; white-space: pre-wrap; overflow-wrap: anywhere; }
.mi-answers { margin: 0; padding-top: 8px; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 15px; }
.mi-answers div { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: baseline; }
.mi-answers dt { color: var(--text-3); }
.mi-answers dd { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.insp-empty { grid-column: 1 / -1; color: var(--text-3); font-size: 15px; padding: 32px 0; text-align: center; border: 0 !important; background: none !important; }

.tone-card { display: flex; flex-direction: column; }
.tone-now { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tone-now div { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; background: var(--sunken); border: 2px solid var(--raised); border-radius: var(--r); padding: 8px 12px; }
.tone-now span:not(.tone-key) { font-size: 15px; color: var(--text-2); }
.tone-now b { grid-column: 1 / -1; font: 500 24px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.tone-key { width: 10px; height: 10px; border-radius: 2px; background: var(--tk); }
.tone-cap { margin: 8px 0 0; color: var(--text-3); font-size: 14px; }
#tone-chart { width: 100%; height: 180px; margin-top: 4px; }
.tone-card h4 { margin: 16px 0 4px; font-size: 16px; font-weight: 600; }
.tone-depts { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tone-depts button {
  width: 100%; display: grid; grid-template-columns: 148px 1fr 64px; gap: 8px; align-items: center; padding: 4px 8px;
  border: 0; border-radius: var(--r); background: none; cursor: pointer; text-align: left; font-size: 15px;
  transition: background-color 160ms var(--ease);
}
.tone-depts button:hover { background: var(--raised); }
.tone-stack { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--raised); }
.tone-stack i { display: block; height: 100%; }
.tone-depts .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tone-depts b { font: 500 15px var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.tone { font-size: 14px; font-weight: 600; }
.tone.negative { color: var(--alert); }
.tone.neutral { color: var(--text-2); }
.tone.positive { color: #8a6a2a; }

/* ---------- smaller screens ---------- */
@media (min-width: 1101px) and (min-height: 860px) {
  .screen { height: calc(100vh - 32px); }      /* the classroom view is exactly one screen, details scroll below */
}
@media (max-width: 1100px) {
  body { padding: 16px; }
  .room, .details { grid-template-columns: 1fr; grid-template-rows: none; }
  .lanes { grid-template-rows: auto auto; }
  canvas.flow { flex: none; height: 300px; }
  .feed { flex: none; height: 360px; }
  .rp-list { grid-template-columns: 1fr; max-height: none; }
  .fa { grid-template-columns: 1fr; gap: 2px; }
  .insp-body { grid-template-columns: 1fr; }
  .insp-nav { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border-right: 0; border-bottom: 2px solid var(--raised); border-radius: 0; }
  .insp-list { grid-template-columns: 1fr; max-height: 70vh; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .brand h1 { font-size: 24px; }
  .status { gap: 8px 16px; font-size: 16px; }
  .focus { padding: 16px; }
  .focus-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .focus-text { font-size: 22px; line-height: 31px; min-height: 0; }
  .btn.big { height: 46px; font-size: 18px; padding: 0 16px; }
  .lane { padding: 12px; }
  .lane-head { grid-template-columns: 1fr; }
  .lane-head small { display: none; }
  .figs b { font-size: 24px; }
  canvas.flow { height: 400px; }
  .feed { display: none; }  /* on a phone the request in focus and its two answers come first */
  .inbox-bar { flex-wrap: wrap; }
  .to-review { font-size: 15px; white-space: nowrap; }
  .to-review b { font-size: 13px; }
  .answer { white-space: normal; flex-wrap: wrap; }
  .ts-text { flex-wrap: wrap; }
  .strip { gap: 8px 12px; }
  .ts-bar { width: 100%; }
  .strip .agree { margin-left: 0; }
  .insp-list { grid-template-columns: 1fr; }
  .tone-depts button { grid-template-columns: 120px 1fr 56px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .chip.live i, .focus-text.arrive, .fa[data-state="done"] dd, .insp-list li.fresh, .inspector.flash { animation: none; }
  .ts-bar i { transition: none; }
}

/* ---------- source, urgency, next step, browsing ---------- */
.btn.small { height: 30px; padding: 0 10px; font-size: 14px; }
.bar-left { display: inline-flex; align-items: center; gap: 10px; }
.inbox-head .browse-link { margin-left: auto; font-size: 16px; color: var(--text); text-underline-offset: 3px; white-space: nowrap; }
.step { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 4px; border: 1px solid var(--manager); color: var(--manager); font-size: 13px; font-weight: 600; white-space: nowrap; align-self: center; }
.step.human_review { border-style: dashed; }
.step.auto_routed { color: var(--alert); border-color: var(--alert); }
.cg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.rp-list li.u1 { border-left: 4px solid #b9ab9a; }
.rp-list li.u2 { border-left: 6px solid var(--manager); }
.urg { font-weight: 700; font-size: 13px; color: var(--text); border-bottom: 2px solid transparent; }
.urg.u2 { border-bottom-color: var(--manager); }
.waited { color: var(--text-3); }
.browse { padding: 0; scroll-margin-top: 12px; }
.br-list { list-style: none; margin: 0; padding: 10px 16px 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 10px; align-content: start; }
.br-list li { padding: 12px 14px; border: 2px solid var(--raised); border-radius: var(--r); background: var(--card); }
.br-list .ch { font-size: 14px; color: var(--text-2); }
.br-list .tx { margin: 6px 0 0; font-size: 16px; line-height: 1.5; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.br-list .empty { color: var(--text-3); border: 0; background: none; }
.br-foot { display: flex; align-items: center; gap: 12px; padding: 0 16px 14px; color: var(--text-2); font-size: 15px; }
.br-foot .btn:disabled { opacity: 0.4; }
@media (max-width: 1100px) { .br-list { grid-template-columns: 1fr; } }