/* The website, wearing the game's own UI.

   Everything below is the character sheet / skills list / pause menu family from
   UnityClient/Assets/Resources/UI/Glimgoria.uss: parchment panels on a dark ground, hard
   3px edges, square corners, bold ink. The colours are that file's --gear-* ramp copied
   value for value, so the two can be compared by eye rather than by memory.

   THE RAMP IS THE ONLY THING TO EDIT IF THIS SHOULD BE THE BAG'S ORANGE INSTEAD. The game
   has two parchment palettes and the reasoning is recorded at :root in Glimgoria.uss — the
   browns are what a *window* is (the character sheet, the skills list, the pause menu, the
   party roster) and the orange is what a *container* is (the bag, the shop, the bank). A
   website is a set of windows, so it takes the browns. Swapping is the eight variables
   below and nothing else in this file. */

/* The game's own font files rather than a Google Fonts link: the TTFs are already in the
   repo under UnityClient/Assets/Resources/Fonts, so serving those is the same typeface by
   construction instead of the same typeface by name. It also means the site owes no
   third-party request. */
@font-face {
    font-family: "Glimgoria";
    src: url("../fonts/OpenSans-Light.ttf") format("truetype");
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Glimgoria";
    src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Glimgoria";
    src: url("../fonts/OpenSans-Semibold.ttf") format("truetype");
    font-weight: 600;
    font-display: swap;
}

:root {
    /* Glimgoria.uss ▸ :root, the character sheet's ramp. Four browns darkening inward —
       parchment, the slot column, a row, and the well an icon sits in — which is what gives
       that layout its depth without a border between the columns. */
    --gear: rgb(221, 197, 124);
    --gear-column: rgb(200, 152, 103);
    --gear-slot: rgb(137, 95, 52);
    --gear-well: rgb(101, 64, 25);
    --gear-edge: rgb(74, 47, 18);

    /* Two inks, because this palette has both a light ground and a dark one and neither
       colour reads on both. Which to use is decided by what a thing is drawn ON, not by
       what it says — getting that backwards is the mistake Glimgoria.uss warns about, and
       it is just as invisible here until the page is actually looked at. */
    --gear-ink: rgb(46, 32, 16);
    --gear-ink-lit: rgb(247, 233, 200);
    --gear-ink-dim: rgba(247, 233, 200, 0.62);

    /* A refusal said on parchment. Straight from --bag-alert, which exists in the game for
       this exact reason: the dark theme's orange notice is within a few values of a
       parchment background and simply disappears on it. */
    --alert: rgb(150, 30, 20);

    /* The game's "this is active" blue — --bag-armed. Used here for a confirmation, which
       is a borrowing rather than a match: the game has no success colour, because nothing
       in it ever reports success in words. A green would be a ninth colour nobody chose. */
    --armed: rgb(40, 140, 217);

    /* The ground the panels sit on. In the game that is the world itself; here it is the
       near-black a window is legible against. */
    --ground: rgb(26, 22, 18);

    color-scheme: dark;
    font-family: "Glimgoria", system-ui, sans-serif;
    background: var(--ground);
    color: var(--gear-ink);
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* The vertical padding is what keeps the landing card off the bottom of the trailer band
   on a window too short to leave a gap of its own. Everywhere else it is slack in a
   centred layout that had none. */
.page-content {
    display: grid;
    flex: 1;
    place-items: center;
    padding: 2.5rem 1.5rem;
}

/* ---------------------------------------------------------------------------------------
   The top bar — the game's .titlebar, run the width of the page.

   Same strip every window in the game is capped by: a parchment row with a heavy line
   under it, the name and primary navigation on the left, and the account controls on the
   right. At narrow widths the two groups become compact rows instead of colliding.
   --------------------------------------------------------------------------------------- */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 1rem;
    min-height: 44px;
    background: var(--gear);
    border-bottom: 3px solid var(--gear-edge);
}

.site-header__left {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 1rem;
}

.site-header__menu {
    position: relative;
    flex: 0 0 auto;
}

.site-header__menu > summary {
    display: none;
    list-style: none;
}

.site-header__menu > summary::-webkit-details-marker {
    display: none;
}

.brand {
    color: var(--gear-ink);
    font-weight: 600;
    font-size: 1.15rem;
    text-decoration: none;
}

.site-header__primary,
.site-header__account {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.site-header__account {
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-left: auto;
}

.site-header__account span {
    color: var(--gear-ink);
    font-size: 0.85rem;
    white-space: nowrap;
}

/* The form wrapping Log Out. The page's own form rule below is a column of fields with a
   margin above it, which is not what a control sitting in a row of links is. */
.site-header__account form {
    display: inline;
    margin: 0;
}

/* A nav control is a .pause__world row: inset, quieter than a button, and it darkens under
   the pointer rather than underlining.

   Log Out is a <button> where the rest are <a>, because signing out is a POST — see
   Pages/Logout.cshtml.cs. It has to be indistinguishable from its neighbours, so both are
   one selector list rather than a button rule written to match a link rule and drifting
   from it the first time either is retouched. The three resets at the top are what the
   page's full-width form button assumes and this must not inherit. */
.site-header__primary a,
.site-header__account a,
.site-header__account button {
    width: auto;
    margin: 0;
    font: inherit;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--gear-edge);
    border-radius: 0;
    background: var(--gear-column);
    color: var(--gear-ink);
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
}

.site-header__primary a:hover,
.site-header__account a:hover,
.site-header__account button:hover {
    background: var(--gear-slot);
    color: var(--gear-ink-lit);
}

