/* =========================================================================
   Company Website — Editor visual treatment
   "Airy Aurora": a bright, high-technology aesthetic — white base with soft
   cyan/violet glow washes, frosted-glass cards, and a cyan→blue→violet accent.
   Editor-owned presentation; per-slot content is supplied through content.json.
   Layered on top of the Quarto `cosmo` Bootstrap theme.
   ========================================================================= */

:root {
  /* Surfaces */
  --g-bg:            #ffffff;
  --g-panel:         rgba(255, 255, 255, 0.62);
  --g-panel-2:       rgba(255, 255, 255, 0.78);
  --g-border:        rgba(120, 140, 200, 0.22);
  --g-border-strong: rgba(120, 140, 200, 0.38);

  /* Ink */
  --g-ink:    #141a2e;
  --g-ink-2:  #48506a;
  --g-muted:  #6b7390;

  /* Accents */
  --g-cyan:   #12bcd4;
  --g-blue:   #5b7cff;
  --g-violet: #7c5cff;
  --g-grad:   linear-gradient(120deg, #12bcd4 0%, #5b7cff 48%, #8b5cff 100%);
  --g-grad-soft: linear-gradient(120deg, rgba(24,196,220,0.16), rgba(124,92,255,0.16));

  /* Content-pending marker (staging only) */
  --g-pending:         #e6a817;
  --g-pending-ink:     #7a5c12;
  --g-pending-surface: rgba(255, 246, 214, 0.75);

  --g-radius: 16px;
  --g-font: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --g-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
}

/* ------------------------------------------------------------------ base -- */

html { scroll-behavior: smooth; }

body {
  background-color: var(--g-bg);
  background-image:
    radial-gradient(760px 420px at 88% -10%, rgba(124, 92, 255, 0.20), transparent 60%),
    radial-gradient(680px 380px at 3% 0%,   rgba(24, 196, 220, 0.20), transparent 58%),
    radial-gradient(1000px 560px at 50% 118%, rgba(60, 120, 255, 0.13), transparent 60%);
  background-attachment: fixed;
  color: var(--g-ink);
  font-family: var(--g-font);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
}

main, .navbar, .nav-footer { position: relative; z-index: 1; }
main { max-width: 72rem; }

/* ------------------------------------------------------------ typography -- */

h1, h2, h3, h4 { color: var(--g-ink); font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.05; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); margin-top: 2.6rem; padding-top: 2.2rem; border-top: 1px solid var(--g-border); }
h3 { font-size: 1.18rem; }
.hero + h2, h1 + h2 { border-top: 0; padding-top: 0; }

p, li { color: var(--g-ink-2); line-height: 1.72; font-size: 1.02rem; }
strong { color: var(--g-ink); }
a { color: var(--g-blue); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--g-violet); }
main ul li::marker { color: var(--g-cyan); }

/* --------------------------------------------------------------- navbar -- */

.navbar {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--g-border);
}
.navbar .nav-link { color: var(--g-ink-2) !important; font-weight: 500; font-size: 0.95rem; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--g-ink) !important; }

/* Left identity item ("MediaTek Research" → Company) styled as a brand mark. */
.navbar-nav:not(.ms-auto) > .nav-item:first-child > .nav-link,
.navbar > .container-fluid > .navbar-brand {
  font-weight: 800 !important;
  color: var(--g-ink) !important;
  position: relative;
  padding-left: 1.5rem !important;
}
.navbar-nav:not(.ms-auto) > .nav-item:first-child > .nav-link::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 14px; height: 14px; transform: translateY(-50%);
  border-radius: 5px; background: var(--g-grad);
  box-shadow: 0 0 14px rgba(124, 92, 255, 0.5);
}

/* Registration & login as buttons adjacent to primary nav (§06a.4.2):
   the last two items of the right-hand navbar. */
.navbar-nav.ms-auto > .nav-item:nth-last-child(2) > .nav-link,
.navbar-nav.navbar-nav-scroll > .nav-item:nth-last-child(2) > .nav-link {
  color: #ffffff !important;
  background: var(--g-grad);
  border-radius: 999px;
  padding: 0.34rem 1.05rem !important;
  margin-left: 0.5rem;
  font-weight: 700;
  box-shadow: 0 8px 20px -8px rgba(124, 92, 255, 0.6);
}
.navbar-nav.ms-auto > .nav-item:nth-last-child(1) > .nav-link,
.navbar-nav.navbar-nav-scroll > .nav-item:nth-last-child(1) > .nav-link {
  color: var(--g-ink) !important;
  border: 1px solid var(--g-border-strong);
  border-radius: 999px;
  padding: 0.32rem 1.0rem !important;
  margin-left: 0.4rem;
  font-weight: 600;
  background: var(--g-panel);
}

/* --------------------------------------------------------------- footer -- */

.nav-footer {
  background: rgba(255, 255, 255, 0.6) !important;
  border-top: 1px solid var(--g-border);
  color: var(--g-muted);
  font-size: 0.88rem;
}
.nav-footer a { color: var(--g-ink-2); }

/* ----------------------------------------------------------------- hero -- */

.hero { margin: 0.5rem 0 1rem; padding: 2.2rem 0 1.2rem; }
.hero .eyebrow { margin-bottom: 1.1rem; }
.hero h1 { margin: 0.2rem 0 1.1rem; }
.headline-grad {
  background: var(--g-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lede { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--g-ink-2); max-width: 46rem; line-height: 1.6; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--g-mono); font-size: 0.74rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--g-violet);
  padding: 0.34rem 0.8rem; border: 1px solid var(--g-border-strong);
  border-radius: 999px; background: var(--g-panel-2);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--g-cyan); box-shadow: 0 0 10px var(--g-cyan); }

