/* ============================================================
 *  /decks — page chrome
 *
 *  The Decks page is a management surface: a suggestions strip,
 *  a card per deck (meta chips + actions + an edit panel), and a
 *  manual "new deck" card. Cards reuse the global ``.card`` shell;
 *  this file styles the deck-specific bits + the shared ``.cf-*``
 *  form vocabulary (mirrored from the calendar admin page, which
 *  scopes them inline, so they need styling here too).
 * ============================================================ */

/* Header uses the global .page-head + .lede (shell.css), same as Rotations. */

/* -- chips + hints ----------------------------------------- */

.cf-hint {
  margin: var(--t-space-1) 0 0;
  color: var(--t-fg-soft);
  font-size: var(--t-size-xs);
  line-height: 1.45;
}
.cf-hint code,
.cf-id code {
  font-family: var(--t-font-mono);
  font-size: 0.92em;
  padding: 0 3px;
  border-radius: var(--t-radius-sm);
  background: var(--t-surface-sunk);
}

.deck-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--t-space-2);
  margin: var(--t-space-2) 0 var(--t-space-3);
}
.cf-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--t-radius-pill);
  border: 1px solid var(--t-border);
  background: var(--t-surface-soft);
  color: var(--t-fg-soft);
  font-size: var(--t-size-xs);
  font-weight: 600;
  white-space: nowrap;
}
.cf-chip--off {
  color: var(--t-warn, #92400e);
  border-color: color-mix(in oklab, var(--t-warn, #d97706) 40%, transparent);
  background: color-mix(in oklab, var(--t-warn, #d97706) 12%, transparent);
}

/* -- deck cards -------------------------------------------- */

.deck-card {
  position: relative;
}
.deck-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--t-space-2);
  align-items: center;
}
.deck-actions .ghost span,
.deck-actions .button span {
  margin-left: 4px;
}
.deck-edit {
  margin-top: var(--t-space-4);
  padding-top: var(--t-space-4);
  border-top: 1px dashed var(--t-border);
}

/* -- suggestions strip ------------------------------------- */

.deck-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--t-space-3);
  padding: var(--t-space-3) 0;
  border-top: 1px solid var(--t-border);
}
.deck-suggestion:first-of-type {
  border-top: none;
}
.deck-suggestion__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.deck-suggestion__meta .cf-hint {
  margin: 0;
}

/* -- edit form vocabulary ---------------------------------- */

.cf-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--t-space-3);
}
@media (max-width: 520px) {
  .cf-row2 {
    grid-template-columns: 1fr;
  }
}

.cf-dev-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--t-space-2);
}
.cf-dev-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-pill);
  background: var(--t-surface-soft);
  font-size: var(--t-size-sm);
  cursor: pointer;
  transition: border-color var(--t-trans-fast), background var(--t-trans-fast);
}
.cf-dev-chip:has(input:checked) {
  border-color: var(--t-accent);
  background: var(--t-accent-tint);
  color: var(--t-accent);
}

.cf-page-refresh {
  display: flex;
  flex-direction: column;
  gap: var(--t-space-1);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-md);
  padding: var(--t-space-2) var(--t-space-3);
  background: var(--t-surface-sunk);
}
.cf-pr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--t-space-3);
}
.cf-pr-row span {
  font-size: var(--t-size-sm);
  color: var(--t-fg);
}
.cf-pr-row input {
  width: 7rem;
  flex: none;
}

.cf-graph {
  width: 100%;
  font-family: var(--t-font-mono);
  font-size: var(--t-size-xs);
  line-height: 1.5;
  resize: vertical;
}

.cf-advanced {
  margin-top: var(--t-space-4);
  border-top: 1px dashed var(--t-border);
  padding-top: var(--t-space-3);
}
.cf-advanced > summary {
  cursor: pointer;
  color: var(--t-fg-soft);
  font-size: var(--t-size-sm);
  font-weight: 600;
  list-style-position: inside;
}
.cf-advanced > summary:hover {
  color: var(--t-fg);
}
.cf-advanced[open] > summary {
  margin-bottom: var(--t-space-3);
}

