:root{ --highlight: rgba(255,182,193,0.35); --chartHpx: 300px; }
    body{font-family: Karla, Roboto, Helvetica, Arial, Noto Sans; margin: 24px;}
    .uscis-dashboard .wrap{max-width: 1200px; margin: 0 auto;}

    .controls{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom: 8px;}
    label{font-size: 14px; color:#333; font-family: Karla}
    select, input[type="range"]{cursor:pointer}
    .uscis-dashboard .small{font-size:12px; color:#666; font-family: Karla}


    /* Metric selector (single chart mode) */
    .metric-selector{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin: 10px 0 48px;}
    .metric-selector .metric-label{font-size:13px; color:#333; margin-right:6px;}
    .metric-pill{
      font-family: Karla;
      font-size:12px;
      padding:6px 10px;
      border:1px solid #d0d0d0;
      background:#fff;
      border-radius:999px;
      cursor:pointer;
      user-select:none;
    }
    .metric-pill:hover{background:#f7f7f7;}
    .metric-pill.active{
      background:#111827;
      color:#fff;
      border-color:#111827;
    }

    .metric-reset {
  margin-left: 10px;
  background: #f3faff;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-weight: 600;
}

.metric-reset:hover {
  background: #eef2f7;
}

    /* Layout: charts in one column */
    .viz-grid{display:block; margin-right:20px;}
    .app-main .panel{border:1px solid #e6e6e6; border-radius:10px; padding:12px; box-shadow:0 2px 6px rgba(0,0,0,0.06);}    
    .app-main .panel h3{margin:0 0 6px; font-size:14px; color:#333}
    .app-main .panel th, .panel td{padding:6px 4px; border-bottom:1px solid #f0f0f0; text-align:right}
    .app-main .panel th:first-child, .app-main .panel td:first-child{text-align:left}

    svg{width: 100%; height: var(--chartHpx);}  

    .axis path, .axis line{stroke:#aaa;}
    .axis text{fill:#444; font-size: 15px;}

    /* Chart 1 colors */
    .series-Forms-Received{fill:#854DCC;}
    .series-Pending{fill:#A85400;}
    /* Chart 2 colors */
    .series-Approved{fill:#3366CC;}
    .series-Denied{fill:#F59E0B;}

    /* Line styles */
    .line-approval{ stroke:#24c196; stroke-width:3.25; fill:none; }
    .line-denial{   stroke:#EF4444; stroke-width:3.25; fill:none; }
    .dot-approval{  fill:#24c196; }
    .dot-denial{    fill:#EF4444; }

    .line-efficiency{ stroke:#7C9EFF; stroke-width:3.25; fill:none; }
    .dot-efficiency{  fill:#7C9EFF; }
    .line-wait{ stroke:#cc8eff; stroke-width:3.25; fill:none; }
    .dot-wait{  fill:#cc8eff; }

    .highlight-window{fill: var(--highlight);}    
    .legend{display:flex; gap:16px; align-items:center; margin: 6px 0 10px; flex-wrap:wrap}
    .legend .swatch{width:12px; height:12px; display:inline-block; border-radius:2px; margin-right:6px;}

    .fy-separator{stroke:#e5e5e5; stroke-width:1; shape-rendering:crispEdges}
    .toggle-btn {
  font-size: 12px;
  padding: 4px 8px;
  margin-bottom: 16px;
  cursor: pointer;
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.rate-toggle {
  margin-bottom: 8px;
  font-size: 12px;
}
.rate-toggle label {
  margin-right: 12px;
}

.app-main .panel-header {
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  margin-bottom: 6px;
}

.panel-header .caret {
  transition: transform 0.2s ease;
  display: inline-block;
}

.panel-header.collapsed .caret {
  transform: rotate(-90deg);
}

.panel-content {
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.panel-content.hidden {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

  
  /* Step 2: hide legacy dropdown controls (kept in DOM for JS state) */
.controls{display:none !important;}

/* Selection summary (sticky, above metric selector) */
.selection-summary{
  position: sticky;
  top: 0;
  z-index: 60;
  background: #ffffff;
  padding: 10px 0 10px;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 10px;
}
.selection-summary .sel-row{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:baseline;
}
.selection-summary .sel-item{display:flex; gap:6px; align-items:baseline;}
.selection-summary .sel-label{font-size:12px; color:#666;}
.selection-summary .sel-value{font-size:13px; font-weight:700; color:#111;}

/* Give the main dashboard column breathing room so the fixed tooltip doesn't cover charts */
.app-main{padding-right: 220px;}
@media (max-width: 1400px) {
  .app-main {
    padding-right: 160px;
  }
}

@media (max-width: 1200px) {
  .app-main {
    padding-right: 0;
  }
  #hoverTooltip {
    right: 12px;
    width: 240px;
  }
}


/* ===== Visa hierarchy sidebar (Step 1 integration) ===== */
.app-shell{display:flex;min-height:100vh; margin-top: 2vh;}
.visa-sidebar-shell{width:340px;flex:0 0 340px;background:#f3faff;border-right:1px solid #e5e7eb;padding:14px 12px;overflow:auto;font-family: Karla;}
.app-main{flex:1 1 auto;min-width:0; margin-left: 10px;}
/* Scope hierarchy styles so they don't affect the dashboard */
.visa-sidebar-shell .visa-subhead{
  margin:6px 0;
  padding:6px 8px;
  background:#e3e3e3;
  border-radius:8px;
  color:#183458;
  font-size:13px;
  font-weight:600;
}
.visa-sidebar-shell .category-list{list-style:none;margin:0;padding:0;}
.visa-sidebar-shell .category-item{
  margin:6px 0;
  background:#B6D2FF;
}
.visa-sidebar-shell .category-header{
  justify-content:space-between;
  align-items:center;
  padding:8px 10px;
  cursor:pointer;
  user-select:none;
}
.visa-sidebar-shell .category-title{
  font-size:16px;
  font-weight:600;
  color:#183458;
  padding-left: 5px;
  
  font-family: Karla;
}

@media (min-width: 900px) {
  .visa-sidebar-shell {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
  }
}
.visa-sidebar-shell .caret{font-size:12px;color:#6b7280;}
.visa-sidebar-shell .visa-sublist{list-style:none;margin:0;padding:0 0 8px 0;display:none;}
.visa-sidebar-shell .visa-sublist.open{display:block;}
.visa-sidebar-shell .visa-item{
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
  color:#111827;
  background: #fff;
}
.visa-sidebar-shell .visa-item:hover{background:#eef6ff;}
.visa-sidebar-shell .selection-display{
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:8px;
  padding:8px 10px;
  font-size:12px;
  color:#111827;
  margin-top:4px;
}
.visa-sidebar-shell .selected-first{outline:2px solid #7C9EFF; outline-offset:-2px;}
.visa-sidebar-shell .selected-second{outline:2px dashed #7C9EFF; outline-offset:-2px;}
.app-main .wrap{max-width:1300px;}

/* Ensure category visa lists are collapsed by default */
.visa-sidebar-shell .visa-list{list-style:none;margin:0;padding:0 0 8px 0;display:none;}
.visa-sidebar-shell .visa-list.open{display:block;}

/* Subhead (family) button styling + caret rotation */
.visa-sidebar-shell .visa-subhead-btn{
  width:100%;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
  padding:7px 10px;
  border:0;
  background:#ddf2ff;
  cursor:pointer;
  font-size:12px;
  color:#183458;
}
.visa-sidebar-shell .visa-subhead-btn:hover{background:#eef6ff;}
.visa-sidebar-shell .visa-subhead-caret{display:inline-block; width:14px; color:#6b7280;}

/* search function */

.visa-search {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

#visaSearchInput {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.search-results {
  margin-top: 6px;
  max-height: 220px;
  overflow-y: auto;
}

.search-item {
  padding: 6px 8px;
  cursor: pointer;
  font-size: 13px;
}

.search-item:hover {
  background: #f3f4f6;
}

.methodology {
  margin-left: 1%;
  margin-top: 15%;
}

.form-information-box{
  margin: 10px 0 14px;
  padding: 12px 14px;
  background: #f3faff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.form-info-item + .form-info-item{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.form-info-title{
  font-size: 13px;
  font-weight: 700;
  color: #183458;
  margin-bottom: 4px;
}

.form-info-text{
  font-size: 14px;
  line-height: 1.5;
  color: #334155;
}

.chart-note{
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
}

.chart-note-item + .chart-note-item{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e5e7eb;
}

.chart-note-label{
  font-size: 12px;
  font-weight: 700;
  color: #183458;
  margin-bottom: 3px;
  font-family: Karla;
}

.chart-note-text{
  font-size: 12px;
  line-height: 1.45;
  color: #4b5563;
  font-family: Karla;
}

.download-wrap {
  margin: 28px 5px 18px;
}

.download-btn {

  font-family: Karla;
  border: 0;
  border-radius: 8px;
  padding: 10px 8px;
  font-size: 14px;
  font-weight: 600;
  border:1px solid #d0d0d0;
  border-radius:999px;
  cursor: pointer;
  background: #3366cc;
  color: #fff;
}


.download-btn:hover {
  opacity: 0.72;
}
/* hidden by default */
.mobile-rotate-notice,
.mobile-top-controls {
  display: none;
}

/* ---------- iPhone portrait: show rotate notice ---------- */
@media only screen and (max-width: 900px) and (orientation: portrait) {
  .app-shell,
  .selection-summary,
  #formInformationBox,
  #metricSelector,
  #comparison-wrap,
  #eadBridge,
  .methodology,
  #hoverTooltip {
    display: none !important;
  }

  .mobile-rotate-notice{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      /* THIS is the key change */
      background: rgba(255, 255, 255, 0.75);
       backdrop-filter: blur(2px);

      display: flex;
      align-items: center;
      justify-content: center;

      z-index: 9999;
}


  .mobile-rotate-card {
    max-width: 320px;
  }

  .mobile-rotate-icon {
    font-size: 42px;
    margin-bottom: 10px;
  }

  body {
    margin: 0;
  }


}

/* ---------- iPhone landscape: dashboard mode ---------- */
@media only screen and (max-width: 900px) and (orientation: landscape) {
  body {
    margin: 0;
  }

  .app-shell {
    display: block;
    min-height: auto;
    margin-top: 0;
  }

  .visa-sidebar-shell {
    display: none !important;
  }

  .app-main {
    margin-left: 0;
    padding-right: 155px; /* room for tooltip on right */
  }

  .app-main .wrap {
    max-width: none;
    width: 100%;
    padding: 8px 10px 18px;
    box-sizing: border-box;
  }

  h1 {
    font-size: 22px;
    margin: 10px 10px 4px;
  }

  h4,
  body > p {
    display: none;
  }

  .mobile-top-controls {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 8px 0;
    position: sticky;
    top: 0;
    z-index: 80;
    background: #fff;
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
  }

  .mobile-search-wrap {
    flex: 1 1 auto;
    position: relative;
  }

  #mobileVisaSearchInput {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }

  .mobile-compare-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 13px;
    padding-top: 6px;
  }

  /* hide desktop sidebar controls */
  .visa-search,
  .compare-toggle {
    display: none !important;
  }

  .selection-summary {
    position: static;
    padding: 6px 0 8px;
    margin-bottom: 8px;
  }

  .selection-summary .sel-row {
    gap: 10px;
  }

  .selection-summary .sel-item {
    flex-wrap: wrap;
  }

  .metric-selector {
    margin: 8px 0 12px;
    gap: 6px;
  }

  .metric-pill {
    font-size: 11px;
    padding: 6px 8px;
  }

  .viz-grid {
    margin-right: 0;
  }

.app-main .panel {
  padding: 8px;
  border-radius: 8px;
}

  svg {
    height: 180px;
  }

  .axis text {
    font-size: 11px;
  }

  #hoverTooltip {
    display: none;
    right: 8px !important;
    top: 110px !important;
    width: 135px !important;
    padding: 10px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  .methodology,
  #eadBridge {
    display: none;
  }
}
.metric-pill{
  font-family: Karla;
  font-size:12px;
  padding:6px 10px;
  border:1px solid #d0d0d0;
  background:#fff;
  border-radius:999px;
  cursor:pointer;
  user-select:none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.metric-pill:hover{
  filter: brightness(0.97);
}

/* Default inactive look by metric */
.metric-pill[data-metric="pending"]{
  color: #A85400;
  border-color: #A85400; /* #5AD8A6 */
}

.metric-pill[data-metric="received"]{
  color:#854DCC;/* #5B8FF9 */
  border-color:#854DCC;
}

.metric-pill[data-metric="completions"]{
  color:#3366cc;  /* #8B5CF6 */
  border-color:#3366cc;
}

.metric-pill[data-metric="rates"]{
  color:#24c196; /* #24c196 */
  border-color:#24c196;
}

.metric-pill[data-metric="efficiency"]{
  color:#7C9EFF; /* #2563EB */
  border-color:#7C9EFF;
}

.metric-pill[data-metric="waitTime"]{
  color:#cc8eff; /* #A855F7 */
  border-color:#cc8eff;
}

.metric-pill[data-metric="processingTime"]{
  color:#DA0047; /* #E11D48 */
  border-color:#DA0047;
}

/* “All” can stay neutral */
.metric-pill[data-metric="all"]{
  color:#374151;
  border-color:#9ca3af;
}

/* Active state fills with the metric color */
.metric-pill[data-metric="pending"].active{
  background:#A85400;
  color:#fff;
  border-color:#A85400;
}

.metric-pill[data-metric="received"].active{
  background:#854DCC;
  color:#fff;
  border-color:#854DCC;
}

.metric-pill[data-metric="completions"].active{
  background:#3366CC;
  color:#fff;
  border-color:#3366CC;
}

.metric-pill[data-metric="rates"].active{
  background:#24c196;
  color:#fff;
  border-color:#24c196;
}

.metric-pill[data-metric="efficiency"].active{
  background:#7C9EFF;
  color:#fff;
  border-color:#7C9EFF;
}

.metric-pill[data-metric="waitTime"].active{
  background:#cc8eff;
  color:#fff;
  border-color:#cc8eff;
}

.metric-pill[data-metric="processingTime"].active{
  background:#DA0047;
  color:#fff;
  border-color:#DA0047;
}

.metric-pill[data-metric="all"].active{
  background:#374151;
  color:#fff;
  border-color:#374151;
}