/* Layout and components for the redesigned screens.
 *
 * theme.css owns the vocabulary — colours, radii, faces. This file owns the shapes
 * that use it. Nothing here may name a colour, a radius or a font family directly;
 * if a value is missing from the token contract, add it there rather than hardcoding
 * it here, or the theme layer stops being able to change it.
 *
 * Breakpoints, from the handoff: desktop >= 1200px, tablet 700-1199px, phone < 700px.
 */

/* ---------------------------------------------------------------------------
 * Shell
 * --------------------------------------------------------------------------- */

.fc-body {
    margin: 0;
    min-height: 100vh;
    /* Room for the fixed phone tab bar so the last card is not trapped under it. */
    padding-bottom: 0;
}

.fc-shell {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

.fc-main {
    padding-top: 26px;
    padding-bottom: 60px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.fc-header {
    background: var(--fc-header);
    border-bottom: 1px solid var(--fc-line);
    padding: 22px 0 18px;
}

.fc-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.fc-titles { min-width: 0; }

.fc-subtitle {
    color: var(--fc-muted);
    font-size: 13px;
    margin: 4px 0 0;
}

/* ---- Account chip ---- */

.fc-account {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.fc-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--fc-radius-inner);
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    color: var(--fc-text);
    font-family: var(--fc-display);
    font-size: 12px;
}

.fc-account-name {
    color: var(--fc-soft);
    font-size: 13px;
}

.fc-account-link {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: var(--fc-radius-pill);
    border: 1px solid var(--fc-line);
    color: var(--fc-muted);
    font-size: 12px;
    text-decoration: none;
}

.fc-account-link:hover {
    color: var(--fc-text);
    border-color: var(--fc-accent);
}

/* ---------------------------------------------------------------------------
 * Navigation
 * --------------------------------------------------------------------------- */

.fc-nav {
    background: var(--fc-panel);
    border-bottom: 1px solid var(--fc-line);
    position: sticky;
    top: 0;
    z-index: 20;
}

.fc-nav-row {
    display: flex;
    align-items: stretch;
    gap: 4px;
}

.fc-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 12px;
    color: var(--fc-muted);
    font-size: 13px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.fc-nav-link:hover { color: var(--fc-soft); }

.fc-nav-link.is-active {
    color: var(--fc-text);
    border-bottom-color: var(--fc-accent);
}

.fc-nav-link.is-admin { color: var(--fc-profit); }

.fc-nav-short { display: none; }

/* ---------------------------------------------------------------------------
 * Flash messages
 * --------------------------------------------------------------------------- */

.fc-flash {
    padding: 11px 14px;
    border-radius: var(--fc-radius-inner);
    border: 1px solid var(--fc-line);
    background: var(--fc-surface);
    color: var(--fc-text);
    font-size: 13px;
}

.fc-flash-danger { border-color: var(--fc-profit); }
.fc-flash-success { border-color: var(--fc-sustain); }

/* ---------------------------------------------------------------------------
 * The HUD
 * --------------------------------------------------------------------------- */

.fc-hud {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.fc-gauge {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line-soft);
    border-radius: var(--fc-radius-inner);
    padding: 11px 13px 13px;
    min-width: 0;
}

.fc-gauge-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.fc-gauge-delta {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--fc-muted);
    white-space: nowrap;
}

.fc-gauge-value {
    font-family: var(--fc-display);
    font-variant-numeric: tabular-nums;
    font-size: 26px;
    line-height: 1.15;
    margin: 3px 0 8px;
    color: var(--fc-text);
    /* Long treasury figures must shrink rather than overflow the card. */
    overflow-wrap: anywhere;
}

/* The bar sits in a fixed-height track with flex-shrink disabled. In a flex
   context a bare div gets compressed by its siblings, which is how bars of
   genuinely different values end up rendering at near-identical heights. */
.fc-gauge-track {
    height: 5px;
    flex-shrink: 0;
    border-radius: var(--fc-radius-pill);
    background: var(--fc-surface-alt);
    border: 1px solid var(--fc-line-soft);
    overflow: hidden;
}

.fc-gauge-fill {
    display: block;
    height: 100%;
    border-radius: var(--fc-radius-pill);
    background: var(--fc-accent);
    transition: width 420ms ease;
}

.fc-gauge-fill.is-cash { background: var(--fc-cash); }
.fc-gauge-fill.is-land { background: var(--fc-land); }
.fc-gauge-fill.is-profit { background: var(--fc-profit); }
.fc-gauge-fill.is-sustain { background: var(--fc-sustain); }

.fc-gauge-sub {
    margin: 7px 0 0;
    font-size: 11px;
    color: var(--fc-faint);
}

.fc-gauge-formula {
    font-family: var(--fc-display);
    font-size: 11px;
    color: var(--fc-faint);
}

.fc-derived {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fc-accent);
}

/* ---------------------------------------------------------------------------
 * Panels and section headings
 * --------------------------------------------------------------------------- */

.fc-section {
    background: var(--fc-panel);
    border: 1px solid var(--fc-line);
    border-radius: var(--fc-radius);
    box-shadow: var(--fc-shadow);
    padding: 15px 16px 16px;
}

.fc-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.fc-section-title {
    font-family: var(--fc-display);
    font-size: 17px;
    color: var(--fc-text);
    margin: 0;
}

.fc-section-note {
    font-size: 12px;
    color: var(--fc-muted);
    font-variant-numeric: tabular-nums;
}

.fc-columns {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 22px;
    align-items: start;
}

/* ---------------------------------------------------------------------------
 * The Charter
 * --------------------------------------------------------------------------- */

.fc-charter { display: flex; flex-direction: column; gap: 8px; }

.fc-charter-row {
    border: 1px solid var(--fc-line-soft);
    border-radius: var(--fc-radius-inner);
    background: var(--fc-surface);
    overflow: hidden;
}

/* The leading rule is the category colour, the one place it is used. */
.fc-charter-row { border-left: 3px solid var(--fc-line); }
.fc-charter-row.is-short { border-left-color: var(--fc-profit); }
.fc-charter-row.is-met { border-left-color: var(--fc-sustain); }
.fc-charter-row.is-optional { border-left-color: var(--fc-line); }

.fc-charter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 11px 13px;
    background: none;
    border: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.fc-charter-head:disabled { cursor: default; }

.fc-charter-name {
    font-size: 14px;
    color: var(--fc-text);
    font-weight: 600;
}

.fc-charter-summary {
    font-size: 12px;
    color: var(--fc-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fc-charter-row.is-short .fc-charter-summary { color: var(--fc-profit); }

.fc-chevron { color: var(--fc-dim); font-size: 11px; }
.fc-charter-head[aria-expanded="true"] .fc-chevron { color: var(--fc-accent); }

.fc-charter-body { padding: 0 13px 12px; }

.fc-built {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fc-built li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--fc-soft);
    padding: 6px 9px;
    border-radius: var(--fc-radius-inner);
    background: var(--fc-surface-alt);
}

.fc-built-stats {
    font-variant-numeric: tabular-nums;
    color: var(--fc-muted);
    white-space: nowrap;
    font-size: 11px;
}

/* ---------------------------------------------------------------------------
 * Ledgers
 * --------------------------------------------------------------------------- */

.fc-ledger { display: flex; flex-direction: column; gap: 2px; }

.fc-ledger-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--fc-line-soft);
    font-size: 13px;
    color: var(--fc-muted);
}

.fc-ledger-line:last-child { border-bottom: 0; }

