/* The Loadout's Daemons tab (daemons-view.mjs): the party. A card with your class at the top, then the party (you
   and your daemons, a bar of 12 cycles each), the bench and the roster, and beside it a sticky panel for the daemon
   you pick: in the one sheet on a phone. Teal is you, violet your daemons, red the virus; structure stays amber.
   The sprites (daemon-sprites.mjs) blink; reduced motion and Motion off stop it. Nothing here moves the layout. */

.dm-page { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s6); align-items: start; }
.dm-page.no-panel { grid-template-columns: minmax(0, 1fr); }
.dm-card { padding: 0; gap: 0; min-width: 0; }

/* ---------- the sprites: two frames stacked, the second one blinks ---------- */
.spr { display: inline-grid; flex: none; line-height: 1; color: var(--daemon); }
.spr pre { grid-area: 1 / 1; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; text-shadow: 0 0 6px rgba(195, 166, 255, 0.35); font: 600 var(--spr, 6.5px) / 1.02 var(--mono); letter-spacing: 0; white-space: pre; }
.spr-a { animation: dm-open 7s steps(1, end) infinite; animation-delay: var(--blink-at, 0s); }
.spr-b { opacity: 0; animation: dm-shut 7s steps(1, end) infinite; animation-delay: var(--blink-at, 0s); }
@keyframes dm-open { 0% { opacity: 1; } 95% { opacity: 0; } 97% { opacity: 1; } }
@keyframes dm-shut { 0% { opacity: 0; } 95% { opacity: 1; } 97% { opacity: 0; } }
.spr.ghost { color: var(--gray); opacity: 0.4; }
.spr.ghost pre { font-weight: 400; text-shadow: none; }
.no-motion .spr-a, .no-motion .spr-b { animation: none; }
.no-motion .spr-b { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .spr-a, .spr-b { animation: none; } .spr-b { opacity: 0; } }

/* ---------- the head: your class, the party and the roster ---------- */
.dm-head { display: flex; align-items: center; padding: var(--s4) 18px; border-bottom: 1px solid var(--line); }
.dm-views { display: flex; gap: var(--s6); }
.dm-views button { padding: 2px 0; border: 0; font: 500 13px var(--sans); color: var(--muted); }
.dm-views button[aria-pressed='true'] { color: var(--bright); }
.dm-views button[aria-pressed='true']::before { content: '▸ '; color: var(--amber); }
.dm-views small { margin-left: var(--s3); font: 500 11px var(--mono); color: var(--dim); }

/* ---------- sections ---------- */
.dm-sec { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--s5); padding: var(--s6) 18px; }
.dm-sec + .dm-sec { border-top: 1px solid var(--line); }
.dm-h { padding-top: 4px; font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--dim); }
.dm-h small { display: block; margin-top: var(--s2); font: 500 11px var(--mono); letter-spacing: 0; text-transform: none; color: var(--dim); }
.dm-body { min-width: 0; }
.dm-none { font: 12px var(--mono); color: var(--dim); }

/* who: a sprite in its own column, the name over its meta */
.dm-who { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s4); align-items: center; min-width: 0; min-height: 46px; padding: 2px var(--s4) 2px 2px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--inset); color: var(--text); text-align: left; }
.dm-face { display: grid; place-items: center; height: 40px; overflow: hidden; border-right: 1px solid var(--line); }
.dm-nm { min-width: 0; }
.dm-nm b, .dm-nm small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-nm b { font: 500 14px var(--sans); color: var(--text); }
.dm-nm small { font: 500 11px var(--mono); color: var(--dim); }
button.dm-who:hover:not(:disabled) { border-color: var(--line-strong); }
.dm-who[aria-pressed='true'], .dm-who[data-shown] { border-color: var(--amber); background: var(--amber-wash); box-shadow: inset 0 0 0 1px var(--amber); }
.dm-who.you { border-color: rgba(127, 209, 199, 0.45); }
.dm-who.you .dm-face { color: var(--you); font: 600 11px var(--mono); letter-spacing: 1px; }
.dm-who.you b { color: var(--you); }
.dm-who.empty, .dm-who.locked { display: flex; min-height: 34px; padding: 0 var(--s5); border-style: dashed; background: none; font: 500 12px var(--mono); color: var(--gray); }
.dm-who.locked { cursor: help; }

