/* economy feature styles: overview, resources, facilities, empire. Build on the classes and variables in app.css. */

/* .page-title__sub is styled with .page-title in app.css. */

/* ---------- Building cards ---------- */

.economy-cards {
    margin-bottom: var(--gap);
}

/* Inside the level stamp on the art (paper ground). */
.building-card__planned {
    margin-left: 0.3rem;
    color: var(--coral-dark);
}

.building-card__requirements {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.building-card__stats {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 0.7rem;
    align-items: baseline;
    margin: 0.1rem 0 0;
    padding-top: 0.5rem;
    font-size: 0.85rem;
    border-top: var(--dash);
}

.building-card__stats dt {
    font: 700 0.64rem/1.6 var(--font-body);
    font-stretch: 78%;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--paper-faint);
    white-space: nowrap;
}

.building-card__stats dd {
    margin: 0;
}

/* Drawing Aether Flow is a running cost, not an error: mustard, not coral. */
.building-card__energy.is-draw {
    color: var(--mustard-light);
}

.building-card__energy.is-gain {
    color: var(--good);
}

.cost__item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.cost__icon {
    width: 1.1rem;
    height: 1.1rem;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--keyline);
}

.building-card__queued {
    margin: 0;
    font-size: 0.85rem;
    color: var(--paper-dim);
}

.building-card__queued .tag {
    color: var(--mustard);
}

.building-card__queued .is-running {
    color: var(--mustard);
}

/* Why the build button is off: printed small just above it. The card's bottom group (reason,
   button, tear-down) is pushed to the foot of the card so buttons line up across a row. */
.building-card__problem {
    order: 1;
    margin: auto 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--paper-dim);
}

.building-card .item-card__actions {
    order: 2;
}

.building-card:not(.is-locked) .item-card__actions:has(~ .building-card__problem) {
    margin-top: 0;
}

/* A locked card already lists what it needs. */
.building-card.is-locked .building-card__problem {
    display: none;
}

/* Requirements sit under the cost block, as on research and shipyard cards. */
.building-card__requirements {
    order: 1;
}

/* "Requires:" as a label on its own line, as on research and shipyard cards. */
.building-card__requirements li:first-child {
    width: 100%;
    font: 700 0.64rem/1.5 var(--font-body);
    font-stretch: 78%;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--paper-faint);
}

.building-card__requirements li:not(:first-child):not(.is-met) {
    color: var(--coral);
}

.building-card__demolish {
    order: 3;
    font-size: 0.85rem;
    border-top: var(--dash);
    padding-top: 0.45rem;
}

.building-card__demolish summary {
    cursor: pointer;
    color: var(--paper-faint);
    font-size: 0.8rem;
}

.building-card__demolish summary:hover {
    color: var(--coral);
}

.building-card__demolish[open] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* ---------- Build queue ---------- */

.build-queue__count {
    font-size: 0.72em;
    color: var(--paper-faint);
}

/* .build-queue__empty and .overview__empty are empty states (app.css). */

.build-queue__image {
    width: 2.4rem;
    height: 2.4rem;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px var(--keyline), 2px 2px 0 1px var(--keyline);
}

.build-queue__name {
    font-weight: 600;
}

.build-queue__item form {
    margin: 0;
}

.build-queue__cancel {
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
}

/* ---------- Production table ---------- */

.production__scroll,
.empire__scroll,
.overview__scroll {
    overflow-x: auto;
}

.production__table td.is-positive {
    color: var(--good);
}

.production__table .is-negative,
.empire__table .is-negative {
    color: var(--bad);
}

.production__table tfoot th,
.production__table tfoot td {
    border-top: var(--line);
}

.production__total th {
    text-transform: none;
}

.production__percent {
    padding: 0.15rem 0.3rem;
}

.production__save {
    margin-top: 0.8rem;
}

/* ---------- Overview ---------- */

/* The build queue holds the left column; research and the slipways stack on the right. */
.overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "world world"
        "events events"
        "build research"
        "build shipyard";
    gap: 0 1.25rem;
}

.overview__world {
    grid-area: world;
    grid-template-columns: minmax(9rem, 14rem) 1fr;
}

.overview__events {
    grid-area: events;
}

.overview > .build-queue {
    grid-area: build;
}

.overview__research {
    grid-area: research;
}

.overview__shipyard {
    grid-area: shipyard;
}

.overview__world {
    display: grid;
    grid-template-columns: minmax(10rem, 18rem) 1fr;
    gap: var(--gap);
    align-items: start;
}

