/* erdosP-3 / Technology page: the control-room layout dressed in the site's own design.
   Hero = the homepage hero pattern (purple #271645, dot grid, Montserrat title, white pill
   CTA, quiet underlined link); the console stays a dark "product screen" in the site's
   purple family; the screenshots use the light dm-light section pattern.
   Scoped to .cr-page; the console/carousel itself is control-room-carousel.css. */

/* Re-tint the console tokens (defined on .cr-scope) to the site palette.
   Mono stays for data labels; everything else uses the site fonts. */
.cr-page.cr-scope {
  --bg: #271645;
  --panel: #1C1131;
  --panel-2: #2A1C48;
  --line: rgba(255,255,255,0.09);
  --line-2: rgba(255,255,255,0.16);
  --text: #FFFFFF;
  --muted: rgba(255,255,255,0.68);
  --dim: rgba(255,255,255,0.45);
  --violet: #A158FF;
  --violet-soft: rgba(161,88,255,0.18);
  --sans: var(--default-font);
  font-family: var(--default-font);
  color: inherit;
}

.cr-page section { color: inherit; }

/* ---- hero: same band as the homepage hero ---- */
.cr-page .cr-hero-band {
  position: relative;
  overflow: hidden;
  background: #271645;
}

.cr-page .cr-hero-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.35;
  pointer-events: none;
}

.cr-page .cr-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  gap: clamp(32px, 4.5vw, 60px);
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(120px, 11vw, 150px) clamp(16px, 4vw, 56px) clamp(56px, 7vw, 88px);
  background: transparent;
  color: #fff;
}

.cr-page .cr-hero-copy { display: flex; flex-direction: column; gap: 22px; }
.cr-page .cr-hero-eyebrow { gap: 12px; }
.cr-page .cr-live { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 4px rgba(74,222,128,0.18); }