/* ---- deck editor (design-handoff rebuild, mapped to app tokens) --------- */
.dxe { max-width: 1120px; margin: 0 auto; padding-bottom: 96px; }
.dxe-mono-label { font-family: var(--t-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--t-muted); }
.dxe-help { font-size: 12px; line-height: 1.45; color: var(--t-fg-soft); margin: 0; }
.dxe-h2 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin: 0; }

/* header */
.dxe-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 20px; gap: 16px; }
.dxe-head-left { display: flex; flex-direction: column; gap: 6px; }
.dxe-crumb { display: flex; align-items: center; gap: 8px; font-family: var(--t-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--t-muted); }
.dxe-crumb a { color: var(--t-muted); text-decoration: none; }
.dxe-crumb a:hover { color: var(--t-fg-soft); }
.dxe-title-input { border: none; border-bottom: 1px dashed transparent; background: transparent; font-family: inherit; font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--t-fg); width: 380px; max-width: 100%; padding: 0 0 2px; }
.dxe-title-input::placeholder { color: var(--t-muted); }
.dxe-title-input:hover { border-bottom-color: var(--t-border-strong); }
.dxe-title-input:focus { outline: none; border-bottom-color: var(--t-fg); }
.dxe-head-right { display: flex; align-items: center; gap: 12px; padding-top: 20px; }
.dxe-status-word { font-family: var(--t-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted); }
.dxe .switch input { position: absolute; opacity: 0; width: 0; height: 0; }

/* two-column body */
.dxe-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px, 312px); gap: 20px; align-items: start; }
@media (max-width: 1040px) { .dxe-body { grid-template-columns: 1fr; } }
.dxe-card { background: var(--t-surface); border: 1px solid var(--t-border); border-radius: var(--t-radius-lg); padding: 20px 22px 24px; }

/* flip order card */
.dxe-main-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 18px; }
.dxe-meta { font-size: 13px; color: var(--t-muted); }
.dxe-wraps { margin-left: auto; font-family: var(--t-font-mono); font-size: 11px; letter-spacing: .06em; color: var(--t-muted); }

/* advance bar */
.dxe-advance { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--t-inset); border: 1px solid var(--t-border); border-radius: var(--t-radius-md); padding: 12px 14px; margin-bottom: 20px; }
.dxe-seg-track { display: inline-flex; align-items: stretch; height: var(--dxe-ctl-h, 36px); box-sizing: border-box; gap: 3px; background: var(--t-border); border-radius: 9px; padding: 3px; }
.dxe-seg { position: relative; display: inline-flex; }
.dxe-seg input { position: absolute; opacity: 0; }
.dxe-seg span { display: inline-flex; align-items: center; padding: 0 14px; font-size: 13px; font-weight: 500; border-radius: 7px; cursor: pointer; color: var(--t-fg-soft); }
.dxe-seg input:checked + span { background: var(--t-surface); color: var(--t-fg); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.dxe-seg input:focus-visible + span { outline: 2px solid var(--t-accent); outline-offset: 1px; }
.dxe-interval { display: inline-flex; align-items: center; gap: 8px; }
.dxe-every { font-size: 13px; color: var(--t-fg-soft); }
.dxe-adv-hint { font-size: 13px; color: var(--t-fg-soft); }
.dxe-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Tuning card: timing + conditions folds below the page rail. */
.dxe-main-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.dxe-tuning { background: var(--t-surface-sunk); padding: 8px 22px; }
.dxe-tuning-hint { padding: 8px 0; }
.dxe-fold { font-size: 13px; }
.dxe-fold + .dxe-fold { border-top: 1px solid color-mix(in oklab, var(--t-border) 80%, transparent); }
.dxe-fold > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 12px 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--t-fg);
  list-style: none;
}
.dxe-fold > summary::-webkit-details-marker { display: none; }
.dxe-fold > summary:hover { color: var(--t-accent); }
.dxe-fold-caret { font-size: 12px; color: var(--t-fg-soft); transition: transform 0.15s; }
.dxe-fold[open] > summary .dxe-fold-caret { transform: rotate(90deg); }
.dxe-fold-hint { margin-left: auto; font: 12px var(--t-font-mono); font-weight: 400; color: var(--t-muted); }
.dxe-fold > .dxe-adv-grid, .dxe-fold > .dxe-advanced-body { padding: 2px 0 14px; }
@media (prefers-reduced-motion: reduce) { .dxe-fold-caret { transition: none; } }
.dxe-adv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; padding: 12px 2px 4px; }
.dxe-days { display: flex; flex-wrap: wrap; gap: 4px; }
.dxe-day { position: relative; display: inline-flex; }
.dxe-day input { position: absolute; opacity: 0; }
.dxe-day span { display: inline-flex; align-items: center; height: var(--dxe-ctl-h, 36px); box-sizing: border-box; padding: 0 11px; font-size: 12px; border: 1px solid var(--t-border-strong); border-radius: var(--t-radius-sm); cursor: pointer; color: var(--t-fg-soft); }
.dxe-day input:checked + span { background: var(--t-fg); color: var(--t-bg); border-color: var(--t-fg); }
.dxe-smart { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }

/* page grid */
.dxe-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
.dxe-pcard { position: relative; background: var(--t-surface); border: 1px solid var(--t-border); border-radius: 12px; padding: 9px; cursor: grab; transition: box-shadow 140ms, transform 140ms; }
.dxe-pcard:hover { box-shadow: 0 4px 14px rgba(0,0,0,.09); transform: translateY(-1px); }
.dxe-pcard.is-selected::after { content: ""; position: absolute; inset: -1px; border: 2px solid var(--t-fg); border-radius: 13px; pointer-events: none; }
.dxe-pcard.is-dragging { opacity: .5; }
.dxe-thumb { height: 112px; border-radius: 7px; overflow: hidden; border: 1px solid var(--t-border); background: var(--t-inset); display: flex; align-items: center; justify-content: center; }
.dxe-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dxe-thumb.is-ph { font-family: var(--t-font-mono); font-size: 10px; letter-spacing: .08em; color: var(--t-muted); background-image: linear-gradient(var(--t-border) 1px, transparent 1px), linear-gradient(90deg, var(--t-border) 1px, transparent 1px); background-size: 14px 14px; }
.dxe-badge { position: absolute; top: 7px; left: 7px; width: 19px; height: 19px; border-radius: 50%; background: var(--t-fg); color: var(--t-bg); font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.dxe-grip { position: absolute; top: 6px; right: 7px; font-family: var(--t-font-mono); font-size: 12px; color: var(--t-muted); cursor: grab; }
.dxe-pcard-foot { display: flex; align-items: center; gap: 8px; padding: 9px 3px 2px; }
.dxe-pcard-name { flex: 1; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dxe-star { color: var(--t-fg); font-size: 12px; }
.dxe-add { min-height: 156px; border: 1px dashed var(--t-border-strong); border-radius: 12px; background: none; color: var(--t-muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 13px; }
.dxe-add:hover:not(:disabled) { border-color: var(--t-fg); color: var(--t-fg); background: var(--t-inset); }
.dxe-add:disabled { opacity: .5; cursor: not-allowed; }
.dxe-add-plus { font-size: 19px; }

/* selected-page panel */
.dxe-panel { margin-top: 18px; border: 1px solid var(--t-border); border-radius: 12px; background: var(--t-inset); overflow: hidden; }
.dxe-panel-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--t-border); }
.dxe-panel-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dxe-remove { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--t-danger); background: transparent; border: 1px solid transparent; padding: 5px 10px; border-radius: 7px; cursor: pointer; }
.dxe-remove:hover { background: var(--t-danger-bg); border-color: var(--t-pill-danger-border); }
.dxe-fieldgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 14px; padding: 15px 16px 17px; }
.dxe-field { display: flex; flex-direction: column; gap: 7px; }
.dxe-fbtn { display: inline-flex; align-items: center; justify-content: center; height: var(--dxe-ctl-h); box-sizing: border-box; background: var(--t-surface); border: 1px solid var(--t-border-strong); border-radius: var(--t-radius-sm); padding: 0 11px; font-size: 13px; color: var(--t-fg); cursor: pointer; }
.dxe-fbtn:hover:not(:disabled) { border-color: var(--t-fg); }
.dxe-fbtn:disabled { opacity: .45; cursor: default; }
.dxe-home-btn { justify-content: flex-start; white-space: nowrap; }
.dxe-pos-btns { display: flex; gap: 6px; }
.dxe-pos-btns .dxe-fbtn { flex: 1; }
.dxe-dwell-box { display: flex; align-items: center; gap: 7px; }
.dxe-dwell-inp { flex: 1; min-width: 0; }
.dxe-dwell-suf { font-size: 12px; color: var(--t-fg-soft); flex: none; }
.dxe-slider-row { display: flex; align-items: center; gap: 12px; }
.dxe-slider-row input[type="range"] { flex: 1; min-width: 60px; accent-color: var(--t-accent); }
.dxe-num-box { flex: none; width: 118px; }