/* ---------- the party's bar: a cell a cycle ---------- */
.dm-turns { display: grid; grid-template-columns: minmax(150px, 220px) repeat(12, minmax(0, 1fr)); gap: var(--s2) 3px; align-items: stretch; }
.dm-corner { align-self: center; font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--dim); }
.dm-ch { display: grid; place-items: center; height: 22px; padding: 0; border: 0; border-radius: var(--r-tag); font: 600 11px var(--mono); color: var(--dim); }
.dm-ch:hover:not(:disabled) { color: var(--text); }
.dm-ch[aria-pressed='true'] { color: var(--bright); background: var(--amber-wash); box-shadow: inset 0 -2px 0 var(--amber); }
.dm-cell { display: grid; place-items: center; min-width: 0; border-radius: var(--r-tag); background: rgba(241, 185, 47, 0.03); cursor: pointer; }
.dm-cell.sel { background: var(--amber-wash); }
.dm-cell i { width: 70%; max-width: 26px; height: 14px; border-radius: 2px; }
.dm-cell.me i { height: 6px; background: rgba(127, 209, 199, 0.55); }
.dm-cell.on i { background: var(--daemon); box-shadow: 0 0 6px rgba(195, 166, 255, 0.55); }
.dm-cell.on.exfil i { background: none; border: 1px solid var(--daemon); box-shadow: none; }
.dm-lane { grid-column: 2 / -1; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 22px; padding: 0 var(--s4); border: 1px dashed rgba(195, 166, 255, 0.4); border-radius: var(--r-tag); font: 500 11px var(--mono); color: var(--daemon); overflow: hidden; }
.dm-lt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-lane.once { border-style: dotted; }
.dm-lane.none { border-color: var(--line); }

