/* ── foundation: tokens, theme, shell. modules add their own css/<name>.css ── */
:root {
    --bg: #0a0a0a;
    --panel: #0d1117;
    --fg: #b9c0c8;
    --dim: #8b93a0;
    --line: #20262d;
    --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

    /* section colors (also used to tint the nav, as a legend) */
    --c-green: #7ee787;
    --c-white: #e6edf3;
    --c-blue: #6cb6ff;
    --c-purple: #bd9bf9;
    --c-orange: #ffa657;
    --c-cyan: #56d4dd;

    --accent: var(--c-green);
}

body[data-section="home"]      { --accent: var(--c-cyan); }
body[data-section="portfolio"] { --accent: var(--c-white); }
body[data-section="social"]    { --accent: var(--c-blue); }
body[data-section="quote"]     { --accent: var(--c-purple); }
body[data-section="gear"]      { --accent: var(--c-orange); }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--mono);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main {
    max-width: 60rem;
    margin: 0 auto;
    padding: 9vh 1.5rem 6rem;
    position: relative;
    z-index: 1;
}

/* ascii globe background (js/globe.js) — fixed, behind all content */
.fw-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fw-bg-canvas { position: absolute; top: 0; left: 0; }

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

:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 2px; }

/* ── header + nav ── */
header { margin-bottom: 2.5rem; }

h1 { font-size: 1rem; font-weight: 500; color: var(--fg); margin-bottom: 0.6rem; }

.brand { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
.brand h1 { margin-bottom: 0; }
.avatar {
    width: 2.7rem; height: 2.7rem;
    border-radius: 2px;
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--panel);
    flex: 0 0 auto;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: 0.95rem;
}
.nav a { opacity: 0.5; transition: opacity 0.12s ease; }
.nav a:hover { opacity: 0.85; text-decoration: none; }
.nav a.is-active { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }

.nav a[data-nav="home"]          { color: var(--c-cyan); }
.nav a[data-nav="qualifications"] { color: var(--c-green); }
.nav a[data-nav="portfolio"]     { color: var(--c-white); }
.nav a[data-nav="social"]        { color: var(--c-blue); }
.nav a[data-nav="quote"]         { color: var(--c-purple); }
.nav a[data-nav="gear"]          { color: var(--c-orange); }

/* ── sections ── */
.section[hidden] { display: none; }
.section-inner { min-height: 40vh; }

/* shared list style used by simple sections (qualifications, social) */
.kv { list-style: none; }
.kv li { display: flex; gap: 1.25rem; align-items: baseline; padding: 0.2rem 0; }
.kv .k { color: var(--accent); flex: 0 0 15rem; }
.kv .v { color: var(--fg); flex: 1; }

/* social: platform links (no repeated username) */
.social-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.social-list li { padding: 0.12rem 0; }
.social-link { color: var(--accent); font-size: 1rem; }
.social-link::after { content: " \2197"; color: var(--dim); font-size: 0.75em; }
.social-link:hover { text-decoration: underline; }

/* minimal contact form */
.contact { max-width: 30rem; }
.contact-h { color: var(--accent); font-size: 0.9rem; border-top: 1px solid var(--line); padding-top: 1rem; margin-bottom: 0.6rem; }
.contact-row { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.6rem; }
.contact-row span { color: var(--dim); font-size: 0.82rem; }
.contact input, .contact textarea { font: inherit; font-size: 0.9rem; color: var(--fg); background: var(--panel); border: 1px solid var(--line); padding: 0.4rem 0.5rem; width: 100%; }
.contact input:focus, .contact textarea:focus { outline: none; border-color: var(--accent); }
.contact textarea { resize: vertical; }
.contact-send { font: inherit; font-size: 0.9rem; color: var(--bg); background: var(--accent); border: 0; padding: 0.4rem 1rem; cursor: pointer; margin-top: 0.2rem; }
.contact-send:hover { filter: brightness(1.08); }
.contact-or { color: var(--dim); font-size: 0.82rem; margin-top: 0.75rem; }
.contact-or a { color: var(--accent); }
/* qualifications: numbered, one palette color per hat (set inline) */
.qual-list li { gap: 0.9rem; }
.qual-list .k { flex-basis: 13rem; font-weight: 500; }
.kv-i { flex: 0 0 1.6rem; color: var(--dim); opacity: 0.5; font-size: 0.82rem; }

.section-hint { color: var(--dim); margin-bottom: 1.5rem; font-size: 0.9rem; }

/* inline text editor (localhost only) */
body.fw-editable [data-edit]:hover { outline: 1px dashed var(--dim); outline-offset: 3px; cursor: text; }
[data-edit].fw-editing { outline: 1px solid var(--accent) !important; outline-offset: 3px; background: rgba(255, 255, 255, 0.04); }
[data-edit].fw-saved { outline: 1px solid var(--c-green) !important; outline-offset: 3px; }
[data-edit].fw-failed { outline: 1px solid var(--c-orange) !important; outline-offset: 3px; }

footer { margin-top: 3.5rem; color: var(--dim); }

/* ── shared scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

@media (max-width: 700px) {
    main { padding: 6vh 1.1rem 4rem; }
    .kv li { flex-direction: column; gap: 0; padding: 0.5rem 0; }
    .kv .k { flex: none; }
    .nav { gap: 0.9rem; font-size: 0.9rem; }
}