/* Layout comes from .page .page--wide (base.css). */

.section-header {
    font-family: var(--font-display);
    font-size: var(--fs-2);
    font-weight: var(--fw-normal);
    letter-spacing: 0.02em;
    color: var(--text-1);
    margin: 0 0 var(--size-4) 0;
}

.section-count {
    margin-left: var(--size-2);
    font-family: var(--font-body);
    font-size: var(--fs-0);
    font-style: italic;
    font-weight: var(--fw-normal);
    color: var(--text-3);
}

/* A guest's Sitting as row, at the head of their games. */
.identity-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--size-2);
    padding: var(--size-2) var(--size-3);
    background: var(--surface-2);
    border: var(--rule-1);
    border-radius: var(--radius-2);
}

/* Both faces stand as tall as the name input, so Change does not move the
   page under the row. */
.identity-display,
.identity-edit-row {
    min-height: 2.25rem;
}

.identity-display {
    display: flex;
    align-items: center;
    gap: var(--size-2);
    min-width: 0;
}

.identity-label {
    display: flex;
    gap: 0.25em;
    min-width: 0;
    white-space: nowrap;
    font-size: var(--font-size-1);
    color: var(--text-2);
}

.identity-label strong {
    color: var(--text-1);
    font-weight: var(--font-weight-7);
}

.identity-sep {
    flex-shrink: 0;
    color: var(--text-3);
}

.identity-edit {
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    color: var(--link);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-6);
}

@media (hover: hover) {
    .identity-edit:hover {
        background: transparent;
        text-decoration: underline;
    }
}

.identity-edit-row {
    display: flex;
    align-items: center;
    gap: var(--size-3);
    min-width: 0;
}

.identity-edit-row input {
    flex: 1;
    min-width: 0;
    max-width: 220px;
    padding: var(--size-1) var(--size-3);
    background: var(--surface-1);
    border: var(--border-size-1) solid var(--border-2);
    border-radius: var(--radius-2);
    color: var(--text-1);
    font-size: var(--font-size-1);
}

.identity-edit-row input:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

/* Home is three areas: the player's games, the list of conversations and the
   open one. A phone shows the one the page's link picks (home--home,
   home--chat, home--thread); a wide screen shows them together. */
.home-layout {
    display: flex;
    flex-direction: column;
    gap: var(--size-4);
}

/* Carries only the bar's dot signals. */
.home-dots {
    display: none;
}

.home-col {
    display: none;
    flex-direction: column;
    gap: var(--size-6);
    min-width: 0;
}

.home--home .home-games,
.home--chat .home-threads,
.home--thread .home-thread {
    display: flex;
}

/* A wide screen: the player's games, with the open conversation beside them
   at the window's height and kept in view as the page scrolls. The list of
   conversations is the open one's switcher, so its own area is not shown. */
@media (min-width: 900px) {
    .home-layout {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        grid-template-areas: "games thread";
        align-items: start;
        gap: var(--size-6);
    }

    .home-games {
        grid-area: games;
    }

    .home-thread {
        grid-area: thread;
        position: sticky;
        top: 5.5rem;
    }

    .home .home-games,
    .home .home-thread {
        display: flex;
    }

    .home .home-threads {
        display: none;
    }
}

/* The list of conversations: the Town Square, then the player's groups under
   their own heading, or a word on what a group is while there are none. */
