/* ============================================================================
   XIAIX ticket board — /xiaix

   The page is a session in the game. XIAIX is a text MUD, so the report form
   sits behind a command prompt, the filters print as a room's exit line, and a
   report is laid out the way the game lays out a status line.

   The palette is taken from the game's own output rather than invented:
   cyan for exits, olive for "Intelligent life here", red for the death line,
   green for loot. A colour here means what it means in the client.

   TYPE — two voices, one family. IBM Plex Mono is the GAME talking: the >>
   commands, the exit line, a report's status line, a pasted transcript. IBM
   Plex Sans is PEOPLE talking: titles, descriptions, labels, replies. Mono
   everywhere was atmosphere at the cost of reading, which is the one thing this
   page exists to do. Martian Mono appears exactly once, on the wordmark.

   Every rule is scoped under .xiaix-page. Bare element selectors here would
   leak into the shared chrome (the site nav is a <nav>, the menu toggle is a
   <button>), which is how a page-level stylesheet has broken the header before.
   ========================================================================== */

.xiaix-page {
    /* --- the terminal, as the game draws it --- */
    --void:   #080a0d;   /* console ground                                   */
    --slab:   #0d1116;   /* a block inside it                                */
    --rule:   #1e2732;   /* hairlines and leader rules                       */
    --well:   #0b0f14;   /* input wells                                      */

    --text:   #ccd5de;   /* what the game prints                             */
    --bright: #f2f6fa;   /* what it wants you to read first                  */
    --dim:    #78838f;   /* timestamps, counts, asides                       */

    --exit:   #45cdde;   /* "Obvious exits:" cyan — navigation, links        */
    --life:   #cbb452;   /* "Intelligent life here" olive — ideas            */
    --blood:  #dd5847;   /* "YOU ARE DEAD" red — bugs, blockers              */
    --loot:   #6cc77e;   /* loot green — fixed, confirmations                */
    --cmd:    #83a8dc;   /* the >> command echo                              */

    --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --display: 'Martian Mono', 'IBM Plex Mono', ui-monospace, monospace;

    /* The site nav is position:fixed and 71px tall, and <main> carries no top
       offset — every page pays for its own clearance. */
    max-width: 1060px;
    margin: 0 auto;
    padding: 104px 18px 90px;
    font-family: var(--mono);
    font-size: 15px;
    line-height: 1.68;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

/* The site's global rule (`.cta-button, .btn, button` in enhanced.css) boxes,
   uppercases and letter-tracks EVERY button on the site. Here a button is a
   word in a sentence — an exit in the room's exit line, a verb at the prompt —
   so the rule is undone once, in a :where() that carries no specificity of its
   own and so cannot outrank the component rules below it. Anything that wants
   to look like a button says so. */
.xiaix-page :where(button) {
    position: static;
    display: inline;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    color: inherit;
    font: inherit;
    text-transform: none;
    letter-spacing: inherit;
    overflow: visible;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.xi-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The console. One slab, hairline border, no radius — a terminal has none. */
.xi-console {
    background: var(--void);
    border: 1px solid var(--rule);
    padding: clamp(22px, 4vw, 46px);
}

/* ---- print-on-load ------------------------------------------------------
   A MUD session opens by printing its first lines in sequence. That is the
   only orchestrated motion on the page; everything after it is quiet. */

@keyframes xi-print {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

.xi-print { animation: xi-print .3s ease-out both; }
.xi-print[data-step="1"] { animation-delay: .04s; }
.xi-print[data-step="2"] { animation-delay: .16s; }
.xi-print[data-step="3"] { animation-delay: .28s; }
.xi-print[data-step="4"] { animation-delay: .42s; }
.xi-print[data-step="5"] { animation-delay: .56s; }

/* ---- hero ---------------------------------------------------------------- */

.xi-head { margin-bottom: clamp(28px, 4vw, 40px); }

.xi-cmd {
    color: var(--cmd);
    font-size: 0.95rem;
    letter-spacing: .03em;
    margin: 0 0 15px;
}

.xi-word {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2.1rem, 8.5vw, 3.7rem);
    line-height: 1;
    letter-spacing: .04em;
    color: var(--bright);
    margin: 0 0 16px;
}

.xi-tagline {
    margin: 0 0 16px;
    font-size: 1.2rem;
    color: var(--text);
    letter-spacing: .01em;
}

.xi-head .xi-say {
    font-family: var(--sans);
    font-size: 1.06rem;
    line-height: 1.72;
    color: var(--dim);
    max-width: 62ch;
    margin: 0;
}

/* ---- the composer -------------------------------------------------------- */

.xi-compose {
    border-top: 1px solid var(--rule);
    padding-top: 28px;
}

/* The two kinds are the command you are typing, not a pair of tabs. */
.xi-prompt {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 22px;
    font-size: 1.02rem;
}

.xi-chevron { color: var(--cmd); }

.xi-verb {
    font: inherit;
    border-bottom: 1px solid transparent;
    padding: 2px 0;
    color: var(--dim);
    letter-spacing: .01em;
}

.xi-verb:hover { color: var(--text); }

.xi-verb[aria-pressed="true"] { color: var(--bright); border-bottom-color: currentColor; }
.xi-verb[data-kind="bug"][aria-pressed="true"]  { color: var(--blood); }
.xi-verb[data-kind="idea"][aria-pressed="true"] { color: var(--life); }

.xi-field { margin-bottom: 20px; }

.xi-field > label {
    display: block;
    margin-bottom: 7px;
    font-family: var(--sans);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text);
}

.xi-req { color: var(--exit); font-weight: 400; }

.xi-hint {
    color: var(--dim);
    font-weight: 400;
    font-size: 0.88rem;
}

.xiaix-page input[type="text"],
.xiaix-page input[type="search"],
.xiaix-page textarea,
.xiaix-page select {
    width: 100%;
    font-family: var(--sans);
    font-size: 1.02rem;
    color: var(--bright);
    background: var(--well);
    border: 1px solid var(--rule);
    border-radius: 0;
    padding: 10px 13px;
    transition: border-color .15s ease, background .15s ease;
}

.xiaix-page textarea {
    line-height: 1.68;
    resize: vertical;
    min-height: 92px;
}

/* A pasted transcript is the game's voice, so it is typed and shown in the
   game's face, on the game's ground. */
.xiaix-page textarea.xi-paste {
    font-family: var(--mono);
    font-size: 0.9rem;
    line-height: 1.6;
    min-height: 124px;
    background: #05070a;
    color: var(--text);
}

.xiaix-page input::placeholder,
.xiaix-page textarea::placeholder { color: #59636f; }

.xiaix-page input:focus,
.xiaix-page textarea:focus,
.xiaix-page select:focus {
    outline: 2px solid var(--exit);
    outline-offset: -1px;
    border-color: var(--exit);
    background: var(--slab);
}

/* The one required line is typed AT the prompt, so it is the command line:
   no box, a rule under it, set large. Scoped to match the weight of the
   generic input rule above — as a bare class it lost, and kept its box. */
.xiaix-page input.xi-cmdline {
    font-family: var(--mono);
    font-size: 1.18rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid #36434f;
    padding: 8px 0 11px;
    color: var(--bright);
}

.xiaix-page input.xi-cmdline:hover { border-bottom-color: #4a5b6b; }

.xiaix-page input.xi-cmdline:focus {
    outline: none;
    border-bottom-color: var(--exit);
    background: transparent;
}

/* auto-fit rather than a breakpoint: the three fields reflow at every width,
   including the cramped middle sizes a single breakpoint leaves behind. */
.xi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

/* Native select, restyled: no appearance, our own caret. */
.xi-select { position: relative; }

.xi-select select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 32px;
    cursor: pointer;
}

.xi-select::after {
    content: '▾';
    position: absolute;
    right: 12px;
    bottom: 10px;
    color: var(--dim);
    pointer-events: none;
    font-size: 0.85rem;
}

/* ---- screenshots on the way in ------------------------------------------ */

.xi-drop {
    border: 1px dashed var(--rule);
    padding: 14px;
    transition: border-color .15s ease, background .15s ease;
}

.xi-drop.is-over { border-color: var(--exit); background: rgba(69, 205, 222, .05); }
.xi-drop.is-busy { border-style: solid; border-color: var(--cmd); }

.xi-drop-cue {
    display: block;
    width: 100%;
    font-family: var(--sans);
    font-size: 0.98rem;
    color: var(--dim);
    padding: 8px 0;
    text-align: center;
}

.xi-drop-cue:hover { color: var(--text); }
.xi-drop-cue u { color: var(--exit); text-underline-offset: 3px; }

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

.xi-shots:not(:empty) { margin-top: 12px; }

.xi-shot {
    position: relative;
    width: 116px;
    height: 78px;
    border: 1px solid var(--rule);
    overflow: hidden;
}

.xi-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.xi-shot-x {
    position: absolute;
    inset: auto 0 0 0;
    display: block;
    width: 100%;
    font-family: var(--mono);
    font-size: 0.76rem;
    text-align: center;
    padding: 3px 0;
    color: var(--bright);
    background: rgba(8, 10, 13, .82);
}

.xi-shot-x:hover { color: var(--blood); background: rgba(8, 10, 13, .95); }

/* Optional evidence, folded away until it is wanted. */
.xi-more {
    display: inline-block;
    font-family: var(--sans);
    font-size: 0.98rem;
    padding: 0 0 2px;
    color: var(--exit);
    border-bottom: 1px dotted currentColor;
    margin-bottom: 20px;
}

.xi-more:hover { color: var(--bright); }

.xi-extra { border-left: 1px solid var(--rule); padding-left: 18px; margin-bottom: 20px; }

/* Reachable to a script, invisible and untabbable to a person. */
.xi-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.xiaix-page .xi-send {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.92rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--exit);
    background: transparent;
    border: 1px solid var(--exit);
    padding: 11px 26px;
}

.xiaix-page .xi-send:hover:not(:disabled),
.xiaix-page .xi-send:focus-visible { background: var(--exit); color: var(--void); }
.xiaix-page .xi-send:disabled { color: var(--dim); border-color: var(--rule); cursor: progress; }

.xi-note {
    margin: 16px 0 0;
    padding-left: 14px;
    border-left: 2px solid var(--rule);
    font-family: var(--sans);
    font-size: 1rem;
    display: none;
}

.xi-note.is-shown { display: block; }
.xi-note.is-ok  { border-left-color: var(--loot);  color: var(--loot); }
.xi-note.is-bad { border-left-color: var(--blood); color: var(--blood); }

/* ---- the board ----------------------------------------------------------- */

.xi-board {
    margin-top: clamp(36px, 6vw, 56px);
    border-top: 1px solid var(--rule);
    padding-top: 28px;
}

.xi-board-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 16px;
    margin-bottom: 18px;
}

