/* ==========================================================================
   CSIP12 — Phase 3H "remaining pages" layer
   Leaderboard, Python Lab, Contact, Privacy, Terms, Syllabus, Programs,
   Career hub + career/course/exam detail pages, 404 and Edit Profile.

   These pages still use the original Tailwind markup. Rather than rewrite
   their content, this file maps the handful of Tailwind patterns they share
   onto the design tokens in csip-ui.css. Everything is scoped under
   `main.csip-legacy` (or `body.csip-standalone`), so no other page is
   affected. The `main` element selector keeps our rules one step more
   specific than Tailwind's runtime `.dark .dark\:x` utilities.
   ========================================================================== */

/* --- Page background ---------------------------------------------------- */
main.csip-legacy { background: var(--c-paper); color: var(--c-ink); }

/* --- Headings: Lora, like the rest of the redesigned site --------------- */
main.csip-legacy h1,
main.csip-legacy h2,
main.csip-legacy h3 {
    font-family: var(--f-serif) !important;
    letter-spacing: -0.01em;
}
main.csip-legacy h1,
main.csip-legacy h2 { font-weight: 600 !important; }
main.csip-legacy h3 { font-weight: 600 !important; }
/* Small all-caps labels marked up as h3 (e.g. "Quick Index") stay in the sans. */
main.csip-legacy h3.uppercase {
    font-family: var(--f-sans) !important;
    letter-spacing: 0.08em;
}
main.csip-legacy .prose h1,
main.csip-legacy .prose h2,
main.csip-legacy .prose h3 { color: var(--c-ink); }

/* Gradient-filled words become solid teal. */
main.csip-legacy .bg-clip-text {
    background: none !important;
    color: var(--c-teal) !important;
    -webkit-text-fill-color: currentColor;
}
html.dark main.csip-legacy .bg-clip-text { color: var(--c-teal-text) !important; }

/* --- Surfaces ----------------------------------------------------------- */
main.csip-legacy .bg-white,
html.dark main.csip-legacy .dark\:bg-darkCard,
html.dark main.csip-legacy .dark\:bg-slate-900 { background-color: var(--c-surface); }

main.csip-legacy .bg-gray-50,
main.csip-legacy .bg-slate-50,
main.csip-legacy .bg-slate-100,
main.csip-legacy .bg-gray-100,
html.dark main.csip-legacy .dark\:bg-slate-800,
html.dark main.csip-legacy .dark\:bg-slate-800\/40,
html.dark main.csip-legacy .dark\:bg-slate-800\/80,
html.dark main.csip-legacy .dark\:bg-slate-900\/50 { background-color: var(--c-band); }

/* Soft gradient header cards → plain surface with a hairline. */
main.csip-legacy .from-white.to-slate-50 {
    background: var(--c-surface) !important;
}

/* --- Hairlines ---------------------------------------------------------- */
main.csip-legacy .border-gray-100,
main.csip-legacy .border-gray-200,
main.csip-legacy .border-slate-100,
main.csip-legacy .border-slate-200,
main.csip-legacy .border-slate-200\/50,
main.csip-legacy .border-white,
html.dark main.csip-legacy .dark\:border-gray-700,
html.dark main.csip-legacy .dark\:border-gray-800,
html.dark main.csip-legacy .dark\:border-slate-700,
html.dark main.csip-legacy .dark\:border-slate-700\/50,
html.dark main.csip-legacy .dark\:border-slate-800 { border-color: var(--c-rule); }

main.csip-legacy .divide-gray-100 > * + *,
html.dark main.csip-legacy .dark\:divide-gray-700 > * + *,
html.dark main.csip-legacy .dark\:divide-slate-800 > * + * { border-color: var(--c-rule); }

main.csip-legacy .ring-1 { --tw-ring-color: transparent; box-shadow: none; }

/* --- Corners and depth: flatter, like the printed-page mockups ---------- */
main.csip-legacy .rounded-\[2rem\],
main.csip-legacy .rounded-3xl,
main.csip-legacy .rounded-2xl { border-radius: var(--r-lg); }
main.csip-legacy .rounded-xl { border-radius: var(--r-md); }

