/* NSSI demo dock. #nssi-demos-open inherits the shared header button styles. */
#nssi-demos {
  position: fixed;
  left: 34px;
  top: 118px;
  right: auto;
  bottom: auto;
  margin: 0;
  width: min(880px, calc(100vw - 420px));
  height: calc(100vh - 230px);
  max-width: none;
  max-height: none;
  padding: 0;
  transform: none;
  z-index: 35;
  border: 1px solid var(--line, rgba(137,217,239,.18));
  border-radius: 0;
  box-shadow: none;
  background: var(--hp-reading, #091925);
  color: var(--hud-ink, #d6e3e9);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .04em;
  color-scheme: dark;
  overflow: hidden;
  overflow-wrap: anywhere;
}

#nssi-demos[open] { display: flex; flex-direction: column; }
#nssi-demos, #nssi-demos * { box-sizing: border-box; }
#nssi-demos * { border-radius: 0; box-shadow: none; }
#nssi-demos[hidden], #nssi-demos [hidden] { display: none !important; }

#nssi-demos button, #nssi-demos a.nd-newtab {
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--line);
  background: var(--hp-reading, #0f1f2b);
  color: var(--cyan, var(--hud-cyan, #8ce4fa));
  font: inherit;
  letter-spacing: .04em;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
#nssi-demos a.nd-newtab { display: block; text-align: center; text-decoration: none; }
#nssi-demos button:hover:not(:disabled), #nssi-demos a.nd-newtab:hover {
  background: var(--hp-reading, #193342);
  border-color: var(--cyan, var(--hud-cyan, #8ce4fa));
}
#nssi-demos button.primary {
  background: var(--hud-cyan, #69d9ff);
  color: var(--hp-reading, #04131c);
  font-weight: 600;
}
#nssi-demos button.primary:hover:not(:disabled) { background: var(--hud-cyan, #91e4ff); }
#nssi-demos button:disabled { opacity: .45; cursor: default; }
#nssi-demos :focus-visible { outline: 2px solid var(--cyan, var(--hud-cyan, #8ce4fa)); outline-offset: 2px; }

#nssi-demos .picker-top {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: 11px/1.7 var(--hp-font, monospace);
  letter-spacing: .04em;
}
#nssi-demos .picker-top > span { min-width: 0; }
#nssi-demos .picker-top button {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
}
#nssi-demos .nd-status { margin-left: auto; font-size: 11px; }
#nssi-demos .nd-head { flex: none; padding: 12px 16px; }
#nssi-demos .nd-head h3 { margin: 0; font-size: 14px; font-weight: 500; }
#nssi-demos .nd-lead, #nssi-demos .nd-foot { color: var(--muted); font-size: 11px; }
#nssi-demos .nd-lead { margin: 6px 0 0; }
#nssi-demos .nd-foot { flex: none; margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); }

#nssi-demos .nd-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0 16px 16px;
  list-style: none;
  overflow: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--hp-muted, #365361) var(--hp-reading, #091925);
  overscroll-behavior: contain;
}
#nssi-demos .nd-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  flex: none;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--hp-reading, #0f1f2b);
}
#nssi-demos .nd-card.running { border-left: 3px solid var(--cyan, var(--hud-cyan, #8ce4fa)); }
#nssi-demos .nd-card.starting { border-left: 3px dotted var(--cyan, var(--hud-cyan, #8ce4fa)); }
#nssi-demos .nd-card.missing { border-left: 3px solid var(--amber, var(--hud-amber, #e8b981)); opacity: .7; }
#nssi-demos .nd-card.busy { opacity: .6; cursor: progress; }
#nssi-demos .nd-card.busy button, #nssi-demos .nd-card.busy a { cursor: progress; }
#nssi-demos .nd-main { min-width: 0; }
#nssi-demos .nd-name { display: block; font-size: 13px; font-weight: 600; }
#nssi-demos .nd-id { display: block; color: var(--muted); font-family: var(--hp-font, monospace); font-size: 10px; }
#nssi-demos .nd-summary { margin: 8px 0 0; font-size: 12px; }
#nssi-demos .nd-ai { margin: 6px 0 0; font-size: 11px; }
#nssi-demos .nd-state { margin: 6px 0 0; color: var(--hud-cyan, #9ddded); font-size: 11px; }
#nssi-demos .nd-actions { display: flex; flex-direction: column; align-self: start; gap: 6px; min-width: 0; width: 150px; }

@media (max-width: 1100px) {
  #nssi-demos { width: calc(100vw - 300px); }
}
@media (max-width: 760px) {
  #nssi-demos { left: 14px; width: calc(100vw - 28px); height: calc(100vh - 200px); }
  #nssi-demos .picker-top { gap: 6px; padding: 8px 12px; }
  #nssi-demos .nd-head, #nssi-demos .nd-foot { padding: 12px; }
  #nssi-demos .nd-list { padding: 0 12px 12px; }
  #nssi-demos .nd-card { grid-template-columns: minmax(0, 1fr); }
  #nssi-demos .nd-actions { width: 100%; }
}

html[data-hud="v27"] #nssi-demos {
  & :is(.nd-head,.nd-list,.nd-foot) { background:var(--hp-reading); padding:8px; }
  & .nd-list { overflow:visible; }
  & .nd-card { background:transparent; border:0; border-top:1px solid var(--hp-hairline); padding:16px 0; grid-template-columns:minmax(0,1fr); gap:8px; }
  & .nd-newtab { border:0; border-inline:1px solid var(--hp-edge); }
}