.xi-board-head h2 {
    font-family: var(--mono);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bright);
    margin: 0;
}

.xi-tally { color: var(--dim); font-size: 0.94rem; }

/* The way back out to a document. This page replaced one, so it owes you a
   copy — with the screenshots, which is what a copy-paste always loses. */
.xi-export {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.9rem;
    color: var(--exit);
    border-bottom: 1px dotted currentColor;
}

.xi-export:hover { color: var(--bright); }
.xi-export:disabled { color: var(--dim); border-bottom-color: transparent; cursor: progress; }

/* THE SIGNATURE: the filters print as the room's exit line, in the game's
   cyan and the game's phrasing. They are the only way to move around the
   board, which is exactly what an exit is. */
.xi-exits {
    margin: 0 0 22px;
    font-size: 1.04rem;
    color: var(--dim);
    line-height: 2.1;
}

.xi-exit {
    font: inherit;
    color: var(--exit);
    border-bottom: 1px solid transparent;
}

.xi-exit:hover { border-bottom-color: currentColor; }

.xi-exit[aria-pressed="true"] {
    color: var(--bright);
    border-bottom-color: var(--bright);
}

.xi-exit .xi-n {
    color: var(--dim);
    font-size: 0.82rem;
    margin-left: 4px;
}

.xi-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-bottom: 26px;
}

