/* Humanist headers font for hero titles/subtitles */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@700;800;900&display=swap');

:root{
  --bg:#0b1220;
  --text:#e6edf3;
  --muted:#9fb2c9;
  --panel-bd:#243246;
  --panel-bg1:rgba(255,255,255,.03);
  --panel-bg2:rgba(255,255,255,.015);
  --chip-bg:#0f1526;
  --chip-bd:#263247;

  --green:#22c55e;   /* Greed / Bullish */
  --orange:#f59e0b;  /* Neutral */
  --red:#ef4444;     /* Fear / Bearish */

  --shadow:0 10px 30px rgba(0,0,0,.42);
  --cards-inner: 924px;

  /* new */
  --font-humanist: "Nunito Sans","Segoe UI","Gill Sans","Frutiger","Myriad Pro",Arial,sans-serif;
}

/* Make the small site header use the Humanist font */
header h1,
header .sub{
  font-family: var(--font-humanist);
}
/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.wrap{max-width:1160px;margin:0 auto;padding:20px 16px}
header{display:grid;place-items:center;gap:10px;margin-bottom:8px}
header .sub{color:var(--muted)}
header h1{margin:0;font-weight:800;font-size:clamp(28px,4.2vw,46px)}
.logo{width:56px;height:56px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(180deg,var(--panel-bg1),var(--panel-bg2));border:1px solid var(--panel-bd);box-shadow:var(--shadow)}

/* grids */
.grid{display:grid;gap:14px;align-items:stretch}          /* stretch items in a row */
.sentiment-3{grid-template-columns:repeat(3,1fr);margin-top:6px}
.feature-2{grid-template-columns:repeat(2,1fr);margin-top:12px}
.misc-2{grid-template-columns:repeat(2,1fr);margin-top:12px}
.clamp{max-width:var(--cards-inner);margin-inline:auto}
@media (max-width:980px){.sentiment-3,.feature-2,.misc-2{grid-template-columns:1fr}}

/* card */
.card{
  background:linear-gradient(180deg,var(--panel-bg1),var(--panel-bg2));
  border:1px solid var(--panel-bd);
  border-radius:16px;
  padding:10px 12px;
  box-shadow:var(--shadow);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  display:flex;flex-direction:column;                         /* let bottom row pin to bottom */
  min-height: 220px;                                         /* ensures equal baselines */
}
.card:hover{border-color:#334155;transform:translateY(-2px)}
.card h3{margin:0 0 6px 0;font-size:17px}
.small{color:var(--muted);font-size:12.5px;margin-top:2px}

.tag,.status,.btn{display:inline-flex;align-items:center;gap:6px}
.tag{font-size:12px;color:var(--muted);padding:6px 10px;border:1px solid var(--panel-bd);border-radius:999px;background:linear-gradient(180deg,var(--panel-bg1),var(--panel-bg2));margin-right:8px}
.status{font-size:12px;padding:6px 10px;border-radius:999px;background:#0a1b14;color:#7ee2a6;border:1px solid rgba(34,197,94,.25)}
.btn.primary{margin-left:auto;font-weight:700;padding:8px 14px;border-radius:12px;border:1px solid #29415e;background:linear-gradient(180deg,rgba(120,176,255,.16),rgba(120,176,255,.06));color:#cfe2ff;text-decoration:none}
.row{display:flex;align-items:center;gap:10px;margin-top:auto;justify-content:space-between} /* pinned baseline */

/* sessions */
.sessions-wrap{display:flex;justify-content:center;margin:6px 0 10px}
.sessions-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;padding:6px 10px;border:1px solid var(--panel-bd);border-radius:999px;background:linear-gradient(180deg,var(--panel-bg1),var(--panel-bg2))}
.pill .dot{width:8px;height:8px;border-radius:999px;display:inline-block}
.pill .dot.open{background:var(--green)} .pill .dot.closed{background:var(--red)}
.pill .next{font-size:11px;color:var(--muted)}

/* ticker strip same width as cards */
#tickerStrip{margin:8px 0 18px;display:flex}
.ticker-row{display:flex;gap:8px;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:6px;border:1px solid var(--panel-bd);border-radius:14px;background:linear-gradient(180deg,var(--panel-bg1),var(--panel-bg2));justify-content:center;margin-inline:auto;max-width:var(--cards-inner);width:100%}
.tbox{flex:0 0 auto;min-width:110px;padding:6px 8px;border-radius:12px;border:1px solid var(--panel-bd);background:var(--chip-bg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);display:flex;flex-direction:column;gap:2px;height:70px}
.tbox .head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tbox .left{display:flex;align-items:center;gap:6px}
.tbox .sym{font-weight:800;letter-spacing:.2px;font-size:12px}
.tbox .pct{font-size:10px;padding:1px 6px;border-radius:999px;border:1px solid var(--panel-bd)}
.tbox .name{color:var(--muted);font-size:10.5px}
.tbox .px{font-size:15px;font-weight:800}
.tbox.up .pct{color:var(--green);border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08)}
.tbox.down .pct{color:var(--red);border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08)}
.tbox.flat .pct{color:var(--orange);border-color:rgba(234,179,8,.35);background:rgba(234,179,8,.08)}
@media (max-width:860px){.ticker-row{justify-content:flex-start}}

