/* ================================================================== *
 * base.css — Namle design system
 *
 * Aesthetic: "editorial puzzle" — clean, literary, precise.
 * Inspired by Wordle / Semantle / NYT Games: strong whitespace,
 * neutral palette, minimal chrome, satisfying micro-interactions.
 * ================================================================== */

/* ── Design tokens ───────────────────────────────────────────────── */
:root {
    /* Palette */
    --color-ink:        #16161a;
    --color-ink-2:      #5c5c6e;
    --color-ink-3:      #9898a8;
    --color-surface:    #ffffff;
    --color-bg:         #f7f7fa;
    --color-border:     #e2e2eb;
    --color-accent:     #3a6df0;
    --color-accent-dk:  #2f55c7;
    --color-success:    #1a7f4b;
    --color-error:      #c0392b;
    --color-warn:       #d97706;

    /* Typography */
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Lora', Georgia, 'Times New Roman', serif;

    --text-xs:   0.70rem;   /*  11.2px */
    --text-sm:   0.825rem;  /*  13.2px */
    --text-base: 0.9375rem; /*  15px   */
    --text-lg:   1.0625rem; /*  17px   */
    --text-xl:   1.25rem;   /*  20px   */
    --text-2xl:  1.625rem;  /*  26px   */
    --text-3xl:  2rem;      /*  32px   */

    /* Spacing scale */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  40px;
    --space-2xl: 64px;

    /* Layout */
    --max-width: 680px;
    --radius:    6px;
    --radius-sm: 3px;
    --radius-lg: 10px;
}

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

body {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--text-base);
    line-height: 1.55;
    background:  var(--color-bg);
    color:       var(--color-ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 var(--space-md);
    color: var(--color-ink);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl);  margin: var(--space-lg) 0 var(--space-sm); }
h3 { font-size: var(--text-lg);  margin: var(--space-md) 0 var(--space-xs); }

p  { margin: 0 0 var(--space-md); }

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

