/* Workforce Vitality - Brand stylesheet
   Primary palette: #2E5E4E, #F28C38, #4A4A4A, #6FB1E1
   Secondary: #F5EBDD, #A9744F, #6C8C74, #4F6D7A
   Tertiary: #B04A3F, #D9A441, #D3D3D3, #2C4F4F
   Fonts loaded in index.html: Merriweather, Bitter, Lato, Karma
*/

:root{
  --primary-1: #2E5E4E;
  --primary-2: #F28C38;
  --primary-3: #4A4A4A;
  --primary-4: #6FB1E1;

  --accent: #0f766e; /* teal-ish accent */
  --accent-2: #235a4f;
  --accent-3: #6fb1e1;

  --secondary-1: #F5EBDD;
  --secondary-2: #A9744F;
  --secondary-3: #6C8C74;
  --secondary-4: #4F6D7A;

  --tertiary-1: #B04A3F;
  --tertiary-2: #D9A441;
  --tertiary-3: #D3D3D3;
  --tertiary-4: #2C4F4F;

  --bg: #ffffff;
  --muted: #6b7280;
  --surface: #fbfbfb;

  --radius: 12px;
  --gap: 1rem;
  --card-bg: rgba(255,255,255,0.82);
  --glass-bg: rgba(255,255,255,0.6);
  --shadow-1: 0 8px 24px rgba(15,23,20,0.06);
  --transition: 180ms cubic-bezier(.2,.9,.2,1);
}

