/* =============================================================================
   AfterClass — Demo8 brand theme override  (v4 — blue-dominant, no cream)
   Loaded AFTER assets/css/styles.css on demo8 pages only, so it leaves the
   shared Metronic vendor CSS and every other demo untouched.

   2026-08 rebrand history:
     v2 (green-dominant) → v3 (orange-dominant) → v4 (blue-dominant, orange
     now secondary) — this is the CURRENT state. --brand-primary-* and
     --brand-secondary-* are the same variable NAMES throughout; only which
     hue they point to changed. Blue's base pairs cleanly with WHITE text on
     both base and dark shades (6.93:1 / 11.91:1, measured) — no dark-text
     workaround needed, unlike orange, which still needs one now that it's
     secondary (base #F57119, updated from an earlier #FF6600, fails at
     2.89:1 with white; dark text #1F1B16 measures 5.92:1 — same fix as
     before, just applied to the secondary role now instead of primary).

   NOTE: --brand-primary (now blue, #1C50C8) is a *second*, distinct blue
   from --brand-blue (#1360C3) below, which stays exactly as it was — that
   one is the English subject colour, unrelated to brand-primary. Same rule
   for orange: --brand-secondary is distinct from --brand-orange (#FB812E,
   Math's subject colour, unchanged).

   --brand-green-dark/--brand-green are KEPT (not deleted) because the
   Today's Mission "Thinking Skills" subject colour and the "Study
   Explorer" rank tier both still reuse them (see sections 6, 7, 10) — that
   green is a different, unrelated hex from the --success-* ramp.

   ⚠ Interpretation call, not explicitly specified: PURPLE is wired up as a
   new general tertiary/rare accent (--brand-accent-*). It does NOT replace
   Writing's existing pink (#C3138C) subject colour — subject colour-coding
   wasn't part of this palette handoff, so it's left untouched. Flag if
   that's wrong.

   ⚠ #963508 ("secondary dark") pairs with WHITE text (7.47:1) — the
   OPPOSITE of the base #F57119, which needs DARK text (see section 2/3
   below). It is NOT used as the button hover/press colour for that reason
   (dark text on #963508 is only 2.29:1 — would break mid-hover). Button
   hover/active still use the separately-verified #CC5200 (--secondary-
   active), which stays ≥5.2:1 with dark text through the whole transition.
   #963508 is reserved for genuine dark-orange-background-with-white-text
   contexts instead.

   Colour hierarchy by amount of use (the "majority" is now BLUE):
     BLUE     #1C50C8            → dominant: app chrome, primary buttons, focus rings
     ORANGE   #F57119            → secondary accent (distinct from Math's #FB812E)
     RED      #C8301C / #900000  → destructive
     GREEN    #007C27 / #38AB43  → success (distinct from Thinking Skills' #1A5935)
     AMBER    #FFA20B            → warnings / tertiary accent (was #FDB602)
     PURPLE   #6631A8            → new tertiary/rare accent
     ORANGE   #FB812E            → Math subject colour (unchanged, distinct hue)
     BLUE     #1360C3 / #77A4DF  → English subject colour (unchanged)
     PINK     #C3138C            → Writing subject colour (unchanged)
     GREEN    #1A5935 / #6EB943  → Thinking Skills + Study Explorer tier (unchanged)

   Content surfaces are WHITE (no cream). Dark mode intentionally left as-is.

   Plain :root / component rules here are UNLAYERED, so they win over
   Metronic's @layer theme + @layer components by the cascade.
   ========================================================================== */

