/* ============================================================
 *  Karl Finance AI — Dark / Glassy / Herbal-Lime
 *  See styling.md for the design system this is built from.
 * ============================================================ */

:root {
  /* Brand */
  --brand-forest: #1F4D3A;
  --forest-deep: #0E2820;
  --forest-abyss: #061812;
  --herbal-lime: #8DC63F;
  --herbal-glow: rgba(141, 198, 63, .55);
  --alpine-white: #F7F9F8;

  /* Glass surfaces */
  --glass-bg: rgba(255, 255, 255, .04);
  --glass-bg-strong: rgba(255, 255, 255, .07);
  --glass-border: rgba(255, 255, 255, .09);
  --glass-border-bright: rgba(141, 198, 63, .35);

  /* Text */
  --text: rgba(247, 249, 248, .92);
  --text-dim: rgba(247, 249, 248, .62);
  --text-faint: rgba(247, 249, 248, .42);

  /* Semantic */
  --primary: var(--herbal-lime);
  --bg: var(--forest-abyss);
  --card-bg: var(--glass-bg);
  --border: var(--glass-border);
  --success: var(--herbal-lime);
  --danger: #ff6b5e;
  --warning: #f4b860;

  /* Typography */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Geometry */
  --radius: 10px;
  --shadow: 0 4px 16px rgba(0, 0, 0, .25), 0 1px 2px rgba(0, 0, 0, .15);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, .35), 0 0 24px -6px var(--herbal-glow);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--forest-abyss);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  position: relative;
  overflow-x: hidden;
}

/* ── Cosmic background layers ──────────────────────── */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(141, 198, 63, .14), transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 30%, rgba(47, 107, 79, .3), transparent 60%),
    radial-gradient(ellipse 70% 60% at 10% 70%, rgba(31, 77, 58, .4), transparent 60%),
    linear-gradient(180deg, var(--forest-abyss) 0%, #081e16 50%, var(--forest-abyss) 100%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .78 0 0 0 0 .25 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Typography ──────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: .005em;
  color: var(--text);
  margin: 0;
}
h1 { font-size: 2.25rem; line-height: 1.15; }
h2 { font-size: 1.5rem; line-height: 1.25; }
h3 { font-size: 1.125rem; line-height: 1.3; }

h1 em, h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--herbal-lime) 0%, #c5e890 50%, #A8C7B5 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

a { color: var(--text); text-decoration: none; transition: color .15s; }
a:hover { color: var(--herbal-lime); }

.mono { font-family: var(--font-mono); font-weight: 400; font-variant-numeric: tabular-nums; }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.small { font-size: .85rem; }
.positive { color: var(--herbal-lime); }
.negative { color: #ff8a80; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--herbal-lime);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .5rem;
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--herbal-lime);
  box-shadow: 0 0 10px var(--herbal-glow);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}

/* ── Glass primitive ─────────────────────────────── */

.glass {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
  overflow: hidden;
}

.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, .18),
    transparent 40%,
    transparent 60%,
    rgba(141, 198, 63, .12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.glass:hover {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-bright);
}

/* ── Topbar / nav ────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem 2rem;
  background: rgba(8, 30, 22, .55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--glass-border);
}

.topbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--herbal-lime), transparent);
  opacity: .35;
  pointer-events: none;
}

.brand { display: flex; align-items: center; gap: .75rem; }

.logo-k {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--herbal-lime);
  background: rgba(141, 198, 63, .1);
  border: 1px solid var(--glass-border-bright);
  border-radius: 50%;
  box-shadow: 0 0 20px -4px var(--herbal-glow), inset 0 0 12px rgba(141, 198, 63, .08);
}

.logo-xl { width: 64px; height: 64px; font-size: 2.4rem; }

.brand-name {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: .015em;
}

.nav { display: flex; gap: 1.5rem; }

.nav a {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: .35rem 0;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav a:hover { color: var(--herbal-lime); border-bottom-color: var(--herbal-lime); }

.user-area {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.user-email {
  font-family: var(--font-mono);
  color: var(--text-faint);
  font-size: .78rem;
  letter-spacing: .03em;
}

/* ── Page wrapper ────────────────────────────────── */