.fc-ledger-line.is-total {
    border-top: 1px solid var(--fc-line);
    margin-top: 4px;
    padding-top: 10px;
    color: var(--fc-text);
    font-weight: 600;
}

.fc-ledger-value {
    font-family: var(--fc-display);
    font-variant-numeric: tabular-nums;
    color: var(--fc-soft);
}

.fc-ledger-line.is-total .fc-ledger-value { color: var(--fc-text); }

/* ---------------------------------------------------------------------------
 * Small parts
 * --------------------------------------------------------------------------- */

.fc-roster { list-style: none; margin: 0; padding: 0; }

.fc-roster li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--fc-line-soft);
    font-size: 13px;
    color: var(--fc-soft);
}

.fc-roster li:last-child { border-bottom: 0; }
.fc-roster .fc-role { color: var(--fc-dim); font-size: 11px; }

.fc-empty {
    color: var(--fc-faint);
    font-size: 12px;
    font-style: italic;
    margin: 0;
}

.fc-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--fc-radius-pill);
    border: 1px solid var(--fc-line);
    background: var(--fc-surface-alt);
    color: var(--fc-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * Tablet
 * --------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .fc-shell { padding: 0 20px; }
    .fc-columns { grid-template-columns: 1fr; }

    /* Nine equal pills across, short labels so they fit 820px without scrolling. */
    .fc-nav-row { gap: 6px; padding-top: 6px; padding-bottom: 6px; }
    .fc-nav-link {
        flex: 1;
        justify-content: center;
        border-bottom: 0;
        border-radius: var(--fc-radius-inner);
        background: var(--fc-surface);
        border: 1px solid var(--fc-line-soft);
        padding: 0 6px;
        font-size: 12px;
    }
    .fc-nav-link.is-active {
        background: var(--fc-surface-alt);
        border-color: var(--fc-accent);
        color: var(--fc-text);
    }
    .fc-nav-long { display: none; }
    .fc-nav-short { display: inline; }

    .fc-hud { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------------------------
 * Phone
 * --------------------------------------------------------------------------- */

@media (max-width: 699px) {
    .fc-shell { padding: 0 16px; }
    .fc-hud { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .fc-gauge-value { font-size: 22px; }
    .fc-header-row { flex-direction: column; align-items: flex-start; }

    /* The row nav is replaced wholesale by the bottom bar. */
    .fc-nav { display: none; }

    .fc-body { padding-bottom: 76px; }

    .fc-tabbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 40;
        display: flex;
        background: var(--fc-panel);
        border-top: 1px solid var(--fc-line);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .fc-tab {
        flex: 1;
        min-height: 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: var(--fc-dim);
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-decoration: none;
    }

    .fc-tab.is-active { color: var(--fc-accent); }
    .fc-tab-glyph { font-size: 16px; line-height: 1; }
}

/* The bottom bar exists only on phones. */
@media (min-width: 700px) {
    .fc-tabbar { display: none; }
}

/* Column stack. Sections in a column need the same gap the main area uses; without
   it they butt together, because .fc-main's gap does not reach into a grid child. */
.fc-stack {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Build Options
 * --------------------------------------------------------------------------- */

.is-hidden { display: none !important; }

.fc-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fc-input {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border-radius: var(--fc-radius-inner);
    border: 1px solid var(--fc-line);
    background: var(--fc-surface);
    color: var(--fc-text);
    font-family: var(--fc-ui);
    font-size: 13px;
}

.fc-input::placeholder { color: var(--fc-faint); }
.fc-input:focus { outline: 2px solid var(--fc-accent); outline-offset: 1px; }

.fc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border-radius: var(--fc-radius-pill);
    border: 1px solid var(--fc-line);
    background: var(--fc-surface);
    color: var(--fc-muted);
    font-size: 12px;
    cursor: pointer;
}

.fc-toggle input { accent-color: var(--fc-accent); }

.fc-ghost {
    padding: 0 14px;
    border-radius: var(--fc-radius-pill);
    border: 1px solid var(--fc-line);
    background: none;
    color: var(--fc-muted);
    font-family: var(--fc-ui);
    font-size: 12px;
    cursor: pointer;
}

.fc-ghost:hover { color: var(--fc-text); border-color: var(--fc-accent); }

.fc-catalogue { display: flex; flex-direction: column; gap: 10px; }

.fc-cat {
    background: var(--fc-panel);
    border: 1px solid var(--fc-line);
    border-left: 3px solid var(--fc-line);
    border-radius: var(--fc-radius);
    overflow: hidden;
}

.fc-cat.is-short { border-left-color: var(--fc-profit); }

.fc-cat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 13px 15px;
    background: none;
    border: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.fc-cat-name {
    font-family: var(--fc-display);
    font-size: 15px;
    color: var(--fc-text);
}

.fc-cat-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.fc-cat-summary {
    font-size: 12px;
    color: var(--fc-muted);
    font-variant-numeric: tabular-nums;
}

.fc-cat.is-short .fc-cat-summary { color: var(--fc-profit); }

.fc-cat-count {
    font-size: 11px;
    color: var(--fc-faint);
    font-variant-numeric: tabular-nums;
    min-width: 1.5em;
    text-align: right;
}

.fc-cat-body { padding: 0 15px 14px; }

/* ---- Badges ---- */

.fc-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: var(--fc-radius-pill);
    border: 1px solid var(--fc-line);
    font-size: 11px;
    white-space: nowrap;
}

.fc-badge.is-built { color: var(--fc-sustain); border-color: var(--fc-sustain); }
.fc-badge.is-short { color: var(--fc-profit); border-color: var(--fc-profit); }
.fc-badge.is-repeat { color: var(--fc-land); border-color: var(--fc-line-soft); }

/* The reason is the point, so it wraps rather than truncating. */
.fc-badge.is-blocked {
    color: var(--fc-dim);
    border-style: dashed;
    white-space: normal;
    text-align: right;
}

.fc-buy {
    padding: 6px 16px;
    border-radius: var(--fc-radius-pill);
    border: 1px solid var(--fc-accent);
    background: var(--fc-accent);
    color: var(--fc-bg);
    font-family: var(--fc-ui);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.fc-buy:hover { filter: brightness(1.1); }

/* ---- Table ---- */

.fc-table-wrap { overflow-x: auto; }

.fc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.fc-table th {
    padding: 8px 10px;
    border-bottom: 1px solid var(--fc-line);
    color: var(--fc-dim);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 400;
    text-align: left;
}

.fc-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--fc-line-soft);
    color: var(--fc-soft);
    vertical-align: middle;
}

.fc-table .fc-right { text-align: right; }
.fc-table td { font-variant-numeric: tabular-nums; }

.fc-opt-row.is-built { background: var(--fc-surface-alt); }
.fc-opt-row.is-blocked { opacity: 0.55; }

/* ---- Cards ---- */

.fc-cards { display: flex; flex-direction: column; gap: 9px; }

.fc-opt-card {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line-soft);
    border-radius: var(--fc-radius-inner);
    padding: 11px 13px;
}

.fc-opt-card.is-built { background: var(--fc-surface-alt); }
.fc-opt-card.is-blocked { opacity: 0.55; }

