/* ===============================================================
   Tokens — monochrome neutrals, one accent, colors lifted from pigeon.jpg
   =============================================================== */
:root {
    --ground: #fff;
    --surface: #fff;
    --chrome: #fafafa;
    --text: #111;
    --muted: #6b7280;
    --line: #e5e7eb;
    --line-strong: #d1d5db;
    --hover: #f3f4f6;

    --accent: #3767b1;
    --accent-text: #fff;

    --must: #2f7d76;
    --hide: #cf5450;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ground: #0e0e10;
        --surface: #141416;
        --chrome: #161619;
        --text: #ededf0;
        --muted: #9a9aa3;
        --line: #26262b;
        --line-strong: #35353c;
        --hover: #1d1d21;

        --accent: #6aa9e0;
        --accent-text: #0e0e10;

        --must: #4fa79c;
        --hide: #e8807c;

        color-scheme: dark;
    }
}

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

body {
    margin: 0;
    min-height: 100vh;
    background: var(--ground);
    color: var(--text);
    font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--accent);
    color: var(--accent-text);
}

/* ===============================================================
   Controls
   =============================================================== */
.field,
.btn {
    padding: .375rem .625rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line-strong);
    border-radius: 0;
    font: inherit;
    font-size: .8125rem;
}

select.field {
    appearance: none;
    padding-right: 1.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .5rem center;
    background-size: .625rem;
}

@media (prefers-color-scheme: dark) {
    select.field {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239a9aa3' stroke-width='1.5'/%3E%3C/svg%3E");
    }
}

.field--grow {
    flex: 1 1 16rem;
    min-width: 12rem;
}

.btn {
    cursor: pointer;
}

.btn:hover {
    background: var(--hover);
}

.btn:disabled {
    color: var(--muted);
    cursor: not-allowed;
}

.btn:disabled:hover {
    background: var(--surface);
}

.btn--primary {
    background: var(--accent);
    color: var(--accent-text);
    border-color: var(--accent);
}

.btn--primary:hover {
    background: var(--accent);
    filter: brightness(1.08);
}

.btn--chip {
    padding: .25rem .5rem;
    font-size: .75rem;
}

.btn--block {
    display: block;
    width: 100%;
    padding: .625rem;
    margin-top: .5rem;
    color: var(--muted);
}

.field:focus-visible,
.btn:focus-visible,
.chip-body:focus-visible,
.chip-neg:focus-visible,
.mark:focus-visible,
.chip-input:focus-visible + .year-label {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* ===============================================================
   Talks — toolbar
   =============================================================== */
.toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: .75rem 1.25rem;
    background: var(--chrome);
    border-bottom: 1px solid var(--line);
}

.toolbar-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-top: .5rem;
}

.toolbar-row--title {
    margin-top: 0;
    gap: .625rem;
}

.toolbar-heading {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.toolbar-count,
.toolbar-note {
    font-size: .75rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Tag chips ----------------------------------------------------- */
.tagbar {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    width: 100%;
    max-height: 9rem;
    overflow: auto;
    padding: .5rem;
    margin-top: .5rem;
    background: var(--surface);
    border: 1px solid var(--line);
}

.chip {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    font-size: .75rem;
}

.chip-body,
.chip-neg {
    padding: .125rem .5rem;
    background: none;
    color: var(--muted);
    border: 0;
    font: inherit;
    font-size: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.chip-neg {
    padding: .125rem .375rem;
    border-right: 1px solid var(--line);
    color: var(--line-strong);
}

.chip-count {
    margin-left: .375rem;
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

.chip:hover {
    border-color: var(--accent);
}

.chip-body:hover {
    color: var(--text);
}

.chip-neg:hover {
    color: var(--hide);
}

.chip--on {
    background: var(--accent);
    border-color: var(--accent);
}

.chip--on .chip-body {
    color: var(--accent-text);
}

.chip--on .chip-neg {
    border-right-color: color-mix(in srgb, var(--accent-text) 35%, transparent);
    color: color-mix(in srgb, var(--accent-text) 65%, transparent);
}

.chip--off {
    border-color: var(--hide);
}

.chip--off .chip-body {
    color: var(--muted);
    text-decoration: line-through;
}

.chip--off .chip-neg {
    color: var(--hide);
}

/* Year chips ---------------------------------------------------- */
.years {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.chip-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.year-label {
    display: inline-block;
    padding: .25rem .5rem;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    font-size: .75rem;
    color: var(--muted);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.year-label:hover {
    color: var(--text);
    border-color: var(--accent);
}

.year:has(:checked) .year-label {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
}

/* ===============================================================
   Talks — results
   =============================================================== */
.results {
    max-width: 78rem;
    margin: 0 auto;
    padding: 1.25rem 1.25rem 5rem;
}

.empty {
    padding: 4rem 0;
    text-align: center;
    color: var(--muted);
}

.talk {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    padding: .875rem 1rem;
    margin-bottom: .625rem;
    background: var(--surface);
    border: 1px solid var(--line);
    content-visibility: auto;
    contain-intrinsic-size: auto 14rem;
}

.talk:hover {
    border-color: var(--line-strong);
}

/* the mark bar is an overlay, so marking a talk never shifts its content */
.talk::before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    width: 3px;
    background: transparent;
}

.talk[data-mark]::before {
    background: var(--must);
}

.talk-title {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.talk-title a {
    color: inherit;
    text-decoration: none;
}

.talk-title a:hover {
    color: var(--accent);
}

.talk-meta {
    margin: .25rem 0 0;
    font-size: .75rem;
    color: var(--muted);
}

.talk-conf {
    color: var(--text);
    font-weight: 500;
}

.talk-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .625rem;
}

.chip-body--card {
    border: 1px solid var(--line);
    font-size: .6875rem;
}

.chip-body--card:hover {
    border-color: var(--accent);
    color: var(--text);
}

.chip-body--card.is-on {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
}

.badge {
    margin-left: .5rem;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.badge--high {
    color: var(--accent);
    font-weight: 600;
}

.badge--mid {
    color: var(--text);
}

.badge--low {
    color: var(--muted);
}

.talk-actions {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: .25rem;
}

.mark {
    padding: .1875rem .5rem;
    background: none;
    color: var(--muted);
    border: 1px solid var(--line);
    font: inherit;
    font-size: .6875rem;
    white-space: nowrap;
    cursor: pointer;
}

.mark:hover {
    color: var(--text);
    border-color: var(--line-strong);
}

.mark.is-on {
    background: var(--must);
    border-color: var(--must);
    color: #fff;
}

.talk-body {
    padding-top: .75rem;
    border-top: 1px solid var(--line);
    font-size: .8125rem;
}

.talk-note {
    margin: .5rem 0 0;
    font-size: .8125rem;
    color: var(--muted);
}

.talk code {
    padding: .0625rem .25rem;
    background: var(--hover);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .9em;
    white-space: pre-wrap;
}

/* ===============================================================
   Status bar
   =============================================================== */
.statusbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.25rem;
    background: var(--chrome);
    border-top: 1px solid var(--line);
}

.statusbar-stats {
    font-size: .75rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.statusbar-stats b {
    color: var(--text);
    font-weight: 600;
}

.statusbar-spacer {
    flex: 1;
}

@media (min-width: 768px) {
    .talk {
        grid-template-columns: 1fr auto;
    }

    .talk-body {
        grid-column: 1 / -1;
    }
}

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