/*
 * Gather: cards, tables and forms for the organizer's screens and the voter
 * page, in the Tabletop look (docs/superpowers/specs/2026-11-07-gather-tabletop-theme-design.md).
 *
 * Every color is a --gather-* custom property with the Tabletop value as its
 * fallback. The gather theme (web/templates/gather) sets the same names on
 * :root, with a dark set, so on that theme it follows the theme; on any other
 * theme the fallbacks make it look the same in light.
 */

.gather-home,
.gather-groups,
.gather-group,
.gather-players,
.gather-poll-editor,
.gather-results,
.gather-vote {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    /* the screens fill the theme's page (1400px on the gather theme); forms
       and running text keep their own narrower measure below */
    max-width: none;
    color: var(--gather-ink, #1f2140);
}

.gather-card {
    background: var(--gather-card, #fff);
    border: 1px solid var(--gather-border, #e2e1ef);
    border-radius: var(--gather-radius, 16px);
    padding: 1.25rem;
}

@media (min-width: 720px) {
    .gather-card {
        padding: 1.5rem;
    }
}

.gather-card h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-family: var(--gather-heading, Georgia, serif);
    font-weight: 700;
    font-size: 1.3rem;
}

.gather-results-status {
    margin: 0 0 0.75rem;
}

.gather-results-status .gather-pill {
    margin-left: 0;
}

.gather-pill.gather-pill-status-open {
    background: var(--gather-yes-soft, #e3f4ea);
    color: var(--gather-yes, #1d6b3f);
}

.gather-pill.gather-pill-status-final {
    background: var(--gather-accent, #f2b63d);
    color: var(--gather-accent-ink, #23255a);
}

.gather-card p {
    color: var(--gather-ink, #1f2140);
}

.gather-table {
    width: 100%;
    border-collapse: collapse;
}

.gather-table th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gather-muted, #565a85);
}

.gather-table th,
.gather-table td {
    text-align: left;
    padding: 0.7rem 0.5rem;
    border-bottom: 1px solid var(--gather-rule, #ecebf5);
    vertical-align: middle;
}

/* A label inside a cell (the member's Required box) lines up with the row,
 * not with the top margin a form label gets elsewhere. */
.gather-table label {
    margin: 0;
}

.gather-table tbody tr:last-child td {
    border-bottom: none;
}

.gather-empty {
    color: var(--gather-muted, #565a85);
    font-style: normal;
}

.gather-pill {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    background: var(--gather-chip, #ebecfb);
    color: var(--gather-chip-ink, #3b3f8f);
    font-family: var(--gather-body, system-ui, sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}

.gather-sessions {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gather-sessions li {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--gather-rule, #ecebf5);
}

.gather-sessions li:last-child {
    border-bottom: none;
}

.gather-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Buttons: a quiet white one, the amber primary (with the d20), a danger outline. */
.gather-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.55rem 1.1rem;
    border-radius: var(--gather-radius-sm, 12px);
    border: 1px solid var(--gather-input-border, #cfd0e6);
    background: var(--gather-card, #fff);
    color: var(--gather-ink, #1f2140);
    text-decoration: none;
    cursor: pointer;
    font-family: var(--gather-body, system-ui, sans-serif);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.3;
    box-sizing: border-box;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

a.gather-btn,
a.gather-btn:hover,
a.gather-btn:focus {
    color: var(--gather-ink, #1f2140);
    text-decoration: none;
}

.gather-btn:hover {
    border-color: var(--gather-link, #3b3f8f);
}

.gather-btn:active {
    transform: translateY(1px);
}

.gather-btn-primary,
a.gather-btn-primary,
a.gather-btn-primary:hover,
a.gather-btn-primary:focus {
    background: var(--gather-accent, #f2b63d);
    border-color: var(--gather-accent, #f2b63d);
    color: var(--gather-accent-ink, #23255a);
    font-weight: 600;
}

.gather-btn-primary::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='black' stroke-width='3.2' stroke-linejoin='round'%3E%3Cpath d='M17 2 31 10v14L17 32 3 24V10Z'/%3E%3Cpath d='M17 2 9 21h16Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='black' stroke-width='3.2' stroke-linejoin='round'%3E%3Cpath d='M17 2 31 10v14L17 32 3 24V10Z'/%3E%3Cpath d='M17 2 9 21h16Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gather-btn-primary:hover {
    background: #f6c561;
    border-color: #f6c561;
}

.gather-btn-danger,
a.gather-btn-danger {
    background: transparent;
    border-color: var(--gather-no, #a3262a);
    color: var(--gather-no, #a3262a);
}

.gather-btn-danger:hover {
    background: var(--gather-no-soft, #fbeaea);
    border-color: var(--gather-no, #a3262a);
}

/* A time row's Remove: a quiet icon button, not a red button on every row
   (CLAUDE.md, "Every admin screen looks the same way" — the same rule for a
   destructive row action generally). Muted until hovered or focused. */
.gather-row-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: var(--gather-radius-sm, 12px);
    background: transparent;
    color: var(--gather-muted, #565a85);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease;
}

.gather-row-remove:hover,
.gather-row-remove:focus-visible {
    color: var(--gather-no, #a3262a);
}

.gather-btn-disabled {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.55rem 1.1rem;
    border-radius: var(--gather-radius-sm, 12px);
    border: 1px dashed var(--gather-input-border, #cfd0e6);
    background: transparent;
    color: var(--gather-muted, #565a85);
    font-size: 0.95rem;
    cursor: default;
}

.gather-form,
.gather-form-inline {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-width: 460px;
}

.gather-form > .gather-btn,
.gather-form > button {
    align-self: flex-start;
}

.gather-form-inline {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    max-width: none;
    margin: 0;
}

.gather-form label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gather-ink, #1f2140);
}

.gather-feed code,
.gather-feed-fallback code {
    word-break: break-all;
    font-size: 0.85rem;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    background: var(--gather-chip, #ebecfb);
    color: var(--gather-chip-ink, #3b3f8f);
}

.gather-feed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0;
}

/* Task 8, "share right after creating": the header card's own shared link,
 * now at the TOP of the card rather than the bottom — same shape as
 * .gather-feed, but with no leading margin, since nothing sits above it. */
.gather-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.gather-share code {
    word-break: break-all;
    font-size: 0.85rem;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    background: var(--gather-chip, #ebecfb);
    color: var(--gather-chip-ink, #3b3f8f);
}

/* Banners: notes, warnings, errors, and the final pick. */
.gather-banner {
    padding: 0.85rem 1.1rem;
    border-radius: var(--gather-radius-sm, 12px);
    border: 1px solid var(--gather-border, #e2e1ef);
    background: var(--gather-card, #fff);
}

.gather-banner p {
    margin: 0;
    color: inherit;
}

.gather-banner-warn {
    background: var(--gather-accent-soft, #fff3d6);
    border-color: var(--gather-accent, #f2b63d);
    color: var(--gather-accent-soft-ink, #7a4f00);
}

.gather-banner-error {
    background: var(--gather-no-soft, #fbeaea);
    border-color: var(--gather-no, #a3262a);
    color: var(--gather-no, #a3262a);
}

.gather-banner-final,
.gather-banner-success {
    background: var(--gather-yes-soft, #e3f4ea);
    border-color: var(--gather-yes, #1d6b3f);
    color: var(--gather-yes, #1d6b3f);
}

.gather-options-table td {
    vertical-align: top;
}

.gather-checkbox-label {
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem;
    text-transform: none;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0;
}

.gather-same-time,
.gather-repeat-mode {
    border: 1px solid var(--gather-border, #e2e1ef);
    border-radius: var(--gather-radius-sm, 12px);
    padding: 0.75rem 1rem;
}

/* The three-part location display (vote.twig, results.twig): place name
   with a pin glyph, the address muted with its Get directions link, and the
   video link as a .gather-btn carrying Location::video_label()'s own text. */
.gather-where-info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0 0 0.5rem;
}

.gather-where-info p {
    margin: 0;
}

.gather-where-name {
    font-weight: 600;
}

.gather-where-pin {
    margin-right: 0.2rem;
}

.gather-where-address {
    color: var(--gather-muted, #565a85);
}

.gather-where-address a {
    color: var(--gather-link, #3b3f8f);
}

/* The poll editor's Where group: saved place, place name, address
   (autocompleting), video link, save-this-place. */
.gather-where {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    border: 1px solid var(--gather-border, #e2e1ef);
    border-radius: var(--gather-radius-sm, 12px);
    padding: 0.9rem 1rem;
    margin: 0;
}

.gather-where legend {
    font-weight: 700;
    font-family: var(--gather-heading, Georgia, serif);
    padding: 0 0.3rem;
}

/* The autocomplete box's own positioning context — poll-edit.twig's own
   markup for the address field (a <label>), or a <span> javascript.js
   builds around any other [data-gather-address] input (the Places screen's
   today) that is not already wrapped in one. */
.gather-address-field {
    position: relative;
}

.gather-address-field-js {
    display: block;
}

.gather-address-field-js > input {
    width: 100%;
    box-sizing: border-box;
}

.gather-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 16rem;
    overflow: auto;
    margin: 0.2rem 0 0;
    padding: 0.25rem 0;
    list-style: none;
    background: var(--gather-card, #fff);
    border: 1px solid var(--gather-border, #e2e1ef);
    border-radius: var(--gather-radius-sm, 12px);
    box-shadow: 0 8px 24px rgba(31, 33, 64, 0.16);
}

.gather-suggest li {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--gather-ink, #1f2140);
}

.gather-suggest li[aria-selected="true"] {
    background: var(--gather-chip, #ebecfb);
    color: var(--gather-chip-ink, #3b3f8f);
}

.gather-same-time summary {
    cursor: pointer;
    font-weight: 600;
}

/* Results screen: the grid's option headers, answer cells and status pills. */
.gather-results-grid {
    overflow-x: auto;
}

.gather-results {
    max-width: none;
}

.gather-grid-table {
    max-width: none;
}

.gather-grid-table td,
.gather-grid-table th {
    min-width: 7.5rem;
}

.gather-grid-table td:first-child,
.gather-grid-table th:first-child {
    min-width: 9rem;
}

.gather-grid-table code {
    font-size: 0.8rem;
    color: var(--gather-chip-ink, #3b3f8f);
}

.gather-grid-head time {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--gather-muted, #565a85);
}

.gather-answer {
    text-align: center;
    font-weight: 600;
}

.gather-answer-yes {
    color: var(--gather-yes, #1d6b3f);
}

.gather-answer-maybe {
    color: var(--gather-maybe, #8a5a00);
}

.gather-answer-no {
    color: var(--gather-no, #a3262a);
}

.gather-answer-none {
    color: var(--gather-faint, #6e7194);
}

.gather-tally-row td {
    border-top: 2px solid var(--gather-border, #e2e1ef);
    font-size: 0.85rem;
    color: var(--gather-muted, #565a85);
}

/* The ranked list: a card per time; the first is the best, ringed in amber. */
.gather-ranked-list {
    list-style: none;
    counter-reset: gather-rank;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 720px) {
    .gather-ranked-list {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

.gather-ranked-list li {
    counter-increment: gather-rank;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--gather-border, #e2e1ef);
    border-radius: var(--gather-radius, 16px);
    background: var(--gather-card, #fff);
}

.gather-ranked-list li::before {
    content: "Option " counter(gather-rank);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gather-muted, #565a85);
}

.gather-ranked-list li:first-child {
    border: 2px solid var(--gather-accent, #f2b63d);
    box-shadow: var(--gather-shadow, 0 6px 18px rgba(35, 37, 90, 0.10));
}

.gather-ranked-list li:first-child::before {
    content: "Critical hit! Best time";
    color: var(--gather-maybe, #8a5a00);
}

.gather-ranked-list li > strong {
    font-family: var(--gather-heading, Georgia, serif);
    font-size: 1.2rem;
    line-height: 1.25;
}

.gather-ranked-list li > span:not(.gather-pill) {
    font-size: 0.9rem;
    color: var(--gather-muted, #565a85);
}

.gather-ranked-list .gather-pill {
    margin-left: 0;
}

.gather-pill-meets {
    background: var(--gather-yes-soft, #e3f4ea);
    color: var(--gather-yes, #1d6b3f);
}

.gather-pill-pending {
    background: var(--gather-accent-soft, #fff3d6);
    color: var(--gather-accent-soft-ink, #7a4f00);
}

.gather-pill-short {
    background: var(--gather-no-soft, #fbeaea);
    color: var(--gather-no, #a3262a);
}

.gather-pill-final {
    background: var(--gather-accent, #f2b63d);
    color: var(--gather-accent-ink, #23255a);
}

/*
 * The leaderboard's ⋯ menu (Task 8): <details class="gather-more"> beside
 * the "Finalize & tell everyone" primary button, holding the plain
 * Finalize form for the rare time an organizer wants to lock in a time
 * without mailing anyone yet. The same shape as core's own adm-menu
 * (web/core/assets/css/general.css) in Gather's own tokens; javascript.js
 * keeps only one open at a time and closes it on an outside click or Escape.
 */
.gather-more {
    position: relative;
    display: inline-block;
}

.gather-more > summary {
    list-style: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--gather-radius-sm, 12px);
    color: var(--gather-muted, #565a85);
    font-size: 1.1rem;
    line-height: 1;
}

.gather-more > summary::-webkit-details-marker {
    display: none;
}

.gather-more > summary:hover,
.gather-more[open] > summary {
    background: var(--gather-chip, #ebecfb);
    color: var(--gather-ink, #1f2140);
}

.gather-more .gather-form-inline {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    min-width: 140px;
    max-width: none;
    margin: 0;
    padding: 0.6rem;
    background: var(--gather-card, #fff);
    border: 1px solid var(--gather-border, #e2e1ef);
    border-radius: var(--gather-radius-sm, 12px);
    box-shadow: var(--gather-shadow, 0 6px 18px rgba(35, 37, 90, 0.10));
}

/*
 * "I can make all of these" (Task 8, the voting shortcut): vote.twig
 * renders this hook empty, so a visitor with no JavaScript sees nothing
 * here at all — javascript.js is what puts a button inside it, and only
 * then does it need any space.
 */
.gather-all-yes:not(:empty) {
    margin-bottom: 0.5rem;
}

/* The voting page (vote.twig): one row per option, each with the real
 * radios (the no-JS fallback, so they are never display:none in the CSS
 * itself) and the tap buttons javascript.js swaps in once it has run. */
.gather-vote-option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--gather-rule, #ecebf5);
}

.gather-vote-option:last-of-type {
    border-bottom: none;
}

.gather-vote-option-label {
    font-weight: 600;
}

.gather-vote-option-label time {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--gather-muted, #565a85);
}

.gather-vote-radios label {
    margin-right: 0.75rem;
    font-size: 0.9rem;
}

.gather-vote-buttons {
    display: none;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.gather-vote-btn {
    min-height: 44px;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--gather-input-border, #cfd0e6);
    background: var(--gather-card, #fff);
    color: var(--gather-ink, #1f2140);
    cursor: pointer;
    font-family: var(--gather-body, system-ui, sans-serif);
    font-size: 0.9rem;
    font-weight: 500;
}

.gather-vote-btn:hover {
    border-color: var(--gather-link, #3b3f8f);
}

.gather-vote-btn-active {
    background: var(--gather-brand, #23255a);
    border-color: var(--gather-brand, #23255a);
    color: #fff;
}

/* An answer button lit in its own color, by the radio value it stands for. */
.gather-vote-btn-active[data-answer="yes"] {
    background: var(--gather-yes, #1d6b3f);
    border-color: var(--gather-yes, #1d6b3f);
    color: #fff;
}

.gather-vote-btn-active[data-answer="maybe"] {
    background: var(--gather-accent, #f2b63d);
    border-color: var(--gather-accent, #f2b63d);
    color: var(--gather-accent-ink, #23255a);
}

.gather-vote-btn-active[data-answer="no"] {
    background: var(--gather-no, #a3262a);
    border-color: var(--gather-no, #a3262a);
    color: #fff;
}

.gather-feed-fallback {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.85rem;
    color: var(--gather-muted, #565a85);
}

@media (max-width: 480px) {
    .gather-table:not(.gather-grid-table),
    .gather-table:not(.gather-grid-table) thead,
    .gather-table:not(.gather-grid-table) tbody,
    .gather-table:not(.gather-grid-table) th,
    .gather-table:not(.gather-grid-table) td,
    .gather-table:not(.gather-grid-table) tr {
        display: block;
    }

    .gather-table:not(.gather-grid-table) thead {
        display: none;
    }

    .gather-table:not(.gather-grid-table) tr {
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--gather-rule, #ecebf5);
    }

    .gather-table:not(.gather-grid-table) td {
        border-bottom: none;
        padding: 0.25rem 0;
    }
}

/* A voter's comment, under their name in either answers grid. */
.gather-comment {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--gather-muted, #565a85);
    white-space: normal;
}

.gather-legend {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    color: var(--gather-muted, #565a85);
}

/*
 * The poll editor's first submit button, kept off screen: it is the one
 * Enter presses, so Enter in any field saves rather than generating.
 */
.gather-default-submit {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/*
 * The time section's tabs (Certain dates | Repeating dates). Without
 * JavaScript both panels show and the bar stays hidden; javascript.js adds
 * .gather-tabs-js, which turns the bar on and shows only the active panel.
 * Drawn as a segmented pill control.
 */
.gather-tab-bar {
    display: none;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    background: var(--gather-chip, #ebecfb);
    width: fit-content;
    max-width: 100%;
}

.gather-tabs-js .gather-tab-bar {
    display: flex;
}

.gather-tab {
    min-height: 40px;
    padding: 0.4rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--gather-chip-ink, #3b3f8f);
    cursor: pointer;
    font-family: var(--gather-body, system-ui, sans-serif);
    font-size: 0.95rem;
    font-weight: 500;
}

.gather-tab-on {
    background: var(--gather-card, #fff);
    color: var(--gather-ink, #1f2140);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(35, 37, 90, 0.15);
}

.gather-tab-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.gather-tabs-js .gather-tab-panel {
    display: none;
}

.gather-tabs-js .gather-tab-panel.gather-tab-active {
    display: flex;
}

/* With JS the tab names the section, so its heading is not repeated. */
.gather-tabs-js .gather-tab-heading {
    display: none;
}

.gather-tab-heading {
    margin: 0;
}

.gather-hint {
    margin: 0;
    color: var(--gather-muted, #565a85);
    font-size: 0.9rem;
}

.gather-repeat-line,
.gather-repeat-ends {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

.gather-repeat-label {
    margin: 0 0 0.3rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.gather-input-short {
    width: 5.5rem;
}

.gather-day {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gather-rule, #ecebf5);
}

/* A weekday's on/off checkbox, drawn as a pill that lights up amber. */
.gather-day-toggle {
    flex-direction: row !important;
    align-items: center;
    min-width: 5rem;
    min-height: 44px;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--gather-input-border, #cfd0e6);
    border-radius: 999px;
    background: var(--gather-card, #fff);
    cursor: pointer;
    font-weight: 500;
}

.gather-day-toggle input {
    margin: 0 0.4rem 0 0;
}

.gather-day-toggle:has(input:checked) {
    background: var(--gather-accent, #f2b63d);
    border-color: var(--gather-accent, #f2b63d);
    color: var(--gather-accent-ink, #23255a);
}

.gather-day-toggle:has(input:focus-visible) {
    outline: 3px solid var(--gather-link, #3b3f8f);
    outline-offset: 2px;
}

.gather-ranges {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
}

.gather-range-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

/* Back (top) and Cancel (beside the submit) on the poll forms. */
.gather-back {
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
}

.gather-back a {
    text-decoration: none;
    font-weight: 500;
}

.gather-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.25rem;
}

/*
 * The organizer nav (organizer-nav.twig): every organizer screen, never a
 * voter's. Pills; the current one indigo, Quick poll always amber.
 */
.gather-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.25rem;
}

.gather-nav-item,
a.gather-nav-item {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--gather-border, #e2e1ef);
    background: var(--gather-card, #fff);
    color: var(--gather-ink, #1f2140);
    font-weight: 500;
    text-decoration: none;
}

a.gather-nav-item:hover,
a.gather-nav-item:focus {
    border-color: var(--gather-link, #3b3f8f);
    color: var(--gather-ink, #1f2140);
    text-decoration: none;
}

a.gather-nav-quick {
    background: var(--gather-accent, #f2b63d);
    border-color: var(--gather-accent, #f2b63d);
    color: var(--gather-accent-ink, #23255a);
    font-weight: 600;
}

a.gather-nav-quick:hover,
a.gather-nav-quick:focus {
    border-color: var(--gather-accent-ink, #23255a);
    color: var(--gather-accent-ink, #23255a);
}

a.gather-nav-quick::before {
    content: "+";
    margin-right: 0.35rem;
    font-weight: 700;
}

a.gather-nav-on,
a.gather-nav-on:hover,
a.gather-nav-on:focus {
    background: var(--gather-brand, #23255a);
    border-color: var(--gather-brand, #23255a);
    color: #fff;
}

/*
 * The Natural 20 easter egg (Quorum::is_natural_twenty()): a time every
 * player said Yes to. The card glows amber and its badge's die rolls once
 * when the page opens; with reduced motion it simply sits there.
 */
.gather-ranked-list li.gather-nat20 {
    border: 2px solid var(--gather-accent, #f2b63d);
    background:
        radial-gradient(120% 80% at 100% 0%, var(--gather-accent-soft, #fff3d6) 0%, transparent 60%),
        var(--gather-card, #fff);
    box-shadow: 0 0 0 4px rgba(242, 182, 61, 0.18), var(--gather-shadow, 0 6px 18px rgba(35, 37, 90, 0.10));
}

.gather-ranked-list li > span.gather-nat20-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    border-radius: 999px;
    background: var(--gather-brand, #23255a);
    color: var(--gather-accent, #f2b63d);
    font-family: var(--gather-heading, Georgia, serif);
    font-size: 0.85rem;
    font-weight: 700;
}

.gather-nat20-badge svg {
    flex: none;
    animation: gather-nat20-roll 0.9s cubic-bezier(0.2, 0.8, 0.3, 1.2) 0.2s 1 both;
}

@keyframes gather-nat20-roll {
    0%   { transform: rotate(-540deg) scale(0.4); opacity: 0; }
    70%  { transform: rotate(20deg) scale(1.25); opacity: 1; }
    100% { transform: rotate(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .gather-nat20-badge svg {
        animation: none;
    }
}

/* The public front door (welcome.twig): a lead line, three steps, the voters'
   reassurance and the organizers' way in. */
.gather-welcome {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* running text keeps a readable line length on a wide page */
.gather-welcome-hero p,
.gather-card > p,
.gather-hint {
    max-width: 72ch;
}

.gather-welcome-hero p {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    color: var(--gather-ink, #1f2140);
}

.gather-welcome-hero .gather-welcome-lead {
    font-family: var(--gather-heading, Georgia, serif);
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1.2;
}

.gather-welcome-steps {
    list-style: none;
    counter-reset: gather-step;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 720px) {
    .gather-welcome-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.gather-welcome-steps li {
    counter-increment: gather-step;
}

.gather-welcome-steps li::before {
    content: counter(gather-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.5rem;
    border-radius: 999px;
    background: var(--gather-accent, #f2b63d);
    color: var(--gather-accent-ink, #23255a);
    font-weight: 700;
}

.gather-welcome-steps h3 {
    margin-bottom: 0.25rem;
}

.gather-welcome-steps p {
    margin: 0;
    color: var(--gather-muted, #565a85);
}

.gather-welcome-voters {
    background: var(--gather-accent-soft, #fff3d6);
    border-color: var(--gather-accent, #f2b63d);
    color: var(--gather-accent-soft-ink, #7a4f00);
}

.gather-welcome-organizers .gather-actions {
    margin: 0.5rem 0 0.75rem;
}