.fc-opt-title {
    font-size: 14px;
    color: var(--fc-text);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fc-opt-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.fc-opt-note {
    margin: 6px 0 0;
    font-size: 11px;
    color: var(--fc-faint);
}

.fc-opt-action { margin-top: 10px; }

/* The compact stat strip carried in the header of every converted screen except
   My City, which shows the full gauges instead. */
.fc-strip {
    display: flex;
    align-items: baseline;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 10px 13px;
    background: var(--fc-surface);
    border: 1px solid var(--fc-line-soft);
    border-radius: var(--fc-radius-inner);
}

.fc-strip-name {
    font-family: var(--fc-display);
    font-size: 13px;
    color: var(--fc-text);
}

.fc-strip-stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--fc-soft);
}

/* ---------------------------------------------------------------------------
 * Home
 * --------------------------------------------------------------------------- */

.fc-hero {
    height: 330px;
    border-radius: var(--fc-radius);
    border: 1px solid var(--fc-line);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* Anchored to the bottom so the label sits on the darkest part of the scrim
   rather than over whatever the artwork happens to have in its middle. */
.fc-hero-scrim {
    position: absolute;
    inset: auto 0 0 0;
    padding: 14px 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
}

/* The one colour in this file not taken from a token, and deliberately so: the
   scrim underneath is always rgba(0,0,0,0.72) over photography, whatever the theme,
   so the text on it is always white. A theme token here would let a light theme
   make it unreadable. */
.fc-hero-scrim .fc-label { color: #fff; }

.fc-prose {
    color: var(--fc-muted);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 12px;
    max-width: 62ch;
}

.fc-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    align-items: center;
}

.fc-actions .fc-buy,
.fc-actions .fc-ghost {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
}

.fc-destinations {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.fc-destination {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 13px;
    border-radius: var(--fc-radius-inner);
    border: 1px solid var(--fc-line-soft);
    background: var(--fc-surface);
    text-decoration: none;
    min-width: 0;
}

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

.fc-destination-title {
    font-family: var(--fc-display);
    font-size: 14px;
    color: var(--fc-text);
}

.fc-destination-blurb {
    font-size: 11px;
    color: var(--fc-faint);
    line-height: 1.4;
}

.fc-destination .fc-chip { align-self: flex-start; margin-top: 4px; }

/* Still Owed. Amber because it is the one panel asking for something. */
.fc-owed { border-color: var(--fc-profit); }

.fc-owed-list { list-style: none; margin: 0; padding: 0; }

.fc-owed-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--fc-line-soft);
    font-size: 13px;
    color: var(--fc-soft);
}

.fc-owed-list li:last-child { border-bottom: 0; }

.fc-owed-count {
    color: var(--fc-profit);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 12px;
}

.fc-owed-done {
    margin: 0;
    font-size: 13px;
    color: var(--fc-sustain);
}

.fc-owed .fc-buy { text-decoration: none; }