/* ── Site header ─────────────────────────────────────────────────── */
.site-header {
    text-align: center;
    padding: var(--space-lg) var(--space-md) var(--space-md);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.site-wordmark {
    font-family: var(--font-display);
    font-size:   var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color:       var(--color-ink);
    text-decoration: none;
}

.site-wordmark:hover { text-decoration: none; }

/* ── Site nav ────────────────────────────────────────────────────── */
.site-nav {
    display:         flex;
    justify-content: center;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             var(--space-xs) var(--space-lg);
    padding:         var(--space-sm) var(--space-md);
    background:      var(--color-surface);
    border-bottom:   1px solid var(--color-border);
}

.site-nav a {
    font-size:   var(--text-sm);
    font-weight: 600;
    color:       var(--color-ink-2);
    text-decoration: none;
    padding:     var(--space-xs) 0;
    border-bottom: 2px solid transparent;
    transition:  color 0.12s, border-color 0.12s;
    white-space: nowrap;
}

.site-nav a:hover,
.site-nav a.active {
    color:        var(--color-ink);
    text-decoration: none;
}

.site-nav a.active {
    border-bottom-color: var(--color-accent);
    color: var(--color-accent);
}

/* ── Page layout ─────────────────────────────────────────────────── */
.page-wrap {
    max-width:  var(--max-width);
    margin:     0 auto;
    padding:    var(--space-2xl) var(--space-md) var(--space-2xl);
}

/* Wide pages (e.g. t-SNE map) can override --max-width inline */
.page-wrap--wide {
    max-width: 1060px;
}

/* ── Page title ──────────────────────────────────────────────────── */
.page-title {
    font-family: var(--font-display);
    font-size:   var(--text-2xl);
    font-weight: 700;
    text-align:  center;
    margin:      0 0 var(--space-2xl);
    color:       var(--color-ink);
    letter-spacing: -0.01em;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
button {
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    gap:         var(--space-xs);
    padding:     10px 20px;
    min-height:  44px;   /* WCAG 2.5.5 touch target */
    font-family: var(--font-body);
    font-size:   var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    background:  var(--color-ink);
    color:       var(--color-surface);
    border:      none;
    border-radius: var(--radius);
    cursor:      pointer;
    transition:  background 0.12s, opacity 0.12s;
    white-space: nowrap;
    user-select: none;
}

button:hover  { background: #2e2e36; }
button:active { background: #16161a; transform: translateY(1px); }

button:disabled {
    opacity: 0.45;
    cursor:  not-allowed;
    transform: none;
}

/* Accent variant (for secondary/less prominent actions) */
.btn-accent {
    background: var(--color-accent);
}
.btn-accent:hover { background: var(--color-accent-dk); }

/* Ghost variant */
.btn-ghost {
    background:   transparent;
    color:        var(--color-ink-2);
    border:       1.5px solid var(--color-border);
}
.btn-ghost:hover {
    background: var(--color-bg);
    border-color: var(--color-ink-3);
    color: var(--color-ink);
}

/* Success / error tinted buttons */
.btn-success { background: var(--color-success); }
.btn-success:hover { background: #155f38; }

.btn-danger  { background: var(--color-error); }
.btn-danger:hover { background: #a93226; }

/* ── Inputs ──────────────────────────────────────────────────────── */
input[type="text"],
input[type="search"] {
    padding:      10px 12px;
    min-height:   44px;   /* WCAG 2.5.5 touch target */
    font-family:  var(--font-body);
    font-size:    var(--text-base);
    color:        var(--color-ink);
    background:   var(--color-surface);
    border:       1.5px solid var(--color-border);
    border-radius: var(--radius);
    outline:      none;
    transition:   border-color 0.12s, box-shadow 0.12s;
    width:        100%;
}

input[type="text"]:focus,
input[type="search"]:focus {
    border-color: var(--color-ink);
    box-shadow:   0 0 0 3px rgba(22, 22, 26, 0.08);
}

input[type="text"]::placeholder { color: var(--color-ink-3); }

/* ── Card / panel ────────────────────────────────────────────────── */
.card {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding:       var(--space-lg);
}

/* ── Divider ─────────────────────────────────────────────────────── */
hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-lg) 0;
}

/* ── Empty state ─────────────────────────────────────────────────── */
.empty-state {
    text-align:  center;
    padding:     var(--space-2xl) var(--space-md);
    color:       var(--color-ink-3);
    font-family: var(--font-display);
    font-style:  italic;
    font-size:   var(--text-lg);
}

/* ── Shared spinner ──────────────────────────────────────────────── */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner {
    display:       inline-block;
    width:         14px;
    height:        14px;
    border:        2px solid rgba(255, 255, 255, 0.35);
    border-top-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    animation:     spin 0.65s linear infinite;
    vertical-align: middle;
    flex-shrink:   0;
}

/* Dark spinner (on light backgrounds) */
.spinner--dark {
    border-color:     rgba(22, 22, 26, 0.15);
    border-top-color: var(--color-ink-2);
}

/* Full-area loading overlay */
.loading-overlay {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-sm);
    padding:         var(--space-2xl) var(--space-md);
    color:           var(--color-ink-2);
    font-size:       var(--text-sm);
}

/* ── Toast notifications ─────────────────────────────────────────── */
#toast-container {
    position:   fixed;
    top:        0;
    left:       50%;
    transform:  translateX(-50%);
    z-index:    9999;
    display:    flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    width:      min(460px, 92vw);
}

.toast {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-sm);
    padding:       10px 18px;
    margin-top:    var(--space-sm);
    background:    var(--color-ink);
    color:         var(--color-surface);
    border-radius: var(--radius-lg);
    font-size:     var(--text-sm);
    font-weight:   600;
    box-shadow:    0 4px 20px rgba(0, 0, 0, 0.18);
    pointer-events: auto;
    /* Slide-in from above */
    animation: toastIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.toast.toast--out {
    animation: toastOut 0.18s ease-in forwards;
}

.toast--success { background: #145c38; }
.toast--error   { background: #9b2c22; }
.toast--info    { background: #1d4db8; }
.toast--warn    { background: #92520d; }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-16px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateY(0);    }
    to   { opacity: 0; transform: translateY(-8px); }
}

/* ── Utility ─────────────────────────────────────────────────────── */
[hidden] { display: none !important; }

.text-center { text-align: center; }
.text-muted  { color: var(--color-ink-3); }

.meta-line {
    font-size: var(--text-sm);
    color:     var(--color-ink-2);
    margin:    0 0 var(--space-md);
}

/* ================================================================== *
 * Dark mode — token overrides
 * ================================================================== */
[data-theme="dark"] {
    --color-ink:       #e0e0ec;
    --color-ink-2:     #9898b0;
    --color-ink-3:     #58586e;
    --color-surface:   #1c1c24;
    --color-bg:        #12121a;
    --color-border:    #2c2c3c;
    --color-accent:    #6080f8;
    --color-accent-dk: #4a65d8;
    --color-success:   #24a865;
    --color-error:     #e05555;
    --color-warn:      #e8982a;
}

/* Default button is dark-bg/light-text in light mode → light-bg/dark-text in dark mode.
   Override the hardcoded hover/active colours to match the flipped appearance. */
[data-theme="dark"] button:hover  { background: #c8c8dc; }
[data-theme="dark"] button:active { background: #b0b0cc; }

/* Spinners inside buttons become dark (button bg is now light in dark mode) */
[data-theme="dark"] button .spinner {
    border-color:     rgba(22, 22, 26, 0.22);
    border-top-color: rgba(22, 22, 26, 0.75);
}

/* Ghost buttons need no bg change in dark mode — keep transparent */
[data-theme="dark"] .dark-mode-btn,
[data-theme="dark"] .btn-ghost {
    background:   transparent;
    border-color: var(--color-border);
    color:        var(--color-ink-2);
}
[data-theme="dark"] .dark-mode-btn:hover,
[data-theme="dark"] .btn-ghost:hover {
    background:   var(--color-surface);
    border-color: var(--color-ink-3);
    color:        var(--color-ink);
}

/* Focus ring adjustment for dark inputs */
[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="search"]:focus {
    border-color: var(--color-ink-3);
    box-shadow:   0 0 0 3px rgba(255, 255, 255, 0.07);
}

/* ================================================================== *
 * Dark mode toggle button
 * ================================================================== */
.site-header { position: relative; }

.dark-mode-btn {
    position:    absolute;
    right:       var(--space-md);
    top:         50%;
    transform:   translateY(-50%);
    background:  transparent;
    border:      1.5px solid var(--color-border);
    color:       var(--color-ink-2);
    padding:     5px 10px;
    min-height:  36px;
    font-size:   1.05rem;
    line-height: 1;
}

.dark-mode-btn:hover {
    background: var(--color-bg);
    color:      var(--color-ink);
}

/* ================================================================== *
 * About section (collapsible <details> element)
 * ================================================================== */
.about-section {
    margin:        var(--space-xl) 0 0;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:    var(--color-surface);
    overflow:      hidden;
}

.about-section summary {
    cursor:          pointer;
    padding:         var(--space-md) var(--space-lg);
    font-size:       var(--text-sm);
    font-weight:     600;
    color:           var(--color-ink-2);
    list-style:      none;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-md);
    user-select:     none;
    transition:      color 0.12s;
}

.about-section summary:hover { color: var(--color-ink); }
.about-section summary::-webkit-details-marker { display: none; }

.about-section summary::after {
    content:     '›';
    font-size:   var(--text-xl);
    line-height: 1;
    transition:  transform 0.2s;
    color:       var(--color-ink-3);
    flex-shrink: 0;
}

.about-section[open] summary::after { transform: rotate(90deg); }

.about-body {
    padding:    var(--space-md) var(--space-lg) var(--space-lg);
    font-size:  var(--text-sm);
    color:      var(--color-ink-2);
    line-height: 1.65;
    border-top: 1px solid var(--color-border);
}

.about-body h3 {
    font-size:      var(--text-sm);
    font-family:    var(--font-body);
    font-weight:    700;
    color:          var(--color-ink);
    margin:         var(--space-md) 0 var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.about-body h3:first-child { margin-top: 0; }

.about-body p   { margin: 0 0 var(--space-sm); }
.about-body p:last-child { margin-bottom: 0; }
.about-body a   { color: var(--color-accent); }

/* ── Autocomplete (shared across pages) ──────────────────────────── */
.ac-wrap {
    position:  relative;
    flex:      1;
    min-width: 0;
}

.ac-list {
    position:      absolute;
    top:           calc(100% + 4px);
    left:          0;
    right:         0;
    z-index:       100;
    background:    var(--color-surface);
    border:        1.5px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow:    0 4px 18px rgba(0, 0, 0, 0.10);
    list-style:    none;
    padding:       4px 0;
    margin:        0;
    max-height:    320px;
    overflow-y:    auto;
    -webkit-overflow-scrolling: touch;
}

.ac-item {
    padding:    10px 14px;
    cursor:     pointer;
    font-size:  var(--text-base);
    color:      var(--color-ink);
    transition: background 0.08s, color 0.08s;
}

.ac-item:hover,
.ac-item--active {
    background: var(--color-bg);
    color:      var(--color-accent);
}

[data-theme="dark"] .ac-list {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.40);
}

[data-theme="dark"] .ac-item:hover,
[data-theme="dark"] .ac-item--active {
    background: var(--color-bg);
}