.xi-tools .xi-search { flex: 1 1 240px; }
.xi-tools .xi-select { flex: 0 0 auto; }
.xi-tools .xi-select select { width: auto; min-width: 168px; }

/* Bottom-ruled rather than boxed: quieter, and it reads as a field on a
   terminal rather than a control panel. */
.xi-tools input[type="search"],
.xi-tools select {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule);
    padding-left: 0;
    padding-right: 0;
}

.xi-tools .xi-select select { padding-right: 26px; }
.xi-tools .xi-select::after { right: 2px; bottom: 9px; }

.xi-tools input[type="search"]:focus,
.xi-tools select:focus {
    outline: none;
    border-bottom-color: var(--exit);
    background: transparent;
}

/* ---- a report ------------------------------------------------------------ */

.xi-log { display: flex; flex-direction: column; }

.xi-t {
    padding: 22px 0 24px;
    border-top: 1px solid var(--rule);
}

.xi-t:first-child { border-top: none; padding-top: 4px; }

/* The status line: identifiers, a leader rule that fills the gap, and the
   state — the shape the game uses when it prints a line of status. */
.xi-status-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--mono);
    font-size: 0.88rem;
    letter-spacing: .03em;
    margin: 0 0 10px;
}

.xi-t-id { color: var(--exit); }
.xi-t-kind[data-kind="bug"]  { color: var(--blood); }
.xi-t-kind[data-kind="idea"] { color: var(--life); }
.xi-t-area { color: var(--dim); }