@media (max-width: 1199px) {
    .fc-hero { height: 250px; }
    .fc-destinations { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 699px) {
    .fc-hero { height: 200px; }
    .fc-destinations { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * City Atlas
 * --------------------------------------------------------------------------- */

.fc-lenses { display: flex; gap: 6px; flex-wrap: wrap; }

.fc-lens {
    padding: 5px 12px;
    border-radius: var(--fc-radius-pill);
    border: 1px solid var(--fc-line);
    background: var(--fc-surface);
    color: var(--fc-muted);
    font-family: var(--fc-ui);
    font-size: 12px;
    cursor: pointer;
}

.fc-lens.is-active {
    color: var(--fc-text);
    border-color: var(--fc-accent);
    background: var(--fc-surface-alt);
}

.fc-lens-caveat {
    margin: 0 0 14px;
    font-size: 12px;
    color: var(--fc-faint);
    max-width: 70ch;
}

.fc-chart {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.fc-chart-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

/* Fixed height and flex-shrink disabled. As a plain flex child the plot box is
   compressed by its siblings, which squashes the bars non-linearly and makes
   genuinely different values render at nearly the same height. */
.fc-plot {
    height: 150px;
    flex-shrink: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-bottom: 1px solid var(--fc-line);
}

.fc-bar {
    display: block;
    width: 70%;
    max-width: 46px;
    background: var(--fc-accent);
    border-radius: var(--fc-radius-inner) var(--fc-radius-inner) 0 0;
    transition: height 320ms ease;
}

.fc-chart-value {
    font-family: var(--fc-display);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--fc-text);
}

.fc-chart-label {
    font-size: 11px;
    color: var(--fc-faint);
    text-align: center;
    overflow-wrap: anywhere;
}

.fc-sort {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    gap: 4px;
}

.fc-sort:hover { color: var(--fc-text); }
.fc-sort.is-active { color: var(--fc-accent); }

.fc-delta {
    font-size: 10px;
    color: var(--fc-faint);
    margin-left: 4px;
}

@media (max-width: 699px) {
    .fc-plot { height: 110px; }
    .fc-chart { gap: 6px; }
}

/* ---------------------------------------------------------------------------
 * Land Regions
 * --------------------------------------------------------------------------- */

.fc-regions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.fc-region {
    background: var(--fc-panel);
    border: 1px solid var(--fc-line);
    border-radius: var(--fc-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.fc-region.is-settled { border-color: var(--fc-sustain); }

/* Deliberately a crop. The artwork is between 1.44:1 and 1.73:1 and this is 2.5:1,
   so a third of every region is cut away — which is the right trade for a card whose
   job is to be scanned against six others. Seven uncropped images make a page you
   scroll instead of compare. The lightbox is where the whole picture lives. */
.fc-region-art {
    display: block;
    height: 150px;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--fc-line-soft);
    position: relative;
}

.fc-zoom-hint {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 3px 9px;
    border-radius: var(--fc-radius-pill);
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 120ms ease;
}

/* Shown on hover for a mouse, always for a touch screen — there is no hover to
   discover it with, and an affordance nobody can find is not one. */
.fc-region-art:hover .fc-zoom-hint,
.fc-region-art:focus-visible .fc-zoom-hint { opacity: 1; }

@media (hover: none) {
    .fc-zoom-hint { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .fc-zoom-hint { transition: none; }
}

.fc-region-body { padding: 13px 15px 15px; }

.fc-region-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.fc-region-name {
    font-family: var(--fc-display);
    font-size: 16px;
    color: var(--fc-text);
    margin: 0;
}

.fc-region-verdict {
    font-size: 12px;
    line-height: 1.5;
    color: var(--fc-muted);
    margin: 0 0 12px;
}

.fc-region-stat {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
}

.fc-region-value {
    font-family: var(--fc-display);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--fc-text);
    text-align: right;
}

/* Full width, so a short bar reads as short rather than as a missing one. */
.fc-region-track {
    grid-column: 1 / -1;
    height: 4px;
    border-radius: var(--fc-radius-pill);
    background: var(--fc-surface-alt);
    border: 1px solid var(--fc-line-soft);
    overflow: hidden;
}

.fc-region-fill { display: block; height: 100%; }
.fc-region-fill.is-cash { background: var(--fc-cash); }
.fc-region-fill.is-land { background: var(--fc-land); }
.fc-region-fill.is-profit { background: var(--fc-profit); }
.fc-region-fill.is-sustain { background: var(--fc-sustain); }

.fc-region-features {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.fc-table tr.is-built { background: var(--fc-surface-alt); }

/* ---------------------------------------------------------------------------
 * Bonuses
 * --------------------------------------------------------------------------- */

.fc-effects { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }

.fc-prizes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.fc-prize { margin: 0; }

.fc-prize-art {
    display: block;      /* an <a> now, and inline would collapse the height to 0 */
    position: relative;
    height: 130px;
    border-radius: var(--fc-radius-inner);
    border: 1px solid var(--fc-line-soft);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--fc-surface-alt);
}

/* An award whose trophy has not been drawn. Dashed rather than blank, so it reads
   as pending rather than as a failed image. */
.fc-prize-art.is-pending { border-style: dashed; }

.fc-prize figcaption {
    margin-top: 7px;
    font-size: 11px;
    color: var(--fc-muted);
    line-height: 1.4;
}

.fc-prize.is-ours .fc-prize-art { border-color: var(--fc-sustain); }

.fc-form { display: flex; flex-direction: column; gap: 13px; }

.fc-field { display: flex; flex-direction: column; gap: 5px; }

.fc-money { position: relative; display: flex; align-items: center; }

.fc-money-sign {
    position: absolute;
    left: 11px;
    color: var(--fc-cash);
    font-size: 13px;
    pointer-events: none;
}

.fc-money .fc-input { padding-left: 24px; }

.fc-stepper { display: flex; align-items: stretch; gap: 6px; }

.fc-step {
    width: 44px;
    border-radius: var(--fc-radius-inner);
    border: 1px solid var(--fc-line);
    background: var(--fc-surface);
    color: var(--fc-text);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

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

.fc-stepper-value { text-align: center; min-width: 0; }

.fc-preview {
    padding: 11px 13px;
    border-radius: var(--fc-radius-inner);
    border: 1px solid var(--fc-line-soft);
    background: var(--fc-surface-alt);
}

.fc-preview-table {
    width: 100%;
    margin-top: 7px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    border-collapse: collapse;
}

.fc-preview-table td { padding: 3px 0; color: var(--fc-muted); }
.fc-preview-table td:first-child { color: var(--fc-dim); }

/* ---------------------------------------------------------------------------
 * Game Rules
 * --------------------------------------------------------------------------- */

.fc-rules {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.fc-rule { display: flex; gap: 10px; align-items: flex-start; }

.fc-rule-number {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--fc-radius-pill);
    border: 1px solid var(--fc-line);
    background: var(--fc-surface-alt);
    color: var(--fc-accent);
    font-family: var(--fc-display);
    font-size: 11px;
}

.fc-rule-title {
    font-size: 13px;
    color: var(--fc-text);
    margin: 0 0 3px;
    font-weight: 600;
}

.fc-rule-body {
    font-size: 12px;
    line-height: 1.5;
    color: var(--fc-muted);
    margin: 0;
}

.fc-equation {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-radius: var(--fc-radius-inner);
    background: var(--fc-surface-alt);
    border: 1px solid var(--fc-line-soft);
    font-family: var(--fc-display);
    font-size: 17px;
}

.fc-eq { color: var(--fc-dim); }

.fc-roles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

.fc-role {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line-soft);
    border-radius: var(--fc-radius-inner);
    overflow: hidden;
}

/* contain, not cover. cover crops the heads off the portraits. */
.fc-role-art {
    display: block;      /* an <a> now, and inline would collapse the height to 0 */
    position: relative;
    height: 170px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--fc-surface-alt);
}

.fc-role-body { padding: 11px 13px 13px; }

.fc-role-name {
    font-family: var(--fc-display);
    font-size: 14px;
    color: var(--fc-text);
    margin: 0 0 5px;
}

.fc-role-duty {
    font-size: 12px;
    line-height: 1.5;
    color: var(--fc-muted);
    margin: 0 0 6px;
}

.fc-role-cue {
    font-size: 11px;
    line-height: 1.45;
    color: var(--fc-accent);
    margin: 0;
}

@media (max-width: 1199px) {
    .fc-rules { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 699px) {
    .fc-rules { grid-template-columns: 1fr; }
    .fc-equation { font-size: 14px; }
    /* A 64px thumbnail in a row, rather than a tall portrait per card. */
    .fc-roles { grid-template-columns: 1fr; }
    .fc-role { display: flex; align-items: flex-start; }
    .fc-role-art { width: 64px; height: 64px; flex-shrink: 0; margin: 11px 0 0 11px; }
}

/* ---------------------------------------------------------------------------
 * City Story
 * --------------------------------------------------------------------------- */

.fc-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
}

.fc-field-row { display: flex; gap: 12px; }
.fc-field-row .fc-field { flex: 1; min-width: 0; }

textarea.fc-input { resize: vertical; line-height: 1.55; }

.fc-entries { display: flex; flex-direction: column; gap: 10px; }

.fc-entry {
    padding: 11px 13px;
    border-radius: var(--fc-radius-inner);
    border: 1px solid var(--fc-line-soft);
    background: var(--fc-surface);
}

.fc-entry-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.fc-entry-date {
    font-family: var(--fc-display);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--fc-text);
}

.fc-entry-sig { font-size: 11px; color: var(--fc-accent); }

.fc-entry-body {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--fc-soft);
    white-space: pre-wrap;
}

.fc-log { display: flex; flex-direction: column; gap: 16px; }

.fc-log-date {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fc-dim);
    padding-bottom: 5px;
    border-bottom: 1px solid var(--fc-line-soft);
    margin-bottom: 8px;
}

.fc-log-items { list-style: none; margin: 0; padding: 0; }

.fc-log-item {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 5px 0;
    font-size: 12px;
    color: var(--fc-muted);
}

/* A colour per kind of action, so a term's log can be skimmed for shape rather
   than read line by line. */
.fc-log-marker {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: var(--fc-radius-pill);
    background: var(--fc-dim);
}

.fc-log-item.is-purchase .fc-log-marker { background: var(--fc-cash); }
.fc-log-item.is-bonus .fc-log-marker { background: var(--fc-sustain); }
.fc-log-item.is-remove .fc-log-marker,
.fc-log-item.is-reset .fc-log-marker { background: var(--fc-profit); }
.fc-log-item.is-founded .fc-log-marker { background: var(--fc-land); }

.fc-log-text { line-height: 1.5; }

@media (max-width: 1199px) {
    .fc-story { grid-template-columns: 1fr; }
    /* One stream at a time, chosen by the tabs. */
    .fc-stream.is-hidden-small { display: none; }
}

@media (min-width: 1200px) {
    /* Both columns always, so the tab state cannot hide one on a wide screen. */
    .fc-stream.is-hidden-small { display: flex; }
}

@media (max-width: 699px) {
    .fc-field-row { flex-direction: column; }
}

/* The theme picker in the header. Small, because it is a preference and not a
   destination — it simply has to be reachable from wherever a team is looking. */
.fc-theme-picker { display: inline-flex; }

.fc-theme-select {
    padding: 0 10px;
    height: 34px;
    border-radius: var(--fc-radius-pill);
    border: 1px solid var(--fc-line);
    background: var(--fc-surface);
    color: var(--fc-muted);
    font-family: var(--fc-ui);
    font-size: 12px;
    cursor: pointer;
    max-width: 150px;
}

.fc-theme-select:hover { color: var(--fc-text); border-color: var(--fc-accent); }

/* Home only. --fc-h1-home is the same scale rule as --fc-h1 with a larger base, so
   Atomic Age's 0.6 display scale still applies to it. */
.fc-h1-big { font-size: var(--fc-h1-home); }

/* ---- Every city in its own theme ---------------------------------------------
   Each card carries data-theme, so the tokens inside it are that city's rather
   than the reader's. Everything below reads tokens only — a card that named a
   colour directly would look identical in all seven themes and defeat the point. */

.fc-city-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}

