/* SPDX-License-Identifier: MIT
   Copyright (c) 2026 Lostping */

/* Inuksuk — self-hosted styles, no external fonts or assets.
   Colour system encodes the poll's real data: green = yes, amber = maybe,
   red = no. Everything else stays quiet so the availability grid is the hero. */

:root {
    --ink:        #1d2733;
    --ink-soft:   #55616f;
    --line:       #d7dde5;
    --bg:         #eef1f5;
    --surface:    #ffffff;
    --accent:     #34497e;   /* calm slate-blue, deliberately not terracotta */
    --accent-ink: #ffffff;

    --yes:   #2f9e6b;
    --maybe: #d99a2e;
    --no:    #c6533e;
    --yes-bg:   #e6f3ec;
    --maybe-bg: #faf1de;
    --no-bg:    #f7e7e3;

    --radius: 10px;
    --shadow: 0 1px 2px rgba(29, 39, 51, .06), 0 6px 20px rgba(29, 39, 51, .05);
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

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

/* --- Header / footer --- */
.site-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.site-header__brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -.01em;
    color: var(--ink);
    text-decoration: none;
}
.site-header__mark {
    width: 16px; height: 16px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--yes) 33%, var(--maybe) 33% 66%, var(--no) 66%);
}
.site-header__tag { color: var(--ink-soft); font-size: .9rem; }
.site-header__lang {
    display: flex;
    gap: .5rem;
    margin-left: auto;
    font-size: .85rem;
    font-weight: 600;
}
.site-header__lang a { color: var(--ink-soft); text-decoration: none; }
.site-header__lang a:hover { color: var(--accent); text-decoration: underline; }
.site-header__lang [aria-current] { color: var(--ink); }

.container {
    max-width: 860px;
    margin: 0 auto;
    padding: clamp(1rem, 4vw, 2rem);
}

.site-footer {
    text-align: center;
    color: var(--ink-soft);
    font-size: .85rem;
    padding: 2rem 1rem 3rem;
}
.site-footer a { color: var(--ink-soft); }

/* --- Hero --- */
.hero { margin: .5rem 0 1.75rem; }
.hero__title {
    font-size: clamp(1.7rem, 5vw, 2.4rem);
    letter-spacing: -.02em;
    margin: 0 0 .35rem;
}
.hero__lead { color: var(--ink-soft); font-size: 1.05rem; margin: 0; }

/* --- Cards & notices --- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(1rem, 3vw, 1.5rem);
    margin-bottom: 1.25rem;
}
.card--centered { text-align: center; }
.card__title { margin: 0 0 1rem; font-size: 1.15rem; letter-spacing: -.01em; }

.notice {
    border-radius: var(--radius);
    padding: .85rem 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--line);
}
.notice ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.notice--ok    { background: var(--yes-bg);   border-color: #bfe2ce; }
.notice--error { background: var(--no-bg);    border-color: #eec3ba; }
.notice--muted { background: #eef1f5;         color: var(--ink-soft); }

/* --- Forms --- */
.form__group {
    border: none;
    border-top: 1px solid var(--line);
    padding: 1.25rem 0 .25rem;
    margin: 0;
}
.form__group:first-of-type { border-top: none; padding-top: 0; }
.form__group legend {
    font-weight: 600;
    padding: 0;
    margin-bottom: .5rem;
    color: var(--ink);
}
.field { display: block; margin-bottom: .9rem; }
.field--date { flex: 1 1 10rem; margin-bottom: 0; }
.field--time { flex: 1 1 8rem;  margin-bottom: 0; }
.time-parts { display: flex; align-items: center; gap: .3rem; }
.time-parts select { text-align: center; }
.time-parts__sep { color: var(--ink-soft); font-weight: 600; }
.field__label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .3rem; }
.field__hint { color: var(--ink-soft); font-weight: 400; }

