/* Waitlist & Deposit Manager — pack styles.
   Only what the engine primitives do not already cover. Everything here uses
   the engine's tokens, so light, dark and the emerald accent all follow along.
*/

/* An emerald at 31% lightness needs white on it, and the lifted dark mode
   accent needs the near black. Both are declared rather than left to the
   engine's runtime pick, because the verify harness flips the theme attribute
   directly and an inline pick from the light pass would follow it across. */
:root { --accent-on: #fff; }
[data-theme="dark"] { --accent-on: hsl(222 20% 8%); }

/* The product name is two words longer than the packs the sidebar was sized
   for, so it gets a slightly tighter setting rather than an ellipsis. */
.brand__tag { font-size: 8.6px; letter-spacing: 0.045em; }

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

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

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

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

.adot {
  width: 8px; height: 8px; border-radius: 50%;
  flex: 0 0 auto; display: inline-block;
}

.kvs { display: flex; flex-direction: column; }
.kvs .kv + .kv { border-top: 1px solid var(--line-2); }

.piece {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 600;
}

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

.daybar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.daybar__d { flex: 1; min-width: 0; font: 700 13px var(--display); color: var(--ink); }

.legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.legend__set { display: flex; gap: 12px; 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: inline-block; }
.legend__h { margin-left: auto; font-size: 11.5px; color: var(--ink-mute); }

.book { gap: 10px; }

/* ------------------------------------------------------------ demo clock */

.dclock {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 5px 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  flex: 0 0 auto;
}
.dclock__l { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); }
.dclock__l .ic { color: var(--ink-mute); }
.dclock__o {
  font-size: 10.5px; font-weight: 600;
  padding: 2px 6px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink);
}
.dclock .btn { border-radius: 999px; }

/* ------------------------------------------------------------- countdown */

.cd {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  font-weight: 600;
  font-size: 12px;
  flex: 0 0 auto;
}
.cd .mono { font-variant-numeric: tabular-nums; }
.cd.is-urgent { background: var(--bad-soft); color: var(--bad); }
.cd.is-done { background: var(--surface-2); color: var(--ink-mute); }