.page {
  position: relative;
  z-index: 1;
  max-width: 2400px;
  margin: 0 auto;
  padding: 2rem 2.5rem;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.page-head h1 { margin: 0; }

.footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2.5rem 2rem;
  margin-top: 4rem;
  border-top: 1px solid var(--glass-border);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--text-faint);
}

/* ── Panels ──────────────────────────────────────── */

.panel {
  padding: 1.5rem;
  margin-bottom: 1.75rem;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* ── Stats grid ──────────────────────────────────── */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat {
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.stat-value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.65rem;
  letter-spacing: .01em;
  color: var(--alpine-white);
}

/* ── Status pills ────────────────────────────────── */

.status-row {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 2rem;
}

.status-pill {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .45rem .85rem;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.pill-live {
  color: var(--herbal-lime);
  background: rgba(141, 198, 63, .12);
  border-color: rgba(141, 198, 63, .35);
  box-shadow: 0 0 16px -4px var(--herbal-glow);
}
.pill-live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--herbal-lime);
  box-shadow: 0 0 10px var(--herbal-glow);
  animation: pulse 1.6s ease-in-out infinite;
}

.pill-paper {
  color: var(--warning);
  background: rgba(244, 184, 96, .12);
  border-color: rgba(244, 184, 96, .3);
}
.pill-down {
  color: #ff8a80;
  background: rgba(255, 107, 94, .12);
  border-color: rgba(255, 107, 94, .3);
}
.pill-neutral {
  color: var(--text-dim);
}

/* ── Ticker ──────────────────────────────────────── */

.ticker-bar {
  overflow: hidden;
  margin-bottom: 1.75rem;
  padding: .55rem 0;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

/* Inline variant — sits next to the dashboard title on the same row.
   Flex-shrinks to whatever space the title leaves so it never overlaps. */
.ticker-bar-inline {
  margin-bottom: 0;
  padding: .35rem 0;
  flex: 1 1 0;
  min-width: 0;
  max-width: 60%;
}
.ticker-bar-inline .ticker-track {
  font-size: .75rem;
  gap: 1.75rem;
  animation-duration: 38s;
}
@media (max-width: 900px) {
  .ticker-bar-inline {
    flex: 1 1 100%;
    max-width: 100%;
    margin-top: .75rem;
  }
}

.ticker-track {
  display: inline-flex;
  gap: 2.5rem;
  white-space: nowrap;
  animation: ticker 50s linear infinite;
  padding-left: 100%;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--text-dim);
}

.ticker-item { display: inline-flex; gap: .5rem; align-items: baseline; }

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ── Tables ──────────────────────────────────────── */

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead th {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--herbal-lime);
  background: var(--glass-bg-strong);
  border-bottom: 1px solid var(--glass-border-bright);
  padding: .65rem .85rem;
  text-align: left;
}

.data-table tbody td {
  padding: .85rem .85rem;
  border-bottom: 1px solid var(--glass-border);
  font-size: .92rem;
  vertical-align: middle;
}

.data-table tbody tr {
  animation: rowFade .4s ease both;
  transition: background .15s;
}
.data-table tbody tr:hover {
  background: rgba(141, 198, 63, .05);
}

@keyframes rowFade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.row-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.inline { display: inline; }

/* ── Buttons ─────────────────────────────────────── */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1.3rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 400;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  isolation: isolate;
}

.btn-primary {
  background: var(--herbal-lime);
  color: var(--forest-abyss) !important;
  font-weight: 500;
  box-shadow: 0 0 0 1px rgba(141, 198, 63, .3),
              0 8px 28px -10px var(--herbal-glow);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(141, 198, 63, .5),
              0 12px 36px -8px var(--herbal-glow),
              0 0 24px var(--herbal-glow);
}