/* the order of play in the picked cycle */
.dm-order { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s5); padding-top: var(--s5); border-top: 1px dashed var(--line); }
.dm-k { font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--dim); }
.dm-steps, .dm-armed { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); min-width: 0; max-width: 100%; }
.dm-st { display: inline-flex; align-items: center; max-width: 100%; height: var(--h-chip); padding: 0 var(--s4); border: 1px solid var(--line); border-radius: var(--r-tag); font: 500 12px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-st.you { color: var(--you); border-color: rgba(127, 209, 199, 0.55); }
.dm-st.dm { color: var(--daemon); border-color: rgba(195, 166, 255, 0.55); }
.dm-st.them { color: var(--hot); border-color: rgba(255, 91, 61, 0.5); }
.dm-st.armed { color: var(--daemon); border: 1px dashed rgba(195, 166, 255, 0.4); }
.dm-gt { font: 12px var(--mono); color: var(--dim); }

/* ---------- the bench ---------- */
.dm-bench { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 5px; }
.dm-bench .dm-who { min-height: 42px; }
.dm-bench .dm-face { height: 36px; }

/* ---------- the roster: all forty ---------- */
.dm-prog { max-width: 320px; height: 4px; margin: 6px 0 var(--s4); border-radius: 2px; background: var(--line); overflow: hidden; }
.dm-prog i { display: block; height: 100%; background: var(--daemon); }
.dm-group + .dm-group { margin-top: var(--s5); }
.dm-group h4 { padding: var(--s4) var(--s4) var(--s3); font: 600 12px var(--mono); color: var(--text); letter-spacing: 0.5px; }
.dm-group h4 small { margin-left: var(--s5); font: 500 11px var(--mono); color: var(--dim); }
.dm-rows { display: grid; }
.dm-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, auto) 52px; gap: var(--s4); align-items: center; width: 100%; min-height: 36px; padding: 0 var(--s4) 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; color: var(--muted); text-align: left; }
.dm-row:hover:not(:disabled) { border-color: var(--line); background: rgba(241, 185, 47, 0.04); }
.dm-row .dm-face { height: 32px; border-right: 0; }
.dm-rn { min-width: 0; font: 500 14px var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-in { margin-left: var(--s4); font: 600 10px var(--mono); color: var(--you); }
.dm-rw { min-width: 0; font: 500 12px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-rl { font: 500 12px var(--mono); text-align: right; }
.dm-row.unk .dm-rn { font-family: var(--mono); letter-spacing: 2px; color: var(--gray); }
.dm-row[aria-pressed='true'], .dm-row[data-shown] { background: var(--amber-wash); box-shadow: inset 2px 0 0 var(--amber); }

/* ---------- the panel ---------- */
.dm-panel { position: sticky; top: var(--s5); display: grid; gap: var(--s6); min-width: 0; padding: 18px 20px 20px; background: var(--panel); border: 1px solid var(--line-strong); border-top: 2px solid var(--amber); border-radius: var(--r-card); }
.dm-close { display: none; }
.dm-ph { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s6); align-items: center; }
.dm-frame { display: grid; place-items: center; width: 96px; height: 80px; border: 1px solid rgba(195, 166, 255, 0.45); border-radius: var(--r-card); background: var(--inset); }
.dm-frame.unk { border: 1px dashed var(--line); }
.dm-name { font-size: 22px; line-height: 1.2; color: var(--bright); letter-spacing: 0.5px; overflow-wrap: anywhere; }
.dm-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-top: var(--s2); font: 600 13px var(--mono); color: var(--text); }
.dm-does { font: 15px/1.55 var(--sans); color: var(--text); }
.dm-does .hi { color: var(--bright); font-weight: 600; }
.dm-facts { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--s5) var(--s5); margin: 0; font-size: 13px; color: var(--text); }
.dm-facts dt { padding-top: 2px; font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--dim); }
.dm-facts dd { display: grid; gap: var(--s3); margin: 0; min-width: 0; }
.dm-facts [title] { cursor: help; }
.dm-mini { display: grid; grid-template-columns: 26px repeat(12, minmax(0, 1fr)); gap: 2px; align-items: center; font: 500 10px var(--mono); color: var(--dim); }
.dm-mini i { height: 8px; border-radius: 1px; background: var(--line); }
.dm-mini i.me { height: 4px; background: rgba(127, 209, 199, 0.45); }
.dm-mini i.on { background: var(--daemon); }
.dm-mini .dm-lane { min-height: 12px; padding: 0 var(--s3); font-size: 10px; }
.dm-meter { display: block; max-width: 200px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.dm-meter i { display: block; height: 100%; background: var(--daemon); }
.dm-acts.swap { display: grid; gap: var(--s2); }
.dm-acts.swap .btn { justify-content: flex-start; gap: var(--s4); padding-left: 4px; }
.dm-acts.swap .dm-face { height: 22px; width: 30px; border-right: 0; }

@media (max-width: 1180px) {
  .dm-page { grid-template-columns: minmax(0, 1fr) 320px; }
  .dm-sec { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .dm-h small { display: inline; margin-left: var(--s4); }
}
/* One column: the panel sits under the page while a daemon is picked, shut by its × or Escape. On a phone it is in
   the one sheet (phone.css, app.js phPops). */
@media (max-width: 900px) {
  .dm-page { grid-template-columns: minmax(0, 1fr); }
  .dm-head { padding: var(--s3) 14px; }
  .dm-sec { padding: 14px; }
  .dm-turns { grid-template-columns: minmax(0, 1fr) repeat(12, 13px); gap: var(--s2) 2px; }
  .dm-who { grid-template-columns: 40px minmax(0, 1fr); gap: var(--s3); padding-right: var(--s2); }
  .dm-face { height: 36px; }
  .dm-nm b { font-size: 13px; }
  .dm-ch { font-size: 10px; }
  .dm-cell i { width: 80%; height: 12px; }
  .dm-cell.me i { height: 5px; }
  .dm-bench { grid-template-columns: minmax(0, 1fr); }
  .dm-row { grid-template-columns: 40px minmax(0, 1fr) 46px; }
  .dm-rw { display: none; }
  .dm-who[data-shown] { border-color: var(--line); background: var(--inset); box-shadow: none; }
  .dm-row[data-shown] { background: none; box-shadow: none; }
  .dm-turns > .dm-lane .dm-lt { white-space: normal; text-align: center; font-size: 10px; line-height: 1.25; }
  .dm-st { height: auto; min-height: var(--h-chip); padding: 2px var(--s4); white-space: normal; }
  .dm-panel { display: none; position: static; padding: 14px 16px 18px; }
  .dm-panel.open { display: grid; }
  .dm-close { display: block; position: absolute; top: 6px; right: 8px; width: 36px; height: 36px; padding: 0; font-size: 20px; line-height: 1; color: var(--muted); }
  .dm-ph { grid-template-columns: 80px minmax(0, 1fr); padding-right: 36px; }
  .dm-frame { width: 80px; height: 68px; }
  .dm-facts { grid-template-columns: 80px minmax(0, 1fr); }
  .dm-acts .btn { min-height: 44px; }
}