/* The gathio theme: always dark, on the project's surfaces from brand_theme,
   with the app's own icon hue from gathio_theme marking every action. Loaded
   after gathio's own stylesheet by the forked views/layouts/main.handlebars.
   Always dark rather than following the browser: gathio ships no dark theme
   and no switcher, so there is no state to agree with. */

:root {
    /* gathio's own accents, from gathio_theme: the action colour is the app's
       icon hue, so the two move together (see the project's vars). */
    --gathio-green: #5ccd69;
    --gathio-green-deep: #50b45c;
    --gathio-green-deeper: #3d924d;
    --gathio-neon: #8ee855;

    /* The secondary button: the same green and lightness with a quarter of the
       chroma, so Close and Remove me sit under Attend without a second hue and
       without going grey. */
    --gathio-sage: #99c099;
    --gathio-sage-deep: #7fab7f;

    /* One ink for every button, green or amber: they are all light enough to
       carry it, and a white label on one of them is the loudest thing on the
       page whatever the button does. White on a mid-tone green is ~2:1. */
    --gathio-on-action: #0a130d;

    /* Links stay violet, and answer in green: hovering is the first half of
       pressing, so it moves towards the colour of everything pressable. */
    --gathio-link: #c9a6f5;
    --gathio-link-hover: #87e78d;

    /* Surfaces, darkest first: the page, cards, and the strips on top of them
       (card headers, inputs, table stripes). Same near-black plum as the
       authentik dashboard's dark background. */
    --gathio-bg: #16101d;
    --gathio-surface: #1e1729;
    --gathio-surface-2: #271e36;
    --gathio-border: #3a2d4f;

    --gathio-text: #ece8f3;
    --gathio-muted: #b0a3c4;

    /* gathio's own components read these, so repainting them here covers most
       of the site before a single component rule below. The greys are a ramp
       from light to dark upstream and are inverted rather than remapped one for
       one: 99 is its lightest surface, 20 its darkest text. */
    --color-purple: var(--gathio-green);
    --color-purple-dark: var(--gathio-green-deep);
    --color-purple-lighter: color-mix(in srgb, var(--gathio-surface-2) 60%, var(--gathio-border));
    --color-purple-light: var(--gathio-surface-2);
    --color-red: #ff6b7a;
    --color-red-dark: #d94555;
    --color-grey-99: var(--gathio-surface);
    --color-grey-97: var(--gathio-surface);
    --color-grey-95: var(--gathio-surface-2);
    --color-grey-90: var(--gathio-border);
    --color-grey-85: var(--gathio-border);
    --color-grey-80: color-mix(in srgb, var(--gathio-border) 70%, var(--gathio-muted));
    --color-grey-75: color-mix(in srgb, var(--gathio-border) 55%, var(--gathio-muted));
    --color-grey-70: var(--gathio-muted);
    --color-grey-60: var(--gathio-muted);
    --color-grey-50: var(--gathio-muted);
    --color-grey-40: color-mix(in srgb, var(--gathio-text) 70%, var(--gathio-muted));
    --color-grey-30: var(--gathio-text);
    --color-grey-20: var(--gathio-text);
    --color--black: var(--gathio-text);

    /* Editing mode: the banner across the top and the border around the panel,
       both upstream's --color-orange. the project's own accent, which is the one
       colour on the page that cannot be mistaken for the accent green. */
    --gathio-pink: #e0559f;
    --gathio-pink-deep: #c94a8e;
    --gathio-pink-light: #fd8cc3;
    --color-orange: var(--gathio-pink);

    /* Leaving an event: amber, analogous to the green rather than opposite it,
       so it warns without reading as an error. Red would be the loudest thing
       on the page for an action that is not a failure. */
    --gathio-amber: #e28c38;
    --gathio-amber-deep: #c7792c;
}

/* --- the page ---------------------------------------------------------- */

/* The colour on <html> as well as on <body>: what a phone paints when the page
   is pulled past its end is the root's, and body's only reaches it while the
   root has none. `color-scheme` is the same answer for the parts the page does
   not paint at all — scrollbars, and the browser's own form controls. */
html {
    background-color: var(--gathio-bg);
    color-scheme: dark;
}

body {
    background-color: var(--gathio-bg);
    color: var(--gathio-text);
}

a {
    color: var(--gathio-link);
}

a:hover,
a:focus {
    color: var(--gathio-link-hover);
}

hr {
    border-top-color: var(--gathio-border);
}

.text-muted,
small.form-text {
    color: var(--gathio-muted) !important;
}