@media (max-width: 60rem) {
    .site-header__menu {
        order: 1;
    }

    .brand {
        order: 2;
    }

    .site-header__menu > summary {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.1rem;
        height: 2.1rem;
        box-sizing: border-box;
        padding: 0;
        border: 1px solid var(--gear-edge);
        background: var(--gear-column);
        color: var(--gear-ink);
        font-size: 1.15rem;
        line-height: 1;
        cursor: pointer;
    }

    .site-header__menu > summary:hover,
    .site-header__menu > summary:focus-visible {
        background: var(--gear-slot);
        color: var(--gear-ink-lit);
    }

    .site-header__menu > nav {
        display: none;
    }

    .site-header__menu[open] > nav {
        position: absolute;
        top: calc(100% + 0.45rem);
        left: 0;
        z-index: 20;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-width: 13rem;
        padding: 0.45rem;
        background: var(--gear);
        border: 3px solid var(--gear-edge);
        box-shadow: 0 0.35rem 0 rgba(26, 22, 18, 0.45);
    }

    .site-header__menu[open] > nav a {
        display: block;
    }
}

@media (max-width: 50rem) {
    .site-header {
        align-items: center;
        flex-wrap: nowrap;
        padding: 0.45rem 0.75rem;
    }

    .site-header__left {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        overflow: hidden;
        gap: 0.35rem 0.75rem;
    }

    .site-header__account {
        flex: 0 1 auto;
        min-width: 0;
        justify-content: flex-end;
        margin-left: auto;
    }

    .site-header__account span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 40rem) {
    .site-header {
        gap: 0.35rem;
    }

    .site-header__left {
        gap: 0.35rem 0.55rem;
    }

    .site-header__primary,
    .site-header__account {
        gap: 0.25rem;
    }

    .site-header__primary a,
    .site-header__account a,
    .site-header__account button {
        padding: 0.25rem 0.45rem;
        font-size: 0.8rem;
    }
}

/* ---------------------------------------------------------------------------------------
   The trailer band under the header, running the full width of the window. Every child is
   put in the one grid cell, which is what stacks the logo over the footage without taking
   either out of flow — so the band is as tall as the video when there is one, and exactly
   as tall as the logo when there is not. Paint order is DOM order, so no child needs a
   z-index.
   --------------------------------------------------------------------------------------- */

.hero {
    display: grid;
    border-bottom: 3px solid var(--gear-edge);
}

.hero > * {
    grid-area: 1 / 1;
}

/* Cropped rather than let to its own aspect ratio: full width at 16:9 is most of a tall
   screen, which would push the account card below the fold. Change the height to change
   how much of the frame survives. */
.hero__video {
    display: block;
    width: 100%;
    height: clamp(14rem, 36vw, 30rem);
    object-fit: cover;
}

/* Footage cannot be relied on to stay dark, and the logo has to stay readable over every
   frame of it. Darkest at the edges, which is also what blends the band into the page
   above and below it rather than ending on a hard line. */
.hero__scrim {
    background: linear-gradient(to bottom, rgba(26, 22, 18, 0.8), rgba(26, 22, 18, 0.25) 35%, rgba(26, 22, 18, 0.25) 65%, rgba(26, 22, 18, 0.8));
}

/* Stretches to fill the cell, then centres the logo inside it. */
.hero__title {
    display: grid;
    place-items: center;
    margin: 0;
    padding: 2rem 1.5rem;
    color: var(--gear-ink-lit);
    text-align: center;
    text-shadow: 0 0.15rem 0.6rem rgba(0, 0, 0, 0.65);
}

/* The shadow is what lifts the dark red lettering off the footage — without it the logo
   sinks into any frame that happens to be dark. */
.hero__logo {
    display: block;
    width: min(100%, 34rem);
    height: auto;
    filter: drop-shadow(0 0.15rem 0.6rem rgba(0, 0, 0, 0.65));
}

/* An autoplaying loop is exactly what this setting is asking us not to do. Dropping the
   video leaves the logo on the page background, which is the look the landing page had
   before the trailer existed. */
@media (prefers-reduced-motion: reduce) {
    .hero__video {
        display: none;
    }
}

/* ---------------------------------------------------------------------------------------
   A panel — the game's window box.

   .gear, .skills, .party and .pause are all the same three declarations: the parchment
   fill, a 3px edge, and square corners. No shadow and no radius anywhere, which is most of
   what makes the game's UI look like itself.
   --------------------------------------------------------------------------------------- */

.account-card {
    box-sizing: border-box;
    width: min(100%, 36rem);
    background: var(--gear);
    border: 3px solid var(--gear-edge);
    color: var(--gear-ink);
    padding: 1.25rem;
}

.users-card {
    width: min(100%, 72rem);
}

.user-editor-card {
    width: min(100%, 72rem);
}

.leaderboard-card {
    width: min(100%, 72rem);
}

.leaderboard-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gear-edge);
}

.leaderboard-tabs a {
    padding: 0.45rem 0.7rem;
    background: var(--gear-column);
    border: 2px solid var(--gear-edge);
    color: var(--gear-ink);
    font-size: 0.85rem;
    text-decoration: none;
}

.leaderboard-tabs a:hover,
.leaderboard-tabs a.is-active {
    background: var(--gear-slot);
    color: var(--gear-ink-lit);
}

.leaderboard-rank {
    color: var(--gear-ink-lit);
    font-weight: 600;
}

.user-characters {
    margin-top: 2rem;
    padding-top: 0.25rem;
    border-top: 3px solid var(--gear-edge);
}

.character-card {
    margin-top: 1.5rem;
    padding: 1rem;
    border: 2px solid var(--gear-edge);
    background: var(--gear-column);
}

.character-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin: -1rem -1rem 1rem;
    padding: 0.75rem 1rem;
    background: var(--gear-slot);
    border-bottom: 2px solid var(--gear-edge);
    color: var(--gear-ink-lit);
}

.character-card__header h3,
.character-card__header p {
    margin: 0;
}

.character-card__header h3 {
    font-size: 1.1rem;
}

.character-card__header p,
.character-card__status {
    color: var(--gear-ink-dim);
    font-size: 0.85rem;
}

.character-card__status {
    white-space: nowrap;
}

.character-state {
    margin-top: 1.25rem;
}

.character-state h4,
.character-data-grid h4 {
    margin: 0 0 0.5rem;
    color: var(--gear-ink);
    font-size: 0.95rem;
    font-weight: 600;
}

