/*
    The MCCP module's own skin.

    The wiki was written against a palette of its own, and a module whose documentation looks like
    a different website from its pages is a module that reads as two projects. So these are the
    wiki's colours, exactly: the greys and the cyan and violet accents it already uses.

    Flat fills of those colours put somebody to sleep, so nothing here is one colour on its own.
    Surfaces are a shallow gradient, accents carry a wash of themselves behind them, headings run
    from cyan into violet, and anything you can click answers when a pointer is over it. All of it
    is small on purpose: this is depth, not decoration.

    Scoped to [data-module="mccp"] on the body, so it cannot leak into the rest of the site.
*/

[data-module="mccp"] {
    /* The wiki's palette, unchanged. */
    --mccp-bg: #0d1117;
    --mccp-surface: #161b22;
    --mccp-surface-2: #1b222b;
    --mccp-border: #232a33;
    --mccp-text: #c9d1d9;
    --mccp-muted: #8b949e;
    --mccp-heading: #e6edf3;
    --mccp-accent: #58c7f3;
    --mccp-accent-2: #a78bfa;
    --mccp-warm: #e3b341;
    --mccp-good: #7ee787;
    --mccp-bad: #ff7b72;

    background:
        radial-gradient(80rem 40rem at 15% -10%, rgba(88, 199, 243, 0.07), transparent 60%),
        radial-gradient(70rem 35rem at 90% 0%, rgba(167, 139, 250, 0.07), transparent 55%),
        var(--mccp-bg);
    background-attachment: fixed;
    color: var(--mccp-text);
}

/*
    The bar across the top and the strip at the bottom.

    They belong to the host and wear the site's green, which under a page of this palette reads as
    two designs arguing rather than one. Inside the module they take its colours instead - the same
    shape, the same layout, only the colour changed, so leaving the module still looks like leaving
    somewhere rather than like a different site loading.
*/
[data-module="mccp"] .navbar {
    background: linear-gradient(180deg, #131922, #0f141b) !important;
    border-bottom: 1px solid var(--mccp-border) !important;
    position: relative;
}

/* A hairline of the two accents under the bar, which is where the eye lands first. */
[data-module="mccp"] .navbar::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--mccp-accent), var(--mccp-accent-2), transparent);
    opacity: 0.55;
}

[data-module="mccp"] .navbar .navbar-brand {
    color: var(--mccp-heading);
}

[data-module="mccp"] .navbar .navbar-brand:hover {
    color: var(--mccp-accent);
}

[data-module="mccp"] .navbar .nav-link,
[data-module="mccp"] .navbar .nav-link.text-dark {
    color: var(--mccp-muted) !important;
}

[data-module="mccp"] .navbar .nav-link:hover,
[data-module="mccp"] .navbar .nav-link.text-dark:hover {
    color: var(--mccp-heading) !important;
    background: rgba(88, 199, 243, 0.12);
}

