/* ==========================================================================
   VSFS — Vital Sign Forecaster styles
   Palette / spec:
     page bg           #155e3b
     container light   #e9e9e9
     container border / inactive tab   #c8d1d9
     tab font          #545454
     risk Low/Mid/High #37fb6d / #ffbd59 / #ff7272
     selected border   #155e3b
     forecast button   #900505
   ========================================================================== */

:root {
  --vsfs-blue: #094372;
  --vsfs-light: #eef7fe;
  --vsfs-muted: #c8d1d9;
  --vsfs-tabfont: #545454;
  --vsfs-forecast: #094372;
  --vsfs-default: #094372;
  --vsfs-tier-low: #24bc4f;
  --vsfs-tier-mid: #ffbd59;
  --vsfs-tier-high: #ff5b5b;
  --vsfs-font-header: "Poppins", "Calibri", "Roboto", system-ui, sans-serif;
  --vsfs-font-body: "Calibri", "Segoe UI", system-ui, sans-serif;
  --vsfs-font-container: "Montserrat", "Calibri", "Roboto", system-ui, sans-serif;
  --vsfs-font-card: "Roboto", "Calibri", system-ui, sans-serif;
  --vsfs-font-score: "Montserrat", "Roboto", "Calibri", system-ui, sans-serif;
  --vsfs-radius: 4px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--vsfs-blue);
  font-family: var(--vsfs-font-body);
  color: #1f2933;
}

/* ------------------------------------------------------------ collapsed rail */
.vsfs-railbar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: min(50px, 3vw);
  min-width: 36px;
  background: var(--vsfs-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-top: 14px;
  z-index: 40;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.15);
}
.vsfs-hamburger {
  width: 66%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vsfs-hamburger span {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--vsfs-blue);
}
.vsfs-logo {
  width: 66%;
  line-height: 0;
}

/* --------------------------------------------------------------- app shell */
.vsfs-shell {
  width: 90%; /* 5% margin each side */
  margin: 0 auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}

/* ------------------------------------------------------------------ header */
.vsfs-header {
  flex: 0 0 auto;
  max-height: 100px;
  overflow: hidden;
  color: #fff;
  font-family: var(--vsfs-font-header);
  padding: 8px 4px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vsfs-header__brand {
  margin: 0;
  font-weight: 700;
  line-height: 1.03;
  font-size: clamp(1.5rem, 4.6vh, 2.7rem);
}
.vsfs-header__tagline {
  margin: 2px 0 0;
  font-weight: 300;
  opacity: 0.95;
  font-size: clamp(0.78rem, 1vw, 1.05rem);
}

/* -------------------------------------------------------------------- main */
.vsfs-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  padding: 6px 0;
}

/* outer (light) container that holds the tabs + panels */
.vsfs-outer {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--vsfs-light);
  border-radius: var(--vsfs-radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  padding: 8px;
  overflow: hidden;
}

/* ------------------------------------------------------------------ footer */
.vsfs-footer {
  flex: 0 0 auto;
  max-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 6px 0;
  font-size: 0.85rem;
}

/* -------------------------------------------------------------------- tabs */
.vsfs-tabhost {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.vsfs-tabs {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end; /* bottoms align; active tab grows upward */
  gap: 8px;
  height: clamp(26px, 5%, 46px); /* ~5% of the container */
  min-height: 26px;
  padding: 0 2px;
}
.vsfs-tab {
  flex: 1 1 0;
  height: calc(100% - 5px); /* inactive tabs sit 5px shorter */
  border: none;
  border-radius: var(--vsfs-radius) var(--vsfs-radius) 0 0;
  background: var(--vsfs-muted);
  color: var(--vsfs-tabfont);
  font-family: var(--vsfs-font-container);
  font-weight: 700; /* bold so it stays legible when small */
  font-size: clamp(11px, 1.5vh, 16px);
  cursor: pointer;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.08);
}
.vsfs-tab.is-active {
  height: 100%; /* selected tab is 5px taller than the rest */
  background: var(--vsfs-light);
  color: #222;
}
.vsfs-tabpanel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

/* ------------------------------------------------------- readings tab body */
.vsfs-readings {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px;
}
.vsfs-panels {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 10px;
}
.vsfs-inner--records { flex: 20 1 0; }
.vsfs-inner--latest  { flex: 20 1 0; }
.vsfs-inner--history { flex: 60 1 0; }