.character-state dl {
    display: grid;
    grid-template-columns: minmax(8rem, 0.3fr) minmax(0, 1fr);
    gap: 0.35rem 1rem;
    margin: 0;
}

.character-state dt {
    font-weight: 600;
}

.character-state dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.character-data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.character-data-grid section {
    min-width: 0;
}

.character-data-grid .table-container {
    margin-top: 0;
}

/* ---------------------------------------------------------------------------------------
   The landing page's arrangement: sign in and download side by side, world availability under
   both. Three panels of the family above rather than one wide one, because that is what
   the game does — a screen is several windows, not one window with headings in it.
   --------------------------------------------------------------------------------------- */

.landing {
    width: min(100%, 60rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* auto-fit with a floor is what folds the two columns into one on a narrow window, so the
   phone layout costs no media query and cannot disagree with the one below. The columns
   stay equal width whatever is in them, which a flex row would not guarantee — a sign-in
   form and a single button are very different amounts of content. */
.landing__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1.5rem;
}

/* .account-card caps itself at 36rem, which is right for a page where the card is the only
   thing on it. Here the grid cell decides, so the cap has to go. */
.landing__panel {
    width: 100%;
}

/* The panel's title strip. The markup has no separate bar element — every page just opens
   its card with an <h1> — so the strip is drawn by bleeding that heading back out to the
   card's edges with negative margins and giving it the same heavy underline .titlebar has.
   That keeps the look without asking six pages to grow a wrapper div.

   The bleed is against the card's own padding rather than the card having none, because
   the landing page is the one card with no <h1> in it — its title is the logo over the
   trailer. A card padded only at the sides and bottom would sit that page's first line
   hard against the top border. */
.account-card > h1 {
    margin: -1.25rem -1.25rem 1.25rem;
    padding: 0.6rem 1.25rem;
    border-bottom: 3px solid var(--gear-edge);
    color: var(--gear-ink);
    font-size: 1.35rem;
    font-weight: 600;
}

/* A section heading inside a panel — .grid__heading's job. Quieter than the title strip,
   because it labels a group rather than the window. */
h2 {
    margin: 1.75rem 0 0.5rem;
    color: var(--gear-ink);
    font-size: 1.05rem;
    font-weight: 600;
}

p {
    line-height: 1.55;
}

a {
    color: var(--gear-well);
}

code {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    background: var(--gear-well);
    color: var(--gear-ink-lit);
    font-size: 0.85rem;
}

/* ---------------------------------------------------------------------------------------
   Forms.

   A field is a .gear__well — the dark brown an icon sits in — with light ink on it, which
   is the one arrangement in the game's palette where an input reads as a hole in the
   parchment rather than as another panel on top of it.
   --------------------------------------------------------------------------------------- */

form {
    display: grid;
    gap: 0.4rem;
    margin-top: 1.5rem;
}

label {
    margin-top: 0.5rem;
    color: var(--gear-ink);
    font-weight: 600;
    font-size: 0.9rem;
}

input, select {
    box-sizing: border-box;
    width: 100%;
    padding: 0.55rem 0.6rem;
    background: var(--gear-well);
    border: 2px solid var(--gear-edge);
    border-radius: 0;
    color: var(--gear-ink-lit);
    font: inherit;
    font-size: 0.95rem;
}

/* The game marks focus by lightening an edge — .chat-input's rule. No glow and no ring,
   which would be the one soft-edged thing on the page. */
input:focus, select:focus {
    outline: none;
    border-color: var(--gear-ink-lit);
}

input::placeholder {
    color: var(--gear-ink-dim);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    margin: 0;
    accent-color: var(--gear-well);
}

/* ---------------------------------------------------------------------------------------
   Buttons — .pause__button exactly: a row-brown fill, a 2px edge, light ink, bold, square,
   darkening one step off the same ramp on hover.
   --------------------------------------------------------------------------------------- */

button, .action-button {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    margin-top: 1rem;
    padding: 0.6rem 0.9rem;
    background: var(--gear-slot);
    border: 2px solid var(--gear-edge);
    border-radius: 0;
    color: var(--gear-ink-lit);
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

button:hover, .action-button:hover {
    background: var(--gear-well);
}

/* Dimmed rather than hidden, on .hud-slot--empty's rule. */
button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Inside a table cell or an action row a button is one of several on a line, so it stops
   claiming the full width and stops carrying the top margin that spaces it off a field. */
.action-button {
    width: auto;
    margin-top: 0;
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
}

.danger-button {
    background: var(--alert);
    color: rgb(247, 233, 200);
}

.danger-button:hover {
    background: rgb(112, 22, 15);
}

.game-download {
    margin: 1.5rem 0;
}

.download-unavailable {
    color: var(--alert);
    font-weight: 600;
}

/* The landing page's one call to action, and the only button on the site that is allowed
   to be bigger than the game's own. */
.game-download .action-button {
    padding: 0.7rem 1.4rem;
    font-size: 1.05rem;
}

.user-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

/* A form wrapping a single button in a table cell must not become a grid with a 1.5rem
   top margin — the layout rule above is for a column of fields. */
.user-actions form {
    display: inline;
    margin: 0;
}

/* Keep the table's intrinsic width inside its scroll area rather than allowing it
   to widen the page's grid column and every registration field beside it. */
.page-content:has(> .world-servers-card) {
    grid-template-columns: minmax(0, 1fr);
}

.world-servers-card,
.world-settings-form > *,
.world-deployments {
    min-width: 0;
}

.world-servers-card .server-image-download code {
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.world-settings-form {
    display: grid;
    gap: 0.75rem;
}

.world-settings-form h2,
.world-settings-form p {
    margin: 0;
}

.world-settings-form .validation-summary-valid,
.world-settings-form .field-validation-valid {
    display: none;
}

.world-settings-fields {
    display: grid;
    grid-template-columns: minmax(12rem, 1.5fr) minmax(11rem, 1fr) minmax(8rem, 0.65fr);
    gap: 0.75rem;
}

.world-settings-field {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    min-width: 0;
}

.world-settings-form button {
    width: auto;
    justify-self: start;
    margin-top: 0.25rem;
}

.world-settings-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.world-settings-editor {
    margin-top: 1.5rem;
    padding: 1rem;
    border: 2px solid var(--gear-edge);
    scroll-margin-top: 1rem;
}

.world-settings-editor form {
    margin-top: 0;
}

.world-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    max-width: 17rem;
}

.world-row-actions form {
    display: inline;
    margin: 0;
}

.world-deployments-table {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

.world-deployments-table td {
    vertical-align: top;
}

.world-identity strong,
.world-deployments-table small {
    display: block;
}

.world-identity strong {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 8rem;
    max-width: 16rem;
}

.world-deployments-table small {
    margin-top: 0.2rem;
    color: var(--gear-ink-lit);
    font-size: 0.78rem;
}

.world-host-address small {
    white-space: normal;
    max-width: 12rem;
}

@media (max-width: 48rem) {
    .world-settings-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

.server-image-download {
    margin-top: 1.75rem;
}

.audit-log-filters {
    grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 0.6fr) auto;
    align-items: end;
    margin: 1.5rem 0;
}

.audit-log-filters button {
    width: auto;
    margin-top: 0;
}

.audit-log-summary {
    white-space: normal;
    min-width: 16rem;
    max-width: 34rem;
}

.audit-log-target {
    min-width: 10rem;
    max-width: 18rem;
}

.audit-log-target strong,
.audit-log-target small {
    display: block;
}

.audit-log-target strong {
    overflow-wrap: anywhere;
}

.audit-log-target small {
    color: rgba(46, 32, 16, 0.68);
    font-size: 0.78rem;
    margin-top: 0.2rem;
}

.audit-log-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.audit-log-pagination .action-button {
    min-width: 5rem;
}

/* ---------------------------------------------------------------------------------------
   Messages.
   --------------------------------------------------------------------------------------- */

.validation-error {
    color: var(--alert);
    font-weight: 600;
    font-size: 0.9rem;
}

.success-message {
    color: var(--armed);
    font-weight: 600;
}

.account-link {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------------------
   Tables — the skills list's rows.

   A row is a band of --gear-slot with light ink on it, separated by the parchment showing
   through rather than by a rule. The header takes the darker well, which is the same
   depth ordering the character sheet's columns use.
   --------------------------------------------------------------------------------------- */

.table-container {
    overflow-x: auto;
    margin-top: 1rem;
    border: 2px solid var(--gear-edge);
}

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

thead {
    background: var(--gear-well);
}

th {
    padding: 0.6rem 0.75rem;
    color: var(--gear-ink-lit);
    font-weight: 600;
    font-size: 0.85rem;
    text-align: left;
    white-space: nowrap;
}

td {
    padding: 0.6rem 0.75rem;
    background: var(--gear-slot);
    border-top: 2px solid var(--gear-edge);
    color: var(--gear-ink-lit);
    font-size: 0.9rem;
    text-align: left;
    white-space: nowrap;
}

tbody tr:hover td {
    background: var(--gear-well);
}

td a {
    color: var(--gear-ink-lit);
}

/* On a row's dark brown these are read against --gear-ink-lit rather than against
   parchment, so the offline red is the lighter of the alert pair. */
.online-status {
    color: rgb(150, 220, 120);
    font-weight: 600;
}

.offline-status {
    color: rgb(240, 150, 140);
    font-weight: 600;
}

.checking-status {
    color: rgb(240, 190, 120);
    font-weight: 600;
}

/* Public worlds keep the game's parchment and numbered rows. Region pennants are labels,
   not national flags: one region can contain worlds in several countries. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.worlds-home {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    border: 3px solid var(--gear-edge);
    background: var(--gear);
}

.world-status {
    --world-status-color: #605846;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--gear-ink);
}

.world-status--online { --world-status-color: #276329; }
.world-status--partial { --world-status-color: #956000; }
.world-status--offline { --world-status-color: #9e261c; }

.world-status__light {
    flex: 0 0 auto;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--world-status-color);
    border: 2px solid color-mix(in srgb, var(--world-status-color), black 20%);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--world-status-color) 13%, transparent);
}

.world-status__label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
}

.world-status__detail {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.82rem;
}

.worlds-home__link {
    flex-shrink: 0;
    color: var(--gear-ink);
    font-size: 0.9rem;
    font-weight: 600;
    text-underline-offset: 0.2em;
}

.worlds-home__link span { margin-left: 0.45rem; }
.worlds-page { width: min(100%, 70rem); }
.worlds-intro { margin: 0 0 1.5rem; }
.worlds-table-wrap { margin-top: 1.5rem; }
.worlds-table { table-layout: fixed; }
.worlds-table thead th:nth-child(1) { width: 4rem; }
.worlds-table thead th:nth-child(3) { width: 10rem; }
.worlds-table thead th:nth-child(4) { width: 4.5rem; }
.worlds-table th, .worlds-table td { padding: 0.85rem 1rem; }
.worlds-table__name { white-space: normal; overflow-wrap: anywhere; font-weight: 600; }
.worlds-table__population { text-align: right; font-variant-numeric: tabular-nums; }
.worlds-table__number {
    background: var(--gear-well);
    border-top: 2px solid var(--gear-edge);
    text-align: center;
}

.world-number {
    display: inline-block;
    min-width: 1.75rem;
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    white-space: normal;
}

.world-region { display: inline-flex; align-items: center; gap: 0.65rem; font-size: 0.82rem; }
.region-flag {
    display: inline-grid;
    flex-shrink: 0;
    place-items: center;
    width: 2rem;
    height: 1.35rem;
    padding-right: 0.2rem;
    background: #343f35;
    color: #fff5da;
    clip-path: polygon(0 0, 100% 0, 86% 50%, 100% 100%, 0 100%);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.region-flag[data-region="EU"] { background: #334b64; }
.region-flag[data-region="NA"] { background: #653c37; }
.region-flag[data-region="AS"] { background: #564367; }
.region-flag[data-region="OC"] { background: #245b59; }
.region-flag[data-region="SA"] { background: #3d5430; }
.region-flag[data-region="AF"] { background: #544516; }
.region-flag[data-region="?"] { background: #514a40; }

.worlds-row--offline {
    --gear-slot: #39251b;
    --gear-well: #39251b;
}
.worlds-row--offline .worlds-table__name { color: #ff5555; }
.worlds-empty { margin: 1.5rem 0 0.5rem; }
.worlds-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.worlds-footer p { margin: 0.2rem 0; font-size: 0.78rem; }
.worlds-refresh {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0.45rem 0.8rem;
    border: 2px solid var(--gear-edge);
    background: var(--gear-column);
    color: var(--gear-ink);
    font-size: 0.82rem;
}
.worlds-refresh:hover { background: var(--gear-slot); color: var(--gear-ink-lit); }
.worlds-refresh:disabled { opacity: 0.65; cursor: wait; }
[data-world-refresh][data-stale] .worlds-table { opacity: 0.65; }

@media (max-width: 52rem) {
    .worlds-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
    .worlds-table, .worlds-table tbody { display: block; }
    .worlds-table tr {
        display: grid;
        grid-template-columns: 3rem minmax(0, 1fr) auto;
        background: var(--gear-slot);
        border-top: 2px solid var(--gear-edge);
        padding: 0.85rem 0.7rem;
        gap: 0.6rem 0.7rem;
        align-items: center;
    }
    .worlds-table tr:first-child { border-top: 0; }
    .worlds-table th, .worlds-table td { background: transparent; border: 0; padding: 0; }
    .worlds-table__number { grid-column: 1; grid-row: 1 / 3; }
    .worlds-table__name { grid-column: 2 / 4; }
    .worlds-table__region { grid-column: 2; grid-row: 2; }
    .worlds-table__population { grid-column: 3; grid-row: 2; font-size: 0.8rem; }
    .worlds-table td.worlds-table__population::before { content: attr(data-label) ": "; color: var(--gear-ink-lit); }
    .worlds-table tbody tr:hover td { background: transparent; }
    .worlds-table .world-number { padding: 0.5rem 0.25rem; background: var(--gear-well); }
}

@media (max-width: 30rem) {
    .worlds-home { align-items: flex-start; flex-direction: column; gap: 0.9rem; }
    .worlds-home__link { margin-left: 1.8rem; }
    .worlds-table tr { grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 0.65rem 0.55rem; }
    .world-region { gap: 0.4rem; font-size: 0.75rem; }
    .region-flag { width: 1.6rem; }
}

@media (max-width: 40rem) {
    .page-content {
        padding: 1.75rem 1rem;
    }

    .account-card {
        padding: 0.9rem;
    }

    .account-card > h1 {
        margin: -0.9rem -0.9rem 0.9rem;
        padding: 0.5rem 0.9rem;
    }
}

/* ---------------------------------------------------------------------------------------
   Items — one generated catalog for the public wiki and every admin inventory view.

   The icon well uses the same deepest brown as the game's inventory slot. The surrounding
   card stays a window brown, because the web is presenting the item rather than simulating a
   bag. */

.wiki-card {
    width: min(100%, 72rem);
}

.wiki-search {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    margin-bottom: 1.5rem;
}

.wiki-search label {
    grid-column: 1 / -1;
}

.wiki-search button {
    width: auto;
    margin-top: 0;
}

.catalog-notice {
    padding: 0.75rem 1rem;
    border: 2px solid var(--alert);
    background: rgba(150, 30, 20, 0.12);
}

.wiki-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
}

.wiki-item-card {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    align-items: center;
    gap: 0.9rem;
    min-height: 5rem;
    padding: 0.75rem;
    border: 2px solid var(--gear-edge);
    background: var(--gear-column);
    color: var(--gear-ink-lit);
    text-decoration: none;
}

.wiki-item-card:hover {
    background: var(--gear-slot);
}

.wiki-item-card h2 {
    margin: 0;
    color: var(--gear-ink-lit);
    font-size: 0.95rem;
}

.wiki-item-card p {
    margin: 0.25rem 0 0;
    color: var(--gear-ink-dim);
    font-size: 0.8rem;
}

.wiki-item-card__icon {
    display: grid;
    width: 4rem;
    height: 4rem;
    place-items: center;
    background: var(--gear-well);
    border: 2px solid var(--gear-edge);
}

.wiki-item-card__icon--detail {
    width: 6rem;
    height: 6rem;
}

.item-icon {
    display: block;
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.item-icon--large {
    width: 3.5rem;
    height: 3.5rem;
}

.item-placeholder {
    color: var(--gear-ink-dim);
    font-size: 1.5rem;
    font-weight: 600;
}

.item-cell {
    white-space: normal;
}

.item-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--gear-ink-lit);
    text-decoration: none;
}

.item-link:hover {
    text-decoration: underline;
}

.item-link small {
    color: var(--gear-ink-dim);
    font-size: 0.75rem;
}

.wiki-item-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.wiki-item-heading h1 {
    margin-bottom: 0.35rem;
}

.wiki-item-key {
    margin: 0;
}

.wiki-item-properties {
    display: grid;
    grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr);
    gap: 0.4rem 1rem;
    margin: 0;
    padding: 1rem;
    background: var(--gear-column);
    border: 2px solid var(--gear-edge);
}

.wiki-item-properties dt {
    font-weight: 600;
}

.wiki-item-properties dd {
    margin: 0;
}

.wiki-description {
    margin-top: 1.5rem;
}

.wiki-description h2 {
    margin-top: 0;
}

/* ---------------------------------------------------------------------------------------
   Admin item grids — the same fixed-slot idea as the game's bag, character sheet and bank.

   Inventory and bank cells stay square so the icon and lower-right quantity chip are the first
   thing the eye reads. Names, slot numbers and raw IDs remain available through the native hover
   label and the wiki link; equipment keeps its slot label visible because an empty helmet and an
   empty weapon slot have different meanings to an administrator. */

.admin-item-grid__summary {
    margin: 0.25rem 0 0;
    color: var(--gear-well);
    font-size: 0.8rem;
}

.admin-item-grid {
    display: grid;
    grid-auto-rows: max-content;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.65rem;
    overflow-x: auto;
    background: var(--gear-column);
    border: 2px solid var(--gear-edge);
}

.admin-item-grid--inventory {
    grid-template-columns: repeat(6, 4rem);
}

.admin-item-grid--equipment {
    grid-template-columns: repeat(5, 4rem);
}

.admin-item-grid--bank {
    grid-template-columns: repeat(8, 4rem);
    max-height: 32rem;
    overflow-y: auto;
}

.character-data-grid .character-items-section--wide {
    grid-column: 1 / -1;
}

.admin-item-slot {
    display: block;
    min-width: 0;
    color: var(--gear-ink);
    text-decoration: none;
}

.admin-item-slot__well {
    position: relative;
    display: grid;
    box-sizing: border-box;
    width: 4rem;
    height: 4rem;
    place-items: center;
    background: var(--gear-well);
    border: 2px solid var(--gear-edge);
}

.admin-item-slot:hover .admin-item-slot__well {
    background: var(--gear-slot);
    border-color: var(--gear-ink-lit);
}

.admin-item-slot:focus-visible {
    outline: none;
}

.admin-item-slot:focus-visible .admin-item-slot__well {
    border-color: var(--armed);
}

.admin-item-slot__icon {
    display: block;
    width: 74%;
    height: 74%;
    object-fit: contain;
}

.admin-item-slot__placeholder {
    color: var(--gear-ink-dim);
    font-size: 1.4rem;
    font-weight: 600;
}

.admin-item-slot__count {
    position: absolute;
    right: 0.15rem;
    bottom: 0.15rem;
    max-width: calc(100% - 0.3rem);
    overflow: hidden;
    padding: 0 0.25rem;
    background: var(--gear);
    border: 1px solid var(--gear-edge);
    color: var(--gear-ink);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-item-slot__meta {
    display: flex;
    min-height: 2.65rem;
    flex-direction: column;
    gap: 0.05rem;
    padding-top: 0.25rem;
    text-align: center;
}

.admin-item-slot__name,
.admin-item-slot__slot,
.admin-item-slot__detail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-item-slot__name {
    color: var(--gear-ink);
    font-size: 0.72rem;
    font-weight: 600;
}

.admin-item-slot__slot {
    color: var(--gear-well);
    font-size: 0.68rem;
}

.admin-item-slot__detail {
    color: var(--gear-well);
    font-size: 0.65rem;
}

.admin-item-slot--empty .admin-item-slot__well {
    background: var(--gear-slot);
    border-color: rgba(74, 47, 18, 0.55);
}

.admin-item-grid--inventory .admin-item-slot__meta,
.admin-item-grid--bank .admin-item-slot__meta {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 40rem) {
    .admin-item-grid--inventory {
        grid-template-columns: repeat(5, 4rem);
    }

    .admin-item-grid--equipment {
        grid-template-columns: repeat(3, 4rem);
    }

    .admin-item-grid--bank {
        grid-template-columns: repeat(5, 4rem);
    }
}

/* ---------------------------------------------------------------------------------------
   Character editing — the administrator edits the durable record in the same fixed slots the
   game uses. The preview remains the familiar square tile, while the two small fields below it
   expose the raw content id and stack count needed to make a safe, complete edit. */

.character-card--editable {
    padding: 1rem;
}

.character-edit-form {
    margin-top: 0;
    gap: 1rem;
}

.character-edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

.character-edit-section {
    min-width: 0;
    padding: 0.85rem;
    background: var(--gear-column);
    border: 2px solid var(--gear-edge);
}

.character-edit-section--wide {
    grid-column: 1 / -1;
}

.character-edit-section h4 {
    margin: 0 0 0.7rem;
    color: var(--gear-ink);
    font-size: 0.95rem;
}

.character-edit-fields {
    display: grid;
    grid-template-columns: minmax(7rem, 0.65fr) minmax(0, 1fr);
    align-items: center;
    gap: 0.35rem 0.7rem;
}

.character-edit-fields label {
    margin-top: 0;
    font-size: 0.8rem;
}

.character-edit-fields input,
.character-edit-fields select {
    min-width: 0;
    padding: 0.4rem 0.45rem;
    font-size: 0.85rem;
}

.character-edit-fields .checkbox-label,
.character-edit-help {
    grid-column: 1 / -1;
}

.character-edit-coordinate-grid {
    display: contents;
}

.character-edit-help {
    margin: 0.2rem 0 0;
    color: var(--gear-well);
    font-size: 0.75rem;
    line-height: 1.4;
}

.character-edit-notice {
    margin: 0;
    padding: 0.65rem 0.8rem;
    background: var(--gear-column);
    border: 2px solid var(--alert);
    color: var(--alert);
    font-size: 0.85rem;
}

.character-edit-table {
    min-width: 28rem;
}

.character-edit-table input {
    width: 12rem;
    margin: 0;
    padding: 0.35rem 0.45rem;
    font-size: 0.85rem;
}

.admin-item-edit-grid {
    display: grid;
    grid-auto-rows: max-content;
    gap: 0.65rem;
    margin-top: 0.5rem;
    padding: 0.65rem;
    overflow-x: auto;
    background: var(--gear-column);
    border: 2px solid var(--gear-edge);
}

.admin-item-edit-grid--inventory {
    grid-template-columns: repeat(6, 7rem);
}

.admin-item-edit-grid--equipment {
    grid-template-columns: repeat(5, 7rem);
}

.admin-item-edit-grid--bank {
    grid-template-columns: repeat(8, 7rem);
    max-height: 50rem;
    overflow-y: auto;
}

.admin-item-edit-slot {
    min-width: 0;
    padding: 0.3rem;
    background: rgba(137, 95, 52, 0.38);
    border: 1px solid var(--gear-edge);
}

.admin-item-edit-slot .admin-item-slot {
    width: 4rem;
    margin: 0 auto;
}

.admin-item-edit-slot__fields {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.2rem 0.3rem;
    margin-top: 0.35rem;
}

.admin-item-edit-slot__fields label {
    margin: 0;
    color: var(--gear-ink-dim);
    font-size: 0.65rem;
    font-weight: 600;
}

.admin-item-edit-slot__fields input {
    min-width: 0;
    width: 100%;
    padding: 0.25rem 0.3rem;
    font-size: 0.72rem;
}

.character-edit-submit {
    margin-top: 0;
}

@media (max-width: 40rem) {
    .character-edit-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-item-edit-grid--inventory,
    .admin-item-edit-grid--bank {
        grid-template-columns: repeat(5, 7rem);
    }

    .admin-item-edit-grid--equipment {
        grid-template-columns: repeat(3, 7rem);
    }
}

/* Targeted administrator editing — the character sheet stays readable, and a single field or
   fixed slot opens the only controls needed for that change. */

.character-detail-list {
    margin: 0;
}

.character-detail-row {
    display: grid;
    grid-template-columns: minmax(7rem, 0.3fr) minmax(0, 1fr);
    align-items: center;
    gap: 0.35rem 1rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(74, 47, 18, 0.35);
}

.character-detail-row:last-child {
    border-bottom: 0;
}

.character-detail-row dt {
    font-weight: 600;
}

.character-detail-row dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.admin-edit-trigger {
    width: auto;
    margin: 0.15rem 0.25rem 0.15rem 0.35rem;
    padding: 0.2rem 0.45rem;
    background: var(--gear-slot);
    border: 1px solid var(--gear-edge);
    color: var(--gear-ink-lit);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
}

.admin-edit-trigger:hover {
    background: var(--gear-well);
}

.admin-item-display-slot {
    width: 4rem;
    min-width: 0;
}

.admin-item-display-slot .admin-item-slot {
    width: 4rem;
}

.admin-edit-trigger--slot {
    display: block;
    width: 4rem;
    margin: 0.25rem 0 0;
    padding: 0.2rem 0;
    font-size: 0.65rem;
}

.character-edit-dialog {
    width: min(30rem, calc(100% - 2rem));
    max-width: calc(100% - 2rem);
    padding: 0;
    background: var(--gear);
    border: 3px solid var(--gear-edge);
    color: var(--gear-ink);
}

.character-edit-dialog::backdrop {
    background: rgba(26, 22, 18, 0.78);
}

.character-edit-dialog form {
    display: grid;
    gap: 0;
    margin: 0;
}

.character-edit-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0.8rem;
    background: var(--gear-slot);
    border-bottom: 2px solid var(--gear-edge);
    color: var(--gear-ink-lit);
}

.character-edit-dialog__header h3 {
    margin: 0;
    font-size: 1rem;
}

.character-edit-dialog__close {
    width: auto;
    margin: 0;
    padding: 0.15rem 0.5rem;
    background: transparent;
    border: 1px solid var(--gear-ink-dim);
    color: var(--gear-ink-lit);
    font-size: 1.2rem;
    line-height: 1;
}

.character-edit-dialog__body {
    padding: 1rem;
}

.character-edit-dialog fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.character-edit-dialog fieldset[hidden] {
    display: none;
}

.character-edit-dialog fieldset label,
.character-edit-dialog legend {
    display: block;
    margin: 0 0 0.35rem;
    color: var(--gear-ink);
    font-size: 0.85rem;
    font-weight: 600;
}

.character-edit-dialog fieldset input,
.character-edit-dialog fieldset select {
    margin-bottom: 0.75rem;
}

.character-edit-dialog fieldset .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.character-edit-dialog fieldset .checkbox-label input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
}

