body {
    font-family: Arial, sans-serif;
    /* background-color: #f3f4f6; */
    padding: 20px;
    box-sizing: border-box;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0;                /* ensure no extra gap */
    padding: .5rem; 
    border: 1px solid #3498db;
    background-color: #fff;
    color: #3498db;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.tab-btn:hover {
    background-color: #3498db;
    color: #fff;
}

.tab-btn.active {
    background-color: #3498db;
    color: #fff;
}

.hidden {
    display: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.reference {
    font-size: 14px;
    padding-top: 20px;
    color: #3498db;
}

.reference a {
    color: #3498db;
    text-decoration: none;
    transition: text-decoration 0.3s;
    /* Add transition for smooth underline effect */
}

.reference a:hover {
    text-decoration: underline;
    /* Underline on hover */
}

/* Remove default browser styles for visited links */
.reference a:visited {
    color: #3498db;
}

.tabs-container {

    margin-bottom: 20px;
    /* Add space between buttons and content */
}

.ImageMap {
    max-width: 90%;
    height: auto;
}

.toast {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    padding: 0.6rem 1rem;
    background: rgba(0,0,0,0.8);
    color: #fff;
    border-radius: .4rem;
    font-size: .9rem;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 9999;
}
.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.step-icon {
margin-right: 6px;
font-size: 1.1em;
vertical-align: -2px;
}
.section-icon {
    margin-right: 8px;
    font-size: 1.2em;
    vertical-align: -2px;
    color: #3498db;
}
.tab-btn i,
.dropdown-content a i,
.tab-btn img.hi,
.dropdown-content a img.hi {
    margin-right: .4rem;
    vertical-align: -0.1em;
    height: 1.1em;
    width: 1.1em;
}

.tab-btn svg,
.tab-btn .lambda {
height: 1.1em;
width: 1.1em;
/* No margin so it will stick to the text */
}
.tab-btn span.label {
    margin-left: 6px;
}

/* Optional: same treatment for dropdown links */
.dropdown-content a {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.dropdown-content a svg {
    height: 1em;
    width: 1em;
}

/* ---------- slider visuals ---------- */
.theme-toggle          { position: fixed; top: 20px; right: 20px; z-index: 10; }
.theme-toggle input    { width: 0; height: 0; opacity: 0; }

.theme-toggle label{
    position: relative;
    display:block;               /* the track */
    width: 52px; height: 28px;
    background:#ccc;
    border-radius: 50px;
    cursor:pointer;
    transition: background .3s;
}

.theme-toggle label::after{    /* the thumb */
    content:'';
    position:absolute; top:3px; left:3px;
    width:22px; height:22px;
    border-radius:50%;
    background:#fff;
    transition: left .3s;
}

/* thumb slides when checked */
#theme-toggle:checked + label           { background:#3498db; }
#theme-toggle:checked + label::after    { left: calc(100% - 3px); transform: translateX(-100%); }

/* ---------- colour theme variables ---------- */
:root{
    --bg:            #ffffff;
    --text:          #000000;
    --primary:       #3498db;
    --btn-bg:        #ffffff;
    --btn-bg-hover:  var(--primary);
    --btn-text:      var(--primary);
    --btn-text-hover:#ffffff;
    --dropdown-bg:   #f9f9f9;
    --dropdown-hover:#f1f1f1;
}

/* activate dark palette when body has .dark-mode */
body.dark-mode{
    --bg:            #141414;
    --text:          #e5e5e5;
    --primary:       #90caf9;
    --btn-bg:        #1e1e1e;
    --btn-bg-hover:  var(--primary);
    --btn-text:      var(--primary);
    --btn-text-hover:#141414;
    --dropdown-bg:   #262626;
    --dropdown-hover:#333333;
}

/* --------- apply variables to existing selectors ---------- */
body            { background: var(--bg); color: var(--text); }
.tab-btn{
    background: var(--btn-bg); color: var(--btn-text); border-color: var(--primary);
    transition: background .3s, color .3s;
}
.tab-btn:hover,
.tab-btn.active{ background: var(--btn-bg-hover); color: var(--btn-text-hover); }

.dropdown-content        { background: var(--dropdown-bg); }
.dropdown-content a      { color: var(--text); }
.dropdown-content a:hover{ background: var(--dropdown-hover); }

.reference, .reference a { color: var(--primary); }

/* ---------- image inversion in dark mode ---------- */
/* Don't invert images that explicitly opt out */
body.dark-mode img.ImageMap:not(.no-dark-invert),
body.dark-mode img.invert-on-dark:not(.no-dark-invert){
  filter: invert(1) hue-rotate(180deg);
}
/* icons inside the switch */
/* track */
.theme-toggle label{
    position:relative;
    display:block;
    width:52px; height:28px;
    background:#ccc;
    border-radius:50px;
    cursor:pointer;
    transition:background .3s;
}

/* white circle that slides */
.toggle-thumb{
    position:absolute; top:3px; left:3px;
    width:22px; height:22px;
    border-radius:50%;
    background:#fff;
    display:flex;              /* centre the icon */
    align-items:center; justify-content:center;
    transition:left .3s;
    z-index:2;                 /* stays above track */
}

/* icons inside the thumb */
.toggle-thumb .bi{
    position:absolute;
    font-size:14px; line-height:1;
    transition:opacity .3s;
    pointer-events:none;
}
.sun { color:#f1c40f; opacity:1; }   /* visible in light mode */
.moon{ color:#3498db; opacity:0; }   /* hidden until dark mode */

/* dark‑mode‑on state */
#theme-toggle:checked + label{ background:#3498db; }
#theme-toggle:checked + label .toggle-thumb{
    left:calc(100% - 3px);     /* glide to the right */
    transform:translateX(-100%);
}
#theme-toggle:checked + label .sun { opacity:0; }
#theme-toggle:checked + label .moon{ opacity:1; }


/* icons in dropdown links */
.dropdown-content a svg,
.dropdown-content a i {
    width: 1em;
    height: 1em;
    margin-right: .4rem;          /* same gap as tab buttons */
    flex-shrink: 0;               /* don’t let icon collapse */
}

/* inherit colours in both themes */
.dropdown-content a svg { fill: currentColor; }
/* optional – colour Bootstrap icons too */
.dropdown-content a i { color: currentColor; }