/* Missed-Call Text-Back — pack styles.
   Only what the engine primitives do not already cover. Everything here uses the
   engine tokens, so light, dark and the blue accent all follow along.
*/

/* The engine picks --accent-on by measuring contrast, but it only re-measures when
   the theme is switched through its own menu. This blue needs white text in light
   and near-black in dark, so the pack declares both and the engine stands back. */
:root { --accent-on: hsl(0 0% 100%); }
[data-theme="dark"] { --accent-on: hsl(210 40% 9%); }

/* ------------------------------------------------------------- shared --- */

.ph { display: flex; align-items: flex-end; gap: 12px; }
.ph__t { font-size: 15px; }
.ph__s { font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; }
.ph__a { margin-left: auto; display: flex; gap: 6px; }

.input--slim { height: 32px; font-size: 13px; padding: 0 26px 0 9px; width: auto; min-width: 132px; max-width: 190px; }

.linkbtn {
  border: 0; background: none; padding: 0;
  font: inherit; font-weight: 600;
  color: var(--accent-ink);
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; text-align: left;
}
.linkbtn:hover { text-decoration-thickness: 2px; }

.nowrap { white-space: nowrap; }

.hint { font-size: 12px; line-height: 1.55; color: var(--ink-mute); margin-top: 12px; }

