/* ---------------------------------------------------------------
   Components - brand lockup, nav rail, cards, buttons, badges
--------------------------------------------------------------- */

/* ============ Brand lockup ============
   Servion ships a white SVG (for dark) and a full-color SVG (for light);
   Cresyn's mark is white-on-transparent, so it's drawn via mask in the
   current text color. The HUD lockup follows body.theme-*; in-frame
   lockups follow .frame[data-theme]. */
.logo-servion {
  display: block; height: 20px; aspect-ratio: 257 / 40;
  background-color: currentColor;
  -webkit-mask: url('../assets/images/servion-logo.svg') center / contain no-repeat;
  mask: url('../assets/images/servion-logo.svg') center / contain no-repeat;
}
.cresyn-mark {
  display: inline-block;
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  -webkit-mask: url('../assets/images/cresyn-mark.png') center / contain no-repeat;
  mask: url('../assets/images/cresyn-mark.png') center / contain no-repeat;
  flex-shrink: 0;
}
.cresyn-word { font-weight: 700; letter-spacing: 0.16em; font-size: 0.78em; }
.lockup { display: inline-flex; align-items: center; gap: 14px; color: var(--text); }
.lockup__cresyn { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; }
.lockup__x { width: 1px; height: 1.4em; background: var(--border-strong); }
.lockup--lg .logo-servion { height: 32px; }
.lockup--lg .lockup__cresyn { font-size: 28px; }
.lockup--lg { gap: 22px; }

.brandmark {
  position: fixed;
  top: 24px;
  left: 32px;
  z-index: var(--z-hud);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  transition: color var(--dur-med) var(--ease-soft), opacity var(--dur-med);
}
.brandmark .logo-servion { height: 18px; }
.brandmark .lockup__cresyn { font-size: 15px; }
body.on-hero .brandmark { opacity: 0; pointer-events: none; }
html[data-layout="compact"] .brandmark { top: 18px; left: 18px; gap: 10px; }
html[data-layout="compact"] .brandmark .logo-servion { height: 15px; }
html[data-layout="compact"] .brandmark .lockup__cresyn { font-size: 13px; }

/* ============ Dot navigation ============ */
.navrail {
  position: fixed;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-hud);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.navrail__dot {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--text-faint);
  border: none; padding: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.navrail__dot::before { content: ''; position: absolute; inset: -8px; }
.navrail__dot:hover { transform: scale(1.3); background: var(--text-dim); }
.navrail__dot:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
.navrail__dot.is-active {
  background: var(--blue);
  transform: scale(1.5);
  box-shadow: 0 0 0 3px hsla(var(--hue-blue), 90%, 50%, 0.22);
}
.navrail__label {
  position: absolute;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--bg-1);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-soft);
}
.navrail__dot:hover .navrail__label, .navrail__dot:focus-visible .navrail__label { opacity: 1; }

html[data-layout="compact"] .navrail {
  right: auto; left: 50%; top: auto;
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 22px);
  transform: translateX(-50%);
  flex-direction: row;
  gap: 9px;
}
html[data-layout="compact"] .navrail__dot { width: 7px; height: 7px; }
html[data-layout="compact"] .navrail__dot::before { inset: -10px -3px; }
html[data-layout="compact"] .navrail__dot.is-active { transform: scale(1.4); }
html[data-layout="compact"] .navrail__label { display: none; }
html[data-layout="compact"] .hud__hint { display: none; }

/* ============ Card ============ */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.frame[data-theme="light"] .card { background: var(--bg-1); box-shadow: var(--shadow-card); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 17px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.btn--primary { background: var(--amber); color: #1a1000; }
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--glow-amber); }
.btn--ghost { border: 1px solid var(--border-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ============ Badge / chip ============ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border-strong); color: var(--text-dim);
}
.chip {
  display: inline-flex; align-items: center;
  font-size: 15px; font-weight: 600;
  padding: 8px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text);
}

/* ============ Stat ============ */
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat__num { font-family: var(--font-display); font-size: var(--fs-stat); font-weight: 600; line-height: 1; color: var(--text); }
.stat__num em { font-style: normal; color: var(--blue); }
.stat__label { font-size: 14px; color: var(--text-dim); max-width: 22ch; line-height: 1.35; }
.stat-row { display: flex; gap: var(--space-xl); }
html[data-layout="compact"] .stat-row { gap: var(--space-md); flex-wrap: wrap; }
html[data-layout="compact"] .stat { flex: 1 1 100px; }

/* Compact: soft fade behind the bottom controls so scrolling content never collides with them */
html[data-layout="compact"] .hud::before {
  content: '';
  position: fixed; left: 0; right: 0; bottom: 0; height: 120px;
  background: linear-gradient(to top, var(--bg) 40%, transparent);
  pointer-events: none;
  transition: background var(--dur-med);
}