/* Gradey design system, ported from the desktop app's theme.py so the site
   and the app are visibly the same product.

   Every value here has a counterpart in theme.py — the indigo ramp, the cool
   neutral ramp, the 4pt spacing scale, the radius scale that grows with the
   element, and the grade-tier colours that are deliberately a SEPARATE ramp
   from status colours (a paper that failed to grade must not look like a
   paper that scored badly).

   Tk can't draw shadows, so the app carries depth with surface tone and
   border weight. The web can do better, so shadows are added here — but
   they stay subtle, because the app's flat, bordered look is the identity. */

:root {
  /* Indigo — the one accent */
  --indigo-50:  #EEF2FF;
  --indigo-100: #E0E7FF;
  --indigo-200: #C7D2FE;
  --indigo-300: #A5B4FC;
  --indigo-400: #818CF8;
  --indigo-500: #6366F1;
  --indigo-600: #4F46E5;   /* brand */
  --indigo-700: #4338CA;
  --indigo-800: #3730A3;

  /* Cool slate neutrals */
  --n-0:   #FFFFFF;
  --n-50:  #F9FAFB;
  --n-100: #F3F4F6;
  --n-200: #E5E7EB;
  --n-300: #D1D5DB;
  --n-400: #9CA3AF;
  --n-500: #6B7280;
  --n-600: #4B5563;
  --n-700: #374151;
  --n-800: #1F2937;
  --n-900: #111827;
  --n-950: #0B1120;

  /* Grade tiers — display only, never status */
  --tier-high-fill: #DCFCE7; --tier-high-edge: #86EFAC;
  --tier-high-ink:  #166534; --tier-high-dot:  #4ADE80;
  --tier-mid-fill:  #FEF3C7; --tier-mid-edge:  #FCD34D;
  --tier-mid-ink:   #92400E; --tier-mid-dot:   #F59E0B;
  --tier-low-fill:  #FDEEE9; --tier-low-edge:  #F3C4B4;
  --tier-low-ink:   #9A3412; --tier-low-dot:   #E07856;

  /* Semantic roles (light) */
  --canvas:        var(--n-50);
  --surface:       var(--n-0);
  --surface-2:     var(--n-50);
  --surface-raised:var(--n-0);
  --border:        var(--n-200);
  --border-strong: var(--n-300);
  --border-subtle: var(--n-100);
  --ink:           var(--n-800);
  --slate:         var(--n-500);
  --muted:         var(--n-400);
  --on-dark:       var(--n-0);

  --primary:        var(--indigo-600);
  --primary-hover:  var(--indigo-700);
  --primary-tint:   var(--indigo-50);
  --primary-border: var(--indigo-200);
  --primary-text:   var(--indigo-700);
  --on-primary:     var(--n-0);

  --success: #166534; --success-tint: #DCFCE7; --success-border: #86EFAC;
  --warning: #92400E; --warning-tint: #FEF3C7; --warning-border: #FCD34D;
  --danger:  #9A3412; --danger-tint:  #FDEEE9; --danger-border:  #F3C4B4;

  /* The sidebar is dark in BOTH themes — same rule as the app */
  --rail:          var(--n-900);
  --rail-hover:    #1A2334;
  --rail-active:   var(--n-800);
  --rail-text:     var(--n-400);
  --rail-text-active: var(--n-100);

  /* 4pt spacing scale */
  --space-1: 2px;  --space-2: 4px;  --space-3: 8px;  --space-4: 12px;
  --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px;
  --space-9: 40px; --space-10: 48px; --space-12: 64px; --space-16: 96px;

  /* Radius grows with the element */
  --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px;
  --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px;

  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --font-mono: Consolas, "SF Mono", "Cascadia Mono", ui-monospace, monospace;

  --shadow-sm: 0 1px 2px rgba(17, 24, 39, .06);
  --shadow-md: 0 4px 12px rgba(17, 24, 39, .08);
  --shadow-lg: 0 12px 32px rgba(17, 24, 39, .10);

  --max-width: 1140px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:        var(--n-900);
    --surface:       var(--n-800);
    --surface-2:     #182130;
    --surface-raised:#232F3F;
    --border:        var(--n-700);
    --border-strong: var(--n-600);
    --border-subtle: #2A3546;
    --ink:           var(--n-100);
    --slate:         var(--n-400);
    --muted:         var(--n-500);

    --primary-tint:   #1E2547;
    --primary-border: #3A4374;
    --primary-text:   var(--indigo-400);

    --success: #4ADE80; --success-tint: #0F2C1D; --success-border: #1C5334;
    --warning: #FBBF24; --warning-tint: #33240B; --warning-border: #5C3F12;
    --danger:  #E07856; --danger-tint:  #331812; --danger-border:  #5E2A1B;

    --rail: var(--n-950);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
  }
}

