/* ===================================================================
   THE ISLE — portal.css
   -------------------------------------------------------------------
   Community server portal components. Loads AFTER site.css and builds
   only on its tokens and terminal skin: blue phosphor on black, one
   monospace face, inverse video for the selected thing, brackets for
   secondary actions, amber strictly for warnings, red for errors and
   destructive actions.

   Server names are never uppercased anywhere in the portal. The
   matchmaker compares names exactly, so the screen shows them exactly.

   Section map:
     01  Shell
     02  Auth layout + terminal frame
     03  Forms
     04  Notices
     05  Status chips
     06  Server records
     07  Key reveal
     08  Dialog
     09  Tables + activity log
     10  Manager console
     11  Empty, loading, toast
     12  Responsive + motion
   =================================================================== */


/* ===================================================================
   01  SHELL
   =================================================================== */

body.portal {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}
body.portal > main { flex: 1 0 auto; }

/* The portal has no hero to sit over, so the header is solid from the
   first frame, the way it is on the deck pages. */
.portal .site-header {
    background: rgba(0, 0, 0, 0.94);
    border-bottom-color: var(--line-strong);
}

.portal-tag {
    padding-left: 0.9rem;
    border-left: 1px solid var(--line-strong);
    white-space: nowrap;
}

.nav__link--button { cursor: pointer; }

.portal-main {
    padding-block: calc(var(--header-h, 68px) + clamp(1.75rem, 5vh, 3.5rem)) clamp(3rem, 8vh, 6rem);
}

.portal-head { margin-bottom: clamp(1.75rem, 4vh, 3rem); }
.portal-head .label-rule { margin-bottom: 1.25rem; }
.portal-head h1 { margin-bottom: 0.9rem; }
.portal-head .lede { color: var(--muted); max-width: 64ch; }

.portal-head__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem 2rem;
}

/* The same blinking block cursor the site puts after a view's heading. */
.portal-head h1::after,
.auth__intro h1::after {
    content: "\2588";
    margin-left: 0.12em;
    color: var(--text-strong);
    animation: crt-blink 1.05s steps(1) infinite;
}

.section-gap { margin-top: clamp(2rem, 5vh, 3.5rem); }

[data-notices]:not(:empty) { margin-bottom: clamp(1.25rem, 3vh, 2rem); }

/* Server names: exact case, exact spacing, visibly a literal. */
.exact {
    display: inline-block;
    max-width: 100%;
    padding: 0.08rem 0.5rem;
    font-family: var(--font-mono);
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--text-strong);
    text-shadow: var(--glow);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: rgba(106, 152, 251, 0.06);
    border: 1px dashed var(--line-strong);
}

.copy-btn {
    margin-left: 0.5rem;
    padding: 0.15rem 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--line);
    text-shadow: var(--glow);
    vertical-align: middle;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.copy-btn:hover { color: var(--ink); background: var(--text); border-color: var(--text); text-shadow: none; }

[hidden] { display: none !important; }

/* Headings that carry a server name keep its exact case. */
.is-exact { text-transform: none; letter-spacing: 0.02em; overflow-wrap: anywhere; }

.pre { white-space: pre-wrap; overflow-wrap: anywhere; }

.label-rule a.label { text-decoration: none; }
.label-rule a.label:hover { color: var(--text-strong); }

.table .chip { margin-left: 0.6rem; }
.table td:first-child .chip { margin-left: 0; }
.table .log__detail { overflow-wrap: normal; word-break: normal; }
.table td.name .log__detail { overflow-wrap: anywhere; }


/* ===================================================================
   02  AUTH LAYOUT + TERMINAL FRAME
   =================================================================== */

.auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 31rem);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}

.auth__intro { padding-top: clamp(0rem, 3vh, 2rem); }
.auth__intro .label-rule { margin-bottom: 1.25rem; }
.auth__intro h1 { margin-bottom: 1.25rem; }
.auth__intro .lede { color: var(--text); margin-bottom: 1.5rem; }
.auth__intro .proto-list { margin-top: 1.75rem; max-width: 52ch; }
.auth__intro .proto-list li { font-size: 0.8125rem; padding: 0.7rem 0; }

/* A framed console: title bar on top, contents below. Square corners and
   a hard rule, never a card. */
.terminal {
    position: relative;
    border: 1px solid var(--line-strong);
    background:
        linear-gradient(180deg, rgba(106, 152, 251, 0.045) 0%, transparent 220px),
        var(--ink);
    box-shadow: 0 0 32px rgba(26, 78, 188, 0.14);
}