/* right rail */
.dxe-rail-col { display: flex; flex-direction: column; gap: 20px; }
.dxe-rail-card { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.dxe-set { display: flex; flex-direction: column; gap: 7px; }
.dxe-avail-head { display: flex; align-items: baseline; justify-content: space-between; }
.dxe-avail-count { font-size: 12px; color: var(--t-fg-soft); }
.dxe-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.dxe-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--t-border); background: var(--t-inset); border-radius: var(--t-radius-pill); padding: 6px 12px 6px 10px; font-size: 12.5px; color: var(--t-fg); cursor: pointer; }
.dxe-chip:hover { border-color: var(--t-fg); background: var(--t-surface); }
.dxe-chip-plus { color: var(--t-fg-soft); font-size: 13px; }

/* form controls reuse the app's field styling, all one height */
.dxe { --dxe-ctl-h: 36px; }
.dxe input[type="text"]:not(.dxe-title-input),
.dxe input[type="number"],
.dxe input[type="time"],
.dxe select {
  width: 100%; height: var(--dxe-ctl-h); box-sizing: border-box; padding: 0 var(--t-space-3);
  border: 1px solid var(--t-border-strong); border-radius: var(--t-radius-sm); background: var(--t-surface);
  font: inherit; font-size: 13px; color: var(--t-fg);
  transition: border-color var(--t-trans-fast), box-shadow var(--t-trans-fast); }
.dxe .dxe-fb-row input[type="number"] { width: 60px; }
.dxe select { -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--t-fg-soft) 50%), linear-gradient(135deg, var(--t-fg-soft) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 30px; cursor: pointer; }
.dxe input:hover, .dxe select:hover { border-color: var(--t-fg); }
.dxe input:focus, .dxe select:focus { outline: none; border-color: var(--t-accent); box-shadow: var(--t-ring); }
.dxe-interval select { width: auto; }

/* fallback (hidden when JS) */
.dxe-fallback.js-hidden { display: none; }
.dxe-fallback { border: 1px dashed var(--t-border); border-radius: var(--t-radius-sm); margin-top: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.dxe-fb-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }

/* sticky action bar */
/* The status text grows with the deck's page chain, and the buttons can't
   shrink below their labels, so without wrapping the group is pushed past the
   right edge and Save becomes unreachable (issue #192, phone portrait). Wrap
   rather than scroll: a sticky bar you have to scroll sideways is no better
   than one you can't see. ``min-width: 0`` lets the status give up space
   before that happens. */