.fc-city-card {
    background: var(--fc-panel);
    border: 1px solid var(--fc-line);
    border-radius: var(--fc-radius);
    padding: 13px 15px 14px;
    color: var(--fc-text);
    font-family: var(--fc-ui);
    min-width: 0;
}

.fc-city-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 9px;
}

.fc-city-card-name {
    font-family: var(--fc-display);
    font-size: 15px;
    color: var(--fc-text);
    margin: 0;
    overflow-wrap: anywhere;
}

.fc-city-card-stats {
    display: flex;
    gap: 11px;
    flex-wrap: wrap;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.fc-city-card-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--fc-line-soft);
    font-size: 11px;
    color: var(--fc-muted);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * City Info
 * --------------------------------------------------------------------------- */

.fc-role-picks { display: flex; flex-direction: column; gap: 10px; }

.fc-role-pick {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--fc-radius-inner);
    border: 1px solid var(--fc-line-soft);
    background: var(--fc-surface);
}

/* contain, not cover: cover crops the heads off the portraits. */
.fc-role-pick-art {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: var(--fc-radius-inner);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--fc-surface-alt);
}

.fc-role-pick-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.fc-region-settled {
    margin: 0 0 6px;
    font-family: var(--fc-display);
    font-size: 17px;
    color: var(--fc-text);
}

/* The only irreversible decision in the game, so it is the one warning on the page
   that is allowed to be loud. */
.fc-region-warning {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: var(--fc-radius-inner);
    border: 1px solid var(--fc-profit);
    background: var(--fc-surface-alt);
    color: var(--fc-soft);
    font-size: 12px;
    line-height: 1.5;
}

.fc-region-warning a, .fc-opt-note a, .fc-empty a { color: var(--fc-accent); }

.fc-danger { margin-top: 8px; text-align: right; }
.fc-danger .fc-ghost { color: var(--fc-profit); border-color: var(--fc-profit); }

.fc-buy.w-100 { width: 100%; justify-content: center; }

/* ---------------------------------------------------------------------------
 * The custom theme builder
 * --------------------------------------------------------------------------- */

.fc-builder { display: flex; flex-direction: column; gap: 15px; }

.fc-swatches { display: flex; gap: 8px; flex-wrap: wrap; }

.fc-swatch {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-radius: var(--fc-radius-inner);
    border: 1px solid var(--fc-line-soft);
    background: var(--fc-surface);
    cursor: pointer;
}

/* The radio itself is hidden but focusable, so the swatch stays keyboard-reachable
   rather than becoming a div that only a mouse can use. */
.fc-swatch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.fc-swatch:has(input:checked) {
    border-color: var(--fc-accent);
    background: var(--fc-surface-alt);
}

.fc-swatch:has(input:focus-visible) { outline: 2px solid var(--fc-accent); }

/* Each ground chip paints itself from the ground it names, so the swatch is a
   sample rather than a label. */
.fc-swatch-chip {
    width: 30px;
    height: 22px;
    border-radius: var(--fc-radius-inner);
    border: 1px solid var(--fc-line);
    background: var(--fc-panel);
    display: block;
}

.fc-swatch-name { font-size: 10px; color: var(--fc-muted); }

.fc-face-sample {
    font-family: var(--fc-display);
    font-size: 13px;
    color: var(--fc-text);
    padding: 2px 4px;
}

/* Pixel runs enormous for its point size, so its sample is set smaller here too. */
.fc-face-sample[data-face="pixel"] { font-size: 8px; }

.fc-corner-sample {
    width: 30px;
    height: 22px;
    display: block;
    border: 1px solid var(--fc-line);
    background: var(--fc-surface-alt);
    border-radius: var(--fc-radius);
}

/* Press Start 2P is roughly twice as wide per character as the other faces, so a
   treasury figure set in it wraps onto two lines in a gauge. The display-scale
   token handles headings; the big numerals need their own step down. */
[data-face="pixel"] .fc-gauge-value,
[data-theme="atomic-age"] .fc-gauge-value { font-size: 15px; }

[data-face="pixel"] .fc-entry-date,
[data-theme="atomic-age"] .fc-entry-date { font-size: 10px; }

/* The class build lock. Loud enough to notice, calm enough not to read as an
   error — nothing has gone wrong, a teacher has paused the class. */
