:root {
    --month-1-color: 28, 135, 126;
    --month-2-color: 230, 76, 114;
    --month-3-color: 158, 118, 87;
    --month-4-color: 116, 105, 182;
    --month-5-color: 65, 176, 110;
    --month-6-color: 60, 91, 111;
    --month-7-color: 202, 31, 31;
    --month-8-color: 255, 198, 25;
    --month-9-color: 109, 197, 209;
    --month-10-color: 248, 114, 23;
    --month-11-color: 91, 123, 9;
    --month-12-color: 71, 71, 70;
    --alpha: 0.65;
    --alpha-heading: 0.65;
    --font-primary: 'Alegreya Sans', 'Segoe UI', sans-serif;
    --font-secondary: 'Alegreya Sans', 'Segoe UI', sans-serif;
    --font-tertiary: 'Alegreya Sans', 'Segoe UI', sans-serif;
    --font-calendar-day-number: 'Alegreya Sans', 'Segoe UI', sans-serif;
    /* The "conjr" wordmark only; everything else is Alegreya Sans, a humanist sans with calligraphic roots that sits well beside it. */
    --font-wordmark: 'Almendra', var(--font-tertiary);
    --magic-color: #3a3355;
    --magic-color-accent: #A678AF;
    --magic-color-hover: color-mix(in srgb, var(--magic-color) 80%, grey 20%);
    --button-icon-light: whitesmoke;
    --body-background-color: #241f38;
    /* Theme: a twilight sky behind white cards. Dark mode swaps the card colours below. */
    --card-bg: #fffdf9;
    --card-text: #393939;
    --card-text-soft: #5b5670;
    --agreed-bg: #fff2d2;
    --secondary-button: var(--magic-color);
    --primary-button: var(--magic-color);
    --day-icon: var(--magic-color);
    --input-bg: #fff;
    --input-text: #212529;
    --input-border: #ced4da;
    --input-focus: var(--magic-color);
    --day-border: none;
    --gold: #f4c25b;
    --glow: rgba(166, 120, 175, 0.75);
    /* Ready to lock: the summoning's purple circle with a still gold glow around it (no glint), stronger on hover. The day's
       badge and the parts' and times' locks. */
    --ready-glow: 0 0 7px 2px rgba(244, 194, 91, 0.55);
    --ready-glow-hover: 0 0 10px 3px rgba(244, 194, 91, 0.8);
    /* ✗ ("I can't"): the block icon, and the faint glow on a day someone has blocked. */
    --block: #c2413b;
    --block-glow: rgba(214, 69, 69, 0.22);
    --night-sky: radial-gradient(ellipse at 50% -10%, #5d4f86 0%, transparent 60%), linear-gradient(170deg, #2b2442 0%, #241f38 55%, #1c1830 100%);
}

/* Dark mode: off-black cards with light text; the sky, bars and purple accents stay the same. It follows the
   device until someone uses the switch in the profile panel, which sets data-theme (conjr.js). The two blocks
   hold the same values. */
    :root[data-theme="dark"] {
        --card-bg: #2c2932;
        --card-text: #ece6f7;
        --card-text-soft: #b9aed3;
        --agreed-bg: #4a3b1c;
        --secondary-button: #d9cfee;
        --primary-button: #5c4d8a;
        --day-icon: #e3d6f0;
        --input-bg: #34303b;
        --input-text: #ece6f7;
        --input-border: #4a4553;
        --input-focus: var(--magic-color-accent);
        --day-border: 1px solid #4d4858;
        --block: #ef7a74;
        --block-glow: rgba(229, 83, 75, 0.26);
    }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --card-bg: #2c2932;
        --card-text: #ece6f7;
        --card-text-soft: #b9aed3;
        --agreed-bg: #4a3b1c;
        --secondary-button: #d9cfee;
        --primary-button: #5c4d8a;
        --day-icon: #e3d6f0;
        --input-bg: #34303b;
        --input-text: #ece6f7;
        --input-border: #4a4553;
        --input-focus: var(--magic-color-accent);
        --day-border: 1px solid #4d4858;
        --block: #ef7a74;
        --block-glow: rgba(229, 83, 75, 0.26);
    }
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #393939;
    margin: 0;
    padding: 0;
    /* clip, not hidden: hidden makes body a scroll container, which breaks the sticky top bar and month headings. */
    overflow-x: clip;
    min-height: 100dvh;
}

