:root {
    color-scheme: light dark;

    --wt-indigo: #6366f1;
    --wt-violet: #8b5cf6;
    --wt-pink: #ec4899;

    /* Each tool owns an accent so the cards read as different things. Gömer's runs lime to green:
       poll's ends in sky blue, and two gradients that both start teal are one gradient at a glance. */
    --wt-ical-from: #f59e0b;
    --wt-ical-to: #f97316;
    --wt-poll-from: #14b8a6;
    --wt-poll-to: #0ea5e9;
    --wt-goemer-from: #84cc16;
    --wt-goemer-to: #16a34a;
}

/* Pico scopes its palette to :root:not([data-theme]); match that so these win. */
:root:not([data-theme]),
:root[data-theme] {
    --pico-primary: var(--wt-indigo);
    --pico-primary-hover: var(--wt-violet);
    --pico-primary-background: var(--wt-indigo);
    --pico-primary-focus: rgba(99, 102, 241, 0.3);
    --pico-primary-inverse: #fff;
}

body {
    background-image:
        radial-gradient(60rem 30rem at 8% -12%, rgba(99, 102, 241, 0.16), transparent 60%),
        radial-gradient(50rem 26rem at 96% -6%, rgba(236, 72, 153, 0.13), transparent 58%),
        radial-gradient(44rem 24rem at 50% 108%, rgba(20, 184, 166, 0.10), transparent 60%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

@media (prefers-color-scheme: dark) {
    body {
        background-image:
            radial-gradient(60rem 30rem at 8% -12%, rgba(99, 102, 241, 0.22), transparent 60%),
            radial-gradient(50rem 26rem at 96% -6%, rgba(236, 72, 153, 0.16), transparent 58%),
            radial-gradient(44rem 24rem at 50% 108%, rgba(20, 184, 166, 0.12), transparent 60%);
    }
}

/* ---------- header ---------- */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.5rem;
    /* An admin's nav cannot always sit beside the brand on a phone. Let the header wrap so the nav
       drops below the brand, rather than letting the nav wrap inside itself and leave the brand
       floating against a two-line row. */
    flex-wrap: wrap;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--pico-color);
    text-decoration: none;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--wt-indigo), var(--wt-pink));
    box-shadow: 0 8px 18px -8px var(--wt-violet);
}

.brand-mark svg {
    width: 18px;
    height: 18px;
}

.lang-switch {
    display: inline-flex;
    gap: 0.15rem;
    padding: 0.2rem;
    border-radius: 999px;
    background: var(--pico-card-sectioning-background-color);
}

.lang-switch a,
.lang-switch span {
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.35;
    text-decoration: none;
}

.lang-switch a {
    color: var(--pico-muted-color);
}

.lang-switch a:hover {
    color: var(--pico-color);
    background: var(--pico-muted-border-color);
}

.lang-switch [aria-current="true"] {
    color: #fff;
    background: linear-gradient(135deg, var(--wt-indigo), var(--wt-violet));
}

/* ---------- hero ---------- */

.hero {
    max-width: 44rem;
    padding-block: 2.5rem 0.5rem;
}

.hero h1 {
    margin-bottom: 0.65rem;
    font-size: clamp(2rem, 5.2vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    background: linear-gradient(115deg, var(--wt-indigo), var(--wt-violet) 42%, var(--wt-pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Without background-clip the gradient text would be invisible. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
    .hero h1 {
        color: var(--wt-indigo);
        -webkit-text-fill-color: currentColor;
    }
}

.hero .lead {
    margin: 0;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: var(--pico-muted-color);
}

/* ---------- tool cards ---------- */

.tools {
    margin-block: 2.5rem 3rem;
}

.tool {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 1.75rem;
    overflow: hidden;
    border-radius: 16px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tool::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tool-from), var(--tool-to));
}

.tool:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -20px rgba(17, 24, 39, 0.45);
}

@media (prefers-color-scheme: dark) {
    .tool:hover {
        box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8);
    }
}

.tool--ical {
    --tool-from: var(--wt-ical-from);
    --tool-to: var(--wt-ical-to);
}

.tool--poll {
    --tool-from: var(--wt-poll-from);
    --tool-to: var(--wt-poll-to);
}

.tool--goemer {
    --tool-from: var(--wt-goemer-from);
    --tool-to: var(--wt-goemer-to);
}

.tool-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1.1rem;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, var(--tool-from), var(--tool-to));
    box-shadow: 0 10px 20px -10px var(--tool-to);
}

.tool-icon svg {
    width: 24px;
    height: 24px;
}

.tool h2 {
    margin-bottom: 0.45rem;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
}

.tool p {
    flex: 1;
    margin-bottom: 1.35rem;
    color: var(--pico-muted-color);
}

.badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--tool-to);
    background: rgba(125, 125, 125, 0.14);
    background: color-mix(in srgb, var(--tool-to) 15%, transparent);
}

.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ---------- footer ---------- */

.site-footer {
    padding-block: 1.75rem 2.5rem;
    border-top: 1px solid var(--pico-muted-border-color);
    color: var(--pico-muted-color);
    font-size: 0.85rem;
}

/* ---------- header nav (login, admin, logout) ---------- */

.site-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.site-nav > a {
    font-size: 0.85rem;
    text-decoration: none;
}

.logout {
    margin: 0;
}

/* Pico's dropdown is a <details>, and it dresses the <summary> as a form control: a border, a white
   background, 17px text, 50px tall next to a 26px nav link. It looked like an input box had wandered
   into the header.

   Pico's selector is `details.dropdown > summary:not([role])` — specificity (0,2,2). A plain
   `.profile-menu > summary` is (0,1,1) and loses, silently. This one is (0,3,2) and wins. Beating a
   framework's specificity is worth doing on purpose and worth writing down. */
/* Pico gives details.dropdown a negative block margin and a 30px line box, so the <details> stood
   30px tall between two 25.5px links. `align-items: center` then centred three boxes of two
   different heights and put "Profil" 2.3px above its neighbours. Match the height, don't nudge it. */
.site-nav details.profile-menu {
    display: flex;
    align-items: center;
    margin: 0;
    /* The height of a line box is font-size x line-height. `line-height: inherit` alone inherited
       1.5 of the *body's* 20px and made a 30px box; the nav's links are 0.85rem x 1.5 = 25.5px.
       Set the font size here and the box matches its neighbours by arithmetic, not by nudging. */
    font-size: 0.85rem;
    line-height: 1.5;
}

.site-nav details.profile-menu > summary:not([role]) {
    /* `height` is the one that mattered: Pico sets it explicitly, so clearing padding, border and
       background left a 50px box with nothing in it. */
    height: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    font-size: 0.85rem;
    line-height: inherit;
    color: var(--pico-primary);
}

/* Pico's chevron is `width: 1rem; height: calc(1rem * 1.5)` — 20px x 30px, measured against the
   root font and not against the menu's. That 30px block, not the text, was setting the line box
   height and pushing "Profil" 2.3px above "Benutzer". In `em` it scales with the summary. */
.site-nav details.profile-menu > summary::after {
    width: 1em;
    height: 1.5em;
    margin-inline-start: 0.35rem;
    background-size: 1em auto;
}

/* Pico rings the summary with a box-shadow on :focus, which a mouse click also triggers: clicking
   "Profil" drew a box around it and left it there. Keyboard users still get an outline. */
.site-nav details.profile-menu > summary:focus,
.site-nav details.profile-menu > summary:active {
    box-shadow: none;
}

.site-nav details.profile-menu > summary:focus-visible {
    outline: 2px solid var(--pico-primary);
    outline-offset: 3px;
}

/* The menu belongs to the header, so it reads at the header's size, not the body's. */
.profile-menu ul a,
.profile-menu ul .link-button {
    font-size: 0.85rem;
}

.profile-menu ul {
    min-width: 10rem;
}

/* The logout button is a form inside a menu item; make it sit like the anchor above it. */
.profile-menu form {
    margin: 0;
}

.profile-menu .link-button {
    font-size: inherit;
    color: inherit;
}

.link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    width: auto;
    font-size: 0.85rem;
    color: var(--pico-primary);
    cursor: pointer;
}

/* ---------- forms and notices ---------- */

.narrow {
    max-width: 26rem;
    margin-inline: auto;
    padding-block: 2rem;
}

/* The modifiers below bring their own background and override this one. Without it a plain .notice
   was padding around nothing: an indented line, floating on the page, that read as a stray
   paragraph rather than as an aside about the form beneath it. */
.notice {
    padding: 0.75rem 1rem;
    border-radius: var(--pico-border-radius);
    font-size: 0.9rem;
    background: color-mix(in srgb, var(--pico-muted-color) 12%, transparent);
}

.notice--error {
    background: color-mix(in srgb, var(--pico-del-color) 15%, transparent);
}

.notice--success {
    background: color-mix(in srgb, var(--pico-ins-color) 15%, transparent);
}

button.danger {
    background: var(--pico-del-color);
    border-color: var(--pico-del-color);
}

/* Wide tables scroll inside their own box instead of pushing the page sideways. */
.table-scroll {
    overflow-x: auto;
}