.terminal__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--line-strong);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-strong);
    text-shadow: var(--glow);
}
.terminal__bar::before { content: "> "; color: var(--dim); }
.terminal__bar > :first-child { margin-right: auto; }
.terminal__bar .label { font-size: 0.625rem; }

.terminal__body { padding: clamp(1.25rem, 3vw, 2rem); }
.terminal__foot {
    padding: 0.85rem clamp(1.25rem, 3vw, 2rem);
    border-top: 1px solid var(--line);
    font-size: 0.8125rem;
    color: var(--muted);
}
.terminal__foot a { color: var(--text-strong); text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.terminal__foot a:hover { text-decoration-color: var(--text); }


/* ===================================================================
   03  FORMS
   =================================================================== */

.form { display: grid; gap: 1.25rem; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
}
.field--wide { grid-column: 1 / -1; }

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

.field__label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    text-shadow: var(--glow);
}
.field__label .opt { color: var(--dim); letter-spacing: 0.12em; }

.field__hint {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--muted);
    max-width: none;
}

.field__error {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: var(--alert);
    text-shadow: 0 0 6px rgba(255, 74, 47, 0.35);
}
.field__error::before { content: "! "; }

.input,
.select,
.textarea {
    width: 100%;
    padding: 0.72rem 0.85rem;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    color: var(--text-strong);
    text-shadow: var(--glow);
    background: rgba(106, 152, 251, 0.03);
    border: 1px solid var(--line-strong);
    border-radius: 0;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.input::placeholder,
.textarea::placeholder { color: var(--dim); text-shadow: none; }
.input:hover,
.select:hover,
.textarea:hover { border-color: rgba(106, 152, 251, 0.6); }
.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--text);
    background: rgba(106, 152, 251, 0.07);
    box-shadow: 0 0 14px rgba(106, 152, 251, 0.18);
}
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] { border-color: var(--alert); }

.textarea { min-height: 7.5rem; resize: vertical; line-height: 1.6; }
.textarea--short { min-height: 4.5rem; }

.select {
    appearance: none;
    padding-right: 2.5rem;
    cursor: pointer;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236a98fb' stroke-width='1.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
}
.select option { background: var(--surface-2); color: var(--text-strong); }

/* Server name entry: the one field where case and spacing are the data. */
.input--exact { text-transform: none; letter-spacing: 0.03em; font-size: 0.95rem; }

.input--code {
    font-size: clamp(1.3rem, 4vw, 1.75rem);
    letter-spacing: 0.55em;
    text-align: center;
    padding-block: 0.85rem;
}

.phone-input {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    gap: 0.5rem;
}

/* Square checkbox that lights like a pixel when set. */
.check {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    cursor: pointer;
    font-size: 0.8375rem;
    line-height: 1.55;
    color: var(--text);
}
.check input {
    appearance: none;
    flex: 0 0 auto;
    display: grid;
    place-content: center;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0.18rem 0 0;
    border: 1px solid var(--line-strong);
    background: transparent;
    cursor: pointer;
}
.check input::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    background: var(--text-strong);
    box-shadow: 0 0 6px rgba(106, 152, 251, 0.7);
    transform: scale(0);
    transition: transform 110ms ease;
}
.check input:checked { border-color: var(--text); }
.check input:checked::before { transform: scale(1); }
.check input[aria-invalid="true"] { border-color: var(--alert); }

/* Segmented choice: a row of radio options that read like the roster
   filters, with the chosen one in inverse video. */
.choices { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
    padding: 0.55rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    text-shadow: var(--glow);
    border: 1px solid var(--line-strong);
    transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.choice:hover span { color: var(--text-strong); border-color: var(--text); }
.choice input:checked + span { color: var(--ink); background: var(--text); border-color: var(--text); text-shadow: none; }
.choice input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }

.form-section {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
    margin: clamp(0.5rem, 1.5vh, 1rem) 0 0;
    padding: clamp(1.5rem, 3vh, 2.25rem) 0 0;
    /* <fieldset> ships with a grooved frame and padding; only the top rule stays. */
    border: 0;
    border-top: 1px solid var(--line);
}
.form-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.form-section > .label-rule { margin-bottom: 0.25rem; }
.form-section__intro { margin: -0.4rem 0 0; font-size: 0.8125rem; color: var(--muted); max-width: 70ch; }

.form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 0.35rem;
}

.btn--block { width: 100%; justify-content: center; }
.btn[disabled],
.btn[aria-busy="true"] { opacity: 0.55; cursor: progress; pointer-events: none; }
.btn[aria-busy="true"]::after { content: " \2588"; animation: crt-blink 1.05s steps(1) infinite; }
.btn--ghost[aria-busy="true"]::after { content: " ]"; animation: none; }