.dxe-actionbar { position: sticky; bottom: 0; margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: color-mix(in oklab, var(--t-bg) 86%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--t-border); }
.dxe-actionbar-status { font-size: 12.5px; color: var(--t-muted); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dxe-actionbar-btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.dxe-btn-ghost { background: var(--t-surface); border: 1px solid var(--t-border-strong); border-radius: 9px; padding: 9px 16px; font-size: 13px; font-weight: 500; color: var(--t-fg); cursor: pointer; }
.dxe-btn-ghost:hover { border-color: var(--t-fg); }
.dxe-btn-danger { color: var(--t-danger); }
.dxe-btn-primary { background: var(--t-fg); color: var(--t-bg); border: 1px solid var(--t-fg); border-radius: 9px; padding: 9px 20px; font-size: 13px; font-weight: 600; cursor: pointer; }
.dxe-btn-primary:hover { opacity: .9; }

/* ---- "Updates" cadence control on the dashboards list ------------------ */
.dx-updates-ctl { display: flex; align-items: center; gap: 6px; margin-left: 10px; flex: none; }
.dx-updates-ctl select { font-size: 12px; padding: 2px 6px; border-radius: var(--t-radius-sm); border: 1px solid var(--t-border); background: var(--t-bg); color: var(--t-fg-soft); }
.dx-updates-ctl select:has(option:checked:not([value="0"])) { border-color: var(--t-accent); color: var(--t-fg); }
/* Custom cadence: a minutes box next to the preset select. Sized for four
   digits (1440 is the ceiling) so it doesn't crowd the card's action row. */
.dx-updates-ctl input[type="number"] { width: 62px; font-size: 12px; padding: 2px 6px; border-radius: var(--t-radius-sm); border: 1px solid var(--t-accent); background: var(--t-bg); color: var(--t-fg); }
.dx-updates-ctl .dx-updates-unit { font-size: 12px; color: var(--t-fg-soft); }
.dx-updates-ctl .dx-updates-set { font-size: 12px; padding: 2px 8px; }
.dx-updates-ctl [hidden] { display: none; }

/* -- Lineups page: per-display sections, entry rows --------------------- */
.dk-group { margin-bottom: 26px; }
.dk-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px 10px;
  flex-wrap: wrap;
}
.dk-group-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--t-fg) 6%, var(--t-surface));
  color: color-mix(in oklab, var(--t-fg) 60%, transparent);
  font-size: 16px;
}
.dk-group-name { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.dk-group-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 12px var(--t-font-mono);
  color: var(--t-accent);
}
.dk-group-count {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 12px var(--t-font-mono);
  color: color-mix(in oklab, var(--t-fg) 55%, transparent);
  cursor: default;
}
.dk-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--t-accent);
  animation: dk-live-pulse 2.4s ease-in-out infinite;
}
@keyframes dk-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.dk-empty {
  text-align: center;
  padding: 56px 20px;
  border: 1px dashed color-mix(in oklab, var(--t-border) 90%, transparent);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.dk-empty > i { font-size: 34px; color: color-mix(in oklab, var(--t-fg) 30%, transparent); }
.dk-empty h2 { margin: 0; font-size: 18px; }
.dk-empty p { margin: 0 0 10px; font-size: 14px; color: color-mix(in oklab, var(--t-fg) 55%, transparent); }

.dk-devchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--t-border) 90%, transparent);
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in oklab, var(--t-fg) 60%, transparent);
  white-space: nowrap;
}
.dk-devchip i { font-size: 13px; }

