/* ========================================================================
   DEPLOY PATH: /css/tepuy.css
   Tepuy Solutions — Unified Design System
   Version: 2026-03-31 (refactored — Batch 1 + Batch 3)

   Load on every page. This file replaces:
     - chart-improvements.css (now absorbed — retire that <link> tag)
     - Duplicated sidebar surface block from all 4 polish CSS files

   Changes (Batch 1):
   - Consolidated 9 :root blocks into 1 canonical block
   - Fixed --brand override bug in blog section (#134e4a → correct #1f4c3b)
   - Removed self-referential CSS vars (--brand: var(--brand))
   - Scoped duplicate .card definition to dashboard context

   Changes (Batch 3):
   - Absorbed chart-improvements.css (retirement.html: remove that <link>)
   - Added shared calculator sidebar surface rules (body.calc scope)
   ======================================================================== */

/* ========================================================================
   Tepuy Solutions — Unified Design System (tepuy.css)
   CLEANED & ORGANIZED — 2025-09-18
   Notes:
   - All brand colors, surfaces, text, borders unified as tokens in :root.
   - Reorganized with section headers for clarity.
   - Redundant hex values replaced with variables.
   ======================================================================== */

:root {
  --cta-bright: #18c17c;
  --cta-bright-hover: #14ac6e;
  --cta-bright-press: #0f8f5a;
  /* Card header tokens (used by collapsible cards) */
  --cardH-text: var(--text-inverse, #fff); /* white text on dark headers */
  --cardH-bg: var(--brand, #1e6b4b);       /* closed header background */
  --cardH-bg-open: var(--brand-light, #247857); /* hover/expanded header background */

  --brand:            #1f4c3b;
  --brand-light:      #247857;
  --brand-dark:       #163f30;
  --accent:           #0077b6;
  --accent-light:     #0096d1;
  --accent-dark:      #005885;
  --bg:               #f7fbfc;
  --surface:          #ffffff;
  --surface-subtle:   #f1f8f9;
  --text:             #0b1f16;
  --text-inverse:     #ffffff;
  --border:           #e1ecf1;
  --success:          #28a745;
  --warning:          #ffaf1a;
  --danger:           #e03434;
  --radius:           12px;
  --radius-sm:        6px;
  --radius-pill:      999px;
  --shadow-1:         0 2px 4px rgba(0,0,0,.05);
  --shadow-2:         0 4px 10px rgba(0,0,0,.15);
  --sidebar-w:        360px;
  --stick-top:        80px;
  --content-max:      1200px;
  --form-font-size:   0.9rem;
  --form-bg:          #f9fcfd;
  --chart-height-desktop: 420px;
  --chart-height-phone:   320px;
}

/* ========================================================================
   START OF ORIGINAL CSS (cleaned with tokens)
   ------------------------------------------------------------------------ */

/* ========================================================================
   Tepuy Solutions — Unified Design System (tepuy.css)
   CLEANED & ORGANIZED — 2025-08-24
   Notes:
   - Left rail: sticky panel fills the column; only inner stack scrolls.
   - Removed conflicting overrides that disabled sticky on desktop.
   ======================================================================== */


/* ========================================================================
   0) DESIGN TOKENS
   ------------------------------------------------------------------------ */
:root {
  /* Brand & accents */
  --brand:        var(--brand);   /* primary brand green */
  --brand-press:  #163f30;   /* pressed/active */
  --accent:       var(--accent);   /* blue accent (secondary) */


  /* new for backgrounds */
  --rail-bg: #e6f0ec;     /* ✅ soft green background for sidebar */
  --tip-bg:  var(--brand);     /* ✅ brand deep green for tooltip bubbles */
  --tip-fg:  #fff;
      --rail-edge: #00a651; /* bright green you want */


  /* Surfaces & background */
  --bg:           var(--bg);   /* page background */
  --surface:      #ffffff;   /* cards, panels */
  --surface-subtle:#f1f8f9;  /* headers, sticky cells, light fills */

  /* Text & borders */
  --text:         var(--text);   /* default text */
  --text-inverse: #ffffff;   /* on brand surfaces */
  --border:       var(--border);   /* light borders */

  /* Status tokens */
  --success:      #28a745;
  --warning:      #ffaf1a;
  --danger:       #e03434;

  /* Radii, shadows, shared sizes */
  --radius:       12px;
  --radius-pill:  999px;
  --shadow-1:     0 2px 4px rgba(0,0,0,.05);
  --shadow-2:     0 4px 10px rgba(0,0,0,.15);

  /* Sidebar layout */
  --sidebar-w: 360px;     /* tweak to taste */
  --stick-top: 80px;      /* navbar height + breathing */

  /* Forms */
  --form-font-size: 0.85rem;

  /* On-brand readable text */
  --on-brand: var(--brand-contrast, #fff);

  /* Tooltip tokens */
  --tip-bg:       var(--brand);
  --tip-fg:       var(--text-inverse, #fff);
  --tip-border:   color-mix(in srgb, var(--tip-bg) 90%, var(--surface) 10%);
  --tip-pill-bg:  color-mix(in srgb, var(--brand) 14%, var(--surface) 86%);

  /* Tooltip geometry */
  --tip-offset:   20px;
  --tip-arrow:    12px;
}

/* Chart sizing tokens */
/* Chart sizing tokens */
:root{
  --chart-height-desktop: 420px;
  --chart-height-phone: 320px;
}


/* Legacy aliases (kept for old pages) */
:root {
  --primary:           var(--brand);
  --brand-green:       var(--brand);
  --brand-green-dark:  var(--brand-press);
  --brand-green-light: #d4ede1;
  --secondary:         var(--accent);
  --background:        var(--bg);
  --brand-bg:          var(--bg);
  --card-bg:           var(--surface);
  --text-dark:         var(--text);
  --text-light:        var(--text-inverse);
  --border-light:      var(--border);
}


/* ========================================================================
   1) BASE / RESET
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  padding-top: 64px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* A11y utils */
.hidden { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 1px 1px); white-space: nowrap; border: 0;
}


/* ========================================================================
   2) NAVBAR
   ------------------------------------------------------------------------ */
.navbar {
  background: var(--brand-green);
  color: var(--text-light);
  width: 100%; position: fixed; top: 0; z-index: 1100;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.navbar .navbar-inner {
  display: flex; align-items: center; gap: 20px;
  min-height: 64px; max-width: none; margin: 0 auto; padding: 0 16px;
  box-sizing: border-box;
  width: 100%;
  margin: 0;                /* no centering wrapper */
  padding-inline: clamp(12px, 2vw, 24px);  /* keep breathing room */


}

.navbar,
.ts-footer {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.05) 0px,
      rgba(255,255,255,0.05) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(135deg, #1a5c4b 0%, #0d332c 100%);
}



.navbar .logo { height: 36px; width: auto; margin-right: 10px; }
.navbar .logo-title {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.1rem; color: var(--text-light); white-space: nowrap;
}

/* Links row */
.navbar .nav-links { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.navbar .nav-links a { color: var(--text-light); font-weight: 600; padding: 8px 10px; border-radius: 6px; }

/* Focus rings */
.navbar .nav-links a:focus-visible, .navbar .sub-toggle:focus-visible {
  outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,.85);
}
.navbar .sub-menu a:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--brand-green, #2e7d32);
}

/* =========================================================
   Tesla-style CTA Button (Navbar)
   ========================================================= */
.navbar .cta-button {
  background: linear-gradient(145deg, #1b1b1b, #242424);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: all 0.25s ease;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
  margin-left: 8px;
  animation: idlePulse 4s ease-in-out infinite alternate; /* continuous glow */
}

.navbar .cta-button:hover,
.navbar .cta-button:focus {
  background: linear-gradient(145deg, #00ffae, #00c480);
  color: #000;
  border-color: rgba(0, 255, 174, 0.6);
  box-shadow:
    0 0 15px rgba(0, 255, 174, 0.4),
    0 0 25px rgba(0, 255, 174, 0.2);
  transform: translateY(-2px);
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 15px rgba(0,255,174,0.4); }
  50% { box-shadow: 0 0 25px rgba(0,255,174,0.7); }
}

@keyframes idlePulse {
  0%, 100% { box-shadow: 0 0 6px rgba(0,255,174,0.2); }
  50% { box-shadow: 0 0 14px rgba(0,255,174,0.4); }
}

.navbar .cta-button:hover {
  animation: glowPulse 1.6s ease-in-out infinite alternate;
}

.navbar .cta-button:hover,
.navbar .cta-button:focus {
  animation-play-state: running;
}

.navbar .cta-button:active {
  background: var(--cta-bright-press);
  transform: translateY(1px);
  box-shadow: 0 0 10px rgba(0, 255, 174, 0.3);
}

/* Hide CTA on small screens to prevent nav break */
@media (max-width: 768px) {
  .navbar .cta-button {
    display: none;
  }
}



/* Dropdown */
.navbar .has-sub { position: relative; }
.navbar .sub-toggle {
  background: none; border: none; color: var(--text-light); font: inherit; font-weight: 600;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
}
@media (hover: hover) {
  .navbar .has-sub:hover > .sub-toggle { background: rgba(255,255,255,0.08); }
}
.navbar .sub-menu {
  display: none; position: absolute; top: 100%; left: 0; min-width: 220px;
  background: var(--surface); border: 1px solid rgba(0,0,0,.06); border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.15); padding: 8px 0; z-index: 1200;
}
.navbar .has-sub::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; pointer-events: none;
}
.navbar .sub-menu a {
  display: block; color: var(--text-dark, #1c2b2a); padding: 10px 16px; white-space: nowrap;
}
.navbar .sub-menu a:hover { background: var(--brand-green-light, rgba(0,0,0,.06)); }

.navbar .has-sub:hover .sub-menu,
.navbar .has-sub:focus-within .sub-menu,
.navbar .has-sub.open .sub-menu { display: block; } /* mobile: JS toggles .open */

/* Hamburger */
.navbar .hamburger {
  display: none; font-size: 1.8rem; background: none; border: none; color: var(--text-light);
  cursor: pointer; margin-left: 4px; line-height: 1;
}

/* ===== Mobile / Tablet ===== */
@media (max-width: 768px) {
  .navbar .navbar-inner { display: flex; align-items: center; flex-wrap: wrap; position: relative; }

  .navbar .nav-links .sub-menu a { color: var(--text-inverse) !important; font-weight: 600; padding: 12px 28px; }
  .navbar .nav-links .sub-menu a:hover,
  .navbar .nav-links .sub-menu a:focus-visible { background: rgba(255,255,255,.12); }

  .navbar .logo-title { order: 1; }
  .navbar .hamburger { order: 2; display: block; margin-left: auto; }

  

  .navbar .nav-links {
    order: 3; display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 1200;
    flex-direction: column; align-items: stretch; gap: 0; background: var(--brand-green);
    margin: 0; padding: 8px 0 12px; border-top: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 8px 20px rgba(0,0,0,.18); text-align: left;
  }
  .navbar .nav-links.show { display: flex; }

  .navbar .nav-links a,
  .navbar .sub-toggle { display: block; width: 100%; padding: 14px 16px; margin: 0; border-radius: 0; text-align: left; }

  .navbar .has-sub { width: 100%; }
  .navbar .sub-menu { position: static; background: rgba(0,0,0,0.12); box-shadow: none; border-radius: 0; padding: 0; margin: 0; }

  .chart-wrap,
  .tp-chart { height: var(--chart-height-phone); }


}

/* ========================================================================
   3) LAYOUT — calculators shared skeleton (final)
   ------------------------------------------------------------------------ */
/* Page grid: left rail + main column */
.main-layout {
  /* Use block layout instead of a CSS grid. The main column will be offset via margin-left when the sidebar is fixed. */
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
  overflow: visible; /* allow sticky to work */
}

/* Aside column (grid item) — no vertical padding here */
.main-layout aside {
  width: auto;
  min-width: 0;
  padding: 0; /* inner spacing is provided by .sidebar-panel */
  background: var(--brand); /* Dark Tepuy green for sidebar */
  border: 0;
  box-shadow: none;
}

/* Bare look for calculators (keep tiny horizontal gutter) */
.main-layout aside.aside--bare {
  background: var(--brand); /* Dark Tepuy green */
  border-right: 0;
  box-shadow: none;
  padding: 0 8px; /* no top/bottom padding */
}

.main-layout main {
  width: auto;
  padding: 2rem;
  box-sizing: border-box;
}



.content-wrap {
  max-width: 900px;
}

/* MEDIA Layout calculators view for small screens */

/* ========================================================================
   Mobile: Title first, then Inputs, then Outputs (CSS-only, no HTML changes)
   ======================================================================== */
@media (max-width: 768px) {

  /* Make the layout a flex column */
  .main-layout{
    display: flex;
    flex-direction: column;
    padding: 0 0.75rem 1.25rem;
  }

  /*
    Key trick:
    Flatten <main> so its children become flex items of .main-layout
    This lets us place .page-head above the <aside>, while keeping outputs below.
  */
  .main-layout > main{
    display: contents;
  }

  /* Order: Title (inside main) */
  .main-layout > main > .page-head{
    order: 1;
    padding: 1rem 0.25rem 0.75rem;
  }

  /* Order: Inputs */
  .main-layout > aside{
    order: 2;
    margin-top: 0.25rem;
  }

  /* Order: Outputs (everything in main except the page-head) */
  .main-layout > main > :not(.page-head){
    order: 3;
    padding: 0 0.25rem;
  }

  /* Tighten the input spacing (your earlier request) */
  aside .card,
  aside .tp-card{
    margin-bottom: 0.6rem;
  }
  aside .card-header{
    padding: 0.65rem 2.5rem 0.65rem 0.9rem;
  }
  aside .card-content{
    padding: 0.45rem 0.9rem !important;
  }
  aside .form-row{
    margin-bottom: 0.4rem !important;
  }
}




/* Frozen panel under navbar; only its inner stack scrolls */
/* The sidebar panel behaves as a regular card. On large screens
   it will fill the height of the fixed rail via a more specific
   selector defined later. Remove sticky positioning here so the
   panel doesn’t stick within its parent and instead relies on
   the rail for positioning. */

.sidebar-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-green);
  margin: 0 0 0.25rem 0;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-sub {
  font-size: 0.85rem;
  color: var(--muted-text);
  margin-bottom: 0.75rem;
}




.sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 6px; /* room for scrollbar */
  scroll-behavior: smooth;
  background: var(--brand); /* Dark Tepuy green for scrollable area */
}

/* Harmonize the Calculate button in sidebar footer */
.sidebar-footer .btn.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  height: 46px;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .2px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #007956 40%, #fff);
  background-image: linear-gradient(135deg, #00a86b, #007956);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  color: var(--text-inverse);
  transition: background .25s ease, box-shadow .25s ease, transform .1s ease;
}


.sidebar-footer .btn.btn-primary:hover {
  background-image: linear-gradient(135deg, #00c47a, #008e60);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

.sidebar-footer .btn.btn-primary:active {
  transform: translateY(1px);
  filter: saturate(1.05);
}

.sidebar-footer .btn.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,168,107,.3),
              0 6px 18px rgba(0,0,0,.12);
}

/* Disabled / busy */
.sidebar-footer .btn.btn-primary:disabled,
.sidebar-footer .btn.btn-primary.is-busy {
  cursor: not-allowed;
  background-image: linear-gradient(135deg, #b2dfd0, #9bcdbf);
  border-color: #9bcdbf;
  box-shadow: none;
}

/* Optional spinner for busy state */
.sidebar-footer .btn.btn-primary.is-busy::before {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5);
  border-top-color: var(--text-inverse);
  animation: spin .8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

/* optional slimmer scrollbar */
.sidebar-scroll::-webkit-scrollbar {
  width: 8px;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: var(--muted, #d9e3dc);
}

/* ========================================================================
   Mortgage – Rate steps layout (#rateSteps)
   ======================================================================== */

/* ========================================================================
   Mortgage – Rate steps layout (#rateSteps)
   Targets: <div id="rateSteps" class="rate-steps-grid"></div>
   ======================================================================== */

/* =========================
   Mortgage: Rate steps layout
   ========================= */
#rateSteps .rate-step-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}

/* Make the input + Remove button line up cleanly */
#rateSteps .rate-step-row .form-row > div{
  display: flex;
  gap: 8px;
  align-items: center;
}

#rateSteps .rate-step-row .step-rate{
  min-width: 160px;   /* prevents tiny-looking input on desktop */
  flex: 1;
}

/* On small screens, stack */
@media (max-width: 680px){
  #rateSteps .rate-step-row{
    grid-template-columns: 1fr;
  }
}



/* ========================================================================
   4) CARDS (collapsible)
   ------------------------------------------------------------------------ */
.card .card-header h1,
.card .card-header h2,
.card .card-header h3,
.card .card-header h4,
.card .card-header h5,
.card .card-header h6 {
  color: var(--cardH-text);
  font: inherit;
  margin: 0;
  line-height: 1.2;
}



.card, .tp-card {
  background: var(--surface, #ffffff); /* White card background for contrast */
  margin-bottom: 1rem; /* Reduced for cleaner look */
  border-radius: 0; /* Remove rounded corners */
  overflow: visible;
  border-left: none; /* Remove left border */
  box-shadow: none; /* Remove shadow for cleaner look */
}

/* Headers */
.card-header, .tp-card__header, .card h3 {
  margin: 0;
  padding: 0.75rem 1rem; /* Simplified padding */
  line-height: 1.15;
  background: var(--cardH-bg); /* Dark Tepuy green */
  font-size: 1.1rem; /* Slightly smaller for cleaner look */
  font-weight: 700;
  color: var(--cardH-text); /* White font */
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: none; /* Remove hover transitions */
}

.card-header:hover, .tp-card__header:hover, .card h3:hover {
  background: var(--cardH-bg-open);
  color: var(--cardH-text); /* Stay dark green */
}

/* Built-in chevron with white circle */
.card-header {
  position: relative;
}
.card-header::after {
  content: "+";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand); /* Green for contrast */
  background: var(--surface); /* White circle */
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  border: 1px solid #e0e0e0; /* Light border for definition */
  z-index: 10; /* Ensure circle is above other elements */
}
.card-header[aria-expanded="true"]::after {
  content: "-";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand);
  background: var(--surface);
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  border: 1px solid #e0e0e0;
  z-index: 10;
}

