/* Clinic Front Desk — pack styles.
   Only what the engine primitives do not already cover. Everything here uses
   the engine's tokens so light, dark and the teal accent all follow along.
*/

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

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

.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; }

.bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bar__r { margin-left: auto; display: flex; gap: 6px; align-items: center; }

.pdot { border-radius: 50%; background: var(--pc, var(--accent)); flex: 0 0 auto; display: inline-block; }

.ptag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); font-weight: 600; min-width: 0; }
.ptag span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptag--none { color: var(--ink-mute); font-weight: 500; }

/* ------------------------------------------------- detail primitives --- */

.detail { display: flex; flex-direction: column; gap: 18px; }
.detail__top { display: flex; align-items: flex-start; gap: 12px; }
.detail__v { font-size: 27px; 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; }
.kvs .kv__v .row { gap: 10px; }
.kvs .prog { max-width: 130px; }

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

.lineswrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; }
.lines { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lines th {
  text-align: left;
  padding: 8px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font: 700 10px var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
.lines th.ta-right { text-align: right; }
.lines th.ta-center { text-align: center; }
.lines td { padding: 8px 10px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); vertical-align: top; }
.lines tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.lines tfoot td { padding: 6px 10px; border-bottom: 0; color: var(--ink-mute); font-size: 12px; }
.lines tfoot .lines__tot td { padding-top: 8px; padding-bottom: 10px; color: var(--ink); font-weight: 700; border-top: 1px solid var(--line); }
.gstnote { margin-top: 8px; font: 500 11px var(--mono); color: var(--ink-mute); }

.minilist { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.minilist__i, .minilist__plain {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px;
  border: 0; border-bottom: 1px solid var(--line-2);
  background: none; text-align: left; font: inherit; color: var(--ink-2);
}
.minilist__i { cursor: pointer; }
.minilist li:last-child .minilist__i, .minilist li:last-child .minilist__plain { border-bottom: 0; }
.minilist__i:hover { background: var(--surface-2); }
.minilist__t { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minilist__d { font-size: 11px; color: var(--ink-mute); white-space: nowrap; }
.minilist__v { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; min-width: 62px; text-align: right; }

/* ---------------------------------------------------------- day sheet -- */

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

.sheet__h {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 16px;
  background: var(--surface-2);
  border-left: 3px solid var(--pc, var(--accent));
}
.sheet__ht { flex: 1; min-width: 0; }
.sheet__n { font-size: 13px; font-weight: 700; letter-spacing: -0.008em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet__r { font-size: 11px; color: var(--ink-mute); margin-top: 1px; }
.sheet__u { display: flex; align-items: center; gap: 8px; flex: 0 0 128px; }
.sheet__um { font-size: 11px; font-weight: 600; color: var(--ink-2); min-width: 32px; text-align: right; }
.sheet__u .prog { flex: 1; }

.sheet__l { display: flex; flex-direction: column; }
.sheet__i {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--line-2);
  padding-right: 12px;
}
.sheet__l li:last-child { border-bottom: 0; }
.sheet__i.is-completed .sheet__pn { color: var(--ink-2); }
.sheet__i.is-completed { background: color-mix(in srgb, var(--ok) 4%, transparent); }
.sheet__i.is-dna { background: var(--bad-soft); }
.sheet__i.is-in-room { background: var(--accent-soft); }
.sheet__i.is-arrived { background: var(--info-soft); }

.sheet__open {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 4px 9px 16px;
  border: 0; background: none; text-align: left; font: inherit; cursor: pointer;
}
.sheet__open:hover .sheet__pn { text-decoration: underline; text-underline-offset: 2px; }
.sheet__time { flex: 0 0 62px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.sheet__body { flex: 1; min-width: 0; }
.sheet__pn { display: block; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet__pt { display: block; font-size: 11.5px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet__meta { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.sheet__acts { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.sheet__empty { padding: 14px 16px; font-size: 12.5px; color: var(--ink-mute); }

/* ------------------------------------------------------ waiting room --- */

.wroom { display: flex; flex-direction: column; }
.wroom__i {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 16px;
  border: 0; border-bottom: 1px solid var(--line-2);
  background: none; cursor: pointer; text-align: left; font: inherit;
}
.wroom li:last-child .wroom__i { border-bottom: 0; }
.wroom__i:hover { background: var(--surface-2); }
.wroom__t { flex: 1; min-width: 0; }
.wroom__n { display: block; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wroom__s { display: block; font-size: 11.5px; color: var(--ink-mute); }
.wroom__w { font-size: 12px; font-weight: 600; color: var(--warn); flex: 0 0 auto; }

/* --------------------------------------------------------------- DNA --- */

.dnalist { display: flex; flex-direction: column; }
.dnalist__i { padding: 11px 16px; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 7px; }
.dnalist__i:last-child { border-bottom: 0; }
.dnalist__h { display: flex; align-items: baseline; gap: 8px; }
.dnalist__n { font-size: 13px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; }
.dnalist__t { font-size: 11.5px; color: var(--bad); font-weight: 600; }
.dnalist__s { font-size: 11.5px; color: var(--ink-mute); }

/* -------------------------------------------------------------- gaps --- */

.gaps { display: flex; flex-direction: column; }
.gaps__i { padding: 11px 16px; border-bottom: 1px solid var(--line-2); }
.gaps__i:last-child { border-bottom: 0; }
.gaps__h { display: flex; align-items: center; gap: 8px; }
.gaps__w { font-size: 12px; font-weight: 600; color: var(--ink); }
.gaps__p { font-size: 11.5px; color: var(--ink-2); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gaps__d { font-size: 11px; color: var(--ink-mute); }
.gaps__m {
  margin-top: 8px; padding: 9px 11px;
  background: var(--accent-soft); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.gaps__mt { font-size: 12.5px; font-weight: 700; color: var(--accent-ink); }
.gaps__mu { font-weight: 500; }
.gaps__mn { font-size: 11.5px; color: var(--ink-2); line-height: 1.45; }
.gaps__none { margin-top: 6px; font-size: 11.5px; color: var(--ink-mute); }

/* ------------------------------------------------------------ legend --- */

.legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.legend__i { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); }
.legend__i i { width: 9px; height: 9px; border-radius: 3px; display: block; flex: 0 0 auto; }
.legend__h { font-size: 11.5px; color: var(--ink-mute); margin-left: auto; }

.freed { display: flex; flex-direction: column; }
.freed__i {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-bottom: 1px solid var(--line-2);
}
.freed li:last-child .freed__i { border-bottom: 0; }
.freed__w { font-size: 12px; font-weight: 600; color: var(--ink); flex: 0 0 auto; }
.freed__p { font-size: 11.5px; color: var(--ink-2); flex: 0 0 auto; }
.freed__r { font-size: 11.5px; color: var(--ink-mute); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----------------------------------------------------- appointment ----- */

.flow { display: flex; gap: 4px; }
.flow .flow__s { flex: 1 1 0; min-width: 0; justify-content: center; }
.flow .flow__s.is-done { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.flow .flow__s.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-on); font-weight: 700; }

.tnotes { display: flex; flex-direction: column; gap: 9px; }
.tnotes__i { border-left: 2px solid var(--accent-soft-2); padding: 2px 0 2px 11px; }
.tnotes__t { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.tnotes__m { font-size: 10.5px; color: var(--ink-mute); margin-top: 3px; }

.pathead { display: flex; align-items: flex-start; gap: 14px; }
.pathead__n { font: 700 18px var(--display); letter-spacing: -0.015em; }
.pathead__s { font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; }
.pathead__tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }

/* ------------------------------------------------------------ triage --- */

.triwrap {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.trilist { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.trilist__l {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
  max-height: calc(100vh - 220px); overflow-y: auto;
}
.trilist__i {
  display: flex; flex-direction: column; gap: 5px;
  width: 100%; padding: 11px 13px;
  border: 0; border-bottom: 1px solid var(--line-2); border-left: 3px solid transparent;
  background: none; text-align: left; font: inherit; cursor: pointer;
}
.trilist li:last-child .trilist__i { border-bottom: 0; }
.trilist__i:hover { background: var(--surface-2); }
.trilist__i.is-on { background: var(--accent-soft); border-left-color: var(--accent); }
.trilist__h { display: flex; align-items: center; gap: 8px; }
.trilist__a { font-size: 10.5px; color: var(--ink-mute); margin-left: auto; }
.trilist__n { font-size: 13px; font-weight: 700; color: var(--ink); }
.trilist__m { font-size: 11.5px; color: var(--ink-mute); line-height: 1.45; }

.tridetail {
  display: flex; flex-direction: column; gap: 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-1);
  padding: 18px; min-width: 0;
}
.tridetail__head { display: flex; align-items: flex-start; gap: 12px; }
.tridetail__t { font-size: 17px; }
.tridetail__s { font-size: 12.5px; color: var(--ink-mute); margin-top: 3px; }

.trimsg {
  margin: 0; padding: 13px 15px;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.trimsg p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.trimsg__f { margin-top: 8px; font: 500 11px var(--mono); color: var(--ink-mute); }

.suggest {
  border: 1px solid var(--accent-soft-2);
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 13px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.suggest__top { display: flex; align-items: center; gap: 12px; }
.suggest__w { font: 700 14px var(--display); color: var(--ink); letter-spacing: -0.01em; }
.suggest__p { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.suggest__t { text-align: right; flex: 0 0 auto; }
.suggest__tn { font-size: 12px; font-weight: 600; color: var(--ink); }
.suggest__tf { font-size: 11px; color: var(--ink-2); margin-top: 2px; }
.suggest__r { display: flex; gap: 7px; font-size: 12px; color: var(--accent-ink); line-height: 1.45; }
.suggest__r .ic { flex: 0 0 auto; margin-top: 1px; }

.triactions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.tridone {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; border-radius: var(--radius);
  background: var(--surface-2); color: var(--ink-2); font-size: 12.5px;
}

/* --------------------------------------------------------- campaigns --- */

.camp {
  display: flex; flex-direction: column; gap: 11px;
  padding: 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-1);
  text-align: left; font: inherit; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.camp:hover { border-color: var(--ink-mute); box-shadow: var(--shadow-2); }
.camp.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.camp__h { display: flex; align-items: flex-start; gap: 10px; }
.camp__ic {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent-ink);
}
.camp__t { font-size: 13.5px; }
.camp__w { font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; line-height: 1.4; }
.camp__n { font-size: 13px; font-weight: 700; color: var(--ink); }
.camp__funnel { display: flex; flex-direction: column; gap: 5px; }
.camp__f { display: flex; align-items: center; gap: 9px; }
.camp__fl { flex: 0 0 68px; font-size: 11px; color: var(--ink-mute); }
.camp__fb { flex: 1; min-width: 0; }
.camp__fv { flex: 0 0 26px; text-align: right; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.camp__d { font-size: 11.5px; color: var(--ink-mute); line-height: 1.45; border-top: 1px solid var(--line-2); padding-top: 9px; }

/* ---------------------------------------------------------- waitlist --- */

.offer { display: flex; flex-direction: column; gap: 12px; }
.offer__note { font-size: 12.5px; color: var(--ink-mute); line-height: 1.5; }
.slots { display: flex; flex-direction: column; gap: 5px; }
.slots__i {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); text-align: left; font: inherit; cursor: pointer;
}
.slots__i:hover { border-color: var(--ink-mute); }
.slots__i.is-on { border-color: var(--accent); background: var(--accent-soft); }
.slots__w { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.slots__t { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.slots__p { font-size: 11.5px; color: var(--ink-mute); flex: 0 0 62px; text-align: right; }

/* ----------------------------------------------------------- reports --- */

.utilrows { display: flex; flex-direction: column; }
.utilrows__i {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 16px; border-bottom: 1px solid var(--line-2);
}
.utilrows__i:last-child { border-bottom: 0; }
.utilrows__t { flex: 0 0 150px; min-width: 0; }
.utilrows__n { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utilrows__r { font-size: 11px; color: var(--ink-mute); }
.utilrows__v { font-size: 12px; font-weight: 600; color: var(--ink); flex: 0 0 46px; text-align: right; }

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

@media (max-width: 1180px) {
  .triwrap { grid-template-columns: minmax(0, 1fr); }
  .trilist__l { max-height: 320px; }
}

@media (max-width: 900px) {
  .sheet__meta { display: none; }
  .sheet__i { flex-wrap: wrap; padding-right: 10px; }
  .sheet__open { padding-left: 12px; }
  .sheet__acts { padding: 0 0 9px 12px; }
  .sheet__u { flex-basis: 84px; }
  .legend__h { margin-left: 0; flex-basis: 100%; }
  .tridetail { padding: 14px; }
  .suggest__top { flex-wrap: wrap; }
  .suggest__t { text-align: left; }
  .utilrows__t { flex-basis: 110px; }
  .freed__i { flex-wrap: wrap; }
  .freed__r { flex-basis: 100%; }
}

/* ------------------------------------------------- appended: polish ----- */

.sheet__state {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 0 0 84px;
  font: 700 9.5px var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
.sheet__state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.sheet__state--arrived { color: var(--info); }
.sheet__state--in-room { color: var(--accent-ink); }
.sheet__state--completed { color: var(--ok); }
.sheet__state--dna { color: var(--bad); }
.sheet__acts { border-left: 1px solid var(--line-2); padding-left: 10px; min-height: 27px; }

.wroom__w { color: var(--ink-mute); }
.wroom__w.is-long { color: var(--warn); }

/* A week lane is eighty pixels wide, so the chip carries a name and a time
   and nothing else. The day view has room for the appointment type. */
.cal--week .cal__evs { display: none; }
.cal--week .cal__evt { -webkit-line-clamp: 1; }
.cal--week .cal__ev { padding: 2px 4px; gap: 0; }

.steps { display: flex; flex-direction: column; gap: 8px; }
.steps__i { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.steps__n {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink);
  font: 700 11px var(--mono);
}

/* Row tints have to stay quiet in both themes, so they are mixed off the tone
   token rather than using the solid soft colour. */
.sheet__i.is-completed { background: color-mix(in srgb, var(--ok) 5%, transparent); }
.sheet__i.is-dna { background: color-mix(in srgb, var(--bad) 9%, transparent); }
.sheet__i.is-in-room { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sheet__i.is-arrived { background: color-mix(in srgb, var(--info) 8%, transparent); }
.sheet__acts:empty { display: none; }

.tbl__c > p + p { margin-top: 1px; font-size: 11px; }

@media (max-width: 900px) {
  .sheet__open { flex: 1 1 100%; }
  .sheet__state { flex-basis: auto; font-size: 9px; letter-spacing: 0.06em; }
  .sheet__acts { border-left: 0; padding: 0 0 9px 12px; }
}

/* Open slots read better as a board than as a long strip when they have the
   full width of the page to sit in. */
.gaps--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.gaps--grid .gaps__i { border-bottom: 0; border-right: 1px solid var(--line-2); }
.gaps--grid .gaps__i:last-child { border-right: 0; }

.srcrows { display: flex; flex-direction: column; }
.srcrows__i {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--line-2);
}
.srcrows__i:last-child { border-bottom: 0; }
.srcrows__n { flex: 0 0 240px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srcrows__v { flex: 0 0 34px; text-align: right; font-size: 12px; font-weight: 600; color: var(--ink); }
.srcrows__p { flex: 0 0 46px; text-align: right; font-size: 11.5px; color: var(--ink-mute); }

@media (max-width: 900px) { .srcrows__n { flex-basis: 130px; } }

.tridone { flex-wrap: wrap; }
.tridone__r { flex-basis: 100%; font-size: 12.5px; color: var(--ink-mute); line-height: 1.5; padding-left: 25px; }