/* Delivery-gap notice: member dashboards bound to a different display. */
.dk-warn {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 6px 11px;
  border-radius: 9px;
  border: 1px solid color-mix(in oklab, var(--t-warn, #d97706) 40%, transparent);
  background: color-mix(in oklab, var(--t-warn, #d97706) 12%, transparent);
  color: var(--t-fg);
  font-size: 12.5px;
}
.dk-warn i { color: var(--t-warn, #92400e); font-size: 15px; flex: none; }

.dk-more { position: relative; display: inline-flex; }
.dk-more > summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: color-mix(in oklab, var(--t-fg) 55%, transparent);
  cursor: pointer;
}
.dk-more > summary::-webkit-details-marker { display: none; }
.dk-more > summary:hover { background: color-mix(in oklab, var(--t-fg) 6%, var(--t-surface)); color: var(--t-fg); }
.dk-more-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--t-surface);
  border: 1px solid color-mix(in oklab, var(--t-border) 90%, transparent);
  border-radius: 10px;
  box-shadow: 0 8px 24px color-mix(in oklab, var(--t-fg) 12%, transparent);
}
.dk-more-item {
  background: none;
  border: 0;
  box-shadow: none;
  text-align: left;
  width: 100%;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--t-fg);
  cursor: pointer;
}
.dk-more-item:hover { background: color-mix(in oklab, var(--t-fg) 6%, var(--t-surface)); }
.dk-more-item.is-danger { color: var(--t-danger); }

.dk-rows { display: flex; flex-direction: column; gap: 12px; }
.dk-row {
  background: var(--t-surface);
  border: 1px solid color-mix(in oklab, var(--t-border) 85%, transparent);
  border-radius: 16px;
  overflow: hidden;
}
.dk-row.is-playing { border: 1.5px solid var(--t-accent); }
.dk-row.is-off .dk-body { opacity: 0.5; filter: grayscale(0.6); }
.dk-row.is-off { opacity: 0.75; }
.dk-row.is-new {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--t-accent) 18%, transparent);
  animation: dk-new-fade 2.4s ease-out 1.2s forwards;
}
@keyframes dk-new-fade { to { box-shadow: none; } }

.dk-row-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px 14px;
  flex-wrap: wrap;
}
.dk-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: color-mix(in oklab, var(--t-fg) 6%, var(--t-surface));
  color: color-mix(in oklab, var(--t-fg) 60%, transparent);
}
.dk-badge.is-live {
  background: color-mix(in oklab, var(--t-accent) 12%, var(--t-surface));
  color: var(--t-accent);
}
.dk-name { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; color: var(--t-fg); }
.dk-meta { font: 12.5px var(--t-font-mono); color: color-mix(in oklab, var(--t-fg) 55%, transparent); }
.dk-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.dk-act {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: color-mix(in oklab, var(--t-fg) 65%, transparent);
  cursor: pointer;
  text-decoration: none;
}
.dk-act.is-primary { color: var(--t-accent); }
.dk-act.is-quiet { font-weight: 400; color: color-mix(in oklab, var(--t-fg) 45%, transparent); }
.dk-act:hover { color: var(--t-accent); }
.dk-act-rule { width: 1px; height: 20px; background: color-mix(in oklab, var(--t-border) 90%, transparent); }

.dk-body { padding: 0 22px 20px; display: flex; gap: 10px; }
.dk-body--cycle { align-items: flex-end; }
.dk-body--send { align-items: center; gap: 20px; }
.dk-body--nav { align-items: flex-end; gap: 14px; }