:root[data-theme="dark"] {
  --canvas: var(--n-900); --surface: var(--n-800); --surface-2: #182130;
  --surface-raised: #232F3F; --border: var(--n-700); --border-strong: var(--n-600);
  --border-subtle: #2A3546; --ink: var(--n-100); --slate: var(--n-400);
  --muted: var(--n-500); --primary-tint: #1E2547; --primary-border: #3A4374;
  --primary-text: var(--indigo-400);
  --success: #4ADE80; --success-tint: #0F2C1D; --success-border: #1C5334;
  --warning: #FBBF24; --warning-tint: #33240B; --warning-border: #5C3F12;
  --danger: #E07856; --danger-tint: #331812; --danger-border: #5E2A1B;
  --rail: var(--n-950);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
}

/* ------------------------------------------------------------- reset --- */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--font);
  background: var(--canvas);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--primary-text); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ---------------------------------------------------------- typography --- */

h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.16rem; }

.eyebrow {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--primary-text);
}
.lead { font-size: clamp(1rem, 2vw, 1.16rem); color: var(--slate); }
.mono { font-family: var(--font-mono); }

/* -------------------------------------------------------------- layout --- */

.wrap { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-6); }
.section { padding-block: clamp(var(--space-12), 9vw, var(--space-16)); }
.section-head { max-width: 660px; margin-bottom: var(--space-9); }
.section-head h2 { margin-block: var(--space-3) var(--space-4); }
.center { text-align: center; margin-inline: auto; }

/* ------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  height: 44px; padding-inline: var(--space-6);
  border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: .95rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

/* At most ONE primary per view — it marks THE action. */
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); }

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

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

.btn-sm { height: 34px; padding-inline: var(--space-4); font-size: .85rem; }
.btn-lg { height: 50px; padding-inline: var(--space-7); font-size: 1rem; }

/* --------------------------------------------------------------- cards --- */

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-7);
}
.card-inset {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-5);
}

.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }

/* --------------------------------------------------------------- pills --- */

.badge {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--slate);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
}
.badge::before {
  content: ""; width: 7px; height: 7px; border-radius: var(--radius-full);
  background: currentColor; flex: none;
}
.badge-primary { background: var(--primary-tint); color: var(--primary-text); border-color: var(--primary-border); }
.badge-success { background: var(--success-tint); color: var(--success); border-color: var(--success-border); }
.badge-warning { background: var(--warning-tint); color: var(--warning); border-color: var(--warning-border); }

.grade-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-4); border-radius: var(--radius-full);
  font-size: .78rem; font-weight: 700; font-family: var(--font-mono);
  border: 1px solid;
}
.tier-high { background: var(--tier-high-fill); color: var(--tier-high-ink); border-color: var(--tier-high-edge); }
.tier-mid  { background: var(--tier-mid-fill);  color: var(--tier-mid-ink);  border-color: var(--tier-mid-edge); }
.tier-low  { background: var(--tier-low-fill);  color: var(--tier-low-ink);  border-color: var(--tier-low-edge); }

/* --------------------------------------------------------------- forms --- */

.field { display: block; margin-bottom: var(--space-5); }
.field label { display: block; font-size: .82rem; color: var(--slate); margin-bottom: var(--space-2); }
.input {
  width: 100%; height: 44px; padding-inline: var(--space-4);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.input::placeholder { color: var(--muted); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
textarea.input { height: auto; padding-block: var(--space-3); resize: vertical; }

.form-error {
  background: var(--danger-tint); color: var(--danger);
  border: 1px solid var(--danger-border); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); font-size: .88rem; margin-bottom: var(--space-5);
}
.form-note { font-size: .82rem; color: var(--muted); }

/* --------------------------------------------------------------- utils --- */

.stack   { display: flex; flex-direction: column; gap: var(--space-4); }
.row     { display: flex; align-items: center; gap: var(--space-4); }
.row-tight { display: flex; align-items: center; gap: var(--space-3); }
.wrap-row { flex-wrap: wrap; }
.spacer  { flex: 1; }
.hidden  { display: none !important; }
.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;
}
.divider { height: 1px; background: var(--border-subtle); border: 0; margin-block: var(--space-6); }
.text-slate { color: var(--slate); }
.text-muted { color: var(--muted); }