/* The strip behind the event image, seen wherever the image does not cover. */
.event-header-image {
    background-color: var(--gathio-surface);
}

/* The header band of an event with no picture of its own: upstream fills it
   with a near-white wave pattern, set inline on the element, so this needs the
   !important to win. A hair lighter than the panel and fading into it — the
   band is where a picture would be, so it stays a gap rather than a graphic. */
#genericEventImageContainer {
    background-image: linear-gradient(160deg, var(--gathio-surface-2) 0%, var(--gathio-surface) 100%) !important;
}

/* Both header bands fade into the panel below them, and upstream fades them to
   opaque white. Same stops as upstream's, which differ between the two — the
   picture gets a longer clear run than the pattern does. */
#genericEventImageContainer::before {
    background: linear-gradient(
        to bottom,
        rgba(30, 23, 41, 0) 0%,
        rgba(30, 23, 41, 0) 75%,
        var(--gathio-surface) 95%,
        var(--gathio-surface) 100%
    );
}

#eventImageContainer::before {
    background: linear-gradient(
        to bottom,
        rgba(30, 23, 41, 0) 0%,
        rgba(30, 23, 41, 0) 85%,
        var(--gathio-surface) 95%,
        var(--gathio-surface) 100%
    );
}

/* The main panel and the few other places gathio writes a literal white rather
   than one of its own variables — those literals ignore the palette above. */
#container > #content {
    background: var(--gathio-surface);
    border-color: var(--gathio-border);
}

#container > #content > footer {
    background: var(--gathio-surface-2);
    border-top-color: var(--gathio-border);
}

.feature-card--nested,
.feature-card--nested.feature-card--active {
    background: var(--gathio-surface-2);
}

.image-preview {
    background-color: var(--gathio-surface-2);
}

/* White on the pink is 3.3:1; a near-black is 5.8:1. The border around the
   panel needs no rule — it reads --color-orange above. */
.event__editing-banner {
    background-color: var(--gathio-pink);
    color: #16101d;
}

/* Narrow screens put the sidebar under an event or a group (`main.event` is
   both), so a phone opens on the event's own picture rather than on gathio's
   name and a create button. Every other page keeps the sidebar on top, where it
   is that page's own heading and its create button. One grid column either way,
   so only the order changes and which row takes the slack: upstream sizes the
   first row `min-content` for the sidebar, and leaving that under the event
   squashes it. */
@media (max-width: 767.98px) {
    body > #container:has(> #content > main.event) {
        grid-template-rows: auto min-content;
    }

    /* Padding at both ends because upstream drops the container's own below
       768px: without it the mark ends flush against the bottom of the scroll. */
    body > #container:has(> #content > main.event) > #sidebar {
        order: 1;
        padding-top: 1rem;
        padding-bottom: 2rem;
    }

    /* On the pages where the sidebar is on top, the mark alone still belongs at
       the foot: the sidebar and its wrapper stop being boxes, so their children
       become the container's own rows and only the mark is ordered past the
       content. Flex rather than the grid, since how many children the sidebar
       has depends on which partials the project mounts. Neither box carries
       padding below 768px, so flattening them loses nothing. */
    body > #container:has(> #content > main.page) {
        display: flex;
        flex-direction: column;
    }

    #container:has(> #content > main.page) > #sidebar,
    #container:has(> #content > main.page) .sidebar-sticky-wrapper {
        display: contents;
    }

    #container:has(> #content > main.page) > #content {
        flex: 1;
    }

    #container:has(> #content > main.page) .sidebar__brand {
        order: 1;
        margin: 1.5rem 0 1rem;
    }
}

/* The site name in the sidebar, in the app's own green, so the word at the top
   of every page is the same colour as the icon in the tab beside it. Upstream
   paints it dark grey and shows colour only on hover, which on this background
   reads as a disabled heading. Both states keep background-clip, since
   upstream's `color: transparent` is what lets the background through. */
#sidebar h1 a {
    background: var(--gathio-green);
    background-clip: text;
    -webkit-background-clip: text;
}

#sidebar h1 a:hover {
    background: var(--gathio-neon);
    background-clip: text;
    -webkit-background-clip: text;
}

/* The wordmark at the foot of the sidebar (views/partials/brandmark.handlebars),
   answering "whose instance is this" for a guest who arrived at one event. Held
   under the app's own name in size and strength: the page is gathio's, the project is
   what it belongs to. On a narrow screen it is the foot of the page either way:
   under the sidebar where that sits below an event, and ordered past the content
   where the sidebar is on top (rule above). */
