/* PandaPoll — mobile-first design system.
 *
 * The page is used one-handed, in a group chat, usually while doing something
 * else. So: one question at a time, thumb-sized targets, and never a control
 * whose meaning depends on colour alone.
 */

/* ------------------------------------------------------------------ tokens */

:root {
    color-scheme: light dark;

    --bg: #faf8f4;
    --surface: #ffffff;
    --surface-2: #f3f0ea;
    --fg: #1b1917;
    --muted: #6b655d;
    --faint: #7a736b;
    --line: #e4dfd6;
    --line-strong: #d3ccc0;

    --great: #2c8256;
    --great-ink: #1d6741;
    /* Two ambers on purpose: the bright one fills bars, the dark one carries
     * text. The bright amber is only 3.7:1 on white, which is fine for a
     * 6px bar and not fine for a button label. */
    --okay: #b5771a;
    --okay-ink: #9a6510;
    --cant: #a8443a;
    --accent: #2a5c96;
    --accent-ink: #204a79;

    --on-accent: #ffffff;

    --r-sm: .5rem;
    --r-md: .875rem;
    --r-lg: 1.25rem;
    --r-full: 999px;

    --tap: 3rem;         /* 48px: the smallest thing worth aiming at */
    --tap-lg: 3.5rem;    /* 56px: the primary action */

    --shadow-1: 0 1px 2px rgba(28, 24, 18, .06), 0 1px 1px rgba(28, 24, 18, .04);
    --shadow-2: 0 4px 16px rgba(28, 24, 18, .10), 0 1px 3px rgba(28, 24, 18, .06);
    --shadow-up: 0 -6px 20px rgba(28, 24, 18, .08);

    --ease: cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #141311;
        --surface: #1e1c19;
        --surface-2: #262320;
        --fg: #f1eee8;
        --muted: #a49d93;
        --faint: #8b847a;
        --line: #322e29;
        --line-strong: #423d36;

        --great: #56b782;
        --great-ink: #7fcda1;
        --okay: #dda94f;
        --okay-ink: #e6b968;
        --cant: #d97b6d;
        --accent: #7fb0e6;
        --accent-ink: #a3c8f0;

        --on-accent: #10233a;

        --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow-2: 0 4px 16px rgba(0, 0, 0, .45);
        --shadow-up: 0 -6px 20px rgba(0, 0, 0, .4);
    }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--fg);
    font: 400 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* No 300ms delay, no grey flash box on tap: the two things that make a
     * web page feel unlike an app. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------------------ layout */

.appbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1rem;
    padding-top: max(.7rem, env(safe-area-inset-top));
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: -.01em;
    text-decoration: none;
    color: var(--fg);
}
.brand .mark { font-size: 1.15rem; line-height: 1; }

.appbar .spacer { flex: 1; }

main {
    flex: 1;
    width: 100%;
    max-width: 32rem;
    margin: 0 auto;
    padding: 1rem 1rem 2rem;
}

/* Room for the sticky action bar so the last card is never trapped under it. */
main.has-thumb { padding-bottom: 1rem; }

footer {
    border-top: 1px solid var(--line);
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    color: var(--faint);
    font-size: .75rem;
    text-align: center;
}

/* ---------------------------------------------------------------- typography */

h1 {
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: .4rem 0 .2rem;
    font-weight: 700;
}
h2 { font-size: 1.05rem; margin: 0 0 .5rem; letter-spacing: -.01em; }

.section-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 700;
    color: var(--faint);
    margin: 1.75rem 0 .6rem;
}

.lede { color: var(--muted); margin: .3rem 0 1.25rem; }
.hint { color: var(--muted); font-size: .82rem; font-weight: 400; line-height: 1.45; }
.micro { font-size: .75rem; color: var(--faint); }

.kicker {
    margin: 0 0 .35rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--accent);
}

.tag {
    font-size: .62rem;
    background: var(--accent);
    color: var(--on-accent);
    padding: .2rem .45rem;
    border-radius: var(--r-full);
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
}

/* ------------------------------------------------------------------- meta */

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .5rem;
    margin: .5rem 0 1rem;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .6rem;
    border-radius: var(--r-full);
    background: var(--surface-2);
    color: var(--muted);
    font-size: .78rem;
    white-space: nowrap;
}
.pill.warn { background: color-mix(in srgb, var(--okay) 16%, transparent); color: var(--okay-ink); font-weight: 600; }
.pill.go { background: color-mix(in srgb, var(--great) 15%, transparent); color: var(--great-ink); font-weight: 600; }

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

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.15rem;
    margin: .85rem 0;
    box-shadow: var(--shadow-1);
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

