/* =====================================================================
   Bastian's Tools — Shared Design System
   Minimal editorial: neutral palette, generous whitespace, one restrained
   accent, crisp typography. No gradients, no glassmorphism, no emoji chrome.
   Single source of truth for every tool. 
   ===================================================================== */

/* Self-hosted Inter (latin, variable weight) - no third-party font requests */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin.woff2') format('woff2');
}

:root {
    /* Neutral scale (zinc) */
    --bt-bg:            #fafafa;   /* page background            */
    --bt-surface:       #ffffff;   /* cards, panels              */
    --bt-surface-2:     #f4f4f5;   /* insets, subtle fills       */
    --bt-ink:           #18181b;   /* primary text / headings    */
    --bt-on-ink:        #ffffff;   /* text on an ink-coloured fill */
    --bt-ink-strong:    #000000;   /* hover for ink-coloured fills */
    --bt-ink-2:         #3f3f46;   /* body text                  */
    --bt-muted:         #62626a;   /* secondary / captions       */
    --bt-faint:         #a1a1aa;   /* disabled, placeholder      */
    --bt-border:        #e4e4e7;   /* hairlines, card borders    */
    --bt-border-strong: #d4d4d8;

    /* Single restrained accent */
    --bt-accent:        #2563eb;
    --bt-accent-hover:  #1d4ed8;
    --bt-accent-soft:   #eff4ff;   /* tints, selected states     */
    --bt-accent-ink:    #1e40af;

    /* Functional (muted, never neon) */
    --bt-success:       #15803d;
    --bt-success-soft:  #f0fdf4;
    --bt-warning:       #b45309;
    --bt-warning-soft:  #fffbeb;
    --bt-danger:        #b91c1c;
    --bt-danger-soft:   #fef2f2;

    /* Typography */
    --bt-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bt-mono: ui-monospace, 'SF Mono', Menlo, monospace;

    /* Radius — editorial is restrained, not pill-shaped */
    --bt-radius-sm: 6px;
    --bt-radius:    8px;
    --bt-radius-lg: 12px;

    /* Shadows — soft, low, single-layer */
    --bt-shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.05);
    --bt-shadow:    0 1px 3px rgba(24, 24, 27, 0.08), 0 1px 2px rgba(24, 24, 27, 0.04);
    --bt-shadow-lg: 0 8px 24px rgba(24, 24, 27, 0.10), 0 2px 6px rgba(24, 24, 27, 0.06);

    /* Spacing scale */
    --bt-1: 0.25rem; --bt-2: 0.5rem;  --bt-3: 0.75rem; --bt-4: 1rem;
    --bt-5: 1.5rem;  --bt-6: 2rem;    --bt-8: 3rem;    --bt-10: 4rem;

    --bt-transition: 0.15s ease;

    /* Aliases kept for legacy markup that references the old token names.
       Re-pointed to flat editorial values so old gradients become solids. */
    --primary-gradient:   var(--bt-ink);
    --secondary-gradient: var(--bt-accent);
    --accent-gradient:    var(--bt-accent);
    --orange-gradient:    var(--bt-ink);
    --neutral-gradient:   var(--bt-surface-2);
    --glass-bg:           var(--bt-surface);
    --glass-border:       var(--bt-border);
    --glass-shadow:       var(--bt-shadow);
    --text-primary:       var(--bt-ink);
    --text-secondary:     var(--bt-ink-2);
    --text-muted:         var(--bt-muted);
    --bg-primary:         var(--bt-surface);
    --bg-secondary:       var(--bt-bg);
    --border-color:       var(--bt-border);
}

[data-theme="dark"] {
    --bt-bg:            #0c0c0e;
    --bt-surface:       #161618;
    --bt-surface-2:     #1f1f23;
    --bt-ink:           #f4f4f5;
    --bt-ink-2:         #d4d4d8;
    --bt-muted:         #a1a1aa;
    --bt-faint:         #71717a;
    --bt-border:        #27272a;
    --bt-border-strong: #3f3f46;
    --bt-accent:        #60a5fa;
    --bt-accent-hover:  #93c5fd;
    --bt-accent-soft:   #18243a;
    --bt-accent-ink:    #93c5fd;
    --bt-success-soft:  #0f1f15;
    --bt-warning-soft:  #241c0e;
    --bt-danger-soft:   #2a1414;
    --bt-success:       #4ade80;
    --bt-warning:       #fbbf24;
    --bt-danger:        #f87171;
    --bt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bt-shadow:    0 1px 3px rgba(0, 0, 0, 0.5);
    --bt-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);

    --text-primary:   var(--bt-ink);
    --text-secondary: var(--bt-ink-2);
    --text-muted:     var(--bt-muted);
    --bg-primary:     var(--bt-surface);
    --bg-secondary:   var(--bt-bg);
    --border-color:   var(--bt-border);
}

