/* ===========================================================================
   siriusly.ai - pill navbar. Shared across every page (imported by
   design-system.css, which all templates load). Rendered from the
   _navbar.html partial. Auth-aware links set in the partial; light-theme
   overrides live in tokens/colors.light.css.

   A sticky, self-sizing pill that floats centered near the top. Once the
   page scrolls it eases up 8px closer to the edge (.is-scrolled, toggled by
   _navbar.html) - a transition rather than a smaller sticky `top`, which
   would track the scroll 1:1 and snap with a single wheel tick.

   The pill is dark in both themes, wordmark only: it re-scopes the dark
   theme's text/surface/border tokens onto itself (and so onto its dropdowns),
   whatever the page around it is.
   =========================================================================== */
.sr-nav {
  --text-strong: var(--white); --text-body: var(--coal-200); --text-muted: var(--coal-400); --text-subtle: var(--coal-500);
  --surface-card: var(--coal-800); --surface-hover: var(--coal-700);
  --border-subtle: var(--coal-700); --border-default: var(--coal-600); --border-strong: var(--coal-500);
  --color-primary-text: var(--orange-400);
  color: var(--text-body);
  position: sticky;
  top: 16px;
  z-index: 100;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 16px auto 0;
  display: flex;
  align-items: center;
  gap: 32px;
  /* coal-800 at 72%: one stop above the page, like every other surface, and
     translucent so the backdrop's bloom carries through the pill. */
  background: rgba(38, 35, 32, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  /* Transparent rather than none, so the pill keeps its size: a coal-700 rule
     read as a hard dark edge under the translucent fill. */
  border: 1px solid transparent;
  border-radius: var(--radius-pill, 999px);
  padding: 9px 10px 9px 22px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.sr-nav.is-scrolled { transform: translateY(-8px); }
@media (prefers-reduced-motion: reduce) { .sr-nav { transition: none; } }

/* wordmark - the /branding lockup's word (branding.css's .bk-lockup) at 28px,
   without the mark. Nudged up 3px to sit optically centred in the pill. */
.sr-brand { display: inline-flex; align-items: center; gap: 9.5px; text-decoration: none; flex-shrink: 0; }
.sr-brand:hover { text-decoration: none; }
.sr-brand .word {
  font-family: var(--font-logo);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.03em;
  color: rgba(255, 250, 244, 0.86);
  line-height: 1;
  transform: translateY(-3px);
}
.sr-brand .word .dot,
.sr-brand .word .ai { color: var(--color-primary); }

/* links */
.sr-links {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0 4px 0 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
/* Links and Log in sit 1.5px high, optically centred against the wordmark. */
.sr-links a {
  position: relative;
  top: -1.5px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: var(--weight-medium);
  color: var(--text-body);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color var(--duration-fast, 0.12s) ease;
}
.sr-links a:hover { color: var(--text-strong); text-decoration: none; }
/* Current page, set by the partial from request.resolver_match.url_name */
.sr-links a.is-active { color: var(--text-strong); }

/* actions */
.sr-actions {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  gap: 10px;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.sr-login {
  position: relative;
  top: -1.5px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  padding: 8px 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast, 0.12s) ease;
}
.sr-login:hover { color: var(--text-strong); text-decoration: none; }
.sr-signup {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: var(--weight-semibold);
  color: var(--text-on-brand);
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: 9.5px 18px 12.5px;
  border-radius: var(--radius-pill, 999px);
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  box-shadow: var(--shadow-brand, 0 6px 18px rgba(184, 103, 74, 0.34));
  transition: transform var(--duration-fast, 0.12s) ease, background var(--duration-fast, 0.12s) ease, box-shadow var(--duration-fast, 0.12s) ease;
}
.sr-signup:hover {
  background: var(--color-primary-hover);
  color: var(--text-on-brand);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(184, 103, 74, 0.42);
}
.sr-signup:active { transform: none; }

/* Phone: the pill is width:fit-content over nowrap children, so anything that
   does not fit runs off the screen edge rather than wrapping. Room is bought
   back by dropping the nav links, the language picker and the theme toggle
   (the toggle's own rule is at the foot of this file), and tightening the
   gaps and padding. */
@media (max-width: 760px) {
  .sr-links { display: none; }
  .sr-nav {
    gap: 14px;
    padding: 8px 8px 8px 16px;
    max-width: calc(100% - 20px);
  }
  .sr-brand .word { font-size: 22px; }
}

/* Sub-360 phones (Fold outer screen, iPhone SE 1). */
@media (max-width: 360px) {
  .sr-nav { gap: 10px; padding-left: 12px; }
  .sr-signup { padding: 8px 14px 10px; }
}

/* ---------- Logged-in user dropdown ---------- */
.sr-user { position: relative; }
.sr-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px 5px 5px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-card);
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sr-user-btn:hover, .sr-user-btn.is-open { background: var(--surface-hover); }
.sr-av {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--gradient-signature, linear-gradient(150deg,#B8674A,#CF8467));
  color: var(--text-on-brand);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
}
.sr-av--lg { width: 40px; height: 40px; font-size: 16px; }
.sr-user-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; max-width: 160px; }
.sr-user-name {
  font-size: 13.5px; font-weight: 600; color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px;
}
.sr-user-plan {
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 0.08em;
  color: var(--color-primary-text);
  margin-top: 1px;
}
.sr-user-caret { display: inline-flex; color: var(--text-muted); }
.sr-user-caret svg { width: 15px; height: 15px; transition: transform 0.18s ease; }
.sr-user-btn.is-open .sr-user-caret svg { transform: rotate(180deg); }

.sr-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 244px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  box-shadow: var(--shadow-lg, 0 18px 50px rgba(0,0,0,0.45));
  padding: 8px;
  z-index: 1000;
  animation: sr-menu-in 140ms ease;
}
/* The pill is dark in both themes, but its dropdowns follow the theme: in the
   light theme they take the light tokens back from .sr-nav's dark ones. */
:root[data-theme="light"] .sr-menu,
:root[data-theme="light"] .sr-lang-menu {
  --text-strong: var(--coal-950); --text-body: var(--coal-700); --text-muted: var(--coal-500); --text-subtle: var(--coal-400);
  --surface-card: var(--white); --surface-hover: var(--coal-100);
  --border-subtle: #E7E3DA; --border-default: var(--coal-200); --border-strong: var(--coal-300);
  --color-primary-text: var(--orange-700);
}
@keyframes sr-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sr-menu-head { display: flex; align-items: center; gap: 11px; padding: 8px 10px 10px; }
.sr-menu-id { display: flex; flex-direction: column; min-width: 0; }
.sr-menu-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-menu-email { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-menu-sep { height: 1px; background: var(--border-subtle); margin: 4px 0; }
.sr-menu-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 10px;
  border-radius: 10px;
  color: var(--text-body);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.sr-menu-item:hover { background: var(--surface-hover); color: var(--text-strong); text-decoration: none; }
.sr-menu-ic { display: inline-flex; color: var(--text-muted); }
.sr-menu-ic svg { width: 18px; height: 18px; }
.sr-menu-item:hover .sr-menu-ic { color: var(--text-body); }
/* Stands in for a nav link the phone layout drops - hidden again as soon as
   .sr-links is back. Placed after .sr-menu-item's own display on purpose: a
   media query adds no specificity, so source order is what decides this. */
.sr-menu-item--mobile { display: none; }
@media (max-width: 760px) {
  .sr-menu-item--mobile { display: flex; }
}
.sr-menu-badge {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--status-success, #4ea67a);
  background: var(--status-success-soft, rgba(78,166,122,0.12));
  border-radius: var(--radius-pill, 999px);
  padding: 2px 9px;
}
/* Out of credits - same pill, flipped to the danger palette so it still
   reads as a real balance, not an error state hiding a real number. */
.sr-menu-badge--empty {
  color: var(--status-danger, #d9534f);
  background: var(--status-danger-soft, rgba(217,83,79,0.12));
}
.sr-menu-item--danger { color: var(--status-danger, #d9534f); }
.sr-menu-item--danger .sr-menu-ic { color: var(--status-danger, #d9534f); }
.sr-menu-item--danger:hover { background: rgba(217,83,79,0.10); color: var(--status-danger, #d9534f); }

@media (max-width: 760px) {
  .sr-user-meta { display: none; }
}

/* ---------- UI language picker ---------- */
.sr-lang { position: relative; flex: none; }
.sr-lang-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  background: var(--surface-card);
  color: var(--text-body);
  cursor: pointer;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sr-lang-btn:hover, .sr-lang-btn.is-open { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text-strong); }
.sr-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 230px;
  max-height: min(420px, 70vh);
  overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  box-shadow: var(--shadow-lg, 0 18px 50px rgba(0,0,0,0.45));
  padding: 6px;
  z-index: 1000;
  animation: sr-menu-in 140ms ease;
}
.sr-lang-menu .lang-dd-item { text-decoration: none; }
.sr-lang-menu .lang-dd-item[hidden] { display: none; }

/* ---------- Light/dark theme toggle ---------- */
.sr-theme-toggle {
  width: 38px;
  height: 38px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  background: var(--surface-card);
  color: var(--text-body);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sr-theme-toggle:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text-strong); }
.sr-theme-toggle svg { width: 19px; height: 19px; display: block; }
.sr-theme-toggle .icon-sun { display: none; }
[data-theme="light"] .sr-theme-toggle .icon-moon { display: none; }
[data-theme="light"] .sr-theme-toggle .icon-sun { display: block; }

/* Dropped, with the language picker, below the nav's 760px collapse point.
   Light is the default and both choices are kept in per-browser cookies, so
   a phone that only ever sees the collapsed bar is on the intended theme and
   the language its Accept-Language picked anyway.

   At the foot of the file on purpose: a media query adds no specificity, so
   this has to come after .sr-theme-toggle's own display to win. */
@media (max-width: 760px) {
  .sr-lang,
  .sr-theme-toggle { display: none; }
}