.table-scroll form {
    margin: 0;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.table-scroll button,
.table-scroll select {
    margin: 0;
    width: auto;
}

.form-narrow {
    max-width: 26rem;
}

/* ---------- poll ---------- */

/* The callout used to be two full-width readonly inputs, each with its own label above it — four
   stacked blocks, and most of a phone screen. It is now one warning line and two rows of
   label / link / copy. */
.callout {
    background: var(--pico-card-sectioning-background-color);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.callout-note {
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

.link-row {
    display: flex;
    align-items: baseline;
    gap: 0.4rem 0.75rem;
    flex-wrap: wrap;
}

.link-row + .link-row {
    margin-top: 0.5rem;
}

.link-label {
    flex: 0 0 9rem;
    font-size: 0.8rem;
    color: var(--pico-muted-color);
}

/* The manage link is 60-odd characters of base64url. Wrapping it cost four lines on a phone; it is
   truncated instead. The whole URL is still in the href, in the hover title, and in what Copy puts
   on the clipboard — the ellipsis only hides what nobody reads character by character anyway.
   min-width: 0 is what lets a flex item shrink below its content and ellipsize at all. */
.link-row a {
    flex: 1 1 12rem;
    min-width: 0;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.copy-link {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0.25rem 0.7rem;
    font-size: 0.75rem;
}

.copy-link--done {
    background: var(--pico-ins-color);
    border-color: var(--pico-ins-color);
}

/* Announced to screen readers, invisible to everyone else. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ballot-actions,
.manage-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    /* `gap` spaces the buttons *within* a row. The manage page has two of these rows — "close" only
       exists while the poll is open, "delete" always — so gap does nothing between them, and the
       `margin: 0` below removes the button margin Pico used to separate them with. Without this the
       two buttons share an edge, and the destructive one sits flush against its neighbour. */
    margin-bottom: var(--pico-spacing);
}

.ballot-actions button,
.manage-actions button {
    width: auto;
    margin: 0;
}

.option-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: end;
}

.option-row label,
.option-row .option-range {
    flex: 1 1 12rem;
}

.remembered li {
    margin-bottom: 0.25rem;
}

/* One option, and optionally the note explaining it.
 *
 * Pico renders <small> as `display: block` — it is meant as a hint under a form field. Inside a
 * label that also holds a radio, that made the note open a block box at the label's content edge,
 * the same x as the control, so its first line was drawn straight across the radio.
 *
 * The grid gives the control a column of its own and pins both the option's text and its note to
 * the second one, so the note lines up under the text it belongs to and can never reach the
 * control. The note stays inside the label on purpose: clicking it still ticks the option, which
 * is a larger target on a phone.
 */
.option {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.5rem;
    align-items: center;
}

.option-note {
    grid-column: 2;
    margin: 0;
}

/* Soft-deleted polls are listed on /admin/polls on purpose — they are invisible everywhere
   else — so they have to *look* deleted, not merely say so in the last column. */
.poll--deleted {
    opacity: 0.55;
}

.poll--deleted td:first-child {
    text-decoration: line-through;
}

.polls-filters {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Two links and a form in one table cell, on one line. A <form> is a block box, so the delete
   control has to be coaxed back inline; nowrap keeps the three from stacking when the column is
   narrow, and the cell claims the width it needs instead. */
.row-actions {
    white-space: nowrap;
}

.row-actions form {
    display: inline-flex;
    margin: 0;
}

/* Destructive, but not the loudest thing on the screen. A filled red button next to two quiet
   links drew the eye to the one action nobody came here to perform. */
.link-danger {
    color: var(--pico-del-color);
}

/* The admin table earns its density: nine columns, and every one of them a fact rather than prose.
   At Pico's default size and padding the nine did not fit 1200px, and the browser paid for it by
   wrapping "Wo essen wir?" onto three lines and clipping "Löschen" at the container edge. */
#polls-table table {
    font-size: 0.8125rem;
}

#polls-table th,
#polls-table td {
    padding: 0.45rem 0.45rem;
}

/* Every cell holds one fact. "Erstellt von", "Etwas anderes", "10.07.26, 09:32 UTC" — breaking any
   of them across two lines doubles a row's height and says nothing extra. The title is the exception:
   it is prose, it is the widest thing here, and it gets whatever room the facts leave over. */
#polls-table th,
#polls-table td {
    white-space: nowrap;
}

#polls-table td:first-child,
#polls-table thead th:first-child {
    white-space: normal;
    min-width: 8rem;
}

/* A sortable header is still a header. Underlining half the row in link blue made the other half
   look disabled; the arrow says which column is sorted, and hover says the rest are clickable. */
#polls-table thead a {
    color: inherit;
    text-decoration: none;
}

#polls-table thead a:hover,
#polls-table thead a:focus-visible {
    text-decoration: underline;
}

.polls-filters input[type="search"] {
    flex: 1 1 16rem;
    margin: 0;
}

.polls-filters select {
    width: auto;
    margin: 0;
}

.pager {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 0.5rem;
}