.card-content, .tp-card__content {
  padding: 1rem 1.25rem;
  background: var(--surface, #ffffff);
  display: none;
}
.card-content.open, .tp-card__content.open {
  display: block;
}
.card-content[hidden], .tp-card__content[hidden] {
  display: none !important;
}

/* Labels & field groups */
.card-content label, .tp-card__content label {
  font-size: .85rem;
  color: var(--text);
  display: block;
  margin-bottom: 1rem;
}

/* Compact sidebar cards */
:root {
  --cardH-font: 1.06rem;
  --cardH-padY: 4px;
  --cardH-padX: 12px;
  --cardH-chevron: 0.9rem; /* Updated to match circle font size */
  --cardH-hover-bg: var(--brand); /* Match header background */
  --cardH-hover-border: none; /* No border change */
}
aside .card-header {
  padding: 0.75rem 2.5rem 0.75rem 1rem; /* Adjusted to prevent overlap with circle */
  font-size: var(--cardH-font);
  line-height: 1.15;
  font-weight: 700;
}
aside .card-header::after {
  font-size: var(--cardH-chevron);
  right: 12px;
}
aside .card-header:hover {
  background: var(--cardH-bg);
}
aside .card {
  transition: none; /* Remove hover transitions */
}
aside .card:hover {
  border-color: var(--cardH-hover-border);
  box-shadow: none; /* No shadow */
}
aside .card-content {
  padding: 0.5rem 1rem !important; /* Simplified padding */
}
aside .form-row {
  margin-bottom: 0.5rem !important;
}
aside .form-row label {
  font-size: 0.95rem !important;
  margin-bottom: 4px !important;
}
aside .form-row input[type="text"],
aside .form-row input[type="number"] {
  padding: 6px 8px !important;
  font-size: 0.95rem !important;
}

/* Radio button rows: Horizontal alignment in sidebar forms */
aside .radio-row {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

aside .radio-row input[type="radio"] {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
  flex-shrink: 0;
}

aside .radio-row label {
  display: inline-block !important;
  margin: 0 !important;
  font-size: 0.9rem !important;
  cursor: pointer;
  white-space: nowrap;
}

/* Ensure the three-option radio group (e.g., property category) fits horizontally */
aside .form-row:has(input[name="category"]) {
  display: flex;
  flex-direction: column;
}

aside .form-row:has(input[name="category"]) label {
  margin-bottom: 0.25rem !important;
}

aside .form-row:has(input[name="category"]) .radio-row {
  flex: 1;
}

/* Optional: Hover/focus enhancement for radios */
aside .radio-row input[type="radio"]:hover + label,
aside .radio-row input[type="radio"]:focus + label {
  text-decoration: underline;
}

/* Pro CTA */
/* Pro CTA — works for <a> and <button> */
a.pro-cta,
button.pro-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.1;
  background: #111; /* Free / locked state */
  color: var(--text-inverse); /* White text on black */
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transition: transform 0.12s ease, filter 0.12s ease, background-color 0.12s ease;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Hover effect for Free CTA */
a.pro-cta:hover,
button.pro-cta:hover {
  background: #151515; /* slightly lighter/darker black */
  transform: translateY(-1px);
}

/* Emoji & Text inside CTA */
.pro-emoji {
  font-size: 20px;
  line-height: 1;
}
.pro-text {
  display: inline-block;
  text-align: left;
}

/* Investor Profile: structure grouping */
.inv-structure { margin-bottom: 10px; }

.inv-structure-box {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.12);
}

.inv-structure-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0 0 6px 0;
  opacity: 0.9;
}

