/* Shared design system for EVERY getvisitor.info surface: the marketing
   page (app/views/index.html.erb), legal pages (privacy.html,
   terms.html), and the portal (portal.html -> login.tpl.html /
   dashboard.tpl.html). Tokens, header, footer, nav, mobile menu, brand
   mark, theme toggle, and primary/icon buttons live here ONCE.

   This replaces three previously-independent copies of the same chrome
   (index.html.erb's inline <style>, privacy.html/terms.html's own
   inline copy of that same block, and theme.css's separate older token
   set) that had already drifted from each other (mismatched theme-
   toggle icon direction, different color values) before being unified
   here. Page-specific content (hero, pricing cards, dashboard usage
   stats, login form, legal prose) stays local to each page/template --
   only what was ACTUALLY duplicated verbatim across surfaces moved here. */

:root {
  --bg: #0F172A;
  --bg-raised: #1E293B;
  --bg-card: #0F172A;
  --border: #334155;
  --border-hover: #475569;
  --text: #F8FAFC;
  --text-dim: #CBD5E1;
  --text-faint: #94A3B8;
  --accent: #059669;
  --accent-hover: #047857;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(5, 150, 105, 0.12);
  --logo-get: #5dcaa5;
  --logo-visitor: #eeedfe;
  --logo-dot: #f0997b;
  --logo-info: #f0997b;
  --ok: #34D399;
  --warn: #ffb454;
  --crit: #ff6b7a;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
}

body[data-theme="light"] {
  --bg: #FAF9F5;
  --bg-raised: #FFFFFF;
  --bg-card: #FFFFFF;
  --border: #E8E3D3;
  --border-hover: #D9D2BA;
  --text: #141413;
  --text-dim: #3D3929;
  --text-faint: #6B6558;
  --accent: #059669;
  --accent-hover: #047857;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(5, 150, 105, 0.08);
  --logo-get: #1d9e75;
  --logo-visitor: #26215c;
  --logo-dot: #d85a30;
  --logo-info: #d85a30;
  --ok: #0a9f5f;
  --warn: #b8710a;
  --crit: #d43f4f;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  width: 100%;
  font-family: var(--font-display);
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  -webkit-font-smoothing: antialiased;
}

/* Sketch's own layout wrapper divs (#content-body in portal.html,
   #portal-page in layouts/default.tpl.html) sit between <body> and
   <header>/<main>, unstyled -- as plain flex-item divs with no width of
   their own, they shrink-wrap to their content's intrinsic width
   instead of stretching to body's full width, which then caps EVERY
   child inside them (header included) to that narrower width
   regardless of header's own `width: 100%; max-width: 1200px`. This is
   the actual root cause of the header-narrower-than-viewport bug --
   not a rule fighting .header directly, but its ancestor chain never
   reaching full width in the first place. */
#content-body, #portal-page, #admin-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

a { color: inherit; }

/* ---- HEADER ---- */
.header {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #1E293B;
  position: sticky;
  top: 0;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(8px);
  z-index: 100;
}
body[data-theme="light"] .header {
  border-bottom: 1px solid #E8E3D3;
  background: rgba(250, 249, 245, 0.92);
}

.brand-logo {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
}

.brand-title {
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
body[data-theme="light"] .brand-title { color: #141413; }

.brand-mark { flex-shrink: 0; align-self: center; margin-right: 10px; position: relative; top: 3px; }
.brand-mark .icon-dark { display: none; }
.brand-mark .icon-light { display: block; }
body[data-theme="light"] .brand-mark .icon-dark { display: block; }
body[data-theme="light"] .brand-mark .icon-light { display: none; }

.brand-title span.get, .seg-get { color: var(--logo-get); }
.brand-title span.visitor, .seg-visitor { color: var(--logo-visitor); }
.brand-title span.info, .seg-info { color: var(--logo-info); font-size: 0.7em; }
.brand-title span.dot, .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--logo-dot);
  align-self: center;
  margin: 0 3px;
}

