/* The vibrant paint theme: three pigments, and the rule that keeps them harmless.
 *
 * Paint is decoration. It is never a functional colour. It never says what state a
 * thing is in, never fills a button, never carries text, never marks an error. The
 * product's controls, links, validation and status colours are exactly what they were
 * before this file existed and are not defined here at all.
 *
 * That is not a guideline. `tests/test_paint_theme.py` fails the build if a paint token
 * turns up in `color`, a border, an outline or a shadow anywhere under public/, and
 * fails it again if a page outside the agreed scope opts in.
 *
 * ── The three pigments ─────────────────────────────────────────────────────────
 *
 * Purple is the brand's own, taken from `--brand-start` rather than copied, so a
 * rebrand moves the paint with it. Coral and yellow are new and exist only here.
 *
 * All three are decoration-only, including the purple. Purple's contrast would permit
 * some text use, which is precisely why the exception is not made: a palette with one
 * pigment that is "sometimes functional" stops being a palette within a month.
 *
 * The existing logo is the one exception, because it is brand artwork rather than UI.
 *
 * ── Opt-in, not opt-out ────────────────────────────────────────────────────────
 *
 * A page gets paint by saying so:
 *
 *     <link rel="stylesheet" href="/venura-paint.css">
 *     <body class="site-chrome venura-vibrant">
 *
 * Nothing detects a URL, nothing matches `:not(.interview)`, and there is no exclusion
 * stylesheet listing the pages to spare. A page that says nothing is untouched, which
 * is the only version of "leave the testing and interviewing pages alone" that survives
 * the next person who adds a page. It is the same shape as `.site-chrome` above it in
 * `tokens.css`, for the same reason.
 *
 * ── Out of scope ───────────────────────────────────────────────────────────────
 *
 * Candidate emotional-state messaging, interview-result UX, rejection UX and
 * failure-state copy are outside this visual-theme migration and belong to product UX.
 * Paint is not an answer to a bad score.
 */

.venura-vibrant {
    /* EXPRESSIVE — DECORATION ONLY.
     * Not for: color, button backgrounds, form states, links, validation, badges,
     * status indicators, focus rings, borders.
     */
    --paint-purple: var(--brand-start);   /* #667eea, the brand's own */
    --paint-coral: #f45b69;
    --paint-yellow: #ffc83d;
}

/* ── The paint layer ───────────────────────────────────────────────────────────
 * A splash is a sibling of the content, never a background on the content's own box,
 * so text is never sitting on top of detail it cannot be read against. It takes no
 * clicks and is not in the accessibility tree; every element carrying this class must
 * also carry `aria-hidden="true"`, which the tests check.
 *
 * Two elements rather than one, and the reason is worth keeping. `.paint` is the
 * clipping window: it covers its container exactly and hides what leaves it. The mark
 * inside is what overhangs. Clipping here rather than with `overflow: hidden` on the
 * container itself matters because containers have their own business — the dashboard
 * header holds an absolutely positioned dropdown panel, and a theme that clipped its
 * host would have swallowed that menu whole.
 */
.venura-vibrant .paint {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    /* Behind the container's own children, above the container's background. A splash
     * at index zero paints *over* static content, because a positioned element beats
     * an unpositioned one whatever the source order — which is how the first version
     * put a coral blob on top of the reset-password button. The negative index is
     * only safe because `.paint-frame` isolates: without that it would sink behind
     * the page itself and vanish. */
    z-index: -1;
}

.venura-vibrant .paint-mark {
    position: absolute;
}

/* Content sits above the paint without needing to know where a splash was put. */
.venura-vibrant .paint-above {
    position: relative;
    z-index: 1;
}

/* A positioning context, and a stacking context to go with it. The isolation is what
 * keeps the negative index above meaning "behind this container's content" rather than
 * "behind the page". Its own overflow is left exactly as the page set it, so nothing
 * it was relying on changes — the dashboard header's dropdown still opens over the
 * content below it.
 */
.venura-vibrant .paint-frame {
    position: relative;
    isolation: isolate;
}

/* The dashboard mounts its paint window directly on <body>. Keep that particular
 * canvas in the viewport so a long admin/faculty page does not become undecorated
 * after the first screenful. Content scrolls over it; the artwork still takes no
 * clicks and remains behind every panel. Component-level paint stays absolute. */
body.venura-vibrant.paint-frame > .paint {
    position: fixed;
}

/* ── Pigment ───────────────────────────────────────────────────────────────────
 * Applied by class rather than by a `fill=` attribute on the shape, so that the one
 * rule that matters is checked by reading a stylesheet. A colour hidden in a
 * presentation attribute is a colour no test can see.
 *
 * Kept well under full strength. At 100% these are three loud colours fighting the
 * content; at this weight they read as a wash behind it, which is the difference
 * between a vibrant page and a busy one.
 */