/* keeps the 2-col grid aligned when there isn't a 2nd field */
.inv-ghost small { display: block; height: 1em; }


/* ================= Pro Unlocked / Tepuy+ Active ================= */
.pro-cta.pro-unlocked {
  background: #28a745; /* Green badge for unlocked */
  color: var(--text-inverse); /* White text for contrast */
  border: none; /* Optional: remove border */
  box-shadow: none;
  cursor: default;
  pointer-events: none; /* Disable clicks */
}

/* Keep same color on hover for unlocked state */
.pro-cta.pro-unlocked:hover {
  background: #28a745;
  transform: none;
}

.tp-chart {
  position: relative;
  width: 100%;
  height: var(--chart-height-desktop, 400px); /* Fallback to 400px if variable not defined */
}

#plannerChart {
  display: block;
  width: 100%;
  height: 100%;
}
/* ========================================================================
   4a) Payment cards
   ------------------------------------------------------------------------ */

#card-element {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  min-height: 40px;
  margin: 12px 0;
}

/* ========================================================================
   4b) Pricing.html page
   ------------------------------------------------------------------------ */

    body.pricing-page main {
      max-width: 1100px;
      margin: 0 auto;
      padding: 2rem 1rem 4rem;
      text-align: center;
    }
    .pricing-hero {
      background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
      color: var(--text-inverse);
      padding: 3rem 1.5rem;
      border-radius: var(--radius);
      margin-bottom: 2rem;
      box-shadow: var(--shadow-2);
    }
    .pricing-hero h1 {
      margin: 0 0 0.5rem;
      font-size: clamp(1.8rem, 2.5vw, 2.5rem);
      font-weight: 800;
    }
    .pricing-hero p {
      font-size: 1.1rem;
      margin: 0;
      opacity: 0.95;
    }
    .pricing-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
    }
    .pricing-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-1);
      padding: 2rem 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .pricing-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-2);
    }
    .pricing-card.highlight {
      border: 2px solid var(--brand);
    }
    .pricing-card h2 {
      margin: 0 0 0.5rem;
      font-weight: 700;
      font-size: 1.3rem;
      color: var(--brand);
    }
    .pricing-card.highlight h2 { color: var(--accent-dark); }
    .pricing-card .price {
      font-size: 1.6rem;
      font-weight: 700;
      margin: 0.5rem 0;
    }
    .pricing-card .trial {
      font-size: 0.95rem;
      margin-bottom: 1rem;
      color: var(--accent-dark);
    }
    .pricing-card ul {
      list-style: none;
      padding: 0;
      margin: 1rem 0;
      text-align: left;
      width: 100%;
    }
    .pricing-card ul li {
      margin: 0.35rem 0;
      font-size: 0.95rem;
    }
    .pricing-card button {
      margin-top: auto;
      width: 100%;
    }
    #error-message {
      color: var(--danger);
      font-size: 0.9rem;
      margin-top: 0.75rem;
    }



/* ========================================================================
   4c) dashboard.html page
   ------------------------------------------------------------------------ */
/* ========================================================================
   Dashboard Styles - Professional Version
   ======================================================================== */

.dashboard-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.header-content h1 {
  margin: 0 0 0.5rem 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
}

.header-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.1rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.last-login {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.dashboard-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 968px) {
  .dashboard-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .dashboard-header {
    flex-direction: column;
    gap: 1rem;
  }
}

/* Profile Sidebar */
.profile-sidebar {
  position: sticky;
  top: 2rem;
}

@media (max-width: 968px) {
  .profile-sidebar {
    position: static;
    top: auto;
    order: 2; /* Move profile below main content on mobile */
  }
}

.profile-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--shadow-2);
  border: 1px solid var(--border-subtle);
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

/* Mobile-specific profile card styles */
@media (max-width: 768px) {
  .profile-card {
    padding: 1.5rem;
    margin: 0 auto;
    max-width: 400px;
  }
  
  .dashboard-layout {
    display: flex;
    flex-direction: column;
  }
  
  .profile-sidebar {
    width: 100%;
  }
}

.profile-avatar {
  position: relative;
  display: inline-block;
  margin-bottom: 1.5rem;
}

.profile-avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid var(--surface);
  box-shadow: var(--shadow-1);
  object-fit: cover;
}

@media (max-width: 768px) {
  .profile-avatar img {
    width: 80px;
    height: 80px;
  }
}

.status-indicator {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  background: var(--success);
  border: 2px solid var(--surface);
  border-radius: 50%;
}

.profile-info h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.4rem;
  font-weight: 600;
  word-break: break-word;
}

.profile-info .muted {
  margin: 0 0 1rem 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  word-break: break-all;
}

.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  max-width: 100%;
  box-sizing: border-box;
}

.plan-free {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.plan-pro {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* ========================================================================
   Floating Bottom-Left Badge (dual-mode: CTA or Active)
   ------------------------------------------------------------------------ */
/* === Floating bottom-left Pro badge === */
.pro-cta-bottom {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 1500; /* lowered from 3000 */
  display: none;
  pointer-events: auto;
}


.pro-cta-bottom.visible {
  display: block;
}

.pro-cta-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pro-cta-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
}

/* === Active (Pro) Badge — unified with top-right design === */
.pro-badge-active {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #6c47ff, #9d6eff); /* purple Tepuy+ tone */
  color: #fff;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 0 10px rgba(156, 110, 255, 0.4);
  border: 1px solid rgba(255,255,255,0.25);
  letter-spacing: 0.3px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pro-badge-active:hover {
  transform: scale(1.05);
  box-shadow: 0 0 16px rgba(156,110,255,0.5);
}

.pro-cta-bottom.visible { z-index: 3100; }


.badge-icon {
  font-size: 0.9rem;
}

.profile-stats {
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--surface-subtle);
  border-radius: 12px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand);
}

.stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.btn-full {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}

/* Mobile button adjustments */
@media (max-width: 768px) {
  .actions {
    gap: 0.5rem;
  }
  
  .btn-full {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
}

/* Main Content */
.dashboard-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0; /* Prevents flex item overflow */
}

.welcome-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--brand-light), var(--brand-lighter));
  border: none;
  padding: 2rem;
  border-radius: 16px;
}

.welcome-content {
  flex: 1;
}

.welcome-content h2 {
  margin: 0 0 1rem 0;
  color: var(--brand-dark);
  font-weight: 600;
}

.welcome-content p {
  margin: 0;
  color: var(--text-primary);
  line-height: 1.6;
}

.welcome-illustration {
  font-size: 4rem;
  margin-left: 2rem;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .welcome-card {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
    padding: 1.5rem;
  }

  .welcome-illustration {
    margin-left: 0;
    font-size: 3rem;
  }
  
  .welcome-content h2 {
    font-size: 1.5rem;
  }
}

/* Plan Overview */
.plan-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .plan-overview-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.plan-card, .support-card {
  padding: 1.5rem;
}

@media (max-width: 768px) {
  .plan-card, .support-card {
    padding: 1.25rem;
  }
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.plan-header h3 {
  margin: 0;
  font-weight: 600;
}

.plan-status {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--surface-subtle);
  color: var(--text-muted);
}

.plan-status.pro-active {
  background: var(--success-light);
  color: var(--success-dark);
}

.plan-description {
  margin: 0 0 1.5rem 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.plan-features {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.feature-item:hover {
  background: var(--surface-subtle);
}

.feature-item.disabled {
  color: var(--text-muted);
  opacity: 0.6;
}

.feature-icon {
  font-size: 0.9rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.support-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.support-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  color: var(--text-primary);
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.support-link:hover {
  background: var(--surface-subtle);
  border-color: var(--border);
  text-decoration: none;
}

.link-icon {
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* Quick Access */
.quick-access-section {
  margin-top: 1rem;
}

.section-header {
  margin-bottom: 1.5rem;
}

.section-header h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.3rem;
  font-weight: 600;
}

.section-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.quick-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

@media (max-width: 768px) {
  .quick-links-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

.quick-link-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .quick-link-card {
    padding: 1.25rem;
  }
}

.quick-link-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.quick-link-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--brand);
  text-decoration: none;
  color: var(--text-primary);
}

.quick-link-card:hover::before {
  transform: scaleX(1);
}

.quick-link-card.highlight {
  border-color: var(--brand);
  background: linear-gradient(135deg, var(--brand-light), var(--surface));
}

.quick-link-card.highlight::before {
  transform: scaleX(1);
  background: var(--brand);
}

.link-emoji {
  font-size: 2rem;
  margin-bottom: 1rem;
  opacity: 0.7;
}

.link-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.link-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Enhanced Card Styles */
.card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-2);
}

/* Container overflow prevention */
.dashboard-container {
  overflow-x: hidden;
}

/* Utility Classes */
.text-center { 
  text-align: center; 
}
.mb-0 { 
  margin-bottom: 0; 
}
.mt-0 { 
  margin-top: 0; 
}
.emoji {
  display: block;
}