/* ---------- Base ---------- */
.bt-scope, body.bt {
    font-family: var(--bt-font);
    color: var(--bt-ink-2);
    background: var(--bt-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.bt h1, .bt h2, .bt h3, .bt h4 { color: var(--bt-ink); font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bt-2);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 550;
    line-height: 1;
    padding: 0.625rem 1rem;
    border-radius: var(--bt-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--bt-transition), border-color var(--bt-transition), color var(--bt-transition), box-shadow var(--bt-transition);
}
.btn:focus-visible { outline: 2px solid var(--bt-accent); outline-offset: 2px; }
.btn svg { width: 1em; height: 1em; }

.btn-primary   { background: var(--bt-accent); color: #fff; }
.btn-primary:hover { background: var(--bt-accent-hover); }

.btn-secondary { background: var(--bt-surface); color: var(--bt-ink); border-color: var(--bt-border-strong); }
.btn-secondary:hover { background: var(--bt-surface-2); border-color: var(--bt-faint); }

.btn-ghost     { background: transparent; color: var(--bt-ink-2); }
.btn-ghost:hover { background: var(--bt-surface-2); color: var(--bt-ink); }

.btn-danger    { background: var(--bt-surface); color: var(--bt-danger); border-color: var(--bt-border-strong); }
.btn-danger:hover { background: var(--bt-danger-soft); border-color: var(--bt-danger); }

.btn-sm { padding: 0.4rem 0.7rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.8rem 1.4rem; font-size: 0.95rem; }
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; }

/* Support / "buy me a coffee" — restrained, no pulse, no neon */
.btn-support {
    display: inline-flex; align-items: center; gap: var(--bt-2);
    padding: 0.55rem 0.95rem;
    font-size: 0.8125rem; font-weight: 550;
    color: var(--bt-ink-2);
    background: var(--bt-surface);
    border: 1px solid var(--bt-border-strong);
    border-radius: var(--bt-radius-sm);
    text-decoration: none;
    transition: var(--bt-transition);
}
.btn-support:hover { background: var(--bt-surface-2); color: var(--bt-ink); border-color: var(--bt-faint); }

/* ---------- Cards & surfaces ---------- */
.bt-card {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    box-shadow: var(--bt-shadow-sm);
}
.bt-card-pad { padding: var(--bt-5); }

/* ---------- Inputs ---------- */
.bt-input, .bt input[type="text"], .bt input[type="number"], .bt input[type="email"],
.bt textarea, .bt select {
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--bt-ink);
    background: var(--bt-surface);
    border: 1px solid var(--bt-border-strong);
    border-radius: var(--bt-radius-sm);
    padding: 0.55rem 0.7rem;
    transition: border-color var(--bt-transition), box-shadow var(--bt-transition);
}
.bt-input:focus, .bt input:focus, .bt textarea:focus, .bt select:focus {
    outline: none;
    border-color: var(--bt-accent);
    box-shadow: 0 0 0 3px var(--bt-accent-soft);
}
.bt ::placeholder { color: var(--bt-faint); }

/* ---------- Badges / chips ---------- */
.bt-badge {
    display: inline-flex; align-items: center; gap: 0.35em;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--bt-surface-2);
    color: var(--bt-muted);
    border: 1px solid var(--bt-border);
}
.bt-badge-accent { background: var(--bt-accent-soft); color: var(--bt-accent-ink); border-color: transparent; }

/* Informational callout */
.bt-note {
    background: var(--bt-accent-soft);
    border: 1px solid var(--bt-border);
    border-left: 3px solid var(--bt-accent);
    border-radius: var(--bt-radius-sm);
    padding: var(--bt-3) var(--bt-4);
    color: var(--bt-ink-2);
    font-size: 0.9rem;
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Consistent "back to all tools" link injected at the top of every tool. */
.bt-topbar {
    display: flex;
    align-items: center;
    gap: var(--bt-3);
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.7rem 1.25rem;
}
.bt-home {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--bt-font);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--bt-muted);
    text-decoration: none;
    transition: color var(--bt-transition);
}
.bt-home:hover { color: var(--bt-accent); }
.bt-home svg { width: 1em; height: 1em; }

