/* Neva LED display blocks. Shapes/variants adapted from the public Tailark
   blocks dusk base (https://github.com/tailark/blocks, MIT, (c) 2025 Irung,
   commit 8139698); palette from the owner's notch reference. Every token can
   be overridden by the shell through --nled-* custom properties. Provenance:
   docs/neva-led-tailark.md. */

.nled-card, .nled-button, .nled-status, .nled-actions, .nled-list-wrap, .nled-empty, .nled-kbd-group {
  --_ink: var(--nled-ink, #f0f1f5);
  --_muted: var(--nled-muted, #a4a6b0);
  --_panel: var(--nled-panel, rgba(17, 21, 27, .57));
  --_glass: var(--nled-control-glass, rgba(15, 21, 27, .48));
  --_line: var(--nled-line, rgba(255, 255, 255, .07));
  --_hover: var(--nled-hover, rgba(255, 255, 255, .05));
  --_ring: var(--nled-ring, rgba(160, 214, 200, .55));
  --_accent: var(--nled-accent, #62d4b2);
  --_info: var(--nled-info, #9db4f2);
  --_warning: var(--nled-warning, #e2b86a);
  --_danger: var(--nled-danger, #f08a8a);
  --_neutral: var(--nled-neutral, #8b919c);
  --_font: var(--nled-font, inherit);
  box-sizing: border-box;
  font-family: var(--_font);
  color: var(--_ink);
}
.nled-card *, .nled-actions *, .nled-list-wrap *, .nled-empty * { box-sizing: border-box; }

.nled-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nled-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 16px; height: 16px; color: currentColor; }
.nled-icon > svg { width: 100%; height: 100%; pointer-events: none; }
.nled-text { margin: 0; font-size: 12px; line-height: 1.45; color: var(--_muted); }

/* Card: Tailark Card -> rounded panel, hairline ring, header/content/footer. */
.nled-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; border-radius: 17px; background: var(--_panel); border: 1px solid var(--_line); box-shadow: inset 0 1px rgba(255, 255, 255, .04); }
.nled-card[data-compact="true"] { gap: 6px; padding: 9px 10px; border-radius: 14px; }
.nled-card-header { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.nled-card-header > .nled-icon { margin-top: 1px; color: var(--_muted); }
.nled-card-heading { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.nled-card-title { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; color: var(--_ink); overflow-wrap: anywhere; }
.nled-card-description { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--_muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nled-card-header > .nled-status { margin-left: auto; flex: none; }
.nled-card-content { min-width: 0; font-size: 12px; line-height: 1.45; color: var(--_ink); }
.nled-card-footer { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.nled-card[data-tone="danger"] { border-color: color-mix(in srgb, var(--_danger) 28%, transparent); }
.nled-card[data-tone="warning"] { border-color: color-mix(in srgb, var(--_warning) 24%, transparent); }

/* Button: Tailark variants (default/outline/secondary/ghost/destructive/link)
   and sizes, retoned for the dark LED glass. */
.nled-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; color: var(--_ink); background: transparent; -webkit-tap-highlight-color: transparent; transition: background-color .2s, color .2s, box-shadow .2s, transform .2s, opacity .2s; }
/* Focus uses outline so no variant's box-shadow can mask it. */
.nled-button:focus-visible { outline: 1.5px solid var(--_ring); outline-offset: 1px; }
.nled-button:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.98); }
.nled-button:disabled, .nled-button[aria-disabled="true"] { cursor: default; opacity: .5; }
.nled-button:disabled { pointer-events: none; }
.nled-button[data-variant="default"] { background: rgba(240, 241, 245, .92); color: #101317; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.nled-button[data-variant="default"]:hover { background: rgba(240, 241, 245, .82); }
.nled-button[data-variant="outline"] { background: var(--_glass); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nled-button[data-variant="outline"]:hover { background: rgba(32, 40, 46, .58); }
.nled-button[data-variant="secondary"] { background: rgba(255, 255, 255, .08); }
.nled-button[data-variant="secondary"]:hover { background: rgba(255, 255, 255, .12); }
.nled-button[data-variant="ghost"] { color: var(--_muted); }
.nled-button[data-variant="ghost"]:hover { background: var(--_hover); color: var(--_ink); }
.nled-button[data-variant="destructive"] { background: color-mix(in srgb, var(--_danger) 22%, transparent); color: #ffd9d9; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_danger) 32%, transparent); }
.nled-button[data-variant="destructive"]:hover { background: color-mix(in srgb, var(--_danger) 30%, transparent); }
.nled-button[data-variant="link"] { height: auto; padding: 0; border-radius: 4px; color: var(--_accent); }
.nled-button[data-variant="link"]:hover { text-decoration: underline; text-underline-offset: 3px; }
.nled-button[aria-pressed="true"] { background: rgba(32, 40, 46, .58); color: #fff; box-shadow: inset 0 1px rgba(255, 255, 255, .04), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.nled-button[data-size="xs"] { height: 24px; padding: 0 8px; font-size: 11px; gap: 4px; }
.nled-button[data-size="xs"] .nled-icon { width: 12px; height: 12px; }
.nled-button[data-size="sm"] { height: 28px; padding: 0 11px; font-size: 11.5px; }
.nled-button[data-size="sm"] .nled-icon { width: 14px; height: 14px; }
.nled-button[data-size="lg"] { height: 38px; padding: 0 18px; font-size: 13px; }
.nled-button[data-size="default"][data-icon="inline-start"] { padding-left: 9px; }
.nled-button[data-size="default"][data-icon="inline-end"] { padding-right: 9px; }
.nled-button[data-size="icon"] { width: 34px; height: 32px; padding: 0; border-radius: 17px; }
.nled-button[data-size="icon-xs"] { width: 24px; height: 24px; padding: 0; }
.nled-button[data-size="icon-xs"] .nled-icon { width: 12px; height: 12px; }
.nled-button[data-size="icon-sm"] { width: 28px; height: 28px; padding: 0; }
.nled-button[data-size="icon-lg"] { width: 40px; height: 40px; padding: 0; }
.nled-button[aria-busy="true"] .nled-button-label { opacity: .7; }
.nled-button .nled-kbd-group { margin-left: 2px; }

/* Kbd: Tailark Kbd. */
.nled-kbd-group { display: inline-flex; align-items: center; gap: 3px; margin: 0; padding: 0; font: inherit; background: none; border: 0; }
.nled-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; font-family: inherit; font-size: 10px; font-weight: 500; line-height: 1; color: var(--_muted); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); pointer-events: none; user-select: none; }

/* Status: dot + label (+ optional detail). Tones stay restrained. */
.nled-status { --_tone: var(--_neutral); display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; font-size: 11px; line-height: 1.2; color: var(--_muted); }
.nled-status[data-tone="accent"] { --_tone: var(--_accent); }
.nled-status[data-tone="info"] { --_tone: var(--_info); }
.nled-status[data-tone="warning"] { --_tone: var(--_warning); }
.nled-status[data-tone="danger"] { --_tone: var(--_danger); }
.nled-status-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--_tone); box-shadow: 0 0 6px color-mix(in srgb, var(--_tone) 30%, transparent); }
.nled-status[data-state="muted"] .nled-status-dot, .nled-status[data-state="unavailable"] .nled-status-dot { background: transparent; box-shadow: inset 0 0 0 1.25px var(--_tone); }
.nled-status[data-active="true"] .nled-status-dot { animation: nled-pulse 1.6s ease-in-out infinite; }
.nled-status-label { color: var(--_ink); font-weight: 500; white-space: nowrap; }
.nled-status[data-tone="danger"] .nled-status-label { color: color-mix(in srgb, var(--_danger) 70%, var(--_ink)); }
.nled-status-detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Actions toolbar. */
.nled-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.nled-actions[data-orientation="vertical"] { flex-direction: column; align-items: stretch; }
.nled-actions[data-orientation="vertical"] .nled-button { justify-content: flex-start; }

/* List: Tailark integrations tile/row (hover wash, hairline, line clamp). */
.nled-list-wrap { display: flex; flex-direction: column; min-width: 0; }
.nled-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.nled-list-item { display: flex; align-items: center; gap: 4px; min-width: 0; border-radius: 12px; border: 1px solid transparent; transition: background-color .2s, border-color .2s; }
.nled-list-item:hover { background: var(--_hover); border-color: var(--_line); }
.nled-list-item[aria-disabled="true"] { opacity: .55; }
.nled-list-main { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; padding: 8px 10px; margin: 0; border: 0; border-radius: 12px; background: none; font: inherit; color: inherit; text-align: left; }
button.nled-list-main { cursor: pointer; }
button.nled-list-main:focus-visible { outline: 1.5px solid var(--_ring); outline-offset: -1px; }
.nled-list-main[aria-current="true"] { background: rgba(255, 255, 255, .06); }
.nled-list-main > .nled-icon { color: var(--_muted); }
.nled-list-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.nled-list-title { font-size: 12px; font-weight: 500; line-height: 1.25; color: var(--_ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nled-list-description { font-size: 11px; line-height: 1.35; color: var(--_muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.nled-list-meta { flex: none; font-size: 10.5px; color: var(--_muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nled-list-main > .nled-status { flex: none; }
.nled-list-item > .nled-actions { flex: none; padding-right: 6px; flex-wrap: nowrap; gap: 2px; }

/* Empty / loading / error / unavailable. */
.nled-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 18px 14px; text-align: center; border-radius: 14px; border: 1px dashed rgba(255, 255, 255, .08); }
.nled-empty > .nled-icon { width: 20px; height: 20px; color: var(--_muted); }
.nled-empty-title { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--_ink); }
.nled-empty-description { margin: 0; max-width: 34ch; font-size: 11.5px; line-height: 1.45; color: var(--_muted); }
.nled-empty .nled-actions { justify-content: center; margin-top: 4px; }
.nled-empty[data-kind="error"] { border-style: solid; border-color: color-mix(in srgb, var(--_danger) 26%, transparent); }
.nled-empty[data-kind="error"] .nled-empty-title { color: color-mix(in srgb, var(--_danger) 70%, var(--_ink)); }
.nled-spinner { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .12); border-top-color: var(--_muted); animation: nled-spin .9s linear infinite; }

@keyframes nled-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes nled-spin { to { transform: rotate(360deg); } }

/* Reduced motion: system preference, the notch's calm preference (.is-calm)
   or an explicit data-reduced-motion host. Static but still legible. */
@media (prefers-reduced-motion: reduce) {
  .nled-status-dot, .nled-spinner { animation: none !important; }
  .nled-button, .nled-list-item { transition: none !important; }
  .nled-button:active:not(:disabled) { transform: none; }
}
.is-calm .nled-status-dot, .is-calm .nled-spinner, [data-reduced-motion="true"] .nled-status-dot, [data-reduced-motion="true"] .nled-spinner { animation: none !important; }
.is-calm .nled-button, .is-calm .nled-list-item, [data-reduced-motion="true"] .nled-button, [data-reduced-motion="true"] .nled-list-item { transition: none !important; }
.is-calm .nled-button:active, [data-reduced-motion="true"] .nled-button:active { transform: none; }

/* Forced colors: keep boundaries and focus visible. */
@media (forced-colors: active) {
  .nled-card, .nled-empty, .nled-button[data-variant="outline"] { border: 1px solid CanvasText; }
  .nled-button:focus-visible, button.nled-list-main:focus-visible { outline: 2px solid Highlight; }
  .nled-status-dot { forced-color-adjust: none; }
}