.xi-t-mine { color: var(--exit); }

.xi-t-when {
    font-size: 0.82rem;
    color: var(--dim);
    white-space: nowrap;
}

.xi-t.is-editing .xi-t-when {
    color: var(--exit);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 0.76rem;
}

.xi-leader {
    flex: 1 1 20px;
    min-width: 12px;
    border-bottom: 1px dotted var(--rule);
    transform: translateY(-3px);
}

.xi-t-title {
    margin: 0;
    font-family: var(--sans);
    font-size: 1.22rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.005em;
    color: var(--bright);
    word-break: break-word;
}

.xi-t-body {
    font-family: var(--sans);
    font-size: 1.06rem;
    line-height: 1.7;
    color: var(--text);
    margin: 10px 0 0;
    max-width: 72ch;
    white-space: pre-wrap;
    word-break: break-word;
}

.xi-t-label {
    margin: 18px 0 6px;
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dim);
}

/* Pasted game text, shown as the game printed it. */
.xi-t-paste {
    margin: 0;
    padding: 14px 16px;
    background: #05070a;
    border-left: 2px solid var(--rule);
    font-family: var(--mono);
    font-size: 0.88rem;
    line-height: 1.62;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 360px;
    overflow: auto;
}

/* The client's own colours, on the client's own output. */
.xi-t-paste .l-cmd  { color: var(--cmd); }
.xi-t-paste .l-life { color: var(--life); }
.xi-t-paste .l-exit { color: var(--exit); }
.xi-t-paste .l-dead { color: var(--blood); }

/* ---- screenshots on the way out ----------------------------------------- */

.xi-t-shots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.xi-t-shot {
    display: block;
    width: 168px;
    height: 108px;
    padding: 0;
    border: 1px solid var(--rule);
    overflow: hidden;
    transition: border-color .15s ease;
}