/* Floating variant for immersive full-screen tools (focus/ambient) — a small
   chip that stays readable on any background. */
.bt-back-float {
    position: fixed;
    top: 14px;
    left: 16px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    font-family: var(--bt-font);
    font-size: 0.8rem;
    font-weight: 500;
    color: #18181b;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--bt-radius-sm);
    backdrop-filter: blur(6px);
    text-decoration: none;
    transition: background var(--bt-transition);
}
.bt-back-float:hover { background: #fff; }
.bt-back-float svg { width: 1em; height: 1em; }

/* Universal support / "buy me a coffee" button — neutralise every variant
   (orange gradients, Tailwind yellow, pulse animations) regardless of markup. */
a[href*="paypal" i]:not(.bt-plain) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    width: auto !important;
    padding: 0.55rem 0.95rem !important;
    font-family: var(--bt-font) !important;
    font-size: 0.85rem !important;
    font-weight: 550 !important;
    line-height: 1 !important;
    background: var(--bt-surface) !important;
    background-image: none !important;
    color: var(--bt-ink-2) !important;
    border: 1px solid var(--bt-border-strong) !important;
    border-radius: var(--bt-radius-sm) !important;
    box-shadow: none !important;
    animation: none !important;
    transform: none !important;
    text-decoration: none !important;
}
a[href*="paypal" i]:not(.bt-plain):hover {
    background: var(--bt-surface-2) !important;
    color: var(--bt-ink) !important;
    border-color: var(--bt-faint) !important;
}
/* Single consistent coffee icon for every support button, regardless of markup.
   Hide any inline icon the source already has, then render one via mask. */
a[href*="paypal" i]:not(.bt-plain) svg { display: none !important; }
a[href*="paypal" i]:not(.bt-plain)::before {
    content: "";
    width: 1.05em;
    height: 1.05em;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M18%208h1a4%204%200%200%201%200%208h-1%27%2F%3E%3Cpath%20d%3D%27M2%208h16v9a4%204%200%200%201-4%204H6a4%204%200%200%201-4-4V8z%27%2F%3E%3Cline%20x1%3D%276%27%20y1%3D%271%27%20x2%3D%276%27%20y2%3D%274%27%2F%3E%3Cline%20x1%3D%2710%27%20y1%3D%271%27%20x2%3D%2710%27%20y2%3D%274%27%2F%3E%3Cline%20x1%3D%2714%27%20y1%3D%271%27%20x2%3D%2714%27%20y2%3D%274%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M18%208h1a4%204%200%200%201%200%208h-1%27%2F%3E%3Cpath%20d%3D%27M2%208h16v9a4%204%200%200%201-4%204H6a4%204%200%200%201-4-4V8z%27%2F%3E%3Cline%20x1%3D%276%27%20y1%3D%271%27%20x2%3D%276%27%20y2%3D%274%27%2F%3E%3Cline%20x1%3D%2710%27%20y1%3D%271%27%20x2%3D%2710%27%20y2%3D%274%27%2F%3E%3Cline%20x1%3D%2714%27%20y1%3D%271%27%20x2%3D%2714%27%20y2%3D%274%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* Affiliate disclosure (Werbekennzeichnung) shown under every reading list */
.bt-affiliate-note {
    margin: 0 0 var(--bt-4);
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--bt-muted);
}

/* =====================================================================
   Shared chrome: footer, toast, confirm dialog, print
   ===================================================================== */
