/*
 * Mobile-first: the rules below describe the phone layout.
 * Wider screens only add or change rules inside "@media (min-width: ...)" blocks.
 */

:root {
    /* Dark page only. The number in a comment is the contrast ratio; text needs 4.5, shapes 3. */
    --color-text: #e6e9ee;                 /* 14.9 on the background */
    --color-muted: #9aa5b4;                /* grey text and the border of a text field: 7.3 */
    --color-background: #12161c;
    --color-border: #3b4656;               /* lines between sections */
    --color-accent: #79b0ff;               /* links, outlined buttons, marked days, bars: 8.2 */
    --color-accent-hover: #a3c8ff;         /* the same while the mouse is over it */
    --color-button: #1f6feb;               /* the main button of a page; white text on it: 4.6 */
    --color-button-hover: #1a5fd0;         /* white text on it: 5.9 */
    --color-on-button: #ffffff;
    --color-field: #1e2530;                /* a field that cannot be edited, a message box; text on it: 12.7 */
    --color-error: #ff8f85;                /* messages of a refused form; buttons that delete: 8.2 */
    --color-error-background: #3b1c1a;     /* a deleting button under the mouse; the red text on it: 7.0 */
    --color-success: #7ee2a8;              /* "vote saved", "Pasuje wszystkim!": 11.5 */
    --color-success-background: #14301f;   /* the green text on it: 9.1 */

    --space: 1rem;
    --page-width: 60rem;
    --column-width: 27rem;          /* forms and the calendar: narrow, in the middle of the page */
    --control-height: 2.75rem;      /* 44 px: fields and buttons are easy to hit with a finger */

    /* Tells the browser that the page is dark, so its own parts (scrollbars, the confirm
       question, the look of fields) are dark too. */
    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-background);
}

.container {
    width: 100%;
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 var(--space);
}

main {
    flex: 1;
}

/*
 * Room between the last block of a page and the end of the window.
 * "main.container", not just "main": .container above sets the padding of all four sides, and
 * a selector with a class wins over one without, whatever their order in this file.
 */
main.container {
    padding-bottom: calc(2 * var(--space));
}

h1 {
    font-size: 1.5rem;
    line-height: 1.25;
    margin: var(--space) 0;
    /* A long word (an event name without spaces) is broken instead of making the page wider. */
    overflow-wrap: anywhere;
}

h2 {
    font-size: 1.125rem;
    line-height: 1.25;
    margin: 0 0 calc(var(--space) * 0.5);
}

a {
    color: var(--color-accent);
}

/* Heading and first sentence of a page, centred like the content below them. */
.page-intro {
    text-align: center;
}

/*
 * The sentence is no wider than the form below it. "balance" makes its lines about equally long
 * instead of a full line and a short rest; a browser that does not know it wraps as usual.
 */
.page-intro p {
    max-width: var(--column-width);
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
}

/* ----- Narrow column in the middle of the page: forms, the event page ----- */

.column {
    max-width: var(--column-width);
    margin: 0 auto;
}

/* The same distance between the blocks of a column ("every block that follows another one"). */
.column > * + * {
    margin-top: var(--space);
}

/* ----- Fields and buttons ----- */

/*
 * Caption of a field. Not simply "label": every day of the calendar is a <label> too,
 * and this rule must not touch them.
 */
.field label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

input[type="text"] {
    display: block;
    width: 100%;
    min-height: var(--control-height);
    padding: 0 0.75rem;
    border: 1px solid var(--color-muted);
    border-radius: 0.5rem;
    background: var(--color-background);
    color: var(--color-text);
    /* Fields do not take over the font of the page by themselves. Below 16 px phones zoom in. */
    font: inherit;
}

input[type="text"][readonly] {
    border-color: var(--color-border);
    background: var(--color-field);
}

input[type="text"][aria-invalid="true"] {
    border-color: var(--color-error);
}

/* Message under a field or above the calendar when the form was not accepted. */
.field-error {
    margin: 0.25rem 0 0;
    color: var(--color-error);
    font-weight: 600;
    overflow-wrap: anywhere;   /* a message can quote what was typed, see h1 */
}

/* The message belongs to what follows it (the calendar), so the gap is below. */
.field-error--above {
    margin: 0 0 calc(var(--space) * 0.5);
}