.cd--ring {
  position: relative;
  width: 54px; height: 54px;
  padding: 0;
  background: none;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.cdring { position: absolute; inset: 0; }
.cdring__t { stroke: var(--line); stroke-width: 5; }
.cdring__v {
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset 900ms linear;
}
.cd--ring.is-urgent .cdring__v { stroke: var(--bad); }
.cd--ring.is-done .cdring__v { stroke: var(--ink-mute); }
.cdring__n {
  position: relative;
  font-size: 11.5px; font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.cd--ring.is-urgent .cdring__n { color: var(--bad); }

/* ------------------------------------------------------- the offer card */

.slotcard { border-color: var(--line); }
.slotcard.is-focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.slotcard__b { display: flex; flex-direction: column; }
.slotcard__top {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
}
.slotcard__why {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 9px 16px;
  font-size: 12px;
  color: var(--ink-mute);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
}
.slotcard__why .ic { flex: 0 0 auto; margin-top: 1px; }

.slothead { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.slothead__t { min-width: 0; flex: 1; }
.slothead__n { font: 700 14px var(--display); color: var(--ink); letter-spacing: -0.01em; }
.slothead__s { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }
.slothead__v { font-size: 13px; font-weight: 700; color: var(--ink); }

.offer {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
}
.offer__held {
  grid-column: 1 / 3;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-2);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.offer__who { min-width: 0; }
.offer__pos {
  font: 700 10px var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-ink);
}
.offer__name { font: 700 17px var(--display); color: var(--ink); letter-spacing: -0.015em; margin-top: 2px; }
.offer__meta { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }
.offer__piece { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.offer__money { text-align: right; flex: 0 0 auto; }
.offer__ml { font: 700 10px var(--sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-mute); }
.offer__mv { font: 700 21px var(--mono); color: var(--ink); letter-spacing: -0.02em; }
.offer__ms { font-size: 11.5px; color: var(--ink-mute); }

.offer__acts {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 0 16px 14px;
}
.offer__closed {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--ink-2);
}

.slotcard__chain { padding: 12px 16px 14px; border-top: 1px solid var(--line-2); background: var(--surface-2); }
.slotcard__cl {
  font: 700 10px var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 8px;
}

.chain { display: flex; gap: 8px; flex-wrap: wrap; }
.chain__i {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 11px 6px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  min-width: 0;
}
.chain__n {
  width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9.5px; font-weight: 700;
  background: var(--surface-3); color: var(--ink-mute);
  flex: 0 0 auto;
}
.chain__t { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.chain__s { font-size: 11px; color: var(--ink-mute); white-space: nowrap; }
.chain__i.is-past { opacity: 0.66; }
.chain__i.is-live { border-color: var(--accent); background: var(--accent-soft); }
.chain__i.is-live .chain__n { background: var(--accent); color: var(--accent-on); }
.chain__i.is-live .chain__s { color: var(--accent-ink); font-weight: 600; }
.chain__i.is-won { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-soft); }
.chain__i.is-won .chain__s { color: var(--ok); font-weight: 600; }
.chain__i.is-next { border-style: dashed; background: transparent; }
.chain__none { font-size: 12.5px; color: var(--ink-mute); }

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

.duelist, .today, .freed, .queues, .arows { display: flex; flex-direction: column; }
.duelist__i, .today__i, .freed__i { border-bottom: 1px solid var(--line-2); }
.duelist__i:last-child, .today__i:last-child, .freed__i:last-child { border-bottom: 0; }

.duelist__b, .today__b, .freed__b {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 11px 16px 4px;
  border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
}
.freed__b { padding-bottom: 11px; }
.duelist__b:hover, .today__b:hover, .freed__b:hover { background: var(--surface-2); }
.duelist__t, .today__t, .freed__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.duelist__n, .today__n, .freed__n { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duelist__s, .today__s, .freed__s { font-size: 11.5px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duelist__v, .freed__v { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.duelist__a {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 0 16px 11px 55px;
}
.duelist__due { font: 500 11.5px var(--mono); color: var(--ink-mute); margin-right: auto; }
.duelist__due.is-late { color: var(--bad); font-weight: 600; }

.today__w { font: 600 12px var(--mono); color: var(--ink-2); width: 62px; flex: 0 0 auto; }
.today__b { padding: 11px 16px; }
.today__r { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.today__v { font-size: 13px; font-weight: 700; color: var(--ink); }

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

.queues__i { padding: 13px 16px; border-bottom: 1px solid var(--line-2); }
.queues__i:last-child { border-bottom: 0; }
.queues__h { display: flex; align-items: center; gap: 10px; }
.queues__lead {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink);
}
.queues__n { margin-left: auto; font-size: 11.5px; color: var(--ink-mute); }
.queues__bar { margin: 8px 0 6px; }
.queues__next { font-size: 11.5px; color: var(--ink-mute); }
.queues__l { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.queues__l li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.queues__r {
  width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 700;
  background: var(--surface-3); color: var(--ink-mute);
}
.queues__w { font: 500 11px var(--mono); color: var(--ink-mute); }
.queues__none { font-size: 12px; color: var(--ink-mute); margin-top: 6px; }

.slotpick { display: flex; flex-direction: column; gap: 6px; }
.slotpick__i {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; text-align: left;
  font: inherit; color: var(--ink);
}
.slotpick__i:hover { border-color: var(--accent); background: var(--accent-soft); }
.slotpick__w { flex: 1; font-size: 13px; font-weight: 600; }
.slotpick__a { font-size: 12px; color: var(--ink-mute); }
.slotpick__v { font-size: 12.5px; font-weight: 700; }

/* ------------------------------------------------------------- deposits */

.depbig { display: flex; align-items: center; gap: 12px; }
.depbig__v { font: 700 30px var(--mono); color: var(--ink); letter-spacing: -0.03em; }
.dep__v { font-size: 15px; font-weight: 700; color: var(--ink); }

.rulebox {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.rulebox .ic { color: var(--accent-ink); flex: 0 0 auto; margin-top: 1px; }
.rulebox__t { font-size: 13px; font-weight: 700; color: var(--ink); }
.rulebox__b { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.5; }

.verdict {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 15px; margin-bottom: 16px;
  border-radius: var(--radius-sm);
  background: var(--ok-soft);
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
}
.verdict .ic { color: var(--ok); flex: 0 0 auto; }
.verdict__t { font-size: 13px; font-weight: 700; color: var(--ink); }
.verdict__b { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.5; }
.verdict.is-late { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.verdict.is-late .ic { color: var(--bad); }

.proof { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: center; }
.proof__c {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.proof__c--bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 22%, transparent); }
.proof__c--ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 26%, transparent); }
.proof__t { font: 700 10px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.proof__s { font-size: 11.5px; color: var(--ink-mute); margin-top: 1px; }
.proof__v { font: 700 30px var(--mono); color: var(--ink); letter-spacing: -0.03em; margin-top: 6px; }
.proof__l { font-size: 12px; color: var(--ink-2); }
.proof__x { font-size: 11.5px; color: var(--ink-mute); margin-top: 6px; }
.proof__n { font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; }
.proof__arrow { color: var(--ink-mute); display: grid; place-items: center; }
.proof__side { padding-left: 16px; border-left: 1px solid var(--line); }
.proof__sl { font: 700 10px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.proof__sv { font: 700 26px var(--mono); color: var(--accent-ink); letter-spacing: -0.03em; margin-top: 4px; }
.proof__sn { font-size: 12px; color: var(--ink-mute); margin-top: 4px; line-height: 1.5; }

/* ---------------------------------------------------------------- rules */

.rulegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.ruletile {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.ruletile__l { font: 700 10px var(--sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-mute); }
.ruletile__v { font: 700 20px var(--mono); color: var(--ink); letter-spacing: -0.02em; margin-top: 3px; }
.ruletile__s { font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; line-height: 1.4; }

.worked { margin-top: 4px; }
.worked__t { width: 100%; border-collapse: separate; border-spacing: 0; }
.worked__t th {
  text-align: left; padding: 7px 10px;
  font: 700 10px var(--sans); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--line);
}
.worked__t td { padding: 8px 10px; font-size: 12.5px; color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.worked__t tr:last-child td { border-bottom: 0; }
.worked__t .ta-right { text-align: right; }
.worked__clamp {
  display: inline-block; margin-left: 6px;
  font: 600 9.5px var(--sans); letter-spacing: 0.05em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 4px;
  background: var(--accent-soft); color: var(--accent-ink);
}
.worked__n { font-size: 12px; color: var(--ink-mute); margin-top: 10px; line-height: 1.55; }

.flow { display: flex; flex-direction: column; gap: 8px; counter-reset: flow; }
.flow li {
  position: relative; padding-left: 30px;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.55;
  counter-increment: flow;
}
.flow li::before {
  content: counter(flow);
  position: absolute; left: 0; top: 0;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 10px var(--mono);
  background: var(--accent-soft); color: var(--accent-ink);
}
.flow strong { color: var(--ink); }

.rulelist { display: flex; flex-direction: column; gap: 7px; }
.rulelist li { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; padding-left: 14px; position: relative; }
.rulelist li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.rulelist strong { color: var(--ink); }

/* ------------------------------------------------------------- messages */

.msgkind { display: flex; align-items: center; gap: 8px; min-width: 0; }
.msgkind__i {
  width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center; flex: 0 0 auto;
  background: var(--accent-soft); color: var(--accent-ink);
}
.msgkind__i.is-in { background: var(--info-soft); color: var(--info); }
.msgkind__t { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.msgkind__s { font-size: 11px; color: var(--ink-mute); }
.msgbody {
  font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.thread { display: flex; flex-direction: column; gap: 12px; }
.thread__m {
  align-self: flex-end;
  max-width: 84%;
  background: var(--accent-soft);
  border-radius: 12px 12px 3px 12px;
  padding: 10px 13px;
}
.thread__m.is-in {
  align-self: flex-start;
  background: var(--surface-2);
  border-radius: 12px 12px 12px 3px;
}
.thread__b { font-size: 13px; line-height: 1.5; color: var(--ink); }
.thread__m2 { font: 500 10.5px var(--mono); color: var(--ink-mute); margin-top: 5px; }

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

.arows__i {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 16px; border-bottom: 1px solid var(--line-2);
}
.arows__i:last-child { border-bottom: 0; }
.arows__lead {
  font-size: 11px; font-weight: 600; flex: 0 0 auto;
  padding: 2px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2);
}
.arows__n { font-size: 11.5px; color: var(--ink-mute); flex: 0 0 auto; }
.arows__q { font-size: 11.5px; color: var(--ink-mute); flex: 0 0 auto; }
.arows__v { font-size: 13px; font-weight: 700; color: var(--ink); flex: 0 0 auto; min-width: 62px; text-align: right; }

/* --------------------------------------------------------- the calendar */

/* The hour labels have to sit on the hour lines, whatever density the day is
   drawn at. settleBook() sets --cal-hour from the calendar's own pxPerMin. */
.cal__hr { height: var(--cal-hour, 63px); }
.cal__gutter { overflow: hidden; }
/* the closing hour sits on the last line, so lift it clear of the clip */
.cal__hr:last-child span { top: -11px; }

/* An open bench is not a booking: it is a hole with a timer on it. */
.cal__ev--open {
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--ev-c) 10%, var(--surface)) 0 7px,
    color-mix(in srgb, var(--ev-c) 20%, var(--surface)) 7px 14px
  );
  border: 1px dashed var(--ev-c);
  border-left: 3px solid var(--ev-c);
  cursor: pointer;
}
.cal__ev--noshow { opacity: 0.72; filter: grayscale(0.5); }

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

@media (max-width: 1180px) {
  .proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .proof__arrow { display: none; }
  .proof__side { grid-column: 1 / -1; padding-left: 0; padding-top: 14px; border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 900px) {
  /* Two KPI tiles across a phone is not wide enough for these labels on one
     line, and a truncated label is worse than a wrapped one. */
  .stat__l { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }

  .offer { grid-template-columns: 54px minmax(0, 1fr); gap: 12px; }
  .offer__money { grid-column: 1 / -1; text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .offer__ms { margin-left: auto; }
  .offer__held { grid-column: 1 / -1; }
  .proof { grid-template-columns: minmax(0, 1fr); }
  .legend__h { margin-left: 0; }
  .duelist__a { padding-left: 16px; }
  .worked__t th:nth-child(4), .worked__t td:nth-child(4) { display: none; }
  .depbig__v { font-size: 25px; }
  .arows__q { display: none; }
  .dclock { padding-left: 7px; }
  .dclock__l { display: none; }
}