/* Destructive actions: the alert gun, outlined until hovered. */
.btn--danger {
    background: transparent;
    border-color: rgba(255, 74, 47, 0.55);
    color: var(--alert);
    text-shadow: 0 0 7px rgba(255, 74, 47, 0.4);
    box-shadow: none;
}
.btn--danger:hover {
    background: var(--alert);
    border-color: var(--alert);
    color: var(--ink);
    text-shadow: none;
    box-shadow: 0 0 18px rgba(255, 74, 47, 0.45);
}

.textlink--button { cursor: pointer; background: none; }

.turnstile-slot { min-height: 65px; }
.turnstile-slot:empty::before {
    content: "> loading verification";
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dim);
}


/* ===================================================================
   04  NOTICES
   =================================================================== */

.notice {
    border-left: 2px solid var(--line-strong);
    background: var(--surface);
    padding: 0.95rem 1.2rem;
    font-size: 0.8375rem;
    line-height: 1.6;
    color: var(--text);
}
.notice p { margin: 0; max-width: 72ch; }
.notice p + p { margin-top: 0.6em; }
.notice__label { display: block; margin-bottom: 0.4rem; }

.notice--warn {
    border-left-color: var(--amber);
    background: linear-gradient(90deg, rgba(255, 176, 0, 0.07), transparent 70%), var(--surface);
}
.notice--warn .notice__label { color: var(--amber); text-shadow: var(--glow-amber); }

.notice--error {
    border-left-color: var(--alert);
    background: linear-gradient(90deg, rgba(255, 74, 47, 0.08), transparent 70%), var(--surface);
}
.notice--error .notice__label { color: var(--alert); text-shadow: 0 0 8px rgba(255, 74, 47, 0.45); }

.notice--ok { border-left-color: var(--text); }
.notice--ok .notice__label { color: var(--text-strong); }


/* ===================================================================
   05  STATUS CHIPS
   =================================================================== */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.22rem 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text);
    text-shadow: var(--glow);
    border: 1px solid var(--line-strong);
}
.chip::before {
    content: "";
    width: 6px;
    height: 6px;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}

.chip--active    { color: var(--text-strong); border-color: var(--text); }
.chip--issue     { color: var(--text-strong); border-style: dashed; }
/* "In review" wears the site's in-development marker: dashed amber. */
.chip--pending   { color: var(--amber); border-style: dashed; border-color: rgba(255, 176, 0, 0.5); text-shadow: var(--glow-amber); }
.chip--suspended { color: var(--amber); border-color: var(--amber); text-shadow: var(--glow-amber); }
.chip--revoked,
.chip--rejected  { color: var(--alert); border-color: rgba(255, 74, 47, 0.45); text-shadow: 0 0 6px rgba(255, 74, 47, 0.4); }
.chip--muted     { color: var(--dim); border-color: var(--line); }
.chip--muted::before { background: transparent; border: 1px solid currentColor; box-shadow: none; }
.chip--role      { color: var(--muted); border-color: var(--line); }
.chip--role::before { content: none; }


/* ===================================================================
   06  SERVER RECORDS
   =================================================================== */

/* Slot meter as character cells, the way a terminal draws a gauge. */
.slots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    text-shadow: var(--glow);
}
.slots__meter { letter-spacing: 0.08em; color: var(--text); }
.slots__meter b { font-weight: 400; color: var(--text-strong); }
.slots__count b { color: var(--text-strong); font-weight: 400; }

.records {
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.record {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.1rem 2rem;
    padding: clamp(1.1rem, 2.4vw, 1.6rem);
    background: var(--ink);
    transition: background 140ms ease;
}
.record:hover { background: rgba(106, 152, 251, 0.025); }
.record--dim { opacity: 0.62; }
.record--dim:hover { opacity: 0.9; }

.record__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.9rem;
    margin-bottom: 0.95rem;
}

.record__name {
    margin: 0;
    font-family: var(--font-mono);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.03em;
    text-transform: none;
    color: var(--text-strong);
    text-shadow: var(--glow);
    overflow-wrap: anywhere;
}
a.record__name { text-decoration: none; }
a.record__name:hover { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }

.record__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
}
.record__note { grid-column: 1 / -1; }
.record details { grid-column: 1 / -1; }

.kv {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: 0.85rem 1.5rem;
    margin: 0;
}
.kv > div { min-width: 0; }
.kv dt {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dim);
    text-shadow: var(--glow);
}
.kv dd {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--text);
    overflow-wrap: anywhere;
}
.kv dd.warn { color: var(--amber); text-shadow: var(--glow-amber); }
.kv dd.bad { color: var(--alert); }