/* The night sky on html only: a background on body would cover the splash, which sits behind the page. Bootstrap
   gives body a white one, so it's cleared here. */
html {
    background-color: var(--body-background-color);
    background-image: var(--night-sky);
    background-attachment: fixed;
}

body {
    background: transparent;
}

/* While a panel (Layout/Panel.razor) or the phones' day menu (Panels/DayMenu.razor) is open, the page behind it
   doesn't scroll: the page is inert then anyway. The scrollbar's space stays, so nothing behind shifts sideways
   on desktop. A long panel still scrolls inside its own backdrop. */
html:has(.modal-background, .sheet-backdrop) {
    overflow: hidden;
    scrollbar-gutter: stable;
}

    .modal-background, .sheet-backdrop {
        overscroll-behavior: contain;
    }

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--card-bg), 0 0 0 0.25rem var(--input-focus);
}

/* Buttons, links and switches show the accent purple when focused, instead of the browser's own blue.
   :focus-visible, so it appears whenever the browser would show a focus ring (keyboard use) and not after
   every click. */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--magic-color-accent);
    outline-offset: 2px;
}

/* Text boxes follow the theme; Bootstrap's are always white. */
.form-control,
.form-control:focus {
    background-color: var(--input-bg);
    color: var(--input-text);
}

.form-control {
    border-color: var(--input-border);
}

.form-control:focus {
    border-color: var(--input-focus) !important;
}

.content {
    /*padding-top: 1.1rem;*/
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* THE TURNING MARK (splash, index.html): the mark in three layers, each turning at its own pace: the circle of five
   clockwise, the large triangle and inner circle the other way, and the gold triangle clockwise again. Still for
   anyone who prefers less motion. */
.conjr-mark-turning {
    display: grid;
}

    /* Positioned so the layers stack in order whether or not they're turning (a turning layer is drawn on its own
       layer, above plain images). The ring is solid inside, so the rest goes on top of it. */
    .conjr-mark-turning > * {
        grid-area: 1 / 1;
        position: relative;
    }

    .conjr-mark-turning img {
        display: block;
        width: 100%;
    }

    .conjr-mark-turning .conjr-mark-ring {
        animation: conjrMarkTurn 23s linear infinite;
    }

    .conjr-mark-turning .conjr-mark-middle {
        animation: conjrMarkTurn 14s linear infinite reverse;
    }

    .conjr-mark-turning .conjr-mark-gold {
        animation: conjrMarkTurn 25.5s linear infinite;
    }

    /* The gold triangle's shadow is on a wrapper that doesn't turn, so it stays below the triangle. */
    .conjr-mark-turning .conjr-mark-gold-shadow {
        filter: drop-shadow(0 1.4px 2.8px rgba(20, 17, 31, 0.6));
    }

@keyframes conjrMarkTurn {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .conjr-mark-turning .conjr-mark-ring,
    .conjr-mark-turning .conjr-mark-middle,
    .conjr-mark-turning .conjr-mark-gold {
        animation: none;
    }
}

/* SUMMONING GLINT: a summoning's ring (the Gatherings icon and cards, the day's badge, the drawer's block) is the accent,
   with a white point of light trailing a gold glint circling it steadily, so it reads as something to act on. Each
   ring is a transparent border with the fill painted to the padding box and this gradient to the border box under it
   (so rounded corners keep working), with a blurred copy behind for the glow. Registering the angle and colour is what
   lets the gradient animate. Shared here because scoped CSS renames keyframes per component. Under reduced motion the
   components leave the ring at rest, with no glint. */
@property --summon-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@property --summon-glint {
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
}

/* The glint's bright tip: its own colour (not a mix of the glint and white), so it's gone entirely when the animation
   isn't running (reduced motion). */
@property --summon-glint-tip {
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
}

/* The ring itself is written out on each element, not as a token here: a custom property holding var(--summon-angle)
   is filled in where it's declared, so one on :root would never see the angle move. The usual ring is
   conic-gradient(from var(--summon-angle), transparent 0 68%, var(--summon-glint) 90%, var(--summon-glint-tip) 94%,
   transparent 97%); small circles give the glint a longer tail (from 40%) so it shows. One cycle is one lap, run
   linear so the speed stays even. */
:root {
    --summon-glint-cycle: 2s;
}

@keyframes summonGlint {
    from {
        --summon-angle: 0deg;
        --summon-glint: var(--gold);
        --summon-glint-tip: #fff3d6;
    }

    to {
        --summon-angle: 360deg;
        --summon-glint: var(--gold);
        --summon-glint-tip: #fff3d6;
    }
}

/* SPLASH: the mark over the night sky while the page starts (markup in index.html). It fades in after a third of a
   second, so a quick start never shows it, and hides as soon as the layout has any content. It sits behind the page
   (z-index -1), so where :has() isn't supported the worst case is a faint mark in the gaps. */
#app-splash {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: splashFadeIn 0.3s ease 0.35s both;
}

    #app-splash .conjr-mark-turning {
        width: 112px;
    }

    /* Says what's happening, after a couple of seconds (a quick start never shows it), or that it failed. Under the
       mark, which stays centred. */
    #app-splash .splash-text {
        position: absolute;
        top: calc(50% + 56px + 1.2rem);
        left: 16px;
        right: 16px;
        margin: 0;
        font-family: var(--font-primary);
        font-size: 1rem;
        color: #d9cfee;
        text-align: center;
    }

    #app-splash .splash-loading {
        animation: splashFadeIn 0.5s ease 2.5s both;
    }

    #app-splash .splash-failed {
        display: none;
    }

    /* conjr.startApp adds this when the app couldn't download. The page has nothing else to tap then, so the splash
       comes to the front. */
    #app-splash.failed {
        z-index: 1;
        pointer-events: auto;
    }

        #app-splash.failed .splash-loading {
            display: none;
        }

        #app-splash.failed .splash-failed {
            display: block;
        }

        #app-splash.failed .conjr-mark-turning img {
            animation: none;
        }

    #app-splash button {
        display: block;
        margin: 0.8rem auto 0;
        padding: 0.4em 1.4em;
        border: none;
        border-radius: 16px;
        background-color: var(--primary-button);
        color: #fff;
        font-family: var(--font-primary);
        font-size: 1rem;
    }

