/* SITE_CSS_LOADED_2026-01-21-REV-A */
:root{
  --bg:#0b0f14;
  --panel:#101826;
  --panel2:#0f1723;
  --border:rgba(255,255,255,0.08);
  --text:#e7eef9;
  --muted:rgba(231,238,249,0.72);
  --accent:#4aa3ff;
  --accent2:#7c5cff;
  --good:#33d17a;
  --warn:#ffcc66;
  --bad:#ff5c7a;
  --shadow:0 18px 60px rgba(0,0,0,0.45);
  --radius:18px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:
    radial-gradient(1100px 500px at 15% -10%, rgba(74,163,255,.22), transparent 55%),
    radial-gradient(900px 450px at 95% 0%, rgba(124,92,255,.18), transparent 55%),
    radial-gradient(1200px 800px at 50% 120%, rgba(51,209,122,.10), transparent 55%),
    var(--bg);
  line-height:1.45;
}

body.lm-offline [data-requires-lm="1"] {
  pointer-events: none;
  opacity: 0.45;
}

a{color:inherit}
a:hover{color:#ffffff}

.container{
  width:min(1100px, calc(100% - 48px));
  margin:0 auto;
  padding:28px 0 56px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 0 22px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.logo{
  width:60px;
  height:50px;
  background:url("/favicon.ico") center / contain no-repeat;
  filter: invert(1) brightness(2);
}
.logo:after{
  content:"";
  position:absolute; inset:-40% -40%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 55%);
  transform:rotate(20deg);
}
.brand .title{
  display:flex; flex-direction:column;
}
.brand .title strong{font-size:16px; letter-spacing:.3px}
.brand .title span{font-size:12px; color:var(--muted)}

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.nav a{
  text-decoration:none;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.04);
  color:var(--muted);
  transition:transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
.nav a:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.16);
  color:var(--text);
}
.nav a.active{
  background:linear-gradient(135deg, rgba(74,163,255,.20), rgba(124,92,255,.18));
  border-color:rgba(74,163,255,.35);
  color:var(--text);
}

a.disabled,
a[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.45;
  cursor: default;
}

.hero-wrap{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr; /* text slightly wider */
  gap:24px;
  margin-bottom:28px;
}

.hero{
  background:linear-gradient(
    135deg,
    rgba(16,24,38,.86),
    rgba(15,23,35,.86)
  );
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
  position:relative;
  overflow:visible;
  z-index: 0;
}

.hero::before{
  content:"";
  z-index: 0;
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(650px 250px at 8% 10%, rgba(74,163,255,.25), transparent 55%),
    radial-gradient(650px 250px at 80% 0%, rgba(124,92,255,.22), transparent 55%),
    radial-gradient(750px 320px at 50% 130%, rgba(51,209,122,.12), transparent 60%);
  pointer-events:none;
}

/* keep hero content above glow */
.hero > *{
  position:relative;
  z-index: 1;
}
.hero h1{
  margin:0 0 8px;
  font-size:32px;
  letter-spacing:.2px;
}
.hero p{margin:0 0 18px; color:var(--muted); font-size:15px; max-width:80ch}

.hero bright{
  font-weight: normal;
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255,255,255,0.25);
}

.hero-media{
  border-radius:var(--radius);
  aspect-ratio: 16 / 13;              /* pick a ratio that matches your hero images */
  min-height: 0;                      /* remove the forced height */
  background-size: contain;           /* or cover, your choice */
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:var(--shadow);
}

/* Product-specific images */
.hero-media-roteahub{
  background-image:url("/assets/hero/intro_window.png");
}
.hero-media-protrev{
  background-image:url("/assets/hero/vol_sim_error_kit_view.png");
}
.hero-media-workflow {
  background-image: url("/assets/hero/workflow7.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  width: 100%;
  height: 90px;   /* choose a sensible height */
}

.hero ul {
  margin: 0px 0 0 18px;
  padding: 0;
  color: inherit;
}

.hero li {
  margin-top: 4px;
  margin-left: 12px;
  color: var(--muted);
}


.grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  margin-top:18px;
}

@media (max-width: 900px){
  .hero-wrap{
    grid-template-columns: 1fr;
  }

  .hero-media{
    min-height:220px;
  }
}


.mt-14 { margin-top: 14px; }
.mt-10 { margin-top: 10px; }
.mt-8  { margin-top: 8px; }
.mt-6  { margin-top: 6px; }


.list-title {
  font-weight: 700;
  margin-top: 8px;
}

.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:rgba(16,24,38,.65);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  padding:18px;
}
.card h2{
  margin:0 0 10px;
  font-size:22px;
  color:#fff;
}
.card h3{
  margin:0 0 10px;
  font-size:18px;
  color:#fff;
}

.card bright{
  font-weight: normal;
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255,255,255,0.25);
}