/* meters */
.meter{position:relative;height:10px;border-radius:999px;background:var(--chip-bg);border:1px solid var(--chip-bd);overflow:hidden;margin:6px 0 4px}
/* default bull→bear (for AAII) */
.meter::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--green),var(--orange),var(--red));opacity:.85}
/* reversed for FGI/CFG: fear red → greed green */
.meter.rev::before{background:linear-gradient(90deg,var(--red),var(--orange),var(--green))}
.meter .marker{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:10px;border-radius:4px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.4)}
/* segmented 3-color meter using CSS variables (Bull/Neutral/Bear) */
.meter.seg3::before{
  /* --g: bull percent, --o: neutral percent; bear is remainder */
  background: linear-gradient(
    90deg,
    var(--green) 0 calc(var(--g,33) * 1%),
    var(--orange) calc(var(--g,33) * 1%) calc((var(--g,33) + var(--o,34)) * 1%),
    var(--red) calc((var(--g,33) + var(--o,34)) * 1%) 100%
  );
}


/* sentiment header + line */
.s-card .s-head{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:2px}
.s-title{margin:0;font-size:17px}
.s-card .s-score{display:flex;align-items:baseline;gap:10px;margin-top:6px;min-height:48px}
.s-center{justify-content:center;text-align:center}
.s-num{font-size:24px;font-weight:800;line-height:1}

/* labels: smaller, less bold, colored, Title Case */
.s-label{font-size:16px;font-weight:600;letter-spacing:.2px}
.txt-bull{color:var(--green)}
.txt-neu{color:var(--orange)}
.txt-bear{color:var(--red)}

/* AAII trio aligned with labels above */
.trio-line{min-height:48px;display:flex;align-items:baseline;justify-content:center;gap:8px;font-size:16px;font-weight:600;color:var(--muted)}

/* scale captions */
.s-scale .scale-row{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-top:2px}

/* small info boxes */
.s-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.kv{border:1px solid var(--panel-bd);border-radius:12px;padding:6px;background:linear-gradient(180deg,var(--panel-bg1),var(--panel-bg2))}
.kv .k{color:var(--muted);font-size:10.5px}
.kv .v{font-weight:700;margin-top:1px;font-size:12.5px}

/* sentiment-colored contour (applied via JS classes) */
.s-card.sent-bull{border-color:rgba(34,197,94,.7);box-shadow:0 0 0 1.5px rgba(34,197,94,.38), var(--shadow)}
.s-card.sent-neu{border-color:rgba(245,158,11,.7);box-shadow:0 0 0 1.5px rgba(245,158,11,.38), var(--shadow)}
.s-card.sent-bear{border-color:rgba(239,68,68,.75);box-shadow:0 0 0 1.5px rgba(239,68,68,.42), var(--shadow)}

/* winner highlight in AAII */
.highlight-bull{color:var(--green);font-weight:700}
.highlight-neu{color:var(--orange);font-weight:700}
.highlight-bear{color:var(--red);font-weight:700}

/* footer (legacy single-line) */
footer{margin:28px 0 8px;color:var(--muted);text-align:center;font-size:12px}

/* === Mobile & small tablets === */
@media (max-width: 840px) {
  :root { --cards-inner: 100%; }           /* cards/ticker use full width on small screens */
  .wrap { padding: 14px 12px; }
  header { margin-bottom: 6px; }
  header h1 { font-size: 30px; }
  header .sub { font-size: 14px; }

  /* grids collapse & spacing tightens */
  .grid { gap: 12px; }
  .sentiment-3, .feature-2, .misc-2 { grid-template-columns: 1fr; }

  /* cards */
  .card { padding: 12px; border-radius: 14px; min-height: 0; }
  .row { margin-top: 12px; }               /* still separated but not forced to bottom */

  /* meters + marker */
  .meter { height: 8px; }
  .meter .marker { width: 12px; height: 8px; }

  /* sentiment text sizes */
  .s-title { font-size: 16px; }
  .s-card .s-score { min-height: 40px; gap: 8px; }
  .s-num { font-size: 22px; }
  .s-label, .trio-line { font-size: 15px; }

  /* little stat chips stack */
  .s-cols { grid-template-columns: 1fr; gap: 10px; }
  .kv { padding: 10px; }

  /* ticker strip: start-aligned + smaller boxes */
  #tickerStrip { margin: 6px 0 12px; }
  .ticker-row { justify-content: flex-start; padding: 6px; border-radius: 12px; }
  .tbox { min-width: 96px; height: 62px; padding: 6px; border-radius: 10px; }
  .tbox .px { font-size: 14px; }
}