.btn-ghost {
  background: var(--glass-bg);
  color: var(--text) !important;
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-bright);
  color: var(--herbal-lime) !important;
}

.btn-outline {
  background: transparent;
  color: var(--text) !important;
  border: 1px solid rgba(141, 198, 63, .4);
}
.btn-outline:hover {
  border-color: var(--herbal-lime);
  box-shadow: 0 0 24px -4px var(--herbal-glow);
  color: var(--herbal-lime) !important;
}

.btn-danger {
  background: transparent;
  color: #ff8a80 !important;
  border: 1px solid rgba(255, 107, 94, .35);
}
.btn-danger:hover {
  background: rgba(255, 107, 94, .12);
  border-color: rgba(255, 107, 94, .55);
}

.btn-sm { padding: .4rem .9rem; font-size: .8rem; }
.btn-lg { padding: .9rem 1.8rem; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }

.btn .arrow { display: inline-block; transition: transform .2s; }
.btn:hover .arrow { transform: translateX(3px); }

/* ── Toggle switch ───────────────────────────────── */

.toggle {
  position: relative;
  width: 48px;
  height: 26px;
  border-radius: 26px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, .12);
  cursor: pointer;
  transition: background .25s, border-color .25s, box-shadow .25s;
  padding: 0;
}
.toggle span {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--alpine-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: left .25s, background .25s;
}
.toggle.on {
  background: var(--herbal-lime);
  border-color: var(--herbal-lime);
  box-shadow: 0 0 16px -2px var(--herbal-glow);
}
.toggle.on span {
  left: 26px;
  background: var(--forest-abyss);
}

/* ── Forms ───────────────────────────────────────── */

.form {
  padding: 2rem;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: .75rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
}

.field label {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.form-control,
.field input[type=text],
.field input[type=password],
.field input[type=number],
.field input[type=email],
.field input[type=url],
.field textarea,
.field select {
  width: 100%;
  padding: .85rem 1.1rem;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--text);
  background: rgba(8, 30, 22, .4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }

.field input:hover,
.field textarea:hover,
.field select:hover,
.form-control:hover {
  border-color: var(--glass-border-bright);
  background: rgba(8, 30, 22, .55);
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.form-control:focus {
  border-color: var(--herbal-lime);
  background: rgba(8, 30, 22, .6);
  box-shadow: 0 0 0 3px rgba(141, 198, 63, .18),
              0 0 18px -4px var(--herbal-glow),
              inset 0 1px 0 rgba(255, 255, 255, .04);
}

.field textarea {
  min-height: 4.5rem;
  resize: vertical;
}

/* Compact variant for inline forms (e.g. /learn min-days) */
.form-inline .field input[type=text],
.form-inline .field input[type=number],
.form-inline input[type=text],
.form-inline input[type=number] {
  padding: .55rem .9rem;
  font-size: .9rem;
  border-radius: 999px;
  width: auto;
  min-width: 80px;
}

/* Hide the spinner buttons on number inputs across browsers */
.field input[type=number]::-webkit-outer-spin-button,
.field input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.field input[type=number] { -moz-appearance: textfield; }

.field select,
select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238DC63F' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.2rem;
}

select.form-control option,
.field select option {
  background: var(--forest-deep);
  color: var(--text);
}

.field.checkbox {
  flex-direction: row;
  align-items: center;
  gap: .65rem;
}
.field.checkbox label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  font-family: var(--font-body);
  font-size: .92rem;
}
.field.checkbox input[type=checkbox] {
  appearance: none;
  width: 18px; height: 18px;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  background: rgba(8, 30, 22, .35);
  cursor: pointer;
  position: relative;
  transition: border-color .15s, background .15s;
}
.field.checkbox input[type=checkbox]:checked {
  background: var(--herbal-lime);
  border-color: var(--herbal-lime);
}
.field.checkbox input[type=checkbox]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--forest-abyss);
  clip-path: polygon(14% 50%, 38% 74%, 86% 22%, 76% 14%, 38% 56%, 24% 42%);
}