.character-edit-dialog fieldset small {
    display: block;
    margin-top: -0.45rem;
    color: var(--gear-well);
    font-size: 0.75rem;
}

.character-edit-dialog__coordinate-grid {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.35rem 0.6rem;
}

.character-edit-dialog__coordinate-grid label {
    margin: 0;
}

.character-edit-dialog__coordinate-grid input {
    margin: 0;
}

.character-edit-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem 1rem;
    border-top: 2px solid var(--gear-edge);
}

.character-edit-dialog__actions button {
    width: auto;
    margin: 0;
}

.character-command-errors {
    margin-top: 1rem;
    padding: 0.65rem 0.8rem;
    background: rgba(150, 30, 20, 0.1);
    border: 2px solid var(--alert);
}

.character-command-errors p {
    margin: 0;
}

.character-command-errors ul {
    margin: 0.35rem 0 0;
}

@media (max-width: 40rem) {
    .character-detail-row {
        grid-template-columns: minmax(5rem, 0.4fr) minmax(0, 1fr);
    }
}

@media (max-height: 36rem) {
    .site-header {
        min-height: 38px;
        padding-block: 0.2rem;
    }

    .page-content {
        padding-block: 1rem;
    }

    .hero__video {
        height: clamp(10rem, 30vh, 18rem);
    }
}