input[type=text], input[type=email], input[type=datetime-local], input[type=date], input[type=time], textarea, select {
    width: 100%;
    font: inherit;
    color: var(--ink);
    padding: .6rem .7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
select { padding: .55rem .4rem; }
input:focus-visible, textarea:focus-visible, button:focus-visible, .segmented__opt:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
textarea { resize: vertical; }

.check { display: flex; gap: .6rem; align-items: flex-start; margin: .5rem 0; }
.check input { margin-top: .25rem; }
.check--disabled { color: var(--ink-soft); }

.slots { display: grid; gap: .75rem; margin-bottom: .75rem; }
.slot-row {
    display: flex;
    gap: .75rem;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: .75rem;
    background: #f7f9fb;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.slot-row__remove {
    flex: 0 0 auto;
    padding: .5rem .7rem;
    line-height: 1;
}

/* --- Buttons --- */
.btn {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: .65rem 1.1rem;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: #f1f4f8; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: #2a3b68; }
.btn--ghost { background: #fff; }
.btn--danger { color: var(--no); border-color: #e6bcb2; }
.btn--danger:hover { background: var(--no-bg); }

/* --- Poll head --- */
.poll-head { margin-bottom: 1.25rem; }
.poll-head__title { font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: -.02em; margin: 0 0 .35rem; }
.poll-head__desc { color: var(--ink-soft); margin: 0 0 .35rem; }
.poll-head__by { color: var(--ink-soft); font-size: .9rem; margin: 0; }

.privacy-note {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .85rem 1rem;
    color: var(--ink-soft);
}

/* --- Results matrix --- */
.matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.matrix { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.matrix th, .matrix td {
    border: 1px solid var(--line);
    padding: .5rem .6rem;
    text-align: center;
    white-space: nowrap;
}
.matrix__name { text-align: left; font-weight: 600; position: sticky; left: 0; background: var(--surface); }
.matrix__slot { font-weight: 600; font-size: .85rem; vertical-align: bottom; }
.matrix__slot.is-leader { background: var(--yes-bg); }
.matrix__total { font-weight: 700; }
.matrix__total.is-leader { background: var(--yes-bg); }
.leader-tag {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    color: var(--yes);
    margin-top: .2rem;
}

.cell { font-size: 0; }
.cell__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem; height: 1.5rem;
    border-radius: 50%;
    font-size: .9rem; font-weight: 700;
}
.choice--yes   { background: var(--yes-bg); }
.choice--maybe { background: var(--maybe-bg); }
.choice--no    { background: var(--no-bg); }
.choice--yes   .cell__mark { background: var(--yes);   color: #fff; }
.choice--maybe .cell__mark { background: var(--maybe); color: #fff; }
.choice--no    .cell__mark { background: #fff; color: var(--no); border: 1px solid #e6bcb2; }
.choice--yes   .cell__mark::after { content: "✓"; }
.choice--maybe .cell__mark::after { content: "~"; }
.choice--no    .cell__mark::after { content: "✕"; }

/* --- Vote list (mobile-friendly voting) --- */
.vote-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .6rem; }
.vote-list__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .7rem .85rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f7f9fb;
}
.vote-list__slot { font-weight: 600; }

.segmented { display: inline-flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.segmented__opt {
    position: relative;
    cursor: pointer;
    padding: .4rem .8rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink-soft);
    background: #fff;
    border-right: 1px solid var(--line);
}
.segmented__opt:last-child { border-right: none; }
.segmented__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented__opt.choice--yes:has(input:checked)   { background: var(--yes);   color: #fff; }
.segmented__opt.choice--maybe:has(input:checked) { background: var(--maybe); color: #fff; }
.segmented__opt.choice--no:has(input:checked)    { background: var(--no);    color: #fff; }

/* --- Comments --- */
.comments { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .85rem; }
.comment { border-left: 3px solid var(--line); padding: .1rem 0 .1rem .85rem; }
.comment__meta { margin: 0 0 .15rem; font-size: .85rem; color: var(--ink-soft); }
.comment__body { margin: 0; }
.comment-form { border-top: 1px solid var(--line); padding-top: 1rem; }

/* --- Share links --- */
.link-box { margin-bottom: 1rem; }
.link-box:last-child { margin-bottom: 0; }
.link-box__label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.link-box--secret .link-box__label { color: var(--no); }
.link-box__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.link-box__input { flex: 1 1 16rem; font-family: var(--mono); font-size: .85rem; }

/* --- Actions --- */
.actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.actions form { margin: 0; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}