/* spec table as three white cards, echoing the white console on the right */
.cr-page .cr-specs {
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 560px;
  border: 0;
}
.cr-page .cr-specs div {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px;
  background: #fff;
  border-radius: 16px;
  border: 0;
  box-shadow: 0 18px 40px -22px rgba(10,4,24,0.6);
}
.cr-page .cr-specs dt { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #6E4FCF; padding: 0; }
.cr-page .cr-specs dd { margin: 0; font-size: 0.92rem; line-height: 1.4; color: #241A3C; font-weight: 500; }
@media (max-width: 1280px) {
  /* left column too narrow for three cards: compact full-width rows */
  .cr-page .cr-specs { grid-template-columns: 1fr; gap: 8px; }
  .cr-page .cr-specs div { flex-direction: row; align-items: baseline; gap: 16px; padding: 11px 16px; }
  .cr-page .cr-specs dt { width: 80px; flex: none; }
}

/* console frame + tabs in the site's accents */
.cr-page .cr-console { border-radius: 16px; border-color: rgba(255,255,255,0.14); box-shadow: 0 30px 70px -24px rgba(10,4,24,0.75), 0 0 0 1px rgba(161,136,232,0.10); }
.cr-page .cr-tab { font-family: var(--nav-font); font-weight: 600; color: rgba(255,255,255,0.72); border-color: rgba(255,255,255,0.22); }
.cr-page .cr-tab:hover { color: #fff; border-color: rgba(255,255,255,0.45); }
.cr-page .cr-tab.is-active { background: #fff; border-color: #fff; color: #271645; }
.cr-page .cr-arrow { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.22); }
.cr-page .cr-arrow:hover { color: #fff; border-color: rgba(255,255,255,0.5); }
.cr-page .cr-progress i.is-active { background: #A188E8; }
.cr-page .cr-bar { background: #6E4FCF; }
.cr-page .cr-bar.is-b { background: #4A3B6B; }
.cr-page .cr-bar.is-c { background: #33264F; }

/* ---- screenshots: light band, site card style ---- */
.cr-page .cr-screens { background: var(--oi-light); color: var(--oi-ink); }
.cr-page .cr-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: clamp(28px, 4vw, 44px); }
.cr-page .cr-shots figure { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.cr-page .cr-frame {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #15101F;
  border: 1px solid var(--oi-line);
  box-shadow: 0 18px 44px -22px rgba(39,22,69,0.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cr-page .cr-frame:hover { transform: translateY(-3px); box-shadow: 0 24px 54px -22px rgba(39,22,69,0.45); }
.cr-page .cr-frame img { display: block; width: 100%; height: auto; }
.cr-page .cr-shots figcaption { font-size: 0.98rem; line-height: 1.55; color: var(--oi-ink-body); }
.cr-page .cr-shots figcaption .cr-mono {
  display: block; margin-bottom: 4px;
  font-family: inherit; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--oi-plum);
}

@media (max-width: 1100px) {
  .cr-page .cr-hero { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .cr-page .cr-shots { grid-template-columns: 1fr; }
  .cr-page .cr-hero { padding-top: 104px; }
}

/* ===== White console: a light app screen on the purple hero =====
   Neutral greys for the plan; colour only where something changes
   (amber disruption, brand-purple moved/new work, green result line). */
.cr-page .cr-console {
  --c-ink: #241A3C;
  --c-body: #4B3C6E;
  --c-muted: #8E84A8;
  --c-line: #E7E2F0;
  --c-track: #F3F1F8;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.6);
  color: var(--c-ink);
  box-shadow: 0 24px 50px -28px rgba(10,4,24,0.45);
}
.cr-page .cr-console-bar { background: #F7F5FB; border-bottom-color: var(--c-line); color: var(--c-muted); }
.cr-page .cr-dots i { background: #DCD6E8; }
.cr-page .cr-status { color: var(--c-muted); border-color: var(--c-line); background: #fff; }
.cr-page .cr-status.is-alert { color: #B5650B; border-color: #F2C46B; background: #FFF6E6; }
.cr-page .cr-status.is-solving { color: #6E4FCF; border-color: #CDBDF6; background: #F3EEFF; }
.cr-page .cr-status.is-ok { color: #1F8A4C; border-color: #A7E0BE; background: #EDF9F2; }

.cr-page .cr-prompt { color: var(--c-ink); border-bottom-color: var(--c-line); }
.cr-page .cr-prompt-caret { color: #6E4FCF; }
.cr-page .cr-cursor { background: #6E4FCF; }

/* chips row: a quiet placeholder instead of an empty band */
.cr-page .cr-chips { border-bottom-color: var(--c-line); align-items: center; }
.cr-page .cr-chips:empty::before { content: attr(data-placeholder); font-family: var(--mono); font-size: 11.5px; color: #C2BAD3; }
.cr-page .cr-chip { color: #4A3B6B; background: #F1ECFB; border-color: #DDD3F3; }
.cr-page .cr-chip.is-alert { color: #9A5A08; background: #FFF6E6; border-color: #F2C46B; }

.cr-page .cr-axis { color: var(--c-muted); }
.cr-page .cr-now { background: repeating-linear-gradient(#C9C2D8 0 3px, transparent 3px 6px); }
.cr-page .cr-row b { color: var(--c-body); }
.cr-page .cr-track { background: var(--c-track); }
.cr-page .cr-bar { background: #D9D3E4; color: var(--c-ink); }
.cr-page .cr-bar.is-b { background: #E3DEEC; color: var(--c-ink); }
.cr-page .cr-bar.is-c { background: #EEEBF4; color: var(--c-muted); }
.cr-page .cr-bar.is-moved { background: #6E4FCF; color: #fff; box-shadow: 0 1px 3px rgba(40,20,80,0.15); }
.cr-page .cr-bar.is-out {
  background: repeating-linear-gradient(135deg, rgba(242,176,97,0.35) 0 6px, rgba(242,176,97,0.12) 6px 12px);
  color: #9A5A08; outline-color: #F2B061;
}
.cr-page .cr-result { color: #7A4A06; background: #FFF6E6; border-color: #F2C46B; }
.cr-page .cr-checks { color: #B6AEC8; }
.cr-page .cr-checks.is-ok span { color: #1F8A4C; }

/* tabs: one row; compact pills so six fit beside the arrows; if not, the row scrolls
   (hidden scrollbar, soft edge fade) and the script keeps the active tab fully in view */
.cr-page .cr-tabs { gap: 6px; }
.cr-page .cr-tab-list {
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 3px;
  padding: 2px 8px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}
.cr-page .cr-tab { padding: 5px 9px; font-size: 12px; }
.cr-page .cr-arrow { width: 28px; height: 28px; }
/* centre the row when it fits, without clipping its start when it overflows */
.cr-page .cr-tab:first-child { margin-left: auto; }
.cr-page .cr-tab:last-child { margin-right: auto; }

/* the progress dots under the console read as a stray pill here; the tabs already show position */
.cr-page .cr-progress { display: none; }