/* Expandable "what you submitted". */
.disclosure > summary {
    display: inline-flex;
    gap: 0.5rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    text-shadow: var(--glow);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before { content: "[+]"; color: var(--dim); }
.disclosure[open] > summary::before { content: "[\2212]"; }
.disclosure > summary:hover { color: var(--text-strong); }
.disclosure__body { margin-top: 1rem; }

.spec-sheet--compact > dt,
.spec-sheet--compact > dd { padding: 0.65rem 0; font-size: 0.8125rem; }
.spec-sheet--compact { grid-template-columns: 12rem minmax(0, 1fr); }
.spec-sheet > dd.pre { white-space: pre-wrap; overflow-wrap: anywhere; }


/* ===================================================================
   07  KEY REVEAL
   =================================================================== */

.keybox {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid var(--amber);
    background: rgba(255, 176, 0, 0.035);
}
.keybox__value {
    padding: 0.9rem 1rem;
    font-family: var(--font-mono);
    font-size: clamp(0.78rem, 1.6vw, 0.95rem);
    letter-spacing: 0.04em;
    color: var(--text-strong);
    text-shadow: var(--glow-hot);
    background: var(--ink);
    border: 1px solid var(--line-strong);
    word-break: break-all;
    user-select: all;
}


/* ===================================================================
   08  DIALOG
   =================================================================== */

dialog.dialog {
    width: min(36rem, calc(100vw - 2rem));
    max-height: calc(100svh - 2rem);
    padding: 0;
    color: var(--text);
    background: var(--ink);
    border: 1px solid var(--line-strong);
    box-shadow: 0 0 0 1px rgba(106, 152, 251, 0.06), 0 0 48px rgba(26, 78, 188, 0.35);
}
dialog.dialog--wide { width: min(44rem, calc(100vw - 2rem)); }
dialog.dialog::backdrop { background: rgba(0, 3, 10, 0.84); }
dialog.dialog--danger { border-color: rgba(255, 74, 47, 0.6); }
dialog.dialog--danger .terminal__bar { color: var(--alert); text-shadow: 0 0 8px rgba(255, 74, 47, 0.45); border-bottom-color: rgba(255, 74, 47, 0.45); }

.dialog__body { display: grid; gap: 1.1rem; padding: clamp(1.1rem, 3vw, 1.6rem); }
.dialog__body p { margin: 0; font-size: 0.875rem; }
.dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem 1rem;
    padding: 0.9rem clamp(1.1rem, 3vw, 1.6rem);
    border-top: 1px solid var(--line);
    background: var(--surface);
}


/* ===================================================================
   09  TABLES + ACTIVITY LOG
   =================================================================== */

.table-wrap { overflow-x: auto; border: 1px solid var(--line-strong); }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.table th {
    padding: 0.7rem 1rem;
    text-align: left;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-strong);
    text-shadow: var(--glow);
    background: var(--surface-2);
    border-bottom: 1px solid var(--line-strong);
}
.table td {
    padding: 0.75rem 1rem;
    vertical-align: top;
    color: var(--text);
    border-bottom: 1px solid var(--line);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: rgba(106, 152, 251, 0.045); }
.table .muted { color: var(--muted); }
.table .nowrap { white-space: nowrap; }
.table .name { text-transform: none; color: var(--text-strong); overflow-wrap: anywhere; min-width: 12rem; }
.table .row-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }

.log {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
    font-size: 0.8rem;
}
.log li {
    display: grid;
    grid-template-columns: 10.5rem minmax(0, 1fr);
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--text);
}
.log time {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--dim);
    white-space: nowrap;
}
.log__action { color: var(--text-strong); text-shadow: var(--glow); }
.log__detail { display: block; color: var(--muted); font-size: 0.75rem; overflow-wrap: anywhere; }


/* ===================================================================
   10  MANAGER CONSOLE
   =================================================================== */

.console-bar { margin-bottom: clamp(1rem, 2.5vh, 1.5rem); border: 1px solid var(--line); }
.console-bar .deck__tab { background: none; }
.console-bar .deck__tab[aria-selected="true"] { background: var(--text); }
.deck__tab .count {
    min-width: 1.6em;
    padding: 0 0.35em;
    text-align: center;
    color: var(--ink);
    background: var(--amber);
    text-shadow: none;
}
.deck__tab[aria-selected="true"] .count { background: var(--ink); color: var(--amber); }

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1px;
    margin-bottom: clamp(1.25rem, 3vh, 2rem);
    background: var(--line);
    border: 1px solid var(--line);
}
.stat { padding: 0.9rem 1.1rem; background: var(--ink); }
.stat__value {
    display: block;
    font-family: var(--font-mono);
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    font-weight: 700;
    color: var(--text-strong);
    text-shadow: var(--glow);
    line-height: 1.2;
}
.stat__value.warn { color: var(--amber); text-shadow: var(--glow-amber); }