.venura-vibrant .paint-art {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('/assets/venura-paint-sprite.png');
    background-repeat: no-repeat;
    background-size: 300% 100%;
    opacity: 0.58;
}

.venura-vibrant .paint-art--purple { background-position: left center; }
.venura-vibrant .paint-art--coral { background-position: center center; opacity: 0.52; }
.venura-vibrant .paint-art--yellow { background-position: right center; opacity: 0.58; }

.venura-vibrant .paint-artifact {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('/assets/venura-paint-artifacts.png');
    background-repeat: no-repeat;
    background-size: 300% 100%;
    opacity: 0.48;
}
.venura-vibrant .paint-artifact--drops { background-position: left center; }
.venura-vibrant .paint-artifact--rings { background-position: center center; opacity: 0.42; }
.venura-vibrant .paint-artifact--mix { background-position: right center; opacity: 0.42; }

/* ── The slots ─────────────────────────────────────────────────────────────────
 * Named positions, each one an empty region of a real page rather than a guess. The
 * rule about never putting text on paint is kept here, by geometry, and nowhere else:
 * a mark in a place text does not go cannot later end up under a paragraph.
 *
 * Offsets are absolute, never percentages of the container. A percentage measured
 * against a tall <main> puts the mark hundreds of pixels outside the clipping window
 * where it is simply not drawn — which is how the first version of this file managed
 * to paint five pages with nothing visible on any of them.
 *
 * Each slot disappears rather than shrinks at the width where the space it lives in
 * stops existing. A splash squeezed into a gap that has closed is a splash under a
 * paragraph.
 */
/* The empty middle of a header bar: past the heading, short of the controls. Placed
 * from the left rather than centred, because a centred mark drifts under whichever end
 * has more to say. Text never crosses it, which is the rule kept by geometry.
 */
.venura-vibrant .paint-mark.paint--band {
    top: 0;
    bottom: 0;
    left: 34%;
    width: 240px;
}

.venura-vibrant .paint-mark.paint--dashboard-edge {
    top: -32px; right: -55px; width: 440px; height: 125px;
    transform: rotate(-4deg);
}
.venura-vibrant .paint-mark.paint--dashboard-ribbon {
    top: -22px; left: 34%; width: 440px; height: 112px;
    transform: rotate(-3deg);
}
.venura-vibrant .paint-mark.paint--dashboard-sun {
    top: -72px; right: -55px; width: 210px; height: 190px;
    transform: rotate(-10deg);
}
.venura-vibrant .paint-mark.paint--dashboard-canvas-left {
    top: 120px; left: -185px; width: 390px; height: 350px;
    transform: rotate(9deg);
}
.venura-vibrant .paint-mark.paint--dashboard-canvas-right {
    top: 44%; right: -145px; width: 310px; height: 280px;
    transform: rotate(-8deg);
}
.venura-vibrant .paint-mark.paint--dashboard-canvas-bottom {
    bottom: 18px; left: 8%; width: 430px; height: 145px;
    transform: rotate(-6deg);
}
.venura-vibrant .paint-mark.paint--dashboard-drops-upper {
    top: 18%; right: -105px; width: 245px; height: 215px;
    transform: rotate(-8deg);
}
.venura-vibrant .paint-mark.paint--dashboard-rings-mid {
    top: 40%; left: -120px; width: 270px; height: 245px;
    transform: rotate(7deg);
}
.venura-vibrant .paint-mark.paint--dashboard-mix-lower {
    top: 64%; right: -110px; width: 255px; height: 225px;
    transform: rotate(-6deg);
}
.venura-vibrant .paint-mark.paint--dashboard-drops-deep {
    top: 82%; left: -90px; width: 220px; height: 195px;
    transform: rotate(11deg);
}