/* === Very small phones (≤ 380px) === */
@media (max-width: 380px) {
  .s-num { font-size: 20px; }
  .s-label, .trio-line { font-size: 14px; }
  .tag, .status { font-size: 11px; padding: 5px 9px; }
  .btn.primary { padding: 8px 10px; border-radius: 10px; }
}
/* === Mobile title polish === */
@media (max-width: 600px) {
  header { gap: 6px; }
  header .logo {
    width: 48px; height: 48px; border-radius: 12px;
  }
  header h1 {
    /* smaller, balanced two-line look */
    font-size: clamp(24px, 8.2vw, 32px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    text-align: center;
    text-wrap: balance;           /* Safari/Chromium iOS supported */
    margin: 4px 0 2px;
  }
  header .sub {
    font-size: 13px;
    margin-top: 0;
  }
}

/* Fallback if some browser doesn't support text-wrap: balance */
@supports not (text-wrap: balance) {
  @media (max-width: 600px) {
    header h1 { word-break: keep-all; }
  }
}

/* Optional: force a single-line title on tiny phones (uncomment if you prefer) */
/*
@media (max-width: 380px) {
  header h1 { white-space: nowrap; font-size: 6.2vw; }
}
*/
/* Hide the small info chips on phones */
@media (max-width: 840px) {
  .s-card .s-cols { display: none; }

  /* tighten spacing a hair once chips are gone */
  .s-card .s-score { margin-bottom: 8px; }
}

/* Reusable hero */
.fmb-hero{
  background:#0b1220;
  border-bottom:1px solid #1f2937;
  padding:56px 16px 42px;
}
.fmb-hero__wrap{
  max-width:1100px;
  margin:0 auto;
  text-align:center;
}
.fmb-hero__icon{
  width:72px;height:72px;
  border-radius:20px;
  box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05);
  display:block;margin:0 auto 16px;
}
/* now using the humanist font */
.fmb-hero__title{
  font-family:var(--font-humanist);
  font-size:clamp(28px,6vw,64px);
  font-weight:900;
  letter-spacing:.2px;
  margin:0 0 10px;
  color:#e5e7eb;
}
.fmb-hero__subtitle{
  font-family:var(--font-humanist);
  margin:0 auto;
  max-width:820px;
  color:#cbd5e1;
  font-size:clamp(15px,2.5vw,22px);
}
/* compact modifier */
.fmb-hero--compact{padding:22px 12px 18px}
.fmb-hero--compact .fmb-hero__icon{width:44px;height:44px;border-radius:12px;margin-bottom:10px}
.fmb-hero--compact .fmb-hero__title{font-size:clamp(22px,4.2vw,36px);margin:0 0 6px}
.fmb-hero--compact .fmb-hero__subtitle{font-size:clamp(13px,2vw,16px);max-width:680px}