/* ---- Brand reference ----------------------------------------------------- */
:root {
  /* 2026-08 update #3: PRIMARY and SECONDARY swapped — blue is now
     primary, orange is now secondary. Blue's base pairs cleanly with
     WHITE text on both its base and dark shade (6.93:1 / 11.91:1,
     measured) — no dark-text workaround needed here, unlike orange.
     Distinct from --brand-blue (English subject colour, unchanged). */
  --brand-primary-dark: #002C90;
  --brand-primary: #1C50C8;
  --brand-primary-light: #3E8EFF;
  --brand-primary-pale: #6FC5FF;
  --brand-primary-palest: #B7EBFF; /* new — NOT used with white text anywhere (1.29:1, fails badly) */
  --primary-active: #002C90; /* safe with white text throughout, no separate workaround value needed */

  /* Disabled-primary — a distinct muted ramp, not the brand ramp at reduced
     opacity. bg #7CB5DB / text #1741A2 measures 4.10:1 (disabled controls
     are exempt from strict AA, this is just for it to look legible-but-muted
     rather than broken). */
  /* Reverted back — a shadow must be DARKER than the face colour to read
     as a shadow at all; 7CB5DB is lighter than 3772C4, so that pairing
     as bg/shadow made the shadow invisible/backwards. bg=lightest,
     shadow=mid-darker, text=darkest of the three. */
  --primary-disabled-bg: #7CB5DB;
  --primary-disabled-fg: #1741A2;
  --primary-disabled-shadow: #3772C4;

  /* Secondary — orange. Updated base/light values (#F57119, #FF9544; dark
     #963508 and pale #FEB357 unchanged). #963508 pairs with white text
     (7.47:1) but the base #F57119 needs DARK text (2.89:1 with white,
     measured) — same fix as before, dark text (#1F1B16) measures 5.92:1.
     Interaction states mix toward #CC5200 (not #963508, which fails with
     dark text at 2.29:1) — verified 3.89:1 pure, stays higher through the
     actual mixed hover/active states. */
  --brand-secondary-dark: #963508;
  --brand-secondary: #F57119;
  --brand-secondary-light: #FF9544;
  --brand-secondary-pale: #FEB357;
  --secondary-active: #CC5200; /* interaction-only for secondary/orange buttons, verified safe with dark text */

  /* Disabled-secondary — distinct muted brown ramp. bg #49190A / text
     #AA5E2B measures 3.05:1 (same "legible but muted" bar as disabled-primary). */
  --secondary-disabled-bg: #49190A;
  --secondary-disabled-fg: #AA5E2B;
  --secondary-disabled-shadow: #210D06;

  /* Tertiary — outline/ghost button, new. Uses the existing primary blue
     ramp, not a new hue: white/outline default, pale-blue fill on
     hover/active. Blue text on white measures 6.93:1; on the pale hover
     fill (#B7EBFF) measures 5.39:1 — both verified safe. */
  --tertiary-border: #B7EBFF;
  --tertiary-hover-bg: #B7EBFF;
  --tertiary-active-bg: #6FC5FF;
  --tertiary-disabled-bg: #D7E6EC;
  --tertiary-disabled-fg: #7CB5DB;
  --tertiary-disabled-border: #A5CCE6;

  /* Destructive button — outline/ghost like tertiary, red ramp instead of
     blue. From the supplied button-state spec image. Default and disabled
     are read with high confidence (distinct, unambiguous cells). Hover and
     active are resolved by applying the SAME mechanical pattern already
     used for tertiary (hover = fill with the pale/border tone, active =
     fill with the next-darker tone + compressed shadow) using only hex
     values confirmed present in this row of the spec — flag back if the
     original spec had different hover/active values, the multi-cell image
     made those two harder to read with certainty than default/disabled.
     Disabled is the SAME hex (#FF8B8B) for text/border/bg — confirmed
     against the spec swatch a second time — but rendered at three
     different opacities (pale bg, medium border, solid text), not three
     flat identical fills; that's how the spec swatch reads legible-but-
     muted despite listing one hex three times. */
  --destructive-btn-text: #FF5B3E;
  --destructive-btn-border: #FFC9D5;
  --destructive-btn-hover-bg: #FFC9D5;
  --destructive-btn-active-bg: #FF8B8B;
  --destructive-btn-disabled: #FF8B8B;
  --destructive-btn-disabled-text: color-mix(in srgb, var(--destructive-btn-disabled) 85%, transparent);
  --destructive-btn-disabled-border: color-mix(in srgb, var(--destructive-btn-disabled) 55%, transparent);
  --destructive-btn-disabled-bg: color-mix(in srgb, var(--destructive-btn-disabled) 20%, transparent);

  /* States — red/destructive. White text passes on both dark and base. */
  --brand-destructive-dark: #900000;
  --brand-destructive: #C8301C;
  --brand-destructive-light: #FF5B3E;
  --brand-destructive-pale: #FF896F;

  /* States — green/success. ⚠ White text fails on the base (#38AB43,
     2.97:1) — use the dark shade for white-text success indicators, or
     dark text on base/light/pale. */
  --success-dark: #007C27;
  --success: #38AB43;
  --success-light: #72D365;
  --success-pale: #BEDF98;

  /* Tertiary — amber/warning. Same failure this file already fixed once
     for the old #FDB602: white text on the base is 2.01:1. Dark text on
     base is 8.50:1 — use that pattern, same as section 4 below. */
  --brand-amber-dark: #A45409;
  --brand-amber: #FFA20B;
  --brand-amber-light: #FFD501;
  --brand-amber-pale: #FFFD6F;

  /* Tertiary — purple/rare accent (new; see interpretation note above). */
  --brand-accent-dark: #422267;
  --brand-accent: #6631A8;
  --brand-accent-light: #9957DF;
  --brand-accent-pale: #DD6FFF;

  /* Unchanged subject-colour-coding references (Math/English/Writing) and
     Thinking Skills/Study Explorer green — see header note. */
  --brand-green-dark: #1A5935;
  --brand-green: #6EB943;
  --brand-orange: #FB812E;
  --brand-blue: #1360C3;
  --brand-blue-light: #77A4DF;
  --brand-pink: #C3138C;
  --brand-pink-dark: #591A53;
}

/* ---- Typography ---------------------------------------------------------- */
/* 2026-08: switched from Parkinsans to Plus Jakarta Sans — clearer
   numerals for this dashboard-heavy, stat-number-driven product (see
   docs/ux-design-spec.md SS2.3). Loaded via themesettings.json's Fonts
   array, same mechanism Parkinsans used. */