.venura-vibrant .paint-mark.paint--hero-purple {
    top: 11%; right: -4%; width: 620px; height: 520px;
    transform: rotate(-8deg);
}
.venura-vibrant .paint-mark.paint--hero-coral {
    bottom: 4%; left: 33%; width: 470px; height: 180px;
    transform: rotate(-7deg);
}
.venura-vibrant .paint-mark.paint--hero-yellow {
    top: 8%; left: -110px; width: 330px; height: 300px;
    transform: rotate(12deg);
}
.venura-vibrant .paint-mark.paint--section-left {
    top: 36px; left: -125px; width: 420px; height: 160px;
    transform: rotate(-6deg);
}
.venura-vibrant .paint-mark.paint--section-right {
    bottom: -70px; right: -210px; width: 330px; height: 300px;
    transform: rotate(-8deg);
}
.venura-vibrant .paint-mark.paint--section-splash {
    top: 24px; right: -210px; width: 360px; height: 320px;
    transform: rotate(9deg);
}
.venura-vibrant .paint-mark.paint--page-right {
    top: 30px; right: -170px; width: 420px; height: 370px;
    transform: rotate(-9deg);
}
.venura-vibrant .paint-mark.paint--page-left {
    top: 16%; left: -170px; width: 330px; height: 300px;
    transform: rotate(10deg);
}
.venura-vibrant .paint-mark.paint--page-bottom {
    bottom: 8px; left: 30%; width: 430px; height: 145px;
    transform: rotate(-7deg);
}
.venura-vibrant .paint-mark.paint--auth-left {
    top: 18%; left: -150px; width: 360px; height: 330px;
    transform: rotate(8deg);
}
.venura-vibrant .paint-mark.paint--auth-right {
    bottom: 8%; right: -130px; width: 310px; height: 280px;
    transform: rotate(-10deg);
}

/* A narrow screen has no empty middle — the heading and the controls meet — so the
 * band splash is simply not drawn rather than shrunk into the text.
 */
@media (max-width: 860px) {
    .venura-vibrant .paint-mark.paint--band,
    .venura-vibrant .paint-mark.paint--dashboard-edge,
    .venura-vibrant .paint-mark.paint--dashboard-ribbon,
    .venura-vibrant .paint-mark.paint--dashboard-sun { display: none; }
}

/* The open half of a hero whose text is left-aligned. */
.venura-vibrant .paint-mark.paint--beside {
    top: 50%;
    right: 7%;
    width: 215px;
    height: 190px;
    transform: translateY(-50%);
}

/* The margins either side of a centred card. Empty by construction — the card has a
 * maximum width and the page does not — but only when the host is the full-width
 * element. Hung on a `<main>` that is itself 520px wide, "4% from the left" is on the
 * card, which is where these two first landed.
 */
.venura-vibrant .paint-mark.paint--gutter-left {
    top: 34%;
    left: 4%;
    width: 210px;
    height: 180px;
}

.venura-vibrant .paint-mark.paint--gutter-right {
    top: 46%;
    right: 4%;
    width: 170px;
    height: 145px;
}

/* Below the content, in the room a short page leaves at the bottom. */
.venura-vibrant .paint-mark.paint--foot-right {
    bottom: 24px;
    right: 8%;
    width: 210px;
    height: 180px;
}

.venura-vibrant .paint-mark.paint--foot-left {
    bottom: 24px;
    left: 10%;
    width: 200px;
    height: 170px;
}

/* No gutters, no open half, no room at the foot. Below this width the page is one
 * column of text and the honest amount of paint is none.
 */
@media (max-width: 900px) {
    .venura-vibrant .paint-mark.paint--beside,
    .venura-vibrant .paint-mark.paint--gutter-left,
    .venura-vibrant .paint-mark.paint--gutter-right,
    .venura-vibrant .paint-mark.paint--foot-right,
    .venura-vibrant .paint-mark.paint--foot-left { display: none; }
}

@media (max-width: 760px) {
    .venura-vibrant .paint-mark.paint--hero-coral {
        display: block; bottom: 2%; left: 32%; width: 280px; height: 110px;
        opacity: 0.58;
    }
    .venura-vibrant .paint-mark.paint--hero-purple,
    .venura-vibrant .paint-mark.paint--hero-yellow,
    .venura-vibrant .paint-mark.paint--section-left,
    .venura-vibrant .paint-mark.paint--section-right,
    .venura-vibrant .paint-mark.paint--section-splash,
    .venura-vibrant .paint-mark.paint--page-right,
    .venura-vibrant .paint-mark.paint--page-left,
    .venura-vibrant .paint-mark.paint--auth-left,
    .venura-vibrant .paint-mark.paint--auth-right { display: none; }

    .venura-vibrant .paint-mark.paint--dashboard-canvas-left,
    .venura-vibrant .paint-mark.paint--dashboard-canvas-right,
    .venura-vibrant .paint-mark.paint--dashboard-drops-upper,
    .venura-vibrant .paint-mark.paint--dashboard-rings-mid,
    .venura-vibrant .paint-mark.paint--dashboard-mix-lower,
    .venura-vibrant .paint-mark.paint--dashboard-drops-deep { display: none; }

    .venura-vibrant .paint-mark.paint--dashboard-canvas-bottom {
        display: block; bottom: 8px; left: 12%; width: 270px; height: 92px;
    }

    .venura-vibrant .paint-mark.paint--page-bottom {
        display: block; bottom: -12px; left: 18%; width: 260px; height: 90px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .venura-vibrant .paint-mark {
        animation: none !important;
        transition: none !important;
    }
}