.sidebar__brand {
    margin: 2rem 0 0;
}

/* Anchored to the foot of the window, not of the nav: upstream's wrapper is
   sticky from 768px up, so giving it the viewport's height and pushing the mark
   down with `auto` keeps it in place while the event scrolls beside it. The
   sticky offset is raised to where the wrapper already starts (1rem of container
   padding plus 1rem of the sidebar's own), so it never drifts up by that
   difference on the first scroll; the height leaves the same 2rem at the foot.
   Below 768px the wrapper is not sticky and a full-height one would push the
   page's content off the screen. */
@media (min-width: 768px) {
    .sidebar-sticky-wrapper {
        display: flex;
        flex-direction: column;
        top: 2rem;
        height: calc(100vh - 4rem);
    }

    .sidebar__brand {
        margin-top: auto;
    }
}

.sidebar__brand img {
    width: 5.5rem;
    height: auto;
    opacity: 0.7;
    transition: opacity 0.15s ease-in-out;
}

.sidebar__brand a:hover img {
    opacity: 1;
}

/* --- cards, modals, lists ---------------------------------------------- */

.card,
.modal-content,
.dropdown-menu,
.list-group-item {
    background-color: var(--gathio-surface);
    border-color: var(--gathio-border);
    color: var(--gathio-text);
}

.card-header,
.modal-header,
.modal-footer {
    background-color: var(--gathio-surface-2);
    border-color: var(--gathio-border);
}

/* Month headings in the event lists. Bootstrap's .bg-light carries
   !important, so the .list-group-item rule above cannot reach them. */
.bg-light {
    background-color: var(--gathio-surface-2) !important;
}

.list-group-item-action:hover,
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--gathio-surface-2);
    color: var(--gathio-text);
}

.close {
    color: var(--gathio-text);
    text-shadow: none;
    opacity: 0.7;
}

/* The × that dismisses a modal or an alert: green under the pointer, like
   every other thing on the page that does something when pressed. */
.close:hover {
    color: var(--gathio-green);
    opacity: 1;
}

/* The event form's option cards. */
.feature-card,
.feature-card--nested {
    background-color: var(--gathio-surface);
    border-color: var(--gathio-border);
}

.feature-card--active {
    background-color: var(--gathio-surface-2);
    border-color: var(--gathio-green);
}

.feature-card__desc {
    color: var(--gathio-muted);
}

/* --- forms ------------------------------------------------------------- */

.form-control,
.custom-select,
.custom-file-label,
.input-group-text,
.select2-container .select2-selection--single,
.select2-container .select2-selection__rendered {
    background-color: var(--gathio-surface-2);
    border-color: var(--gathio-border);
    color: var(--gathio-text);
}

.form-control:focus,
.custom-select:focus {
    background-color: var(--gathio-surface-2);
    border-color: var(--gathio-green);
    color: var(--gathio-text);
    box-shadow: 0 0 0 0.2rem rgba(92, 205, 105, 0.28);
}

.form-control::placeholder {
    color: var(--gathio-muted);
}

/* Bootstrap paints readonly and disabled fields light grey at [attr] specificity,
   which beats the .form-control rule above and leaves the attendee's removal
   password white on white until it is focused. Read-only here means "copy me". */
.form-control[readonly],
.form-control:disabled,
.custom-select:disabled {
    background-color: var(--gathio-surface);
    border-color: var(--gathio-border);
    color: var(--gathio-text);
    opacity: 1;
}

/* The cover-image picker: upstream paints the drop area white and its Choose
   file label grey-on-grey, which on a plum page is the loudest thing there and
   still does not read as pressable. It is a button, so it is the button green. */
.image-preview {
    background-color: var(--gathio-surface);
    border-color: var(--gathio-border);
    color: var(--gathio-muted);
}

.image-preview label {
    background-color: var(--gathio-green);
    color: var(--gathio-on-action);
    opacity: 1;
    font-weight: 600;
}

.image-preview label:hover {
    background-color: var(--gathio-green-deep);
}

.select2-dropdown,
.select2-results__option {
    background-color: var(--gathio-surface);
    color: var(--gathio-text);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--gathio-green);
    color: var(--gathio-on-action);
}

/* --- buttons ----------------------------------------------------------- */

.button--primary,
.btn-primary {
    background-color: var(--gathio-green);
    border-color: var(--gathio-green);
    color: var(--gathio-on-action);
    font-weight: 600;
}