/* Simple shared footer (centered) */
.site-footer{border-top:1px solid #1f2937;background:#0b1220}
.site-footer__wrap{max-width:1100px;margin:0 auto;padding:18px 16px;text-align:center;color:#94a3b8}
.site-footer a{color:#cfe6ff;text-decoration:none;border-bottom:1px dashed #2a3446}
.site-footer a:hover{color:#ffffff;border-bottom-color:#5aa4ff}

/* Extra utilities for the Resources page */
.img-frame{width:100%;height:auto;border-radius:12px;border:1px solid #2a3446;background:#0f1526}
.links li{margin:6px 0}
.links a{color:#cfe6ff;text-decoration:none;border-bottom:1px dashed #2a3446}
.links a:hover{color:#ffffff;border-bottom-color:#5aa4ff}
details{border:1px solid #2a3446;border-radius:14px;padding:12px;background:#0f1526}
summary{cursor:pointer;font-weight:700;color:#e5e7eb}
summary::-webkit-details-marker{display:none}
.back{display:inline-flex;gap:8px;align-items:center;margin-top:6px;text-decoration:none;color:#cfe6ff;border:1px solid #2a3446;border-radius:999px;padding:8px 12px;background:#0f1526}
.back:hover{color:#fff;border-color:#3b4b64}

/* nicer focus ring */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid #5aa4ff;
  outline-offset:2px;
  border-radius:6px;
}
footer a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,.18);
}
footer a:hover{
  color: #fff;
  border-bottom-color: rgba(138,180,255,.8); /* soft blue you use elsewhere */
}
/* Rule-of-7 segmented toggle */
.mode-toggle{display:flex;gap:8px;align-items:center;margin:12px 0 18px}
.mode-toggle .seg{display:inline-flex;border:1px solid var(--ring);border-radius:999px;overflow:hidden;background:#0f1116}
.mode-toggle .seg button{
  appearance:none;border:0;padding:8px 14px;background:transparent;cursor:pointer;
  color:var(--muted);font-weight:700;letter-spacing:.1px
}
.mode-toggle .seg button.active{color:#04140b;background:var(--green)}
.mode-toggle .seg button.bear.active{color:#190404;background:var(--red)}
.hidden{display:none}

/* Color the single projections card header by mode */
#projCard.mode-bull .hd h2{color:var(--green)}
#projCard.mode-bear .hd h2{color:var(--red)}

/* R7: card width + form sizing */
:root{ --ring: #243246; } /* alias used by the page */

#projCard{
  max-width: 760px;              /* ← narrower card */
  margin: 0 auto;                /* center it */
}

#projCard .bd{ padding: 12px 16px !important; }

/* form: two compact fields, do not stretch full width */
#projCard .row{
  display: grid !important;
  grid-template-columns: repeat(2, 220px) !important;
  gap: 10px !important;
  justify-content: start !important;
}
#projCard label{ max-width: 220px !important; }
#projCard input[type="text"],
#projCard input[type="number"]{
  height: 34px !important;
  font-size: 14px !important;
  padding: 6px 10px !important;
  width: 100% !important;
  border-radius: 10px !important;
}

/* targets a bit tighter */
#projCard .targets{ gap: 10px !important; }
#projCard .metric .val{ font-size: 18px !important; }

/* Toggles row layout */
.mode-toggle{ display:flex; gap:10px; align-items:center; margin:12px 0 16px; }
.mode-toggle .seg{ display:inline-flex; border:1px solid var(--ring); border-radius:999px; overflow:hidden; background:#0f1116; }
.mode-toggle .seg button{
  appearance:none; border:0; padding:8px 14px; background:transparent; cursor:pointer;
  color:var(--muted); font-weight:700; letter-spacing:.1px;
}
.mode-toggle .seg button.active{ color:#04140b; background:var(--green); }
.mode-toggle .seg button.bear.active{ color:#190404; background:var(--red); }

/* phones: let the fields stack and use full width */
@media (max-width: 680px){
  #projCard{ max-width: 100%; }
  #projCard .row{
    grid-template-columns: 1fr !important;
    justify-content: stretch !important;
  }
  #projCard label{ max-width: none !important; }
}
/* Keep toggles and card aligned and centered */
.r7-clamp{ max-width:760px; margin:0 auto; }

/* Make buttons clickable above the card edge and align as your arrows showed */
.mode-toggle{
  display:flex; gap:8px; align-items:center;
  margin:12px 0 10px;
  position:relative; z-index:2;       /* <-- fixes clicks */
}

/* Use card's corner radius, not pill */
#projCard{ max-width:760px; margin:0 auto; position:relative; z-index:1; }
#projCard, .mode-toggle .seg, .mode-toggle .seg button{ border-radius:16px; }

/* Segmented group visuals (matching your site) */
.mode-toggle .seg{
  display:inline-flex; border:1px solid var(--ring);
  overflow:hidden; background:#0f1116;
}
.mode-toggle .seg button{
  appearance:none; border:0; padding:8px 14px; background:transparent; cursor:pointer;
  color:var(--muted); font-weight:700; letter-spacing:.1px;
}
.mode-toggle .seg button.active{ color:#04140b; background:var(--green); }
.mode-toggle .seg button.bear.active{ color:#190404; background:var(--red); }

/* Compact inputs inside the card and keep them narrow */
#projCard .row{
  display:grid; gap:10px; margin-top:12px;
  grid-template-columns:repeat(2,220px);
  justify-content:start;
}
#projCard label{ max-width:220px; }
#projCard input[type="text"], #projCard input[type="number"]{
  height:34px; padding:6px 10px; border-radius:10px; font-size:14px;
}

/* Targets tidy */
#projCard .targets{ gap:10px; }
#projCard .metric{ padding:10px; border-radius:12px; }
#projCard .metric .lbl{ font-size:11px; }
#projCard .metric .val{ font-size:18px; }

/* Mobile: full width, stacked fields */
@media (max-width:680px){
  .r7-clamp{ max-width:100%; }
  #projCard .row{ grid-template-columns:1fr; }
  #projCard label{ max-width:none; }
}

/* Header color by mode */
#projCard.mode-bull .hd h2{ color:var(--green); }
#projCard.mode-bear .hd h2{ color:var(--red); }