.brand-subtitle {
  font-size: 0.72rem;
  color: #94A3B8;
  font-weight: 500;
}
body[data-theme="light"] .brand-subtitle { color: #6B6558; }
.brand-subtitle span { color: #10B981; font-weight: 600; }

.nav-links { display: flex; align-items: center; gap: 1.5rem; }

.nav-link {
  color: #94A3B8;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.15s;
}
.nav-link:hover { color: #FFFFFF; }
body[data-theme="light"] .nav-link { color: #6B6558; }
body[data-theme="light"] .nav-link:hover { color: #141413; }

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  border: none;
  text-decoration: none;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--font-display);
}
.btn-primary:hover { background: var(--accent-hover); }

.icon-btn {
  background: #1E293B;
  border: 1px solid #334155;
  color: #F8FAFC;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}
.icon-btn:hover {
  background: #334155;
  border-color: #475569;
}
body[data-theme="light"] .icon-btn {
  background: #F1EEE5;
  border: 1px solid #E8E3D3;
  color: #141413;
}
body[data-theme="light"] .icon-btn:hover {
  background: #E8E3D3;
  border-color: #D9D2BA;
}

/* Icons show what clicking WILL DO NEXT, not the current theme: dark
   (default) shows the sun (next click goes light), light shows the moon
   (next click goes dark). */
.icon-btn #theme-icon-moon, .icon-btn .icon-moon { display: none; }
body[data-theme="light"] .icon-btn #theme-icon-moon,
body[data-theme="light"] .icon-btn .icon-moon { display: inline; }
body[data-theme="light"] .icon-btn #theme-icon-sun,
body[data-theme="light"] .icon-btn .icon-sun { display: none; }

.hamburger-btn {
  display: none;
  background: transparent;
  border: 1px solid #334155;
  color: #F8FAFC;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
body[data-theme="light"] .hamburger-btn { border-color: #E8E3D3; color: #141413; }

.mobile-menu {
  display: none;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem 1rem 1rem;
  gap: 0.25rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu-link {
  color: #94A3B8;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.75rem 0.5rem;
  border-radius: 8px;
}
.mobile-menu-link:hover { background: #1E293B; color: #FFFFFF; }
body[data-theme="light"] .mobile-menu-link { color: #6B6558; }
body[data-theme="light"] .mobile-menu-link:hover { color: #141413; background: #F1EEE5; }
/* Theme item names the mode it switches TO: sun + "Light mode" in dark,
   moon + "Dark mode" in light. */
.mobile-theme-link { display: flex; align-items: center; gap: 0.6rem; }
.mobile-theme-link .to-dark { display: none; }
body[data-theme="light"] .mobile-theme-link .to-light { display: none; }
body[data-theme="light"] .mobile-theme-link .to-dark { display: inline; }

@media (max-width: 700px) {
  .header { flex-wrap: wrap; padding: 1rem; }
  .brand-title { font-size: 24px; }
  .nav-links { gap: 0.5rem; }
  .nav-links .nav-link { display: none; }
  .brand-subtitle { display: none; }
  .hamburger-btn { display: inline-flex; }
  .btn-primary { padding: 0.55rem 0.9rem; font-size: 0.8rem; }
}

/* ---- FOOTER ---- */
.footer {
  width: 100%;
  background: #0F172A;
  color: #94A3B8;
  padding: 2.5rem 1.5rem;
  border-top: 1px solid #1E293B;
  font-size: 0.8rem;
}
body[data-theme="light"] .footer {
  background: #FAF9F5;
  color: #6B6558;
  border-top: 1px solid #E8E3D3;
}

.footer-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

/* ---- PLAN CARD (Pricing section on index.html.erb, and the
   dashboard's Manage subscription / Upgrade card) ---- */
.toggle-pill-container {
  display: inline-flex;
  background: #1E293B;
  padding: 0.3rem;
  border-radius: 10px;
  border: 1px solid #334155;
}

.toggle-pill-btn {
  padding: 0.45rem 1.15rem;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: #94A3B8;
  transition: all 0.15s ease;
  font-family: 'Inter', sans-serif;
}

.toggle-pill-btn.active {
  background: #0F172A;
  color: #FFFFFF;
}

.billing-save-pill {
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
  padding: 0.1rem 0.4rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  margin-left: 0.25rem;
}

.plan-card {
  border-radius: 16px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  position: relative;
  gap: 1.5rem;
  /* Same shrink-guard as .lookup-stat-box/.category-card elsewhere --
     a grid/flex item's default min-width:auto refuses to shrink below
     its content's natural width, which is what pushed this card (and
     the absolutely-positioned .cors-top-badge pinned to its edge) past
     the viewport on narrow phones. */
  min-width: 0;
}

.plan-card-free {
  background: #0F172A;
  border: 1px solid #334155;
}

.plan-card-pro {
  background-color: #16233A;
  border: 1px solid #334155;
}

.cors-top-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: #059669;
  color: #FFFFFF;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.35rem 0.85rem;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 15px;
  letter-spacing: 0.05em;
}

.plan-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.725rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  margin-bottom: 0.85rem;
  width: fit-content;
}

.tag-free { background: rgba(148, 163, 184, 0.15); color: #94A3B8; }
.tag-pro { background: #059669; color: #FFFFFF; }

.price-display {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.price-num,
.total-price-num {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}

.total-price-num {
  color: #34D399;
}

.price-period,
.total-price-period {
  font-size: 0.875rem;
  color: #94A3B8;
}

/* Tax note sits inline beside the "/ mo" on the price row -- never on its
   own line (keeps the Pro card the same height as the Free card, which
   has no tax line). Pushed a little right of the period. */
.price-tax-note {
  font-size: 0.8rem;
  font-weight: 600;
  color: #94A3B8;
  margin-left: 0.4rem;
  white-space: nowrap;
}
body[data-theme="light"] .price-tax-note { color: #64748B; }

.unit-rate-label {
  font-size: 0.7rem;
  font-family: 'JetBrains Mono', monospace;
  color: #34D399;
  display: block;
  margin-top: -0.25rem;
}

.plan-blurb {
  font-size: 0.825rem;
  color: #94A3B8;
  margin-bottom: 1rem;
}

.lookup-stats-row {
  display: grid;
  /* minmax(0, 1fr), not bare 1fr -- the box's own min-width:0 below only
     matters once its TRACK can actually shrink; a bare 1fr track still
     refuses to go narrower than its content's natural width regardless
     of what the item inside it says. This was the real remaining cause
     of the number text crowding/touching the box edges (confirmed live)
     -- same class of bug as .pricing-grid/.pillars-wrapper, just one
     level up from where min-width:0 was already added. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.lookup-stat-box {
  background: #1E293B;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  /* Grid items default to min-width:auto, which stops the 1fr track from
     shrinking below its content's intrinsic (unwrapped) width -- a long
     formatted number (e.g. "9,000,000", no break points, monospace) then
     forces this box wider than its actual half of .lookup-stats-row on a
     narrow viewport, pushing the whole plan-card past its own bounds. */
  min-width: 0;
}

.lookup-stat-number {
  font-family: 'JetBrains Mono', monospace;
  /* Numbers are abbreviated now (9,000,000 -> "9M", see
     PreviewHelpers#abbrev_count / abbrevCount() in both JS files) --
     "9M"/"640K" are short enough that a fixed size always fits, no
     viewport/container-relative sizing needed. This replaces an earlier
     clamp(...vw...) attempt that guessed at viewport-relative sizing for
     the FULL number and still didn't fit on narrow phones -- abbreviating
     the text removed the need for that guesswork entirely. */
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  white-space: nowrap;
}

.lookup-stat-number-highlight {
  color: #34D399;
}

.lookup-stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #CBD5E1;
}

.checklist-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checklist-item {
  font-size: 0.85rem;
  color: #CBD5E1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.checklist-item-restricted {
  color: #94A3B8;
}

.check-svg {
  width: 16px;
  height: 16px;
  stroke: #94A3B8;
  stroke-width: 2.5;
  fill: none;
  flex-shrink: 0;
}

.restrict-svg {
  width: 16px;
  height: 16px;
  stroke: #64748B;
  stroke-width: 2.5;
  fill: none;
  flex-shrink: 0;
}

.price-stack-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 0.5rem 0;
}

.stack-stepper-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.stack-stepper {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.step-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #1E293B;
  border: 1px solid #334155;
  color: #FFFFFF;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.step-btn:hover {
  background: #334155;
}

.stack-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.35rem;
  font-weight: 700;
  color: #34D399;
  min-width: 28px;
  text-align: center;
}

.stack-suffix {
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  color: #94A3B8;
}

/* .price-stack-row (price + unit stepper) has no shrink of its own --
   at .plan-card's narrow mobile width, the fixed 2.75rem price number
   plus the fixed 32px stepper buttons didn't fit side by side and wrapped
   onto two rows, with the stepper left stranded on its own line
   (space-between has nothing to space once only one item remains on a
   line) -- confirmed live. Shrinking both here keeps them on one row
   instead, per the "shrink to fit, never wrap" decision. */
@media (max-width: 420px) {
  .price-stack-row .total-price-num,
  .price-stack-row .price-num {
    font-size: 2.1rem;
  }
  .step-btn {
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }
  .stack-stepper {
    gap: 0.45rem;
  }
}

.checklist-item-highlight span strong {
  color: #34D399;
}

body[data-theme="light"] .toggle-pill-container {
  background: #F1EEE5;
  border: 1px solid #E8E3D3;
}
body[data-theme="light"] .toggle-pill-btn {
  color: #6B6558;
}
body[data-theme="light"] .toggle-pill-btn.active {
  background: #FFFFFF;
  color: #141413;
}
body[data-theme="light"] .plan-card-free {
  background: #FFFFFF;
  border: 1px solid #E8E3D3;
}
body[data-theme="light"] .plan-card-pro {
  background-color: #F8F3E5;
  border: 1px solid #E8E3D3;
}
body[data-theme="light"] .tag-free {
  background: rgba(107, 101, 88, 0.12);
  color: #6B6558;
}
body[data-theme="light"] .price-num {
  color: #141413;
}
body[data-theme="light"] .total-price-num {
  color: #047857;
}
body[data-theme="light"] .unit-rate-label {
  color: #047857;
}
body[data-theme="light"] .stack-value {
  color: #047857;
}
body[data-theme="light"] .checklist-item-highlight span strong {
  color: #047857;
}
body[data-theme="light"] .billing-save-pill {
  background: rgba(5, 150, 105, 0.15);
  color: #047857;
}
body[data-theme="light"] .price-period,
body[data-theme="light"] .total-price-period {
  color: #6B6558;
}
body[data-theme="light"] .plan-blurb {
  color: #6B6558;
}
body[data-theme="light"] .step-btn {
  background: #FFFFFF;
  border: 1px solid #E8E3D3;
  color: #141413;
}
body[data-theme="light"] .step-btn:hover {
  background: #E8E3D3;
}
body[data-theme="light"] .stack-suffix {
  color: #6B6558;
}
body[data-theme="light"] .lookup-stat-box {
  background: #E4D9BE;
  border: 1px solid #D2C4A0;
}
body[data-theme="light"] .lookup-stat-number {
  color: #141413;
}
body[data-theme="light"] .lookup-stat-number-highlight {
  color: #047857;
}
body[data-theme="light"] .lookup-stat-label {
  color: #5A5240;
}
body[data-theme="light"] .checklist-item {
  color: #3D3929;
}
body[data-theme="light"] .checklist-item-restricted {
  color: #8A8374;
}
body[data-theme="light"] .check-svg {
  stroke: #6B6558;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
}