.card p{margin:0 0 12px; color:var(--muted)}
.small{font-size:13px; color:var(--muted)}

.card ul {
  margin: 4px 0 0 18px;
  padding: 0;
  color: inherit;
}

.card li {
  margin: 4px 0;
}



.btnrow{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.btnrow.downloads{ gap: 50px;}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(74,163,255,.28);
  background:linear-gradient(135deg, rgba(74,163,255,.18), rgba(124,92,255,.12));
  text-decoration:none;
  color:var(--text);
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}

.btn:hover{transform:translateY(-1px); border-color:rgba(74,163,255,.45)}
.btn.secondary{
  border-color:rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.05);
}
.btn:hover,
.btn:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-disabled {
  pointer-events: none;
  opacity: 0.6;
}

.btn-busy {
  pointer-events: none;
  opacity: 0.7;
}

.btn.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px 18px;
  min-height: 44px;

  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;

  background: linear-gradient(
    180deg,
    rgba(74,163,255,0.18),
    rgba(74,163,255,0.10)
  );
  border: 1px solid rgba(74,163,255,0.35);
  color: #ffffff;

  cursor: pointer;
}

/* ================================
   Action row: button left, text right
   ================================ */

/* container: controls vertical spacing */
.action-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;          /* THIS is the vertical spacing */
}

.action-row {
  display: grid;
  row-gap: 14px;  
  grid-template-columns: max-content 1fr; /* button width + text */
  column-gap: 12px;
  align-items: start;   /* text aligns to top of button */
}

/* Left column (button) */
.action-cta {
  display: flex;
  align-items: flex-start;
}

/* Ensure button has stable width */
.action-cta .btn {
  white-space: nowrap;
}

/* Right column (text) */
.action-body {
  min-width: 0; /* CRITICAL: allows wrapping in grid */
}

.action-text {
  color: var(--text-muted, #cbd5e1);
  line-height: 1.4;
}



.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  background:rgba(255,255,255,.04);
  font-size:12px;
}

.hr{
  height:1px;
  background:rgba(255,255,255,0.08);
  border:0;
  margin:14px 0;
}

ul.clean{list-style:none; padding:0; margin:0}
.item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(0,0,0,0.10);
  margin:8px 0;
}
.item .k{font-family:var(--mono); font-size:12px; color:rgba(231,238,249,0.78)}
.item .v{color:var(--muted); font-size:13px}
.item a{color:var(--text); text-decoration:none}
.item a:hover{text-decoration:underline}

.notice{
  border:1px;
  background: rgba(16,24,38,0.65);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  padding: 14px 18px;
  color: var(--text-muted, #cbd5e1);
  font-family: var(--font-ui, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 18px;
  margin: 24px 0;
  transition: border-color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;

}
.notice strong{color:var(--text)}

.notice.hidden {
  display: none;
}

.notice.muted {
  opacity: 0.85;
  border-style: dashed;
}
.notice.good {
  border: 2px solid #22c55e;
}
.notice.error {
 color: #ffffff;
 border: dashed #cc0000;
 border-width: 2px;
}


.code{
  font-family:var(--mono);
  font-size:12px;
  color:rgba(231,238,249,0.78);
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,0.08);
  padding:10px 12px;
  border-radius:14px;
  overflow:auto;
}

/* ================================
   RoteaHub messages layout
   Fixed tab for body text
   ================================ */

#roteahub-messages .item {
  display: grid;                     /* override flex */
  grid-template-columns: 260px 1fr;  /* fixed tab stop */
  column-gap: 18px;
  align-items: start;
}

#roteahub-messages .item .k {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#roteahub-messages .item .v {
  min-width: 0;              /* critical for grid wrapping */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Mobile: stack title above body */
@media (max-width: 900px) {
  #roteahub-messages .item {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }

  #roteahub-messages .item .k {
    white-space: normal;
  }
}








.footer{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  color:var(--muted);
  font-size:12px;
}
.footer a{color:var(--muted); text-decoration:none}
.footer a:hover{color:var(--text)}

/* ===== Help page: fixed-height layout ===== */

body.help-layout {
  margin: 0;
  height: 100vh;
}

body.help-layout .help-shell {
  height: 100vh;               /* CRITICAL */
  display: flex;
  flex-direction: column;
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0;             /* REMOVE bottom padding */
}

/* Header & footer stay natural height */
body.help-layout .topbar,
body.help-layout .footer {
  flex: 0 0 auto;
}

/* This is the stretch region */
body.help-layout section.card.help-card {
  flex: 1 1 auto;              /* CRITICAL */
  min-height: 0;               /* CRITICAL */
  padding: 0;
  display: flex;
  background: #ffffff;
}