.fc-locked-banner {
    padding: 12px 15px;
    border-radius: var(--fc-radius-inner);
    border: 1px solid var(--fc-profit);
    background: var(--fc-surface-alt);
    color: var(--fc-soft);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.fc-badge.is-locked { color: var(--fc-profit); border-color: var(--fc-profit); }

.fc-buy:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------------------------------------------------------------------------
 * Admin
 *
 * Amber throughout, so a teacher's view is never mistaken for a student's —
 * least of all on a projector at the front of a classroom.
 * --------------------------------------------------------------------------- */

.fc-admin { display: flex; flex-direction: column; gap: 22px; }

.fc-admin-title { color: var(--fc-profit); }

.fc-admin .fc-section { border-color: var(--fc-profit); }
.fc-admin .fc-section-title { color: var(--fc-profit); }
.fc-admin .fc-lens.is-active { border-color: var(--fc-profit); color: var(--fc-profit); }

/* A teacher's own classes are marked, not privileged: the filter starts on them
   and every other class is one click away. */
.fc-admin .fc-lens.is-own { border-left: 3px solid var(--fc-profit); }

.fc-locks { display: flex; flex-direction: column; gap: 8px; }

.fc-lock {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 9px 12px;
    border-radius: var(--fc-radius-inner);
    border: 1px solid var(--fc-line-soft);
    background: var(--fc-surface);
}

.fc-lock.is-locked { border-color: var(--fc-profit); }

.fc-lock-name {
    font-family: var(--fc-display);
    font-size: 14px;
    color: var(--fc-text);
    min-width: 3.5em;
}

.fc-lock-state { font-size: 12px; color: var(--fc-muted); }
.fc-lock.is-locked .fc-lock-state { color: var(--fc-profit); }

.fc-flag {
    display: inline-block;
    padding: 2px 8px;
    margin: 1px 3px 1px 0;
    border-radius: var(--fc-radius-pill);
    border: 1px solid var(--fc-line);
    font-size: 10px;
    white-space: nowrap;
    color: var(--fc-muted);
}

.fc-flag.is-behind, .fc-flag.is-poor, .fc-flag.is-cramped {
    color: var(--fc-profit);
    border-color: var(--fc-profit);
}

.fc-flag.is-done { color: var(--fc-sustain); border-color: var(--fc-sustain); }
.fc-flag.is-quiet { color: var(--fc-dim); border-style: dashed; }

.fc-class-select { padding: 2px 6px; font-size: 11px; min-width: 5em; }

.fc-city-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.fc-city-links .fc-ghost { text-decoration: none; padding: 5px 12px; }

/* Desktop and tablet only, deliberately. Nobody runs a class from a phone, and the
   tables here do not survive 390px. */
@media (max-width: 699px) {
    .fc-admin::before {
        content: "The teacher view needs a wider screen.";
        display: block;
        padding: 14px;
        border-radius: var(--fc-radius-inner);
        border: 1px solid var(--fc-profit);
        color: var(--fc-profit);
        font-size: 13px;
    }
    .fc-admin .fc-table-wrap { overflow-x: auto; }
}

/* The team under the city name on the dashboard, so a teacher can put names to a
   city without opening it. */
.fc-roster-inline {
    display: block;
    font-size: 10px;
    color: var(--fc-faint);
    margin-top: 2px;
}

/* ---------------------------------------------------------------------------
 * Signing in, registering, and the apology page
 *
 * Not in the design handoff, which describes the ten screens of the game itself.
 * They are the first thing a student ever sees, so they use the same shell.
 * --------------------------------------------------------------------------- */

.fc-narrow {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.fc-apology { text-align: center; }

.fc-apology-mark {
    font-size: 40px;
    line-height: 1;
    margin: 4px 0 12px;
    color: var(--fc-profit);
}

.fc-apology-message {
    font-family: var(--fc-display);
    font-size: 17px;
    color: var(--fc-text);
    margin: 0 0 6px;
}

.fc-apology .fc-actions { justify-content: center; }

/* Destructive controls on the teacher's pages: removing a building, withdrawing a
   commendation, resetting a city. Outlined rather than filled — they are ordinary
   corrections, not alarms, but they should never be the easiest thing to click. */
.fc-danger-button {
    color: var(--fc-profit);
    border-color: var(--fc-profit);
}

.fc-danger-button:hover { color: var(--fc-text); }

/* ---------------------------------------------------------------------------
 * Found your city
 *
 * One page, three steps. A team does this together round one screen and moves
 * back and forth; naming the city after seeing the regions is normal.
 * --------------------------------------------------------------------------- */

.fc-found { display: flex; flex-direction: column; gap: 22px; }

.fc-steps {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fc-steps li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: var(--fc-radius-pill);
    border: 1px solid var(--fc-line);
    background: var(--fc-surface);
    color: var(--fc-muted);
    font-size: 12px;
}

/* Filled when the step's decision has actually been made, never when it has
   merely been scrolled past. */
.fc-step-mark {
    width: 9px;
    height: 9px;
    border-radius: var(--fc-radius-pill);
    border: 1px solid var(--fc-dim);
    flex-shrink: 0;
}

.fc-steps li.is-done { color: var(--fc-text); border-color: var(--fc-sustain); }
.fc-steps li.is-done .fc-step-mark {
    background: var(--fc-sustain);
    border-color: var(--fc-sustain);
}

/* The one warning on the page allowed to be loud. */
.fc-permanent {
    margin: 0 0 16px;
    padding: 12px 15px;
    border-radius: var(--fc-radius-inner);
    border: 1px solid var(--fc-profit);
    background: var(--fc-surface-alt);
    color: var(--fc-soft);
    font-size: 13px;
    line-height: 1.5;
}

.fc-permanent b { color: var(--fc-profit); }

.fc-region-rows { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }

.fc-region-row {
    display: flex;
    gap: 13px;
    padding: 12px 14px;
    border-radius: var(--fc-radius-inner);
    border: 1px solid var(--fc-line-soft);
    background: var(--fc-surface);
    cursor: pointer;
}

.fc-region-row:hover { border-color: var(--fc-accent); }
.fc-region-row.is-chosen { border-color: var(--fc-sustain); background: var(--fc-surface-alt); }

/* Hidden but focusable: the row stays reachable by keyboard rather than becoming
   a div only a mouse can use. That intent is kept exactly — what changes is the size.

   One pixel, not zero. A zero-size control gives the browser no box to point a
   validation message at, so `required` on these radios reported nothing, the submit
   was abandoned in silence, and the largest, most tappable thing on the page did
   absolutely nothing at the moment twenty-five teams needed to get past it. A 1px
   box is exactly as invisible and can still be pointed at, so the native message
   works again on the one path the page's own script cannot cover: no JavaScript.

   The row becomes the positioning context so that box sits on the row it belongs to
   rather than wherever the nearest positioned ancestor happens to be. */
.fc-region-row { position: relative; }
.fc-region-row input[type=radio] {
    position: absolute;
    top: 12px;
    left: 12px;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
}
.fc-region-row:has(input:focus-visible) { outline: 2px solid var(--fc-accent); }

/* The page's own message, and the one students actually see. It does not depend on
   the browser agreeing to draw a bubble, it cannot be drawn off-screen, and it is
   still on the page after a bubble would have faded. role="alert" in the markup is
   what a screen reader announces. --fc-profit is the colour this page already warns
   in, four elements above, in .fc-permanent. */
.fc-region-error {
    display: flex;
    gap: 9px;
    align-items: baseline;
    margin-top: 14px;
    padding: 11px 14px;
    border-radius: var(--fc-radius-inner);
    /* Not colour alone. The mark, the border and the wording each carry it without
       the others, so it reads the same to a student who cannot separate the two. */
    border: 2px solid var(--fc-profit);
    background: var(--fc-surface-alt);
    color: var(--fc-soft);
    font-size: 14px;
    line-height: 1.5;
}

.fc-region-error-mark {
    font-family: var(--fc-display);
    font-size: 16px;
    line-height: 1.3;
    color: var(--fc-profit);
    flex-shrink: 0;
}

/* While the message stands, the choices it is about are outlined too, so the eye is
   led from one to the other instead of hunting the page. Cleared the moment a region
   is chosen. */
.fc-region-rows.is-invalid {
    outline: 2px solid var(--fc-profit);
    outline-offset: 6px;
    border-radius: var(--fc-radius-inner);
}

.fc-region-row-art {
    width: 78px;
    flex-shrink: 0;
    align-self: stretch;
    min-height: 78px;
    border-radius: var(--fc-radius-inner);
    background-size: cover;
    background-position: center;
    background-color: var(--fc-surface-alt);
}

.fc-region-row-body { flex: 1; min-width: 0; display: block; }

.fc-region-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.fc-region-row-name {
    font-family: var(--fc-display);
    font-size: 15px;
    color: var(--fc-text);
}

.fc-region-row-verdict {
    display: block;
    font-size: 12px;
    line-height: 1.5;
    color: var(--fc-muted);
    margin-bottom: 9px;
}

.fc-region-row-bars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.fc-mini { display: block; min-width: 0; }

.fc-mini-value {
    display: block;
    font-family: var(--fc-display);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--fc-text);
    margin: 1px 0 3px;
}

.fc-mini-track {
    display: block;
    height: 3px;
    border-radius: var(--fc-radius-pill);
    background: var(--fc-surface-alt);
    overflow: hidden;
}

.fc-mini-fill { display: block; height: 100%; }
.fc-mini-fill.is-cash { background: var(--fc-cash); }
.fc-mini-fill.is-land { background: var(--fc-land); }
.fc-mini-fill.is-profit { background: var(--fc-profit); }
.fc-mini-fill.is-sustain { background: var(--fc-sustain); }

/* ---- What a region opens and closes ---- */

.fc-consequences {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--fc-line);
}

.fc-consequence-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 4px;
}

.fc-conseq-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.fc-conseq-list li {
    font-size: 12px;
    line-height: 1.4;
    color: var(--fc-soft);
    padding-left: 12px;
    position: relative;
}

.fc-conseq-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5em;
    width: 5px;
    height: 5px;
    border-radius: var(--fc-radius-pill);
}

.fc-conseq-list.is-exclusive li::before { background: var(--fc-sustain); }
.fc-conseq-list.is-open li::before { background: var(--fc-land); }

/* Struck through, because it is gone rather than merely unavailable. */
.fc-conseq-list.is-closed li {
    color: var(--fc-faint);
    text-decoration: line-through;
    text-decoration-color: var(--fc-dim);
}

.fc-conseq-list.is-closed li::before { background: var(--fc-dim); }

.fc-shared {
    display: block;
    font-size: 10.5px;
    color: var(--fc-faint);
}

.fc-commit { position: sticky; bottom: 0; z-index: 5; }
.fc-commit .fc-opt-note { margin: 0 0 10px; text-align: center; }