/* Review queue: list on the left, the application on the right. Same
   master/detail shape as the species browser on the game page. */
.queue {
    display: grid;
    grid-template-columns: minmax(15rem, 21rem) minmax(0, 1fr);
    min-height: 62vh;
    border: 1px solid var(--line);
}
.queue__list {
    max-height: 78vh;
    overflow-y: auto;
    background: var(--surface);
    border-right: 1px solid var(--line);
}
.queue__item {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
    transition: background 120ms ease, color 120ms ease;
}
.queue__item:hover { background: rgba(106, 152, 251, 0.07); }
.queue__item-name {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.03em;
    text-transform: none;
    color: var(--text-strong);
    text-shadow: var(--glow);
    overflow-wrap: anywhere;
}
.queue__item-meta {
    display: block;
    margin-top: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dim);
}
.queue__item[aria-selected="true"] { background: var(--text); }
.queue__item[aria-selected="true"] .queue__item-name,
.queue__item[aria-selected="true"] .queue__item-meta { color: var(--ink); text-shadow: none; }

.queue__detail { max-height: 78vh; overflow-y: auto; padding: clamp(1rem, 2.4vw, 2rem); }
.queue__detail:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

.review-head { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; }
.review-block + .review-block { margin-top: clamp(1.5rem, 3vh, 2.25rem); }
.review-block > .label-rule { margin-bottom: 0.85rem; }

.decision {
    display: grid;
    gap: 1rem;
    margin-top: clamp(1.5rem, 3vh, 2.25rem);
    padding: clamp(1rem, 2.4vw, 1.5rem);
    border: 1px solid var(--line-strong);
    background: var(--surface);
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1.25rem;
    padding-block: 0.85rem;
    border-block: 1px solid var(--line);
}
.toolbar .search { flex: 1 1 240px; }
.toolbar .select { width: auto; min-width: 11rem; padding-block: 0.5rem; font-size: 0.75rem; }


/* ===================================================================
   11  EMPTY, LOADING, TOAST
   =================================================================== */

.empty {
    padding: clamp(2rem, 6vw, 4rem) 1rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dim);
    border: 1px dashed var(--line-strong);
}
.empty p { margin: 0 auto 1.25rem; max-width: 46ch; }

.loading {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    text-shadow: var(--glow);
}
.loading::before { content: "> "; color: var(--dim); }
.loading::after {
    content: "\2588";
    margin-left: 0.3em;
    animation: crt-blink 1.05s steps(1) infinite;
}

.toasts {
    position: fixed;
    left: var(--gutter);
    bottom: 1.25rem;
    z-index: 400;
    display: grid;
    gap: 0.5rem;
    max-width: min(30rem, calc(100vw - 2 * var(--gutter)));
}
.toast {
    padding: 0.75rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--text-strong);
    text-shadow: var(--glow);
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    box-shadow: 0 0 22px rgba(26, 78, 188, 0.35);
}
.toast::before { content: "> "; color: var(--dim); }
.toast--error { color: var(--alert); border-color: rgba(255, 74, 47, 0.6); text-shadow: 0 0 6px rgba(255, 74, 47, 0.4); }


/* ===================================================================
   12  RESPONSIVE + MOTION
   =================================================================== */

@media (max-width: 1080px) {
    .auth { grid-template-columns: minmax(0, 1fr); }
    .auth__intro .proto-list { display: none; }
}

@media (max-width: 860px) {
    .portal-tag { display: none; }
    .nav__link--button { text-align: left; }
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .record { grid-template-columns: minmax(0, 1fr); }
    .record__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .queue { grid-template-columns: minmax(0, 1fr); }
    .queue__list { max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--line-strong); }
    .queue__detail { max-height: none; }
    .spec-sheet--compact { grid-template-columns: minmax(0, 1fr); }
    .spec-sheet--compact > dt { padding-bottom: 0; border-bottom: 0; }
    .log li { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
}

@media (max-width: 480px) {
    .phone-input { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .portal-head h1::after,
    .auth__intro h1::after,
    .loading::after,
    .btn[aria-busy="true"]::after { animation: none; }
}