.form-actions {
  display: flex;
  gap: .75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.param-set {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin: .25rem 0;
  background: rgba(255, 255, 255, .02);
}
.param-set legend {
  padding: 0 .55rem;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--herbal-lime);
}

/* ── Auth shell ──────────────────────────────────── */

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  position: relative;
  z-index: 1;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  padding: 2.75rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5),
              0 0 60px -10px var(--herbal-glow);
}

.auth-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--herbal-lime), transparent);
  box-shadow: 0 0 12px var(--herbal-glow);
}

.auth-brand {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1rem;
}

.auth-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.85rem;
  letter-spacing: .005em;
  margin: .25rem 0 0;
}

.auth-tagline {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.auth-admin-link {
  text-align: center;
  margin-top: .5rem;
}
.auth-admin-link a {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.auth-admin-link a:hover { color: var(--herbal-lime); }

/* ── Alerts ──────────────────────────────────────── */

.alert {
  padding: .8rem 1rem;
  border-radius: var(--radius);
  font-size: .9rem;
}
.alert-error {
  background: rgba(255, 107, 94, .12);
  border: 1px solid rgba(255, 107, 94, .35);
  color: #ff8a80;
}

/* ── Code/pre ────────────────────────────────────── */

pre {
  background: rgba(8, 30, 22, .55);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--text);
}

code {
  font-family: var(--font-mono);
  font-size: .85em;
  padding: .1rem .35rem;
  border-radius: 4px;
  background: rgba(141, 198, 63, .08);
  color: var(--herbal-lime);
}

/* ── Brief body (AI daily brief, strategy explainer) ── */

.brief-body p,
.ai-explainer p {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 .9rem;
}
.brief-body p:last-child,
.ai-explainer p:last-child { margin-bottom: 0; }

.ai-explainer {
  padding: 1.25rem 1.5rem;
  margin-top: 1rem;
  border-left: 2px solid var(--herbal-lime);
  background: rgba(141, 198, 63, .04);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.ai-explainer-meta {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--text-faint);
  margin-top: .75rem;
}

/* ── Dashboard 3-column grid ───────────────────────── */

.dashboard-grid {
  display: grid;
  /* Default (>=1280px wide): network panel gets the lion's share so the
     graph has room to breathe. Approx 18% / 60% / 22% on a 1600px page. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 3.4fr) minmax(0, 1.2fr);
  gap: 1rem;
  margin-bottom: 1.75rem;
  align-items: start;
}

/* Medium: drop the right column under, network keeps emphasis */
@media (max-width: 1280px) {
  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  }
  .dashboard-grid > section:nth-child(3) {
    grid-column: 1 / -1;
  }
}

/* Small: stack everything, but reorder so the network is on top */
@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-grid > section:nth-child(3) {
    grid-column: auto;
  }
  .dashboard-grid > section:nth-child(2) { order: 1; } /* network first */
  .dashboard-grid > section:nth-child(1) { order: 2; } /* portfolio next */
  .dashboard-grid > section:nth-child(3) { order: 3; } /* health last */
}

.dashboard-grid .panel { margin-bottom: 0; }

/* Tighter table for the narrower portfolio column */
.data-table-compact thead th { padding: .45rem .55rem; font-size: .65rem; }
.data-table-compact tbody td { padding: .55rem .55rem; font-size: .85rem; }