/* inner containers (white in both tabs) */
.vsfs-inner {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--vsfs-muted);
  border-radius: var(--vsfs-radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  padding: 10px;
  font-family: var(--vsfs-font-card);
}
.vsfs-inner__title {
  text-align: center;
  font-weight: 700;
  font-size: clamp(0.95rem, 2.2vh, 1.25rem);
  color: #222;
}
.vsfs-inner__subtitle {
  text-align: center;
  font-size: 0.72rem;
  color: var(--vsfs-tabfont);
  margin: 2px 0 8px;
}
.vsfs-inner__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* -------------------------------------------------------- Active Records */
.vsfs-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.vsfs-filter {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--vsfs-font-container);
  font-size: 0.7rem;
  padding: 3px 4px;
  border: 1px solid var(--vsfs-muted);
  border-radius: 4px;
  background: #fff;
  color: var(--vsfs-tabfont);
}
.vsfs-card-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px; /* breathing room from the white container edges */
}
.vsfs-card {
  border-radius: 5px;
  padding: 5px 14px;
  text-align: center;
  font-weight: 600;
  color: #1c1c1c;
  cursor: pointer;
  user-select: none;
  transition: transform 0.08s ease, box-shadow 0.12s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  font-size: 1vw;
}
.vsfs-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* --------------------------------------------------------- Latest Reading */
.vsfs-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 5px;
}
.vsfs-vital {
  display: flex;
  align-items: center;
  gap: 15px;
}
.vsfs-vital__label {
  flex: 0 0 40px;
  text-align: right;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--vsfs-tabfont);
}
/* innermost data field: white with 2px solid border */
.vsfs-vital__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 6px;
  border: 2px solid #333;
  border-radius: 4px;
  background: #fff;
  font-family: var(--vsfs-font-container);
  font-size: 0.9rem;
  text-align: center;
}

/* ---------------------------------------------------------- Patient History */
.vsfs-history__scroll {
  padding: 5px;
}
.vsfs-history__rows {
  display: flex;
  flex-direction: column;
  gap: 1px; /* tight spacing between reading rows */
}
.vsfs-history__empty {
  color: var(--vsfs-tabfont);
  text-align: center;
  padding: 20px 8px;
  font-size: 0.85rem;
}
/* row-like component: white with 2px solid border */
.vsfs-hrow {
  display: flex;
  align-items: stretch;
  gap: 4px;
  background: #fff;
  border: 0px solid var(--vsfs-muted);
  border-radius: 5px;
  padding: 4px;
  cursor: pointer;
}
.vsfs-hrow:hover {
  border: 2px solid var(--vsfs-muted);
  border-color: var(--vsfs-blue);
}
.vsfs-hrow.is-high {
  background: var(--vsfs-forecast-tint, #ff7272);
  border-color: #ff7272;
}
.vsfs-hcell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-family: var(--vsfs-font-container);
}
.vsfs-hcell--date {
  flex: 0 0 96px;
  border: 2px solid #333;
  border-radius: 4px;
  background: #fff;
  padding: 4px 2px;
  text-align: center;
  font-weight: 600;
}
.vsfs-hcell--vital {
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  border: 1px solid var(--vsfs-muted);
  border-radius: 3px;
  background: #fff;
  padding: 2px 1px;
}
.vsfs-hcell__lbl {
  font-size: 0.6rem;
  color: var(--vsfs-tabfont);
  font-weight: 700;
}
.vsfs-hcell__val {
  font-size: 0.72rem;
  font-weight: 600;
  color: #1c1c1c;
}
.vsfs-hcell--score {
  flex: 0 0 46px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #222;
}
.vsfs-hcell--score.is-high {
  background: #ff5b5b;
  color: #3a0000;
  border-radius: 4px;
}

/* -------------------------------------------------------------- forecast */
.vsfs-forecast-bar {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding-top: 10px;
}
.vsfs-forecast-btn {
  background: var(--vsfs-forecast);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 44px;
  font-family: var(--vsfs-font-container);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}
.vsfs-forecast-btn:hover, .vsfs-usemodel-btn:hover {
  background: #065fa8;
}

.vsfs-forecast-btn:active, .vsfs-usemodel-btn:active {
  background: #7ebff4;
}

