/* VarGraph Explorer — minimal but rich UI */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
              background: #0F172A; color: #E2E8F0; overflow: hidden; }
code { font-family: 'SF Mono', Menlo, monospace; background: #1E293B; padding: 1px 4px;
        border-radius: 3px; color: #94A3B8; font-size: 90%; }

header { background: #1E293B; border-bottom: 1px solid #334155; padding: 8px 16px;
          display: flex; justify-content: space-between; align-items: center; height: 52px; }
.brand { display: flex; align-items: center; gap: 12px; }
.logo { font-size: 22px; color: #4ADE80; }
.title { font-size: 16px; font-weight: 600; }
.version { font-size: 10px; padding: 2px 6px; border-radius: 3px;
           background: #4ADE80; color: #0F172A; font-weight: 600; }
.header-controls { display: flex; gap: 8px; align-items: center; }
.header-controls select, .header-controls input, .header-controls button {
  background: #0F172A; color: #E2E8F0; border: 1px solid #475569;
  padding: 6px 10px; border-radius: 4px; font-size: 13px; }
.header-controls button { cursor: pointer; min-width: 32px; padding: 6px 8px; }
.header-controls button:hover { background: #334155; }

main { display: grid; grid-template-columns: 280px 1fr 360px; height: calc(100% - 52px); }

aside#sidebar { background: #1E293B; border-right: 1px solid #334155;
                overflow-y: auto; padding: 12px; }
aside#sidebar .panel { margin-bottom: 16px; padding-bottom: 12px;
                       border-bottom: 1px solid #334155; }
aside#sidebar h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
                   color: #94A3B8; margin-bottom: 8px; }
aside#sidebar input, aside#sidebar select, aside#sidebar textarea {
  width: 100%; background: #0F172A; color: #E2E8F0; border: 1px solid #334155;
  padding: 6px 8px; border-radius: 4px; font-size: 12px; margin-bottom: 6px;
  font-family: 'SF Mono', Menlo, monospace; }
textarea#query-input { resize: vertical; font-size: 11px; }

button { cursor: pointer; padding: 8px 12px; border-radius: 4px; font-size: 12px;
         border: none; font-weight: 500; transition: background 0.15s; }
.btn-primary { background: #4ADE80; color: #0F172A; }
.btn-primary:hover { background: #22C55E; }
.btn-secondary { background: #334155; color: #E2E8F0; margin-right: 4px; margin-bottom: 4px; }
.btn-secondary:hover { background: #475569; }

.stats { font-size: 12px; line-height: 1.6; color: #CBD5E1; }
.stats b { color: #4ADE80; }

.label-filters .label-row { display: flex; align-items: center; gap: 6px;
                             padding: 4px 0; cursor: pointer; user-select: none; }
.label-filters .swatch { width: 12px; height: 12px; border-radius: 50%; }
.label-filters .label-name { flex: 1; font-size: 12px; }
.label-filters .label-count { font-size: 11px; color: #94A3B8;
                               background: #0F172A; padding: 2px 6px; border-radius: 8px; }
.label-filters .label-row.disabled .label-name { color: #64748B; }

section#viz { background: #0F172A; position: relative; }
#cy { width: 100%; height: 100%; }

/* Time-axis overlay (Chrono Family Tree layout) */
.time-axis { position: absolute; left: 0; top: 0; width: 60px; height: 100%;
              pointer-events: none; z-index: 5;
              background: linear-gradient(to right, rgba(15,23,42,0.95) 60%, transparent 100%);
              border-right: 1px solid #334155; }
.time-axis.hidden { display: none; }
.time-axis .tick { position: absolute; left: 0; width: 100%; height: 1px;
                    background: #334155; }
.time-axis .tick-label { position: absolute; left: 6px; top: -8px;
                          color: #94A3B8; font-size: 10px; font-family: 'SF Mono', Menlo, monospace;
                          background: #0F172A; padding: 1px 4px; border-radius: 2px;
                          white-space: nowrap; }
.time-axis .era-band { position: absolute; left: 60px; width: 1px; background: #1E293B;
                        opacity: 0.4; pointer-events: none; }
.empty-state { position: absolute; inset: 0; display: flex; flex-direction: column;
                align-items: center; justify-content: center; gap: 8px; text-align: center; }
.empty-state p { color: #CBD5E1; font-size: 14px; }
.empty-state .muted { color: #64748B; font-size: 12px; }

aside#detail-panel { background: #1E293B; border-left: 1px solid #334155;
                     overflow-y: auto; }
aside#detail-panel.hidden { display: none; }
.detail-header { display: flex; justify-content: space-between; align-items: center;
                 padding: 12px 16px; border-bottom: 1px solid #334155; }
.detail-header h3 { font-size: 14px; }
.detail-header button { background: transparent; color: #94A3B8; font-size: 20px; padding: 0 4px; }
#detail-body { padding: 12px 16px; font-size: 12px; line-height: 1.6; }
.detail-prop { padding: 6px 0; border-bottom: 1px dashed #334155; }
.detail-prop:last-child { border-bottom: none; }
.detail-prop .key { color: #94A3B8; font-size: 11px; text-transform: uppercase;
                     letter-spacing: 0.04em; }
.detail-prop .value { color: #E2E8F0; word-break: break-word; margin-top: 2px; }
.detail-prop .meta { font-size: 10px; color: #64748B; margin-top: 2px;
                      font-family: 'SF Mono', Menlo, monospace; }
.detail-prop .meta .badge { background: #0F172A; padding: 1px 6px; border-radius: 8px;
                             margin-right: 4px; }
.detail-actions { padding: 12px 16px; border-top: 1px solid #334155; }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.85);
          display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-card { background: #1E293B; border: 1px solid #475569; border-radius: 8px;
              padding: 24px; min-width: 400px; max-width: 600px; }
.modal-card h2 { font-size: 18px; margin-bottom: 8px; }
.modal-card p { color: #CBD5E1; font-size: 13px; margin-bottom: 12px; }
.modal-card input[type="password"], .modal-card input[type="text"] {
  width: 100%; background: #0F172A; color: #E2E8F0; border: 1px solid #334155;
  padding: 8px 12px; border-radius: 4px; font-size: 13px; margin-bottom: 12px;
  font-family: 'SF Mono', Menlo, monospace; }
.modal-card .muted { color: #64748B; }
.modal-card .small { font-size: 11px; }
.modal-header { display: flex; justify-content: space-between; align-items: center;
                margin-bottom: 16px; }

.audit-card { max-width: 720px; }
.audit-card .audit-row { padding: 10px; background: #0F172A; border-radius: 4px;
                          margin-bottom: 8px; font-size: 12px; }
.audit-card .audit-row .hash { font-family: 'SF Mono', Menlo, monospace; color: #94A3B8;
                                 font-size: 10px; word-break: break-all; }
.audit-card .audit-row.verified { border-left: 3px solid #4ADE80; }
.audit-card .audit-row.failed { border-left: 3px solid #DC2626; }

.muted { color: #64748B; }
.small { font-size: 11px; }