/* Global layout */
html,body{
  height:100%;
  margin:0;
  background: linear-gradient(180deg, rgba(111,177,225,0.04) 0%, #ffffff 60%);
  color: var(--primary-3);
  font-family: 'Lato', 'Karma', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.page-width{
  max-width:1200px;
  margin:2rem auto;
  padding:1.5rem;
  background: var(--card-bg);
  border-radius: calc(var(--radius));
  box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Header */
h1{
  margin:0 0 1rem 0;
  font-family: 'Merriweather', 'Bitter', serif;
  font-weight:900; /* Merriweather Black for headings */
  font-size:2rem;
  color: var(--primary-1);
  letter-spacing: -0.5px;
}

.header-row{ display:flex; align-items:center; gap:1rem; }
.header-row h1{ margin:0; }
.header-row .header-right{ margin-left:auto; }

/* Subhead / lead paragraph */
.page-width p{
  color:var(--muted);
  line-height:1.5;
  margin-top:0.5rem;
}

/* Embed container keeps responsive aspect */
.embed-container{
  position: relative;
  padding-bottom: 62%; /* height/width ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(20,42,38,0.06);
  background: linear-gradient(180deg, rgba(111,177,225,0.04), rgba(15,23,20,0.02));
}
.embed-container iframe{
  position:absolute;
  top:0; left:0; width:100%; height:100%; border:0; border-radius:8px;
}

/* Controls area (if you later add filters/toolbar) */
.toolbar{
  display:flex;
  gap:var(--gap);
  align-items:center;
  margin-bottom:1rem;
}

.toolbar .filters-panel{ display:flex; gap:0.75rem; align-items:center; }
.filter-group{ display:flex; flex-direction:column; gap:0.25rem; }
.filter-group label{ font-size:0.9rem; color:var(--primary-4); font-weight:700; }
.filter-group select{ min-width:140px; padding:0.35rem 0.45rem; border-radius:6px; border:1px solid rgba(46,94,78,0.08); background:var(--surface); }

.toolbar-right{ margin-left:auto; display:flex; gap:.5rem; align-items:center; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.6rem 1rem;
  border-radius:8px;
  border:1px solid transparent;
  cursor:pointer;
  font-weight:700;
  font-size:0.98rem;
  color: #fff;
  background: linear-gradient(90deg, var(--primary-2), var(--accent));
  box-shadow: 0 6px 18px rgba(46,94,78,0.08);
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.btn.secondary{
  background:transparent;
  color:var(--accent-2);
  border-color: rgba(46,94,78,0.08);
  box-shadow: none;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(46,94,78,0.08); }
.btn:active{ transform:translateY(0); }
.btn:focus{ outline: none; box-shadow: 0 0 0 4px rgba(242,140,56,0.12); }

.text-muted{ color:var(--muted); font-size:0.95rem; }

/* Active filter chips */
.active-filters{ margin-top:0.75rem; display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; }
.filter-chip{ display:inline-flex; align-items:center; gap:0.5rem; background:var(--secondary-1); color:var(--primary-3); padding:0.35rem 0.6rem; border-radius:999px; font-weight:600; font-size:0.9rem; }
.filter-chip .chip-remove{ margin-left:0.35rem; border:0; background:transparent; cursor:pointer; color:var(--tertiary-1); font-weight:700; }

/* Small form tweaks */
.filters-panel{ gap:0.5rem; }
.filter-group select{ min-width:160px; }

/* Sliders and numeric range inputs */
.sliders-panel{ display:flex; flex-direction:column; gap:0.5rem; margin-left:0.5rem; }
.slider-row{ display:flex; align-items:center; gap:0.5rem; }
.slider-row label{ min-width:120px; font-weight:700; color:var(--primary-4); }
.slider-row input[type="number"]{ width:100px; padding:0.25rem; border-radius:6px; border:1px solid rgba(46,94,78,0.08); }

@media (max-width:900px){
  .sliders-panel{ flex-direction:column; }
  .slider-row{ flex-wrap:wrap; }
  .filter-group select{ min-width:120px; }
}

/* Modal mapping editor */
.modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.35); align-items:center; justify-content:center; padding:1rem; }
.modal-content{ background:#fff; border-radius:10px; max-width:820px; width:100%; box-shadow:0 8px 30px rgba(0,0,0,0.18); overflow:hidden; }
.modal-header{ display:flex; align-items:center; justify-content:space-between; padding:0.75rem 1rem; border-bottom:1px solid #eee; }
.modal-body{ padding:1rem; max-height:60vh; overflow:auto; }
.modal-footer{ padding:0.75rem 1rem; display:flex; gap:0.5rem; justify-content:flex-end; border-top:1px solid #eee; }
.modal-close{ background:transparent; border:0; font-size:1.1rem; cursor:pointer; }
.mapping-editor{ background:#0f1720; color:#d1fae5; padding:1rem; border-radius:6px; font-family:monospace; font-size:0.9rem; white-space:pre-wrap; }

/* Responsive tweaks */
@media (max-width:700px){
  .page-width{ margin:1rem; padding:0.75rem; }
  h1{ font-size:1.25rem; }
}

/* Small utility classes */
.text-muted{ color:var(--muted); font-size:0.95rem; }
.center{ text-align:center; }

/* Panel label for left/right columns */
.panel-label{ margin:0 0 .5rem 0; font-size:0.95rem; color:var(--primary-4); font-weight:700; }

/* Indicator grid: 4 columns x 3 rows, labels left where needed */
.indicator-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:0.5rem 1rem; margin-bottom:1rem; }
.indicator-grid .dem-row{ padding:0.25rem; background:transparent; }
.indicator-category{
  font-weight:700;
  color:var(--muted);
  grid-column: 1 / -1;
  margin-top:0.5rem;
  background: linear-gradient(90deg, rgba(46,94,78,0.03), rgba(255,255,255,0.02));
  padding:6px 10px;
  border-radius:6px;
}

/* Small helper for control rows (select/deselect) */
.controls-row{ margin-bottom:0.5rem; }
.controls-row .btn{ margin-right:0.4rem; }

/* Indicator column and title styling */
.indicator-column{ display:flex; flex-direction:column; gap:0.5rem; }
.indicator-column .indicator-title{ font-weight:700; color:var(--primary-4); margin-bottom:0.25rem; }
.indicator-label-wrap{ display:flex; align-items:center; gap:8px; margin-top:0.25rem; }
.indicator-label-wrap span:last-child{ white-space:nowrap; }

/* Responsive rules for indicator grid */
@media (max-width:1000px){
  .indicator-grid{ grid-template-columns: repeat(3, 1fr); gap:0.5rem; }
}
@media (max-width:760px){
  .indicator-grid{ grid-template-columns: repeat(2, 1fr); gap:0.5rem; }
  .indicator-category{ font-size:0.95rem; padding:5px 8px; }
}
@media (max-width:480px){
  .indicator-grid{ grid-template-columns: 1fr; gap:0.5rem; }
  .indicator-category{ font-size:0.95rem; padding:6px 8px; }
  .dual-range { height:44px; }
}

/* Accessibility: high-contrast focus outlines */
:focus{ outline:3px solid rgba(242,140,56,0.18); outline-offset:2px; }