.crm-guide-start {
  padding:clamp(16px,3vw,28px); margin:0 0 18px;
  background:color-mix(in srgb,var(--surface) 91%,#087c99);
  border:1px solid var(--line); border-radius:12px; border-inline-start:4px solid #147b99;
}
.crm-guide-role { color:var(--ink); font-size:12px; font-weight:700; }
.crm-guide-start h2, #crm-guide-pages-title { margin:4px 0 8px; font-size:19px; }
.crm-guide-start ol { padding-inline-start:22px; margin:0 0 14px; }
.crm-guide-start li { margin-block:4px; }
.crm-guide-links { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,285px),1fr)); gap:10px; }
.crm-guide-links .crm-guide-link {
  display:grid; grid-template-columns:32px 1fr 12px; gap:10px; align-items:start;
  text-align:left; width:100%; padding:12px; border:1px solid var(--line); border-radius:9px;
  background:var(--surface); color:var(--ink);
}
.crm-guide-link:hover { border-color:#287da0; }
.crm-guide-link small { display:block; margin-top:3px; color:var(--muted); font-weight:400; }
.crm-guide-icon {
  display:grid; place-items:center; width:30px; height:30px; border-radius:7px;
  background:color-mix(in srgb,var(--surface) 83%,#147b99); color:var(--ink);
}
.crm-guide-icon svg { width:17px; height:17px; }
.crm-record-context { margin:0 0 10px; }
.crm-record-context button { margin-inline-start:7px; }
.crm-recurrence-cutoff { margin:8px 0 12px; }
.crm-productivity-scope { margin:0 0 6px; color:var(--muted); font-size:13px; }
.crm-import-picker h3 { margin:0 0 6px; font-size:15px; }
.crm-import-modes { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:8px; margin:0 0 12px; }
.crm-import-modes button { text-align:left; padding:9px; }
.crm-import-modes button small { display:block; margin-top:3px; color:var(--muted); }
.crm-import-modes button[aria-pressed=true] { border-color:#18789a; background:color-mix(in srgb,var(--surface) 90%,#147b99); }

#app .crm-import-layout {grid-template-columns:minmax(0,1.65fr) minmax(240px,1fr);align-items:start;gap:18px}
#app .crm-import-layout .card {min-width:0;padding:0}
#app .crm-import-upload .cardbody,#app .crm-import-layout .crm-import-instructions {padding:clamp(16px,2vw,24px)}
.crm-import-upload .crm-import-picker h3 {font-size:16px}
.crm-import-upload .crm-import-modes {gap:8px;margin-bottom:12px}
.crm-import-upload .crm-import-modes button {min-height:44px}
.crm-import-upload .mailing-day {max-width:260px;margin-bottom:12px}
.crm-import-upload .import-options {display:block;margin:0 0 12px}
.crm-import-upload .import-options:not(:has(label:not([hidden]))) {display:none}
.crm-import-upload .import-options .field {max-width:450px}
.crm-import-upload #drop {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;text-align:left;gap:10px;padding:14px 16px}
.crm-import-upload #drop p {margin:2px 0 0;color:var(--muted)}
.crm-import-upload #uploadNotice:not(:empty) {margin-top:10px}
.crm-import-upload #uploadNotice .notice {margin:0}
.crm-import-upload #uploadNotice progress {width:100%;margin-top:6px;accent-color:#147caa}
.crm-import-upload #uploadNotice p,.crm-queue-upload-help {margin:5px 0 0;color:var(--muted);font-size:13px}
.crm-queue-checkpoint {display:block;margin-top:4px}
.crm-import-instructions h2 {margin:0 0 12px;font-size:18px}
.crm-import-instructions dl {margin:0}
.crm-import-instructions dt {font-weight:700}
.crm-import-instructions dd {margin:1px 0 12px;color:var(--muted)}
.crm-import-instructions p {margin:8px 0 0}
@media(max-width:950px) {#app .crm-import-layout {grid-template-columns:1fr}}
@media(max-width:520px) {.crm-import-upload .crm-import-modes {grid-template-columns:1fr}}
.crm-import-upload .crm-cancel-transfer {
 display:block;
 width:max-content;
 margin-top:10px;
 padding:6px 12px;
 border:1px solid var(--line);
 background:var(--surface);
 color:var(--ink);
}
.crm-import-upload .crm-cancel-transfer:hover:not(:disabled) {border-color:#a92d42;color:#a92d42}
[data-theme=dark] .crm-import-upload .crm-cancel-transfer:hover:not(:disabled) {color:#ffb4c2}

@media (prefers-reduced-motion:no-preference) {
 #nav button,#app button:not(.quiet),.topbar button {
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;
 }
 #app :is(.crm-import-modes button,.crm-guide-link):hover:not(:disabled) {
  box-shadow:0 2px 8px #102e4d14;
 }
 #toast:not([hidden]),#app .import-progress,#modal[open] {
  animation:crm-feedback-in .18s ease-out both;
 }
}
@keyframes crm-feedback-in {
 from {opacity:0;transform:translateY(4px)}
 to {opacity:1;transform:translateY(0)}
}
#app .crm-queue-grid {align-items:stretch;gap:16px;margin-bottom:16px}
#app .crm-queue-grid .card {margin-bottom:0}
#app .crm-queue-chart {min-width:0;padding:clamp(14px,1.5vw,22px)}
.crm-queue-chart h2 {margin:0 0 5px;font-size:18px}
.crm-queue-chart p {margin:0 0 14px;font-size:13px}
/* Share title, value and description rows across the cards on each line. */
#app .crm-queue-kpis .metric[data-kpi-tone] {
 display:grid;
 grid-row:span 3;
 grid-template-rows:subgrid;
 align-items:start;
 row-gap:5px;
 min-width:0;
}
#app .crm-queue-kpis-six {grid-template-columns:repeat(3,minmax(0,1fr))}
#app .crm-queue-kpis-six .metric[data-kpi-tone] {border-left-width:1px;border-top:4px solid var(--queue-kpi,#1665c8);padding:12px;text-align:left;align-items:flex-start}
#app .crm-queue-kpis-six .metric strong {color:var(--queue-value,#175bb3)}
.crm-queue-kpis-six .metric:nth-child(2) {--queue-kpi:#6660ee;--queue-value:#5248c3}
.crm-queue-kpis-six .metric:nth-child(3) {--queue-kpi:#f59e0b;--queue-value:#925300}
.crm-queue-kpis-six .metric:nth-child(4) {--queue-kpi:#0ea5e9;--queue-value:#006990}
.crm-queue-kpis-six .metric:nth-child(n+5) {--queue-kpi:#ef4444;--queue-value:#ab2332}
[data-theme=dark] .crm-queue-kpis-six .metric {--queue-value:#92c1ff}
[data-theme=dark] .crm-queue-kpis-six .metric:nth-child(2) {--queue-value:#bbb6ff}
[data-theme=dark] .crm-queue-kpis-six .metric:nth-child(3) {--queue-value:#ffd07a}
[data-theme=dark] .crm-queue-kpis-six .metric:nth-child(4) {--queue-value:#83d9ff}
[data-theme=dark] .crm-queue-kpis-six .metric:nth-child(n+5) {--queue-value:#ff9ea7}
.crm-queue-chart svg {display:block;max-width:100%}
.crm-queue-rank {--rank-bar:#1665c8;display:grid;gap:7px;margin-top:14px}
.crm-queue-rank[data-tone="specialty"] {--rank-bar:#6660ee}
.crm-queue-rank[data-tone="wait"] {--rank-bar:#ef4444}
.crm-queue-rank-row {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) 74px;align-items:center;gap:8px}
.crm-queue-rank-row>span,.crm-queue-rank-row>button {font-size:12px;overflow-wrap:anywhere;text-align:left;justify-self:start;line-height:1.25}
.crm-rank-label {border:0;background:none;padding:0;min-height:0;white-space:normal;color:var(--ink);text-align:left}
.crm-rank-label:hover {color:var(--accent)}
.crm-rank-label[aria-pressed=true] {background:var(--light)}
.crm-queue-rank-row svg {width:100%;height:20px;border-inline-start:1px solid var(--line);background:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 25%)}
.crm-queue-rank-row rect {fill:var(--rank-bar)}
.crm-queue-rank-row strong {font-size:12px;line-height:1.15;white-space:nowrap}
.crm-queue-rank-row small {display:block;font-size:11px;font-weight:400;color:var(--muted)}
.crm-queue-axis {display:flex;justify-content:space-between;margin-inline:calc((100% - 90px)/2.1 + 8px) 82px;color:var(--muted);font-size:10px}
@media(min-width:1051px) {
 /* Both charts share their heading, ranking and axis rows. */
 #app .crm-queue-procedure-grid {grid-template-rows:repeat(var(--queue-chart-rows),auto);row-gap:7px}
 #app .crm-queue-procedure-grid .crm-queue-chart {
  display:grid;
  grid-row:1/-1;
  grid-template-rows:subgrid;
 }
 .crm-queue-procedure-grid .crm-queue-chart>h2,
 .crm-queue-procedure-grid .crm-queue-chart>p {margin:0}
 .crm-queue-procedure-grid .crm-queue-rank {
  grid-row:3/-1;
  grid-template-rows:subgrid;
  margin-top:0;
 }
 .crm-queue-procedure-grid .crm-queue-axis {grid-row:-2}
}
.crm-wait-columns {display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px;font-size:11px}
.crm-wait-ticks {display:flex;flex-direction:column;justify-content:space-between;text-align:right;color:var(--muted);margin:20px 0 23px}
.crm-wait-plot {display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.crm-wait-column {--wait-plot-height:165px;position:relative;display:grid;grid-template-rows:22px var(--wait-plot-height) 24px;justify-items:center;align-items:center;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:none;color:var(--ink);font:inherit}
.crm-wait-column svg {grid-row:2;width:100%;height:100%;background:repeating-linear-gradient(to top,var(--line) 0 1px,transparent 1px 25%);border-top:1px solid var(--line)}
.crm-wait-value {position:absolute;bottom:calc(27px + var(--wait-plot-height) * var(--wait-ratio, 0));font-weight:700;line-height:1.2}
.crm-wait-label {grid-row:3;text-align:center;line-height:1.1}
.crm-wait-column:hover,.crm-wait-column[aria-pressed=true] {background:var(--light)}
.crm-wait-column[aria-pressed=true] .crm-wait-label {font-weight:700}
.crm-priority-grid {margin:0;display:grid;gap:0;font-size:12px}
.crm-priority-grid>div {display:grid;grid-template-columns:minmax(0,.65fr) repeat(3,minmax(0,1fr));gap:6px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);text-align:center}
.crm-priority-grid>div:last-child {border:0}
.crm-priority-grid dt,.crm-priority-grid dd {margin:0;overflow-wrap:anywhere;color:var(--muted);line-height:1.2}
.crm-priority-grid dd b {display:block;font-size:13px;color:var(--ink)}
.crm-priority-grid button {white-space:normal;overflow-wrap:anywhere;font-weight:700}
.crm-priority-grid [data-priority=P1] {color:var(--danger,#b42330)}
.crm-priority-grid [data-priority=P2] {color:var(--queue-priority-2,#925300)}
.crm-priority-grid [data-priority=P3] {color:var(--queue-priority-3,#006990)}
[data-theme=dark] .crm-priority-grid {--queue-priority-2:#ffd07a;--queue-priority-3:#83d9ff}
#crmQueueView .crm-source-stamp {margin-bottom:12px;padding-block:7px}
#crmQueueView .crm-queue-filters {padding:12px;margin-bottom:16px;align-items:end}
@media(min-width:1500px) {
 #crmQueueView .crm-queue-filters {grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,.65fr) minmax(0,.8fr) minmax(0,1.2fr) auto}
 #app .crm-queue-grid-three {grid-template-columns:repeat(3,minmax(0,1fr))}
 #app .crm-queue-kpis-six {grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media(max-width:760px) {
 #app .crm-queue-kpis-six {grid-template-columns:repeat(2,minmax(0,1fr))}
}
.crm-queue-pie {display:grid;grid-template-columns:minmax(72px,130px) minmax(0,1fr);align-items:center;gap:14px}
.crm-queue-pie circle {fill:none;stroke:var(--segment);stroke-width:60;transform-origin:center;transform:rotate(-90deg)}
.crm-queue-pie [data-tone="0"] {--segment:#147caa}
.crm-queue-pie [data-tone="1"] {--segment:#087d54}
.crm-queue-pie [data-tone="2"] {--segment:#d58a16}
.crm-queue-pie [data-tone="3"] {--segment:#8754a8}
.crm-queue-pie [data-tone="4"] {--segment:#b34e59}
.crm-queue-pie ul {list-style:none;padding:0;margin:0;display:grid;gap:8px}
.crm-queue-pie li {display:grid;grid-template-columns:9px minmax(0,1fr) auto;align-items:center;gap:7px;font-size:13px}
.crm-queue-pie i {width:9px;height:9px;border-radius:50%;background:var(--segment)}
.crm-queue-pie b {white-space:nowrap}
.crm-queue-readout {margin:8px 0 0;padding-left:20px;color:var(--ink);line-height:1.55}
.crm-queue-readout li + li {margin-top:4px}
.crm-issue-link {display:block;margin:4px auto 0}
.crm-queue-history {margin-top:20px}
.crm-queue-history h3 {font-size:16px;margin:0 0 8px}
#app:has(.crm-guide-start) .heading {padding-block:6px;margin-bottom:12px}
#app .crm-guide-start {padding:13px 16px;margin-bottom:12px}
#app .crm-guide-start ol {margin-bottom:8px}
#app .crm-guide-start li {margin-block:1px}
#app .crm-guide-links {gap:7px;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr))}
#app .crm-guide-link {padding:8px}
@media(max-width:760px) {
 .crm-queue-pie {grid-template-columns:1fr}
 .crm-queue-pie svg {width:110px;margin-inline:auto}
}

#crmQueueView .crm-queue-filters .multi-filter summary {min-height:44px;font-size:inherit}
#crmQueueView .multi-selection {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#crmQueueView .crm-queue-patient {position:relative}
.crm-patient-suggestions {max-height:280px;overflow:auto}
.crm-patient-suggestions[hidden] {display:none}
.crm-patient-suggestions p {margin:0}
.crm-patient-options {display:grid;gap:3px}
.crm-patient-options button {text-align:left;white-space:normal;overflow-wrap:anywhere}
@media(max-width:600px){
 .crm-queue-rank-row {grid-template-columns:minmax(0,1fr) 70px;gap:4px 8px}
 .crm-queue-rank-row>svg {grid-column:1;grid-row:2;height:12px}
 .crm-queue-rank-row>strong {grid-column:2;grid-row:1/3}
 .crm-queue-axis {margin-inline:0 78px}
}