/* ===========================================================================
   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.
   =========================================================================== */
.sr-nav {
  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);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill, 999px);
  padding: 9px 10px 9px 20px;
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.45));
}

/* wordmark */
.sr-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; }
.sr-brand:hover { text-decoration: none; }
.sr-brand .word {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  line-height: 1;
}
.sr-brand .word .dot { color: var(--color-accent); }
.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-strong, not --border-subtle: the pill is translucent coal-800 over
     the page, and a coal-700 rule is all but invisible against that. */
  border-left: 1px solid var(--border-strong);
}
.sr-links a {
  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 var(--border-strong);
}
.sr-login {
  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: 8px 8px 8px 18px;
  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(208, 126, 69, 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(208, 126, 69, 0.42);
}
.sr-signup:active { transform: none; }
.sr-signup .arw {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(20, 18, 15, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--duration-fast, 0.12s) ease, background var(--duration-fast, 0.12s) ease;
}
.sr-signup:hover .arw { transform: translateX(2px); background: var(--gold-400); }
.sr-signup .arw svg { width: 13px; height: 13px; color: var(--coal-950); }

/* 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 and tightening the gaps and padding; upright
   phones drop the theme toggle too, at the foot of this file. */
@media (max-width: 760px) {
  .sr-links { display: none; }
  .sr-actions { border-left: 0; padding-left: 0; }
  .sr-nav {
    gap: 14px;
    padding: 8px 8px 8px 16px;
    max-width: calc(100% - 20px);
  }
  .sr-brand { gap: 7px; }
  .sr-signup { padding: 7px 7px 7px 16px; }
}

/* Sub-360 phones (Fold outer screen, iPhone SE 1): the arrow disc is the only
   part of the bar carrying no information, so it goes before the wordmark or
   the button label would have to shrink. */
@media (max-width: 360px) {
  .sr-nav { gap: 10px; padding-left: 12px; }
  .sr-signup { padding: 7px 14px; }
  .sr-signup .arw { display: none; }
}

/* ---------- 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 { border-color: var(--text-body); background: var(--surface-hover); }
.sr-av {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--gradient-signature, linear-gradient(150deg,#D07E45,#F7C955));
  color: #fff;
  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);
  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;
}
@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; }
}

/* ---------- 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 only where the pill genuinely has no room for it - a phone held
   upright, 430px at the widest. The bar needs ~385px with the toggle, so
   anything from 520px up (the same phone turned sideways, a tablet, a narrow
   desktop window) keeps it. Light is the default and the choice is kept in a
   per-browser cookie, so a phone that only ever sees the portrait bar is on
   the intended theme 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: 519px) {
  .sr-theme-toggle { display: none; }
}