/* Ensure no horizontal scrolling on mobile */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
  
  .dashboard-container {
    padding: 0 1rem;
  }
  
  .profile-card,
  .welcome-card,
  .plan-card,
  .support-card,
  .quick-link-card {
    max-width: 100%;
    box-sizing: border-box;
  }
}




/* ========================================================================
   5) FORMS (inputs, selects, tooltips)
   ------------------------------------------------------------------------ */
.card-content input:not([type="checkbox"]):not([type="radio"]),
.card-content select,
.tp-card__content input:not([type="checkbox"]):not([type="radio"]),
.tp-card__content select {
  width: 100%;
  padding: .5rem;
  font-size: var(--form-font-size);
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #f9fcfd;
  color: var(--text);
  margin-top: .25rem;
  box-sizing: border-box;
}

/* Tooltips (unified) */
.tp-tip, .i {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 50%;
  font-weight: 700;
  font-size: .68rem;
  cursor: help;
  margin-left: 6px;
  vertical-align: middle;
  background: var(--tip-pill-bg);
  color: var(--brand);
}
.tp-tip::after, .i::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--tip-offset));
  transform: translateX(-50%);
  min-width: 200px;
  max-width: 260px;
  padding: .6rem .7rem;
  border-radius: 8px;
  background: var(--tip-bg);
  color: var(--tip-fg);
  border: 1px solid var(--tip-border);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--tip-bg) 25%, #000);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: normal;
  text-align: left;
  z-index: 1000;
  transition: opacity .18s ease, transform .18s ease, visibility 0s .18s, color: var(--tip-fg);
}
.tp-tip::before, .i::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--tip-offset) - var(--tip-arrow)/2);
  transform: translateX(-50%) rotate(45deg);
  width: var(--tip-arrow);
  height: var(--tip-arrow);
  background: var(--tip-bg);
  box-shadow: 0 0 0 1px var(--tip-border);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 999;
  transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
}
.tp-tip:hover::after, .tp-tip:focus-visible::after,
.tp-tip:hover::before, .tp-tip:focus-visible::before,
.i:hover::after, .i:focus-visible::after,
.i:hover::before, .i:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.tp-tip[data-tip-pos="left"]::after, .i[data-tip-pos="left"]::after {
  bottom: auto;
  top: 50%;
  right: calc(100% + 10px);
  left: auto;
  transform: translateY(-50%);
}
.tp-tip[data-tip-pos="left"]::before, .i[data-tip-pos="left"]::before {
  bottom: auto;
  top: 50%;
  right: calc(100% + 4px);
  left: auto;
  transform: translateY(-50%) rotate(45deg);
}
.tp-tip[data-tip-pos="right"]::after, .i[data-tip-pos="right"]::after {
  bottom: auto;
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
}
.tp-tip[data-tip-pos="right"]::before, .i[data-tip-pos="right"]::before {
  bottom: auto;
  top: 50%;
  left: calc(100% + 4px);
  transform: translateY(-50%) rotate(45deg);
}
.tp-tip[data-tip-pos="below"]::after, .i[data-tip-pos="below"]::after {
  top: calc(100% + var(--tip-offset));
  bottom: auto;
  transform: translate(-50%, 0);
}
.tp-tip[data-tip-pos="below"]::before, .i[data-tip-pos="below"]::before {
  top: calc(100% + var(--tip-offset) - var(--tip-arrow)/2);
  bottom: auto;
  transform: translateX(-50%) rotate(45deg);
}

aside .card, aside .card * {
  overflow: visible;
}
@media (max-width: 560px) {
  .tp-tip::after, .i::after {
    min-width: 180px;
    max-width: 70vw;
  }
}

/* ========================================================================
   5a) Notices and Messages
   ------------------------------------------------------------------------ */
.notice-area {
  margin-top: .5rem;
}
.pro-banner {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  border-left: none; /* Remove left border for consistency */
  background: #f4fbf7;
  color: #093;
  padding: .75rem .9rem;
  border-radius: 0; /* Remove rounded corners */
  box-shadow: none; /* Remove shadow for cleaner look */
}
.pro-banner .pro-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.pro-banner .pro-text {
  flex: 1;
}
.pro-banner .pro-actions {
  display: flex;
  gap: .5rem;
}
.pro-banner .btn-unlock {
  white-space: nowrap;
}
.pro-banner .btn-dismiss {
  background: transparent;
  border: none;
  cursor: pointer;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .main-layout aside.aside--bare {
    padding: 0 4px; /* Tighter padding on mobile */
  }
  .sidebar-scroll {
    padding-right: 4px;
  }
  .card-header {
    padding: 0.5rem 2rem 0.5rem 0.75rem; /* Tighter padding */
    font-size: 1rem;
  }
  .card-header::after,
  .card-header[aria-expanded="true"]::after {
    right: 8px;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.8rem;
  }
  aside .card-header {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 1rem;
  }
  aside .card-header::after {
    right: 8px;
    font-size: 0.8rem;
  }
  aside .card-content {
    padding: 0.4rem 0.75rem !important;
  }
}

/* ========================================================================
   CALCULATORS INDEX layout
   ======================================================================== */