.detail { display: flex; flex-direction: column; gap: 18px; }
.detail__top { display: flex; align-items: flex-start; gap: 12px; }
.detail__v { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.detail__vs { font-size: 12px; color: var(--ink-mute); margin-top: 3px; }
.detail__top .badge { margin-left: auto; }
.detail__bar { display: flex; flex-wrap: wrap; gap: 6px; }
.detail__sec { display: flex; flex-direction: column; }
.detail__sec .sec-head { margin-bottom: 8px; }
.detail__chips { gap: 6px; }

.kvs { display: flex; flex-direction: column; }
.kvs .kv { border-bottom: 1px solid var(--line-2); }
.kvs .kv:last-child { border-bottom: 0; }

.notecard {
  padding: 11px 13px;
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: 13px; line-height: 1.55; color: var(--ink-2);
}

.who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.who__t { min-width: 0; display: flex; flex-direction: column; }
.who__n {
  font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.who__s { font-size: 11px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------ bubbles --- */

.bubw { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 12px; }
.bubw--out { align-items: flex-end; }

.bub {
  max-width: min(78%, 460px);
  padding: 9px 12px 8px;
  border-radius: 14px;
  border: 1px solid transparent;
}
.bub__b { font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.bub__m { font-size: 10px; margin-top: 5px; opacity: 0.78; }

.bub--out {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent-ink);
  border-bottom-right-radius: 4px;
}
.bub--out .bub__m { color: var(--accent-ink); }

.bub--in {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.bub--in .bub__m { color: var(--ink-mute); }

.bub--sys {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink-mute);
  border-style: dashed;
}
.bub--sys .bub__b { font-size: 12px; }

.bub--stop {
  background: var(--bad-soft);
  border-color: color-mix(in srgb, var(--bad) 40%, transparent);
  color: var(--bad);
}
.bub--stop .bub__b { font: 700 15px var(--mono); letter-spacing: 0.06em; }
.bub--stop .bub__m { color: var(--bad); }
.bub__tag {
  font: 700 9px var(--sans);
  letter-spacing: 0.09em; text-transform: uppercase;
  margin-bottom: 3px;
}

.bub__held {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; color: var(--warn);
  background: var(--warn-soft);
  border-radius: 20px;
  padding: 2px 9px 3px;
  margin-bottom: 5px;
}

.bub--feed { max-width: 100%; margin: 8px 0 0 36px; }
.bub--sm { max-width: 100%; margin-bottom: 8px; }
.bub--prev { max-width: 100%; margin-bottom: 10px; }

/* -------------------------------------------------------------- today --- */

.qbar {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent);
  background: var(--warn-soft);
  color: var(--warn);
}
.qbar__t { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.45; }
.qbar__m { font-size: 11px; font-weight: 600; white-space: nowrap; }
.qbar--open {
  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
  background: var(--ok-soft);
  color: var(--ok);
}

.feed { display: flex; flex-direction: column; }
.feed__i { padding: 13px 16px 12px; border-bottom: 1px solid var(--line-2); }
.feed__i:last-child { border-bottom: 0; }
.feed__h { display: flex; align-items: center; gap: 10px; }
.feed__ic {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--bad-soft); color: var(--bad);
}
.feed__ic.is-vm { background: var(--warn-soft); color: var(--warn); }
.feed__n { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.feed__m { font-size: 10.5px; color: var(--ink-mute); margin-top: 1px; }
.feed__a { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 36px; }

.feed__div {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: var(--surface-2);
  font: 700 10px var(--sans);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-mute);
}
.feed__divl { flex: 1; height: 1px; background: var(--line); }

.mini { display: flex; flex-direction: column; }
.mini__i {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px;
  border: 0; border-bottom: 1px solid var(--line-2);
  background: none; text-align: left; font: inherit; color: var(--ink-2);
}
.mini li:last-child .mini__i { border-bottom: 0; }
.mini__i--btn { cursor: pointer; }
.mini__i--btn:hover { background: var(--surface-2); }
.mini__ic {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--surface-2); color: var(--ink-mute);
}
.mini__t {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini__s {
  display: block; font-size: 11px; color: var(--ink-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini__d { font-size: 11px; color: var(--ink-mute); white-space: nowrap; }

/* -------------------------------------------------------------- calls --- */

.hourstrip { min-height: 130px; }
.hourstrip__a { fill: color-mix(in srgb, var(--ink-mute) 34%, transparent); }
.hourstrip__m { fill: var(--accent); }

.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.legend__i { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); }
.legend__d { width: 10px; height: 10px; border-radius: 3px; display: block; }
.legend__d--a { background: color-mix(in srgb, var(--ink-mute) 34%, transparent); }
.legend__d--m { background: var(--accent); }

/* -------------------------------------------------------------- inbox --- */

.inbox {
  display: grid;
  grid-template-columns: 336px minmax(0, 1fr);
  gap: 16px;
  height: 100%;
  min-height: 520px;
}

.inbox__list {
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.inbox__top { padding: 10px 12px; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 8px; }
.inbox__top .tbl__search { width: 100%; }
.inbox__tabs .tabs { flex-wrap: wrap; row-gap: 4px; }
.inbox__tabs .tabs__t { flex: 0 0 auto; white-space: nowrap; }

.thl { flex: 1; min-height: 0; overflow-y: auto; }
.thl__i {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; padding: 11px 12px;
  border: 0; border-bottom: 1px solid var(--line-2);
  border-left: 3px solid transparent;
  background: none; text-align: left; font: inherit; cursor: pointer;
}
.thl__i:hover { background: var(--surface-2); }
.thl__i.is-on { background: var(--accent-soft); border-left-color: var(--accent); }
.thl__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.thl__h { display: flex; align-items: baseline; gap: 8px; }
.thl__n {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thl__i.is-unread .thl__n { font-weight: 700; }
.thl__d { font-size: 10.5px; color: var(--ink-mute); white-space: nowrap; }
.thl__p {
  font-size: 11.5px; color: var(--ink-mute); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.thl__f { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.thl__s { font-size: 10.5px; color: var(--ink-mute); }
.thl__dot {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-top: 6px;
}

.thread {
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.thread__h {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-2);
}
.thread__n { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread__s {
  font-size: 11px; color: var(--ink-mute); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thread__a { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.thread__chips {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-2);
  background: var(--surface-2);
}
.thread__b {
  flex: 1; min-height: 240px; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 16px 16px 6px;
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink-mute) 16%, transparent) 1px, transparent 0)
    0 0 / 18px 18px;
}
.thread__b:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.thread__stream { margin-top: auto; }
.thread__day {
  text-align: center;
  font: 600 10px var(--sans);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute);
  margin: 4px 0 12px;
}

.compose { border-top: 1px solid var(--line); padding: 10px 14px 12px; background: var(--surface); }
.compose__row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.compose__w { font-size: 10.5px; color: var(--ok); margin-left: auto; white-space: nowrap; }
.compose__w--held { color: var(--warn); }
.compose__t { width: 100%; font-size: 13px; }
.compose__foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.compose__c { font-size: 10.5px; color: var(--ink-mute); }
.compose__f { font-size: 10.5px; color: var(--ink-mute); flex: 1; min-width: 0; }
.compose__foot .btn { margin-left: auto; }

.compose--locked {
  display: flex; align-items: center; gap: 11px;
  background: var(--bad-soft);
  color: var(--bad);
  border-top: 1px solid color-mix(in srgb, var(--bad) 34%, transparent);
}
.compose__lt { font-size: 12.5px; font-weight: 700; }
.compose__ls { font-size: 11.5px; line-height: 1.45; opacity: 0.9; margin-top: 2px; }

/* ---------------------------------------------------------- sequences --- */

.seqrail { display: flex; gap: 10px; flex-wrap: wrap; }
.seqrail__i {
  flex: 1 1 220px; min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left; font: inherit; cursor: pointer;
}
.seqrail__i:hover { border-color: var(--ink-mute); }
.seqrail__i.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.seqrail__i.is-off { opacity: 0.62; }
.seqrail__h { display: flex; align-items: center; gap: 8px; }
.seqrail__n {
  flex: 1; min-width: 0; font: 700 13px var(--display); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seqrail__m { font-size: 11.5px; color: var(--ink-mute); }

.seqhead {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.seqhead__t { font-size: 17px; }
.seqhead__s { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-top: 4px; max-width: 72ch; }
.seqhead__c { margin-top: 10px; gap: 6px; }
.seqhead__sw { flex: 0 0 auto; position: relative; display: inline-block; width: 38px; height: 22px; cursor: pointer; }

.cadwrap { padding: 16px; }
.cad { display: flex; flex-direction: column; }
.cad__i { display: flex; gap: 13px; }
.cad__rail { flex: 0 0 26px; display: flex; flex-direction: column; align-items: center; }
.cad__dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink);
  font: 700 12px var(--mono);
  flex: 0 0 auto;
}
.cad__line { flex: 1; width: 2px; background: var(--line); margin: 4px 0; border-radius: 2px; }
.cad__b { flex: 1; min-width: 0; padding-bottom: 20px; }
.cad__h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cad__day { font: 700 12px var(--display); color: var(--ink); }
.cad__t { font-size: 11.5px; color: var(--ink-2); }
.cad__ch {
  font: 600 9.5px var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px 2px;
}
.cad__gap { font-size: 10.5px; color: var(--ink-mute); white-space: nowrap; }
.cad__n { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-top: 5px; }
.cad__msg {
  margin-top: 7px;
  padding: 10px 12px;
  border-radius: 4px 14px 14px 14px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.cad__meta { font-size: 10.5px; color: var(--ink-mute); margin-top: 6px; }

.tplbody { font-size: 13px; line-height: 1.55; color: var(--accent-ink); }
.tplbody__f {
  display: inline-block;
  font: 600 11.5px var(--mono);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  color: var(--accent-ink);
  border-radius: 5px;
  padding: 0 5px;
  margin: 0 1px;
}

.prev { display: flex; flex-direction: column; }
.prev__ph { padding: 14px; background: var(--surface-2); }
.prev__bar {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.prev__sender { font: 700 13px var(--display); color: var(--ink); }
.prev__now { font-size: 10.5px; color: var(--ink-mute); margin-left: auto; }
.prev__body { display: flex; flex-direction: column; }
.prev__f { padding: 12px 14px 14px; border-top: 1px solid var(--line-2); }
.prev__ft {
  font: 700 10px var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 8px;
}

.stepform { display: flex; flex-direction: column; gap: 12px; }
.mfrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mfrow__l {
  font: 700 10px var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute); margin-right: 2px;
}

.prg { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.prg__t { font-size: 10.5px; color: var(--ink-mute); }

/* -------------------------------------------------------------- leads --- */

.pipe { display: flex; gap: 8px; flex-wrap: wrap; }
.pipe__i {
  flex: 1 1 132px; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px 11px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--pipe-c, var(--accent));
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: left; font: inherit; cursor: pointer;
}
.pipe__i:hover { border-color: var(--ink-mute); border-left-color: var(--pipe-c, var(--accent)); }
.pipe__i.is-on { background: var(--accent-soft); border-color: var(--accent); border-left-color: var(--pipe-c, var(--accent)); }
.pipe__n {
  font: 600 10px var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute);
}
.pipe__c { font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.pipe__v { font-size: 11px; color: var(--ink-mute); }

.lead__j { font-size: 13px; color: var(--ink); }

.enrcard {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 9px;
}
.enrcard__h { display: flex; align-items: center; gap: 8px; }
.enrcard__p { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

.threadmini { display: flex; flex-direction: column; }

/* --------------------------------------------------------- compliance --- */

.band { min-height: 74px; }
.band__off { fill: var(--surface-3); }
.band__on { fill: color-mix(in srgb, var(--accent) 24%, transparent); stroke: var(--accent); stroke-width: 1.5; }
.band__tick { stroke: var(--line); stroke-width: 1; }
.band__now { stroke: var(--bad); stroke-width: 2; stroke-linecap: round; }
.band__lbl { font: 600 12px var(--sans); fill: var(--accent-ink); }

.wfacts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.wfact {
  flex: 1 1 140px; min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.wfact__v { font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.wfact__l { font-size: 11px; color: var(--ink-mute); line-height: 1.4; margin-top: 3px; }

.plan { display: flex; flex-direction: column; gap: 7px; }
.plan__h { display: flex; align-items: baseline; gap: 10px; }
.plan__t { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.plan__v { font-size: 12px; color: var(--ink-2); margin-left: auto; }
.plan__s { font-size: 11.5px; color: var(--ink-mute); }

.rules { display: flex; flex-direction: column; }
.rules__i {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-2);
}
.rules li:last-child { border-bottom: 0; }
.rules__ic { flex: 0 0 auto; color: var(--ok); display: grid; margin-top: 1px; }
.rules__t { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.rules__b { display: block; font-size: 11.5px; color: var(--ink-mute); line-height: 1.5; margin-top: 2px; }

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1180px) {
  .inbox { grid-template-columns: 300px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .inbox { grid-template-columns: minmax(0, 1fr); min-height: 0; height: auto; }
  .inbox.is-narrow .thread { display: none; }
  .inbox.is-narrow.is-thread .inbox__list { display: none; }
  .inbox.is-narrow.is-thread .thread { display: flex; }
  .thl { max-height: none; overflow: visible; }
  .thread__b { min-height: 300px; }
  .thread__h { flex-wrap: wrap; }
  .thread__h > .grow { flex: 1 1 120px; }
  .thread__a { flex: 1 1 100%; order: 3; justify-content: flex-end; }
  .bub { max-width: 88%; }
  .bub--feed { margin-left: 0; }
  .feed__a { margin-left: 0; }
  .pipe__i { flex: 1 1 44%; }
  .seqrail__i { flex: 1 1 100%; }
  .seqhead { flex-wrap: wrap; }
  .cadwrap { padding: 12px; }
  .compose__row { flex-wrap: wrap; }
  .compose__w { margin-left: 0; flex: 1 1 100%; white-space: normal; }
  .compose__foot .btn { margin-left: 0; width: 100%; }
  .input--slim { max-width: 150px; }
  .hourstrip { min-height: 120px; }
}