/*
  File: www/developers/assets/portal.css
  Purpose: Developer portal chrome (hero, quickstart strip, Scalar container), laid out like the NEXUS
           developer site: a full-viewport flex column where the reference fills the remaining space.
           Colors are the Catavera tokens (frontend/shared/src/styles/tokens.css); dark is the default and
           body.light switches the chrome. Scalar's own colors are set in portal.js (customCss).
  Author: Brandon / AAU Solutions
  Created: 2026-10-10
*/

:root {
  /* Dark (default) */
  --dp-bg: #10161d;
  --dp-surface: #18202a;
  --dp-surface-2: #212b37;
  --dp-border: #2e3a47;
  --dp-border-strong: #6b7885;
  --dp-text: #e9eeeb;
  --dp-text-muted: #a7b2bd;
  --dp-accent: #93a5f8;
  --dp-brand-2: #f07ab5;
  --dp-success: #47cd89;
  --dp-hero-from: #17245a;
  --dp-font-sans: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --dp-ease: cubic-bezier(0.2, 0, 0, 1);
}

body.light {
  --dp-bg: #f5f7f6;
  --dp-surface: #ffffff;
  --dp-surface-2: #eef2f0;
  --dp-border: #d8dfdb;
  --dp-border-strong: #748290;
  --dp-text: #1d2733;
  --dp-text-muted: #4b5866;
  --dp-accent: #2340b8;
  --dp-brand-2: #b3246f;
  --dp-success: #067647;
  --dp-hero-from: #e6eafb;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Base: full viewport flex column, no page scroll */
html { height: 100%; }
body.portal {
  font-family: var(--dp-font-sans);
  background: var(--dp-bg);
  color: var(--dp-text);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background 0.2s;
}

/* Hero */
.hero {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--dp-hero-from) 0%, var(--dp-bg) 60%);
  border-bottom: 1px solid var(--dp-border);
  padding: 22px 48px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  transition: background 0.2s, border-color 0.2s;
}
.hero-logo { display: flex; align-items: center; text-decoration: none; border-radius: 6px; }
.hero-logo:focus-visible { outline: 2px solid var(--dp-accent); outline-offset: 4px; }
.hero-logo-dark { display: flex; align-items: center; gap: 10px; }
.hero-mark { display: block; height: 40px; width: 40px; border-radius: 8px; }
.hero-wordmark { display: block; height: 22px; width: auto; }
.hero-logo-light { display: none; height: 40px; width: auto; }
body.light .hero-logo-dark { display: none; }
body.light .hero-logo-light { display: block; }
.hero-div { width: 1px; height: 34px; background: var(--dp-border); flex-shrink: 0; }
.hero-desc { font-size: 15px; color: var(--dp-text-muted); line-height: 1.5; }
.hero-desc strong { color: var(--dp-text); font-size: 17px; }
.hero-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero-vera { width: 40px; height: 48px; flex-shrink: 0; transform-origin: 50% 100%; animation: hero-vera-look 5s ease-in-out infinite; }
@keyframes hero-vera-look { 0%, 100% { transform: rotate(0); } 40%, 60% { transform: rotate(-6deg) translateY(-2px); } }

