/*
 * Gitit — The Scholarly Lens design system
 *
 * Creative north star: "The Digital Curator". A high-end editorial
 * experience that balances the rigor of a developer tool with the
 * prestige of a global academic journal. The goal is a "quiet"
 * interface that recedes when the user is focused on writing, and
 * provides authoritative, high-contrast feedback during diffing and
 * audit work.
 *
 * Three load-bearing ideas:
 *
 *   1. Tonal architecture instead of lines. 1px solid borders are
 *      prohibited for sectioning. Structure comes from surface-tier
 *      background shifts — treat the UI as physical layers of fine
 *      vellum paper. Ghost strokes at 15% opacity are permitted only
 *      where accessibility demands a visible boundary.
 *
 *   2. Triple-font pairing. Manrope for the Shell (nav, buttons,
 *      headers — modern and technical). Newsreader for the Core
 *      (student writing, document titles, long-form — "premium paper").
 *      Inter for labels and micro-copy. JetBrains Mono for diff blocks
 *      to emphasize the developer-tool precision.
 *
 *   3. Ambient depth, not drop shadows. Layering happens through
 *      surface-container tiers. Floating modals use a very soft glow
 *      (40px blur, -10px spread, 6% opacity of on-surface) — if you
 *      can see the shadow clearly, it's too dark.
 *
 * This system supersedes the earlier M3 teal palette. The token names
 * still follow the M3 `--md-sys-*` prefix for continuity with existing
 * component classes (.md-btn, .md-card, …) but the values, typography,
 * and component rules are driven by the Scholarly Lens spec.
 *
 * Split into multiple files loaded via Propshaft:
 *   application.css  — design tokens, typography, reset + base
 *   shell.css        — app shell, sidebar, top app bar, breadcrumbs
 *   components.css   — cards, buttons, text fields, chips, banners
 *   editor.css       — editor surface, markdown content, editorial stage
 *   replay.css       — replay player workspace
 *   dashboard.css    — diff view, dashboard analytics
 *   utilities.css    — utilities, animations, view transitions, notifications, pagination
 */

/* =========================================================================
   DESIGN TOKENS
   ========================================================================= */