.xi-t-shot:hover { border-color: var(--exit); }
.xi-t-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.xi-viewer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(4, 6, 9, .93);
    cursor: zoom-out;
}

.xi-viewer.is-open { display: flex; }

.xi-viewer img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border: 1px solid var(--rule);
}

.xi-viewer .xi-viewer-x {
    position: absolute;
    top: 18px;
    right: 20px;
    font-family: var(--mono);
    font-size: 0.86rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bright);
    background: none;
    border: 1px solid var(--rule);
    border-radius: 0;
    padding: 7px 15px;
    cursor: pointer;
}

.xi-viewer .xi-viewer-x:hover { border-color: var(--exit); color: var(--exit); }

/* ---- the rest of a report ------------------------------------------------ */

.xi-t-reply {
    margin: 16px 0 0;
    padding: 12px 15px;
    border-left: 2px solid var(--exit);
    background: rgba(69, 205, 222, .05);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.65;
    white-space: pre-wrap;
}

.xi-t-reply b {
    display: block;
    font-family: var(--mono);
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--exit);
    margin-bottom: 4px;
}

.xi-t-meta {
    margin: 14px 0 0;
    font-family: var(--mono);
    font-size: 0.88rem;
    color: var(--dim);
}

.xi-toggle {
    font: inherit;
    color: var(--exit);
    border-bottom: 1px solid transparent;
}

.xi-toggle:hover { border-bottom-color: currentColor; }

/* ---- a report open for correction --------------------------------------- */

.xi-t.is-editing {
    border-left: 2px solid var(--exit);
    padding-left: 16px;
    margin: 4px 0;
}

.xi-edit { margin-top: 14px; }

.xi-edit .xi-field:last-of-type { margin-bottom: 14px; }

.xi-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.xi-edit-actions .xi-op-btn[data-danger] { margin-left: auto; }

/* ---- operator row (rendered only for a signed-in session) --------------- */

.xi-op {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--rule);
    font-size: 0.9rem;
}

.xi-op .xi-chevron { flex: 0 0 auto; }
.xi-op select { width: auto; padding: 7px 28px 7px 10px; font-size: 0.9rem; }
.xi-op input[type="text"] { flex: 1 1 220px; min-width: 0; padding: 7px 10px; font-size: 0.9rem; }
.xi-op .xi-select::after { bottom: 7px; right: 10px; }

.xiaix-page .xi-op-btn {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.88rem;
    background: none;
    border: 1px solid var(--rule);
    color: var(--text);
    padding: 7px 15px;
}

.xiaix-page .xi-op-btn:hover { color: var(--bright); border-color: var(--exit); }
.xiaix-page .xi-op-btn[data-danger]:hover { color: var(--blood); border-color: var(--blood); }

/* ---- states -------------------------------------------------------------- */

.xi-empty {
    padding: 46px 0;
    font-family: var(--sans);
    font-size: 1.04rem;
    color: var(--dim);
    border-top: 1px solid var(--rule);
}

.xi-empty b {
    display: block;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

@keyframes xi-arrive {
    from { background: rgba(69, 205, 222, .13); }
    to   { background: transparent; }
}

.xi-arrive { animation: xi-arrive 1.8s ease-out; }

/* ---- accessibility floor -------------------------------------------------- */

.xiaix-page button:focus-visible,
.xiaix-page a:focus-visible,
.xi-viewer button:focus-visible {
    outline: 2px solid var(--exit);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .xi-print { animation: none; }
    .xi-arrive { animation: none; }
}

@media (max-width: 560px) {
    .xiaix-page { padding: 92px 12px 70px; }
    .xi-console { padding: 20px 16px 26px; }
    .xi-status-line { flex-wrap: wrap; gap: 8px; }
    .xi-leader { display: none; }
    .xi-t-when { margin-left: auto; }
    .xi-t-shot { width: 138px; height: 92px; }
}
