/* Community tab: Actions menu, community-card list, per-card mode control, dialog. */

/* ---------- actions menu ------------------------------------------------------ */
/* Same shape as .language in shell.css, minus the appbar-teal ghost treatment
   — this trigger sits on the ordinary page background, so it borrows .btn-sm. */
.nb-actions {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
}

.nb-actions__trigger {
    gap: 0.5rem;
}

.nb-actions__chevron {
    transition: transform 150ms;
}

.nb-actions[data-open="true"] .nb-actions__chevron {
    transform: rotate(180deg);
}

.nb-actions__menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 60;
    width: 21rem;
    padding: 0.375rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow:
        var(--shadow-card),
        0 8px 24px -6px rgb(0 0 0 / 0.2);
}

.nb-actions__item {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--foreground);
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}

.nb-actions__item:hover:not([disabled]) {
    background: var(--muted);
}

.nb-actions__item[disabled] {
    color: var(--muted-foreground);
    cursor: not-allowed;
}

.nb-actions__item-label {
    flex: 1;
    white-space: nowrap;
}

.nb-actions__badge {
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: auto;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: 0.6875rem;
    font-weight: 600;
}

.cm-primary {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-foreground);
}

.cm-primary:hover:not([disabled]) {
    background: color-mix(in oklab, var(--primary) 90%, var(--card));
}

/* ---------- community operating mode -------------------------------------- */
.cm-mode {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.cm-mode__field,
.cm-mode__selected {
    display: flex;
    align-items: center;
}

.cm-mode__head {
    margin-bottom: 0.75rem;
}

.cm-mode__field {
    position: relative;
    min-height: 2.5rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    padding: 0 0.75rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

.cm-mode__selected {
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.cm-mode__field select {
    position: absolute;
    inset: 0;
    width: 100%;
    cursor: pointer;
    opacity: 0;
}

.cm-mode__field:has(select:focus-visible) {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 45%, transparent);
}

.cm-mode__icon--warning {
    color: var(--status-warning-strong);
}

.cm-mode__icon--info {
    color: var(--status-info);
}

.cm-mode__icon--success {
    color: var(--status-success);
}

.cm-mode__icon--error {
    color: var(--status-error);
}

.cm-mode__icon--secondary {
    color: var(--secondary);
}

.cm-roster {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
}

.cm-picker {
    max-height: min(49vh, 32rem);
    overflow-y: auto;
    padding: 0.25rem;
}

@media (min-width: 768px) {
    .cm-roster {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .cm-roster {
        grid-template-columns: repeat(5, 1fr);
    }
}

.cm-person {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    box-shadow: var(--shadow-card);
    padding: 0.75rem 0.625rem;
    color: inherit;
    text-align: center;
    cursor: pointer;
    transition:
        box-shadow 220ms,
        transform 220ms,
        border-color 220ms,
        background-color 220ms;
}

.cm-person:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px -6px color-mix(in oklab, var(--foreground) 22%, transparent);
}

.cm-person:active {
    transform: translateY(0);
}

.cm-person[aria-pressed="true"] {
    border-color: var(--primary);
    background: color-mix(in oklab, var(--primary) 8%, var(--card));
}

.cm-picker .cm-person {
    min-height: 12.75rem;
}

.cm-person__name {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cm-person__art {
    width: 6rem;
    height: 5.25rem;
    margin: 0 auto;
    object-fit: contain;
    object-position: bottom;
}

/* Reads as the ground the building stands on, so the artwork isn't floating
   in the middle of the card. */
.cm-person__ground {
    display: block;
    height: 2px;
    width: 70%;
    margin: 0.625rem auto 0.75rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--foreground) 10%, transparent);
}

.cm-person__stats {
    display: flex;
    justify-content: center;
    gap: 1.375rem;
}

.cm-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--primary) 14%, transparent);
    color: var(--primary-strong);
    transition:
        background-color 250ms,
        color 250ms,
        transform 350ms;
}

.cm-person[aria-pressed="true"] .cm-badge {
    background: var(--primary);
    color: var(--primary-foreground);
    transform: rotate(360deg);
}

/* ---------- create community dialog --------------------------------------- */
body.cm-dialog-open {
    overflow: hidden;
}

.cm-dialog[hidden] {
    display: none;
}

.cm-dialog {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.cm-dialog__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in oklab, var(--foreground) 42%, transparent);
}

