/*
 * The product shell: the Bootstrap-era pages (dashboard, sign-in) on the same tokens, type and
 * controls as the new pages (tokens.css). Loaded after theme.css and Bootstrap so it wins
 * without editing either; as a page moves to the new components, its rules here can go.
 *
 * Three rules this file exists to keep:
 *   - One typeface in the product: Geist. Poppins stays on the marketing pages only.
 *   - One primary colour for the next thing to do: green, with deep-green text (6.2:1).
 *     Ordinary buttons are steel blue, a shade deeper than before so white text reads (4.8:1).
 *   - The page you are on is drawn by the server (header.ejs), never by a script after load.
 */
:root {
  --sidebar: #336688;
  --sidebar-ink: #e8f1f6;
  --sidebar-hover: rgba(255, 255, 255, .08);
  --sidebar-active: rgba(255, 255, 255, .16);
  --btn: #3f7896;
  --btn-hover: #356882;
  --link: #3f7896;
}

body, button, input, select, textarea, .btn, .form-control, .form-select, .dropdown-menu, .modal, .tooltip, .popover {
  font-family: var(--f-sans) !important;
}
body { color: var(--ink) !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, .h3 { color: var(--ink); letter-spacing: -.015em; }
.page-title { font-size: 28px !important; font-weight: 700 !important; letter-spacing: -.02em; color: var(--ink) !important; }

a { color: var(--link) !important; }
a:hover { color: var(--ink) !important; }
:focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 2px; }

/* Buttons: one ordinary style, one primary, and an immediate pressed state. */
.btn, .btn-warning, .btn-primary, .btn-info, .btn-secondary {
  background: var(--btn) !important; border-color: var(--btn) !important; color: #fff !important;
  border-radius: var(--r-sm) !important; font-weight: 600 !important;
  transition: background var(--t-fast), transform var(--t-fast);
}
.btn:hover, .btn-warning:hover, .btn-primary:hover, .btn-info:hover { background: var(--btn-hover) !important; border-color: var(--btn-hover) !important; color: #fff !important; }
.btn:active { transform: translateY(1px); }
.btn.btn-success, .btn.btn-go {
  background: var(--live) !important; border-color: var(--live) !important; color: var(--on-live) !important;
}
.btn.btn-success:hover, .btn.btn-go:hover { background: var(--live-hover) !important; border-color: var(--live-hover) !important; color: var(--on-live) !important; }
.btn.btn-quiet { background: var(--surface) !important; border-color: var(--line-strong) !important; color: var(--ink) !important; }
.btn.btn-quiet:hover { background: var(--surface-2) !important; }
.btn[disabled], .btn.disabled { opacity: .55; }

/* Sidebar: readable at rest, clearly marked where you are, nothing moves on hover. */
#sidebar { background-color: var(--sidebar) !important; }
.app-sidebar { view-transition-name: sidebar; }
.navbar.bg-dark { background-color: var(--sidebar) !important; view-transition-name: topbar; }
a.wordmark-app, a.wordmark-app:hover { font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: #fff !important; margin-left: 12px; text-decoration: none; }
li.nav-item a.nav-link { color: var(--sidebar-ink) !important; border-radius: var(--r-sm); padding: 9px 12px; margin: 1px 0; transition: background var(--t-fast); }
li.nav-item a.nav-link:hover, li.nav-item a:hover { font-size: inherit !important; font-weight: inherit !important; background: var(--sidebar-hover); color: #fff !important; }
li.nav-item a.nav-link.active, .nav-pills .nav-link.active, li.nav-item a.nav-link.is-going {
  background: var(--sidebar-active) !important; color: #fff !important; font-weight: 600;
  box-shadow: inset 3px 0 0 #fff;
}
.nav-pills .nav-link.active .primary-icons, li.nav-item a:hover .primary-icons, li.nav-item a.nav-link.active .primary-icons { color: #fff !important; }

/* The new pieces inside the old pages. */
.voice-summary { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; display: grid; gap: 6px; max-width: 640px; }
.voice-summary-identity { color: var(--ink-2); }
.setup-next { border: 1px solid var(--line); border-left: 4px solid var(--live); border-radius: var(--r-md); padding: 16px 18px; margin: 18px 0 6px;
  display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--surface); }
.setup-next b { display: block; font-size: 16px; }
.setup-next span { color: var(--ink-2); font-size: 14.5px; }
details.faq { margin: 48px 24px 24px; border-top: 1px solid var(--line); padding-top: 18px; }
details.faq > summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; }
details.faq > summary::before { content: "+"; display: inline-block; width: 1.2em; color: var(--muted); }
details.faq[open] > summary::before { content: "–"; }

/* Sign-in pages share the product's type and controls. */
.auth-card { width: 100%; max-width: 400px; margin: 0 auto; padding: 32px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); display: grid; gap: 16px; text-align: left; }
.auth-card .wordmark-auth { font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: var(--ink) !important; justify-self: start; }
.auth-card h1 { font-size: 24px; font-weight: 700; margin: 0; }
.auth-card .hint { margin: 0; }
.auth-google { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink) !important; font-weight: 600; text-decoration: none; }
.auth-google:hover { background: var(--surface-2); }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-card .form-control { min-height: 46px; border-color: var(--line-strong); border-radius: var(--r-md); }
.auth-card .btn { width: 100%; min-height: 46px; }

/* Navigation feels immediate: the next page fades in under a still sidebar. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .btn, li.nav-item a.nav-link { transition: none; }
}