[data-module="mccp"] .footer {
    background: linear-gradient(180deg, #0f141b, #0b0f14);
    border-top: 1px solid var(--mccp-border) !important;
    color: var(--mccp-muted);
}

[data-module="mccp"] .footer a {
    color: var(--mccp-muted);
}

[data-module="mccp"] .footer a:hover {
    color: var(--mccp-accent);
}

/* The two links that sit opposite the module's own entries. */
[data-module="mccp"] header a {
    color: var(--mccp-accent);
}

/* Headings run across the two accents rather than sitting in one of them. */
[data-module="mccp"] h1.display-6 {
    background: linear-gradient(100deg, var(--mccp-heading) 30%, var(--mccp-accent) 70%, var(--mccp-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
}

[data-module="mccp"] h2,
[data-module="mccp"] h3,
[data-module="mccp"] .card-title {
    color: var(--mccp-heading);
}

[data-module="mccp"] a {
    color: var(--mccp-accent);
}

[data-module="mccp"] .text-muted {
    color: var(--mccp-muted) !important;
}

/* Cards: a surface with a lit top edge, and one that lifts towards the pointer. */
[data-module="mccp"] .card {
    background: linear-gradient(180deg, var(--mccp-surface-2), var(--mccp-surface));
    border: 1px solid var(--mccp-border);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

[data-module="mccp"] .card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(88, 199, 243, 0.5), rgba(167, 139, 250, 0.5), transparent);
}

[data-module="mccp"] a.card:hover {
    transform: translateY(-2px);
    border-color: rgba(88, 199, 243, 0.45);
    box-shadow: 0 10px 24px -14px rgba(88, 199, 243, 0.55);
}

/* Buttons: the primary one carries the gradient, the rest answer with a wash of the accent. */
[data-module="mccp"] .btn-primary {
    background: linear-gradient(100deg, var(--mccp-accent), var(--mccp-accent-2));
    border: 0;
    color: #0b0f14;
    font-weight: 600;
}

[data-module="mccp"] .btn-primary:hover,
[data-module="mccp"] .btn-primary:focus {
    filter: brightness(1.08);
    color: #0b0f14;
}

[data-module="mccp"] .btn-outline-secondary {
    border-color: var(--mccp-border);
    color: var(--mccp-text);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
}

[data-module="mccp"] .btn-outline-secondary:hover {
    background: rgba(88, 199, 243, 0.12);
    border-color: rgba(88, 199, 243, 0.5);
    color: var(--mccp-heading);
}

[data-module="mccp"] .btn-outline-primary {
    border-color: rgba(88, 199, 243, 0.55);
    color: var(--mccp-accent);
}

[data-module="mccp"] .btn-outline-primary:hover {
    background: rgba(88, 199, 243, 0.15);
    color: var(--mccp-heading);
}

[data-module="mccp"] .btn-outline-danger {
    border-color: rgba(255, 123, 114, 0.5);
    color: var(--mccp-bad);
}

[data-module="mccp"] .btn-success,
[data-module="mccp"] .btn-outline-success {
    --bs-btn-color: #0b0f14;
    --bs-btn-bg: var(--mccp-good);
    --bs-btn-border-color: var(--mccp-good);
    --bs-btn-hover-bg: #93f0a0;
    --bs-btn-hover-border-color: #93f0a0;
}

/* Tabs: the open one is lit from underneath rather than boxed in. */
[data-module="mccp"] .nav-tabs {
    border-bottom-color: var(--mccp-border);
}

[data-module="mccp"] .nav-tabs .nav-link {
    color: var(--mccp-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
}

[data-module="mccp"] .nav-tabs .nav-link:hover {
    color: var(--mccp-text);
    border-bottom-color: rgba(88, 199, 243, 0.35);
}

[data-module="mccp"] .nav-tabs .nav-link.active {
    color: var(--mccp-heading);
    background: linear-gradient(180deg, rgba(88, 199, 243, 0.10), transparent);
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, var(--mccp-accent), var(--mccp-accent-2)) 1;
}

/* Boxes somebody types in. */
[data-module="mccp"] .form-control,
[data-module="mccp"] .form-select {
    background: var(--mccp-surface);
    border-color: var(--mccp-border);
    color: var(--mccp-text);
}

[data-module="mccp"] .form-control:focus,
[data-module="mccp"] .form-select:focus {
    background: var(--mccp-surface);
    border-color: var(--mccp-accent);
    box-shadow: 0 0 0 3px rgba(88, 199, 243, 0.15);
    color: var(--mccp-heading);
}

[data-module="mccp"] .form-control::placeholder {
    color: #5c6672;
}

/* Badges: a wash of their own colour rather than a solid block. */
[data-module="mccp"] .badge.text-bg-secondary {
    background: rgba(167, 139, 250, 0.16) !important;
    color: var(--mccp-accent-2) !important;
    border: 1px solid rgba(167, 139, 250, 0.35);
    font-weight: 500;
}

/* The notices this module shows: a colour down the edge, not a filled slab. */
[data-module="mccp"] .alert {
    background: linear-gradient(180deg, var(--mccp-surface-2), var(--mccp-surface));
    border: 1px solid var(--mccp-border);
    border-left: 3px solid var(--mccp-accent);
    color: var(--mccp-text);
}

[data-module="mccp"] .alert-danger { border-left-color: var(--mccp-bad); }
[data-module="mccp"] .alert-success { border-left-color: var(--mccp-good); }
[data-module="mccp"] .alert-warning { border-left-color: var(--mccp-warm); }

/* Tables, for the storage report. */
[data-module="mccp"] .table {
    --bs-table-color: var(--mccp-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--mccp-border);
}

[data-module="mccp"] .table thead th {
    color: var(--mccp-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
}

/* Lists of things: the changelog's entries, and the comment threads. */
[data-module="mccp"] .border-top {
    border-top-color: var(--mccp-border) !important;
}

[data-module="mccp"] .list-group-item {
    background: linear-gradient(180deg, var(--mccp-surface-2), var(--mccp-surface));
    border-color: var(--mccp-border);
    color: var(--mccp-text);
}

[data-module="mccp"] .list-group-item-action:hover {
    background: rgba(88, 199, 243, 0.10);
    color: var(--mccp-heading);
}

/* What an author wrote, in a mod's description or on a changelog entry. */
[data-module="mccp"] .mccp-description code {
    background: rgba(88, 199, 243, 0.12);
    color: #a5d6ff;
    border-radius: 4px;
    padding: 0.1em 0.35em;
}

[data-module="mccp"] .mccp-description pre {
    background: var(--mccp-surface);
    border: 1px solid var(--mccp-border);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    overflow-x: auto;
}

[data-module="mccp"] .mccp-description blockquote {
    border-left: 3px solid var(--mccp-accent-2);
    padding-left: 0.9rem;
    color: var(--mccp-muted);
}

/* The line down a comment thread, in the module's own accent. */
[data-module="mccp"] .mccp-thread-line::before {
    background: linear-gradient(180deg, rgba(88, 199, 243, 0.35), rgba(167, 139, 250, 0.25));
}

[data-module="mccp"] .mccp-thread-line:hover::before,
[data-module="mccp"] .mccp-thread-line:focus-visible::before {
    background: linear-gradient(180deg, var(--mccp-accent), var(--mccp-accent-2));
}

/* The dropdown the page sizes live in. */
[data-module="mccp"] .dropdown-menu {
    background: var(--mccp-surface);
    border-color: var(--mccp-border);
}

[data-module="mccp"] .dropdown-item {
    color: var(--mccp-text);
}

[data-module="mccp"] .dropdown-item:hover,
[data-module="mccp"] .dropdown-item:focus {
    background: rgba(88, 199, 243, 0.12);
    color: var(--mccp-heading);
}

[data-module="mccp"] .dropdown-item.active {
    background: linear-gradient(100deg, rgba(88, 199, 243, 0.25), rgba(167, 139, 250, 0.25));
    color: var(--mccp-heading);
}

/* Somebody who would rather nothing moved gets nothing moving. */
@media (prefers-reduced-motion: reduce) {
    [data-module="mccp"] .card,
    [data-module="mccp"] a.card:hover {
        transition: none;
        transform: none;
    }
}