/* System health vertical list */
.health-list {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--glass-border);
}
.health-row:last-child { border-bottom: 0; padding-bottom: 0; }
.health-label {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Collapsible panel via <details> */
.panel-collapse {
  list-style: none;
  cursor: default;
}
.panel-collapse > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  margin-bottom: 0;
  position: relative;
  padding-right: 1.5rem;
}
.panel-collapse > summary::-webkit-details-marker { display: none; }
.panel-collapse > summary::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--text-dim);
  border-bottom: 2px solid var(--text-dim);
  transform: translateY(-75%) rotate(45deg);
  transition: transform .25s ease;
}
.panel-collapse[open] > summary::after {
  transform: translateY(-25%) rotate(225deg);
}
.panel-collapse[open] > summary { margin-bottom: 1rem; }
.panel-collapse[open] .panel-collapse-hint { display: none; }
.panel-collapse-body {
  animation: panelOpen .25s ease;
}
@keyframes panelOpen {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.panel-collapse > summary:hover .panel-collapse-hint { color: var(--herbal-lime); }
.panel-collapse > summary:hover::after { border-color: var(--herbal-lime); }

/* ── Public landing page ──────────────────────────── */

.landing {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

.landing-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  margin-bottom: 3.5rem;
  background: rgba(8, 30, 22, .55);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
}

.landing-hero {
  text-align: center;
  padding: 3.5rem 1rem 4rem;
}
.landing-hero .eyebrow { justify-content: center; }
.landing-hero h1 {
  font-size: 4rem;
  line-height: 1.05;
  font-weight: 300;
  margin: 1rem auto 1.5rem;
  max-width: 18ch;
}
.landing-lede {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 56ch;
  margin: 0 auto 1.5rem;
}
.landing-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}

.landing-section {
  margin-bottom: 1.75rem;
  padding: 2.25rem 2.25rem 2rem;
}
.landing-section h2 {
  font-size: 2rem;
  margin-bottom: 1.25rem;
  margin-top: .25rem;
}

.landing-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.landing-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
}
.landing-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--herbal-lime);
  box-shadow: 0 0 8px var(--herbal-glow);
}

.landing-flow {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.landing-flow li {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  font-size: 1rem;
  line-height: 1.55;
}
.flow-step {
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--herbal-lime);
  flex: 0 0 2rem;
  letter-spacing: .08em;
}

.landing-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.landing-modes h3 {
  margin: 0 0 .5rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.4rem;
  background: linear-gradient(135deg, var(--herbal-lime) 0%, #c5e890 50%, #A8C7B5 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.landing-modes p {
  margin: 0;
  color: var(--text-dim);
  font-size: .95rem;
  line-height: 1.55;
}

.landing-cta {
  text-align: center;
  padding: 3rem 2rem;
}
.landing-cta h2 { margin-bottom: 1rem; }
.landing-cta p {
  max-width: 56ch;
  margin: 0 auto 1rem;
  color: var(--text-dim);
}
.landing-cta a.btn-primary {
  margin-top: .5rem;
  font-family: var(--font-mono);
  letter-spacing: .04em;
}

@media (max-width: 720px) {
  .landing-hero h1 { font-size: 2.4rem; }
  .landing-section { padding: 1.5rem 1.25rem; }
  .landing-section h2 { font-size: 1.5rem; }
}

/* ── Loading overlay ─────────────────────────────── */

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 24, 18, .92);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.25rem;
}
.loading-overlay.show {
  display: flex;
  animation: overlayFadeIn .25s ease;
}
@keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } }

.loading-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid var(--glass-border);
  border-top-color: var(--herbal-lime);
  border-radius: 50%;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-message {
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

@media (prefers-reduced-motion: reduce) {
  .loading-spinner { animation-duration: 2s; }
  .loading-overlay.show { animation: none; }
}

/* ── Pagination ──────────────────────────────────── */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem 0 .5rem;
  margin-top: 1rem;
  border-top: 1px solid var(--glass-border);
}

.pagination-info {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--text-dim);
}

/* ── Phase 2 ──────────────────────────────────────── */

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: .35rem;
  border-radius: 999px;
  background: var(--danger);
  color: var(--forest-abyss);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
}

.learn-progress {
  height: 8px;
  background: rgba(255, 255, 255, .06);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  margin: .75rem 0 .5rem;
}
.learn-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--herbal-lime), #c5e890);
  box-shadow: 0 0 16px -2px var(--herbal-glow);
  transition: width .8s ease;
}