:root,
:host {
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* =============================================================================
   1. Tailwind palette remap — routes every green / orange / blue utility
      (bg-green-500, text-orange-500, bg-blue-600 ...), badge, chart series
      and icon to the brand colours.
   ========================================================================== */
:root {
  /* Green — dominant family */
  --color-green-50:  #EAF6E1;
  --color-green-100: #D7EFC6;
  --color-green-200: #B9E29C;
  --color-green-500: #6EB943;
  --color-green-600: #57A335;
  --color-green-700: #40802B;
  --color-green-800: #2C6626;
  --color-green-950: #16341F;

  /* Orange — secondary accent */
  --color-orange-100: #FEE7D3;
  --color-orange-200: #FDCBA5;
  --color-orange-400: #FB812E;
  --color-orange-950: #5A2A0C;

  /* Amber / yellow — warnings + tertiary accent */
  --color-yellow-50:  #FFF8E1;
  --color-yellow-100: #FEEFBB;
  --color-yellow-200: #FDE388;
  --color-yellow-400: #FFA20B; /* was #FDB602 — synced to the new official --brand-amber */
  --color-yellow-500: #F0AB00;
  --color-yellow-600: #CE9000;
  --color-yellow-700: #A06E00;
  --color-yellow-800: #7E5600;
  --color-yellow-950: #3F2A00;

  /* Blue — informational accent */
  --color-blue-50:  #E8F0FB;
  --color-blue-100: #CFE0F6;
  --color-blue-500: #1360C3;
  --color-blue-600: #1153A8;
  --color-blue-700: #0E4488;
  --color-blue-800: #0B3568;
  --color-blue-950: #071F3E;

  /* Violet is off-brand — retire it to a lighter tertiary blue so stray
     "info" badges and chart series stay on palette (and distinct from
     blue-500 by being a shade lighter). */
  --color-violet-50:  #EAF1FB;
  --color-violet-100: #D6E4F6;
  --color-violet-200: #B4D0F0;
  --color-violet-500: #2F6BC0;
  --color-violet-600: #1F5AAE;
  --color-violet-700: #17498C;
  --color-violet-800: #123A6E;
  --color-violet-950: #0A2140;
}

/* =============================================================================
   2. Semantic tokens — light mode (white content, green ambient)
   ========================================================================== */
:root {
  /* Content surfaces: white. */
  --background: #FFFFFF;
  --foreground: #15241B;
  --card: #FFFFFF;
  --card-foreground: #15241B;
  --popover: #FFFFFF;
  --popover-foreground: #15241B;

  /* Primary interactive = brand blue (swapped from orange). White text on
     #1C50C8 measures 6.93:1 — passes cleanly, no dark-text workaround
     needed (unlike orange, which failed at 2.94:1 and needed one). */
  --primary: #1C50C8;
  --primary-foreground: #FFFFFF;

  /* Neutral surfaces tinted blue so the whole app reads blue-forward.
     --muted drives the sidebar rail, the page gutter and subtle in-card fills.
     Derived as light dilutions of --brand-primary-light, same technique as
     the orange pass (dark text passes at 15:1+ on all of these, verified). */
  --secondary: #E8F1FF;
  --secondary-foreground: #1F1B16;
  --muted: #E8F1FF;
  --muted-foreground: #1F1B16;
  --accent: #DCEBFF;
  --accent-foreground: #1F1B16;

  /* Was Tailwind's generic --color-red-600. Now the official destructive
     red — white text measures 5.39:1 on this base (was unverified before). */
  --destructive: #C8301C;
  --destructive-foreground: #FFFFFF;

  /* Headings / high-emphasis mono text — was deep green-black, now a
     neutral warm-black so body text isn't oddly colour-tinted. */
  --mono: #1F1B16;
  --mono-foreground: #FFFFFF;

  --border: #D5E6FF;
  --input: #C9DFFF;
  --ring: #3E8EFF;
  --radius: 0.5rem;
}

/* =============================================================================
   3. Make BLUE the majority (swapped from orange) — the sidebar/header rail
   uses the new brand blue so it clearly dominates the frame, while the
   content card (white) stays crisp.
   White text on #1C50C8 measures 6.93:1 — passes cleanly, so nav
   icons/labels go back to WHITE here (orange's version needed dark text
   at 2.94:1/5.83:1; blue doesn't have that problem).
   ========================================================================== */
#sidebar,
#header {
  background-color: #1C50C8;
}

/* Sidebar footer avatar/menu separators blend with the blue rail. */
#sidebar_footer,
#sidebar_header {
  background-color: transparent;
}

/* Nav item boxes (62px) had 12px padding on the start side and 0 on the end
   side (Tailwind's ps-3 pe-3 lg:pe-0), so they sat flush against the right
   edge instead of centered. This also made the sidebar render at 74px while
   --sidebar-width reserves 90px for it, leaving an oddly-coloured 16px gap
   (the --muted body colour) between the sidebar and the main content. 14px
   each side makes the sidebar render at exactly 90px — centered items, no
   gap. */
#sidebar_menu_wrapper {
  padding-inline: calc(var(--spacing) * 3.5);
}

/* Nav icon/label colour — WHITE at all times now that blue is primary
   (white on #1C50C8 measures 6.93:1, safe). Orange's version needed dark
   text instead (2.94:1 with white — failed).
   Scoped to #sidebar_menu specifically rather than all of #sidebar — the
   chat/notification drawers are hidden panels that happen to sit in the
   sidebar's DOM subtree but are a separate visual surface, so a broader
   #sidebar selector would also recolour icons inside those panels.
   Chat icon button and the mobile hamburger toggle (#header) get the same
   colour separately below, since they sit outside #sidebar_menu. */