/* Directory layout */
.calc-directory.container { max-width: 1100px; margin: 0 auto; padding: clamp(16px,2.5vw,28px); }
.dir-hero h1 { font-size: clamp(28px, 3.2vw, 40px); margin: 8px 0 4px; }
.dir-hero p { color: var(--text-muted, #4b5563); margin: 0 0 16px; }

/* Toolbar */
.dir-toolbar { display: grid; gap: 12px; margin: 8px 0 18px; }
.dir-toolbar__row { display: grid; grid-template-columns: 1fr max-content; gap: 10px; }
.dir-search { padding: 10px 12px; border: 1px solid var(--border, #d1d5db); border-radius: 10px; }
.dir-sort { padding: 10px 12px; border: 1px solid var(--border, #d1d5db); border-radius: 10px; background: var(--surface); }
.dir-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--border, #d1d5db); padding: 6px 10px; border-radius: 999px; background: var(--surface); cursor: pointer; }
.chip.is-active { background: var(--brand-50, #eaf5ef); border-color: var(--brand-400, #2d6a4f); color: var(--brand-700, #1b4332); }
.dir-status { font-size: .95rem; color: var(--text-muted, #4b5563); display: flex; gap: 12px; align-items: center; }

/* Grid & cards */
.dir-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.dir-card { grid-column: span 6; background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-1, 0 2px 8px rgba(0,0,0,.04)); transition: transform .12s ease, box-shadow .12s ease; }
.dir-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2, 0 8px 24px rgba(0,0,0,.07)); }
.dir-link { display: grid; grid-template-columns: 160px 1fr; gap: 0; color: inherit; text-decoration: none; }
.dir-thumb { width: 100%; height: 120px; object-fit: cover; }
.dir-body { padding: 14px 16px; }
.dir-title { margin: 0 0 6px; font-size: 1.1rem; }
.dir-excerpt { margin: 0 0 10px; color: var(--text-muted, #4b5563); line-height: 1.45; }
.dir-tags { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; }
.dir-tags li { font-size: .78rem; padding: 4px 8px; border-radius: 999px; background: var(--brand-50, #ecfdf5); color: var(--brand-800, #065f46); }

/* Responsive */
@media (max-width: 980px){
  .dir-card { grid-column: span 12; }
  .dir-link { grid-template-columns: 120px 1fr; }
  .dir-thumb { height: 100px; }
}
@media (max-width: 560px){
  .dir-link { grid-template-columns: 1fr; }
  .dir-thumb { height: 160px; }
}



/* ========================================================================
   BLOG / ARTICLES — compact cards + readable article layout
   ======================================================================== */

:root{
  /* Layout scales */
  --blog-max: 1040px;           /* blog index max width */
  --article-max: 960px;          /* readable line length for posts */
  --article-pad: 16px;           /* side padding on small screens */
  --grid-gap: 16px;

  /* Visual tokens (fall back if not defined globally) */
  --brand: #134e4a;
  --text: #1f2937;
  --text-muted: #667;
  --border: rgba(0,0,0,.08);
  --shadow-1: 0 1px 6px rgba(0,0,0,.06);
  --radius-1: 12px;
}

/* --------------------------------
   Blog index scaffold
--------------------------------- */
.blog-index{
  padding-inline: 16px;
  max-width: var(--blog-max);
  margin-inline: auto;
}

.blog-hero{ margin: 16px 0 10px; }
.blog-hero h1{ font-size: clamp(1.45rem, 1.6vw + 1rem, 1.9rem); margin: 0 0 .35rem; }
.blog-hero p{ color: var(--text-muted); margin: 0; }

/* Grid: 12-col baseline; 3-up ≥900px */
.posts-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: var(--grid-gap);
}

/* Card */
.post-card{
  grid-column: span 12;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  display: flex;
  flex-direction: column;
}
.post-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  border-color: color-mix(in srgb, var(--brand) 18%, var(--border));
}

/* Link fills the card; rows = image + body */
.post-link{
  color: inherit;
  text-decoration: none;
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
}
.post-link:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--brand) 40%, #fff);
  outline-offset: 2px;
  border-radius: var(--radius-1);
}

/* Thumb: fixed aspect to stop “giant” cards */
.post-thumb{
  inline-size: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--border);
}

/* Body */
.post-body{
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Tags */
.post-tags{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.post-tags li{
  font-size: .72rem;
  line-height: 1;
  padding: .28rem .5rem;
  border-radius: 999px;
  background: #edf6f0;
  color: #0b5132;
  font-weight: 600;
}

/* Title + excerpt clamped for even heights */
.post-title{
  margin: 0;
  font-size: clamp(1rem, .5vw + .95rem, 1.1rem);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-excerpt{
  margin: 0;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em; /* reserve space so cards align */
}
.post-meta{
  margin-top: auto;
  font-size: .85rem;
  color: var(--text-muted);
}

/* Desktop layout tweaks (one media query) */
@media (min-width: 900px){
  .post-card{ grid-column: span 4; }     /* 12 / 4 = 3-up */
  .post-card.featured{ grid-column: span 6; } /* optional “hero” card */
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  .post-card{ transition: box-shadow .12s ease, border-color .12s ease; }
  .post-card:hover{ transform: none; }
}
/* ========================================================================
   Blog Article Tables
   ------------------------------------------------------------------------ */
.post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.post-content th,
.post-content td {
  border: 1px solid var(--border, #d9e2de);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}

.post-content th {
  background: var(--surface-alt, #f5f7f6);
  font-weight: 700;
}

.post-content tbody tr:nth-child(even) {
  background: var(--surface-muted, #fafcfc);
}

.post-content tbody tr:hover {
  background: #eef6f3;
}


/* --------------------------------
   Inline CTA panel (harmonized)
--------------------------------- */
.cta-block{
  padding: clamp(12px, 1.2vw, 16px);
  border-left: 6px solid var(--rail-edge); /* same left rail accent used elsewhere */
}
.cta-block .cta-lead{ margin: 0; color: var(--text); }
.cta-block .cta-actions{
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: .6rem;
}
.cta-block .cta-notes{
  margin: .6rem 0 0; padding-left: 1rem; color: var(--text-muted);
}

/* --------------------------------
   Article layout & figures
--------------------------------- */

/* Body of the post */
.post-content{
  max-width: var(--article-max);
  padding-inline: var(--article-pad);
  margin-inline: auto;
  line-height: 1.6;
  font-size: 1rem;
  color: var(--text);
}

/* Headings rhythm */
.post-content h2{ margin: 1.25rem 0 .5rem; }
.post-content h3{ margin: 1rem 0 .35rem; }
.post-content p{  margin: .6rem 0 1rem; }
.post-content ul,
.post-content ol{ margin: .4rem 0 1rem 1.25rem; }

/* Figures (charts/images) */
.post-content figure{
  max-width: var(--article-max);
  margin: 1rem auto;
  padding: 8px 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  box-shadow: var(--shadow-1);
}
.post-content figure img{
  width: 100%;
  height: auto;         /* never distort charts */
  display: block;
  border-radius: 8px;
  object-fit: contain;  /* keep axes/labels visible for exported images */
}
.post-content figure figcaption{
  font-size: .92rem;
  color: #64748b;
  margin-top: .45rem;
}

/* Optional “hero” banner near the top */
.post-hero{
  max-width: calc(var(--article-max) + 120px);
  margin: 0 auto 1rem;
}
.post-hero img{
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
}

/* Section titles align to article column */
.section-title{
  max-width: var(--article-max);
  padding-inline: var(--article-pad);
  margin: 1.2rem auto .5rem;
}

/* Panels directly under .content-wrapper (CTA, Sources) align with article */
.content-wrapper > .tp-panel{
  max-width: var(--article-max);
  padding-inline: calc(var(--article-pad) + 6px);
  margin-inline: auto;
}


/* Article header: align to article column and balance the H1 */
.page-intro{
  max-width: var(--article-max);
  padding: 0 var(--article-pad);
  margin: 0 auto .35rem;
}

.page-intro nav.tiny{
  max-width: var(--article-max);
  padding: 0 var(--article-pad);
  margin: 0 auto .35rem; /* breadcrumb spacing */
}

.page-intro h1{
  margin: 0 0 .5rem;
  font-size: clamp(1.5rem, 2.2vw + 1rem, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;         /* friendlier line breaks in modern browsers */
}

/* =========================================
   Page modifiers (tiny, scoped differences)
   ========================================= */

/* HOME */
body.home .hero {
  /* base hero spacing; content stays centered via your .content-wrapper */
  padding: clamp(36px, 6vw, 72px) 16px;
  text-align: center;
  font-weight: 400;
     color: rgba(255, 255, 255, 0.96);
}
body.home .hero--landing {
  /* optional branded background */
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.28)),
              url("/img/auyantepui8.jpg") center/cover no-repeat;
  color: var(--text-inverse);
  border-radius: 0;
  box-shadow: var(--shadow-2, 0 14px 44px rgba(0,0,0,.22));
}

/* BLOG */
body.blog .blog-index {
  padding: 8px 16px 24px;
  max-width: 1040px;
  margin: 0 auto;
}

/* ARTICLE */
body.article .post-content {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px 24px;
  line-height: 1.6;
}

/* CALCULATORS */
/* CALCULATOR: full-width shell */
body.calc .main-layout{
  max-width: none;              /* no global cap */
  width: 100%;
  margin: 0;
}

/* Keep the left rail fixed (your existing values for --sidebar-w / --stick-top are fine) */
@media (min-width: 1024px){
  body.calc .calc-aside{
    position: fixed;
    left: 0;
    top: var(--stick-top);
    bottom: 0;
    width: var(--sidebar-w);
  }

  /* MAIN CONTENT: fill everything to the right of the rail */
  body.calc .main-layout > main{
    margin-left: var(--sidebar-w);     /* exactly the rail width */
    max-width: none;                   /* no cap */
    min-width: 0;                      /* allow charts/tables to shrink properly */
    padding-right: clamp(16px, 2vw, 28px);  /* a touch of right padding */
  }
}

/* On small screens stack the aside above the main area */
@media (max-width: 1023.98px){
  body.calc .calc-aside{
    position: static;
    width: 100%;
  }
  body.calc .main-layout > main{
    margin-left: 0;
  }
}

/* ========================================================================
   5b) ABOUT US PAGE
   ------------------------------------------------------------------------ */
body.about main.about-us > .content-wrapper{
  max-width: 960px;
  margin-inline: auto;
  padding-inline: 2rem;
}
body.about main.about-us > .content-wrapper p{
  line-height: 1.6;
  margin-bottom: 1rem;
}


/* ========================================================================
   5c) CONTACT US
   ------------------------------------------------------------------------ */

/* Contact page: tidy the form and spacing */
body.contact main.content-wrapper{
  max-width: 980px;
  margin-inline: auto;
  padding-inline: 2rem;   /* add the side padding here too */
}

/* Optional: slightly tighter typography for readability */
body.contact main.content-wrapper p {
  line-height: 1.6;
  margin-bottom: 1rem;
}


/* Optional: on very small screens, let it hug the edges a bit less */
@media (max-width: 480px){
  body.contact .content-wrapper { padding-inline: 1rem; }
}


/* subtle info box above the form */
.info-box{
  background: color-mix(in srgb, var(--brand-green, #124d45) 8%, #ffffff 92%);
  border: 1px solid color-mix(in srgb, var(--brand-green, #124d45) 16%, #ffffff);
  padding: 12px 14px;
  border-radius: 10px;
  margin: 10px 0 18px;
}

/* the form as a card */
.contact-form{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* two columns on desktop */
  gap: 16px 20px;
  align-items: start;

  background: var(--surface, #fff);
  border: 1px solid var(--border, #d9e2de);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  margin: 10px 0 32px;              /* keeps it off the footer */
}

/* labels become blocks so the caption sits above the control */
.contact-form label{
  display: block;
  font-weight: 600;
  font-size: .95rem;
  color: var(--text, #20302b);
}

/* inputs/textarea full-width within grid cells */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border, #d9e2de);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
}

/* message box spans both columns */
.contact-form textarea{
  min-height: 140px;
  grid-column: 1 / -1;
  resize: vertical;
}

/* submit button */
.contact-form .btn.btn-primary{
  justify-self: start;   /* left-align the button */
  height: 44px;
  padding-inline: 18px;
  border-radius: 12px;
}

/* single column on smaller screens */
@media (max-width: 768px){
  .contact-form{
    grid-template-columns: 1fr;
  }
  .contact-form textarea{
    grid-column: 1 / 2;
  }
}



/* ========================================================================
   6) BUTTONS
   ------------------------------------------------------------------------ */
.button-group, .tp-actions { margin-top: .5rem; margin-bottom: 0; display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-start; }

.btn, .tp-btn { padding: .6rem 1.4rem; border-radius: 8px; font-size: .88rem; font-weight: 500; border: none; cursor: pointer; transition: background-color .3s, transform .1s; }
.btn:active, .tp-btn:active { transform: translateY(2px); }

.btn-primary, .tp-btn--primary, .run-planner-button {
  color: var(--text-inverse); border: none; border-radius: var(--radius-pill);
  background-image: linear-gradient(135deg, #00a86b, #007956); box-shadow: var(--shadow-2);
}
.btn-primary:hover, .tp-btn--primary:hover, .run-planner-button:hover { background-image: linear-gradient(135deg, #00c47a, #008e60); }

.btn-outline, .tp-btn--outline { display: inline-flex; align-items: center; gap: .4rem; background: var(--bg); color: var(--brand); border: 2px solid var(--brand); transition: background-color .3s, color .3s; }
.btn-outline:hover, .tp-btn--outline:hover { background: var(--brand); color: var(--text-inverse); }
.btn-outline:hover .btn-ico, .tp-btn--outline:hover .btn-ico { background: var(--surface); color: var(--brand); }

.btn-small, .tp-btn--sm { padding: .5rem 1rem; font-size: .8rem; }
.btn-disabled, .tp-btn--disabled { background: #ccd8de; color: #7a8f9b; cursor: not-allowed; }
.btn-ico, .tp-btn__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; border-radius: 4px; font-size: .75rem; }

/* ========================================================================
   7) SUMMARY · INSIGHTS · KPI  — RECOMMENDED
   ------------------------------------------------------------------------ */
/* Section titles: compact, on-brand, consistent */
.section-title{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 1.25rem 0 .75rem;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .2px;
  color: var(--brand);
  text-transform: none;
}

.section-title::after{
  content:"";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
  margin-left: 8px;
  border-radius: 1px;
}

/* Base summary cards */
.summary, .tp-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-1);
  font-size: 1rem;                 /* base text size */
  line-height: 1.55;
}

/* Titles inside summary cards */
.summary h2, .tp-summary h2 {
  margin: 0 0 .75rem 0;
  font-weight: 700;
  font-size: 1.125rem;             /* subtle hierarchy */
  color: var(--brand);
}

/* Don’t auto-shrink content */
.summary div, .tp-summary div { margin-bottom: .75rem; font-size: inherit; }

/* Grid helper */
.summary-grid, .tp-summary__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem 1rem;
}
@media (min-width: 900px) {
  .summary-grid, .tp-summary__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* === Insights card (narrative block) === */
#insightsExplain.summary {
  background: var(--surface);                /* or var(--surface-subtle) for a tint */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow-1);
  margin: 1rem 0 1.25rem;
  font-size: 1rem;                           /* unify sizes */
}
#insightsExplain.summary h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: .65rem;
}
#insightsExplain .lead {
  font-size: inherit;
  line-height: 1.6;
  color: var(--text);
  margin: .25rem 0 .5rem;
}
#insightsExplain .lead b,
#insightsExplain .lead strong { font-weight: 700; color: var(--text); }
#insightsExplain em.key { font-style: normal; color: var(--brand); font-weight: 700; }
#insightsExplain .meta {
  color: #5b6a73;
  font-size: .92rem;
  line-height: 1.5;
  margin-top: .35rem;
}
#insightsExplain ul, #insightsExplain ol { padding-left: 1.15rem; margin: .4rem 0 .6rem; }
#insightsExplain li { margin: .25rem 0; }

/* === KPI strip === */
.insights {
  display: grid;
  flex-wrap: nowrap;
  gap: 1rem;
  margin: 18px 0 10px;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  overflow-x: auto;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 18px 0 10px;
}

@media (min-width: 980px) {
  .insights { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.insight-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--surface);
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}



.insight-card:hover {
  border-color: color-mix(in srgb, var(--brand) 25%, var(--border));
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.insights-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  width: 100%;
}

.insight-label {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #5b6a73;
  margin-bottom: 6px;
}

.insight-value {
  font-size: 1.4rem;
  font-weight: bold;
  color: #28a745;
  margin-bottom: 0.25rem;
}

    .insight-value {
      font-size: 1.5rem;
      font-weight: bold;
      color: #28a745;
      margin: 0 1rem;
      flex-shrink: 0;
    }

.insight-sub {
  font-size: 0.85rem;
  color: #678;
  margin-top: 4px;
  line-height: 1.4;
}

.insight-note {
  font-size: 0.85rem;
  color: #666;
  line-height: 1.4;
}

.insight-header {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.insight-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

/* Action row */
.action-bar { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 10px 0 14px; }
.action-bar .btn { padding: .55rem 1rem; }

/* Table cap */
body.calc.ret .table-section .table-container { max-height: 460px; }

/* Utilities */
.text-success { color:#0b8a5a; }
.text-danger  { color:#c7392f; }

/* Trim gap when KPI strip is first */
.content-wrap > .section-title:first-child { margin-top: .5rem; }
.section-title + .insights { margin-top: .5rem; }

/* Apply Tepuy green rail look */
  /* Reusable Tepuy rail panel */
  .tp-panel {
    border-left: 4px solid var(--rail-edge);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    background: var(--surface);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    margin-top: 1rem;
  }
  /* Increase specificity in case .summary had conflicting styles */
  .summary.tp-panel {
    border-left: 4px solid var(--rail-edge) !important;
    background: var(--surface) !important;
  }
/* space between KPI/Insights panels and the next chart card */
.tp-panel + .card { margin-top: 1.25rem; }






/* ========================================================================
   8) CHART WRAP
   ------------------------------------------------------------------------ */
.chart-wrap,
.tp-chart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);

  padding: 14px;         /* same feel as cards */
  margin-top: .75rem;    /* pick one value and keep it consistent */
  height: var(--chart-height-desktop);
  box-sizing: border-box;

  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.chart-wrap canvas {
  width: 100% !important;
  height: 100%;
  border: 0 !important;
  display: block;
}


/* ========================================================================
   9) TABLES
   ------------------------------------------------------------------------ */
.table-container, .tp-table-container {
  width: 100%; display: block; overflow: auto; max-height: 360px; padding-bottom: 1rem;
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1);
  box-sizing: border-box; margin-bottom: .5rem;
}
.table-container table, .tp-table {
  width: 100%; min-width: 600px; border-collapse: collapse; font-size: .8rem;
  background: var(--surface); border: 1px solid var(--border);
}
.table-container th, .table-container td, .tp-table th, .tp-table td {
  padding: 6px 8px; border: 1px solid var(--border); text-align: right; white-space: nowrap;
}
.table-container thead th, .tp-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-subtle); }
.table-container th:first-child, .table-container td:first-child, .tp-table th:first-child, .tp-table td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--surface-subtle); text-align: left;
}
/* Ensure the top-left corner cell is sticky in both directions */
.table-container thead th:first-child,
.tp-table thead th:first-child {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3; /* higher than row (1) and col (2) */
  background: var(--surface-subtle);
}

.table-container tbody tr:hover, .tp-table tbody tr:hover { background: var(--bg); }

.sticky-first-col th:first-child, .sticky-first-col td:first-child { position: sticky; left: 0; z-index: 2; }
.hover-rows tbody tr:hover { background: var(--bg); }
.table-container.zebra tbody tr:nth-child(odd), .tp-table.zebra tbody tr:nth-child(odd) { background: #f9fcfd; }
.table-container.zebra tbody tr:nth-child(even), .tp-table.zebra tbody tr:nth-child(even) { background: var(--surface); }

/* Article comparison table */
.article-table .table-container { border-radius: var(--radius); overflow: auto; border: 1px solid #7bb6d9; box-shadow: var(--shadow-1); }
.article-table .tp-table {
  width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; background: var(--surface);
  font-size: .9rem; border: 1px solid var(--border);
}
.article-table .tp-table th, .article-table .tp-table td { text-align: left; padding: 10px 14px; border: 1px solid var(--border); white-space: normal; vertical-align: top; }
.article-table .tp-table thead th { background: var(--surface-subtle); color: var(--brand); font-weight: 700; }
.article-table .tp-table tbody tr:nth-child(odd)  { background: #f9fcfd; }
.article-table .tp-table tbody tr:hover           { background: #f1f7f9; }
.article-table .tp-table th:first-child, .article-table .tp-table td:first-child {
  position: sticky; left: 0; z-index: 2; background: #eef6f7; font-weight: 600; border-right: 1px solid #d6e6ec; box-shadow: 2px 0 0 rgba(0,0,0,0.03);
}

/* Year-by-year table as a card */
.table-section .table-container{
  background: var(--surface);
  border: 1px solid var(--border);   /* not accent */
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding-bottom: 1rem;
  margin-top: .75rem;                /* aligned with chart */
}
/* Keep headers subtly tinted and sticky */
.table-section thead th{
  background: var(--surface-subtle);
  color: var(--brand);
  font-weight: 700;
}


/* Optional interaction polish */
.table-section .table-container:hover{
  border-color: color-mix(in srgb, var(--brand) 18%, var(--border));
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}


/* ========================================================================
   10) HERO and CALCULATOR HEADS
   ------------------------------------------------------------------------ */
.hero{
  /* layout */
  display: grid;                   /* center the content block */
  place-items: center;
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) 16px;
margin-bottom: 0.5rem;  /* background */
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.25) 45%, rgba(0,0,0,.35)),
    url("/img/auyantepui8.jpg") center/cover no-repeat;
  background-size: cover;
  background-position: center;

  /* visuals */
  color: var(--text-inverse);
  border-radius: 0;
  box-shadow: var(--shadow-2, 0 14px 44px rgba(0,0,0,.22));

  /* size: make it feel like a real hero */
  /* use min-height only so it can breathe on tall screens */
  height: 45vh;
  min-height: 200px;   /* keep it visible on very small devices */
  max-height: 560px;   /* avoid stretching too tall on 4K */
  display: grid;
  place-items: center;        /* centers each item in its cell */
  place-content: center;      /* NEW: packs the rows in the middle */
  row-gap: .2rem;             /* NEW: exact space between H1 and paragraph */


}

/* Constrain the inner text block, not the container */
.hero > *{
  max-width: min(1100px, 92vw);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 32px);
  text-align: center;
}

/* Keep the text readable on busy photos */
.hero .content-wrapper{
  max-width: var(--content-max, 1280px);
  margin: 0 auto;
  padding: 0 16px;
}

/* Homepage hero variant — inherits background from .hero */
.hero--landing,
.home .hero{
  /* no duplicate background here; .hero already sets it */
  color: var(--text-inverse);
  border-radius: 0;
  box-shadow: var(--shadow-2, 0 14px 44px rgba(0,0,0,.22));
  padding: clamp(36px, 6vw, 72px) 16px;
  text-align: center;
}

/* Headline & subtitle */
.hero h1{
  color: var(--text-inverse);
  font-weight: 800;
  letter-spacing: -.01em;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
  margin: 0;
  margin-bottom: 0.15rem; /* tighter gap */
}

.hero p{
  max-width: 1100px;
  margin: 0 auto;
  font-weight: 500;                         /* a touch bolder */
  font-size: clamp(18px, 2.0vw, 26px);      /* larger hero copy */
  line-height: 1.55;
  text-wrap: balance;
  color: rgba(255,255,255,0.98);
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
 margin-top: 0;
line-height: 1.25;
}

/* Compact page head (used on inner pages) */
.page-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1.25rem 0 1rem;
}
.page-head h1{
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--brand);
}
.page-head::after{
  content:"";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
  border-radius: 0;
}
.page-head .sub{
  margin-left: 0;
  font-size: .95rem;
  color: #4d665e;
}

/* -------------------------------------------------------------------------
   HOME PAGE STRIP & FEATURE CARDS

   This section replaces the earlier grid-based implementation of the
   home page cards with a simpler, responsive flexbox approach. Cards
   stack vertically on small screens and align image and copy side by
   side on larger viewports.  The `.reverse` modifier flips the row
   direction to achieve the alternating layout seen in the design.
--------------------------------------------------------------------------*/



/* =========================
   HOME – Feature strip/cards
   ========================= */

/* Section wrapper (light spacing above/below) */
.strip {
  padding: 16px 0 48px;
  background: transparent;
}

/* Content width & vertical stack of cards */
.home .strip .content-wrapper{
  max-width: var(--content-max, 1200px);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 48px);   /* space between rows */
}

/* Card shell (ChampionX look = no boxed card, just divider lines) */
.feature-card{
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding: 48px 0;
}
.feature-card:first-child{ border-top: 0; }

/* Image window: consistent cropped rectangle */
.feature-card .feature-img{
  width: 100%;
  min-height: 290px;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
}

/* Copy area */
.feature-card .feature-copy p{ 
  margin: 0 0 12px;
  line-height: 1.7;
}

.feature-card .feature-copy ul{
  margin: 0 0 10px 1.1em;
  padding: 0;
}
.feature-card .feature-copy li{ margin: 0 0 6px; }
.feature-card .feature-copy h2{
  margin: 0 0 10px;
  font-weight: 800;
  color: var(--brand);
}

/* Desktop: side-by-side; .reverse flips order */
@media (min-width: 768px){
  .feature-card{ flex-direction: row; align-items: center; }
  .feature-card.reverse{ flex-direction: row-reverse; }

  .feature-card .feature-img{
    flex: 0 0 420px;          /* visual width of image */
    height: 300px;            /* fixed crop height */
  }
  .feature-card .feature-copy{
    flex: 1 1 auto;
    padding: 0 32px;
    max-width: 640px;         /* readable line length */
  }
}

/* ========================================================================
   10.5) LIVE REEL
   ------------------------------------------------------------------------ */

/* Live Market Reel Styles */
.live-reel {
  background: linear-gradient(to right, #1a237e, #283593);
  color: white;
  padding: 12px 0;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid #3949ab;
  border-top: 1px solid #3949ab;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.ticker {
  overflow: hidden;
  position: relative;
  height: 30px;
}

.ticker-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}

.ticker-list li {
  display: flex;
  align-items: center;
  padding: 0 25px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  height: 30px;
}

.market-name {
  font-weight: 600;
  margin-right: 8px;
  font-size: 0.9rem;
}

.market-value {
  font-weight: 700;
  margin-right: 8px;
  font-family: 'Courier New', monospace;
}

.trend-up {
  color: #4caf50;
}

.trend-down {
  color: #f44336;
}

.trend-flat {
  color: #ff9800;
}

.delta {
  font-weight: 600;
  margin-left: 6px;
  font-size: 0.9rem;
}

.text {
  font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ticker-list li {
    padding: 0 15px;
  }
  
  .market-name {
    font-size: 0.8rem;
  }
  
  .market-value, .delta {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .ticker-list li {
    padding: 0 10px;
  }
  
  .market-name {
    font-size: 0.75rem;
  }
  
  .market-value, .delta {
    font-size: 0.75rem;
  }
}

/* Loading animation */
.loading-dots:after {
  content: '';
  animation: dots 1.5s infinite;
}

@keyframes dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}



/* ========================================================================
   11) FOOTER — Card style (matches Summary/Insights)
   ------------------------------------------------------------------------ */
:root { --content-max: 1200px; } /* keep in tokens area if you like */

.ts-footer{
  background: var(--brand);
  color: var(--text-inverse);
  border-top: 1px solid color-mix(in srgb, #000 10%, var(--brand) 90%);
  text-align: left;
  font-size: .95rem;
  margin-top: 2rem;
}

.ts-footer__inner{
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 20px 16px 22px;
}

.footer-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
  align-items: start;
  justify-items: center;   /* NEW */
  text-align: center;      /* NEW */
}

.ts-footer h4{
  margin: 0 0 8px;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .2px;
  color: var(--brand);
  text-transform: uppercase;
}

.footer-links{ list-style: none; margin: 0; padding: 0; }
.footer-links li{ margin: 6px 0; }

.ts-footer a{ color: rgba(255,255,255,.92); }
.ts-footer a:hover{ color: var(--text-inverse); }
.ts-footer a:focus-visible{ text-decoration: underline; outline: none; }

.footer-cta{ text-align: center; }
.footer-cta .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  font-size: .95rem;
}

/* legal row */
.footer-legal-links{
  margin-top: 10px;
  display: none;
  gap: 12px;
  justify-content: center;
  font-size: .88rem;
  color: #566;
}
.footer-legal-links a{ color: var(--accent); }

.ts-footer .tiny{
  margin-top: 12px;
  font-size: .90rem;
  opacity: .85;
  text-align: center;
}
/* Fix footer heading & link contrast on dark brand footer */
.ts-footer { background: var(--brand); color: var(--text-inverse); }

.ts-footer h4{
  color: var(--text-inverse);               /* was var(--brand) */
}

/* Links on dark footer */
.ts-footer a{
  color: rgba(255,255,255,.92);
}
.ts-footer a:hover{ color: var(--text-inverse); }

/* Legal row contrast + spacing */
.footer-legal-links{
  color: rgba(255,255,255,.75);             /* the divider dot color */
}
.footer-legal-links a{
  color: rgba(255,255,255,.92);             /* match other links */
}


/* small screens */
@media (max-width: 768px){
  .footer-grid{ grid-template-columns: 1fr; text-align: center; }
  .ts-footer__inner{ padding: 18px 12px 22px; }
}
/* Footer (keep ONE variant – dark brand) */
.ts-footer { background: var(--brand); color: var(--text-inverse); }
.ts-footer h4 { color: var(--text-inverse); }
.ts-footer a { color: rgba(255,255,255,.92); }
.ts-footer a:hover { color: var(--text-inverse); }
.footer-legal-links { color: rgba(255,255,255,.75); }
.footer-legal-links a { color: rgba(255,255,255,.92); }

.navbar,
.ts-footer {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.05) 0px,
      rgba(255,255,255,0.05) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(135deg, #1a5c4b 0%, #0d332c 100%);
}


/* ========================================================================
   12) MEDIA QUERIES
   ------------------------------------------------------------------------ */

/* ≤768px: phone */
@media (max-width: 768px) {
  .main-layout { padding: 0 8px 1.25rem; }
  .section-title, .tp-section__title { margin: 1.5rem 0 .75rem; }
  .chart-wrap, .tp-chart { height: var(--chart-height-phone); }
  .table-container, .tp-table-container { max-height: 300px; }
  .main-layout aside { padding: 0; }
}


/* ≤1200px: collapse generic 2-up helper when space is tight */
@media (max-width: 1200px) {
  .grid-2 { grid-template-columns: 1fr; }
  .sidebar-footer{ margin-top: 12px; }
}

/* ≥1024px: desktop—uncap widths and let chart flex */
@media (min-width: 1024px) {
  /* Keep a centered max-width on non-calculator pages only */
  body:not(.calc) .main-layout,
  .content-wrap {
    max-width: var(--content-max);
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;

  }

  /* keep the hero centered too (no full-bleed) */
  .hero { max-width: none; margin: 0; }        /* full-bleed container */
  .hero > * { max-width: min(1100px, 92vw); }  /* keep inner text readable */


  /* keep navbar/footer container widths consistent */
  .navbar .navbar-inner,
  .ts-footer__inner {
    max-width: none;
    margin: 0 auto;
  }

  .chart-wrap canvas { min-width: 0 !important; width: 100% !important; }
}


/* ≥1100px: wider sidebar on large desktops */
/* Removed explicit width assignments. The grid template and --sidebar-w token
   now control column proportions. */

/* ========================================================================
   CHAT-LIKE FIXED LEFT RAIL OVERRIDE
   ------------------------------------------------------------------------
   These rules implement a fixed left rail similar to ChatGPT. On desktop
   (≥1025px), the entire <aside> element is fixed under the navbar and
   aligned with the centered page. The sidebar panel fills the rail and
   only its inner stack scrolls. On smaller screens the layout reverts to
   a stacked flow with no fixed positioning.
   ======================================================================== */




/* ========================================================================
   13) PRINT
   ------------------------------------------------------------------------ */
@media print {
  .navbar, .button-group, .tp-actions, .btn, .tp-btn, .hamburger { display: none !important; }
  .main-layout { padding: 0; }
  .table-container, .tp-table-container { max-height: none; overflow: visible; }
}


/* ========================================================================
   14) CALCULATORS — fixed left rail (scoped to body.calc)
   ------------------------------------------------------------------------ */
:root{
  --sidebar-w: 360px;
  --stick-top: var(--navbar-h, 56px);
}

body.calc .calc-aside {
  position: fixed;
  top: var(--stick-top);
  bottom: 0;
  left: 0;
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  box-sizing: border-box;
  padding: 0;
  z-index: 100;
  background: var(--bg); /* overall page-side background */
}

body.calc .calc-aside .sidebar-panel {
  height: 100%;
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  box-sizing: border-box;
  background: var(--surface, #fff); /* keep the card white */
  border: 1px solid var(--border, #d8e0d9);
  border-radius: var(--radius, 12px);
  padding: 16px;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;

  /* accent strip */
 border-left: 6px solid transparent;
}

body.calc .calc-aside .sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  width: 100%;
  min-width: calc(var(--sidebar-w) - 32px);
  box-sizing: border-box;
  background: transparent;
}
/* === Sidebar clarity enhancements === */
body.calc .calc-aside {
  background: var(--rail-bg, #f9fbfa); /* soft tinted rail so it doesn’t look like nav */
  border-right: 1px solid var(--border);
}

body.calc .calc-aside .sidebar-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand);
  margin: 0 0 0.25rem 0;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border);
}

body.calc .calc-aside .sidebar-sub {
  font-size: 0.85rem;
  color: var(--text-muted, #667);
  margin-bottom: 0.75rem;
}

.top-actions {
  margin: 0.5rem 0 1rem 0;
}
.sidebar-sub {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}



body.calc .main-layout > main {
  margin-left: calc(var(--sidebar-w) + 2px);
  border-left: 1px solid #ccc;
  background: var(--surface);
}

/* === Phones/Tablets (stacked) === */
@media (max-width: 1024px) {
  body.calc .calc-aside {
    position: static;
    width: 100%;
    min-width: 100%;
  }
  body.calc .calc-aside .sidebar-panel {
    height: auto;
    width: 100%;
    min-width: 100%;
    border-left: none; /* remove accent strip on mobile if you prefer */
  }
  body.calc .calc-aside .sidebar-scroll {
    overflow: visible;
    width: 100%;
    min-width: 100%;
  }
  body.calc .main-layout > main {
    margin-left: 0;
  }
}
/* ========================================================================
   CALCULATOR CARD TOGGLE ENHANCEMENTS
   ======================================================================== */

/* Improved card header with better visual feedback */
.card-header {
  transition: all 0.25s ease;
  border-radius: 8px 8px 0 0;
  padding: 0.75rem 1rem !important;
}

.card-header:hover {
  background-color: var(--cardH-text);
}

.card-header[aria-expanded="true"] {
  background-color: var(--cardH-text);
  border-bottom: 1px solid var(--border);
}

/* Smoother card content transitions */
.card-content {
  transition: opacity 0.3s ease, max-height 0.4s ease;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.card-content.open {
  max-height: 2000px; /* Adjust based on content */
  opacity: 1;
  padding: 1rem 1.25rem !important;
}

/* Improved chevron animation */
.card-header::after {
  transition: transform 0.3s ease;
  font-size: 1.2rem;
  right: 1rem;
}

.card-header[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(180deg);
}

/* ========================================================================
   FORM STYLING ENHANCEMENTS
   ======================================================================== */

/* Consistent form row spacing */
.form-row {
  margin-bottom: 1rem;
  position: relative;
}

/* Improved labels */
.form-row label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  color: var(--text);
}

/* Enhanced input styling */
.form-row input[type="text"],
.form-row input[type="number"],
.form-row select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-row input[type="text"]:focus,
.form-row input[type="number"]:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}

/* Toggle switches */
.toggle {
  position: relative;
  width: 42px;
  height: 22px;
  appearance: none;
  background: #ccc;
  border-radius: 22px;
  transition: all 0.3s ease;
  cursor: pointer;
  margin-right: 8px;
  vertical-align: middle;
}

.toggle:checked {
  background: var(--brand);
}

.toggle::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: all 0.3s ease;
}

.toggle:checked::after {
  left: calc(100% - 20px);
}

/* Grid improvements */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Form notes styling */
.form-note {
  display: block;
  font-size: 0.8rem;
  color: #666;
  margin-top: 0.4rem;
  line-height: 1.4;
}

/* ========================================================================
   PRO FEATURE STYLING
   ======================================================================== */

/* Pro-only inputs */
.pro-only-input {
  position: relative;
  opacity: 0.7;
}

.pro-only-input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.pro-only-input:disabled::after {
  content: "🔒";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
}

/* Pro notice styling */
.pro-notice {
  background: linear-gradient(135deg, #ffd700, #ffb700);
  color: #333;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin: 1rem 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Pro CTA button enhancements */
.pro-cta {
  background: linear-gradient(135deg, #4a4a4a, #2a2a2a) !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

.pro-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

.pro-cta.pro-unlocked {
  background: linear-gradient(135deg, var(--brand), var(--brand-press)) !important;
}

/* ========================================================================
   SUMMARY & INSIGHTS ENHANCEMENTS
   ======================================================================== */

/* Summary icons */
.summary-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
  background-size: contain;
  background-repeat: no-repeat;
}

/* Callout boxes */
.callout {
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  border-left: 4px solid var(--brand);
}

/* ========================================================================
   BUTTON ENHANCEMENTS
   ======================================================================== */

/* Link button styling */
.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
}

.link-btn:hover {
  color: var(--brand-press);
}

/* Primary button enhancements */
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-primary:hover::after {
  left: 100%;
}

/* ========================================================================
   RESPONSIVE ENHANCEMENTS
   ======================================================================== */

@media (max-width: 1024px) {
  .calc-aside .sidebar-panel {
    margin: 0 1rem;
  }
  
  .main-layout > main {
    padding: 1rem;
  }
}

@media (max-width: 768px) {
  .card-header {
    padding: 0.6rem 0.9rem !important;
  }
  
  .card-content.open {
    padding: 0.75rem 1rem !important;
  }
  
  .section-title {
    font-size: 1.1rem;
    margin: 1rem 0 0.5rem;
  }
}

/* ========================================================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================================================== */

/* Focus styles */
.card-header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .card-header {
    border: 1px solid currentColor;
  }
  
  .form-row input[type="text"],
  .form-row input[type="number"],
  .form-row select {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .card-header,
  .card-content,
  .card-header::after,
  .btn-primary,
  .toggle,
  .form-row input,
  .form-row select {
    transition: none;
  }
  
  .btn-primary::after {
    display: none;
  }
}
:root {
  --cardH-bg: var(--brand);       /* closed dark Tepuy green */
  --cardH-bg-open: var(--brand-light);  /* softer green when expanded or hover */
}

.card-header {
  background: var(--cardH-bg);
  transition: background 0.25s ease;
  cursor: pointer;
}

.card-header:hover,
.card-header[aria-expanded="true"] {
  background: var(--cardH-bg-open);
  color: var(--cardH-text);
}

.card-content {
  display: none;
  padding: 1rem;
  background: var(--surface);
}
.card-content.open {
  display: block;
}








/* ========================================================================
   SHARED CALCULATOR SIDEBAR SURFACE
   Applied to all calculators via body.calc scope.
   Previously duplicated in sidebar-polish.css, offset-polish.css,
   mortgage-polish.css, and lmi-polish.css — consolidated here.
   ======================================================================== */

/* Sidebar background */
body.calc .calc-aside,
body.calc .calc-aside .sidebar-panel {
  background: #f4f8f6;
}

/* Scrollable area */
body.calc .calc-aside .sidebar-scroll {
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: #c8ddd3 transparent;
}
body.calc .calc-aside .sidebar-scroll::-webkit-scrollbar { width: 5px; }
body.calc .calc-aside .sidebar-scroll::-webkit-scrollbar-thumb {
  background: #c8ddd3;
  border-radius: 4px;
}

/* Desktop: flush right edge */
@media (min-width: 1025px) {
  body.calc .calc-aside .sidebar-panel {
    border-radius: 0;
    border-right: 1px solid #dce8e1;
    padding: 0;
  }
}

/* Card headers in all calculator sidebars */
body.calc .calc-aside .card-header {
  background: #1a5236;
  color: #ffffff;
  font-size: 0.92rem;
  padding: 0.6rem 2.2rem 0.6rem 0.9rem;
}
body.calc .calc-aside .card-header:hover,
body.calc .calc-aside .card-header[aria-expanded="true"] {
  background: #21673f;
}

/* Inputs inside calculator sidebars */
body.calc .calc-aside .card-content input:not([type="checkbox"]):not([type="radio"]),
body.calc .calc-aside .card-content select {
  background: #ffffff;
  border: 1px solid #c8ddd3;
}
body.calc .calc-aside .card-content input:focus,
body.calc .calc-aside .card-content select:focus {
  border-color: #1a6b4a;
  box-shadow: 0 0 0 2px rgba(26,107,74,0.15);
}

/* ========================================================================
   CHART IMPROVEMENTS (absorbed from chart-improvements.css)
   Previously a separate file loaded by retirement.html.
   Now consolidated here — removes one HTTP request.
   ======================================================================== */
/* ── CSS custom properties ─────────────────────────────────────── */
/* chart height tokens in main :root above */

/* ── Chart wrapper: consistent padding + shadow ────────────────── */
.tp-chart {
  position: relative;
  padding: 0.75rem 0.5rem 0.25rem;
  background: var(--chart-bg);
  border-radius: var(--chart-radius);
  box-shadow: var(--chart-shadow);
}

/* ── rtab-chart: the actual height-constrained canvas wrapper ───── */
.rtab-chart {
  position: relative;
  width: 100%;
  height: var(--chart-height-desktop) !important;
  min-height: 220px;
  overflow: hidden;   /* prevents any overflow bleeding */
}

/* Force canvas to fill its container completely */
.rtab-chart canvas {
  display: block !important;
  width:  100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* ── Tab panel: tighter padding on mobile ────────────────────────── */
.rtab-panel {
  padding: 0.75rem 1rem 1rem;
}

/* ── Tab bar: better balance, no letter-spacing crunch ─────────── */
.rtab-bar {
  padding: 0.5rem 0.75rem 0;
  gap: 1px;
  background: #f4f8f6;
}

.rtab-btn {
  padding: 0.38rem 0.9rem 0.42rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

/* Active tab: bold underline indicator */
.rtab-btn--active {
  color: #1a5236 !important;
  background: #ffffff !important;
  border-bottom: 2.5px solid #1a6b4a !important;
  font-weight: 800 !important;
}

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

/* Tablet: slightly shorter */
@media (max-width: 960px) {
  .rtab-chart {
    height: var(--chart-height-tablet) !important;
  }
}

/* Phone: compact but still readable */
@media (max-width: 640px) {
  /* chart height tokens in main :root above */

  .rtab-chart {
    height: var(--chart-height-phone) !important;
    min-height: 260px;
  }

  /* Tighter panel padding on phone */
  .rtab-panel {
    padding: 0.5rem 0.6rem 0.75rem;
  }

  /* Smaller tab buttons on phone — fit all in one row */
  .rtab-btn {
    padding: 0.3rem 0.55rem 0.35rem;
    font-size: 0.64rem;
    letter-spacing: 0.02em;
  }

  /* PNG button: hide label text on tiny screens */
  .rtab-actions .btn-ghost-sm span {
    display: none;
  }
  .rtab-actions .btn-ghost-sm svg {
    margin: 0;
  }
  .rtab-actions .btn-ghost-sm {
    padding: 0.3rem 0.5rem;
    min-width: 32px;
    justify-content: center;
  }

  /* Actions bar: compact */
  .rtab-actions {
    margin-bottom: 0.5rem;
    gap: 0.35rem;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .rtab-chart {
    height: 260px !important;
    min-height: 240px;
  }

  .rtab-btn {
    padding: 0.28rem 0.42rem 0.3rem;
    font-size: 0.6rem;
  }
}

/* ── Chart loading placeholder (while canvas draws) ─────────────── */
.rtab-chart::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(26, 107, 74, 0.04) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  border-radius: var(--chart-radius);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.rtab-chart--loading::before {
  opacity: 1;
  animation: chart-shimmer 1.4s ease-in-out infinite;
}

@keyframes chart-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ── Results tab wrap: tighter on mobile ─────────────────────────── */
@media (max-width: 640px) {
  .results-tabs-wrap {
    border-radius: 10px;
    margin-bottom: 1rem;
  }
}

/* ── Ensure chart font scales on mobile (prevent label clipping) ─── */
@media (max-width: 640px) {
  /* Chart.js renders on canvas, but we can influence the container
     aspect ratio via the height above. The JS in calc-charts.js
     already uses isMobile() to reduce font sizes and tick density. */

  /* Prevent inner overflow that causes the "squished" look */
  .tp-chart {
    padding: 0.5rem 0.25rem 0.25rem;
    overflow: hidden;
  }
}

/* ── Tepuy branding strip below charts ──────────────────────────── */
.rtab-chart::after {
  content: 'tepuysolutions.com';
  position: absolute;
  bottom: 4px;
  right: 8px;
  font-size: 9px;
  font-weight: 600;
  color: rgba(26, 107, 74, 0.25);
  letter-spacing: 0.04em;
  pointer-events: none;
  z-index: 1;
  font-family: "Inter", system-ui, sans-serif;
}

/* ── Professional chart header area ─────────────────────────────── */
.tp-chart {
  border: 1px solid var(--chart-border);
}