/* ------------------------------------------------------- placeholder tabs */
.vsfs-placeholder-panel {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.vsfs-placeholder {
  color: var(--vsfs-tabfont);
  font-family: var(--vsfs-font-container);
}

/* ---------------------------------------------------- overlay / lightbox */
.vsfs-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.15s ease;
  font-family: var(--vsfs-font-card);
}
.vsfs-overlay.is-open {
  opacity: 1;
}
.vsfs-overlay--modal {
  align-items: center;
  justify-content: center;
}
.vsfs-overlay--drawer {
  align-items: stretch;
  justify-content: flex-start;
}
.vsfs-overlay__panel {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
  font-family: var(--vsfs-font-card);
  overflow: hidden;
}
.vsfs-overlay__panel--modal {
  min-width: 300px;
  max-width: 90%;
}
.vsfs-overlay__panel--drawer {
  width: min(280px, 80%);
  height: 100%;
  border-radius: 0;
  transform: translateX(-100%);
  transition: transform 0.18s ease;
}
.vsfs-overlay.is-open .vsfs-overlay__panel--drawer {
  transform: translateX(0);
}
.vsfs-overlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--vsfs-blue);
  color: #fff;
}
.vsfs-overlay__title {
  font-weight: 700;
}
.vsfs-overlay__close {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.vsfs-overlay__body {
  padding: 16px;
  color: #222;
}
.vsfs-modal-message {
  white-space: pre-line;
  line-height: 1.5;
}
.vsfs-drawer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vsfs-drawer-nav a {
  display: block;
  padding: 10px 8px;
  color: var(--vsfs-blue);
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
}
.vsfs-drawer-nav a:hover {
  background: #eef4ef;
}

/* dark-gray error lightbox */
.vsfs-overlay__panel--error {
  background: #333;
  color: #f1f1f1;
}
.vsfs-overlay__panel--error .vsfs-overlay__head {
  background: #222;
  color: #fff;
}
.vsfs-overlay__panel--error .vsfs-overlay__body {
  color: #ececec;
}

/* ==========================================================================
   Load-in animations
   - main container rises from the bottom (0.5s)
   - collapsed rail slides in from the left (0.5s)
   The expanded sidebar drawer also eases in from the left over 0.5s.
   ========================================================================== */
@keyframes vsfs-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes vsfs-slide-left {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: none; }
}
.vsfs-outer {
  animation: vsfs-rise 0.5s ease both;
}
.vsfs-railbar {
  animation: vsfs-slide-left 0.5s ease both;
}
.vsfs-overlay__panel--drawer {
  transition: transform 0.5s ease;
}

/* ==========================================================================
   Analysis & Forecast view
   ========================================================================== */
