/* Cascade Router Demo styles */

.cr-wrap {
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', Consolas, monospace;
  font-size: 0.82rem;
  color: #e8f4ff;
}

/* Input panel */
.cr-input-panel {
  background: #0a1628;
  border: 1px solid #1e3a5f;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}

.cr-input-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #5ba3e8;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.cr-textarea {
  width: 100%;
  min-height: 72px;
  background: #0f1923;
  border: 1px solid #2a4a6e;
  border-radius: 4px;
  color: #e8f4ff;
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.6rem 0.75rem;
  resize: vertical;
  box-sizing: border-box;
  line-height: 1.5;
  transition: border-color 0.15s;
}
.cr-textarea:focus {
  outline: none;
  border-color: #5ba3e8;
}
.cr-textarea::placeholder { color: #4a6280; }

.cr-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.cr-ex-btn {
  font-family: inherit;
  font-size: 0.72rem;
  background: #0f1923;
  border: 1px solid #2a4a6e;
  color: #8ab4d8;
  border-radius: 3px;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.cr-ex-btn:hover { border-color: #5ba3e8; color: #e8f4ff; }

.cr-run-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
}
.cr-run-btn {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  background: #0078d4;
  border: none;
  color: #fff;
  border-radius: 4px;
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  transition: background 0.15s;
}
.cr-run-btn:hover { background: #005fa3; }

/* Gate panel */
.cr-gate-panel {
  background: #0a1628;
  border: 1px solid #1e3a5f;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
}

.cr-panel-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.cr-panel-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #5ba3e8;
  font-weight: 700;
}
.cr-gate-badge {
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 3px;
  padding: 0.15rem 0.45rem;
}
.cr-gate-badge.pass { background: #0d3321; color: #4ade80; border: 1px solid #166534; }
.cr-gate-badge.fail { background: #3b0a0a; color: #f87171; border: 1px solid #7f1d1d; }

.cr-gates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.35rem;
}
.cr-gate {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  border-radius: 3px;
  background: #0f1923;
}
.cr-gate.pass { border-left: 2px solid #166534; }
.cr-gate.fail { border-left: 2px solid #7f1d1d; background: #1a0808; }
.cr-gate-icon { font-size: 0.75rem; line-height: 1.4; flex-shrink: 0; }
.cr-gate-icon.pass { color: #4ade80; }
.cr-gate-icon.fail { color: #f87171; }
.cr-gate-id { font-weight: 700; color: #8ab4d8; font-size: 0.78rem; flex-shrink: 0; }
.cr-gate-name { color: #c8d8e8; }
.cr-gate-detail { color: #5a7898; font-size: 0.72rem; margin-top: 0.1rem; }

/* Result panel */
.cr-result-panel {
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  border: 1px solid;
}
.cr-result-panel.layer-l1 { background: #0d2b1a; border-color: #166534; }
.cr-result-panel.layer-l5 { background: #0d1f2b; border-color: #1e4d7a; }
.cr-result-panel.layer-l6 { background: #1e1400; border-color: #713f12; }
.cr-result-panel.layer-blocked { background: #1a0808; border-color: #7f1d1d; }

.cr-result-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.cr-result-layer {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.layer-l1 .cr-result-layer { color: #4ade80; }
.layer-l5 .cr-result-layer { color: #60a5fa; }
.layer-l6 .cr-result-layer { color: #fbbf24; }
.layer-blocked .cr-result-layer { color: #f87171; }

.cr-result-name {
  font-size: 0.85rem;
  color: #8ab4d8;
  font-weight: 500;
}

.cr-result-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.cr-stat {
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
}
.cr-stat-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: #5a7898; }
.cr-stat-val { font-size: 0.9rem; font-weight: 700; color: #e8f4ff; margin-top: 0.1rem; }

.cr-result-reason {
  font-size: 0.78rem;
  color: #8ab4d8;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 0.6rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.cr-receipt {
  font-size: 0.7rem;
  color: #3a5878;
  word-break: break-all;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 0.5rem;
  line-height: 1.4;
}
.cr-receipt-label { color: #5a7898; }

/* Empty state */
.cr-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: #3a5878;
  font-size: 0.82rem;
  border: 1px dashed #1e3a5f;
  border-radius: 8px;
}
.cr-empty-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }