/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
    --color-primary:    #09D;
    --color-primary-dk: #046;
    --color-primary-hv: #0092DB;
    --color-accent:     #4CAF50;
    --color-text:       #333;
    --color-bg-stripe:  #f2f2f2;
    --color-border:     #ddd;
    --nav-width:        200px;
    --content-max:      800px;
    --radius:           8px;
}

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    color: var(--color-text);
}

h1, h2, h3 {
    color: var(--color-text);
    margin-top: 0;
}

h2 {
    margin-bottom: 10px;
    margin-top:    10px;
    padding-top:   10px;
    border-top:    1px solid var(--color-border);
    clear: both;
}

/* ── Navigation ───────────────────────────────────────────────────────────── */
.topnav {
    list-style: none;
    margin:  0;
    padding: 0;
    padding-top: 5%;
    width:    var(--nav-width);
    background: var(--color-primary);
    position: fixed;
    top:    0;
    left:   0;
    height: 100%;
    overflow-y: auto;
}

.topnav li a {
    display: block;
    color:   #fff;
    padding: 8px 16px;
    text-decoration: none;
    transition: background 0.15s;
}

.topnav li a:hover:not(.active) { background: var(--color-primary-dk); }
.topnav li a.active             { background: var(--color-accent); }

/* Hidden by default — shown only in mobile */
.topnav li.icon,
.topnav li.active { display: none; }

/* ── Content ──────────────────────────────────────────────────────────────── */
.content {
    margin-left:  var(--nav-width);
    padding:      10px 20px;
    max-width:    calc(var(--nav-width) + var(--content-max));
}

.content a {
    color: var(--color-primary);
    border-radius: 3px;
    transition: background 0.15s, color 0.15s;
}

.content a:hover {
    background: var(--color-primary-hv);
    color: #fff;
}

/* ── Button ───────────────────────────────────────────────────────────────── */
.button {
    display:         inline-block;
    background:      var(--color-primary);
    color:           #fff;
    border:          none;
    border-radius:   var(--radius);
    padding:         12px 28px;
    font-size:       1rem;
    text-decoration: none;
    text-align:      center;
    cursor:          pointer;
    transition:      background 0.15s;
}

.button:hover { background: var(--color-primary-dk); }

/* ── Table ────────────────────────────────────────────────────────────────── */
table {
    border-collapse: collapse;
    width: 100%;
}

tr:nth-of-type(odd) { background: var(--color-bg-stripe); }

td {
    padding: 6px 8px;
    border:  1px solid var(--color-border);
}

/* ── Tooltip ──────────────────────────────────────────────────────────────── */
.tooltip {
    position:      relative;
    display:       inline-block;
    border-bottom: 1px dotted currentColor;
    cursor:        help;
}

.tooltip .tooltiptext {
    visibility:    hidden;
    opacity:       0;
    width:         140px;
    background:    #333;
    color:         #fff;
    font-size:     0.85rem;
    text-align:    center;
    padding:       6px 8px;
    border-radius: var(--radius);
    position:      absolute;
    bottom:        130%;
    left:          50%;
    transform:     translateX(-50%);
    z-index:       10;
    transition:    opacity 0.2s;
    pointer-events: none;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity:    1;
}

/* ── Up arrow ─────────────────────────────────────────────────────────────── */
a.up {
    display:         none;
    text-decoration: none;
    color:           var(--color-primary);
}

/* ── Grand ────────────────────────────────────────────────────────────────── */
.grand {
    font-size:   4rem;
    font-weight: bold;
}

/* ── Responsive: tablet (≤ 800px) ────────────────────────────────────────── */
@media (max-width: 800px) {
    a.up { display: inline; }

    .topnav {
        position:    static;
        width:       100%;
        padding-top: 0;
        height:      auto;
        display:     flex;
        flex-wrap:   wrap;
        align-items: center;
    }

    .topnav li           { display: none; }
    .topnav li:first-child,
    .topnav li.icon      { display: block; }

    .topnav li.icon      { margin-left: auto; }

    .topnav.responsive li         { display: block; width: 100%; }
    .topnav.responsive li.icon    { position: absolute; right: 0; top: 0; }

    .content {
        margin-left: 0;
        padding-top: 5px;
        max-width:   100%;
    }
}

/* ── Responsive: mobile (≤ 600px) ────────────────────────────────────────── */
@media (max-width: 600px) {
    .topnav { overflow: hidden; }

    td { padding: 4px 6px; font-size: 0.9rem; }
}