/* Control-room carousel: the erdosP-3 use-case console (tabs, live re-solve).
   Shared by /technology/ and the /lab/control-room/ prototype. Everything is
   scoped to .cr-scope so the shared landing.css is unaffected. */
.cr-scope {
  --bg: #0B0A10;
  --panel: #13111B;
  --panel-2: #1A1724;
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.14);
  --text: #EDEBF3;
  --muted: #9A94AE;
  --dim: #6B6580;
  --violet: #8B6CFF;
  --violet-soft: rgba(139,108,255,0.16);
  --ok: #4ADE80;
  --alert: #F5A524;
  --alert-soft: rgba(245,165,36,0.14);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
}

.cr-scope { color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
.cr-scope *, .cr-scope *::before, .cr-scope *::after { box-sizing: border-box; }
.cr-scope .cr-mono { font-family: var(--mono); }

/* ---- console ---- */
.cr-console {
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(139,108,255,0.06);
  overflow: hidden;
}
.cr-console-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px; color: var(--muted);
}
.cr-dots { display: flex; gap: 6px; }
.cr-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.14); }
.cr-status {
  margin-left: auto;
  padding: 3px 9px; border-radius: 999px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--muted); border: 1px solid var(--line-2);
  transition: all .3s;
}
.cr-status.is-alert { color: var(--alert); border-color: rgba(245,165,36,0.4); background: var(--alert-soft); }
.cr-status.is-solving { color: var(--violet); border-color: rgba(139,108,255,0.45); background: var(--violet-soft); }
.cr-status.is-ok { color: var(--ok); border-color: rgba(74,222,128,0.35); background: rgba(74,222,128,0.1); }

.cr-prompt {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px; color: var(--text);
}
.cr-prompt-caret { font-family: var(--mono); color: var(--violet); }
.cr-cursor { width: 7px; height: 17px; background: var(--violet); animation: crBlink 1s steps(1) infinite; }
@keyframes crBlink { 50% { opacity: 0; } }

.cr-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 46px; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.cr-chip {
  padding: 4px 9px; border-radius: 6px;
  font-family: var(--mono); font-size: 11.5px;
  color: #CFC4FF; background: var(--violet-soft); border: 1px solid rgba(139,108,255,0.28);
  animation: crIn .3s ease both;
}
.cr-chip.is-alert { color: var(--alert); background: var(--alert-soft); border-color: rgba(245,165,36,0.35); }
@keyframes crIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.cr-gantt { position: relative; padding: 14px 18px 8px; display: flex; flex-direction: column; gap: 9px; }
.cr-axis { display: flex; justify-content: space-between; margin-left: 64px; font-size: 10.5px; color: var(--dim); }
.cr-now { position: absolute; top: 34px; bottom: 6px; width: 1px; background: repeating-linear-gradient(var(--dim) 0 3px, transparent 3px 6px); }
.cr-row { display: flex; align-items: center; gap: 10px; }
.cr-row b { width: 54px; flex: none; font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--muted); }
.cr-track { position: relative; flex: 1; height: 26px; border-radius: 6px; background: rgba(255,255,255,0.03); }
.cr-bar {
  position: absolute; top: 3px; bottom: 3px;
  display: block; line-height: 20px; padding: 0 8px; text-overflow: ellipsis;
  border-radius: 5px;
  font-family: var(--mono); font-size: 10.5px; white-space: nowrap; overflow: hidden;
  color: #fff; background: #5B47C9;
  transition: left 1.1s cubic-bezier(.25,.8,.25,1), width 1.1s cubic-bezier(.25,.8,.25,1), background .6s, opacity .6s;
}
.cr-bar.is-b { background: #3D3566; }
.cr-bar.is-c { background: #2D2A40; color: var(--muted); }
.cr-bar.is-out {
  background: repeating-linear-gradient(135deg, rgba(245,165,36,0.22) 0 6px, rgba(245,165,36,0.08) 6px 12px);
  color: var(--alert); outline: 1px solid rgba(245,165,36,0.5);
}
.cr-bar.is-moved { background: var(--violet); box-shadow: 0 0 0 1px rgba(255,255,255,0.25), 0 0 18px rgba(139,108,255,0.5); }

.cr-checks { display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 18px 16px; font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.cr-checks span { transition: color .3s; }
.cr-checks.is-ok span { color: var(--ok); }


/* ---- use-case carousel ---- */
.cr-carousel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cr-tabs { display: flex; align-items: center; gap: 8px; }
.cr-tab-list { display: flex; gap: 6px; flex: 1; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.cr-tab-list::-webkit-scrollbar { display: none; }
.cr-tab {
  flex: none; scroll-snap-align: start;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent;
  font: 500 13px/1 var(--sans); color: var(--muted); cursor: pointer;
  transition: all .2s;
}
.cr-tab:hover { color: var(--text); border-color: rgba(255,255,255,0.28); }
.cr-tab.is-active { color: var(--bg); background: var(--text); border-color: var(--text); }
.cr-arrow {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line-2); background: transparent; color: var(--muted); cursor: pointer;
}
.cr-arrow:hover { color: var(--text); border-color: rgba(255,255,255,0.3); }
.cr-progress { display: flex; justify-content: center; gap: 6px; }
.cr-progress i { width: 18px; height: 3px; border-radius: 2px; background: var(--line-2); transition: background .3s, width .3s; }
.cr-progress i.is-active { width: 32px; background: var(--violet); }

/* wider row labels for "Máté · HCA", "Van 10" etc. */
.cr-row b { width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-axis { margin-left: 106px; }

.cr-bar.is-new { animation: crIn .9s ease both; }
.cr-result {
  display: none;
  margin: 0 18px; padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px; line-height: 1.45; color: #F7D9A6;
  background: var(--alert-soft); border: 1px solid rgba(245,165,36,0.3);
}
.cr-result.is-on { display: block; animation: crIn .35s ease both; }

@media (max-width: 520px) {
  .cr-row b { width: 64px; font-size: 10px; white-space: normal; }
  .cr-axis { margin-left: 74px; }
  .cr-arrow { display: none; }
}

/* scenario change: the console slides in from the right */
.cr-console.is-swipe { animation: crSwipe .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes crSwipe { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
.cr-carousel { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .cr-bar, .cr-chip { transition: none; animation: none; }
}