/* ---------------------------------------------------------------------------------------
   Feedback — public ideas in a vote-ranked list, one tab per status. The entry is a window
   inside the page's larger window; status tags are deliberately the same brown ramp instead of
   introducing a new colour for every workflow state. The one accent is reserved for success
   messages. The tab strip is the leaderboards' strip, so the two pages read as one site. */

.feedback-card {
    width: min(100%, 72rem);
}

.feedback-create-form {
    padding: 1rem;
    background: var(--gear-column);
    border: 2px solid var(--gear-edge);
}

.feedback-create-form h2 {
    margin-top: 0;
}

.feedback-create-form textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 8rem;
    resize: vertical;
}

.feedback-login-prompt {
    padding: 0.75rem 1rem;
    background: var(--gear-column);
    border: 2px solid var(--gear-edge);
}

.feedback-points {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    background: var(--gear-slot);
    border: 2px solid var(--gear-edge);
    color: var(--gear-ink-lit);
}

.feedback-points strong {
    font-size: 1.1rem;
}

.feedback-point-awarded {
    margin: 0.65rem 0 0;
    color: var(--armed);
    font-size: 0.85rem;
    font-weight: 600;
}

.feedback-list {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.feedback-list__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 2px solid var(--gear-edge);
}

.feedback-list__header h2,
.feedback-list__header > span {
    margin: 0;
}

.feedback-list__header > span {
    color: var(--gear-well);
    font-size: 0.85rem;
}

.feedback-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.feedback-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    background: var(--gear-column);
    border: 2px solid var(--gear-edge);
    color: var(--gear-ink);
    font-size: 0.85rem;
    text-decoration: none;
}

.feedback-tabs a:hover,
.feedback-tabs a.is-active {
    background: var(--gear-slot);
    color: var(--gear-ink-lit);
}

.feedback-tabs__count {
    padding: 0.05rem 0.4rem;
    background: rgba(74, 47, 18, 0.25);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.feedback-empty {
    margin: 0;
    padding: 1rem;
    background: var(--gear-column);
    border: 2px solid var(--gear-edge);
    color: var(--gear-well);
}

.feedback-entry {
    padding: 1rem;
    background: var(--gear-column);
    border: 2px solid var(--gear-edge);
}

.feedback-entry__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(74, 47, 18, 0.35);
}

.feedback-entry__header h3,
.feedback-entry__header p {
    margin: 0;
}

.feedback-entry__header p {
    margin-top: 0.25rem;
    color: var(--gear-well);
    font-size: 0.8rem;
}

.feedback-entry__description {
    min-height: 2.5rem;
    margin: 1rem 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.feedback-status {
    flex: 0 0 auto;
    padding: 0.25rem 0.5rem;
    background: var(--gear-slot);
    border: 1px solid var(--gear-edge);
    color: var(--gear-ink-lit);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.feedback-entry__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.feedback-votes {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    min-width: 5rem;
    color: var(--gear-ink-lit);
}

.feedback-votes strong {
    font-size: 1.1rem;
}

.feedback-vote-form,
.feedback-delete-form,
.feedback-admin-status-form {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
}

.feedback-admin-status-form {
    margin-left: auto;
}

.feedback-admin-status-form label {
    color: var(--gear-ink);
    font-size: 0.8rem;
    font-weight: 600;
}

.feedback-admin-status-form select {
    width: auto;
    margin: 0;
    padding: 0.35rem 0.5rem;
}

.feedback-entry__actions .action-button {
    white-space: nowrap;
}

/* The discussion under an idea. Folded by default, so a tab stays a list of ideas rather than a
   wall of conversations; the fold's line says how many comments are behind it and whether a
   developer has answered, which is the thing somebody reading the Declined tab came for.

   A player's comment is a lighter sheet of the same parchment. A developer's is the dark slot
   brown with light ink — the arrangement the points line already uses to stand apart from the
   entry it sits in — and its tag borrows the blue, so an explanation of a decision reads as the
   team's without a reader having to know whose names are whose. */

.feedback-discussion {
    margin-top: 0.85rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(74, 47, 18, 0.35);
}

.feedback-discussion > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: var(--gear-well);
    font-size: 0.85rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.feedback-discussion > summary::-webkit-details-marker {
    display: none;
}

.feedback-discussion > summary::before {
    content: "▸";
    display: inline-block;
    width: 0.8rem;
}

.feedback-discussion[open] > summary::before {
    content: "▾";
}

.feedback-discussion > summary:hover {
    color: var(--gear-edge);
}

.feedback-developer-tag,
.feedback-author-tag {
    padding: 0.05rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.feedback-developer-tag {
    background: var(--armed);
    color: var(--gear-ink-lit);
}

.feedback-author-tag {
    border: 1px solid var(--gear-edge);
    color: var(--gear-ink);
}

.feedback-comments {
    display: grid;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.feedback-comment {
    padding: 0.6rem 0.75rem;
    background: var(--gear);
    border: 1px solid rgba(74, 47, 18, 0.45);
}

.feedback-comment--developer {
    background: var(--gear-slot);
    border: 2px solid var(--gear-edge);
    border-left: 4px solid var(--armed);
    color: var(--gear-ink-lit);
}

.feedback-comment__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
}

.feedback-comment__time {
    color: var(--gear-well);
    font-size: 0.75rem;
}

.feedback-comment--developer .feedback-comment__time {
    color: var(--gear-ink-dim);
}

.feedback-comment__body {
    margin: 0.35rem 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Taking a comment back is a small word at the end of its header rather than a button the size
   of Post, because it is the rarer of the two and the comment is what the eye should land on. */
.feedback-comment-delete-form {
    display: inline;
    margin: 0 0 0 auto;
}

.feedback-comment-remove {
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    color: var(--alert);
    font-size: 0.75rem;
    text-decoration: underline;
}

.feedback-comment-remove:hover {
    background: none;
}

.feedback-comment--developer .feedback-comment-remove {
    color: var(--gear-ink-lit);
}

.feedback-comment-form {
    margin-top: 0.75rem;
}

.feedback-comment-form label {
    margin-top: 0;
}

/* A field is a well, the rule every input on this site follows. The idea form's box is drawn by
   the browser; this one sits inside a thread of parchment sheets, where the browser's grey reads
   as a hole in the wrong material. */
.feedback-comment-form textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 4.5rem;
    padding: 0.55rem 0.6rem;
    background: var(--gear-well);
    border: 2px solid var(--gear-edge);
    border-radius: 0;
    color: var(--gear-ink-lit);
    font: inherit;
    font-size: 0.95rem;
    resize: vertical;
}

.feedback-comment-form textarea:focus {
    outline: none;
    border-color: var(--gear-ink-lit);
}

.feedback-comment-form textarea::placeholder {
    color: var(--gear-ink-dim);
}

.feedback-comment-form .action-button {
    justify-self: start;
}

.feedback-discussion__login {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
}

@media (max-width: 40rem) {
    .feedback-entry__header {
        flex-direction: column;
        gap: 0.6rem;
    }

    .feedback-admin-status-form {
        margin-left: 0;
    }
}