.vsfs-analysis-host,
.vsfs-model-host {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.vsfs-analysis {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 10px;
  padding: 10px;
}
.vsfs-analysis > .vsfs-rf { flex: 20 1 0; }
.vsfs-analytics { flex: 80 1 0; }

/* --- left: Risk Forecast (15 / 50 / 15 / 20) --- */
.vsfs-rf {
  min-width: 0;
}
.vsfs-rf__header {
  flex: 0 0 15%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.vsfs-rf__version {
  color: var(--vsfs-tabfont);
  font-weight: 700;
  font-size: 0.8rem;
}
.vsfs-rf__score {
  flex: 0 0 50%;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vsfs-rf__score-num {
  font-weight: 800;
  color: #111;
  font-size: clamp(5vw, 8vh, 4rem);
  font-family: var(--vsfs-font-score);
}
.vsfs-rf__tier {
  flex: 0 0 15%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: clamp(1rem, 2.6vh, 1.4rem);
}
.vsfs-rf__info {
  flex: 0 0 20%;
  background: #fff;
  border: 2px solid var(--vsfs-muted);
  border-radius: 5px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
.vsfs-rf__chance {
  font-weight: 700;
  font-size: 0.85rem;
}
.vsfs-rf__chance-val__Low {
  color: var(--vsfs-tier-low);
}
.vsfs-rf__chance-val__Mid {
  color: var(--vsfs-tier-mid);
}
.vsfs-rf__chance-val__High {
  color: var(--vsfs-tier-high);
}
.vsfs-rf__suggestion {
  font-size: 0.75rem;
  color: #333;
  line-height: 1.35;
}

/* --- right: Analytics --- */
.vsfs-analytics {
  min-width: 0;
}
.vsfs-analytics__row {
  flex: 0 0 auto;
  margin-bottom: 8px;
}

/* nested subtabs */
.vsfs-tabhost--sub {
  flex: 1 1 auto;
  min-height: 0;
}
.vsfs-tabhost--sub .vsfs-tabs {
  height: clamp(24px, 8%, 40px);
  gap: 6px;
}
/* Reversed scheme: unselected subtabs gray, selected white and seamless with
   the (white) subtab body. */
.vsfs-tabhost--sub .vsfs-tab {
  background: var(--vsfs-muted);
  color: var(--vsfs-tabfont);
  border: 1px solid var(--vsfs-muted);
  box-shadow: none;
  font-size: clamp(10px, 1.5vh, 14px);
}
.vsfs-tabhost--sub .vsfs-tab.is-active {
  background: #fff;
  color: #222;
  border-bottom: 1px solid #fff; /* no visible bottom border */
  margin-bottom: -1px; /* overlap the panel's top border for a seamless join */
  position: relative;
  z-index: 1;
}
.vsfs-tabhost--sub .vsfs-tabpanel {
  background: #fff;
  border: 1px solid var(--vsfs-muted);
  border-radius: 0 0 5px 5px;
  min-height: 0;
}

/* --- Forecast Results subtab --- */
.vsfs-forecast-results {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  padding: 12px 14px;
  overflow: auto;
}
/* smaller inner container holding contributions + patient data */
.vsfs-forecast-inner {
  height: auto;
  align-self: flex-start;
  width: 100%;
}
.vsfs-forecast-body {
  display: flex;
  gap: 16px;
  margin-top: 6px;
}
.vsfs-rc { 
  flex: 70 1 0; min-width: 0; 
  padding-left: 15px;
  font-size: 1vw;
}
.vsfs-pd { 
  flex: 30 1 0; min-width: 0; 
  font-size: 1vw;
}
.vsfs-rc__note {
  margin: 0 0 10px;
  color: var(--vsfs-tabfont);
  font-size: 0.8rem;
  font-style: italic;
}

.vsfs-rc__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--vsfs-tabfont);
}
.vsfs-rc__dash {
  flex: 0 0 33%;
  height: 3px;
  background: #8a8a8a;
  border-radius: 2px;
}
.vsfs-rc__title {
  font-weight: 800;
  font-size: clamp(1.2rem, 3vh, 1.8rem);
}
.vsfs-rc__list {
  margin: 0;
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vsfs-rc__item {
  font-size: clamp(0.9rem, 2.2vh, 1.15rem);
  color: #222;
  line-height: 1.3;
}
.vsfs-rc__item.is-primary {
  font-weight: 800;
}
.vsfs-rc__empty {
  color: var(--vsfs-tabfont);
}

.vsfs-pd {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
  font-size: clamp(0.95rem, 2.3vh, 1.2rem);
  color: #333;
}
.vsfs-pd__label {
  color: #333;
}
.vsfs-pd__score {
  color: var(--vsfs-forecast);
}

/* chart subtab bodies: canvas fills the (visible, sized) panel */
.vsfs-tabhost--sub .vsfs-tabpanel {
  display: flex;
}
.vsfs-chart-wrap {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  position: relative;
  padding: 10px 12px;
  background: #fff;
}
.vsfs-chart-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.vsfs-chart-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sidetab informational modal items */
.vsfs-inner--about-cpe {
  height: auto;
  align-self: flex-start;
  width: 60vw;
  padding: 18px 20px;
}

.vsfs-inner--about-team {
  display: flex;
  align-items: flex-start;
  width: 75vw;
  height: auto;
  padding: 18px 20px;
}

/* Modal Sections */
.vsfs-modal--about {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 20px;
}

.vsfs-modal--about-header { flex: 70 1 0; align-items: center; }

.vsfs-modal--header {
  font-weight: 700;
  line-height: 1.03;
  font-size: clamp(1.5rem, 4.6vh, 2.7rem);
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  padding: 5px;
}

/* About the team column: Stacked vertically */
.vsfs-modal--team-sec1 {
  display: flex;
  align-items: left; 
  flex-direction: column;
  flex: 1;                /* Take up proportional width */
  max-width: 50%;      /* Prevents the text/logo column from getting awkwardly wide */
  gap: 1rem;           /* Consistent spacing between logo and blurb */
}

/* Logo styling */
.vsfs-modal--team-logo-wrapper img{
  width: auto;
  max-width: 500px;
  height: 80%;
  display: block;
}

.vsfs-modal--team-card-desc { 
  flex-wrap: wrap;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  gap: 3px;
}

.vsfs-modal--team-brand { 
  flex: 1; 
  align-items: center; 
  background: var(--vsfs-blue);
}


.vsfs-modal--team-logo {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* Content & Typography */
.vsfs-modal--team-header-text h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #111827;
}

.vsfs-modal--about-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #4b5563;
}

.vsfs-modal--team-card { 
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 5px;
  border: 1px solid var(--vsfs-muted);
  border-radius: 2px;
}

.vsfs-modal--team-card-details { 
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  gap: 3px;
}

.vsfs-modal--team-card-details-links { 
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  flex: 1;
  justify-content: left;
  gap: 3px;
}

.vsfs-modal--team-card-details span, .vsfs-modal--team-card-details strong { 
  padding-left: 20px;
  font-size: 0.95vw;
}

.vsfs-modal--team-card-details-links a { 
  padding: 0px 5px; 
}

.vsfs-modal--team-card img {
  width: 5rem;          /* Or your preferred dimensions */
  height: 5rem;
  object-fit: cover;    /* Prevents image distortion */
  flex-shrink: 0;       /* Prevents flexbox from squeezing the avatar */
}

.vsfs-modal--team-card-details-links img { 
  width: 40px;
  height: 20px;
  flex-shrink: 0;
  padding-left: 15px;
}

.vsfs-modal--team-card-details-links span {   padding-left: 20px; }

.vsfs-modal--sponsor-brand { 
  flex: 50 1 0; 
  align-items: center; 
  flex-grow: 1;
}
.vsfs-modal--sponsor-brand img{
    width: auto;
    display: block;
    max-width: 300px;
    height: 100%;
}

.vsfs-modal--team-brand { 
  flex: 1; 
  align-items: center; 
  background: var(--vsfs-blue);
}

.vsfs-modal--team-sec2 { 
  flex: 50 1 0; 
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 5px;
}


/* ==========================================================================
   Model Selection card
   ========================================================================== */
.vsfs-model-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  padding: 10px;
}
/* the card reuses the white inner-container look via its own tab host */
.vsfs-model-card .vsfs-tabhost--sub {
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--vsfs-muted);
  border-radius: var(--vsfs-radius);
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.vsfs-model-card .vsfs-tabhost--sub .vsfs-tabpanel {
  border: none;
}

/* check icon before the selected model's tab name */
.vsfs-model-tablabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vsfs-model-check {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: var(--vsfs-blue);
  position: relative;
  flex: 0 0 auto;
}
.vsfs-model-check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* three sections */
.vsfs-model-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 16px;
  padding: 18px 20px;
}
.vsfs-model-sec {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.vsfs-model-sec--action { flex: 25 1 0; align-items: center; }
.vsfs-model-sec--info   { flex: 35 1 0; }
.vsfs-model-sec--chart  { flex: 40 1 0; }


/* section 1: button + meta */
.vsfs-usemodel-btn {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1 / 0.75;
  background: var(--vsfs-forecast);
  color: #fff;
  border: none;
  border-radius: var(--vsfs-radius);
  font-family: var(--vsfs-font-container);
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}
.vsfs-usemodel-btn.is-active {
  background: #2e8b57;
  cursor: default;
}
.vsfs-model-meta {
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--vsfs-tabfont);
}
.vsfs-model-metarow {
  margin: 2px 0;
}
.vsfs-model-metalabel {
  font-weight: 600;
}

/* section 2: description + features */
.vsfs-model-desc {
  margin: 0 0 14px;
  font-size: clamp(0.9rem, 2.2vh, 1.1rem);
  color: #333;
  line-height: 1.4;
}
.vsfs-model-feattitle {
  font-size: clamp(1rem, 1.4vh, 1.3rem);
}
.vsfs-model-features {
  margin: 8px 0 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: clamp(0.88rem, 2.1vh, 1.05rem);
  color: #222;
}

/* section 3: chart wrap already styled (.vsfs-chart-wrap) */
.vsfs-model-sec--chart .vsfs-chart-wrap {
  padding: 0;
}