@media (max-width: 1199px) {
    .fc-consequence-cols { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 699px) {
    .fc-region-row { flex-direction: column; }
    .fc-region-row-art { width: 100%; min-height: 110px; }
    .fc-region-row-bars { grid-template-columns: repeat(2, 1fr); }
    .fc-commit { position: static; }
}

/* ---------------------------------------------------------------------------
 * Registering
 *
 * Split layout: the form on one side, artwork and what-happens-next on the other.
 * Below desktop the artwork drops behind the form rather than above it — a team
 * signing up on a phone wants the fields first.
 * --------------------------------------------------------------------------- */

.fc-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.fc-split-art {
    position: relative;
    min-height: 460px;
    height: 100%;
    border-radius: var(--fc-radius);
    border: 1px solid var(--fc-line);
    background-image: url('/static/coverPage.webp');
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

/* The scrim is always dark over photography whatever the theme, so the text on it
   is always light — a theme token here would let a light theme make it unreadable. */
.fc-split-scrim {
    width: 100%;
    padding: 26px 24px 24px;
    background: linear-gradient(to top, rgba(0, 0, 0, .88) 20%, rgba(0, 0, 0, 0));
    color: #fff;
}

.fc-next-title {
    font-family: var(--fc-display);
    font-size: 17px;
    margin: 0 0 12px;
    color: #fff;
}

.fc-next-steps {
    margin: 0;
    padding-left: 1.1em;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
}

.fc-next-steps b { color: #fff; }

.fc-next-note {
    margin: 14px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
}

/* ---- class pills ---- */

.fc-pills { display: flex; gap: 7px; flex-wrap: wrap; }

.fc-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 7px 14px;
    border-radius: var(--fc-radius-pill);
    border: 1px solid var(--fc-line);
    background: var(--fc-surface);
    color: var(--fc-muted);
    font-size: 13px;
    cursor: pointer;
}

/* Hidden but focusable, so a pill stays reachable by keyboard. */
.fc-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.fc-pill:has(input:checked) {
    border-color: var(--fc-accent);
    background: var(--fc-surface-alt);
    color: var(--fc-text);
}
.fc-pill:has(input:focus-visible) { outline: 2px solid var(--fc-accent); }

/* ---- live validation ---- */

.fc-check {
    display: block;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--fc-faint);
    min-height: 1.4em;
}

.fc-check[data-state="ok"] { color: var(--fc-sustain); }
.fc-check[data-state="no"] { color: var(--fc-profit); }

.fc-strength { display: flex; gap: 4px; margin: 6px 0 4px; }

.fc-strength-bar {
    flex: 1;
    height: 3px;
    border-radius: var(--fc-radius-pill);
    background: var(--fc-surface-alt);
    border: 1px solid var(--fc-line-soft);
}

.fc-strength-bar[data-on="yes"] {
    background: var(--fc-sustain);
    border-color: var(--fc-sustain);
}

@media (max-width: 1199px) {
    .fc-split { grid-template-columns: 1fr; }
    /* Fields first on a narrow screen; the artwork is context, not the task. */
    .fc-split-aside { order: 2; }
    .fc-split-art { min-height: 260px; }
}

/* ---------------------------------------------------------------------------
 * The Team menu
 *
 * Where the phone tab bar's fourth tab goes. Rows rather than a grid: a menu is
 * read down, and a thumb reaches a full-width row more easily than a tile.
 * --------------------------------------------------------------------------- */

.fc-menu { display: flex; flex-direction: column; gap: 16px; }

.fc-menu-list { list-style: none; margin: 0; padding: 0; }

.fc-menu-link {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "label arrow" "blurb arrow";
    align-items: center;
    gap: 0 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--fc-line-soft);
    text-decoration: none;
    min-height: 56px;
}

.fc-menu-list li:last-child .fc-menu-link { border-bottom: 0; }

.fc-menu-link:hover .fc-menu-label,
.fc-menu-link:focus-visible .fc-menu-label { color: var(--fc-accent); }

.fc-menu-label {
    grid-area: label;
    font-family: var(--fc-display);
    font-size: 15px;
    color: var(--fc-text);
}

.fc-menu-blurb {
    grid-area: blurb;
    font-size: 12px;
    line-height: 1.4;
    color: var(--fc-faint);
    margin-top: 2px;
}

.fc-menu-arrow {
    grid-area: arrow;
    font-size: 20px;
    color: var(--fc-dim);
}

.fc-menu-admin { border-color: var(--fc-profit); }
.fc-menu-admin .fc-section-title { color: var(--fc-profit); }

/* On a wide screen the row navigation already carries every one of these, so the
   menu is a redundant index rather than the only way through. Narrow it so it does
   not read as a page in its own right. */
@media (min-width: 700px) {
    .fc-menu { max-width: 560px; }
}

/* ---- Catalogue release ------------------------------------------------------
   The summary strip. Amber only when something is actually hidden — a permanent
   amber panel stops meaning anything. */

.fc-hidden-now { border-color: var(--fc-profit); }

.fc-hidden-list { list-style: none; margin: 0; padding: 0; }

.fc-hidden-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 9px 0;
    border-bottom: 1px solid var(--fc-line-soft);
}

.fc-hidden-list li:last-child { border-bottom: 0; }

.fc-hidden-name {
    font-size: 14px;
    color: var(--fc-text);
    font-weight: 600;
}

.fc-hidden-where {
    font-size: 11px;
    color: var(--fc-faint);
    margin-right: auto;
}

/* Undo, offered beside the purchase message rather than on the row — a bought row
   may have moved out of view behind a filter, and the undo has to be findable. */
.fc-undo {
    margin-left: 12px;
    padding: 2px 12px;
    font-size: 12px;
    vertical-align: 1px;
}


/* A password being handed over out loud. Large, spaced and monospaced because it is
   read across a room and typed on five devices; selectable because the teacher may
   want to paste it into a chat instead. Its own line — inside a sentence it gets
   skimmed past, and this is the one thing on the page that cannot be recovered if
   it is missed. */
.fc-flash-credential {
    background: var(--fc-panel);
    border: 2px solid var(--fc-accent);
    color: var(--fc-text);
}

.fc-credential {
    display: block;
    margin: 0.5rem 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--fc-accent);
    user-select: all;
}

.fc-credential-note {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: var(--fc-faint);
}

.fc-inline-form { display: inline-block; }

.fc-subhead {
    margin: 1.5rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fc-dim);
}

/* --fc-dim is a colour token, not a class. The markup was reaching for a class of
   this name that had never existed, so the text simply inherited. */
.fc-dim { color: var(--fc-dim); }


/* Admin city summary. Replaces the Bootstrap .card that painted itself white under
   the theme's own near-white text. */
.fc-admin-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 14px;
    font-size: 15px;
    color: var(--fc-text);
}

/* Label/value pairs. Grid rather than a float row so a long value wraps under its
   own column instead of under the label. */
.fc-facts {
    display: grid;
    grid-template-columns: minmax(9rem, max-content) 1fr;
    gap: 4px 14px;
    margin: 0;
    font-size: 13px;
}

.fc-facts dt { color: var(--fc-dim); font-weight: 400; }
.fc-facts dd { color: var(--fc-text); margin: 0; }

@media (max-width: 480px) {
    /* One column on a phone: 9rem of label leaves nothing for the value. */
    .fc-facts { grid-template-columns: 1fr; gap: 0 0; }
    .fc-facts dd { margin-bottom: 8px; }
}