.thread-list {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.thread-list .page-header {
    margin-bottom: var(--size-4);
}

.thread-list-new {
    padding: var(--size-2);
}

.thread-list-items {
    display: flex;
    flex-direction: column;
    gap: var(--size-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.thread-list-label {
    margin: var(--size-4) 0 var(--size-2);
    padding-inline: var(--size-3);
    font-family: var(--font-body);
    font-size: var(--fs-0);
    font-style: italic;
    font-weight: var(--fw-normal);
    letter-spacing: 0.04em;
    color: var(--text-3);
}

.thread-link {
    display: flex;
    align-items: center;
    gap: var(--size-3);
    min-height: var(--tap-min);
    padding: var(--size-2) var(--size-3);
    border-left: var(--rule-1);
    border-left-width: 3px;
    border-left-color: transparent;
    color: var(--text-2);
    text-decoration: none;
}

.thread-link--open {
    color: var(--text-1);
    background: var(--surface-2);
    border-left-color: var(--color-accent);
}

@media (hover: hover) {
    .thread-link:hover {
        background-image: var(--hover-veil);
    }
}

/* A conversation's mark: the Town Square's signpost on the accent, a group's
   initials on its own tint. */
.thread-mark {
    width: 2.25rem;
    height: 2.25rem;
    font-size: var(--fs-1);
    color: var(--text-on-color);
}

.thread-mark .ui-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.thread-mark--square { background: var(--color-accent-bg); }
.thread-mark--0 { background: var(--color-mark-0); }
.thread-mark--1 { background: var(--color-mark-1); }
.thread-mark--2 { background: var(--color-mark-2); }
.thread-mark--3 { background: var(--color-mark-3); }
.thread-mark--4 { background: var(--color-mark-4); }

.thread-link-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.thread-link-head {
    display: flex;
    align-items: baseline;
    gap: var(--size-2);
}

.thread-link-title {
    flex: 1;
}

.thread-link--unread .thread-link-title {
    color: var(--text-1);
    font-weight: var(--fw-medium);
}

.thread-link-age {
    flex-shrink: 0;
    font-size: var(--fs-0);
    font-style: italic;
    color: var(--text-3);
}

.thread-link-summary,
.thread-link-quiet {
    font-size: var(--fs-0);
    font-style: italic;
    color: var(--text-3);
}

.thread-link-dot {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-token);
    background: var(--color-accent);
}

.thread-link-chev {
    flex-shrink: 0;
    display: flex;
    color: var(--text-3);
}

.thread-list-more {
    margin: var(--size-3) 0 0;
    padding-inline: var(--size-3);
}

.thread-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--size-3);
    padding: var(--size-4);
    border: var(--rule-1);
    border-radius: var(--radius-2);
    text-align: center;
}

.thread-list-empty p {
    margin: 0;
    font-size: var(--fs-0);
    font-style: italic;
    line-height: 1.5;
    color: var(--text-2);
}

/* On a phone the list is a page of its own: each list one panel, its rows a
   thumb's width apart and divided, and none of them open, since the
   conversation shown beside home is a wide screen's. */
.home-threads .thread-list-items {
    gap: 0;
    background: var(--surface-2);
    border: var(--rule-1);
    border-radius: var(--radius-2);
}

.home-threads .thread-list-items li + li .thread-link {
    border-top: var(--rule-1);
}

.home-threads .thread-link,
.home-threads .thread-link--open {
    padding: var(--size-3);
    border-left: none;
    background-color: transparent;
    color: var(--text-1);
}

.home-threads .thread-mark {
    width: 2.75rem;
    height: 2.75rem;
}

.home-threads .thread-list-empty {
    background: var(--surface-2);
}

.home-section {
    min-width: 0;
}

.empty-state a {
    color: var(--link);
}

.home-mine {
    display: flex;
    flex-direction: column;
    gap: var(--size-4);
}

/* A game card: the board beside where it stands. In Your games the whole card
   is the link to a game the player sits in; a thread's card (thread.css) is
   the same card in its feed, by the game's card status (--playing, --over). */
.home-card {
    display: flex;
    color: inherit;
    text-decoration: none;
    border-left-width: 4px;
    transition: border-color 0.12s ease;
}

@media (hover: hover) {
    .home-card[href]:hover {
        background-image: var(--hover-veil);
    }
}

.home-card--your-move {
    border-left-color: var(--color-attention);
    background: color-mix(in oklab, var(--surface-2) 86%, var(--color-attention));
}

.home-card--locked,
.home-card--waiting,
.home-card--playing {
    border-left-color: var(--color-success-border);
}

.home-card--lobby {
    border-left-color: var(--color-accent);
}

.home-card--out,
.home-card--over,
.home-card--closed {
    border-left-color: var(--border-2);
}

.home-card-art {
    flex: 0 0 7rem;
    display: flex;
    align-items: center;
    padding: var(--size-2);
    background: var(--surface-1);
    border-right: var(--rule-1);
}

.home-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--size-1);
    padding: var(--size-3) var(--size-4);
}

.home-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--size-1) var(--size-3);
}

.home-card-map {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-2);
    font-weight: var(--fw-normal);
    color: var(--text-1);
}

.home-card-status {
    flex-shrink: 0;
    font-size: var(--fs-0);
    font-style: italic;
    color: var(--text-3);
    padding: 1px var(--size-2);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-1);
    line-height: 1.4;
    white-space: nowrap;
}

.home-card--your-move .home-card-status {
    color: var(--color-attention);
    border-color: var(--color-attention);
}