.card.flat { box-shadow: none; background: transparent; }
.card.warn { border-color: color-mix(in srgb, var(--okay) 55%, var(--line)); }
.card.confirmed { border-color: color-mix(in srgb, var(--great) 55%, var(--line)); }
.card.off { border-color: color-mix(in srgb, var(--cant) 45%, var(--line)); }

/* The one question the page is actually asking. */
.ask {
    border: 2px solid var(--accent);
    box-shadow: var(--shadow-2);
    padding: 1.25rem 1.15rem 1.15rem;
}
.ask .when-day {
    font-size: 1.75rem;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.025em;
    margin: 0;
}
.ask .when-clock {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--muted);
    margin: .15rem 0 0;
    font-variant-numeric: tabular-nums;
}
.ask .when-rel {
    display: inline-block;
    margin-top: .5rem;
}

.headline {
    margin: .1rem 0 .3rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

/* ---------------------------------------------------------------- progress */

.progress {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .25rem;
}
.dots { display: flex; gap: .25rem; }
.dot {
    width: .5rem; height: .5rem;
    border-radius: var(--r-full);
    background: var(--line-strong);
}
.dot.done { background: var(--accent); }
.dot.now { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }

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

button, .button {
    font: inherit;
    font-weight: 600;
    color: var(--fg);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    padding: .7rem 1rem;
    min-height: var(--tap);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: transform .12s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease);
}
button:active, .button:active { transform: scale(.975); }
button:focus-visible, .button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent);
    outline-offset: 2px;
}

.button.primary, button.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}
.button.block, button.block { width: 100%; }
button.big { min-height: var(--tap-lg); font-size: 1.05rem; }
button.small, .button.small { min-height: 2.25rem; padding: .3rem .7rem; font-size: .8rem; font-weight: 600; }
button.ghost { background: transparent; border-color: var(--line); color: var(--muted); }
button.danger { border-color: color-mix(in srgb, var(--cant) 60%, var(--line)); color: var(--cant); background: transparent; }

/* ------------------------------------------------------- the answer buttons */

/* The primary answer is deliberately far larger than the other two: most
 * answers are "yes", and the middle tier must be available without competing
 * for the same glance. */
.answers { display: grid; gap: .5rem; margin-top: .9rem; }

.answer {
    width: 100%;
    min-height: var(--tap-lg);
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: var(--r-md);
}
.answer .ic { font-size: 1.05em; line-height: 1; }

.answer.yes {
    background: var(--great);
    border-color: var(--great);
    color: #fff;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--great) 30%, transparent);
}
.answer-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.answer-row .answer {
    min-height: var(--tap);
    font-size: .95rem;
    font-weight: 600;
    background: var(--surface);
}
.answer.maybe { color: var(--okay-ink); border-color: color-mix(in srgb, var(--okay) 45%, var(--line)); }
.answer.no { color: var(--cant); border-color: color-mix(in srgb, var(--cant) 40%, var(--line)); }

/* The sticky thumb zone: on a phone the answer is always reachable, whatever
 * the page above it is doing. */
.thumb {
    position: sticky;
    bottom: 0;
    z-index: 15;
    margin: 1rem -1rem 0;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-up);
}
.thumb .answers { margin-top: 0; }

/* --------------------------------------------------------------- slot list */

.slots { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }

.slot {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    padding: .8rem .9rem;
    box-shadow: var(--shadow-1);
}
.slot.winner { border-color: var(--great); border-width: 2px; }
.slot.leading { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }

.slot-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.slot .when { font-weight: 650; letter-spacing: -.01em; }
.slot .tally { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.slot .by { color: var(--faint); font-size: .75rem; margin-top: .15rem; }

/* Two segments, because "zur Not" is a different promise than "passt". */
.bar {
    display: flex;
    height: .4rem;
    background: var(--surface-2);
    border-radius: var(--r-full);
    overflow: hidden;
    margin: .55rem 0 .1rem;
}
.bar span { display: block; height: 100%; transition: width .3s var(--ease); }
.bar .g { background: var(--great); }
.bar .o { background: var(--okay); }

/* Your own answer, and the control to change it. */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin-top: .6rem; }
.tiers .tier {
    min-height: var(--tap);
    font-size: .82rem;
    font-weight: 600;
    padding: .3rem .2rem;
    border-radius: var(--r-sm);
    flex-direction: column;
    gap: .1rem;
    line-height: 1.15;
}
.tier.on.great { background: var(--great); border-color: var(--great); color: #fff; }
.tier.on.okay { background: var(--okay-ink); border-color: var(--okay-ink); color: #fff; }
.tier.on.cant { background: var(--cant); border-color: var(--cant); color: #fff; }

.mine-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .5rem;
    border-radius: var(--r-full);
    background: var(--surface-2);
    color: var(--muted);
}
.mine-chip.great { background: color-mix(in srgb, var(--great) 16%, transparent); color: var(--great-ink); }
.mine-chip.okay { background: color-mix(in srgb, var(--okay) 18%, transparent); color: var(--okay-ink); }
.mine-chip.cant { background: color-mix(in srgb, var(--cant) 15%, transparent); color: var(--cant); }

/* ------------------------------------------------------------------ people */

.people { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.person {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .6rem .25rem .25rem;
    border-radius: var(--r-full);
    background: var(--surface-2);
    font-size: .8rem;
}
.avatar {
    width: 1.6rem; height: 1.6rem;
    border-radius: var(--r-full);
    display: grid; place-items: center;
    background: var(--accent);
    color: var(--on-accent);
    font-size: .75rem;
    font-weight: 700;
}
.person.done .avatar { background: var(--great); color: #fff; }
.person.me { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); }

/* --------------------------------------------------------------- form bits */

label { display: block; margin: 1rem 0 0; font-weight: 600; font-size: .92rem; }
/* A caption for a group of controls (the chip rows), which is not a <label>
 * because it labels no single field. */
.field-label { margin: .9rem 0 0; font-weight: 600; font-size: .92rem; }
label .hint { font-weight: 400; display: block; margin-top: .1rem; }

input[type=text], input[type=date], input[type=time], input:not([type]), select, textarea {
    display: block;
    width: 100%;
    margin-top: .4rem;
    padding: .8rem .8rem;
    /* 16px minimum, or iOS zooms the whole page on focus. */
    font: 400 1rem/1.3 inherit;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    min-height: var(--tap);
}
input:focus, select:focus { border-color: var(--accent); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.field-row input { margin-top: 0; }

/* Chips: the cheap way to say "Friday at 8". Typing a date into a phone is
 * the most expensive interaction in the whole app. */
.chips {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: .1rem .1rem .35rem;
    margin: .45rem -.15rem 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 3.6rem;
    min-height: var(--tap);
    padding: .35rem .7rem;
    border-radius: var(--r-md);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .05rem;
    font-size: .85rem;
    font-weight: 650;
    line-height: 1.1;
}
.chip .sub { font-size: .68rem; font-weight: 500; color: var(--faint); }
.chip[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}
.chip[aria-pressed="true"] .sub { color: color-mix(in srgb, var(--on-accent) 80%, transparent); }

.chips.times .chip { min-width: 4.2rem; font-variant-numeric: tabular-nums; }

details.more { margin: .9rem 0 0; }
details.more > summary {
    cursor: pointer;
    color: var(--accent);
    font-weight: 600;
    font-size: .88rem;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    list-style: none;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "＋"; margin-right: .4rem; font-weight: 700; }
details.more[open] > summary::before { content: "－"; }

/* ------------------------------------------------------------------- links */

.linkbox {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: .6rem .7rem;
    margin: .6rem 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .76rem;
    color: var(--muted);
    overflow: hidden;
}
.linkbox code {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin-top: .75rem; }
.share-row .button { min-height: var(--tap-lg); }

/* ------------------------------------------------------------------ notices */

.notice, .error {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    border-radius: var(--r-md);
    padding: .7rem .85rem;
    font-size: .88rem;
    font-weight: 600;
    margin: .75rem 0;
}
.notice { background: color-mix(in srgb, var(--great) 14%, transparent); color: var(--great-ink); }
.error { background: color-mix(in srgb, var(--cant) 14%, transparent); color: var(--cant); }

/* The confirmed hero: the moment the whole thing exists for. */
.hero {
    text-align: center;
    padding: 1.6rem 1.15rem;
    border-radius: var(--r-lg);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--great) 12%, var(--surface)),
        var(--surface));
    border: 2px solid var(--great);
    box-shadow: var(--shadow-2);
}
.hero .check {
    width: 3rem; height: 3rem;
    margin: 0 auto .6rem;
    border-radius: var(--r-full);
    background: var(--great);
    color: #fff;
    display: grid; place-items: center;
    font-size: 1.5rem;
}
.hero .day { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.hero .clock { font-size: 1.25rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- transitions */

/* Patched fragments announce themselves quietly, so an answer arriving from
 * someone else is noticed without stealing the page. */
@keyframes settle {
    from { opacity: .55; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}
#poll { animation: settle .22s var(--ease); }

.copied { position: relative; }
.copied::after {
    content: "Kopiert";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: inherit;
    background: var(--great);
    color: #fff;
    font-weight: 700;
    animation: settle .15s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ------------------------------------------------------------------ desktop */

@media (min-width: 40rem) {
    main { padding-top: 1.5rem; }
    .thumb {
        position: static;
        margin: 1rem 0 0;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
        backdrop-filter: none;
    }
}