.button--primary:hover,
.btn-primary:hover {
    background-color: var(--gathio-green-deep);
    border-color: var(--gathio-green-deep);
    color: var(--gathio-on-action);
}

/* Both hovers need saying: upstream's are a grey ramp (--color-grey-70), which
   the palette above inverts into a lilac rather than out of the way. */
.button--secondary,
.btn-secondary {
    background-color: var(--gathio-sage);
    border-color: var(--gathio-sage);
    color: var(--gathio-on-action);
    font-weight: 600;
}

.button--secondary:hover,
.btn-secondary:hover {
    background-color: var(--gathio-sage-deep);
    border-color: var(--gathio-sage-deep);
    color: var(--gathio-on-action);
}

/* Plain `button--outline` is the comment buttons only, and upstream defines no
   rule for it at all — so it kept the browser's own button: white, with the
   platform's accent for the label. The border is stated here rather than only
   its colour, since upstream's `.button` clears it and only the -primary and
   -secondary variants put one back. */
.button--outline,
.button--outline-primary,
.button--outline-secondary,
.btn-outline-secondary {
    background-color: transparent;
    border: 1px solid var(--gathio-border);
    color: var(--gathio-link);
}

.button--outline:hover,
.button--outline-primary:hover,
.button--outline-secondary:hover,
.btn-outline-secondary:hover {
    background-color: var(--gathio-surface-2);
    border-color: var(--gathio-green);
    color: var(--gathio-link-hover);
}

/* In a stack the bottom edge of a button is the next one's top border
   (upstream drops border-bottom on all but the last), so it has to follow. */
.button-stack > .button:hover + .button {
    border-top-color: var(--gathio-green);
}

/* Leaving an event, deleting one: amber, with the same ink the green buttons
   carry. */
.button--danger,
.btn-danger {
    background-color: var(--gathio-amber);
    border-color: var(--gathio-amber);
    color: var(--gathio-on-action);
    font-weight: 600;
}

.button--danger:hover,
.btn-danger:hover {
    background-color: var(--gathio-amber-deep);
    border-color: var(--gathio-amber-deep);
    color: var(--gathio-on-action);
}

/* Removing a comment is an outline button upstream, beside Reply and the same
   size: amber in the outline rather than filled, so it warns without outweighing
   the button next to it. */
.button--outline.deleteComment {
    border-color: var(--gathio-amber);
    color: var(--gathio-amber);
}

.button--outline.deleteComment:hover {
    background-color: var(--gathio-surface-2);
    border-color: var(--gathio-amber-deep);
    color: var(--gathio-amber);
}

/* Creating an event is the sidebar's primary button upstream, where anyone may
   create one. Here it is members only and most visits are to an event someone
   was sent, so it is the small outline button the ICS export uses: still first
   in the nav, no longer the loudest thing beside the event. */
#sidebar__nav .button--primary {
    background-color: transparent;
    border: 1px solid var(--gathio-border);
    color: var(--gathio-link);
    font-weight: 400;
    height: 1.75rem;
    line-height: 1.65rem;
    border-radius: 1.75rem;
    font-size: 0.85rem;
    padding: 0 0.75rem;
}

#sidebar__nav .button--primary:hover {
    background-color: var(--gathio-surface-2);
    border-color: var(--gathio-green);
    color: var(--gathio-link-hover);
}

/* Editing is the one thing on the page that is not green: the control inside
   editing mode is the same pink as the banner and frame around it, so the
   colour is what says "this is the editing mode" rather than the word. The one
   that *starts* editing is at the foot of the page (see below). */
#editEvent.button--primary {
    background-color: var(--gathio-pink);
    border-color: var(--gathio-pink);
    color: var(--gathio-on-action);
}

#editEvent.button--primary:hover {
    background-color: var(--gathio-pink-deep);
    border-color: var(--gathio-pink-deep);
    color: var(--gathio-on-action);
}

/* --- the event's own lines --------------------------------------------- */

/* Upstream puts an actions aside beside the information card — a second column
   from 992px, a block between the information and the description below that.
   The view has no aside any more, so the empty second column goes with it. */
@media (min-width: 992px) {
    #event__basics {
        grid-template-columns: 1fr;
    }
}

/* The two phone map apps, named on their own line under the address — the
   address itself is the OpenStreetMap link, so these are the alternative rather
   than the way in. Body size, like everything else on this card. */
.event__maps {
    display: flex;
    gap: 1.25rem;
    margin-top: 0.35rem;
}