:root {
  /* ---- Color: light scheme (Scholarly Lens indigo/slate) ---- */
  --md-sys-color-primary: #231f73;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #3a388b;
  --md-sys-color-on-primary-container: #a9a7ff;
  --md-sys-color-primary-fixed: #e2dfff;
  --md-sys-color-on-primary-fixed: #100563;
  --md-sys-color-primary-fixed-dim: #c3c0ff;

  --md-sys-color-secondary: #515f74;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d5e3fc;
  --md-sys-color-on-secondary-container: #57657a;
  --md-sys-color-secondary-fixed: #d5e3fc;
  --md-sys-color-on-secondary-fixed: #0d1c2e;
  --md-sys-color-secondary-fixed-dim: #b9c7df;

  /* Tertiary is the "sophisticated green" used for positive integrity
     signals — deep academic forest, not a generic SaaS green. */
  --md-sys-color-tertiary: #003422;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #004d34;
  --md-sys-color-on-tertiary-container: #4ec493;
  --md-sys-color-tertiary-fixed: #85f8c4;
  --md-sys-color-on-tertiary-fixed: #002114;
  --md-sys-color-tertiary-fixed-dim: #68dba9;

  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #93000a;

  --md-sys-color-background: #f7f9fb;
  --md-sys-color-on-background: #191c1e;
  --md-sys-color-surface: #f7f9fb;
  --md-sys-color-on-surface: #191c1e;
  --md-sys-color-surface-bright: #f7f9fb;
  --md-sys-color-surface-dim: #d8dadc;
  --md-sys-color-surface-variant: #e0e3e5;
  --md-sys-color-on-surface-variant: #464553;

  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f2f4f6;
  --md-sys-color-surface-container: #eceef0;
  --md-sys-color-surface-container-high: #e6e8ea;
  --md-sys-color-surface-container-highest: #e0e3e5;

  --md-sys-color-outline: #777584;
  --md-sys-color-outline-variant: #c8c4d5;
  /* The Ghost Border — outline-variant at 15% opacity. Use only when
     accessibility or data-grid clarity genuinely demands a stroke.
     Structure should come from surface shifts, not lines. */
  --md-sys-color-ghost-stroke: color-mix(in srgb, #c8c4d5 15%, transparent);

  /* Inverse tokens for emphasis moments (summary cards, toasts). */
  --md-sys-color-inverse-surface: #2d3133;
  --md-sys-color-inverse-on-surface: #eff1f3;
  --md-sys-color-inverse-primary: #c3c0ff;

  /* ---- Shape scale (rounded-corner tokens) ---- */
  /* Scholarly Lens calls for subdued, sub-8px radii — buttons are
     rounded rectangles (0.375rem), not pills. The old M3 pill
     buttons felt too SaaS. */
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 0.125rem; /* 2px  */
  --md-sys-shape-corner-small: 0.25rem; /* 4px  — cards, inputs */
  --md-sys-shape-corner-medium: 0.375rem; /* 6px  — buttons */
  --md-sys-shape-corner-large: 0.5rem; /* 8px  — surfaces */
  --md-sys-shape-corner-extra-large: 0.75rem; /* 12px — floating panels */
  --md-sys-shape-corner-full: 9999px;

  /* ---- Ambient depth (no drop shadows for cards — layering only) ----
     These tokens exist for the small number of surfaces that do need a
     visible lift (modals, floating toolbars). Cards use surface tiers
     instead and should not carry any box-shadow. */
  --md-sys-elevation-0: none;
  /* Whisper lift for buttons on hover. */
  --md-sys-elevation-1: 0 2px 6px -2px rgba(25, 28, 30, 0.04);
  /* Handle glow for progress bars, small floating controls. */
  --md-sys-elevation-2: 0 4px 12px -4px rgba(25, 28, 30, 0.06);
  /* Ambient glow for modals and large floating panels — big blur,
     negative spread, very low opacity. It should feel like a
     presence, not a cast shadow. */
  --md-sys-elevation-3: 0 40px 80px -10px rgba(25, 28, 30, 0.06);
  --md-sys-elevation-4: 0 48px 96px -12px rgba(25, 28, 30, 0.08);
  --md-sys-elevation-5: 0 56px 112px -14px rgba(25, 28, 30, 0.1);

  /* ---- Signature gradient for primary CTAs ---- */
  --md-sys-gradient-primary: linear-gradient(135deg, #231f73 0%, #3a388b 100%);

  /* ---- State layer opacities ---- */
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.12;
  --md-sys-state-pressed-opacity: 0.12;

  /* ---- Glassmorphic backgrounds ---- */
  --md-sys-color-glass: rgba(255, 255, 255, 0.85);
  --md-sys-color-glass-heavy: rgba(255, 255, 255, 0.88);

  /* ---- Motion ---- */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-duration-short: 150ms;
  --md-sys-motion-duration-medium: 250ms;
  --md-sys-motion-duration-long: 400ms;
}

/* ---- Dark scheme: indigo on near-black vellum ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #c3c0ff;
    --md-sys-color-on-primary: #100563;
    --md-sys-color-primary-container: #3a388b;
    --md-sys-color-on-primary-container: #e2dfff;

    --md-sys-color-secondary: #b9c7df;
    --md-sys-color-on-secondary: #233345;
    --md-sys-color-secondary-container: #394a5d;
    --md-sys-color-on-secondary-container: #d5e3fc;

    --md-sys-color-tertiary: #68dba9;
    --md-sys-color-on-tertiary: #002114;
    --md-sys-color-tertiary-container: #004d34;
    --md-sys-color-on-tertiary-container: #85f8c4;

    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;

    --md-sys-color-background: #12141a;
    --md-sys-color-on-background: #e4e2eb;
    --md-sys-color-surface: #12141a;
    --md-sys-color-on-surface: #e4e2eb;
    --md-sys-color-surface-variant: #48465a;
    --md-sys-color-on-surface-variant: #c8c4d5;

    --md-sys-color-surface-container-lowest: #0c0e13;
    --md-sys-color-surface-container-low: #1a1c24;
    --md-sys-color-surface-container: #1e2029;
    --md-sys-color-surface-container-high: #28293a;
    --md-sys-color-surface-container-highest: #33334a;

    --md-sys-color-outline: #91909f;
    --md-sys-color-outline-variant: #48465a;
    --md-sys-color-ghost-stroke: color-mix(in srgb, #c8c4d5 15%, transparent);
    --md-sys-color-glass: rgba(12, 14, 19, 0.85);
    --md-sys-color-glass-heavy: rgba(12, 14, 19, 0.88);

    /* The primary gradient shifts to brighter indigos in dark mode so
       the CTA still reads as a lit surface against a dim backdrop. */
    --md-sys-gradient-primary: linear-gradient(135deg, #3a388b 0%, #5654a8 100%);

    /* Shadows on dark surfaces need almost no opacity — the backdrop
       absorbs the color. Bump slightly to compensate. */
    --md-sys-elevation-3: 0 40px 80px -10px rgba(0, 0, 0, 0.5);
    --md-sys-elevation-4: 0 48px 96px -12px rgba(0, 0, 0, 0.55);
    --md-sys-elevation-5: 0 56px 112px -14px rgba(0, 0, 0, 0.6);
  }
}

/* =========================================================================
   TYPOGRAPHY — triple-font editorial scale
   =========================================================================
   Three fonts, mapped to roles rather than sizes:

     Manrope     — "Shell" voice. Nav, buttons, headers, display
                   type. Modern, technical, high-x-height geometric
                   sans that reads as "software".

     Newsreader  — "Core" voice. The student's writing, document
                   titles, any long-form reading surface. Optical-size
                   aware serif that gives the feeling of a published
                   thesis.

     Inter       — "Label" voice. UI metadata, chip text, micro-copy,
                   numbers in tables. Neutral, data-grid-friendly.

     JetBrains Mono — Diff blocks only. Emphasizes the developer-tool
                       precision of the audit views.

   The old single --md-sys-typescale-font alias is preserved for
   backward-compat with any inline styles that still reference it; it
   now points at the Shell font. */
:root {
  --md-sys-typescale-font-shell:
    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --md-sys-typescale-font-editorial:
    "Newsreader", "Charter", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --md-sys-typescale-font-label:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --md-sys-typescale-font-mono:
    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Back-compat alias. Points at the Shell font so anything that
     references the old token name still renders sensibly. */
  --md-sys-typescale-font: var(--md-sys-typescale-font-shell);
  --md-sys-typescale-font-serif: var(--md-sys-typescale-font-editorial);
}

/* Display / headline / title / body / label — the editorial scale.
   All sizes in rem so page zoom behaves correctly. */
.md-display-large {
  font: 800 3.5rem/1.1 var(--md-sys-typescale-font-shell);
  letter-spacing: -0.02em;
}
.md-display-medium {
  font: 800 2.8rem/1.15 var(--md-sys-typescale-font-shell);
  letter-spacing: -0.015em;
}
.md-display-small {
  font: 700 2.25rem/1.2 var(--md-sys-typescale-font-shell);
  letter-spacing: -0.01em;
}
.md-headline-large {
  font: 700 2rem/1.25 var(--md-sys-typescale-font-shell);
  letter-spacing: -0.01em;
}
.md-headline-medium {
  font: 700 1.75rem/1.25 var(--md-sys-typescale-font-shell);
}
.md-headline-small {
  font: 700 1.5rem/1.3 var(--md-sys-typescale-font-shell);
}
/* Titles shift to Newsreader — this is the "editorial voice" used on
   document headings so they feel like print, not app chrome. */
.md-title-large {
  font: 600 1.375rem/1.35 var(--md-sys-typescale-font-editorial);
}
.md-title-medium {
  font: 600 1.125rem/1.4 var(--md-sys-typescale-font-editorial);
}
.md-title-small {
  font: 500 0.9375rem/1.4 var(--md-sys-typescale-font-label);
  letter-spacing: 0.005em;
}
/* Body text is Newsreader — the "premium paper" feel the spec calls
   for on any user-generated content. */
.md-body-large {
  font: 400 1rem/1.65 var(--md-sys-typescale-font-editorial);
}
.md-body-medium {
  font: 400 0.9375rem/1.6 var(--md-sys-typescale-font-editorial);
}
.md-body-small {
  font: 400 0.875rem/1.55 var(--md-sys-typescale-font-editorial);
}
/* Labels are Inter — UI metadata, chips, table headers. */
.md-label-large {
  font: 600 0.875rem/1.4 var(--md-sys-typescale-font-label);
  letter-spacing: 0.01em;
}
.md-label-medium {
  font: 600 0.75rem/1.4 var(--md-sys-typescale-font-label);
  letter-spacing: 0.015em;
}
.md-label-small {
  font: 600 0.6875rem/1.4 var(--md-sys-typescale-font-label);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* =========================================================================
   RESET + BASE
   ========================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  /* Default voice is Inter (label/UI), at a reading size. The editorial
     Newsreader face is only applied where user-generated content lives. */
  font: 400 0.9375rem/1.55 var(--md-sys-typescale-font-label);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--md-sys-color-primary);
  text-decoration: none;
  transition: color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
a:hover {
  color: var(--md-sys-color-primary-container);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Native headings default to the Shell font (Manrope) so any inline
   h1/h2/h3 that skipped the .md-headline-* utility classes still feels
   of-a-piece with the system. */
h1 {
  font: 700 2rem/1.25 var(--md-sys-typescale-font-shell);
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}
h2 {
  font: 700 1.5rem/1.3 var(--md-sys-typescale-font-shell);
  margin: 1.75rem 0 0.75rem;
}
h3 {
  font: 600 1.125rem/1.35 var(--md-sys-typescale-font-shell);
  margin: 0 0 0.5rem;
}

/* Muted runs on the label font so the metadata feel is explicit. */
.muted {
  color: var(--md-sys-color-on-surface-variant);
  font: 500 0.75rem/1.4 var(--md-sys-typescale-font-label);
  letter-spacing: 0.01em;
}

.container {
  max-width: 1200px !important;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 2rem 4rem;
}