:root{
    --gn-bg: #ffffff;
    --gn-text: #0f172a;        /* slate-900 */
    --gn-muted: #475569;       /* slate-600 */
    --gn-border: #e2e8f0;      /* slate-200 */
    --gn-chip: #f8fafc;        /* slate-50 */
    --gn-primary: #2563eb;     /* blue-600 */
    --gn-primary-weak: #bfdbfe;/* blue-200 */
    --radius: 10px;
  }

  .wrap{ padding:16px 20px; max-width:1100px; }

  .top-tabs{
    display:flex;
    /* gap:24px; */
    gap:12px;
    border-bottom:1px solid var(--gn-border);
    padding:0 2px;
    align-items:flex-end;
  }
  .top-tabs a{
    position:relative;
    display:inline-flex;
    margin-bottom: 6px;
    align-items:center;
    gap:.4rem;
    padding:8px 8px 8px;
    color:var(--gn-muted);
    text-decoration:none;
    font-size:14px;
    border-radius:8px;
    transition:color .15s ease;
  }
  .top-tabs a:hover{ color:var(--gn-text); }
  .top-tabs a:focus-visible{
    outline:2px solid var(--gn-primary);
    outline-offset:2px;
  }
  /* active: blue underline */
  .top-tabs a.is-active,
  .top-tabs a[aria-current="page"]{
    color:var(--gn-text);
    background-color: #f2f5f9;
    font-weight: 600;
  }  
  
  .top-tabs a.link-disabled{
    color:#d7d6d6;
    cursor: not-allowed;
  }
  .top-tabs a.is-active::after,
  .top-tabs a[aria-current="page"]::after{
    content:"";
    position:absolute;
    left:-8px; right:-8px; bottom:-8px;
    height:3px;
    border-radius:3px 3px 0 0;
    background:var(--gn-primary);
  }

  /* --- Pill tabs --- */
  .pill-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
  }
  .pill-tabs button{
    font: inherit;
    cursor:pointer;
    border:1px solid var(--gn-border);
    /* background:var(--gn-chip); */
    background:#ffffff;
    color:var(--gn-muted);
    padding:6px 14px;
    border-radius:9px;
    font-size:14px;
    line-height:1;
    transition:background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .pill-tabs button:hover{
    background:#f1f5f9; /* slate-100 */
    color:var(--gn-text);
  }
  .pill-tabs button:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px var(--gn-primary-weak);
    border-color:var(--gn-primary);
  } 
  .pill-tabs button:focus{
    outline:none;
    box-shadow:0 0 0 3px var(--gn-primary-weak);
    border-color:var(--gn-primary);
  }
  /* active outlined pill */
  .pill-tabs button.is-active,
  .pill-tabs button[aria-selected="true"]{
    background:#ecf0fc;
    color:var(--gn-text);
    border-color:var(--gn-primary);
    box-shadow:0 0 0 2px rgba(37,99,235,.15);
    font-weight: 600;
  }

  /* Responsive wrap */
  @media (max-width: 560px){
    .top-tabs{ gap:6px; }
    .pill-tabs button{ padding:9px 12px; font-size:13px; }
  }




  /* used in view API nav-tab  for windows/linux buttons */

  .nav-link-edit-scenario {
    
    cursor: pointer;
    color: var(--primary);
    text-align: left;
    font: normal normal 600 16px/16px "DM Sans", sans-serif;
    letter-spacing: 0;
    opacity: 1;
    width: 100%;
    /* transition: all 200ms linear; */
    border: 2px solid #F0F0F6;
    padding: 9px;
    background-color: #F0F0F6
}
.nav-link-edit-scenario:hover{
    /* background: #F9F9F9 0% 0% no-repeat padding-box; */
    border: 2px solid;
    border-color: #DDDDE5;
    background: #FFFFFF 0% 0% no-repeat padding-box;
}

.nav-link-edit-scenario.active {
    /* background: #e0e0f9 0% 0% no-repeat padding-box; */
    /* opacity: 1; */
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 2px solid black;
    padding: 9px;
}


.nav-link-edit-scenario.active:hover {
    opacity: 1;
}


.nav-link-edit-scenario.active > span {
    color: var(--primary) !important;
    /*opacity: 0;*/
}


.nav-link-edit-scenario:hover{
    opacity: 0.9;
}