#sidebar_menu .kt-menu-icon,
#sidebar_menu .kt-menu-icon i,
#sidebar_menu .kt-menu-title {
  color: #FFFFFF;
}

#sidebar_footer > div > button.kt-btn i,
#header button i {
  color: #FFFFFF;
}

/* =============================================================================
   4. Warning fix — amber (now #FFA20B, was #FDB602) with WHITE text was/is
   unreadable (2.01:1, measured). Solid warning badges/alerts use dark text
   on amber (6.90:1, measured, AA). The new amber hit the exact same
   failure as the old one — same fix still applies unchanged.
   Light/outline warning variants already use dark tinted text, so untouched.
   ========================================================================== */
.kt-badge-warning {
  color: #3A2A00;
}
.kt-alert-warning {
  color: #3A2A00;
}
.kt-alert-warning .kt-alert-close > svg {
  color: #3A2A00;
}

/* =============================================================================
   5. Brand polish
   (--primary-active now declared once, in the Brand reference block above)
   ========================================================================== */

/* Checked checkbox uses the same #1C50C8 as the sidebar/Continue Study
   button, sitewide (checkboxes appear on many demo8 pages, not just home). */
.kt-checkbox:checked {
  border-color: #1C50C8;
  background-color: #1C50C8;
}
.kt-checkbox:indeterminate {
  border-color: #1C50C8;
  background-color: #1C50C8;
}

/* Monthly Benchmark stat boxes — Target stands out in the brighter tint,
   Previous/Needs sit in the pale wash (same #F5FFDA as the page ambient).
   #1A5935 on #DCF891 is ~7:1 (AA), already verified in section 6 above. */
.kt-stat-emphasis {
  background-color: #DCF891;
}
.kt-stat-emphasis-label,
.kt-stat-emphasis-value {
  color: #1A5935;
}

.kt-stat-neutral {
  background-color: #F5FFDA;
}

/* Home page secondary action buttons (Change Schools, View Weekly Plan,
   Take Test) — now uses --brand-secondary (orange), scoped to this class
   rather than kt-btn-secondary itself, since that class is used for
   plain/neutral actions sitewide.
   2026-08 update: switched from a derived color-mix() blend to the EXACT
   values from the supplied button-state spec, per state, instead of an
   auto-generated hover/active tint. ⚠ Some of these combinations measure
   below AA (flagged inline) — implemented as specified anyway, since this
   is a direct implementation of supplied design values, not a derived
   guess. Flag back if any of these should revert to a safer pairing. */
.kt-btn-lime {
  background-color: #F57119;
  color: #963508;
  border-radius: 13px; /* was 8px (--radius default), increased by 5px — matches primary/tertiary */
  box-shadow: 0 4px 0 0 #C74305;
}
.kt-btn-lime:hover {
  /* ⚠ #FEB357 text on #FF9544 bg measures 1.22:1 — fails badly. This is
     the exact pairing from the spec (and the one your tool flagged in
     red) — implemented as given, not silently swapped for a safer value. */
  background-color: #FF9544;
  color: #FEB357;
  box-shadow: 0 4px 0 0 #C74305;
}
.kt-btn-lime:active {
  background-color: #F57119;
  color: #FF9544;
  box-shadow: 0 1px 0 0 #963508; /* shadow compresses — button reads as pressed in */
  transform: translateY(3px);
}
.kt-btn-lime:disabled,
.kt-btn-lime[disabled] {
  /* Was text=#904420 on bg=#AA5E2B — only 1.43:1, nearly invisible.
     Reassigned so the darkest of the three values is text (most visible
     against the light bg), mid value is the shadow (still darker than
     bg, so it reads as a shadow), lightest is bg. */
  background-color: #AA5E2B;
  color: #49190A;
  box-shadow: 0 4px 0 0 #904420;
  cursor: not-allowed;
}

/* View Journey — matches the Continue Study mission button look exactly.
   Now uses --primary (blue).
   2026-08 update: switched hover/active from a derived color-mix() blend
   to the EXACT values from the supplied button-state spec. ⚠ Hover's
   white-adjacent light-blue-on-light-blue pairing (#6FC5FF text on
   #3E8EFF bg) measures below AA — implemented as specified anyway, same
   reasoning as the secondary button above. */
.kt-btn-continue {
  background-color: #1C50C8;
  color: #FFFFFF;
}
.kt-btn-continue:hover,
.kt-btn-primary:hover {
  /* Same shadow-must-be-darker-than-face fix as disabled above — a white
     shadow on a white page is invisible. bg=lightest of the three values,
     shadow=the mid-darker one (visible edge), text=white as given. */
  background-color: #6FC5FF;
  color: #FFFFFF;
  box-shadow: 0 4px 0 0 #3E8EFF;
}
.kt-btn-continue:active,
.kt-btn-primary:active {
  background-color: #1C50C8;
  color: #3E8EFF;
  box-shadow: 0 1px 0 0 #002C90; /* shadow compresses — button reads as pressed in */
  transform: translateY(3px);
}

