/* ==========================================================================
   Base: reset, document, layout shell, typography.
   Depends on tokens.css. Declares no raw colours.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    font-weight: 400;
    /* A faint grid, which is what stops the large dark surfaces from reading
       as flat. Two gradients rather than an image keeps it themable. */
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 44px 44px, 44px 44px;
    min-height: 100vh;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; margin: 0 0 var(--sp-3); }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }

p { margin: 0 0 var(--sp-3); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, .mono, kbd { font-family: var(--font-mono); font-size: .92em; }
code { background: var(--code-bg); padding: .1em .35em; border-radius: 4px; }
pre {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: var(--sp-4);
    overflow: auto; margin: 0 0 var(--sp-4); max-height: 60vh;
}
pre code { background: none; padding: 0; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; }

/* Focus is never removed, only restyled: this is a keyboard-heavy admin tool. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Screen-reader-only, used for flag country names and icon labels. */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* The inlined flag <symbol> definitions. Must not occupy layout. */
.flag-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- app shell ------------------------------------------------------------ */

.shell { display: flex; min-height: 100vh; }

.side {
    width: var(--side-w); flex: 0 0 var(--side-w);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    backdrop-filter: blur(6px);
}

.brand {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    border-bottom: 1px solid var(--border);
    min-height: var(--header-h);
}
.brand svg { width: 30px; height: 30px; flex: 0 0 30px; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-txt b {
    font-family: var(--font-display); font-size: 14px; font-weight: 400;
    letter-spacing: .02em; white-space: nowrap;
}
.brand-txt span { font-size: 10px; color: var(--text-faint); letter-spacing: .1em; text-transform: uppercase; }

.nav { padding: var(--sp-3) var(--sp-2); overflow-y: auto; flex: 1; }
.nav-group { margin-bottom: var(--sp-4); }
.nav-group > h4 { padding: 0 var(--sp-3); margin: 0 0 var(--sp-2); font-size: 10px; }
.nav a {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 7px var(--sp-3); border-radius: var(--radius-sm);
    color: var(--text-dim); font-size: 13px;
    transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.nav a:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.nav a.on { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.nav a svg { width: 16px; height: 16px; flex: 0 0 16px; }
.nav a .badge { margin-left: auto; }

.side-foot {
    border-top: 1px solid var(--border); padding: var(--sp-3);
    font-size: 11px; color: var(--text-faint);
    display: flex; align-items: center; gap: var(--sp-2);
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    height: var(--header-h); flex: 0 0 var(--header-h);
    display: flex; align-items: center; gap: var(--sp-4);
    padding: 0 var(--sp-5);
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 74%, transparent);
    backdrop-filter: blur(6px);
    position: sticky; top: 0; z-index: 20;
}
.topbar h1 { margin: 0; font-size: 16px; }
.topbar .spacer { flex: 1; }

.content { padding: var(--sp-5); max-width: var(--wrap); width: 100%; }

/* --- utility -------------------------------------------------------------- */

.row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.row.tight { gap: var(--sp-2); }
.row.mid { align-items: center; }
.row.end { justify-content: flex-end; }
.col { display: flex; flex-direction: column; gap: var(--sp-4); }
.grow { flex: 1; min-width: 0; }
.right { margin-left: auto; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }
.big { font-size: 22px; font-family: var(--font-display); }

.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt3 { margin-top: var(--sp-3); } .mb3 { margin-bottom: var(--sp-3); }
.mt5 { margin-top: var(--sp-5); } .mb5 { margin-bottom: var(--sp-5); }

.hide { display: none !important; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }

@media (max-width: 1200px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) {
    .side { position: fixed; left: -100%; z-index: 60; transition: left var(--speed) var(--ease); }
    .side.open { left: 0; }
    .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .content { padding: var(--sp-4); }
}
@media (max-width: 640px) {
    .grid-4 { grid-template-columns: 1fr; }
}

/* Respect a reduced-motion preference for every transition in the app. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}