main.csip-legacy .shadow-sm,
main.csip-legacy .shadow,
main.csip-legacy .shadow-md,
main.csip-legacy .shadow-lg,
main.csip-legacy .shadow-xl,
main.csip-legacy .shadow-2xl,
main.csip-legacy .shadow-inner,
main.csip-legacy .drop-shadow-sm { box-shadow: none; filter: none; }

/* Decorative blurred blobs behind header cards. */
main.csip-legacy .animate-blob,
main.csip-legacy .blur-3xl { display: none; }

/* --- Text colours ------------------------------------------------------- */
main.csip-legacy .text-slate-900,
main.csip-legacy .text-slate-800,
main.csip-legacy .text-gray-900,
main.csip-legacy .text-gray-800,
html.dark main.csip-legacy .dark\:text-white,
html.dark main.csip-legacy .dark\:text-slate-100,
html.dark main.csip-legacy .dark\:text-slate-200 { color: var(--c-ink); }

main.csip-legacy .text-slate-700,
main.csip-legacy .text-slate-600,
main.csip-legacy .text-slate-500,
main.csip-legacy .text-gray-600,
main.csip-legacy .text-gray-500,
html.dark main.csip-legacy .dark\:text-slate-300,
html.dark main.csip-legacy .dark\:text-slate-400,
html.dark main.csip-legacy .dark\:text-gray-300,
html.dark main.csip-legacy .dark\:text-gray-400 { color: var(--c-ink-2); }

main.csip-legacy .text-slate-400,
main.csip-legacy .text-gray-400,
html.dark main.csip-legacy .dark\:text-slate-500 { color: var(--c-ink-3); }

main.csip-legacy .text-teal-500,
main.csip-legacy .text-teal-600,
main.csip-legacy .text-teal-700,
main.csip-legacy .text-primary { color: var(--c-teal); }
html.dark main.csip-legacy .dark\:text-teal-300,
html.dark main.csip-legacy .dark\:text-teal-400,
html.dark main.csip-legacy .text-primary,
html.dark main.csip-legacy .text-teal-500,
html.dark main.csip-legacy .text-teal-600 { color: var(--c-teal-text); }

main.csip-legacy a:not([class]):hover { color: var(--c-teal); }

/* --- Teal fills: solid primary, no gradients or glows ------------------- */
main.csip-legacy .bg-teal-500,
main.csip-legacy .bg-teal-600,
main.csip-legacy .bg-primary {
    background-color: var(--c-teal);
    color: var(--c-on-teal);
}
main.csip-legacy .hover\:bg-teal-500:hover,
main.csip-legacy .hover\:bg-teal-700:hover,
main.csip-legacy .bg-teal-500:hover,
main.csip-legacy .bg-teal-600:hover { background-color: var(--c-teal-hover); }
main.csip-legacy .hover\:-translate-y-0\.5:hover,
main.csip-legacy .hover\:-translate-y-1:hover { transform: none; }

main.csip-legacy .bg-teal-50,
main.csip-legacy .bg-teal-100,
html.dark main.csip-legacy .dark\:bg-teal-900\/30,
html.dark main.csip-legacy .dark\:bg-teal-900\/40,
html.dark main.csip-legacy .dark\:bg-teal-950\/30 { background-color: var(--c-teal-tint); }
main.csip-legacy .border-teal-100,
main.csip-legacy .border-teal-200,
html.dark main.csip-legacy .dark\:border-teal-800 { border-color: transparent; }

/* Small pill "eyebrow" labels above page titles use the amber accent. */
main.csip-legacy header .rounded-full.uppercase.tracking-widest {
    background: var(--c-amber-tint);
    color: var(--c-amber-text);
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
}
main.csip-legacy header .rounded-full.uppercase.tracking-widest > .rounded-full {
    background: var(--c-amber);
    animation: none;
}