.dk-screen { margin: 0; display: flex; flex-direction: column; gap: 7px; width: 150px; flex-shrink: 0; }
.dk-screen-frame {
  position: relative;
  width: 150px;
  height: 92px;
  border-radius: 9px;
  background: color-mix(in oklab, var(--t-fg) 4%, var(--t-surface));
  border: 1px solid color-mix(in oklab, var(--t-border) 85%, transparent);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: color-mix(in oklab, var(--t-fg) 25%, transparent);
  font-size: 20px;
}
.dk-screen-frame img { width: 100%; height: 100%; object-fit: cover; }
.dk-screen.is-live .dk-screen-frame {
  border: 2px solid var(--t-accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--t-accent) 12%, transparent);
}
.dk-screen-wash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.dk-screen-wash.do-push { animation: dk-push-once 900ms ease-in-out 1; }
@keyframes dk-push-once {
  0% { opacity: 0; }
  33% { opacity: 0.5; }
  78%, 100% { opacity: 0; }
}
.dk-screen figcaption {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: color-mix(in oklab, var(--t-fg) 65%, transparent);
  min-width: 0;
}
.dk-screen figcaption .dk-screen-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-screen.is-live figcaption { color: var(--t-accent); font-weight: 700; }
.dk-cond {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: color-mix(in oklab, var(--t-fg) 45%, transparent);
  text-decoration: none;
}
.dk-cond:hover { color: var(--t-accent); }
.dk-step-ix { margin-left: auto; font: 11px var(--t-font-mono); color: color-mix(in oklab, var(--t-fg) 35%, transparent); }
.dk-chevron { color: color-mix(in oklab, var(--t-fg) 25%, transparent); font-size: 14px; margin-bottom: 28px; align-self: flex-end; }

.dk-next {
  margin-left: auto;
  padding-bottom: 28px;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.dk-next span { font: 12px var(--t-font-mono); color: color-mix(in oklab, var(--t-fg) 55%, transparent); }
.dk-next strong { font: 600 19px var(--t-font-mono); color: var(--t-accent); }
.dk-next strong.is-ink { color: var(--t-fg); }
/* The per-day count sits beside the next-fire stat; only the first stat in a
   body takes the auto margin, so a pair reads as one right-aligned cluster. */
.dk-next.dk-count { cursor: default; }
.dk-next.dk-count + .dk-next { margin-left: 0; }
.dk-body--nav .dk-next.dk-count { padding-bottom: 26px; }
.dk-body--nav .dk-next.dk-count + .dk-steppers { margin-left: 0; }

.dk-rail-wrap { flex: 1; display: flex; flex-direction: column; gap: 9px; padding-bottom: 22px; min-width: 0; }
.dk-rail-scale { display: flex; justify-content: space-between; font: 11.5px var(--t-font-mono); color: color-mix(in oklab, var(--t-fg) 40%, transparent); }
.dk-rail {
  position: relative;
  height: 26px;
  border-radius: 7px;
  background: color-mix(in oklab, var(--t-fg) 4%, var(--t-surface));
  border: 1px solid color-mix(in oklab, var(--t-border) 70%, transparent);
}
.dk-rail-fire {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 3px;
  border-radius: 2px;
  background: var(--t-accent);
}
.dk-rail-now { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in oklab, var(--t-fg) 30%, transparent); }
.dk-rail-legend { display: flex; gap: 16px; font: 11.5px var(--t-font-mono); color: color-mix(in oklab, var(--t-fg) 55%, transparent); }
.dk-rail-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dk-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--t-accent); }
.dk-hairline { width: 10px; height: 1px; background: color-mix(in oklab, var(--t-fg) 30%, transparent); }

.dk-nav-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: color-mix(in oklab, var(--t-fg) 55%, transparent);
  padding-bottom: 26px;
}
.dk-steppers { margin-left: auto; display: flex; gap: 8px; padding-bottom: 26px; }
.dk-stepper {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--t-surface);
  border: 1px solid color-mix(in oklab, var(--t-border) 90%, transparent);
  display: grid;
  place-items: center;
  color: color-mix(in oklab, var(--t-fg) 65%, transparent);
  cursor: pointer;
  padding: 0;
}
.dk-stepper:hover { border-color: var(--t-accent); color: var(--t-accent); }

@media (prefers-reduced-motion: reduce) {
  .dk-live-dot { animation: none; }
  .dk-screen-wash.do-push { animation: none; }
  .dk-row.is-new { animation: none; box-shadow: none; }
}
@media (max-width: 760px) {
  .dk-body { flex-wrap: wrap; }
  .dk-actions { margin-left: 0; width: 100%; }
}