.intel-graph-wrap {
  width: 100%;
  border-radius: var(--radius);
  background: rgba(8, 30, 22, .35);
  border: 1px solid var(--glass-border);
  overflow: hidden;
}

/* ── Projections (Watchlist outlook) ──────────────── */

.projections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: .25rem;
}
.proj-card {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: rgba(8, 30, 22, .4);
  padding: .55rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.proj-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.proj-symbol { font-weight: 500; letter-spacing: .04em; font-size: .95rem; }
.proj-svg { width: 100%; height: auto; display: block; }
.proj-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.proj-line-hist        { stroke: var(--herbal-lime); stroke-width: 1.6; }
.proj-line-conservative { stroke: #ff8a80; stroke-width: 1.4; stroke-dasharray: 3 3; opacity: .9; }
.proj-line-balanced     { stroke: #d4f278; stroke-width: 1.6; stroke-dasharray: 3 3; }
.proj-line-optimistic   { stroke: #00e5a0; stroke-width: 1.4; stroke-dasharray: 3 3; opacity: .9; }
.proj-divider {
  stroke: var(--text-faint);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: .5;
}
.proj-axis-y line { stroke: rgba(141, 198, 63, .12); }
.proj-axis-y path { display: none; }
.proj-axis-y text {
  fill: var(--text-faint);
  font-size: 9px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.proj-card-foot {
  display: flex;
  gap: .85rem;
  flex-wrap: wrap;
  font-size: .72rem;
  color: var(--text-dim);
}
.proj-foot-cons { color: #ff8a80; }
.proj-foot-bal  { color: #d4f278; }
.proj-foot-opt  { color: #00e5a0; }
.proj-legend {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--text-dim);
  margin-top: .25rem;
}
.proj-legend-dot {
  display: inline-block;
  width: 14px;
  height: 2px;
  vertical-align: middle;
  margin-right: .4rem;
}
.proj-legend-dot.is-hist { background: var(--herbal-lime); }
.proj-legend-dot.is-cons { background: #ff8a80; }
.proj-legend-dot.is-bal  { background: #d4f278; }
.proj-legend-dot.is-opt  { background: #00e5a0; }

/* Stats inside the dashboard's right column (was System health).
   One per row — large currency values fit without truncation in
   a narrow column. */
.stat-grid-stack {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.stat-grid-stack .stat {
  padding: .75rem .9rem;
}
.stat-grid-stack .stat-value {
  font-size: 1.1rem;
}

.intel-graph-actions {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.intel-graph-actions .btn {
  padding: .25rem .55rem;
  font-size: .9rem;
  line-height: 1;
}
/* Show "expand" glyph normally, "collapse" glyph when fullscreen. */
.intel-fs-icon-collapse { display: none; }
#intel-graph-panel.is-fullscreen .intel-fs-icon-expand { display: none; }
#intel-graph-panel.is-fullscreen .intel-fs-icon-collapse { display: inline; }

/* Fullscreen mode — pin the panel over the viewport. The SVG's height
   rule below switches to fill the viewport so d3 has the room.
   Topbar and footer are hidden so nothing overlaps the close button. */
#intel-graph-panel.is-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  border-radius: 0;
  margin: 0;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  background: rgba(8, 30, 22, .96);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}
#intel-graph-panel.is-fullscreen .intel-graph-wrap {
  flex: 1 1 auto;
  min-height: 0;
}
#intel-graph-panel.is-fullscreen #intel-graph-svg {
  height: 100%;
}
body.intel-graph-fs-open { overflow: hidden; }
body.intel-graph-fs-open .topbar,
body.intel-graph-fs-open .footer {
  display: none;
}

/* Per-dot pulse — a faint halo ring expanding outward from each node.
   Staggered animation-delay (set inline by intelligenceGraph.js) keeps the
   dots from beating in unison. The simulation/layout is untouched. */
.intel-node-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: intel-node-pulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
  pointer-events: none;
}
.intel-node-core {
  filter: drop-shadow(0 0 4px rgba(141, 198, 63, .35));
}
@keyframes intel-node-pulse {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(2.2);  opacity: 0; }
  100% { transform: scale(2.2);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .intel-node-halo { animation: none; opacity: 0; }
}

/* Graph height = whatever viewport-height is left after the topbar,
   page-head, stats row, and gaps. Clamped so the panel stays usable
   on tiny phones and doesn't go absurd on a 4K display. The 360px
   subtracted approximates: topbar (~70) + page-head (~80) + stats
   row (~120) + gaps + footer breathing room. */
#intel-graph-svg {
  display: block;
  width: 100%;
  height: clamp(360px, calc(100vh - 360px), 820px);
}
@media (max-width: 900px) {
  #intel-graph-svg { height: clamp(360px, calc(100vh - 280px), 600px); }
}
@media (max-width: 600px) {
  #intel-graph-svg { height: clamp(320px, calc(100vh - 220px), 480px); }
}

dialog::backdrop {
  background: rgba(6, 24, 18, .65);
  backdrop-filter: blur(8px);
}

/* ── UI primitives: toasts + dialogs (window.UI) ─── */

.toast-container {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  pointer-events: none;
  max-width: calc(100vw - 2.5rem);
}

.toast {
  pointer-events: auto;
  position: relative;
  background: rgba(8, 30, 22, .92);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-left-width: 3px;
  border-radius: 12px;
  padding: .9rem 1.1rem;
  color: var(--text);
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1.4;
  min-width: 260px;
  max-width: 420px;
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, .5),
              0 0 28px -10px var(--herbal-glow);
  animation: toastIn .3s cubic-bezier(.2, .9, .3, 1.1);
}

.toast-success { border-left-color: var(--herbal-lime); }
.toast-error   { border-left-color: var(--danger); }
.toast-info    { border-left-color: var(--text-dim); }

.toast.toast-out {
  animation: toastOut .3s ease forwards;
}

@keyframes toastIn {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes toastOut {
  to { transform: translateX(120%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast.toast-out { animation: none; }
}

.ui-dialog {
  background: rgba(14, 40, 32, .9);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 1.75rem 1.75rem 1.5rem;
  max-width: 480px;
  width: 90vw;
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6),
              0 0 40px -10px var(--herbal-glow);
  position: relative;
}

.ui-dialog::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--herbal-lime), transparent);
  box-shadow: 0 0 12px var(--herbal-glow);
}

.ui-dialog::backdrop {
  background: rgba(6, 24, 18, .7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.ui-dialog h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: .005em;
  margin: 0 0 .65rem;
  color: var(--text);
}

.ui-dialog .ui-dialog-message {
  font-size: .95rem;
  line-height: 1.55;
  margin-bottom: 1.25rem;
  color: var(--text);
}

.ui-dialog input[type=text] {
  width: 100%;
  margin: 0 0 1.25rem;
  padding: .85rem 1.1rem;
  background: rgba(8, 30, 22, .45);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: .95rem;
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.ui-dialog input[type=text]:focus {
  border-color: var(--herbal-lime);
  background: rgba(8, 30, 22, .6);
  box-shadow: 0 0 0 3px rgba(141, 198, 63, .18),
              0 0 18px -4px var(--herbal-glow);
}

.ui-dialog .ui-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: .55rem;
  flex-wrap: wrap;
}

/* ── Reveal animation ────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .eyebrow::before, .pill-live::before, .ticker-track { animation: none; }
}

/* ── Scrollbars ──────────────────────────────────── */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--forest-abyss); }
::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--herbal-lime); }

/* ── Responsive ──────────────────────────────────── */

@media (max-width: 720px) {
  .topbar { padding: .85rem 1rem; gap: 1rem; flex-wrap: wrap; }
  .nav { gap: 1rem; flex-wrap: wrap; }
  .page { padding: 1.5rem 1rem; }
  h1 { font-size: 1.65rem; }
}