.fc-entry {
    background: var(--fc-surface-alt);
    border: 1px solid var(--fc-line);
    border-radius: var(--fc-radius);
    padding: 10px 12px;
    margin-bottom: 8px;
}

.fc-entry-body { margin: 2px 0 0; white-space: pre-wrap; }


/* The teacher's build log: one line per action, time on the right. Bootstrap's
   list-group painted its own background and borders, which is exactly the kind of
   self-painting the themes cannot reach. */
.fc-log { list-style: none; margin: 0; padding: 0; font-size: 13px; }

.fc-log li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    border-bottom: 1px solid var(--fc-line-soft);
}

.fc-log li:last-child { border-bottom: 0; }


/* The region lightbox. <dialog> brings the backdrop, Escape, the focus trap and
   focus restoration; this only has to say what it looks like. */
.fc-zoom {
    /* Width is set per image by the script, from that image's own pixel width. The
       artwork here is small — role portraits are about 205px across in the original
       files, not just in the WebP — and stretching one to fill a desktop only turns
       a small picture into a blurry big one. A crisp panel reads as deliberate. */
    /* max-content wraps the panel to the image, whose width the script sets in
       pixels. A percentage width on the image instead would be circular — the
       container asking the child how wide it is, the child answering "all of you" —
       and resolves to nothing. min-width keeps the text under a narrow portrait
       readable rather than a 200px column. */
    width: max-content;
    min-width: min(92vw, 340px);
    max-width: min(92vw, 760px);
    max-height: 90vh;
    padding: 0;
    border: 1px solid var(--fc-line);
    border-radius: var(--fc-radius);
    background: var(--fc-panel);
    color: var(--fc-text);
    overflow: auto;
    position: relative;
}

.fc-zoom::backdrop {
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(2px);
}

.fc-zoom-art {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    border-bottom: 1px solid var(--fc-line-soft);
}

.fc-zoom-body { padding: 14px 16px 18px; }

/* The card's own bars and chips are cloned in, so they need no styles of their own —
   but the heading inside the dialog should not repeat the card's tighter spacing. */
.fc-zoom-body .fc-region-head { margin-bottom: 6px; }

.fc-zoom-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.fc-zoom-close:hover { background: rgba(0, 0, 0, 0.78); }

@media (prefers-reduced-motion: no-preference) {
    .fc-zoom[open] { animation: fc-zoom-in 140ms ease-out; }
    @keyframes fc-zoom-in {
        from { opacity: 0; transform: translateY(6px) scale(0.98); }
        to   { opacity: 1; transform: none; }
    }
}


/* A two-state setting shown as two pills, the current one lit. Replaces a button
   labelled with the action sitting beside text labelled with the state — which read
   as two competing labels rather than one setting. */
.fc-toggle {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    border: 1px solid var(--fc-line);
    border-radius: var(--fc-radius-pill);
    background: var(--fc-surface-alt);
}

.fc-toggle-option {
    padding: 5px 13px;
    border: 0;
    border-radius: var(--fc-radius-pill);
    background: transparent;
    color: var(--fc-dim);
    font-family: var(--fc-ui);
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

.fc-toggle-option:hover { color: var(--fc-text); }

/* Lit by weight and ground as well as colour, so which one is on does not depend on
   telling two hues apart. */
.fc-toggle-option.is-on {
    background: var(--fc-panel);
    color: var(--fc-text);
    font-weight: 700;
    box-shadow: var(--fc-shadow);
    cursor: default;
}

/* View only is the state that stops a class working, so it says so when it is the
   one in force. */
.fc-lock.is-locked .fc-toggle-option.is-on { color: var(--fc-profit); }

@media (prefers-reduced-motion: no-preference) {
    .fc-toggle-option { transition: background 120ms ease, color 120ms ease; }
}


/* A region another group in this class already settled. Neutral rather than alarming:
   it is information for a conversation, not a refusal — nothing here is blocked. */
.fc-badge.is-taken {
    color: var(--fc-dim);
    border-color: var(--fc-line);
}


/* Undo, standing where the Purchase button stood. Same size and position so the row
   does not reflow when it swaps — a row that jumps as you buy makes the next click
   land somewhere you did not aim. Quieter than Purchase, because taking something
   back should not compete with buying the next thing. */
.fc-undo-buy {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 7px 15px;
    border: 1px solid var(--fc-accent);
    border-radius: var(--fc-radius-pill);
    background: transparent;
    color: var(--fc-accent);
    font-family: var(--fc-ui);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.fc-undo-buy:hover { background: var(--fc-panel); }
.fc-undo-buy[disabled] { opacity: 0.5; cursor: default; }

/* The clock is the reason the button is there and not a Built badge, so it is legible
   rather than decorative — but lighter than the word, which is what gets clicked. */
.fc-undo-clock {
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    font-size: 12px;
    color: var(--fc-dim);
}


/* ---- The settled region band ------------------------------------------------
   A full-bleed strip under the navigation carrying the region's artwork. From the
   design handoff. Runs edge to edge, so it sits outside .fc-shell and lays its own
   shell inside for the text. */
.fc-band {
    position: relative;
    height: 190px;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--fc-line);
}

/* A gradient over the bottom rather than a filter on the whole image: the text sits
   in the bottom third, and darkening the entire picture to make two lines readable
   throws away the picture.
   
   --fc-bg rather than a scrim colour of its own: every theme and every ground already
   redefines it, so the band fades into whatever the page ground is, and the text
   tokens are the ones already chosen to sit on that ground. A light theme gets a light
   scrim and its dark text, with no second palette to keep in step. */
.fc-band-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
                var(--fc-bg) 0%,
                color-mix(in srgb, var(--fc-bg) 55%, transparent) 45%,
                color-mix(in srgb, var(--fc-bg) 8%, transparent) 100%);
}

.fc-band-inner {
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
}

.fc-band-where { display: flex; flex-direction: column; gap: 5px; }

.fc-band-name {
    font-family: var(--fc-display);
    font-size: 22px;
    color: var(--fc-text);
}

.fc-band-facts { display: flex; flex-wrap: wrap; gap: 8px; }

/* Their own chip rather than .fc-chip: these sit on a photograph, so they need a
   ground of their own to stay legible over whatever the artwork happens to be doing
   behind them. */
.fc-band-chip {
    font-size: 11px;
    color: var(--fc-soft);
    background: color-mix(in srgb, var(--fc-bg) 60%, transparent);
    border: 1px solid var(--fc-line);
    border-radius: 5px;
    padding: 5px 9px;
    backdrop-filter: blur(2px);
}

/* Shorter on a phone, where 190px is a third of the screen before anything useful
   starts, and the chips would wrap into a stack taller than the band. */
@media (max-width: 640px) {
    .fc-band { height: 132px; }
    .fc-band-name { font-size: 18px; }
    .fc-band-inner { padding-bottom: 12px; flex-direction: column;
                     align-items: flex-start; justify-content: flex-end; gap: 8px; }
    .fc-band-facts { gap: 6px; }
    .fc-band-chip { font-size: 10px; padding: 4px 7px; }
}


/* A short form on one line: a field and the button that acts on it. */
.fc-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 10px 0 4px;
}

.fc-add-row .fc-input { flex: 1 1 240px; min-width: 0; }

/* Inputs that sit inside a table cell rather than a form column. */
.fc-input-tight {
    padding: 5px 9px;
    font-size: 13px;
    min-width: 0;
    width: 100%;
}