/* Pills */
.pill { padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.pill-green   { background: color-mix(in srgb, var(--dp-success) 14%, transparent); color: var(--dp-success); border: 1px solid color-mix(in srgb, var(--dp-success) 30%, transparent); }
.pill-blue    { background: color-mix(in srgb, var(--dp-accent) 14%, transparent);  color: var(--dp-accent);  border: 1px solid color-mix(in srgb, var(--dp-accent) 30%, transparent); }
.pill-magenta { background: color-mix(in srgb, var(--dp-brand-2) 14%, transparent); color: var(--dp-brand-2); border: 1px solid color-mix(in srgb, var(--dp-brand-2) 30%, transparent); }
.pill-amber   { background: color-mix(in srgb, #d97706 14%, transparent); color: #b45309; border: 1px solid color-mix(in srgb, #d97706 35%, transparent); }
body:not(.light) .pill-amber { color: #fbbf24; }
a.pill { text-decoration: none; }
a.pill:hover { filter: brightness(1.1); }
.dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: blink 2s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Language switch */
.lang-switch {
  display: flex; align-items: center; gap: 3px;
  background: var(--dp-surface); border: 1px solid var(--dp-border-strong);
  border-radius: 20px; padding: 3px;
}
.lang-switch button {
  background: none; border: none; color: var(--dp-text-muted);
  font: 700 11px/1 var(--dp-font-sans); letter-spacing: 0.3px;
  padding: 5px 9px; border-radius: 16px; cursor: pointer;
}
.lang-switch button:hover { color: var(--dp-text); }
.lang-switch button.lang-active { background: var(--dp-surface-2); color: var(--dp-text); }
body.light .lang-switch button.lang-active { background: var(--dp-bg); box-shadow: 0 1px 2px rgb(16 22 29 / 0.12); }
.lang-switch button:focus-visible { outline: 2px solid var(--dp-accent); outline-offset: 1px; }

/* Pill theme toggle */
.theme-switch { display: flex; align-items: center; cursor: pointer; flex-shrink: 0; user-select: none; border-radius: 30px; }
.theme-switch:focus-visible { outline: 2px solid var(--dp-accent); outline-offset: 2px; }
.ts-track {
  position: relative; display: flex; align-items: center;
  width: 64px; height: 30px; padding: 3px;
  background: var(--dp-surface); border: 1px solid var(--dp-border-strong); border-radius: 30px;
  transition: background 0.2s, border-color 0.2s;
}
.ts-track:hover { border-color: var(--dp-text-muted); }
.ts-icon { flex: 1; text-align: center; font-size: 13px; line-height: 1; z-index: 1; pointer-events: none; color: var(--dp-text); }
.ts-thumb {
  position: absolute; left: 3px; width: 26px; height: 24px; border-radius: 20px;
  background: linear-gradient(135deg, #1b2a55, #2340b8);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.4);
  transition: transform 0.2s var(--dp-ease), background 0.2s;
}
body.light .ts-thumb { transform: translateX(32px); background: linear-gradient(135deg, #fff8e7, #fef3c7); }

/* Quickstart strip */
.steps {
  flex-shrink: 0;
  background: var(--dp-surface); border-bottom: 1px solid var(--dp-border);
  padding: 0 40px; display: flex; overflow-x: auto;
  transition: background 0.2s, border-color 0.2s;
}
.step {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 20px 11px 0; margin-right: 20px;
  border-right: 1px solid var(--dp-border); white-space: nowrap;
  font-size: 12px; color: var(--dp-text-muted);
}
.step:last-child { border-right: none; }
.step-n {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--dp-surface-2); color: var(--dp-brand-2);
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.step strong { color: var(--dp-text); }
.step a { color: var(--dp-accent); text-underline-offset: 2px; }

/* Scalar container: fills all remaining space */
#refs { flex: 1; min-height: 0; overflow: auto; }
.noscript { padding: 24px 48px; color: var(--dp-text-muted); }
.noscript a { color: var(--dp-accent); }

/* Embedded in the dashboard: no chrome, the frame is the viewport */
body.embed #refs { overflow: auto; }

@media (max-width: 760px) {
  /* Compact header on phones (design review P1-8: it was ~300px before any content) */
  .hero { padding: 12px 16px; gap: 8px 12px; }
  .hero-div, .hero-vera { display: none; }
  .hero-desc { font-size: 13px; }
  .hero-desc #hero-areas, .hero-desc #hero-sub { display: none; }
  .hero-right { margin-left: 0; width: 100%; gap: 6px; }
  .hero-right .pill:not(:first-child):not(a) { display: none; }
  .hero-right .lang-switch { margin-left: auto; }
  /* The quickstart scrolls sideways; the fade shows there is more */
  .steps { padding: 0 16px; scroll-snap-type: x mandatory;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .step { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .dot, .hero-vera { animation: none; }
  .ts-thumb, body.portal, .hero, .steps { transition: none; }
}

/* Server-rendered summary inside #refs (replaced by Scalar once it loads) */
.refs-static { padding: 24px 48px; max-width: 60rem; color: var(--dp-text); }
.refs-static h1 { font-size: 26px; margin-bottom: 10px; }
.refs-static p { color: var(--dp-text-muted); margin-bottom: 12px; line-height: 1.55; }
.refs-static ul { padding-left: 18px; display: grid; gap: 6px; }
.refs-static a { color: var(--dp-accent); }