/* The world itself, ringed in two inks printed off register. */
.overview__image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    background: var(--ink-700);
    box-shadow: 0 0 0 4px var(--ink-950), 7px 6px 0 4px rgb(255 107 87 / 45%), -3px -3px 0 5px rgb(232 180 67 / 22%);
}

.facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 1.2rem;
    align-items: baseline;
    margin: 0 0 1.1rem;
}

.facts dt {
    font: 700 0.66rem/1.6 var(--font-body);
    font-stretch: 78%;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--paper-faint);
}

.facts dd {
    margin: 0;
}

.facts .is-full {
    color: var(--bad);
}

.overview__rename {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.overview__label {
    font-size: 0.85rem;
    color: var(--paper-dim);
}

.overview__hint {
    margin: 0;
    font-size: 0.85rem;
    color: var(--paper-faint);
}

.overview__abandon {
    margin-top: 0.8rem;
    padding-top: 0.6rem;
    border-top: var(--dash);
}

.overview__abandon summary {
    cursor: pointer;
    color: var(--coral);
    font-size: 0.88rem;
}

.overview__abandon form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.overview__abandon p {
    margin: 0;
    color: var(--paper-dim);
}

.events__row.is-foreign td {
    background: rgb(232 180 67 / 6%);
}

/* Hostile fleets and missiles: hatched coral rows, a solid coral tag with a pulsing mark. */
.events__row.is-hostile td {
    background: repeating-linear-gradient(-45deg, rgb(255 107 87 / 12%) 0 2px, rgb(255 107 87 / 5%) 2px 8px);
}

.events__row.is-hostile td:first-child {
    box-shadow: inset 3px 0 0 var(--coral);
}

.events__tag--hostile {
    margin-left: 0.3rem;
    color: var(--ink-950);
    background: var(--coral);
    border-color: var(--coral);
}

.events__tag--hostile::before {
    content: "";
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin-right: 0.3rem;
    vertical-align: 0.05em;
    border-radius: 50%;
    background: var(--ink-950);
    animation: ink-pulse 1.2s ease-in-out infinite;
}

.events__owner {
    display: block;
    font-size: 0.8rem;
    color: var(--paper-dim);
}

/* Wide pages: the facts in two columns of pairs, and the three queues side by side. */
@container (min-width: 58rem) {
    .overview__world .facts {
        grid-template-columns: repeat(2, max-content minmax(0, 1fr));
    }

    .overview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "world world world"
            "events events events"
            "build research shipyard";
    }
}

@media (max-width: 760px) {
    .overview {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "world" "events" "build" "research" "shipyard";
    }

    /* The world shrinks to a thumbnail beside its title; facts and forms use the full width. */
    .overview__world {
        grid-template-columns: 4.5rem minmax(0, 1fr);
        gap: 0.4rem 0.9rem;
    }

    .overview__facts {
        display: contents;
    }

    .overview__image {
        grid-column: 1;
        grid-row: 1;
    }

    .overview__facts > .panel__title {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        margin: 0;
    }

    .overview__facts > :not(.panel__title) {
        grid-column: 1 / -1;
    }

    .overview__image {
        box-shadow: 0 0 0 3px var(--ink-950), 4px 3px 0 3px rgb(255 107 87 / 45%);
    }

    .overview__world .facts {
        margin-top: 0.6rem;
    }

    .overview__rename .input {
        flex: 1 1 7rem;
        min-width: 0;
    }
}

/* ---------- Empire ---------- */

.empire__table th[scope="row"] {
    white-space: nowrap;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
    color: var(--paper);
}

.empire__colony a {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    text-decoration: none;
    color: var(--paper);
    text-transform: none;
    letter-spacing: 0;
}

.empire__colony.is-moon a {
    color: var(--paper-dim);
}

.empire__image {
    width: 2.4rem;
    height: 2.4rem;
    object-fit: cover;
    border-radius: 50%;
}

.empire__coords {
    font-size: 0.75rem;
    color: var(--paper-faint);
}

.empire__group-title {
    padding-top: 1.2rem;
    font: 400 1rem var(--font-display);
    color: var(--paper);
    border-bottom: 2px solid var(--coral);
}

.empire__total {
    font-weight: 600;
    background: rgb(239 230 210 / 4%);
}

.empire__row.is-zero {
    color: var(--paper-faint);
}

.empire__row.is-zero th[scope="row"] {
    color: var(--paper-faint);
}