/* iframe fills the stretch region */
body.help-layout iframe.help-frame {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ===== Downloads: version row ===== */

.is-hidden { display: none !important; }

.dl-version-row{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.dl-status{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#version-select{
  /* sizing & layout */
  flex: 0 0 auto;  
  min-width: 320px;
  max-width: 420px;
  height: 42px;

  /* visuals */
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(235,242,255,0.92);
}

#version-select option{
  background: #0b1020;
  color: #eaf1ff;
}

.dl-status-inline{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: 30px;
}

.dl-version-pill{
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(235,242,255,0.92);
  font-weight: 650;
  letter-spacing: .2px;
}


/* If your .btnrow is flex, allow wrapping globally in hero */
.hero .btnrow{
  flex-wrap: wrap;
  align-items: center;
  row-gap: 10px;
}

/* ===== Downloads: release notes panel ===== */

.release-notes{ margin-top: 14px; }

.release-notes .notes-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.release-notes .notes-title{
  font-size: 14px;
  font-weight: 650;
  margin: 0;
  color: #cfe0ff;
  letter-spacing: .2px;
}

.release-notes .notes-meta{
  font-size: 13px;
  opacity: .75;
}

.release-notes .notes-body{
  display: block;
  width: 100%;
  min-height: 110px;
  max-height: 260px;
  overflow: auto;

  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 12px;

  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);

  color: rgba(235,242,255,0.92);
  font-size: 13px;
  line-height: 1.45;

  white-space: pre-wrap;
}

/* Verify list: right-aligned button per row */
.dl-verify-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* keep the right side tight */
.dl-verify-item .v{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* hash row: allow the command to be visible but not blow out layout */
.dl-hash-right{
  flex-wrap: wrap;
  gap: 10px;
}

.dl-hash-code{
  display: inline-block;
  max-width: 560px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(235,242,255,0.92);
  font-size: 13px;
}
/* Hash row: two-line layout */
.dl-verify-hash .k{
  width: 100%;
}

.dl-hash-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dl-hash-pre{
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(235,242,255,0.92);
  font-size: 13px;
  line-height: 1.45;

  /* wrap the command instead of stretching horizontally */
  white-space: pre-wrap;
  word-break: break-word;
}

video {
  border-radius: 14px;
  background: #000;
  max-width: 100%;
}

/* ================================
   Compact buttons for KB cards
   ================================ */

.kb-compact .btn {
  padding: 6px 12px;
  font-size: 10px;
  border-radius: 10px;
  line-height: 1.2;
}

.kb-compact .btn.secondary {
  opacity: 0.9;
}
.kb-meta {
  margin-top: 6px;
  opacity: 0.9;
}

/* ================================
   KB list layout: fixed button height
   ================================ */

#kb-videos .item,
#kb-usecases .item {
  display: grid;
  grid-template-columns: 180px 1fr;   /*  column divider */
  grid-template-rows: auto auto;      /* title + buttons only */
  column-gap: 18px;
  align-items: start;
}

/* Title */
#kb-videos .item .k,
#kb-usecases .item .k {
  grid-column: 1;
  grid-row: 1;
}

/* Buttons directly under title */
#kb-videos .item .btnrow,
#kb-usecases .item .btnrow {
  grid-column: 1;
  grid-row: 2;
  justify-content: flex-start;
  margin-top: 6px;   /* small, controlled spacing */
}
                                             
                                             /* Reduce gap between title and compact buttons */
#kb-videos .btnrow.kb-compact,
#kb-usecases .btnrow.kb-compact {
  margin-top: 4px;   /* try 2–6px */
}
                                             
#kb-videos .item .k,
#kb-usecases .item .k {
  line-height: 1.3;   /* default is often ~1.5 */
}                                          

/* Description spans both rows on the right */
#kb-videos .item .v,
#kb-usecases .item .v {
  grid-column: 2;
  grid-row: 1 / span 2;   /*  THIS prevents extra height */
  min-width: 0;
}

/* Mobile: stack naturally */
@media (max-width: 900px) {
  #kb-videos .item,
  #kb-usecases .item {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  #kb-videos .item .k,
  #kb-usecases .item .k,
  #kb-videos .item .btnrow,
  #kb-usecases .item .btnrow,
  #kb-videos .item .v,
  #kb-usecases .item .v {
    grid-column: 1;
    grid-row: auto;
  }
}

/* =====================================================
   Home page layout
   Desktop: posts under product, hub on the right
   Mobile: product → hub → posts
   ===================================================== */

.home-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1.35fr 1fr;
  grid-template-areas:
    "product hub"
    "posts   hub";
  align-items: start;
}

.home-product { grid-area: product; }
.home-hub     { grid-area: hub; }
.home-posts   { grid-area: posts; }

/* Mobile breakpoint */
@media (max-width: 900px) {
  .home-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "product"
      "hub"
      "posts";
  }
}