/* =============================================================================
   6. 3D/pressed button style — solid (no blur) offset shadow, one ramp step
   darker than the face colour: #1C50C8 face / #002C90 shadow, the same
   primary/primary-dark pairing already used everywhere else, not a new
   colour. Applied to .kt-btn-primary (the real class used across the app's
   actual views, e.g. Register.cshtml) and .kt-btn-continue (this file's
   own primary-coloured button), so it's consistent wherever a primary
   button appears, not just one spot. NOT applied to .kt-btn-lime
   (secondary/orange) yet — pending confirmation the same treatment is
   wanted there too. Extra vertical padding (20px top/bottom) added on top
   of whatever horizontal padding the base .kt-btn class already sets —
   only the vertical value is overridden here.
   ========================================================================== */
.kt-btn-primary,
.kt-btn-continue {
  padding-top: 12px; /* was 32px, reduced by 20px */
  padding-bottom: 12px;
  border-radius: 13px; /* was 8px (--radius default), increased by 5px */
  box-shadow: 0 4px 0 0 #002C90;
}

/* =============================================================================
   Button states — disabled (primary + secondary) and the new tertiary
   button. Same 3D/pressed shadow language as the primary/secondary
   buttons above; every colour used here is a token declared in the Brand
   reference block, not a new one-off value.
   ========================================================================== */

/* Disabled uses a distinct muted ramp (--primary-disabled-*), not the
   brand ramp at reduced opacity — matches the updated design system.
   Real disabled buttons use the native [disabled] attribute. */
.kt-btn-primary:disabled,
.kt-btn-continue:disabled,
.kt-btn-primary[disabled],
.kt-btn-continue[disabled] {
  background-color: var(--primary-disabled-bg);
  color: var(--primary-disabled-fg);
  box-shadow: 0 4px 0 0 var(--primary-disabled-shadow);
  cursor: not-allowed;
}

/* .kt-btn-lime:disabled is defined once, earlier in this file, with exact
   spec values — this duplicate (which used the older --secondary-disabled-*
   tokens and was silently overriding it) has been removed. */

/* New: tertiary/ghost button. Same padding + shadow language as
   primary/secondary, but outline by default, filling in on hover/active.
   Blue text throughout — 6.93:1 on white (default), 5.39:1 on the
   hover fill (#B7EBFF) — both verified. */
.kt-btn-tertiary {
  background-color: #FFFFFF;
  color: var(--brand-primary);
  border: 2px solid var(--tertiary-border);
  padding-top: 12px; /* was 32px, reduced by 20px */
  padding-bottom: 12px;
  border-radius: 13px; /* was 8px (--radius default), increased by 5px */
  box-shadow: 0 4px 0 0 var(--tertiary-border);
}
.kt-btn-tertiary:hover {
  /* Border colour now matches the fill (was fixed at --tertiary-border
     always) — before, the border happened to blend in on hover since it
     equaled the fill by coincidence, then reappeared as a mismatched ring
     on :active once the fill got darker. Matching it explicitly in both
     states fixes that inconsistency. */
  background-color: var(--tertiary-hover-bg);
  border-color: var(--tertiary-hover-bg);
}
.kt-btn-tertiary:active {
  /* Same pressed-down treatment as primary/secondary :active — shadow
     compresses and the button shifts down, instead of just swapping the
     fill colour like before. */
  background-color: var(--tertiary-active-bg);
  border-color: var(--tertiary-active-bg);
  box-shadow: 0 1px 0 0 #3E8EFF;
  transform: translateY(3px);
}
.kt-btn-tertiary:disabled,
.kt-btn-tertiary[disabled] {
  background-color: var(--tertiary-disabled-bg);
  color: var(--tertiary-disabled-fg);
  border-color: var(--tertiary-disabled-border);
  box-shadow: 0 4px 0 0 var(--tertiary-disabled-border);
  cursor: not-allowed;
}

/* New: destructive button. Same outline/ghost mechanics as tertiary
   (fills in on hover/active, compressed shadow on active), red ramp
   instead of blue — see the --destructive-btn-* tokens above for the
   spec-value notes. Use for actual destructive actions only (delete/
   cancel) per the colour rule in ux-design-spec.md §2.2 — never for a
   low score or other "poor performance" context. */
.kt-btn-danger {
  background-color: #FFFFFF;
  color: var(--destructive-btn-text);
  border: 2px solid var(--destructive-btn-border);
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: 13px;
  box-shadow: 0 4px 0 0 var(--destructive-btn-border);
}
.kt-btn-danger:hover {
  background-color: var(--destructive-btn-hover-bg);
  border-color: var(--destructive-btn-hover-bg);
}
.kt-btn-danger:active {
  background-color: var(--destructive-btn-active-bg);
  border-color: var(--destructive-btn-active-bg);
  box-shadow: 0 1px 0 0 var(--destructive-btn-text);
  transform: translateY(3px);
}
.kt-btn-danger:disabled,
.kt-btn-danger[disabled] {
  /* Same base hex for text/border/bg per the spec swatch, at three
     different opacities — see token comment above. */
  background-color: var(--destructive-btn-disabled-bg);
  color: var(--destructive-btn-disabled-text);
  border-color: var(--destructive-btn-disabled-border);
  box-shadow: 0 4px 0 0 var(--destructive-btn-disabled-border);
  cursor: not-allowed;
}

