/* UX Kritik — shared design tokens & components (landing, auth, share, test, legal, admin) */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  --ink:#1b1a46; --ink-2:#3d3c6b; --ink-3:#5e5d86;
  --paper:#f4f5fc; --paper-2:#e9eaf6; --card:#ffffff;
  --line:#d7d8ea; --line-2:#c3c4de;
  --brand:#5856d6; --brand-ink:#4442c4; --brand-soft:#e7e7fb;
  --hi:#ffd23f; --hi-soft:#fff3c4;
  --coral:#d63c41; --coral-soft:#fde8e8;
  --leaf:#17803f; --leaf-soft:#e2f5e9;
  --amber:#a15c00; --amber-soft:#fdf0dc;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Atkinson Hyperlegible',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --r-s:8px; --r:14px; --r-l:24px;
  --focus:0 0 0 3px var(--paper),0 0 0 6px var(--brand);
}
html[data-theme="dark"]{
  --ink:#ecebff; --ink-2:#c4c3e6; --ink-3:#9d9cc4;
  --paper:#13122b; --paper-2:#1c1b3a; --card:#1f1e40;
  --line:#2f2e57; --line-2:#3e3d6c;
  --brand:#8b8af0; --brand-ink:#a9a8ff; --brand-soft:#2a2960;
  --hi-soft:#3d3416; --coral:#ff8589; --coral-soft:#3d1d25; --leaf:#5fd690; --leaf-soft:#173527; --amber:#ffbd5c; --amber-soft:#3a2a12;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);line-height:1.08;letter-spacing:-.02em;margin:0 0 .5em;font-weight:800}
p{margin:0 0 1em}
a{color:var(--brand-ink)}
img{max-width:100%;display:block}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:999;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:700}
.skip:focus{top:12px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}

/* Buttons */
.btn{--bg:var(--card);--fg:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;border-radius:12px;border:2px solid var(--ink);background:var(--bg);color:var(--fg);font:700 16px/1 var(--body);text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:none;box-shadow:none}
.btn-primary{--bg:var(--brand);--fg:#fff;border-color:var(--ink)}
html[data-theme="dark"] .btn-primary{--fg:#13122b}
.btn-hi{--bg:var(--hi);--fg:#1b1a46}
.btn-ghost{border-color:transparent;--bg:transparent}
.btn-ghost:hover{box-shadow:none;transform:none;background:var(--paper-2)}
.btn-sm{min-height:38px;padding:0 14px;font-size:14px;border-radius:10px}
.btn-danger{--bg:var(--coral);--fg:#fff}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn svg{width:18px;height:18px;flex-shrink:0}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-weight:700;font-size:15px}
.field .hint{font-size:14px;color:var(--ink-3)}
.input,select.input,textarea.input{width:100%;min-height:48px;padding:11px 14px;border:2px solid var(--line-2);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-size:16px;transition:border-color .15s}
textarea.input{min-height:110px;resize:vertical;line-height:1.55}
.input:hover{border-color:var(--ink-3)}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;margin-bottom:12px;cursor:pointer}
.check input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--brand);flex-shrink:0}
.alert{padding:12px 16px;border-radius:12px;border:2px solid;font-size:15px;margin-bottom:16px}
.alert-error{border-color:var(--coral);background:var(--coral-soft);color:var(--ink)}
.alert-ok{border-color:var(--leaf);background:var(--leaf-soft);color:var(--ink)}
.alert-info{border-color:var(--brand);background:var(--brand-soft);color:var(--ink)}

/* Logo */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:800 21px/1 var(--display);letter-spacing:-.03em}
.logo-mark{width:36px;height:36px;border-radius:11px;background:var(--brand);display:grid;place-items:center;border:2px solid var(--ink)}
.logo-mark svg{width:20px;height:20px;color:#fff}

/* Mascot */
.iris{display:inline-block;overflow:visible}
.iris .lid{transform-origin:50% 50%;transform-box:fill-box;animation:blink 5.5s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(0)}95%{transform:scaleY(1)}}
.iris .bob{animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px)}}

/* Footer */
.foot{border-top:2px solid var(--line);padding:36px 0 48px;font-size:15px;color:var(--ink-3)}
.foot a{color:var(--ink-2)}
.foot-row{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.foot nav{display:flex;flex-wrap:wrap;gap:18px}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:var(--paper);padding:12px 20px;border-radius:12px;font-weight:700;z-index:9999;transition:.25s;pointer-events:none;max-width:92vw}
.toast.show{opacity:1;transform:translate(-50%,0)}

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

/* ── Branded scrollbars (Firefox + Chromium/Safari) ── */
html{scrollbar-color:var(--brand) var(--paper-2);scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--brand);border-radius:99px;border:3px solid var(--paper-2);min-height:40px}
::-webkit-scrollbar-thumb:hover{background:var(--brand-ink)}
::-webkit-scrollbar-thumb:active{background:var(--hi)}
::-webkit-scrollbar-corner{background:var(--paper-2)}
/* Inner panels (sidebar, mentor chat, lists) get a slimmer bar on their own background */
.side-nav,.m-log,.pal-list,.sticky-col,.modal-box,.menu,.tw,pre{scrollbar-width:thin;scrollbar-color:var(--brand) transparent}
.side-nav::-webkit-scrollbar,.m-log::-webkit-scrollbar,.pal-list::-webkit-scrollbar,.sticky-col::-webkit-scrollbar,.modal-box::-webkit-scrollbar,.tw::-webkit-scrollbar,pre::-webkit-scrollbar{width:8px;height:8px}
.side-nav::-webkit-scrollbar-track,.m-log::-webkit-scrollbar-track,.pal-list::-webkit-scrollbar-track,.sticky-col::-webkit-scrollbar-track,.modal-box::-webkit-scrollbar-track,.tw::-webkit-scrollbar-track,pre::-webkit-scrollbar-track{background:transparent}
.side-nav::-webkit-scrollbar-thumb,.m-log::-webkit-scrollbar-thumb,.pal-list::-webkit-scrollbar-thumb,.sticky-col::-webkit-scrollbar-thumb,.modal-box::-webkit-scrollbar-thumb,.tw::-webkit-scrollbar-thumb,pre::-webkit-scrollbar-thumb{border:2px solid transparent;background-clip:padding-box}
/* Admin sidebar is always dark */
.aside{scrollbar-width:thin;scrollbar-color:#8b8af0 transparent}
.aside::-webkit-scrollbar{width:8px}.aside::-webkit-scrollbar-track{background:transparent}
.aside::-webkit-scrollbar-thumb{background:#8b8af0;border:2px solid transparent;background-clip:padding-box}