/* ============================================================
   LabLearn global theme — clean / light aesthetic, applied
   solution-wide. Refines MudBlazor surfaces & typography so
   every lesson page matches the home-page style automatically.
   ============================================================ */

:root {
    --ll-ink: #0F172A;
    --ll-muted: #64748B;
    --ll-line: #E2E8F0;
    --ll-line-soft: #EEF2F7;
    --ll-surface: #FFFFFF;
    --ll-bg: #F8FAFC;
    --ll-accent: #4F46E5;
}

/* ---- Base ---- */
html, body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: var(--ll-bg);
    color: var(--ll-ink);
    -webkit-font-smoothing: antialiased;
}

.mud-main-content {
    background: var(--ll-bg);
}

/* ---- Headings ---- */
.mud-typography-h4 {
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--ll-ink);
    /* Fluid lesson title: 1.65rem on phones up to 2.1rem on desktop. */
    font-size: clamp(1.65rem, 1.25rem + 1.3vw, 2.1rem) !important;
    line-height: 1.18 !important;
}

.mud-typography-h5 {
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    color: var(--ll-ink);
}

.mud-typography-h6 {
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: var(--ll-ink);
    font-size: 1.15rem !important;
    line-height: 1.35 !important;
}

/* Section rhythm: numbered lesson sections (h6 in the page flow) get real air above
   them, so each manipulate-then-explain block reads as its own chapter. Headings
   inside cards/papers (strategy names, chart panels) keep their tight layout. */
.mud-main-content .mud-typography-h6 {
    margin-top: 2.75rem;
}

.mud-main-content .mud-paper .mud-typography-h6 {
    margin-top: 0;
}

.mud-typography-subtitle1,
.mud-typography-subtitle2 {
    font-weight: 600 !important;
    color: var(--ll-ink);
}

.mud-typography-overline {
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
    color: var(--ll-muted);
}

/* ---- Prose (lesson body text) ---- */
/* Looser leading for learning content — the MudBlazor defaults (1.5 / 1.43) read
   cramped over multi-line explanations. */
.mud-typography-body1 {
    line-height: 1.7 !important;
}

.mud-typography-body2 {
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
}

/* Reading measure: cap PARAGRAPH prose at ~76 characters so lines stay scannable
   on wide screens. Only <p> elements — charts, papers, sliders and tables keep
   the full container width (they want it). */
.mud-main-content p.mud-typography-body1,
.mud-main-content p.mud-typography-body2 {
    max-width: 76ch;
}

/* ---- Lesson formula blocks (KaTeX) ---- */
/* A little more air around display math than the per-page default (8px). */
.mud-main-content .ll-katex {
    margin: 14px 0;
}

/* ---- Popovers / pickers ----
   The date-picker popover renders in a portal at body level (.mud-picker-container),
   NOT inside .mud-picker — so the global heading overrides leak in and crush the
   toolbar. Reset typography there and guarantee the calendar's full width. */
.mud-picker-container .mud-typography {
    line-height: normal !important;
    letter-spacing: normal !important;
}

.mud-picker-container .mud-typography-h3,
.mud-picker-container .mud-typography-h4,
.mud-picker-container .mud-typography-h5,
.mud-picker-container .mud-typography-h6,
.mud-picker-toolbar .mud-typography {
    font-size: revert !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
}

/* The picker's inline Style (e.g. width:170px to size the input) leaks onto the
   popover paper too, clipping the 312px calendar. Force the popover to natural
   width so the full 7-column calendar shows. */
.mud-picker-popover-paper {
    width: auto !important;
    min-width: 312px !important;
    overflow: visible !important;
}

/* Toolbar selected-date ("Sat, 30 May") defaults to 34px and feels oversized —
   shrink it so it sits comfortably in the header. */
.mud-button-date,
.mud-button-date .mud-button-label {
    font-size: 1.4rem !important;   /* ~22px */
    line-height: 1.25 !important;
    font-weight: 600 !important;
}

/* ---- Surfaces ---- */
.mud-paper {
    background: var(--ll-surface);
}

.mud-paper-outlined {
    border-color: var(--ll-line) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

/* gentle hover lift for interactive cards that opt in via .mud-paper-outlined
   inside an anchor — lessons use plain panels, so keep default (no hover). */

/* ---- Buttons ---- */
.mud-button-root {
    text-transform: none;
    font-weight: 600;
}

/* Outlined buttons read as tactile, pressable chips: white surface,
   visible slate border, subtle shadow, and a clear hover/active lift. */
.mud-button-outlined {
    border-color: #CBD5E1 !important;        /* slate-300 — clearly visible */
    background: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
    transition: transform .12s ease, box-shadow .12s ease,
                border-color .12s ease, background-color .12s ease;
}

.mud-button-outlined:hover {
    border-color: var(--ll-accent) !important;
    background: #FFFFFF !important;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.10) !important;
    transform: translateY(-1px);
}

.mud-button-outlined:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}

/* ---- Draggable cards (drag & drop lessons) ---- */
.ll-drag-card {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;        /* slate-300 — clearly a movable object */
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.10) !important;
    cursor: grab;
    user-select: none;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.ll-drag-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14) !important;
    border-color: #94A3B8 !important;            /* slate-400 on hover */
}

.ll-drag-card:active {
    cursor: grabbing;
    transform: scale(0.99);
}

.ll-drag-card-correct {
    border-color: #10B981 !important;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.20) !important;
}

.ll-drag-card-wrong {
    border-color: #EF4444 !important;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.20) !important;
}

/* grip dots that signal "draggable" */
.ll-drag-grip {
    color: #CBD5E1;
    font-size: 1.05rem;
    line-height: 1;
    letter-spacing: -1px;
    cursor: grab;
}

.ll-drag-card:hover .ll-drag-grip {
    color: #94A3B8;
}

/* ---- Chips ---- */
.mud-chip {
    font-weight: 600;
}

/* ---- Tables (order book / chains) ---- */
.mud-table-root,
.mud-simple-table table {
    border-color: var(--ll-line-soft);
}

.mud-simple-table th {
    color: var(--ll-muted);
    font-weight: 600;
}

/* ---- Inputs ---- */
.mud-input-outlined-border {
    border-radius: 10px !important;
}

/* Compact value text (~12px, down ~2px from the default) so long values
   (dates like 30/May/2026, large numbers) fit instead of overflowing. */
.mud-input-slot,
.mud-select .mud-select-input,
.mud-input-root {
    font-size: 0.75rem;
}

/* Field labels a touch smaller to match */
.mud-input-label {
    font-size: 0.8rem;
}

/* ---- Sliders ---- */
.mud-slider .mud-slider-track-filled {
    border-radius: 999px;
}

/* ---- Links ---- */
a {
    color: var(--ll-accent);
}

/* ---- App bar / drawer chrome (reinforce light style) ---- */
.mud-appbar {
    box-shadow: none !important;
}

.mud-drawer {
    box-shadow: none !important;
}