/* Scripts a page adds don't count as content. */
body:has(.content > :not(script)) #app-splash {
    display: none;
}

@keyframes splashFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.calendar-heading-container {
    left: 20px;
    top: 5px;
    z-index: 1000;
    position: absolute;
    display: flex;
    top: 50%;
    transform: translateY(-50%);
}

.logo-mark {
    width: 75px;
}

/* The message bubble near the bottom: "Couldn't save that", session notices, phones' range banner (Calendar.razor)
   and the home panel's "Removed ... · Undo" (Panels/HomePanel.razor). Global, since both draw it. */
.save-error {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    padding: 0.6em 1.2em;
    border-radius: 20px;
    background-color: var(--magic-color);
    color: whitesmoke;
    font-family: var(--font-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media only screen and (max-width: 768px) {
    .save-error {
        bottom: 96px;
    }
}

/* The "conjr" wordmark (top bar and the home and creation panels): Almendra in light lavender with a deep purple
   outline and an accent glow. The outline is sized to the text so it looks the same at every size, and drawn
   behind the fill (paint-order) so it doesn't eat into the letters. Global, since the top bar (Calendar.razor) and
   the panels (Shared/PanelHeader.razor) both use it; each sizes it in its own CSS. */
.wordmark {
    position: relative;
    isolation: isolate;
    font-family: var(--font-wordmark);
    font-weight: 700;
    color: #e6d3ee;
    -webkit-text-stroke: 0.13em #1f1a2e;
    paint-order: stroke fill;
}

    /* The glow: a blurred, thicker accent copy of the word (from data-text) underneath, so it follows each letter
       without softening the outline or fill (a text-shadow would). The "/ ''" keeps screen readers from reading
       the word twice. */
    .wordmark::before {
        content: attr(data-text);
        content: attr(data-text) / "";
        position: absolute;
        inset: 0;
        z-index: -1;
        color: transparent;
        -webkit-text-stroke: 0.2em var(--magic-color-accent);
        paint-order: stroke fill;
        /* Sized to the text, like the outline: 11px at the 52px of the mock-up. */
        filter: blur(0.08em);
        pointer-events: none;
    }

@media only screen and (max-width: 768px) {
    .content {
        padding-top: 0;
    }

    .calendar-heading-container {
        top: unset;
        transform: unset;
    }

}