.bt-footer {
    margin-top: var(--bt-10);
    padding: var(--bt-5) 1.25rem var(--bt-6);
    border-top: 1px solid var(--bt-border-strong);
    font-family: var(--bt-font);
    font-size: 0.8125rem;
    color: var(--bt-muted);
    text-align: center;
}
[data-theme="dark"] .bt-footer { color: #a1a1aa; }
.bt-footer-inner { max-width: 1280px; margin: 0 auto; }
.bt-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.25rem; margin-bottom: var(--bt-2); }
.bt-footer a { color: inherit; text-decoration: none; }
.bt-footer a:hover, .bt-footer a:focus-visible { color: var(--bt-ink); text-decoration: underline; }
[data-theme="dark"] .bt-footer a:hover { color: #f4f4f5; }
.bt-footer p { margin: 0; }

.bt-toasts {
    position: fixed; z-index: 9999; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
    display: flex; flex-direction: column; gap: 0.5rem; align-items: center; pointer-events: none;
    width: max-content; max-width: calc(100vw - 2rem);
}
.bt-toast {
    pointer-events: auto;
    background: var(--bt-ink); color: var(--bt-on-ink); padding: 0.6rem 1rem; border-radius: var(--bt-radius);
    font: 500 0.875rem/1.4 var(--bt-font); box-shadow: var(--bt-shadow-lg);
    animation: bt-toast-in 0.18s ease-out;
}
.bt-toast { display: flex; align-items: center; gap: 0.75rem; }
.bt-toast-action { font: 700 0.8125rem var(--bt-font); color: var(--bt-on-ink); background: transparent; border: 1px solid currentColor; border-radius: var(--bt-radius-sm); padding: 0.15rem 0.55rem; cursor: pointer; }
.bt-toast-action:hover { background: rgba(127,127,127,0.25); }
.bt-toast[data-kind="error"] { background: var(--bt-danger); }
.bt-toast[data-kind="success"] { background: var(--bt-success); }
@keyframes bt-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

dialog.bt-dialog {
    border: 1px solid var(--bt-border); border-radius: var(--bt-radius-lg); padding: 1.5rem;
    max-width: min(28rem, calc(100vw - 2rem)); font-family: var(--bt-font); color: var(--bt-ink-2);
    background: var(--bt-surface); box-shadow: var(--bt-shadow-lg);
}
dialog.bt-dialog::backdrop { background: rgba(24, 24, 27, 0.45); }
.bt-dialog h2 { margin: 0 0 0.5rem; font-size: 1.1rem; color: var(--bt-ink); }
.bt-dialog p { margin: 0 0 1.25rem; font-size: 0.95rem; line-height: 1.5; }
.bt-dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.bt-btn {
    font: 600 0.875rem var(--bt-font); padding: 0.55rem 1rem; border-radius: var(--bt-radius);
    border: 1px solid var(--bt-border-strong); background: var(--bt-surface); color: var(--bt-ink); cursor: pointer;
}
.bt-btn:hover { background: var(--bt-surface-2); }
.bt-btn:focus-visible { outline: 2px solid var(--bt-accent); outline-offset: 2px; }
.bt-btn-primary { background: var(--bt-ink); border-color: var(--bt-ink); color: var(--bt-on-ink); }
.bt-btn-primary:hover { background: var(--bt-ink-strong); }
.bt-btn-danger { background: var(--bt-danger); border-color: var(--bt-danger); color: #fff; }
.bt-btn-danger:hover { background: #991b1b; }

@media (prefers-reduced-motion: reduce) {
    .bt-toast { animation: none; }
}

/* Print: worksheets and canvases are meant to be printed, so drop the app chrome. */
@media print {
    .bt-topbar, .bt-footer, .bt-toasts, .no-print, button, [type="file"] { display: none !important; }
    body { background: #fff !important; }
    .bt-print-keep { display: block !important; }
    a[href^="http"]::after { content: none !important; }
}


/* ---- Dark theme (screen only; printing always uses the light tokens) ------- */
@media screen {
    :root[data-theme="dark"][data-themable] {
        color-scheme: dark;
        --bt-bg: #111113; --bt-surface: #1a1a1d; --bt-surface-2: #242428;
        --bt-ink: #f4f4f5; --bt-ink-2: #d4d4d8; --bt-muted: #a1a1aa; --bt-faint: #71717a;
        --bt-on-ink: #111113; --bt-ink-strong: #ffffff;
        --bt-border: #2e2e33; --bt-border-strong: #44444a;
        --bt-accent: #60a5fa; --bt-accent-hover: #93c5fd; --bt-accent-soft: #15233f; --bt-accent-ink: #bfdbfe;
        --bt-success: #4ade80; --bt-success-soft: #052e16; --bt-warning: #fbbf24; --bt-warning-soft: #422006; --bt-danger: #f87171; --bt-danger-soft: #3b1111;
        --bt-shadow-sm: 0 1px 2px rgba(0,0,0,.5); --bt-shadow: 0 1px 3px rgba(0,0,0,.55); --bt-shadow-lg: 0 8px 24px rgba(0,0,0,.6);
    }
}
.bt-theme-toggle { margin-left: auto; font: 500 0.8rem var(--bt-font); color: var(--bt-muted); background: transparent; border: 1px solid var(--bt-border-strong); border-radius: 999px; padding: 0.25rem 0.75rem; cursor: pointer; }
.bt-theme-toggle:hover { color: var(--bt-ink); border-color: var(--bt-ink); }

/* ---- Accessibility baseline for every page --------------------------------- */
.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; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--bt-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

[data-theme="dark"] .btn-primary { color: #0b1220; }