.cm-dialog__surface {
    position: relative;
    width: min(100%, 52rem);
    max-height: min(44rem, calc(100vh - 2rem));
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--popover);
    box-shadow: 0 16px 36px -18px color-mix(in oklab, var(--foreground) 48%, transparent);
    padding: 1.25rem;
}

.cm-dialog__head,
.cm-dialog__meta,
.cm-dialog__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cm-dialog__head {
    align-items: flex-start;
    margin-bottom: 1rem;
}

.cm-dialog__meta {
    margin-bottom: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--primary) 9%, var(--background));
}

.cm-dialog__actions {
    justify-content: flex-end;
    margin-top: 1rem;
}

.cm-dialog__actions .cm-primary:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ---------- stat block ----------------------------------------------------- */
.cm-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3.75rem;
}

.cm-stat__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-foreground);
}

.cm-stat__value {
    display: flex;
    align-items: baseline;
    gap: 0.1875rem;
    font-family: var(--font-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-height: 1.5rem;
}

.cm-stat__num {
    font-size: 1rem;
    font-weight: 600;
}

.cm-stat__unit {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

/* The arrow is an icon, not a glyph, so it has no baseline to sit on — it
   centres against the number instead of hanging below it. */
.cm-stat__arrow {
    display: flex;
    align-self: center;
}

.cm-stat__arrow:empty {
    display: none;
}

.cm-stat--lg {
    min-width: 5.5rem;
}
.cm-stat--lg .cm-stat__value {
    min-height: 2rem;
}
.cm-stat--lg .cm-stat__num {
    font-size: 1.5rem;
}
.cm-stat--lg .cm-stat__unit {
    font-size: 0.75rem;
}

/* Import costs money, export earns it — same red/green the flow diagram and
   the cost report already use for the same two directions. */
.cm-import {
    color: var(--status-error);
}
.cm-export,
.cm-charge,
.cm-produce {
    color: var(--status-success);
}

.cm-discharge,
.cm-consume {
    color: var(--status-error);
}
.cm-idle {
    color: var(--muted-foreground);
}

/* ---------- empty state / list ---------------------------------------------- */
.cm-empty {
    padding: 0.5rem 0;
}

/* 12.5rem base holds 3+ columns from ~640px content width up; narrower just
   settles at fewer, same as .nb-grid above. align-items:start so an expanded
   card's taller row doesn't stretch its shorter row-mates to match. */
.cm-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    gap: 0.875rem;
    align-items: start;
}

/* ---------- community card --------------------------------------------------- */
.cm-community {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.cm-community__head {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
    padding: 0.625rem 0.5rem;
}

.cm-community__head:hover {
    background: var(--muted);
}

/* The card clips overflow to keep the head's hover fill inside its rounded
   corners, which would also clip the button's own focus ring — so the ring
   is drawn on the card instead, the same :has() escape .cm-mode__field uses. */
.cm-community__head:focus-visible {
    outline: none;
    box-shadow: none;
}

.cm-community:has(.cm-community__head:focus-visible),
.cm-community:has(.cm-community__remove:focus-visible) {
    outline: none;
    box-shadow:
        0 0 0 2px var(--background),
        0 0 0 4px color-mix(in oklab, var(--ring) 60%, transparent);
}

.cm-community__title {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cm-community__art {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto;
    object-fit: contain;
    object-position: bottom;
}

.cm-community__ground {
    display: block;
    height: 2px;
    width: 70%;
    margin: 0.5rem auto 0.625rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--foreground) 10%, transparent);
}

.cm-community__stats {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
}

.cm-community__chevron {
    position: absolute;
    top: 0.625rem;
    right: 0.5rem;
    color: var(--muted-foreground);
    transition: transform 150ms;
}

.cm-community[data-expanded="true"] .cm-community__chevron {
    transform: rotate(180deg);
}

.cm-community__details {
    padding: 0 0.75rem 0.75rem;
    border-top: 1px solid var(--border);
}

.cm-community__extra-stats {
    display: flex;
    justify-content: center;
    gap: 1.375rem;
    padding-top: 1rem;
}

.cm-community__remove {
    margin-top: 1rem;
    width: 100%;
}

.cm-community__remove:focus-visible {
    outline: none;
    box-shadow: none;
}

@media (max-width: 560px) {
    .cm-dialog {
        align-items: end;
        padding: 0;
    }

    .cm-dialog__surface {
        max-height: calc(100vh - 1rem);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        padding: 1rem;
    }

    .cm-dialog__meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
    }
}