.home-card--locked .home-card-status,
.home-card--waiting .home-card-status,
.home-card--playing .home-card-status {
    color: var(--color-success);
    border-color: var(--color-success-border);
}

.home-card--lobby .home-card-status {
    color: var(--color-accent-text);
    border-color: var(--color-accent-muted);
}

.home-card-stage {
    display: flex;
    align-items: center;
    gap: var(--size-2);
    margin: 0;
    font-style: italic;
    color: var(--text-2);
}

.home-card-group {
    display: inline-flex;
    color: var(--color-info);
}

.home-card-private {
    display: inline-flex;
    color: var(--color-private-strong);
}

.home-card-group .ui-icon,
.home-card-private .ui-icon {
    width: 1rem;
    height: 1rem;
}

.home-seats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-2);
    margin: var(--size-1) 0 0;
    padding: 0;
    list-style: none;
}

.home-seat-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    margin-right: var(--size-1);
    border-radius: var(--radius-token);
    background: var(--seat);
}

/* Open tables: one tight row per lobby the player could sit at, with the
   accent edge of a game taking seats. Past the first few, rows wait for the
   section's is-all. */
.open-table-list {
    display: flex;
    flex-direction: column;
    gap: var(--size-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.open-table {
    display: flex;
    align-items: center;
    gap: var(--size-3);
    max-inline-size: none;
    padding: var(--size-2) var(--size-3) var(--size-2) var(--size-2);
    border-left: 3px solid var(--color-accent);
}

.open-tables:not(.is-all) .open-table--more,
.open-tables.is-all .open-tables-all {
    display: none;
}

.open-table-art {
    flex: 0 0 3rem;
    display: flex;
}

.open-table-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.open-table-map {
    font-family: var(--font-display);
    font-size: var(--fs-1);
    color: var(--text-1);
}

.open-table-stage {
    font-size: var(--fs-0);
    font-style: italic;
    color: var(--text-2);
}

.open-table-group {
    display: inline-flex;
    align-items: center;
    gap: var(--size-1);
    font-size: var(--fs-0);
    font-style: italic;
    color: var(--color-info);
}

.open-table-group .ui-icon {
    width: 0.9rem;
    height: 0.9rem;
}

.open-table-join {
    flex-shrink: 0;
    min-width: 4.5rem;
}

.open-tables-all {
    margin-top: var(--size-3);
}

.home-intro p {
    margin: var(--size-3) 0 0;
    color: var(--text-2);
    line-height: 1.5;
}

.home-intro-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--size-4);
    margin-top: var(--size-5);
}

.home-invites {
    display: flex;
    flex-direction: column;
    gap: var(--size-3);
}

.home-invite-row {
    display: flex;
    align-items: center;
    gap: var(--size-3);
    padding: var(--size-3) var(--size-4);
    border-left: 4px solid var(--color-accent);
}