/* --- Form fields -------------------------------------------------------- */
main.csip-legacy input[type="text"],
main.csip-legacy input[type="email"],
main.csip-legacy input[type="search"],
main.csip-legacy textarea:not(#code-editor),
main.csip-legacy select:not(#example-selector) {
    background-color: var(--c-surface);
    border-color: var(--c-rule-2);
    color: var(--c-ink);
}
main.csip-legacy input::placeholder,
main.csip-legacy textarea::placeholder { color: var(--c-ink-3); }
main.csip-legacy input:focus,
main.csip-legacy textarea:focus,
main.csip-legacy select:focus {
    outline: 2px solid var(--c-teal);
    outline-offset: 1px;
    border-color: var(--c-teal);
    --tw-ring-color: transparent;
}

/* --- Dark "feature" panels (career hero, CTA, stat cards) --------------- */
main.csip-legacy .bg-gradient-to-br.text-white {
    background: var(--c-ink) !important;
    border-color: transparent !important;
}
html.dark main.csip-legacy .bg-gradient-to-br.text-white {
    background: var(--c-band) !important;
    border: 1px solid var(--c-rule) !important;
}
main.csip-legacy .bg-gradient-to-br.text-white .bg-clip-text,
main.csip-legacy .bg-gradient-to-br.text-white .text-teal-300,
main.csip-legacy .bg-gradient-to-br.text-white .text-teal-400 { color: #9BD5C7 !important; }
main.csip-legacy .bg-gradient-to-br.text-white h1,
main.csip-legacy .bg-gradient-to-br.text-white h2 { color: #FFFFFF; }
html.dark main.csip-legacy .bg-gradient-to-br.text-white h1,
html.dark main.csip-legacy .bg-gradient-to-br.text-white h2 { color: var(--c-ink); }

/* ==========================================================================
   Page-specific touches
   ========================================================================== */

/* Segmented switches (syllabus Class/Subject): the selected option is teal. */
main.csip-legacy .shadow-inner > a.bg-white,
html.dark main.csip-legacy .shadow-inner > a.bg-white {
    background: var(--c-teal);
    color: var(--c-on-teal);
}

/* Faint decorative circles in the detail-page cards. */
main.csip-legacy .overflow-hidden > .absolute.rounded-full[class*="-right-"] { display: none; }

/* Leaderboard: segmented period switch (classes are swapped by main.js). */
main.csip-legacy [id^="tab-"] {
    border-radius: var(--r-md);
    border: 1px solid transparent;
    color: var(--c-ink-2);
    box-shadow: none;
}
main.csip-legacy [id^="tab-"].bg-white {
    background: var(--c-teal);
    color: var(--c-on-teal);
}
html.dark main.csip-legacy [id^="tab-"].bg-white { background: var(--c-teal); color: var(--c-on-teal); }
main.csip-legacy #leaderboard-body tr { background: transparent; }
@media (max-width: 639px) {
    /* Keep the XP column on screen at phone width (School is already hidden). */
    main.csip-legacy #leaderboard-body td,
    main.csip-legacy table:has(#leaderboard-body) th { padding-left: 0.5rem; padding-right: 0.5rem; }
    main.csip-legacy table:has(#leaderboard-body) th:first-child { width: auto; }
    /* Badge is the 4th column (Rank, Student, School, Badge, XP); hide it like School. */
    main.csip-legacy table:has(#leaderboard-body) th:nth-child(4),
    main.csip-legacy #leaderboard-body td:nth-child(4):not([colspan]) { display: none; }
}
main.csip-legacy #leaderboard-body tr:hover { background: var(--c-band); }
main.csip-legacy #leaderboard-body .text-teal-600,
main.csip-legacy #leaderboard-body .font-mono { font-variant-numeric: tabular-nums; }

/* Python Lab: feed the lab's own colour variables from the design tokens. */
main.csip-legacy #compiler-ui {
    --comp-bg: var(--c-surface);
    --comp-panel-bg: var(--c-paper);
    --comp-border: var(--c-rule);
    --comp-text: var(--c-ink);
    --comp-header-bg: var(--c-band);
    --term-bg: var(--c-surface);
    --term-text: var(--c-ink);
    border-radius: var(--r-lg);
}
main.csip-legacy #compiler-ui .text-blue-400 { color: var(--c-teal); }
html.dark main.csip-legacy #compiler-ui .text-blue-400 { color: var(--c-teal-text); }
main.csip-legacy #compiler-ui .btn-run { background-color: var(--c-teal); color: var(--c-on-teal); }
main.csip-legacy #compiler-ui .btn-run:hover { background-color: var(--c-teal-hover); }
main.csip-legacy #compiler-ui .btn-clear {
    background-color: transparent;
    color: var(--c-rust);
    border: 1px solid var(--c-rust);
}
main.csip-legacy #compiler-ui .btn-clear:hover { background-color: var(--c-rust-tint); }
main.csip-legacy #compiler-ui .comp-btn,
main.csip-legacy #compiler-ui #example-selector { border-radius: var(--r-md); }
main.csip-legacy #compiler-ui #example-selector { background-color: var(--c-surface); border-color: var(--c-rule-2); }
@media (max-width: 768px) {
    main.csip-legacy #compiler-ui { padding: 0; }
}

/* 404: the big number reads as a quiet serif numeral. */
main.csip-legacy .csip-legacy__404.bg-clip-text,
html.dark main.csip-legacy .csip-legacy__404.bg-clip-text {
    font-family: var(--f-serif) !important;
    font-weight: 600;
    color: var(--c-amber) !important;
    letter-spacing: 0.04em;
    animation: none;
}

/* ==========================================================================
   Edit Profile (standalone page without the site header)
   ========================================================================== */
body.csip-standalone {
    background: var(--c-paper) !important;
    color: var(--c-ink) !important;
    font-family: var(--f-sans);
}
body.csip-standalone .csip-profile-card {
    background: var(--c-surface) !important;
    border: 1px solid var(--c-rule) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: none !important;
}
body.csip-standalone h1 {
    font-family: var(--f-serif);
    font-weight: 600;
    color: var(--c-ink) !important;
}
body.csip-standalone .text-slate-400,
body.csip-standalone .text-slate-500 { color: var(--c-ink-2) !important; }
body.csip-standalone label { color: var(--c-ink-3) !important; }
body.csip-standalone input {
    background: var(--c-surface) !important;
    border-color: var(--c-rule-2) !important;
    color: var(--c-ink) !important;
    border-radius: var(--r-md) !important;
}
body.csip-standalone input:focus { border-color: var(--c-teal) !important; outline: 2px solid var(--c-teal); outline-offset: 1px; }
body.csip-standalone button[type="submit"] {
    background: var(--c-teal) !important;
    border-radius: var(--r-md) !important;
    box-shadow: none !important;
}
body.csip-standalone button[type="submit"]:hover { background: var(--c-teal-hover) !important; }
body.csip-standalone .bg-blue-500\/20 {
    background: var(--c-teal-tint) !important;
    border-color: transparent !important;
    color: var(--c-teal) !important;
}
body.csip-standalone .bg-amber-500\/20 {
    background: var(--c-amber-tint) !important;
    border-color: transparent !important;
    color: var(--c-amber-text) !important;
}
body.csip-standalone .bg-red-500\/15 {
    background: var(--c-rust-tint) !important;
    border-color: transparent !important;
    color: var(--c-rust) !important;
}
/* School suggestions list (items are built by the page script). */
body.csip-standalone #custom-school-dropdown {
    background: var(--c-surface) !important;
    border-color: var(--c-rule) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-pop) !important;
    backdrop-filter: none;
}
body.csip-standalone #custom-school-dropdown > * { border-color: var(--c-rule) !important; }
body.csip-standalone #custom-school-dropdown .text-white,
body.csip-standalone #custom-school-dropdown .text-slate-200,
body.csip-standalone #custom-school-dropdown .text-slate-100 { color: var(--c-ink) !important; }
body.csip-standalone #custom-school-dropdown [class*="hover:bg-"]:hover { background: var(--c-band) !important; }
body.csip-standalone #custom-school-dropdown .bg-blue-600\/30 { background: var(--c-teal-tint) !important; }
body.csip-standalone #custom-school-dropdown .bg-blue-500\/10 { background: var(--c-teal-tint) !important; color: var(--c-teal) !important; }
body.csip-standalone #custom-school-dropdown .text-blue-400,
body.csip-standalone #custom-school-dropdown .text-blue-300,
body.csip-standalone #custom-school-dropdown .group:hover .group-hover\:text-blue-300 { color: var(--c-teal) !important; }
html.dark body.csip-standalone #custom-school-dropdown .text-blue-400,
html.dark body.csip-standalone #custom-school-dropdown .text-blue-300,
html.dark body.csip-standalone #custom-school-dropdown .group:hover .group-hover\:text-blue-300 { color: var(--c-teal-text) !important; }
body.csip-standalone .text-slate-100 { color: var(--c-ink) !important; }
body.csip-standalone .csip-profile-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-teal);
}
html.dark body.csip-standalone .csip-profile-back { color: var(--c-teal-text); }
body.csip-standalone .csip-profile-back:hover { text-decoration: underline; }