/* ═══════════════════════════════════════════════════════════════
   comms.css · דשבורד תקשורת
   Palette: the existing "אטלייה על קלף" tokens from css/app.css.
   Gold is an accent — rules, active state, dividers. It never encodes a
   quantity: gold on cream falls below 3:1 as a data line and collides with
   the "warning" meaning already used across the app.
   Light mode only, matching the rest of the app.
   ═══════════════════════════════════════════════════════════════ */

#page-comms { padding: 0 0 40px; }

.cm-wrap { max-width: 1400px; margin: 0 auto; padding: 0 18px; }

/* ── שורה 0 · סרגל ─────────────────────────────────────────── */
.cm-bar {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  justify-content: space-between; padding: 12px 0 14px; margin-bottom: 14px;
  border-bottom: 1px solid #ddd0b4;
}
.cm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-chip {
  padding: 6px 14px; border-radius: 8px; border: 1.5px solid #d8cdb8;
  background: #fffdf6; color: #4d463d; font: inherit; font-size: .82rem;
  font-weight: 800; cursor: pointer; line-height: 1; transition: .15s;
}
.cm-chip:hover { border-color: #b8960b; color: #1e1810; }
.cm-chip.on { background: #1e1810; border-color: #1e1810; color: #e8d9a8; }
.cm-bar-end { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cm-live { font-size: .74rem; font-weight: 900; color: #46653a; letter-spacing: .04em; }
.cm-live.idle { color: #8a7a5a; }
.cm-updated { font-size: .74rem; font-weight: 700; color: #8a7a5a; font-variant-numeric: tabular-nums; }
.cm-btn {
  padding: 6px 15px; border-radius: 8px; border: 1.5px solid #b8960b;
  background: #fffdf6; color: #8a5a1a; font: inherit; font-size: .8rem;
  font-weight: 900; cursor: pointer; line-height: 1;
}
.cm-btn:hover:not(:disabled) { background: #faf6ec; }
.cm-btn:disabled { opacity: .5; cursor: default; }

/* ── שורה 1 · פס מצב ───────────────────────────────────────── */
.cm-alert {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  background: #f7e6df; border: 1.5px solid #8b2500; border-radius: 10px;
  padding: 11px 15px; margin-bottom: 16px;
  font-size: .85rem; font-weight: 800; color: #8b2500; line-height: 1.6;
}
.cm-alert-d { font-size: .7rem; }
.cm-alert i { font-style: normal; opacity: .45; }

/* ── שורה 2 · אריחי KPI ────────────────────────────────────── */
.cm-kpis {
  display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.cm-kpi {
  background: #fffdf6; border: 1.5px solid #ddd0b4; border-radius: 12px;
  padding: 13px 15px 14px; position: relative; overflow: hidden;
}
.cm-kpi::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px; background: #ddd0b4; }
.cm-kpi.t-gold::before  { background: #b8960b; }
.cm-kpi.t-green::before { background: #46653a; }
.cm-kpi.t-blue::before  { background: #2a3a68; }
.cm-kpi.t-bad::before   { background: #8b2500; }
.cm-kpi-l { font-size: .77rem; font-weight: 900; color: #6b5a45; line-height: 1.3; }
.cm-kpi-v {
  font-size: 1.9rem; font-weight: 900; color: #1e1810; line-height: 1.1;
  margin: 5px 0 2px; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.cm-kpi.t-bad .cm-kpi-v { color: #8b2500; }
.cm-kpi-d { font-size: .72rem; font-weight: 700; color: #8a7a5a; line-height: 1.45; }
.cm-spark { width: 100%; height: 18px; display: block; margin: 3px 0 4px; direction: ltr; }

/* ── שורות 3-4 · תיבות ─────────────────────────────────────── */
.cm-split, .cm-thirds { display: grid; gap: 12px; margin-bottom: 16px; }
@media (min-width: 900px)  { .cm-split  { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .cm-thirds { grid-template-columns: repeat(3, 1fr); } }
.cm-box {
  background: #fffdf6; border: 1.5px solid #ddd0b4; border-radius: 12px;
  padding: 14px 16px 15px; min-width: 0;
}
.cm-box h3 {
  font-size: .92rem; font-weight: 900; color: #1e1810; margin: 0 0 11px;
  padding-bottom: 8px; border-bottom: 1px solid #eee5d0;
}

/* rows shared by the queue / health / drill boxes */
.cm-row {
  display: flex; gap: 10px; align-items: baseline; justify-content: space-between;
  padding: 7px 0; border-bottom: 1px dashed #eee5d0; font-size: .82rem;
}
.cm-row:last-child { border-bottom: 0; }
.cm-row.go { cursor: pointer; }
.cm-row.go:hover { background: #faf6ec; }
.cm-row-l { font-weight: 800; color: #4d463d; flex: 1; min-width: 0; }
.cm-row-s { font-size: .72rem; font-weight: 700; color: #a09580; text-align: start; flex-shrink: 0; }
.cm-row-n {
  font-weight: 900; color: #1e1810; font-variant-numeric: tabular-nums;
  min-width: 2.2em; text-align: end; flex-shrink: 0;
}
.cm-row-n.bad  { color: #8b2500; }
.cm-row-n.warn { color: #8a6a10; }
.cm-row-n.ok   { color: #46653a; }

.cm-chart-wrap { overflow-x: auto; }
.cm-chart { width: 100%; height: 190px; display: block; direction: ltr; }
.cm-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 9px; }
.cm-lg { display: inline-flex; align-items: center; gap: 5px; font-size: .73rem; font-weight: 800; color: #6b5a45; }
.cm-lg i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* ── מפת חום ───────────────────────────────────────────────── */
.cm-heat { display: grid; gap: 2px; direction: ltr; margin-bottom: 8px; }
/* The level classes must out-specify the base cell rule: `.cm-heat i` is (0,1,1)
   and a bare `.cm-hl1` is (0,1,0), so the base beige silently won and the whole
   grid rendered empty. Every level is scoped the same way as the base. */
.cm-heat i { display: block; aspect-ratio: 1; border-radius: 2px; min-height: 9px; }
.cm-heat i.cm-hl0 { background: #f0e9d8; }
.cm-heat i.cm-hl1 { background: rgba(184,150,11,.24); }
.cm-heat i.cm-hl2 { background: rgba(184,150,11,.44); }
.cm-heat i.cm-hl3 { background: rgba(184,150,11,.64); }
.cm-heat i.cm-hl4 { background: rgba(184,150,11,.84); }
.cm-heat i.cm-hl5 { background: #9a7a00; }
.cm-heat-key i.cm-hl1 { background: rgba(184,150,11,.24); }
.cm-heat-key i.cm-hl2 { background: rgba(184,150,11,.44); }
.cm-heat-key i.cm-hl3 { background: rgba(184,150,11,.64); }
.cm-heat-key i.cm-hl4 { background: rgba(184,150,11,.84); }
.cm-heat-key i.cm-hl5 { background: #9a7a00; }
.cm-heat-cnr { display: block; }
.cm-heat-hh { font-size: .58rem; font-weight: 800; color: #a09580; text-align: center; line-height: 1.4; }
.cm-heat-dd { font-size: .64rem; font-weight: 900; color: #6b5a45; text-align: center; padding-inline-end: 3px; }
.cm-heat-key { display: flex; align-items: center; gap: 3px; font-size: .66rem; font-weight: 700; color: #a09580; direction: ltr; }
.cm-heat-key i { width: 11px; height: 11px; border-radius: 2px; display: block; }

/* ── מצבים ─────────────────────────────────────────────────── */
.cm-warn {
  background: #f6eed6; border: 1px solid #ddd0b4; border-radius: 7px;
  padding: 7px 11px; margin-bottom: 10px;
  font-size: .74rem; font-weight: 800; color: #8a6a10; line-height: 1.5;
}
.cm-empty { font-size: .8rem; font-weight: 700; color: #a09580; padding: 14px 0; text-align: center; }
.cm-load  { font-size: .88rem; font-weight: 800; color: #8a7a5a; padding: 50px 0; text-align: center; }
.cm-err {
  background: #f7e6df; border: 1.5px solid #8b2500; border-radius: 12px;
  padding: 20px; text-align: center; margin: 24px auto; max-width: 480px;
}
.cm-err-t { font-size: .9rem; font-weight: 900; color: #8b2500; margin-bottom: 12px; line-height: 1.5; }

/* ── צלילה ─────────────────────────────────────────────────── */
.cm-drill { border: 1.5px solid #ddd0b4; border-radius: 12px; background: #fffdf6; padding: 0 16px; }
.cm-drill > summary {
  cursor: pointer; padding: 13px 0; font-size: .88rem; font-weight: 900; color: #1e1810;
  list-style: none;
}
.cm-drill > summary::-webkit-details-marker { display: none; }
.cm-drill > summary::before { content: '▸ '; color: #b8960b; }
.cm-drill[open] > summary::before { content: '▾ '; }
.cm-drill[open] > summary { border-bottom: 1px solid #eee5d0; margin-bottom: 14px; }
.cm-drill .cm-thirds { margin-bottom: 12px; }
.cm-foot { font-size: .72rem; font-weight: 700; color: #a09580; padding-bottom: 14px; margin: 0; }

@media (prefers-reduced-motion: reduce) { .cm-chip, .cm-btn { transition: none; } }

/* ── שיחות אוטומטיות · רשימת רשומות ────────────────────────── */
.cm-kpi-go { cursor: pointer; transition: background .15s, border-color .15s; }
.cm-kpi-go:hover { background: #faf6ec; border-color: #b8960b; }
.cm-kpi-go:focus-visible { outline: 2px solid #b8960b; outline-offset: 2px; }
.cm-kpi-go::after {
  content: '›'; position: absolute; inset-inline-end: 10px; top: 12px;
  font-size: 1rem; font-weight: 900; color: #b8960b; opacity: .55;
}

.cm-alert-go {
  font: inherit; font-weight: 800; color: inherit; background: none;
  border: 0; border-bottom: 1px dashed currentColor; padding: 0;
  cursor: pointer; line-height: inherit;
}
.cm-alert-go:hover { border-bottom-style: solid; }

#cm-dialer { scroll-margin-top: 12px; }
.cm-dl { margin-top: 16px; }
.cm-dl-head {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  justify-content: space-between; margin: 0 0 12px;
  padding-bottom: 9px; border-bottom: 1px solid #eee5d0;
}
.cm-dl-head h3 { margin: 0; padding: 0; border: 0; }
.cm-dl-sub { font-size: .78rem; font-weight: 700; color: #8a7a5a; }
.cm-dl-tools { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.cm-dl-search {
  padding: 6px 11px; border-radius: 8px; border: 1.5px solid #d8cdb8;
  background: #fffdf6; color: #1e1810; font: inherit; font-size: .8rem;
  font-weight: 700; min-width: 200px;
}
.cm-dl-search:focus { outline: none; border-color: #b8960b; }
.cm-btn-x { padding: 6px 10px; }

.cm-dl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.cm-dl-chip b { font-variant-numeric: tabular-nums; margin-inline-start: 3px; }
.cm-dl-chip.zero { opacity: .42; }
.cm-dl-chip.t-bad:not(.on)  { border-color: #8b2500; color: #8b2500; }
.cm-dl-chip.t-warn:not(.on) { border-color: #b8960b; color: #8a6a10; }
.cm-dl-chip.t-ok:not(.on)   { border-color: #46653a; color: #46653a; }

.cm-dl-list { display: block; }
.cm-dl-hrow, .cm-dl-row {
  display: grid; gap: 10px; align-items: baseline;
  grid-template-columns: 5.5em minmax(0, 2fr) 8em 3.5em 5em minmax(0, 1.6fr);
  padding: 8px 0; border-bottom: 1px dashed #eee5d0;
}
.cm-dl-hrow {
  font-size: .7rem; font-weight: 900; color: #a09580;
  letter-spacing: .04em; border-bottom: 1px solid #ddd0b4; padding-top: 0;
}
.cm-dl-row { font-size: .8rem; }
.cm-dl-row:last-child { border-bottom: 0; }
.cm-dl-row:hover { background: #faf6ec; }
.cm-dl-st { font-weight: 900; color: #4d463d; white-space: nowrap; }
.cm-dl-st.t-bad  { color: #8b2500; }
.cm-dl-st.t-warn { color: #8a6a10; }
.cm-dl-st.t-ok   { color: #46653a; }
.cm-dl-flag { margin-inline-start: 3px; color: #8b2500; }
.cm-dl-who { display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: baseline; min-width: 0; }
.cm-dl-ph { font-size: .72rem; color: #a09580; font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.cm-dl-when { font-size: .76rem; color: #6b5a45; font-weight: 700; display: flex; flex-direction: column; gap: 1px; }
.cm-dl-when .cm-dim { font-size: .68rem; }
.cm-dl-try, .cm-dl-dur { font-variant-numeric: tabular-nums; font-weight: 700; color: #6b5a45; }
.cm-dl-det { font-size: .75rem; color: #8a7a5a; line-height: 1.45; min-width: 0; }
.cm-dim { color: #a09580; font-weight: 700; }

.cm-lnk {
  font: inherit; font-weight: 800; color: #1e1810; background: none; border: 0;
  padding: 0; cursor: pointer; border-bottom: 1px solid rgba(184,150,11,.5);
  text-align: start;
}
.cm-lnk:hover { color: #8a5a1a; border-bottom-color: #b8960b; }
.cm-lnk-o { color: #8a5a1a; font-variant-numeric: tabular-nums; unicode-bidi: isolate; }

.cm-dl-more { text-align: center; padding: 12px 0 2px; }

@media (max-width: 900px) {
  .cm-dl-hrow { display: none; }
  .cm-dl-row {
    grid-template-columns: 1fr auto; gap: 4px 10px; padding: 11px 0;
  }
  .cm-dl-who { grid-column: 1; grid-row: 1; }
  .cm-dl-st  { grid-column: 2; grid-row: 1; text-align: end; }
  .cm-dl-when{ grid-column: 1; grid-row: 2; flex-direction: row; gap: 7px; }
  .cm-dl-try { grid-column: 2; grid-row: 2; text-align: end; font-size: .72rem; }
  .cm-dl-dur { display: none; }
  .cm-dl-det { grid-column: 1 / span 2; grid-row: 3; }
}

/* ── תורי עבודה · רשימת רשומות ──────────────────────────────── */
#cm-queues { scroll-margin-top: 12px; }
.cm-q-note { margin: 0 0 12px; }

.cm-q-list { display: flex; flex-direction: column; }
.cm-q-row {
  display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px dashed #eee5d0;
}
.cm-q-row:last-child { border-bottom: 0; }
.cm-q-row:hover { background: #faf6ec; }
.cm-q-main { min-width: 0; flex: 1; }
.cm-q-t {
  font-size: .86rem; font-weight: 900; color: #1e1810; line-height: 1.4;
  overflow-wrap: anywhere;
}
.cm-q-b {
  font-size: .78rem; font-weight: 600; color: #6b5a45; line-height: 1.55;
  margin-top: 3px; overflow-wrap: anywhere;
}
.cm-q-m {
  display: flex; flex-wrap: wrap; gap: 3px 7px; align-items: baseline;
  margin-top: 5px; font-size: .74rem; font-weight: 700; color: #a09580;
}
.cm-q-m i { font-style: normal; opacity: .5; }
.cm-q-ok { color: #46653a; font-weight: 800; }

.cm-q-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  flex-shrink: 0;
}
.cm-q-age { font-size: .74rem; font-weight: 800; color: #8a7a5a; white-space: nowrap; }
.cm-q-age.t-warn { color: #8a6a10; }
.cm-q-age.t-bad  { color: #8b2500; }
.cm-q-acts { display: flex; gap: 4px; }
.cm-q-act {
  min-width: 30px; height: 30px; padding: 0 7px;
  border-radius: 7px; border: 1.5px solid #d8cdb8; background: #fffdf6;
  color: #6b5a45; font: inherit; font-size: .82rem; font-weight: 800;
  cursor: pointer; line-height: 1; display: inline-flex;
  align-items: center; justify-content: center;
}
.cm-q-act:hover { border-color: #b8960b; color: #8a5a1a; background: #faf6ec; }
.cm-q-act:focus-visible { outline: 2px solid #b8960b; outline-offset: 1px; }

@media (max-width: 700px) {
  .cm-q-row { flex-direction: column; gap: 8px; }
  .cm-q-side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .cm-q-act { min-width: 40px; height: 38px; }   /* touch target */
}

/* ── הדסק · ציר 360 ─────────────────────────────────────────── */
#cm-desk { scroll-margin-top: 12px; }
.cm-q-row.pick, .cm-dl-row.pick { cursor: pointer; }
.cm-q-row.pick:hover, .cm-dl-row.pick:hover { background: #f6efdd; }

.cm-d-ent {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  align-items: center; justify-content: space-between;
  background: #faf6ec; border: 1px solid #eee5d0; border-radius: 9px;
  padding: 11px 14px; margin: 0 0 12px;
}
.cm-d-ent-main { min-width: 0; }
.cm-d-facts {
  display: flex; flex-wrap: wrap; gap: 3px 12px;
  font-size: .8rem; font-weight: 800; color: #4d463d;
}
.cm-d-facts span { unicode-bidi: isolate; }
.cm-d-touch { font-size: .76rem; font-weight: 700; color: #8a7a5a; margin-top: 3px; }
.cm-d-never { color: #8b2500; font-weight: 900; }
.cm-d-log { width: auto; padding: 0 11px; font-size: .76rem; }

.cm-d-tl { display: flex; flex-direction: column; }
.cm-d-ev {
  display: grid; grid-template-columns: 6.5em 1fr; gap: 10px;
  padding: 9px 0; border-bottom: 1px dashed #eee5d0; position: relative;
}
.cm-d-ev:last-child { border-bottom: 0; }
.cm-d-ev-when {
  font-size: .73rem; font-weight: 700; color: #a09580;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cm-d-ev-main { min-width: 0; }
.cm-d-ev-t { font-size: .83rem; font-weight: 900; color: #1e1810; line-height: 1.4; }
.cm-d-ev-k {
  display: inline-block; font-size: .66rem; font-weight: 900;
  padding: 1px 7px; border-radius: 3px; margin-inline-end: 5px;
  background: #efe7d2; color: #6b5a45; vertical-align: 1px;
}
.cm-d-ev.k-call     .cm-d-ev-k { background: #f5e9c4; color: #7a5a14; }
.cm-d-ev.k-mail     .cm-d-ev-k { background: #d4e4ea; color: #1a4a5a; }
.cm-d-ev.k-dialer   .cm-d-ev-k { background: #d8e5dc; color: #2a5d3a; }
.cm-d-ev.k-automail .cm-d-ev-k { background: #e3dae8; color: #5a3d70; }
.cm-d-ev.t-bad .cm-d-ev-t { color: #8b2500; }
.cm-d-ev-b {
  font-size: .78rem; font-weight: 600; color: #6b5a45;
  line-height: 1.55; margin-top: 2px; overflow-wrap: anywhere;
}
.cm-d-ev-m {
  display: flex; flex-wrap: wrap; gap: 3px 7px; margin-top: 4px;
  font-size: .72rem; font-weight: 700; color: #a09580;
}
.cm-d-ev-m i { font-style: normal; opacity: .5; }

.cm-d-skel {
  height: 46px; border-radius: 8px; margin-bottom: 8px;
  background: linear-gradient(90deg, #f2ece0 25%, #f8f3e8 50%, #f2ece0 75%);
  background-size: 400% 100%; animation: cmSkel 1.4s ease-in-out infinite;
}
@keyframes cmSkel { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }
@media (prefers-reduced-motion: reduce) { .cm-d-skel { animation: none; } }

.cm-d-ov { margin-bottom: 12px; }
.cm-d-gaps { margin-top: 4px; }

@media (max-width: 700px) {
  .cm-d-ev { grid-template-columns: 1fr; gap: 2px; }
  .cm-d-ev-when { order: 2; }
  /* zoom-control.js scales the tablet to 0.75, so a 44px physical target
     must be written as 59px CSS */
  .cm-q-act { min-width: 59px; height: 59px; font-size: .95rem; }
  .cm-d-log { width: auto; padding: 0 14px; }
  .cm-q-b, .cm-d-ev-b, .cm-q-m, .cm-d-ev-m { font-size: 15px; }
}

/* ── R2 · צ'יפי הזדקנות באריח ────────────────────────────────── */
.cm-kpi-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.cm-kpi-chip {
  font: inherit; font-size: .66rem; font-weight: 800; line-height: 1;
  padding: 3px 6px; border-radius: 5px; cursor: pointer;
  border: 1px solid #ddd0b4; background: #fffdf6; color: #6b5a45;
}
.cm-kpi-chip b { font-variant-numeric: tabular-nums; }
.cm-kpi-chip:hover { border-color: #b8960b; color: #8a5a1a; }
.cm-kpi-chip.zero { opacity: .4; }

/* ── R6 · "הפוך לתור" ────────────────────────────────────────── */
.cm-box h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cm-to-q {
  font: inherit; font-size: .68rem; font-weight: 800; line-height: 1;
  padding: 4px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  border: 1px solid #ddd0b4; background: #fffdf6; color: #8a7a5a;
}
.cm-to-q:hover { border-color: #b8960b; color: #8a5a1a; background: #faf6ec; }
.cm-to-q:focus-visible { outline: 2px solid #b8960b; outline-offset: 1px; }
@media (max-width: 700px) { .cm-to-q { padding: 8px 12px; font-size: 13px; } }

/* ═══════════════════════════════════════════════════════════════
   המסך העליון · 20a1-comms-screen.js
   Port of the approved mockup, 1:1. Its rules, in order of how easy they
   are to break:
     · SQUARE. No border-radius anywhere inside .cm-da — the whole design
       reads as a printed sheet, and one rounded corner breaks it.
     · One board (#e8e0ce) with 10px padding, and every gap is 10px.
     · Every row is a grid of EQUAL columns; the bottom row's two halves
       stretch, so they end on the same pixel at any text length.
     · The palette below is the mockup's, deliberately a shade deeper than
       the page around it so the board reads as a separate object.
   ═══════════════════════════════════════════════════════════════ */

.cm-da {
  --ink: #0c0906; --ink2: #28211a; --surf: #fefcf7; --parch: #faf3e3;
  --muted: #5c5040; --muted2: #8c7c6a; --line: #9a8e6e; --soft: #b8ac8a;
  --faint: #c8be9c; --gold: #a67c08; --gold2: #c99a28;
  --crim: #861616; --orange: #9a5510; --green: #1e6b3e;
  background: #e8e0ce; padding: 10px; margin-bottom: 14px;
  font-size: 14px; color: var(--ink2);
  display: grid; gap: 10px;
}
/* The sheet is square, and it stays square: this beats every class-level
   radius that already exists in this file (.cm-lg i, .cm-chip, .cm-btn …),
   which is exactly the point — one rounded corner breaks the printed look. */
.cm-da *, .cm-da *::before, .cm-da *::after { border-radius: 0 !important; }

/* ── פס · מה יצא מאיתנו ─────────────────────────────────────── */
.cm-strip {
  background: var(--ink); border: 1.5px solid rgba(166,124,8,.3);
  display: grid; grid-template-columns: repeat(4, 1fr);
  min-height: 98px; overflow: hidden; position: relative;
}
.cm-strip::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2.5px; z-index: 3;
  background: linear-gradient(90deg,#9a7206,#c99228,#edd068,#c99228,#b88010,#e8cc60,#9a7206);
  background-size: 300% auto; animation: cmFoil 20s linear infinite;
}
@keyframes cmFoil { 0% { background-position: 0 0; } 100% { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) { .cm-strip::before { animation: none; } }
.cm-strip::after {
  content: ''; position: absolute; inset: 6px; z-index: 1;
  border: 1px solid rgba(201,162,40,.14);
}
.cm-st {
  display: grid; align-content: center; justify-items: center; text-align: center;
  padding: 8px 14px; position: relative; z-index: 2;
  border-right: 1px solid rgba(201,162,40,.12);
}
.cm-st:first-child { border-right: 0; }
.cm-st-l { color: rgba(255,255,255,.8); font-size: 13.5px; font-weight: 800; }
.cm-st-n {
  color: #fff; font-size: 30px; font-weight: 800; line-height: 1; margin: 3px 0 1px;
  font-variant-numeric: tabular-nums;
}
.cm-st-n.ok  { color: #8fc79a; }
.cm-st-n.bad { color: #e79a86; }
.cm-st-s { color: rgba(255,255,255,.48); font-size: 11.5px; font-weight: 700; }

/* ── משפט · כמה ממתינים ─────────────────────────────────────── */
.cm-said {
  background: var(--surf); border: 1.5px solid var(--crim); padding: 11px 16px;
  display: flex; justify-content: center; align-items: baseline; gap: 12px;
  flex-wrap: wrap; text-align: center;
}
.cm-said b    { font-size: 18px; font-weight: 900; color: var(--crim); }
.cm-said span { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.cm-said.ok   { border-color: var(--green); }
.cm-said.ok b { color: var(--green); }

/* ── אריחים ─────────────────────────────────────────────────── */
.cm-alerts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cm-al {
  background: var(--parch); border: 1.5px solid var(--line);
  border-top: 4px solid var(--line); padding: 11px 14px 13px; cursor: pointer;
  display: grid; align-content: start; justify-items: center; text-align: center;
}
.cm-al:hover, .cm-al:focus-visible { background: #fdf8ea; border-color: var(--gold); }
.cm-al.l1 { border-top-color: var(--crim); }
.cm-al.l2 { border-top-color: var(--orange); }
.cm-al.l3 { border-top-color: var(--gold2); }
.cm-al-h  { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; }
.cm-al-id {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 600; color: var(--gold); letter-spacing: .08em;
}
.cm-al-lvl    { font-size: 10.5px; font-weight: 900; padding: 2px 8px; }
.cm-al-lvl.l1 { background: #f2dcd6; color: var(--crim); }
.cm-al-lvl.l2 { background: #f4e3cf; color: var(--orange); }
.cm-al-lvl.l3 { background: #f6edcf; color: #7a5808; }
.cm-al-l { font-size: 15px; font-weight: 900; margin-top: 5px; line-height: 1.2; color: var(--ink2); }
.cm-al-n { font-size: 34px; font-weight: 800; line-height: 1; margin: 2px 0; font-variant-numeric: tabular-nums; }
.cm-al-n.l1 { color: var(--crim); } .cm-al-n.l2 { color: var(--orange); } .cm-al-n.l3 { color: #7a5808; }
.cm-al-s { font-size: 11.5px; font-weight: 700; color: var(--muted2); line-height: 1.35; }

/* ── שתי מחציות שנמתחות יחד ─────────────────────────────────── */
/* The CALL-BACK LIST sizes this row: 6 rows of 52px plus its own chrome. The
   chart carries no height floor (min-height:0 below), so it cannot push the row
   taller — which is what used to open the rows from 52px to 86px, because the
   leftover space was being sprayed between them. */
.cm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cm-half { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; min-height: 0; }
.cm-frm {
  background: var(--surf); border: 1.5px solid var(--line); position: relative;
  padding: 11px 14px; min-height: 0; display: grid; grid-template-rows: auto 1fr auto;
}
.cm-crn { position: absolute; width: 12px; height: 12px; z-index: 3; pointer-events: none; }
.cm-crn.tl { border-right: 1.5px solid var(--gold2); border-top: 1.5px solid var(--gold2); right: 6px; top: 6px; }
.cm-crn.tr { border-left: 1.5px solid var(--gold2);  border-top: 1.5px solid var(--gold2); left: 6px;  top: 6px; }
.cm-crn.bl { border-right: 1.5px solid var(--gold2); border-bottom: 1.5px solid var(--gold2); right: 6px; bottom: 6px; }
.cm-crn.br { border-left: 1.5px solid var(--gold2);  border-bottom: 1.5px solid var(--gold2); left: 6px;  bottom: 6px; }
.cm-frm h3 {
  font-size: 14.5px; font-weight: 900; margin: 0 0 8px; padding: 0 5px 7px;
  border-bottom: 1px solid var(--faint); color: var(--ink2);
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.cm-frm h3 i { font-style: normal; font-size: 11px; font-weight: 800; color: var(--muted2); }
.cm-frm-b { min-height: 0; display: grid; align-content: start; }
/* The chart must contribute NO intrinsic height, or it — not the call-back
   list — decides how tall the bottom row is, and the list's 52px rows get
   pulled apart to fill the slack. Absolute positioning takes the SVG out of
   flow entirely; the wrapper is the only thing that occupies space, and it
   takes exactly what the 1fr track hands it. */
.cm-frm-b.cm-chart-wrap {
  display: block; position: relative; min-height: 0; overflow: hidden;
}
.cm-frm-b.cm-chart-wrap .cm-chart {
  position: absolute; inset: 0; width: 100%; height: auto;
}
/* The chart is rendered with noLegend; the swatches are in the frame foot. */
.cm-frm-foot .cm-lg { font-size: 11.5px; font-weight: 700; color: var(--muted2); }
.cm-frm-foot .cm-lg i { width: 8px; height: 8px; }
.cm-frm-foot {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline;
  font-size: 11.5px; font-weight: 700; color: var(--muted2);
  padding-top: 7px; margin-top: 7px; border-top: 1px solid var(--faint);
}
.cm-frm-foot b { color: var(--ink2); font-variant-numeric: tabular-nums; }
.cm-frm-foot .l1 b { color: var(--crim); }
.cm-frm-foot .l2 b { color: var(--orange); }
.cm-frm-go {
  margin-inline-start: auto; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 800; color: var(--muted2);
}
.cm-frm-go:hover { color: var(--ink2); text-decoration: underline; }

/* ── תור החזרות ─────────────────────────────────────────────── */
.cm-wr {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center;
  padding: 0 4px; border-bottom: 1px dashed var(--faint); height: 52px;
}
.cm-wr:last-child { border-bottom: 0; }
.cm-wr.pick { cursor: pointer; }
.cm-wr.pick:hover { background: #fdf8ea; }
.cm-wr-tag { font-size: 11px; font-weight: 900; text-align: center; padding: 3px 0; letter-spacing: .02em; }
.cm-wr-tag.l1 { background: #f2dcd6; color: var(--crim); }
.cm-wr-tag.l2 { background: #f4e3cf; color: var(--orange); }
.cm-wr-tag.l3 { background: #f6edcf; color: #7a5808; }
.cm-wr-m { min-width: 0; }
.cm-wr-m b { display: block; font-size: 13.5px; font-weight: 900; color: var(--ink2); line-height: 1.3; }
.cm-wr-m span {
  display: block; font-size: 11.5px; font-weight: 700; color: var(--muted2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-wr-acts { display: flex; gap: 4px; }
.cm-wr-a {
  width: 27px; height: 27px; border: 1.5px solid var(--soft); background: var(--surf);
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 12px; line-height: 1; cursor: pointer; color: var(--ink2);
}
.cm-wr-a:hover { border-color: var(--gold); background: #fdf8ea; }

/* ── שורות הבדיקות ──────────────────────────────────────────── */
.cm-da .cm-r {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 6px 4px; border-bottom: 1px dashed var(--faint);
}
.cm-da .cm-r:last-child { border-bottom: 0; }
.cm-da .cm-r.go { cursor: pointer; }
.cm-da .cm-r.go:hover { background: #fdf8ea; }
.cm-r-l { font-weight: 800; color: var(--ink2); font-size: 13px; }
.cm-r-s { font-size: 11px; font-weight: 700; color: var(--muted2); }
.cm-r-n {
  font-weight: 900; font-variant-numeric: tabular-nums; font-size: 15px;
  min-width: 2.4em; text-align: end;
}
.cm-r-n.bad { color: var(--crim); } .cm-r-n.warn { color: var(--orange); } .cm-r-n.ok { color: var(--green); }

/* ── מקרא ───────────────────────────────────────────────────── */
.cm-lgd {
  margin: 0 0 16px; font-size: .82rem; font-weight: 600; color: #5c5040;
  line-height: 1.7; max-width: 90ch;
}
.cm-lgd b    { color: #17130c; font-weight: 800; }
.cm-lgd b.l1 { color: #861616; }
.cm-lgd b.l2 { color: #9a5510; }
.cm-lgd b.l3 { color: #7a5808; }

/* ── צר: הרשת נשברת, הסימטריה נשמרת בכל שלב ─────────────────── */
@media (max-width: 1080px) {
  .cm-alerts { grid-template-columns: repeat(2, 1fr); }
  .cm-grid   { grid-template-columns: 1fr; }
  .cm-half   { grid-template-rows: auto auto; }
  .cm-frm-b.cm-chart-wrap .cm-chart { height: 190px; }
}
@media (max-width: 720px) {
  .cm-strip  { grid-template-columns: repeat(2, 1fr); }
  .cm-st:nth-child(2) { border-right: 0; }
  .cm-alerts { grid-template-columns: 1fr; }
  .cm-wr     { height: auto; min-height: 52px; padding: 7px 4px; }
}

/* חזרה — נשאר אחרי ש"חלון אחד בכל רגע" סגר את הקודם (js/20j-comms-solo.js) */
.cm-back { border-color: #d8cdb8; color: #4d463d; font-weight: 800; }
.cm-back:hover { border-color: #b8960b; color: #1e1810; background: #faf6ec; }

/* ═══════════════════════════════════════════════════════════════
   העדפות תקשורת · 20k-comms-prefs.js
   Its own overlay rather than a panel inside the sheet: it is opened from the
   client card too, which never renders .cm-da.
   ═══════════════════════════════════════════════════════════════ */
.cm-prefs-ov{
  position:fixed; inset:0; z-index:9500; background:rgba(12,9,6,.55);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.cm-prefs{
  background:#fffdf6; border:1.5px solid #9a8e6e; width:min(460px,100%);
  max-height:90vh; overflow-y:auto; padding:22px 24px 20px; position:relative;
  box-shadow:0 18px 50px rgba(12,9,6,.3);
}
.cm-pf-x{
  position:absolute; inset-inline-start:12px; top:11px; width:28px; height:28px;
  border:1.5px solid #cdbfa2; background:#fffdf6; color:#8a5a1a;
  font:inherit; font-size:.85rem; font-weight:900; cursor:pointer; line-height:1;
}
.cm-pf-x:hover{border-color:#a67c08; background:#faf6ec}
.cm-prefs h3{margin:0; font-size:1.15rem; font-weight:900; color:#1e1810}
.cm-pf-who{margin:2px 0 18px; font-size:.85rem; font-weight:800; color:#8a7a5a}
.cm-pf-row{margin-bottom:17px}
.cm-pf-row>label{display:block; font-size:.82rem; font-weight:900; color:#1e1810; margin-bottom:7px}
.cm-pf-note{display:block; margin-top:6px; font-size:.72rem; font-weight:700; color:#a09580; line-height:1.5}
.cm-pf-chips{display:flex; flex-wrap:wrap; gap:6px}
.cm-pf-chip{
  padding:6px 13px; border:1.5px solid #d8cdb8; background:#fffdf6; color:#4d463d;
  font:inherit; font-size:.8rem; font-weight:800; cursor:pointer; line-height:1;
}
.cm-pf-chip:hover{border-color:#a67c08}
.cm-pf-chip.on{background:#1e1810; border-color:#1e1810; color:#e8d9a8}
.cm-pf-times{display:flex; align-items:center; gap:9px}
.cm-pf-times input{
  padding:7px 10px; border:1.5px solid #d8cdb8; background:#fffdf6;
  font:inherit; font-size:.9rem; font-weight:800; color:#1e1810; direction:ltr;
}
.cm-pf-times span{font-size:.82rem; font-weight:800; color:#8a7a5a}
.cm-pf-days{display:flex; gap:5px; flex-wrap:wrap}
.cm-pf-day{
  width:34px; height:34px; border:1.5px solid #d8cdb8; background:#fffdf6;
  color:#4d463d; font:inherit; font-size:.85rem; font-weight:900; cursor:pointer;
}
.cm-pf-day:hover{border-color:#a67c08}
.cm-pf-day.on{background:#8b2500; border-color:#8b2500; color:#fff}
.cm-pf-block{padding-top:4px}
.cm-pf-toggle{
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px;
  border:1.5px solid #d8cdb8; background:#fffdf6; cursor:pointer; font:inherit;
  font-size:.88rem; font-weight:900; color:#1e1810; text-align:start;
}
.cm-pf-toggle i{
  width:34px; height:19px; border-radius:11px; background:#d8cdb8; position:relative;
  flex-shrink:0; transition:.15s;
}
.cm-pf-toggle i::after{
  content:''; position:absolute; top:2.5px; inset-inline-start:2.5px; width:14px; height:14px;
  border-radius:50%; background:#fff; transition:.15s;
}
.cm-pf-toggle.on{border-color:#8b2500; background:#fdf4f2}
.cm-pf-toggle.on i{background:#8b2500}
.cm-pf-toggle.on i::after{inset-inline-start:17.5px}
.cm-pf-effect{
  margin:0 0 18px; padding:10px 13px; background:#faf6ec; border-inline-start:3px solid #a67c08;
  font-size:.8rem; font-weight:700; color:#4d463d; line-height:1.6;
}
.cm-pf-effect.hard{background:#f7e6df; border-inline-start-color:#8b2500; color:#8b2500}
.cm-pf-foot{display:flex; gap:8px; justify-content:flex-end; padding-top:4px}
.cm-pf-save{border-color:#1e1810; background:#1e1810; color:#e8d9a8}
.cm-pf-save:hover:not(:disabled){background:#33291c}
/* a row whose client carries a restriction says so before anyone dials */
.cm-wr-a.pf-block{border-color:#8b2500; background:#fdf4f2}
.cm-wr-a.pf-quiet{border-color:#8a6a10; background:#fdfaf0}