/* The main action of a page. */
.button-primary {
    display: block;
    width: 100%;
    min-height: 3rem;
    padding: 0 var(--space);
    border: 0;
    border-radius: 0.5rem;
    background: var(--color-button);
    color: var(--color-on-button);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    /* Touch screens: react at once, do not wait for a possible second tap (zoom). */
    touch-action: manipulation;
}

/* The "hidden" attribute must win over "display: block" above (button shown only by a script). */
.button-primary[hidden] {
    display: none;
}

/*
 * A less important action on a page that has a main one: outlined and only as wide as needed,
 * the same look as "Zaznacz cały miesiąc" in the calendar.
 */
.button-secondary {
    min-width: 12rem;
    min-height: var(--control-height);
    padding: 0 var(--space);
    border: 1px solid var(--color-accent);
    border-radius: 0.5rem;
    background: var(--color-background);
    color: var(--color-accent);
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

/*
 * An action that deletes something (administrator page): outlined like the secondary button,
 * but red, so that it cannot be taken for a harmless one.
 */
.button-danger {
    min-height: var(--control-height);
    padding: 0 var(--space);
    border: 1px solid var(--color-error);
    border-radius: 0.5rem;
    background: var(--color-background);
    color: var(--color-error);
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

/* Keyboard focus: the same frame as in the calendar. */
input[type="text"]:focus-visible,
.button-primary:focus-visible,
.button-secondary:focus-visible,
.button-danger:focus-visible {
    outline: 3px solid var(--color-text);
    outline-offset: 1px;
}

@media (hover: hover) {
    .button-primary:hover {
        background: var(--color-button-hover);
    }

    /* The lighter blue on the grey background: 9.0. */
    .button-secondary:hover {
        background: var(--color-field);
        color: var(--color-accent-hover);
    }

    .button-danger:hover {
        background: var(--color-error-background);
    }
}

/* ----- Event page ----- */

/* The link to share: below the voting part, set apart by a line. */
.share {
    padding-top: var(--space);
    border-top: 1px solid var(--color-border);
}

/* "Kopiuj link" under the field with a link. */
.field .copy-link {
    margin-top: calc(var(--space) * 0.5);
}

/* A box with a message for the visitor: "vote saved", or why the event takes no more votes. */
.notice {
    max-width: var(--column-width);
    margin: 0 auto;
    padding: calc(var(--space) * 0.75) var(--space);
    border-radius: 0.5rem;
    background: var(--color-field);
    text-align: center;
}

/* A message after a redirect ("vote saved") is the first thing on the page, above the heading. */
.notice--success {
    margin-top: var(--space);
    background: var(--color-success-background);
    color: var(--color-success);
    font-weight: 600;
}

/* "Zagłosowali już (2): Tomek, Ola" */
.voters {
    margin-bottom: 0;
    /* A long name without spaces is broken instead of making the page wider than the screen. */
    overflow-wrap: anywhere;
}

/* ----- Summary of votes (event page): one entry per chosen day ----- */

/*
 * More room around the heading than between other blocks. The space above is on the section:
 * a margin on top of the heading would merge with the section's own margin and add nothing.
 */
.column > .summary {
    margin-top: calc(var(--space) * 2);
}

/* The heading is underlined with the same thin line that follows the days that fit everyone. */
.summary h2 {
    margin-bottom: var(--space);
    padding-bottom: var(--space);
    border-bottom: 1px solid var(--color-border);
    text-align: center;
}

.summary-fits,
.summary-days {
    /* A list without bullets and without the indent browsers give to lists. */
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * The days that fit everyone, above the full list: two columns of equal width, so the dates and
 * "Pasuje wszystkim!" each start on one straight line. Both fit half of a 360 px phone.
 */
.summary-fits li {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.5rem;
}

.summary-fits li + li {
    margin-top: 0.5rem;
}

/* The thin line between the days that fit everyone and the full list. */
.summary-divider {
    margin: var(--space) 0;
    border: 0;
    border-top: 1px solid var(--color-border);
}

.summary-day + .summary-day {
    margin-top: var(--space);
}

.summary-date {
    margin: 0;
    font-size: 1rem;
}

.summary-count,
.summary-names {
    margin: 0;
    overflow-wrap: anywhere;   /* long names, see .voters */
}

/* "Pasuje wszystkim!": a text, so it does not depend on seeing the colour. */
.summary-best {
    color: var(--color-success);
}

/*
 * The bar: a light track over the whole width and a filled part. The template sets the width of
 * the filled part to the share of all voters who chose the day.
 * Contrast of the filled part to the track: 6.9, to the page: 8.2; a shape needs 3.
 */
.summary-bar {
    height: 0.5rem;
    margin: 0.25rem 0;
    border-radius: 0.25rem;
    background: var(--color-field);
}

.summary-bar span {
    display: block;
    height: 100%;
    border-radius: 0.25rem;
    background: var(--color-accent);
}

/* A chosen day that has passed: grey. The grey text on the page: 7.3; the grey bar on its track: 6.2. */
.summary-day--passed {
    color: var(--color-muted);
}

.summary-day--passed .summary-bar span {
    background: var(--color-muted);
}

/* ----- Pop-up after creating an event (templates/event.html, js/created-dialog.js) ----- */

/*
 * Without JavaScript the <dialog> is an ordinary box at the top of the page.
 * "position: static": browsers lay an open <dialog> over the page content, which would hide
 * the heading; "static" puts it into the normal flow of the page, like a paragraph.
 * It also has the class "column", which gives the width and the distance between its blocks.
 */
.created-dialog {
    position: static;
    width: auto;
    margin-top: var(--space);
    padding: var(--space);
    border: 2px solid var(--color-accent);
    border-radius: 0.5rem;
    background: var(--color-background);
    color: var(--color-text);
}

/*
 * ":modal" is true once created-dialog.js has opened the box as a real pop-up: fixed in the
 * middle of the screen, on top of the page, which cannot be used meanwhile.
 */
.created-dialog:modal {
    position: fixed;
    /* On a phone: the whole width except a margin of one --space on each side. */
    width: calc(100% - 2 * var(--space));
    /* A low screen (a phone held sideways): the content scrolls inside the pop-up. */
    max-height: calc(100% - 2 * var(--space));
    overflow: auto;
    margin: auto;
}

/* "::backdrop" is the layer the browser puts between a pop-up and the page: it darkens the page. */
.created-dialog::backdrop {
    background: rgb(0 0 0 / 65%);
}

.created-dialog h2 {
    margin: 0;
}

/* The warning under the administrator link. */
.created-dialog-note {
    margin: calc(var(--space) * 0.5) 0 0;
}

/* ----- Administrator page ----- */

.admin-votes {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* One vote: the name takes the free room, then the number of days and the button. */
.admin-votes li {
    display: flex;
    align-items: center;
    gap: calc(var(--space) * 0.75);
    padding: calc(var(--space) * 0.5) 0;
    border-top: 1px solid var(--color-border);
}

.admin-vote-name {
    flex: 1;
    /* Both lines are needed so that a long name without spaces is broken inside a flex row. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.admin-vote-days {
    white-space: nowrap;
    color: var(--color-muted);
}

/* ----- Last line of the event page and of the administrator page ----- */

/* "Wydarzenie zostanie automatycznie usunięte po ...": small and grey. The grey text on the page: 7.3. */
.removal-note {
    margin-bottom: 0;
    font-size: 0.875rem;
    color: var(--color-muted);
    /* Lines of about the same length, instead of a last line with one word (browsers since 2024). */
    text-wrap: balance;
}

/* The date in that line is not broken into two lines. */
.removal-day {
    white-space: nowrap;
}

.site-header {
    border-bottom: 1px solid var(--color-border);
    padding: calc(var(--space) * 0.75) 0;
}

/*
 * The site name and, next to it, one line about the site. They stand at the left edge of the
 * window, not at the edge of the centred page. On a narrow screen the line moves below the name.
 */
.site-header .container {
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    /* Both texts stand on the same line of writing, although their sizes differ. */
    align-items: baseline;
    column-gap: var(--space);
}

.site-name {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--color-accent);
    text-decoration: none;
}

/* Small and grey: an information, not a link. */
.site-tagline {
    font-size: 0.875rem;
    color: var(--color-muted);
}

/* Tablet and wider */
@media (min-width: 48rem) {
    h1 {
        font-size: 2rem;
    }
}