/* =============================================================================
   6. Today's Mission item states
   Single subject-neutral green ramp (per the supplied swatch sheet), one
   step per state instead of one hue per subject: the active/incomplete
   mission stands out in the more saturated tint, completed ones recede into
   a pale wash so the one thing left to do reads as the actual call to
   action. Ramp used: #1A5935 (darkest) → #6EB943 → #ACDC32 → #DCF891 →
   #F5FFDA (lightest, ~page background).
   Contrast checked: done-state text #40802B on #F5FFDA bg → 4.5:1 (AA).
   Card/button/chip text on the active tint (#DCF891) uses #1A5935 → 7:1+.
   ========================================================================== */
.kt-mission-scroll {
  /* Fits ~3 items with no scrollbar; a 4th+ mission scrolls inside the card
     instead of pushing the whole page taller. Paired with kt-scrollable-y-auto
     for the thin themed scrollbar. */
  max-height: 34rem;
}

.kt-mission-item {
  border-radius: calc(var(--radius) + 2px);
  padding: calc(var(--spacing) * 4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
}

.kt-mission-item-active {
  background-color: #DCF891;
}
.kt-mission-item-active .kt-mission-text {
  color: #1A5935;
}
.kt-mission-item-active .kt-mission-chip {
  background-color: rgba(255, 255, 255, 0.6);
  color: #1A5935;
}
.kt-mission-item-active .kt-mission-btn {
  /* White label requested explicitly; contrast on #4CA817 is ~3:1, below
     the 4.5:1 AA text threshold (though it clears the 3:1 bar for large/
     bold UI text). Flagging in case this needs revisiting later. */
  background-color: #4CA817;
  color: #FFFFFF;
}
.kt-mission-item-active .kt-mission-btn:hover {
  background-color: color-mix(in oklab, #4CA817 85%, #1A5935 15%);
}
.kt-mission-item-active .kt-mission-btn:active {
  background-color: color-mix(in oklab, #4CA817 70%, #1A5935 30%);
}

.kt-mission-item-done {
  background-color: #F5FFDA;
}
.kt-mission-item-done .kt-mission-text {
  /* Same darkest-of-ramp text as the active state (#1A5935) — verified
     ~7.8:1 even against this pale a background, so no need for a separate
     muted shade; active/done is differentiated via bg + button intensity
     and the Done!/Great job! copy instead. Same rule now used for all 4
     subject colours below. */
  color: #1A5935;
}
.kt-mission-item-done .kt-mission-chip {
  background-color: rgba(26, 89, 53, 0.08);
  color: #1A5935;
}
.kt-mission-item-done .kt-mission-btn {
  background-color: #DCF891;
  color: #1A5935;
}
.kt-mission-item-done .kt-mission-btn:hover {
  background-color: color-mix(in oklab, #DCF891 85%, #1A5935 15%);
}
.kt-mission-item-done .kt-mission-btn:active {
  background-color: color-mix(in oklab, #DCF891 70%, #1A5935 30%);
}

/* Roomier card header for a title + subtitle pair (Monthly Benchmark, OC
   Test Countdown): kt-card-header normally relies on a 56px min-height with
   centered content, and kt-card-heading only gives 4px between title/
   description — both too tight once there's a two-line heading. */
.kt-title-spaced {
  padding-block: calc(var(--spacing) * 5);
}
.kt-title-spaced .kt-card-title {
  margin-block-end: calc(var(--spacing) * 2);
}

/* =============================================================================
   7. Home page ambient background
   Scoped to #home_main (index.html only) so the rest of the site keeps the
   white content surface decided earlier — only the student home page gets
   the pale green wash behind its white cards, per the latest home mockup.
   Lightened a step further (was #F5FFDA) per latest feedback.
   ========================================================================== */
#home_main {
  background-color: #FAFFEF;
}

/* =============================================================================
   8. Today's Mission — subject-coded (Math=orange, English=blue,
   Writing=pink; Thinking Skills reuses the green kt-mission-item-active/
   -done pair from section 6 above). Colours now pulled directly from the
   official 5-shade brand ramps (darkest/base/light/pale/palest per family)
   instead of one-off approximations:
     Orange   592A1A / FB812E / FDB602 / F1E3B2 / FFFDDA
     Blue     1A2159 / 1360C3 / 77A4DF / B2D7F1 / DAFBFF
     Pink     591A53 / C3138C / DF77B4 / F1B2D6 / FFDAEB
   Same rule as green: active-bg = pale (row4), done-bg = palest (row5),
   text = darkest (row1) for BOTH states — checked ~7–14:1 in every case, so
   one text colour per family works everywhere; active/done reads through
   bg/button intensity + the Done!/Great job! copy instead.
   Button labels: white on blue/pink (~5.5–6:1, AA). Orange's white label is
   only ~2.6:1 (fails AA text contrast) — requested explicitly anyway, so
   applied as asked; flagging same as the green button label earlier.
   ========================================================================== */

/* Math — orange */
.kt-mission-math-active {
  background-color: #F1E3B2;
}
.kt-mission-math-active .kt-mission-text {
  color: #592A1A;
}
.kt-mission-math-active .kt-mission-chip {
  background-color: rgba(255, 255, 255, 0.6);
  color: #592A1A;
}
.kt-mission-math-active .kt-mission-btn {
  background-color: #FB812E;
  color: #FFFFFF;
}
.kt-mission-math-active .kt-mission-btn:hover {
  background-color: color-mix(in oklab, #FB812E 85%, #592A1A 15%);
}
.kt-mission-math-active .kt-mission-btn:active {
  background-color: color-mix(in oklab, #FB812E 70%, #592A1A 30%);
}

.kt-mission-math-done {
  background-color: #FFFDDA;
}
.kt-mission-math-done .kt-mission-text {
  color: #592A1A;
}
.kt-mission-math-done .kt-mission-chip {
  background-color: rgba(89, 42, 26, 0.1);
  color: #592A1A;
}
.kt-mission-math-done .kt-mission-btn {
  background-color: #F1E3B2;
  color: #592A1A;
}
.kt-mission-math-done .kt-mission-btn:hover {
  background-color: color-mix(in oklab, #F1E3B2 85%, #592A1A 15%);
}
.kt-mission-math-done .kt-mission-btn:active {
  background-color: color-mix(in oklab, #F1E3B2 70%, #592A1A 30%);
}

/* English — blue */
.kt-mission-english-active {
  background-color: #B2D7F1;
}
.kt-mission-english-active .kt-mission-text {
  color: #1A2159;
}
.kt-mission-english-active .kt-mission-chip {
  background-color: rgba(255, 255, 255, 0.6);
  color: #1A2159;
}
.kt-mission-english-active .kt-mission-btn {
  background-color: #1360C3;
  color: #FFFFFF;
}
.kt-mission-english-active .kt-mission-btn:hover {
  background-color: color-mix(in oklab, #1360C3 85%, #1A2159 15%);
}
.kt-mission-english-active .kt-mission-btn:active {
  background-color: color-mix(in oklab, #1360C3 70%, #1A2159 30%);
}

.kt-mission-english-done {
  background-color: #DAFBFF;
}
.kt-mission-english-done .kt-mission-text {
  color: #1A2159;
}
.kt-mission-english-done .kt-mission-chip {
  background-color: rgba(26, 33, 89, 0.1);
  color: #1A2159;
}
.kt-mission-english-done .kt-mission-btn {
  background-color: #B2D7F1;
  color: #1A2159;
}
.kt-mission-english-done .kt-mission-btn:hover {
  background-color: color-mix(in oklab, #B2D7F1 85%, #1A2159 15%);
}
.kt-mission-english-done .kt-mission-btn:active {
  background-color: color-mix(in oklab, #B2D7F1 70%, #1A2159 30%);
}

/* Writing — pink */
.kt-mission-writing-active {
  background-color: #F1B2D6;
}
.kt-mission-writing-active .kt-mission-text {
  color: #591A53;
}
.kt-mission-writing-active .kt-mission-chip {
  background-color: rgba(255, 255, 255, 0.6);
  color: #591A53;
}
.kt-mission-writing-active .kt-mission-btn {
  background-color: #C3138C;
  color: #FFFFFF;
}
.kt-mission-writing-active .kt-mission-btn:hover {
  background-color: color-mix(in oklab, #C3138C 85%, #591A53 15%);
}
.kt-mission-writing-active .kt-mission-btn:active {
  background-color: color-mix(in oklab, #C3138C 70%, #591A53 30%);
}

.kt-mission-writing-done {
  background-color: #FFDAEB;
}
.kt-mission-writing-done .kt-mission-text {
  color: #591A53;
}
.kt-mission-writing-done .kt-mission-chip {
  background-color: rgba(89, 26, 83, 0.1);
  color: #591A53;
}
.kt-mission-writing-done .kt-mission-btn {
  background-color: #F1B2D6;
  color: #591A53;
}
.kt-mission-writing-done .kt-mission-btn:hover {
  background-color: color-mix(in oklab, #F1B2D6 85%, #591A53 15%);
}
.kt-mission-writing-done .kt-mission-btn:active {
  background-color: color-mix(in oklab, #F1B2D6 70%, #591A53 30%);
}

/* =============================================================================
   9. Current Readiness — colour-coded rows (green/orange/blue) instead of
   uniform green bars, matching the new mission-subject palette. Dots are
   plain colour (no initials) per the latest mockup — decorative category
   colour, not identity.
   ========================================================================== */
.kt-progress-readiness-orange .kt-progress-indicator {
  background-color: #FB812E;
}
.kt-progress-readiness-blue .kt-progress-indicator {
  background-color: #1360C3;
}

.kt-dot-green {
  background-color: #6EB943;
}
.kt-dot-orange {
  background-color: #FB812E;
}
.kt-dot-blue {
  background-color: #1360C3;
}

/* =============================================================================
   10. Study Rank system — game-style tier ladder replacing raw percentile
   rank display, reusing the same 4 brand hues already used for mission
   subjects (no new colours) plus a neutral base tier. Badge is a plain
   emoji (renders its own colour, no contrast concerns) in a coloured
   circle. Only "Study Champion" (Top 10%) is wired up on the page right
   now — the rest of the ladder is defined here so future tiers/pages can
   reuse it without reinventing names or colours.

     Tier             Percentile   Colour            Badge
     Study Rookie     everyone     neutral (muted)   🌱
     Study Explorer   Top 40%      green  #4CA817    🧭
     Study Warrior    Top 20%      orange #FB812E    ⚔️
     Study Champion   Top 10%      blue   #1360C3    🥇
     Study Legend     Top 5%       pink   #C3138C    👑
   ========================================================================== */
/* ---- Profile page tokens ------------------------------------------------- */
/* Prefixed --profile-* because the existing Metronic theme uses zinc-based
   --foreground/--popover/--muted-foreground whereas this spec uses slate-based
   hex values (#0F172A etc.). Running both sets through the same unprefixed
   names would silently override the zinc ramp on every page. The token VALUES
   are the exact spec hex — only the NAMES are adapted.
   Contrast (light):
     --profile-xp-text    #B45309 on --profile-xp-bg     #FFF0E2: 4.97:1 ✓
     --profile-streak-text #15803D on --profile-streak-bg #E7F5E4: 4.85:1 ✓
     --profile-link        #1D4ED8 on --profile-page-bg   #EBF1FE: 5.76:1 ✓
     badge-dream-text      #6D28D9 on badge-dream-bg      #EDE4FB: 5.87:1 ✓
     badge-stretch-text    #B45309 on badge-stretch-bg     #FDF0DC: 4.97:1 ✓
     badge-match-text      #15803D on badge-match-bg       #DFF3E4: 5.02:1 ✓
   Contrast (dark):
     --profile-xp-text    #FBBF24 on --profile-xp-bg     #3A2A18: 6.52:1 ✓
     --profile-streak-text #4ADE80 on --profile-streak-bg #14301C: 6.89:1 ✓
     --profile-link        #60A5FA on --profile-page-bg   #0F172A: 5.42:1 ✓
     badge-dream-text      #C4B5FD on badge-dream-bg      #2E1F47: 5.14:1 ✓
     badge-stretch-text    #FBBF24 on badge-stretch-bg     #3A2A18: 6.52:1 ✓
     badge-match-text      #4ADE80 on badge-match-bg       #14301C: 6.89:1 ✓ */
:root {
  --profile-page-bg:        #EBF1FE;
  --profile-surface:        #FFFFFF;
  --profile-text-primary:   #0F172A;
  --profile-text-secondary: #64748B;
  --profile-text-muted:     #94A3B8;
  --profile-link:           #1D4ED8;
  --profile-divider:        #E8EDF5;

  --profile-xp-bg:          #FFF0E2;
  --profile-xp-text:        #B45309;
  --profile-streak-bg:      #E7F5E4;
  --profile-streak-text:    #15803D;

  --profile-badge-dream-bg:    #EDE4FB;
  --profile-badge-dream-text:  #6D28D9;
  --profile-badge-stretch-bg:  #FDF0DC;
  --profile-badge-stretch-text:#B45309;
  --profile-badge-match-bg:    #DFF3E4;
  --profile-badge-match-text:  #15803D;

  --profile-ach-green-bg:    #E7F5E4;
  --profile-ach-green-icon:  #15803D;
  --profile-ach-peach-bg:    #FDEBDD;
  --profile-ach-peach-icon:  #B45309;
  --profile-ach-blue-bg:     #E6EAF5;
  --profile-ach-blue-icon:   #475569;
  --profile-ach-track:       #E3E8F0;
  --profile-ach-fill:        #1D4ED8;

  --profile-shadow-card:    0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --profile-radius-card:    16px;
  --profile-radius-pill:    12px;
  --profile-radius-badge:   999px;
}
.dark {
  --profile-page-bg:        #0F172A;
  --profile-surface:        #1E293B;
  --profile-text-primary:   #F1F5F9;
  --profile-text-secondary: #94A3B8;
  --profile-text-muted:     #64748B;
  --profile-link:           #60A5FA;
  --profile-divider:        #334155;

  --profile-xp-bg:          #3A2A18;
  --profile-xp-text:        #FBBF24;
  --profile-streak-bg:      #14301C;
  --profile-streak-text:    #4ADE80;

  --profile-badge-dream-bg:    #2E1F47;
  --profile-badge-dream-text:  #C4B5FD;
  --profile-badge-stretch-bg:  #3A2A18;
  --profile-badge-stretch-text:#FBBF24;
  --profile-badge-match-bg:    #14301C;
  --profile-badge-match-text:  #4ADE80;

  --profile-ach-green-bg:    #14301C;
  --profile-ach-green-icon:  #4ADE80;
  --profile-ach-peach-bg:    #3A2A18;
  --profile-ach-peach-icon:  #FBBF24;
  --profile-ach-blue-bg:     #1E293B;
  --profile-ach-blue-icon:   #94A3B8;
  --profile-ach-track:       #334155;
  --profile-ach-fill:        #60A5FA;

  --profile-shadow-card:    0 1px 3px rgba(15,23,42,.25), 0 1px 2px rgba(15,23,42,.18);
  --profile-radius-card:    16px;
  --profile-radius-pill:    12px;
  --profile-radius-badge:   999px;
}

.kt-rank-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: calc(infinity * 1px);
}
.kt-rank-rookie {
  background-color: var(--secondary);
}
.kt-rank-explorer {
  background-color: #4CA817;
}
.kt-rank-warrior {
  background-color: #FB812E;
}
.kt-rank-champion {
  background-color: #1360C3;
}
.kt-rank-legend {
  background-color: #C3138C;
}