/* The link fills the row so the whole row opens the lobby; the ✕ sits apart. */
.home-invite-link {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.home-invite-map {
    color: var(--text-1);
}

.home-invite-meta {
    font-size: var(--fs-0);
    font-style: italic;
    color: var(--text-3);
}

/* New group: a name, then the people picked, as chips, above a search box
   (components.PeopleCombo) whose dropdown offers more. The dropdown hangs over
   Create and past the dialog, so the dialog lets it overflow rather than
   scrolling (a popover's own default). Nothing else in it can grow far: the
   chips scroll in their own box, so the dialog stays short enough for a
   phone. */
.group-new {
    width: min(420px, 90vw);
    overflow: visible;
}

.group-new .people-options {
    max-height: min(30dvh, 15rem);
}

.group-new-form {
    display: flex;
    flex-direction: column;
    gap: var(--size-3);
}

.group-new-label {
    margin: var(--size-2) 0 0;
    font-size: var(--fs-0);
    font-style: italic;
    color: var(--text-2);
}

.group-new-picked {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-2);
    max-height: 6.5rem;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.group-new-picked:empty {
    display: none;
}

.group-new-chip {
    gap: var(--size-1);
    max-width: 12rem;
    padding-right: var(--size-1);
}

.group-new-unpick {
    display: inline-flex;
    flex-shrink: 0;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
}

.group-new-unpick .ui-icon {
    width: 0.9rem;
    height: 0.9rem;
}

.home-invites .btn-kick {
    flex-shrink: 0;
    width: var(--size-6);
    height: var(--size-6);
    border-color: transparent;
}

.home-results {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.home-result {
    display: flex;
    align-items: baseline;
    gap: var(--size-3);
    padding: var(--size-2) 0;
    border-bottom: var(--rule-1);
    color: var(--text-2);
    text-decoration: none;
}

@media (hover: hover) {
    .home-result:hover .home-result-map {
        color: var(--link);
    }
}

.home-result-outcome {
    flex: 0 0 3rem;
    font-style: italic;
    color: var(--text-3);
}

.home-result--won .home-result-outcome {
    color: var(--color-attention);
}

.home-result-map {
    flex: 1;
    color: var(--text-1);
}

.home-result-stage {
    font-size: var(--fs-0);
    font-style: italic;
    color: var(--text-3);
}

/* The guest join card (guest_card.templ) still wears the old game-card
   header pieces. */
.game-card-status {
    font-size: var(--fs-0);
    font-style: italic;
    font-weight: var(--fw-normal);
    color: var(--color-accent-text);
    letter-spacing: 0.03em;
    padding: 1px var(--size-2);
    border: 1px solid var(--color-accent-muted);
    border-radius: var(--radius-1);
    line-height: 1.4;
}

.game-card-host {
    font-size: var(--fs-1);
    font-weight: var(--fw-normal);
    color: var(--text-1);
}

.chip {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-0);
    font-style: italic;
    color: var(--text-2);
    background: var(--surface-3);
    border: var(--rule-1);
    border-radius: var(--radius-1);
    padding: 1px var(--size-2);
    line-height: 1.5;
    max-width: 9rem;
}

.chip--current {
    background: var(--color-accent-subtle);
    border-color: var(--color-accent-muted);
    color: var(--color-accent-subtle-text);
    font-style: normal;
}

/* An account holder's display name, from the avatar's menu. */
.name-dialog {
    width: min(380px, 90vw);
}

.scope-modal-title {
    font-family: var(--font-display);
    font-size: var(--fs-2);
    font-weight: var(--fw-normal);
    letter-spacing: 0.01em;
    margin: 0 0 var(--size-2);
    padding-right: 2.5rem;
}

.scope-modal-desc {
    font-size: var(--fs-0);
    font-style: italic;
    color: var(--text-2);
    margin: 0 0 var(--size-3);
}

/* Layout comes from .list-row (base.css), stacked instead of inline. */
.scope-option {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--size-1);
    padding: var(--size-3);
    margin-bottom: var(--size-2);
    font: inherit;
    text-align: left;
    background: var(--surface-1);
    border: var(--border-size-1) solid var(--border-2);
    border-radius: var(--radius-2);
    color: var(--text-1);
    cursor: pointer;
}

@media (hover: hover) {
    .scope-option:hover {
        background-image: var(--hover-veil);
    }
}

/* The scope the "Set a board" button that opened the dialog chose. */
.scope-option.is-chosen {
    border-color: var(--color-accent);
    background: var(--color-accent-subtle);
}

.scope-option-name {
    font-weight: var(--font-weight-7);
    max-width: 100%;
}

.scope-option-hint {
    font-size: var(--fs-0);
    font-style: italic;
    color: var(--text-2);
}

.scope-groups-header {
    font-size: var(--fs-0);
    font-style: italic;
    font-weight: var(--fw-normal);
    color: var(--text-3);
    letter-spacing: 0.04em;
    margin: var(--size-2) 0 var(--size-2);
}

.scope-empty {
    font-size: var(--font-size-0);
    margin-bottom: var(--size-2);
}

/* A group invite's accept and decline, which swap for one spinner while the
   answer is on its way. */
.group-invite-card-actions {
    display: flex;
    margin-left: auto;
    flex-shrink: 0;
}

.group-invite-card-btns {
    display: flex;
    align-items: center;
    gap: var(--size-2);
}

.invite-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: var(--radius-round);
    border: var(--border-size-1) solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.invite-icon-btn .ui-icon {
    width: 1.1rem;
    height: 1.1rem;
}

.invite-icon-btn--accept {
    background: var(--color-accent-bg);
    color: var(--text-on-color);
}

@media (hover: hover) {
    .invite-icon-btn--accept:hover {
        background: var(--color-accent-bg-hover);
    }
}

.invite-icon-btn--decline {
    background: transparent;
    border-color: var(--border-2);
    color: var(--color-destructive);
}