/* A line of text is about 19px tall and a thumb wants 24 (WCAG 2.5.8), so the
   padding is what makes these two hittable rather than merely readable. The
   gap above is the other half of it: adjacent targets need space between. */
.event__maps a {
    display: inline-block;
    padding: 0.25rem 0;
}

/* The calendar export, on the line that says when the event is. A <button>, so
   the page's own handler still binds to it, painted as the link it reads as —
   including the middot that separates it from "in a month". */
.event__ics {
    background: none;
    border: 0;
    padding: 0.25rem 0;
    color: var(--gathio-link);
}

/* inline-block, so the hover underline is not drawn through it: a decoration
   reaches inline descendants and a child cannot turn it off, but it never
   crosses an atomic inline box. The colour is restated for the same reason. */
.event__ics::before {
    content: "·";
    display: inline-block;
    margin: 0 0.4rem;
    color: var(--gathio-muted);
}

.event__ics:hover,
.event__ics:focus {
    color: var(--gathio-link-hover);
    text-decoration: underline;
}

/* Starting the editing mode: last on the page and quiet, because the people it
   is for are whoever holds the event's secret link and nearly nobody else.
   Centred so it reads as the end of the page rather than a stray control. */
/* Padding rather than margin: upstream sets `margin: 0 1rem` on every direct
   child of main.event, at a specificity nothing here outranks, so a margin set
   here is dropped and the link ends up against the footer. */
/* 0.5rem at the top against 2rem at the foot, because the card above carries
   1.5rem of its own margin and the two add up: even space either side of the
   link, not even padding on this element. */
.event__edit-foot {
    padding: 0.5rem 0 2rem;
    text-align: center;
}

/* A pointer, because a bare <button> does not get one: muted is meant to be
   quiet, not to look inert. */
.event__edit-foot button {
    background: none;
    border: 0;
    padding: 0.25rem 0;
    font-size: 0.85rem;
    color: var(--gathio-muted);
    cursor: pointer;
}

/* Underlined only under the pointer, the way bootstrap treats every other link
   on the page. */
.event__edit-foot button:hover:not(:disabled),
.event__edit-foot button:focus:not(:disabled) {
    color: var(--gathio-pink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* A concluded event cannot be edited, and upstream disables the control rather
   than dropping it. */
.event__edit-foot button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- the event description --------------------------------------------- */

/* "About" says nothing the card below it does not: it is the only card whose
   heading names the page's own subject rather than a section of it. */
#eventDescription > .card-header {
    display: none;
}

/* The description is member markdown, so a `#` arrives as an h1 at Bootstrap's
   2.5rem — half again the event's own title (`h3`, 1.75rem). The ramp is capped
   below that title: a heading inside the event never outranks the event. */
#eventDescription h1 {
    font-size: 1.5rem;
}

#eventDescription h2 {
    font-size: 1.3rem;
}

#eventDescription h3 {
    font-size: 1.15rem;
}

#eventDescription h4,
#eventDescription h5,
#eventDescription h6 {
    font-size: 1rem;
}

/* --- attendees, comments, answers -------------------------------------- */

.attendeesList li,
.commentContainer,
.replyContainer,
.repliesContainer {
    background-color: var(--gathio-surface-2);
    border-color: var(--gathio-border);
    color: var(--gathio-text);
}

.attendee-name {
    color: var(--gathio-text);
}

.attendee-answers__question,
.attendee-answers__answer--empty {
    color: var(--gathio-muted);
}

.hidden-section {
    background-color: var(--gathio-surface-2);
    border-color: var(--gathio-border);
}

/* --- alerts, badges, tables -------------------------------------------- */

.alert {
    background-color: var(--gathio-surface-2);
    border-color: var(--gathio-border);
    color: var(--gathio-text);
}

.alert-success {
    border-color: var(--gathio-green-deeper);
}

/* Red is for a failure and nothing else. Every alert-warning gathio renders is
   a notice — save your link, the event concluded, the spots left — so it takes
   the amber meaning "warn without reading as an error". */
.alert-warning {
    border-color: var(--gathio-amber-deep);
}

.alert-danger {
    border-color: var(--color-red-dark);
}

.badge-secondary {
    background-color: var(--gathio-green-deeper);
    color: #ffffff;
}

.table,
.table td,
.table th {
    color: var(--gathio-text);
    border-color: var(--gathio-border);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--gathio-surface-2);
}

/* The event's own code snippets and the fediverse handle. */
.code,
code,
pre {
    background-color: var(--gathio-surface-2);
    color: var(--gathio-neon);
}