/* Ormsvale Heating & Air: the dispatch board. A concept by ALLOIC.

   Style: a framed sheet. The frame (top bar and the calls waiting) is one cold-morning tint;
   the plan sits on a white sheet inset 8px from the right and bottom, 1px edge, 16px corners, no shadow.

   Grid arithmetic at 1440: calls 304 + sheet 1128 + inset 8 = 1440.
   Sheet content: 1128 - 2 (edge) - 2 x 24 = 1078. Board: 2 (edge) + 152 (technician) + 924 of timeline.
   An hour is 104px at least (a name and "Maintenance" fit a one-hour job at 15px), so the day is
   12 x 104 = 1248 wide: about nine hours show at 1440 and the board scrolls sideways inside its own
   area, never the page. From 1712px wide the whole day fits. With the job drawer open the plan
   keeps 1126 - 372 = 754, 706 of content. */

:root {
  --ground: #edf2f4;        /* the frame */
  --strip: #d5e6eb;         /* the concept strip, one step into the hue */
  --surface: #ffffff;       /* the sheet and cards */
  --raised: #f3f6f7;
  --active: #e3e9ec;
  --frame-edge: #dae1e5;    /* edges that sit on the frame */
  --border: #e3e7ea;        /* edges on the sheet */
  --rule: #edf0f2;
  --control: #c2c9ce;
  --text: #131416;
  --muted: #565b5f;
  --accent: #1b6c80;        /* the one action and live colour */
  --accent-strong: #155a6b;
  --accent-tint: #e1eff3;
  --accent-edge: #a8cdd7;
  --negative: #c4242a;
  --neg-bg: #ffedea;
  --neg-ink: #831c1e;
  --neg-edge: #efb5ae;
  --warn-ink: #92400e;
  --done-bg: #edf0f2;
  --drive: #aab5bc;

  --queue-w: 304px;
  --tech-w: 152px;
  --hour-min: 104px;        /* an hour wide enough for a name and "Maintenance" at 15px */
  --row-h: 70px;
  --gap: 20px;
  --pad: 24px;
  --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
h1, h2, h3 { font-size: inherit; }
button, select { font-family: inherit; }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
[tabindex="-1"]:focus-visible { outline: none; }
.g { width: 14px; height: 14px; flex: none; }

/* ---------- the concept strip: always the first thing in the document ---------- */
.concept { padding: 9px 24px; background: var(--strip); font-size: 15px; line-height: 22px; }
.concept a { color: inherit; font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
.concept a:hover { text-decoration-thickness: 2px; }
.noscript { padding: 24px; font-size: 16px; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--control); border-radius: 6px;
  background: var(--surface); color: var(--text);
  font-size: 15px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), transform 100ms var(--ease-out);
}
.btn:hover { background: var(--raised); border-color: #9aa4ab; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { background: var(--raised); border-color: var(--border); color: #63686d; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-quiet { background: transparent; border-color: transparent; }
.btn-quiet:hover { background: var(--active); border-color: transparent; }
.btn-text {
  min-height: 32px; padding: 4px 0; border: 0; background: none;
  color: var(--accent); font-size: 15px; font-weight: 500; line-height: 1.4; text-align: left;
  text-decoration: underline; text-decoration-color: var(--accent-edge); text-underline-offset: 3px;
  cursor: pointer;
}
.btn-text:hover { text-decoration-color: currentColor; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer;
}
.icon-btn:hover { background: var(--active); }
select {
  width: 100%; height: 44px; padding: 0 10px;
  border: 1px solid var(--control); border-radius: 6px;
  background: var(--surface); color: var(--text); font-size: 16px;
}
select:disabled { background: var(--raised); color: #63686d; }

/* ---------- the frame ---------- */
.topbar { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; color: var(--accent); }
.brand-name { color: var(--text); font-size: 16px; font-weight: 600; white-space: nowrap; }
.screen-name { font-size: 16px; font-weight: 600; line-height: 24px; white-space: nowrap; }
.scope { color: var(--muted); font-size: 15px; white-space: nowrap; }
.top-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.clock { color: var(--muted); font-size: 15px; white-space: nowrap; }
.clock-time { color: var(--text); font-size: 16px; font-weight: 600; }

.queue { padding: 8px 16px 16px; }
.queue-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.queue-head .btn { padding: 0 11px; }
.queue h2 { font-size: 18px; font-weight: 600; line-height: 26px; white-space: nowrap; }
.queue-count { margin-left: 4px; color: var(--muted); font-weight: 400; }
.queue-list { list-style: none; padding: 0; }
.qcard {
  margin-bottom: 10px; padding: 10px 14px 4px;
  background: var(--surface); border: 1px solid var(--frame-edge); border-radius: 8px;
  break-inside: avoid;
}
.qcard.is-urgent { border-left: 4px solid var(--negative); padding-left: 11px; }
.qcard.is-new { animation: card-in 360ms var(--ease-out); }
.q-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 15px; line-height: 22px; }
.q-type { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.q-type .g { color: var(--muted); }
.is-urgent .q-type { color: var(--neg-ink); }
.is-urgent .q-type .g { color: var(--negative); }
.q-wait { color: var(--muted); white-space: nowrap; }
.q-who { margin-top: 2px; font-size: 16px; line-height: 24px; }
.q-name {
  padding: 0; border: 0; background: none; color: var(--text);
  font-size: 16px; font-weight: 600; line-height: 24px;
  text-decoration: underline; text-decoration-color: var(--control); text-underline-offset: 3px; cursor: pointer;
}
.q-name:hover { text-decoration-color: currentColor; }
.q-note { margin-top: 2px; color: var(--muted); font-size: 15px; line-height: 21px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sug { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.sug h3 { margin-bottom: 6px; font-size: 15px; font-weight: 600; line-height: 21px; }
.sug ol { list-style: none; padding: 0; display: grid; gap: 12px; }
.sug-who { font-size: 16px; line-height: 23px; }
.sug-who strong { font-weight: 600; }
.sug-why { margin: 1px 0 8px; color: var(--muted); font-size: 15px; line-height: 21px; }
.sug-none { color: var(--muted); font-size: 15px; line-height: 21px; }
.q-actions { display: flex; gap: 18px; margin-top: 2px; }
.queue-empty { padding: 14px; border: 1px dashed var(--control); border-radius: 8px; color: var(--muted); font-size: 15px; }
.queue-note { padding: 2px 2px 8px; color: var(--muted); font-size: 15px; line-height: 21px; }
.colophon { padding: 8px 16px 20px; color: var(--muted); font-size: 15px; line-height: 21px; }
.colophon-frame { display: none; }
.colophon a { color: inherit; font-weight: 600; text-underline-offset: 3px; }

/* ---------- the sheet ---------- */
.sheet { background: var(--surface); border: 1px solid var(--frame-edge); border-radius: 16px; }
.sheet-main { display: flex; flex-direction: column; gap: var(--gap); padding: var(--pad); min-width: 0; }
.titlerow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 24px; }
.title-text { display: contents; }
.dayline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; min-width: 0; }
.day { font-size: 22px; font-weight: 600; line-height: 28px; letter-spacing: -0.01em; }
.sample { color: var(--muted); font-size: 15px; line-height: 22px; white-space: nowrap; }
.finding { grid-column: 1 / -1; font-size: 16px; line-height: 24px; }
.title-actions { grid-area: 1 / 2; display: flex; gap: 8px; }

.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 8px; }
.fig { min-width: 0; padding: 11px 16px 9px; border-left: 1px solid var(--border); }
.fig:first-child { border-left: 0; }
.fig dt { color: var(--muted); font-size: 15px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fig dd { line-height: 34px; white-space: nowrap; }
.fig .n { font-size: 26px; font-weight: 400; letter-spacing: -0.01em; }
.fig .rest { color: var(--muted); font-size: 15px; }

/* ---------- the day board ---------- */
.board { flex: none; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.board-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--control) transparent; }
.board-inner { position: relative; min-width: calc(var(--tech-w) + 12 * var(--hour-min)); }
.hours, .row { display: grid; grid-template-columns: var(--tech-w) minmax(0, 1fr); }
.hours { height: 32px; border-bottom: 1px solid var(--border); }
.corner, .tech { position: sticky; left: 0; z-index: 6; background: var(--surface); border-right: 1px solid var(--border); }
.corner { padding: 0 12px 0 16px; color: var(--muted); font-size: 15px; line-height: 32px; }
.hours-track { position: relative; }
.hours-track span { position: absolute; top: 0; padding-left: 6px; color: var(--muted); font-size: 15px; line-height: 32px; font-variant-numeric: tabular-nums; }
.row { height: var(--row-h); border-bottom: 1px solid var(--border); }
.row:last-child { border-bottom: 0; }
.tech { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 0 12px 0 16px; }
.tech-name { font-size: 16px; font-weight: 600; line-height: 22px; }
.tech-skills { color: var(--muted); font-size: 15px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tech-hours { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 20px; white-space: nowrap; }
.bar { flex: none; width: 24px; height: 4px; border-radius: 2px; background: var(--active); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--muted); }
.track { position: relative; min-width: 0; }
.off { position: absolute; top: 0; bottom: 0; background: var(--raised); }
.hl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.drive { position: absolute; top: calc(50% - 2px); z-index: 1; height: 4px; border-radius: 2px 0 0 2px; background: var(--drive); }
.drive.is-past { background: #d9dfe3; }

/* a job: the fill and the glyph say its status, the left edge says its type */
.s-scheduled, .s-waiting { --bg: var(--surface); --edge: var(--control); --ink: var(--text); --glyph: var(--muted); }
.s-enroute { --bg: var(--surface); --edge: var(--accent); --ink: var(--text); --glyph: var(--accent); }
.s-onsite { --bg: var(--accent-tint); --edge: var(--accent-edge); --ink: var(--text); --glyph: var(--accent); }
.s-done { --bg: var(--done-bg); --edge: var(--done-bg); --ink: var(--muted); --glyph: var(--muted); }
.s-late { --bg: var(--neg-bg); --edge: var(--neg-edge); --ink: var(--neg-ink); --glyph: var(--negative); }
.t-noheat { --type: var(--negative); }
.t-install { --type: var(--text); }
.t-maint { --type: #87939a; }
.t-quote { --type: var(--edge); }
.s-done.t-install, .s-done.t-maint { --type: #b3bcc2; }
.s-done.t-noheat { --type: #dc9a9c; }

.job {
  position: absolute; top: 8px; z-index: 2;
  left: calc(var(--l) + 1px); width: calc(var(--w) - 2px); height: calc(var(--row-h) - 16px);
  display: flex; align-items: center;
  margin: 0; padding: 0 4px;
  border: 1px solid var(--edge); border-left: 4px solid var(--type); border-radius: 4px;
  background: var(--bg); color: var(--ink);
  font-size: 15px; line-height: 21px; text-align: left;
  cursor: grab;
  container-type: inline-size;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: border-color 120ms var(--ease-out);
}
.job.t-quote { border-left-width: 1px; padding-left: 7px; }
.hours-track .is-under { visibility: hidden; }
.job[data-locked] { cursor: pointer; }
.job:hover { border-top-color: #7f8a91; border-right-color: #7f8a91; border-bottom-color: #7f8a91; }
.job .g { color: var(--glyph); }
.job.is-selected { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 3; }
.job.is-selected:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.job.is-lifted { opacity: 0.35; }
/* when the board is scrolled sideways, a long job's words slide along so they stay in view */
.job-in {
  position: sticky; left: calc(var(--tech-w) + 6px);
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 5px; align-items: center;
  width: fit-content; max-width: 100%;
}
.job-in .g { grid-area: 1 / 1; }
.job-name { grid-area: 1 / 2; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-l2 { grid-area: 2 / 1 / 3 / 3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l2-mid, .l2-short { display: none; }
/* under two hours: the type alone. Under an hour: the name, then the glyph and a short type. Half an hour: the glyph. */
@container (max-width: 150px) {
  .l2-long { display: none; }
  .l2-mid { display: inline; }
}
@container (max-width: 76px) {
  .job-name { grid-area: 1 / 1 / 2 / 3; }
  .job-in .g { grid-area: 2 / 1; }
  .job-l2 { grid-area: 2 / 2; }
  .l2-mid { display: none; }
  .l2-short { display: inline; }
}
@container (max-width: 44px) {
  .job-name, .job-l2 { display: none; }
  .job-in { grid-template-columns: 1fr; justify-items: center; width: 100%; }
  .job-in .g { grid-area: 1 / 1; }
}

.nowline {
  position: absolute; top: 0; bottom: 0; z-index: 1;   /* behind the jobs, so their words stay clear */
  left: calc(var(--tech-w) + (100% - var(--tech-w)) * var(--f));
  width: 2px; margin-left: -1px; background: var(--accent); pointer-events: none;
}
.now-chip {
  position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
  padding: 0 6px; border: 2px solid var(--surface); border-radius: 6px;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; line-height: 22px;
}
.drop { position: absolute; top: 4px; bottom: 4px; z-index: 3; border: 2px solid var(--accent); border-radius: 6px; background: rgba(27, 108, 128, 0.12); pointer-events: none; }
.drop.is-bad { border: 2px dashed var(--negative); background: rgba(196, 36, 42, 0.08); }
.drop.is-same { border-color: var(--control); background: transparent; }

.legend { display: grid; gap: 2px; padding: 7px 16px; border-top: 1px solid var(--border); }
.lg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; font-size: 15px; line-height: 26px; }
.lg-title { min-width: 62px; color: var(--muted); }
.lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sw { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 18px; border: 1px solid var(--edge, var(--control)); border-radius: 3px; background: var(--bg, var(--surface)); }
.sw .g { width: 12px; height: 12px; color: var(--glyph); }
.sw[class*="t-"] { border-left: 4px solid var(--type); }
.sw.t-quote { border-left: 1px solid var(--control); }
.sw-drive { width: 22px; height: 4px; border-radius: 2px; background: var(--drive); }
.sw-off { width: 22px; height: 18px; border: 1px solid var(--border); border-radius: 3px; background: var(--raised); }

/* ---------- the agenda (phones) ---------- */
.agenda { display: none; }
.agenda h3 { margin-bottom: 10px; font-size: 18px; font-weight: 600; line-height: 26px; }
.ag-tech { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ag-tech summary { display: grid; gap: 1px; padding: 12px 14px; list-style: none; cursor: pointer; }
.ag-tech summary::-webkit-details-marker { display: none; }
.ag-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ag-name { font-size: 18px; font-weight: 600; line-height: 26px; }
.ag-hours { font-size: 15px; white-space: nowrap; }
.ag-meta { color: var(--muted); font-size: 15px; line-height: 21px; }
.ag-now { font-size: 15px; line-height: 21px; }
.ag-chev { display: inline-block; width: 12px; height: 12px; margin-left: 8px; transition: transform 160ms var(--ease-out); }
.ag-tech[open] .ag-chev { transform: rotate(180deg); }
.ag-list { list-style: none; padding: 0; border-top: 1px solid var(--border); }
.ag-none { padding: 12px 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: 15px; }
.ag-job { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--rule); border-left: 4px solid var(--type); background: var(--bg); color: var(--ink); }
.ag-job.t-quote { border-left-color: transparent; }
.ag-job:last-child { border-bottom: 0; }
.ag-open { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; min-height: 44px; padding: 10px 8px 10px 10px; border: 0; background: none; color: inherit; font-size: 15px; line-height: 21px; text-align: left; cursor: pointer; }
.ag-time { display: grid; align-content: start; }
.ag-end { opacity: 0.85; }
.ag-body { display: grid; min-width: 0; }
.ag-cust { font-size: 16px; font-weight: 600; line-height: 23px; }
.ag-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.ag-status .g { color: var(--glyph); }
/* finished jobs fold to one line, so the agenda leads with what is still to do */
.ag-job.s-done .ag-drive, .ag-job.s-done .ag-what, .ag-job.s-done .ag-end { display: none; }
.ag-job.s-done .ag-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
.ag-job.s-done .ag-open { padding-top: 8px; padding-bottom: 8px; }
.ag-move { margin-right: 10px; min-height: 44px; }

/* ---------- the job drawer ---------- */
.drawer { color: var(--text); background: var(--surface); }
.drawer:not([open]) { display: none; }
.drawer-in { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.d-head { padding: 20px 24px 14px; }
.d-back { display: none; margin: -8px 0 8px -12px; }
.d-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.d-title h2 { font-size: 22px; font-weight: 600; line-height: 28px; letter-spacing: -0.01em; padding-top: 4px; }
.d-x { margin: 0 -8px 0 0; }
.d-status { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 4px; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 24px; }
.d-status.s-done { color: var(--text); }
.d-status .g { color: var(--glyph); }
.d-type { margin-left: 6px; color: var(--muted); font-weight: 400; }
.d-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 24px 20px; }
.kv { border-top: 1px solid var(--border); }
.kv > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 22px; }
.kv dt { color: var(--muted); }
.d-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.d-hint { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 21px; }
.drawer section { margin-top: 20px; }
.drawer h3 { margin-bottom: 4px; font-size: 16px; font-weight: 600; line-height: 24px; }
.drawer section p { font-size: 16px; line-height: 24px; }
.parts { list-style: none; padding: 0; font-size: 15px; line-height: 21px; }
.parts li { display: grid; grid-template-columns: 14px auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--rule); }
.parts .g { color: var(--muted); }
.parts .has .g { color: var(--accent); }
.part-where { color: var(--muted); text-align: right; }
.parts .hasnt .part-where { color: var(--warn-ink); }
.tl { list-style: none; padding: 0; font-size: 15px; line-height: 21px; }
.tl li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.tl li.is-dated { grid-template-columns: 1fr; gap: 0; }
.tl-t { color: var(--muted); }
.eta { margin-top: 16px; padding: 14px; border: 1px solid var(--accent-edge); border-radius: 8px; background: var(--accent-tint); }
.eta h3 { font-size: 15px; line-height: 21px; }
.eta h3:focus-visible { outline: none; }
.eta-msg { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 16px; line-height: 24px; }
.eta .d-hint { color: var(--text); }
.eta .d-actions { margin-top: 12px; }
.d-foot { margin-top: 20px; color: var(--muted); font-size: 15px; }

/* ---------- dialogs, the toast and the drag: the only things that float ---------- */
.modal {
  width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 24px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text);
  box-shadow: 0 18px 48px rgba(19, 20, 22, 0.22); /* taste-skill-ignore: a dialog floats */
}
.modal-wide { width: min(620px, calc(100vw - 32px)); }
.modal::backdrop, .drawer::backdrop { background: rgba(19, 20, 22, 0.42); }
.modal h2 { font-size: 22px; font-weight: 600; line-height: 28px; letter-spacing: -0.01em; }
.modal h3 { margin-top: 18px; font-size: 16px; font-weight: 600; line-height: 24px; }
.modal > p, .about-clock p { margin-top: 8px; font-size: 16px; line-height: 24px; }
.modal a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.modal .modal-sub { margin-top: 6px; color: var(--muted); font-size: 15px; line-height: 22px; }
.plain { margin-top: 6px; padding-left: 20px; font-size: 16px; line-height: 24px; }
.plain li + li { margin-top: 4px; }
.fields { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 12px; margin-top: 16px; }
.field label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 500; }
.quick { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin-top: 8px; font-size: 15px; }
.quick-label { color: var(--muted); }
.verdict { margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: var(--raised); font-size: 15px; line-height: 22px; }
.verdict ul { margin-top: 6px; padding-left: 18px; }
.verdict p + p, .verdict ul + p { margin-top: 8px; }
.verdict.is-ok { background: var(--accent-tint); }
.verdict.is-bad { background: var(--neg-bg); color: var(--neg-ink); }
.verdict.is-bad .btn-text { color: var(--neg-ink); text-decoration-color: currentColor; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.problems { margin-top: 14px; padding: 12px 14px 12px 34px; border-radius: 8px; background: var(--neg-bg); color: var(--neg-ink); font-size: 16px; line-height: 24px; }
.problems li + li { margin-top: 6px; }
.push-detail { margin-top: 12px; font-size: 15px; line-height: 22px; }
.about-clock { margin-top: 18px; padding: 14px 16px 16px; border-radius: 8px; background: var(--raised); }
.about-clock p { margin-top: 0; font-size: 15px; line-height: 22px; }
.about-clock .modal-actions { margin-top: 12px; }

.toast {
  position: fixed; left: 50%; bottom: 20px; z-index: 50; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  width: max-content; max-width: min(600px, calc(100vw - 32px)); padding: 8px 8px 8px 16px;
  border-radius: 8px; background: var(--text); color: #fff; font-size: 15px; line-height: 21px;
  box-shadow: 0 10px 30px rgba(19, 20, 22, 0.28); /* taste-skill-ignore: the toast floats */
}
.toast[hidden] { display: none; }
.toast.is-in { animation: toast-in 240ms var(--ease-out); }
.toast .btn-text { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.6); font-weight: 600; white-space: nowrap; }
.toast .icon-btn:hover { background: rgba(255, 255, 255, 0.16); }
.toast :focus-visible { outline-color: #fff; }

.ghost {
  position: fixed; left: 0; top: 0; z-index: 60; display: grid; width: max-content; max-width: 300px; padding: 8px 12px;
  border: 1px solid var(--control); border-radius: 8px; background: var(--surface); font-size: 15px; line-height: 21px;
  pointer-events: none;
  box-shadow: 0 10px 28px rgba(19, 20, 22, 0.2); /* taste-skill-ignore: the dragged job floats */
}
.ghost-name { font-size: 16px; font-weight: 600; }
.ghost-what { color: var(--muted); }
.ghost-say { margin-top: 4px; font-weight: 500; }
.ghost.is-ok .ghost-say { color: var(--accent); }
.ghost.is-bad .ghost-say { color: var(--neg-ink); }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

@keyframes card-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- desktop: the frame holds still, the board fills the sheet ---------- */
@media (min-width: 1100px) {
  html, body { height: 100%; }
  body { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100dvh; overflow: hidden; }
  .app {
    display: grid; min-height: 0; padding: 0 8px 8px 0;
    grid-template-columns: var(--queue-w) minmax(0, 1fr);
    grid-template-rows: 48px minmax(0, 1fr);
    grid-template-areas: "top top" "queue sheet";
  }
  .topbar { grid-area: top; padding: 0 17px 0 0; }
  .brand { width: var(--queue-w); padding-left: 16px; }
  .screen-name { padding-left: 13px; }
  .queue { grid-area: queue; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 4px 16px 0; scrollbar-width: thin; scrollbar-color: var(--control) transparent; }
  /* the colophon rests at the foot of the frame, under however many calls are waiting */
  .colophon-frame { display: block; margin-top: auto; padding: 6px 0 8px; line-height: 20px; }
  .colophon-foot { display: none; }
  .qcard { cursor: grab; }
  .sheet { grid-area: sheet; display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; min-height: 0; overflow: hidden; }
  .sheet-main { min-height: 0; overflow-y: auto; }
  .drawer[open] {
    position: static; display: flex; flex-direction: column;
    width: 372px; max-width: none; height: 100%; max-height: none; min-height: 0;
    margin: 0; padding: 0; border: 0; border-left: 1px solid var(--border);
  }
}
@media (min-width: 1100px) and (max-width: 1399px) {
  :root { --queue-w: 288px; }
}

/* ---------- tablet and phone: the page scrolls, the calls come first ---------- */
@media (max-width: 1099px) {
  /* the urgent call runs the full width with its two suggestions side by side; routine calls pair up under it */
  .queue-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .qcard { margin-bottom: 0; }
  .qcard.is-urgent, .queue-empty, .queue-note { grid-column: 1 / -1; }
  .is-urgent .sug ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
  .is-urgent .sug li { display: flex; flex-direction: column; align-items: flex-start; }
  .is-urgent .sug-why { flex: 1; }
  .queue { padding-bottom: 12px; }
  .sheet { margin: 0 8px 8px; }
  .sheet-main { padding: 20px 16px; }
  .drawer:modal {
    position: fixed; inset: 0 0 0 auto; display: flex; flex-direction: column;
    width: min(440px, 100%); max-width: none; height: 100dvh; max-height: none;
    margin: 0; padding: 0; border: 0; border-left: 1px solid var(--border);
    box-shadow: -12px 0 40px rgba(19, 20, 22, 0.18); /* taste-skill-ignore: the drawer floats over the page here */
  }
}
@media (max-width: 899px) {
  .scope { display: none; }
}
@media (max-width: 699px) {
  .concept { padding: 8px 16px; }
  .about-rest { display: none; }
  /* two short rows: the business and About, then the screen's name and the clock */
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand about" "name clock"; gap: 0 12px; padding: 4px 16px 2px; }
  .top-right { display: contents; }
  .brand { grid-area: brand; min-width: 0; }
  #about-btn { grid-area: about; justify-self: end; margin-right: -14px; }
  .screen-name { grid-area: name; font-size: 18px; line-height: 26px; }
  .clock { grid-area: clock; }
  .btn { min-height: 44px; }
  .btn-text { min-height: 44px; }
  .queue-list, .is-urgent .sug ol { grid-template-columns: minmax(0, 1fr); }
  .sheet { margin: 0; border-width: 1px 0 0; border-radius: 16px 16px 0 0; }
  .titlerow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .title-actions { grid-area: auto; margin-top: 4px; }
  .title-actions .btn { flex: 1; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig:nth-child(odd) { border-left: 0; }
  .fig:nth-child(n + 3) { border-top: 1px solid var(--border); }
  .board { display: none; }
  .agenda { display: block; }
  .drawer:modal { width: 100%; border-left: 0; box-shadow:none; }
  .d-back { display: inline-flex; }
  .d-x { display: none; }
  .d-head { padding: 16px 16px 12px; }
  .d-body { padding: 0 16px 24px; }
  .d-actions .btn { flex: 1 1 auto; }
  .modal { width: 100%; max-width: 100%; margin: auto 0 0; padding: 20px 16px 24px; border-radius: 16px 16px 0 0; border-width: 1px 0 0; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .modal-actions .btn { flex: 1 1 auto; }
  .toast { left: 16px; right: 16px; width: auto; max-width: none; transform: none; }
  .toast.is-in { animation-name: toast-in-phone; }
  .toast-msg { flex: 1; }
}
@keyframes toast-in-phone { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- less motion, and the pinned showcase state ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.showcase *, .showcase *::before, .showcase *::after { animation: none !important; transition: none !important; }