/* --------------------------------------------------------------- action -- */

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.6rem 0 0.5rem; }
a.btn {
  border-radius: 999px; padding: 0.62rem 1.35rem; font-weight: 600; font-size: 0.97rem;
  border: 1px solid var(--g-border-strong);
  transition: transform .12s ease, filter .15s ease, border-color .15s ease;
}
a.btn:hover { transform: translateY(-1px); }
a.btn-primary { background: var(--g-grad) !important; border: 0 !important; color: #ffffff !important; box-shadow: 0 12px 28px -12px rgba(124, 92, 255, 0.6); }
a.btn-primary:hover { filter: brightness(1.05); color: #ffffff !important; }
a.btn-ghost { background: var(--g-panel) !important; color: var(--g-ink) !important; border: 1px solid var(--g-border-strong) !important; }
a.btn-ghost:hover { border-color: var(--g-violet) !important; color: var(--g-violet) !important; }

/* ---------------------------------------------------------------- cards -- */

.grid-2, .grid-3 { display: grid; gap: 1.1rem; margin: 1.4rem 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card {
  background: var(--g-panel);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  padding: 1.35rem 1.4rem;
  backdrop-filter: blur(6px);
  position: relative; overflow: hidden;
  box-shadow: 0 14px 34px -24px rgba(60, 60, 140, 0.55);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--g-grad); opacity: 0; transition: opacity .18s ease; }
.card:hover { transform: translateY(-3px); border-color: var(--g-border-strong); box-shadow: 0 20px 40px -24px rgba(60, 60, 140, 0.6); }
.card:hover::before { opacity: 0.9; }
.card h3 { margin-top: 0.1rem; margin-bottom: 0.45rem; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card .ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 11px; margin-bottom: 0.8rem;
  font-size: 1.25rem; background: var(--g-grad-soft); border: 1px solid var(--g-border);
}
.card .tag { font-family: var(--g-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--g-violet); text-transform: uppercase; }

/* ---------------------------------------------------------------- pills -- */

.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.pill { font-family: var(--g-mono); font-size: 0.78rem; color: var(--g-ink-2); padding: 0.32rem 0.75rem; border: 1px solid var(--g-border); border-radius: 999px; background: var(--g-panel); }

/* --------------------------------------------------- FAQE call-site stub -- */

.faqe-callsite {
  display: flex; align-items: center; gap: 1rem;
  border: 1px solid var(--g-border-strong); border-radius: var(--g-radius);
  background: var(--g-grad-soft); padding: 1.1rem 1.3rem; margin: 1.3rem 0;
}
.faqe-callsite .ic { width: 44px; height: 44px; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 1.35rem; background: var(--g-panel-2); border: 1px solid var(--g-border); }

/* -------------------------------------------------------- feedback form -- */
/* The Send-feedback call site (02 POST /v1/feedback) presented as a frosted
   card, form fields on the panel surfaces, submit as the primary pill. */

#feedback-form {
  background: var(--g-panel);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  padding: 1.35rem 1.4rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 14px 34px -24px rgba(60, 60, 140, 0.55);
  max-width: 46rem;
  margin: 1.3rem 0;
}
#feedback-form p { margin-bottom: 1.05rem; }
#feedback-form p:last-child { margin-bottom: 0; }
#feedback-form label {
  display: inline-block; margin-bottom: 0.4rem;
  font-family: var(--g-mono); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--g-violet);
}
#feedback-form textarea,
#feedback-form input {
  width: 100%;
  background: var(--g-panel-2);
  border: 1px solid var(--g-border-strong);
  border-radius: 12px;
  padding: 0.65rem 0.9rem;
  color: var(--g-ink);
  font-family: var(--g-font);
  font-size: 0.97rem;
  line-height: 1.5;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#feedback-form textarea { resize: vertical; min-height: 8.5rem; }
#feedback-form textarea:focus,
#feedback-form input:focus {
  outline: none;
  border-color: var(--g-blue);
  box-shadow: 0 0 0 3px rgba(91, 124, 255, 0.18);
}
#feedback-form ::placeholder { color: var(--g-muted); }

/* Submit — and the FAQE call-site button — follow the primary pill action. */
#feedback-submit,
#faqe-assistant-btn {
  border: 0; cursor: pointer;
  border-radius: 999px; padding: 0.6rem 1.5rem;
  font-weight: 700; font-size: 0.97rem; color: #ffffff;
  background: var(--g-grad);
  box-shadow: 0 12px 28px -12px rgba(124, 92, 255, 0.6);
  transition: transform .12s ease, filter .15s ease;
}
#feedback-submit:hover,
#faqe-assistant-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
#feedback-submit:disabled { opacity: 0.55; cursor: default; transform: none; }

#feedback-form-status { color: var(--g-muted); font-size: 0.92rem; }

/* --------------------------------------------------- content-pending mark -- */
/* Staging-only visible marker emitted by the assembler for an unresolved slot.
   A publication assembly contains none of these. */
.content-pending {
  margin: 1.3rem 0;
  padding: 1rem 1.2rem 1rem 1.35rem;
  border: 1px solid rgba(230, 168, 23, 0.55);
  border-left: 4px solid var(--g-pending);
  border-radius: 12px;
  background: var(--g-pending-surface);
  color: var(--g-pending-ink);
}
.content-pending > :first-child { color: #b5820c; font-family: var(--g-mono); font-size: 0.82rem; letter-spacing: 0.05em; }
.content-pending code { color: #3a2f10; background: rgba(255, 255, 255, 0.7); padding: 0.05rem 0.35rem; border-radius: 5px; }
.content-pending > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- misc -- */

hr { border-color: var(--g-border); opacity: 1; margin: 2.2rem 0; }
::selection { background: rgba(91, 124, 255, 0.28); color: var(--g-ink); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }