/* ══════════════════════════════════════════════════════════════════════════
   skin_lab — course wiki for Ingeniería del Software, Artificial
   Intelligence degree.

   Deliberately a different family from the EGC skin. That one is a terminal:
   dark chrome, monospace wordmark, crimson. This one belongs to the field it
   is taught in, and does it without any of the things that usually stand in
   for that field. No neon on black, no glow, no gradient behind the text: a
   course wiki is read end to end, in a lab, on whatever screen is to hand,
   and each of those costs legibility for an impression.

   What carries the identity is restraint and a single signal. The page is
   paper so the material reads; violet and cyan meet in exactly one place,
   the hairline under the header, which is the site's signature. Everywhere
   else one colour does one job.

   Colour, faces and radius come from the theme's --brand-* tokens (set in
   __init__.py), so this file only says what the tokens cannot express.
   Loaded at asset order 200, after the theme base and after every feature,
   so these rules win.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    color-scheme: light dark;

    /* A tint of the primary, for blocks that need to sit apart from the
       page without becoming a coloured box. */
    --isia-wash: #f5f4fe;
    --isia-rule: #e4e1f8;
    /* The other end of the signature. Named rather than inlined because it
       appears in three places and has to be the same cyan in all of them. */
    --isia-signal: #06b6d4;
}

/* ── The dark palette ───────────────────────────────────────────────────────
   Not the light one inverted. Violet at #4c2fd7 is chosen to hold 7:1
   against white and manages 1.9:1 against near-black, so on a dark page it
   is a bruise rather than a colour; the whole family moves up in lightness
   and down in saturation to stay recognisably the same identity while
   remaining readable. Every value below was measured against the page
   colour, and the lowest is 5.9:1.

   The page is near-black with a violet cast rather than neutral grey, which
   is what keeps this from looking like the other wiki's dark mode. */
@media (prefers-color-scheme: dark) {
    :root {
        --brand-bg: #131320;
        --brand-surface: #1b1b2b;
        --brand-text: #d6d6e2;
        --brand-heading: #f2f2f7;
        --brand-muted: #9a9ab5;
        --brand-border: #2c2c42;
        --brand-primary: #a78bfa;
        /* The cyan carries further here than it does on paper, so it is the
           darker of the two candidates: on black the brighter one glows. */
        --brand-accent: #38bdf8;

        /* The wash is a tint of the page rather than of white, or it would
           be a grey card floating on a violet-black page. */
        --isia-wash: #1c1b2e;
        --isia-rule: #322f4d;
        --isia-signal: #22d3ee;
    }
}

/* ── Header ──────────────────────────────────────────────────────────────
   Light, with the site name in the geometric face over the one gradient in
   the whole skin: a two-pixel hairline from violet to cyan, the width of
   the page. It is the signature, and it is two pixels tall because that is
   all a signature needs. */

body > header,
.site-header {
    background: var(--brand-bg);
    border-bottom: 0;
    box-shadow: none;
    position: relative;
}

body > header::after,
.site-header::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--brand-primary) 0%,
        var(--isia-signal) 60%,
        color-mix(in srgb, var(--isia-signal) 25%, transparent) 100%
    );
}

.site-header__brand,
.navbar-brand,
.site-brand__name {
    font-family: var(--brand-font-heading);
    font-weight: 700;
    font-size: 1.3rem;
    /* Tight, which is what a geometric face is drawn for. */
    letter-spacing: -0.025em;
    color: var(--brand-heading);
    text-decoration: none;
    border-bottom: 0;
}

/* The dot that used to be an indigo underline. A single filled square in
   the signal colour, set before the name: the smallest possible mark, and
   the one thing a reader will remember the site by. */
.site-brand__name::before {
    content: "";
    display: inline-block;
    width: .45rem;
    height: .45rem;
    margin-inline-end: .5rem;
    vertical-align: middle;
    background: var(--brand-primary);
    box-shadow: .3rem 0 0 var(--isia-signal);
}

.site-header__brand:hover,
.navbar-brand:hover {
    color: var(--brand-primary);
}

.nav-link {
    font-family: var(--brand-font-body);
    color: var(--brand-text);
}

.nav-link:hover {
    color: var(--brand-primary);
}

/* ── Headings ────────────────────────────────────────────────────────────
   The geometric face carries the identity, so it applies wherever a heading
   appears, including inside rendered page bodies. Tightened, because a
   grotesk set at default tracking reads as a website and this is meant to
   read as documentation. */

h1, h2, h3, h4,
.prose h1, .prose h2, .prose h3, .prose h4,
.courses-card__name,
.courses-section__title,
.courses-attachments__title {
    font-family: var(--brand-font-heading);
    letter-spacing: -0.025em;
    font-weight: 600;
}

/* A section rule in the primary rather than the neutral border, which is
   the one place the indigo carries structure instead of decoration. */
.prose h2,
.courses-section__title {
    border-bottom-color: var(--isia-rule);
}

/* ── Reading ─────────────────────────────────────────────────────────────
   A measure narrower than the container and taller leading than the feature
   default: this material is read in long stretches rather than skimmed. */

.prose {
    max-width: 44rem;
    line-height: 1.75;
}

.prose a {
    color: var(--brand-primary);
    text-decoration-thickness: 1px;
}

.prose a:hover {
    color: var(--brand-accent);
}

.prose blockquote {
    background: var(--isia-wash);
    border-left-color: var(--brand-primary);
    border-radius: 0 var(--brand-radius) var(--brand-radius) 0;
    padding: .6rem 1rem;
    color: var(--brand-text);
}

/* ── Code ────────────────────────────────────────────────────────────────
   A software engineering course is mostly commands. Kept light here, unlike
   EGC's editor-styled dark block, because the rest of this skin is paper. */

.prose code {
    background: var(--isia-wash);
    color: var(--brand-accent);
}

/* The panel and its palette are the theme's, so a code block follows the
   reader's colour scheme. This skin keeps only the violet edge, which is
   what ties it to the rest of the identity. */
.cms-public .code-block {
    border-left: 3px solid var(--brand-primary);
}

.prose pre code {
    color: inherit;
}

/* ── Course listing ──────────────────────────────────────────────────────
   Cards that read as a table of contents rather than as a grid of
   products. */

.courses-card {
    background: var(--brand-bg);
    border-left: 3px solid var(--isia-rule);
    border-radius: var(--brand-radius);
}

.courses-card:hover,
.courses-card:focus-visible {
    border-left-color: var(--brand-primary);
    border-color: var(--brand-border);
    background: var(--isia-wash);
    transform: none;
}

.courses-pages a:hover {
    background: var(--isia-wash);
}

/* ── Attachments ─────────────────────────────────────────────────────────
   The files are the material, so the block earns the accent. */

.courses-attachments {
    background: var(--isia-wash);
    border-color: var(--isia-rule);
}

.courses-attachments a {
    color: var(--brand-primary);
}

.courses-attachments a:hover {
    color: var(--brand-accent);
}

/* ── The Withheld badge ──────────────────────────────────────────────────
   Staff see this constantly while a course is being prepared, so it has to
   be legible at a glance and never alarming. */

.courses-badge--scheduled {
    border-color: var(--brand-accent);
    color: var(--brand-accent);
    background: #ffffff;
}

/* ── Search ──────────────────────────────────────────────────────────────*/

.courses-search input[type="search"],
.courses-search input[type="text"] {
    border-radius: var(--brand-radius);
}

.courses-search input[type="search"]:focus,
.courses-search input[type="text"]:focus {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
    border-color: var(--brand-primary);
}

/* ── Tables ──────────────────────────────────────────────────────────────*/

.prose th {
    background: var(--isia-wash);
    font-family: var(--brand-font-heading);
    font-weight: 600;
}


/* ── Dark adjustments the tokens cannot express ─────────────────────────────
   Everything above travels through --brand-*, so most of this skin needs
   nothing here. These three are the exceptions: a shadow that has to be
   darker than the page rather than lighter, a card that would otherwise
   disappear into it, and the hairline, which is the identity and has to
   stay bright. */
@media (prefers-color-scheme: dark) {
    .cms-public .card {
        background: var(--brand-surface);
        box-shadow: none;
    }
    .cms-public .card:hover {
        box-shadow: 0 2px 14px rgba(0, 0, 0, .5);
    }
    body > header::after,
    .site-header::after {
        background: linear-gradient(
            90deg,
            var(--brand-primary) 0%,
            var(--isia-signal) 60%,
            color-mix(in srgb, var(--isia-signal) 25%, transparent) 100%
        );
    }
}

/* ── Print ──────────────────────────────────────────────────────────────────
   Lab material ends up on paper, and a dark palette on a printer is a
   wasted cartridge and an unreadable page. */
@media print {
    .cms-public .site-header,
    .cms-public .site-footer,
    .cms-public .site-nav,
    .cms-public .course-aside { display: none; }
    .cms-public .code-block {
        background: #ffffff;
        border: 1px solid #999999;
        border-left: 3px solid #4c2fd7;
    }
    .cms-public .code-block pre { color: #000000; }
}