/* one stylesheet for the whole site. to retheme, change :root */
:root {
    --orange:        #B65A38;
    --orange-bright: #D4774D;
    --orange-dark:   #713722;

    --bg:            #0D0C0A;
    --panel:         #151310;
    --panel-light:   #1D1A16;
    --border:        #40352D;

    --text:          #D8CBB8;
    --muted:         #948A7B;
    --on-orange:     #100B08;

    --danger:        #C4503F;
    --accept:        #8AB06E;
    --deny:          #C4503F;
    --measure:       760px;

    /* review stars: a gold that stays apart from the orange accent, and a neutral grey with no orange in it */
    --star-on:       #F0B232;
    --star-off:      #5A5A5A;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; min-height: 100%; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    line-height: 1.6;
    overflow-x: hidden;
}

:focus-visible { outline: 2px solid var(--orange-bright); outline-offset: 2px; }

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    background: repeating-linear-gradient(to bottom,
    rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px,
    transparent 1px, transparent 4px);
}

a { color: var(--orange-bright); }

/* shell */
.terminal-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    background: radial-gradient(circle at 50% 0%, rgba(182,90,56,.05), transparent 45%), var(--bg);
}

.terminal-header {
    min-height: 58px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 8px 24px;
    border-bottom: 1px solid var(--border);
    background: rgba(13,12,10,.95);
    font-size: 12px;
    letter-spacing: 1.5px;
}
.header-left, .header-right { display: flex; align-items: center; gap: 12px; }
.header-right { color: var(--muted); gap: 20px; }

.terminal-light {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 8px rgba(182,90,56,.8);
}

.header-nav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-right: auto; }
.header-nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-bottom: 1px solid transparent;
}
.header-nav a:hover { color: var(--text); border-color: var(--orange-dark); }
.header-nav a[aria-current="page"] { color: var(--orange-bright); border-color: var(--orange); }

.session-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 8px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 1.5px;
}
.session-bar .tag { color: var(--orange); }
.account { display: flex; align-items: center; gap: 12px; color: var(--orange-bright); letter-spacing: 1px; text-transform: uppercase; }
.account img { width: 24px; height: 24px; border: 1px solid var(--orange-dark); border-radius: 0; }

.terminal-content { flex: 1; width: 100%; padding: 60px 8% 70px; }

.screen-heading { max-width: 760px; margin: 0 auto 36px; }
.eyebrow { margin-bottom: 10px; color: var(--orange); font-size: 11px; font-weight: bold; letter-spacing: 3px; }
h1 {
    margin: 0 0 12px;
    color: var(--text);
    font-size: clamp(25px, 4vw, 42px);
    line-height: 1.1;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
}
.screen-heading p { margin: 0; color: var(--muted); letter-spacing: .5px; }

/* panels */
.terminal-panel, .apply-body { max-width: 760px; margin: 0 auto; }
.terminal-panel {
    padding: 32px;
    border: 1px solid var(--border);
    background: var(--panel);
    box-shadow: inset 0 0 30px rgba(0,0,0,.25);
}
.terminal-panel p { margin: 0 0 12px; letter-spacing: .5px; }
.terminal-panel p.line { color: var(--orange-bright); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.terminal-panel h2 {
    margin: 0 0 14px;
    color: var(--orange-bright);
    font-size: 22px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.panel-status, .form-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    color: var(--orange);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.panel-status { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.panel-status.closed { color: var(--muted); }
.status-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--orange); box-shadow: 0 0 7px rgba(182,90,56,.8);
}
.closed .status-dot { background: var(--muted); box-shadow: none; }

.terminal-button, .btn {
    display: inline-block;
    border: 1px solid var(--orange);
    padding: 14px 22px;
    background: var(--orange);
    color: var(--on-orange);
    font-family: inherit;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease;
}
.terminal-button:hover:not(:disabled), .btn:hover:not(:disabled) {
    background: var(--orange-bright);
    box-shadow: 0 0 15px rgba(182,90,56,.2);
}
.terminal-button:disabled, .btn:disabled { opacity: .35; cursor: not-allowed; }
.terminal-button.full-width { width: 100%; }
.terminal-panel .terminal-button { margin-top: 14px; }

.account .btn { padding: 6px 12px; font-size: 10px; }
.account .btn.quiet { background: transparent; color: var(--orange); }
.account .btn.quiet:hover:not(:disabled) { background: rgba(182,90,56,.08); box-shadow: none; }

/* application form */
.form-status {
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 12px 18px;
    border: 1px solid var(--orange-dark);
    background: rgba(182,90,56,.05);
}
.form-status .muted { color: var(--muted); }

#apply-form { counter-reset: q; }

/* numbering is done by CSS counters, so adding a question never needs a number */
.question {
    counter-increment: q;
    display: block;
    margin: 0 0 20px;
    padding: 22px;
    border: 1px solid var(--border);
    background: var(--panel);
}
.question::before {
    content: "QUESTION " attr(data-n);
    display: block;
    margin-bottom: 8px;
    color: var(--orange);
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 3px;
}
.question[data-optional]::before { content: "QUESTION " attr(data-n) " // OPTIONAL"; }
.question > span {
    display: block;
    margin-bottom: 14px;
    color: var(--text);
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .06em;
    text-transform: uppercase;
}
/* the hint under a question, shown in muted text so it doesn't compete with the question */
.question > .question-guide {
    display: block;
    margin: -6px 0 14px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: .5px;
}
.question > .question-guide::before {
    content: "LOOKING FOR // ";
    color: var(--orange);
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}
.question textarea {
    display: block;
    width: 100%;
    min-height: 130px;
    padding: 12px 14px;
    resize: vertical;
    border: 1px solid var(--border);
    border-left: 3px solid var(--orange-dark);
    border-radius: 0;
    background: var(--bg);
    color: var(--orange-bright);
    caret-color: var(--orange-bright);
    font: inherit;
    font-size: 14px;
    line-height: 1.6;
}
.question textarea::placeholder { color: var(--muted); }
.question textarea:focus {
    outline: 0;
    border-color: var(--orange);
    box-shadow: 0 0 15px rgba(182,90,56,.15);
}
/* the word limit advisory at the top of the first questions page */
.notice-block { margin: 0 0 20px; padding: 18px 22px; border: 1px solid var(--border); border-left: 3px solid var(--orange); background: var(--panel); }
.notice-title { margin-bottom: 10px; color: var(--orange); font-size: 11px; font-weight: bold; letter-spacing: 3px; }
.notice-block p { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.7; letter-spacing: .5px; }
.notice-block p:last-child { margin-bottom: 0; }
.notice-block .notice-lead { color: var(--text); font-weight: bold; }

.q-count { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-top: 6px; color: var(--muted); font-size: 10px; letter-spacing: 1px; }
.q-count-note { flex: 1 1 240px; text-align: left; letter-spacing: .5px; }
.q-count-number { margin-left: auto; white-space: nowrap; }
.q-count-number.full { color: var(--orange); }

.form-error {
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid var(--danger);
    border-left: 3px solid var(--danger);
    color: var(--danger);
    font-size: 11px;
    letter-spacing: .8px;
    text-transform: uppercase;
}
.form-error::before { content: "ERROR // "; font-weight: bold; }

.status-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
}
.status-steps li {
    padding: 14px 8px;
    border-right: 1px solid var(--border);
    text-align: center;
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.status-steps li:last-child { border-right: 0; }
.status-steps li::before { content: "[ ]"; display: block; margin-bottom: 6px; font-size: 15px; letter-spacing: 0; }
.status-steps li.done { color: var(--text); }
.status-steps li.done::before { content: "[\25A0]"; color: var(--orange); }
.status-steps li.current { background: rgba(182,90,56,.08); color: var(--orange-bright); font-weight: bold; }
.status-steps li.current::before { content: "[\25BA]"; color: var(--orange-bright); }
.status-steps li.current.accepted { color: var(--accept); background: rgba(138,176,110,.08); }
.status-steps li.current.accepted::before { content: "[\2713]"; color: var(--accept); }
.status-steps li.current.denied { color: var(--danger); background: rgba(196,80,63,.08); }
.status-steps li.current.denied::before { content: "[\2715]"; color: var(--danger); }

.status-message {
    margin: 24px 0 0 !important;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--orange);
    background: var(--bg);
    color: var(--text);
}
.status-message::before {
    content: "TRANSMISSION //";
    display: block;
    margin-bottom: 4px;
    color: var(--orange);
    font-size: 10px;
    letter-spacing: 2px;
}

.terminal-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 9px;
    letter-spacing: 1px;
}
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.footer-row > span:last-child { display: flex; align-items: center; gap: 8px; }
.footer-fine { margin: 8px 0 0; opacity: .8; }
.footer-status { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 7px rgba(182,90,56,.8); }

/* mobile */
@media (max-width: 700px) {
    .terminal-header, .session-bar { padding-left: 15px; padding-right: 15px; }
    .header-right { display: none; }
    .terminal-content { padding: 40px 18px 50px; }
    .terminal-panel { padding: 22px; }
    .question { padding: 18px; }
    .status-steps { grid-template-columns: repeat(2, 1fr); }
    .status-steps li:nth-child(2n) { border-right: 0; }
    .status-steps li:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
    .terminal-footer { padding: 12px 15px; text-align: center; }
    .footer-row { flex-direction: column; justify-content: center; }
}

/* boot screen */
.boot {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    background: radial-gradient(circle at 50% 0%, rgba(182,90,56,.08), transparent 55%), var(--bg);
    font-family: "Courier New", Courier, monospace;
    color: var(--orange-bright);
    cursor: pointer;
    transition: opacity .45s ease;
}
.boot.done { opacity: 0; pointer-events: none; }
.boot::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,.02) 0, rgba(255,255,255,.02) 1px, transparent 1px, transparent 4px);
}
.boot::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: rgba(182,90,56,.03);
    animation: boot-flicker 4s infinite steps(1);
}
@keyframes boot-flicker { 0%, 100% { opacity: 1; } 47% { opacity: .4; } 50% { opacity: 1; } 83% { opacity: .6; } }
.boot-frame { position: relative; width: min(46rem, 100%); }
.boot-top, .boot-bottom { display: flex; justify-content: space-between; gap: 1rem; font-size: .75rem; letter-spacing: .15em; color: var(--muted); }
.boot-top { padding-bottom: .7rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.boot-bottom { margin-top: .7rem; font-size: .65rem; }
.boot-log { min-height: 15rem; padding: 1.25rem; border: 1px solid var(--border); background: var(--panel); box-shadow: inset 0 0 30px rgba(0,0,0,.25); font-size: .85rem; letter-spacing: .06em; }
.boot-line { margin: 0 0 .6rem; overflow-wrap: anywhere; }
.boot-line.ok { color: var(--orange); font-weight: bold; }
.boot-line:last-child::after { content: "\2588"; margin-left: .25rem; animation: boot-blink 1s steps(1) infinite; }
@keyframes boot-blink { 50% { opacity: 0; } }
.boot-bar { height: 5px; margin-top: 1.25rem; border: 1px solid var(--border); background: var(--panel-light); }
.boot-fill { width: 0; height: 100%; background: var(--orange); transition: width .3s ease; }
@media (prefers-reduced-motion: reduce) { .boot { display: none; } }

.step-indicator { margin: 0 0 20px; }
.step-label { color: var(--orange); font-size: 11px; font-weight: bold; letter-spacing: 3px; text-transform: uppercase; }
.step-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.step-track li { height: 4px; background: var(--panel-light); border: 1px solid var(--border); }
.step-track li.done { background: var(--orange-dark); border-color: var(--orange-dark); }
.step-track li.current { background: var(--orange); border-color: var(--orange); }

.step-card {
    padding: 32px;
    border: 1px solid var(--border);
    background: var(--panel);
    box-shadow: inset 0 0 30px rgba(0,0,0,.25);
}
.step-card h2 { margin: 0 0 10px; color: var(--orange-bright); font-size: 22px; letter-spacing: 1px; text-transform: uppercase; }
.step-help { margin: 0 0 26px; color: var(--muted); letter-spacing: .5px; }
.step-note { margin: 22px 0 0; color: var(--muted); font-size: 10px; letter-spacing: .7px; }
.step-note span { color: var(--orange); }

.step-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.step-actions.split { justify-content: space-between; }
.terminal-button.secondary { background: transparent; color: var(--orange); }
.terminal-button.secondary:hover:not(:disabled) { background: rgba(182,90,56,.08); box-shadow: none; }
/* the save progress button shows the result for a few seconds */
.terminal-button.saved, .terminal-button.saved:hover:not(:disabled) { border-color: var(--accept); background: transparent; color: var(--accept); box-shadow: none; }
.terminal-button.failed, .terminal-button.failed:hover:not(:disabled) { border-color: var(--danger); background: transparent; color: var(--danger); box-shadow: none; }

.field-label { display: block; margin-bottom: 12px; color: var(--muted); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.input-row { display: flex; align-items: center; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--orange-dark); }
.input-row:focus-within { border-color: var(--orange); }
.input-prefix { margin-right: 10px; color: var(--orange); font-size: 18px; }
.input-row input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--orange-bright);
    caret-color: var(--orange-bright);
    font: inherit;
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.input-row input::placeholder { color: var(--muted); }

.lookup-status { min-height: 20px; margin-bottom: 8px; color: var(--orange); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.inline-error { margin: 0 0 14px; color: var(--danger); font-size: 11px; letter-spacing: .8px; text-transform: uppercase; }

.identity-preview {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 6px 0 22px;
    padding: 20px;
    border: 1px solid var(--border);
    background: var(--panel-light);
}
.image-frame { position: relative; flex-shrink: 0; width: 96px; height: 96px; border: 1px solid var(--orange-dark); background: #0A0908; overflow: hidden; }
.image-frame img {
    display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated;
    filter: sepia(.7) saturate(1.4) hue-rotate(325deg) brightness(.8) contrast(1.3);
}
.image-frame::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,.08) 0, rgba(255,255,255,.08) 1px, transparent 1px, transparent 5px);
}
.preview-details { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.detail-label { color: var(--muted); font-size: 9px; letter-spacing: 1.5px; }
.detail-value { color: var(--orange-bright); font-size: 20px; font-weight: bold; overflow-wrap: anywhere; }
.detail-sub { color: var(--muted); font-size: 10px; letter-spacing: 1px; }

.confirm-row { display: flex; align-items: center; gap: 12px; cursor: pointer; color: var(--text); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.confirm-row input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.confirm-box { position: relative; flex-shrink: 0; width: 20px; height: 20px; border: 1px solid var(--orange); }
.confirm-row input:checked + .confirm-box { background: var(--orange); }
.confirm-row input:checked + .confirm-box::after {
    content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
    border: solid var(--on-orange); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.confirm-row input:focus-visible + .confirm-box { outline: 2px solid var(--orange-bright); outline-offset: 2px; }

.player-tag { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; color: var(--orange-bright); font-size: 14px; font-weight: bold; letter-spacing: 1px; overflow-wrap: anywhere; }
.player-tag img { width: 40px; height: 40px; image-rendering: pixelated; border: 1px solid var(--orange-dark); }

.stat-list { border: 1px solid var(--border); background: var(--bg); }
.stat-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--border); }
.stat-row:last-child { border-bottom: 0; }
.stat-info { display: flex; flex-direction: column; gap: 4px; }
.stat-name { color: var(--orange-bright); font-size: 14px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; }
.stat-description { color: var(--muted); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.stat-controls { display: flex; align-items: center; gap: 15px; }
.stat-controls button {
    width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 0;
    background: var(--panel-light); color: var(--orange); font-family: inherit; font-size: 20px; cursor: pointer;
}
.stat-controls button:hover { border-color: var(--orange); background: rgba(182,90,56,.08); }
.stat-value { width: 30px; text-align: center; color: var(--text); font-size: 18px; }

.allocation { margin-top: 22px; }
.allocation-figures { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.allocation-figures > div { display: flex; flex-direction: column; gap: 4px; }
.allocation-label { color: var(--muted); font-size: 9px; letter-spacing: 1px; }
.allocation-number { color: var(--text); font-size: 24px; }
.allocation-bar { height: 5px; margin-top: 16px; border: 1px solid var(--border); background: var(--panel-light); }
.allocation-fill { width: 71.4%; height: 100%; background: var(--orange); transition: width .2s ease; }
.allocation-status { min-height: 20px; margin-top: 12px; color: var(--muted); font-size: 10px; letter-spacing: .8px; }
.allocation-status.complete { color: var(--orange); }

@media (max-width: 700px) {
    .step-card { padding: 22px; }
    .identity-preview { flex-direction: column; align-items: flex-start; }
    .stat-row { padding: 14px 16px; }
    .stat-controls { gap: 8px; }
    .step-actions .terminal-button { flex: 1; }
}

.skip-link { position: absolute; left: -999px; top: 0; padding: 8px 14px; background: var(--orange); color: var(--on-orange); z-index: 200; }
.skip-link:focus { left: 10px; top: 10px; }

.brand { color: var(--text); text-decoration: none; font-weight: bold; }
.brand:hover { color: var(--orange-bright); }

.maker { display: inline-flex; align-items: center; gap: 8px; }
.maker-mark { width: 16px; height: 16px; padding: 2px; flex-shrink: 0; color: var(--orange); border: 1px solid var(--orange-dark); }
.header-right .maker { color: var(--orange); font-weight: bold; }
.footer-maker { margin-top: 8px; }
.footer-maker .maker { color: var(--orange); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.footer-nav a { color: var(--muted); text-decoration: none; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.footer-nav a:hover { color: var(--orange-bright); }
.terminal-footer { font-size: 10px; }

.screen-heading, .terminal-panel, .apply-body, .cards, .breadcrumbs { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.terminal-content.home { --measure: 1000px; }
.terminal-content.wide { --measure: none; padding: 40px 32px 60px; }
.terminal-content.wide .screen-heading { margin-left: 0; margin-right: 0; max-width: none; }

.breadcrumbs { margin-bottom: 26px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li + li::before { content: "//"; margin-right: 6px; color: var(--orange-dark); }
.breadcrumbs a { color: var(--orange); text-decoration: none; }
.breadcrumbs a:hover { color: var(--orange-bright); }
.terminal-content.wide .breadcrumbs { margin-left: 0; max-width: none; }

.hero { margin-bottom: 44px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; counter-reset: card; }
.card {
    counter-increment: card;
    display: block; padding: 22px; color: inherit; text-decoration: none;
    border: 1px solid var(--border); border-top: 3px solid var(--orange-dark);
    background: var(--panel); box-shadow: inset 0 0 30px rgba(0,0,0,.25);
    transition: border-color .15s ease, background .15s ease;
}
.card::before { content: "MODULE " counter(card, decimal-leading-zero); display: block; margin-bottom: 10px; color: var(--orange); font-size: 10px; font-weight: bold; letter-spacing: 3px; }
.card h2 { margin: 0 0 8px; color: var(--orange-bright); font-size: 17px; letter-spacing: 1px; text-transform: uppercase; }
.card p { margin: 0; color: var(--muted); font-size: 13px; }
.card:hover { border-color: var(--orange); border-top-color: var(--orange-bright); background: var(--panel-light); }
.card::after { content: "> OPEN"; display: block; margin-top: 16px; color: var(--orange); font-size: 10px; letter-spacing: 2px; }

.btn.quiet { background: transparent; color: var(--orange); }
.btn.quiet:hover:not(:disabled) { background: rgba(182,90,56,.08); box-shadow: none; }
.btn { padding: 10px 16px; }
.account .btn { padding: 6px 12px; }

/* review + decisions pages */
.meta { margin: 0; color: var(--muted); font-size: 11px; letter-spacing: .8px; }
.notice { margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--orange-dark); border-left: 3px solid var(--orange); background: rgba(182,90,56,.05); font-size: 12px; letter-spacing: .5px; }
.form-error { margin: 0; }

.detail h2, .comments-title {
    margin: 0 0 14px; color: var(--orange-bright); font-size: 14px; letter-spacing: 3px; text-transform: uppercase;
}
.detail h2 { font-size: 22px; letter-spacing: 1px; margin: 0; }
.detail { padding: 28px; border: 1px solid var(--border); background: var(--panel); box-shadow: inset 0 0 30px rgba(0,0,0,.25); }
.detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.next-row { display: flex; justify-content: flex-end; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.btn:disabled { opacity: .35; cursor: not-allowed; }

.answer { padding: 20px 0; border-bottom: 1px solid var(--border); }
.answer h3 { margin: 0 0 10px; color: var(--text); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.answer-text { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--orange-dark); background: var(--bg); color: var(--orange-bright); white-space: pre-wrap; overflow-wrap: anywhere; }

/* half-star rating: grey star with a gold copy on top (width 0 / 50 / 100%) */
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.stars { display: inline-flex; gap: 2px; }
.star { position: relative; display: inline-block; font-size: 2rem; line-height: 1; }
.star-base { color: var(--star-off); }
.star-fill { position: absolute; left: 0; top: 0; width: 0; overflow: hidden; white-space: nowrap; color: var(--star-on); pointer-events: none; }
.star button { position: absolute; top: 0; bottom: 0; width: 50%; padding: 0; margin: 0; background: none; border: 0; border-radius: 0; cursor: pointer; }
.star .half-left { left: 0; }
.star .half-right { right: 0; }
.star button:focus-visible { outline: 2px solid var(--orange-bright); outline-offset: 1px; }
.stars.locked, .stars.locked .star button { cursor: not-allowed; }
.stars.locked { opacity: .5; }
.rating button:disabled { opacity: .4; cursor: not-allowed; }

.overall { margin: 20px 0 0; padding: 12px 16px; border: 1px solid var(--border); border-left: 3px solid var(--orange); background: var(--bg); color: var(--orange-bright); font-weight: bold; letter-spacing: .5px; }

.comments { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.comments-title { margin: 30px 0 12px; }
.comment { padding: 12px 16px; border: 1px solid var(--border); border-left: 3px solid var(--orange); background: var(--bg); }
.comment-text { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment img { display: block; max-width: 100%; max-height: 16rem; margin-top: 10px; border: 1px solid var(--border); }

.composer { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--border); }
.composer label, .gif-panel label { color: var(--muted); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.composer textarea, .gif-panel input, .sort select {
    width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--orange-dark); border-radius: 0;
    background: var(--bg); color: var(--orange-bright); caret-color: var(--orange-bright); font: inherit;
}
.composer textarea { min-height: 10rem; resize: vertical; line-height: 1.6; }
.composer textarea:focus, .gif-panel input:focus, .sort select:focus { outline: 0; border-color: var(--orange); box-shadow: 0 0 15px rgba(182,90,56,.15); }
.gif-selected { display: flex; align-items: flex-end; gap: 12px; }
.gif-selected img { max-height: 10rem; max-width: 60%; border: 1px solid var(--border); }
.composer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gif-panel { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--border); background: var(--bg); }
.gif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 6px; max-height: 20rem; overflow-y: auto; }
.gif-grid button { padding: 0; border: 2px solid transparent; border-radius: 0; background: var(--panel); cursor: pointer; line-height: 0; }
.gif-grid button:hover { border-color: var(--orange-bright); }
.gif-grid img { width: 100%; height: 8rem; object-fit: cover; }

.stage-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 20px 0 0; padding: 12px 16px; border: 1px solid var(--border); border-left: 3px solid var(--orange); background: var(--bg); }
.stage-panel p { margin: 0; flex: 1 1 14rem; }
.stage-actions { display: inline-flex; gap: 6px; margin-right: 10px; vertical-align: middle; }

.summary { margin-bottom: 8px; }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 12px 0 16px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 6px 14px; border: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--text); font: inherit; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }
.chip:hover { border-color: var(--orange-bright); color: var(--orange-bright); }
.chip[aria-pressed="true"] { border-color: var(--orange); background: var(--orange); color: var(--on-orange); font-weight: bold; }
.sort { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
.sort select { width: auto; padding: 6px 10px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); background: var(--panel); box-shadow: inset 0 0 30px rgba(0,0,0,.25); }
.decisions { width: 100%; border-collapse: collapse; }
.decisions th, .decisions td { padding: 12px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); }
.decisions thead th { color: var(--orange); font-size: 10px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; background: var(--panel-light); }
.decisions tbody tr:last-child > * { border-bottom: 0; }
.decisions tbody tr:hover { background: var(--panel-light); }
.decisions th.name { color: var(--text); font-size: 14px; font-weight: bold; letter-spacing: .5px; }
.decisions .actions-col { text-align: right; }
.decisions tr.status-accepted { box-shadow: inset 3px 0 0 var(--accept); }
.decisions tr.status-denied   { box-shadow: inset 3px 0 0 var(--deny); }
.rating-cell { white-space: nowrap; }
.stars-static { display: inline-flex; margin-right: 8px; font-size: 1.1rem; line-height: 1; }
.star-s { color: var(--star-off); }
.star-s.on { color: var(--star-on); }
.star-s.half { background: linear-gradient(90deg, var(--star-on) 50%, var(--star-off) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.score { font-weight: bold; }

.pill { display: inline-block; padding: 2px 10px; border: 1px solid var(--border); border-radius: 0; color: var(--muted); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.pill.accepted { color: var(--accept); border-color: var(--accept); }
.pill.denied   { color: var(--deny);   border-color: var(--deny); }
.pill.stage1 { color: var(--orange-bright); border-color: var(--orange-dark); }
.pill.stage2 { color: var(--orange-bright); border-color: var(--orange-bright); }

.actions { display: flex; justify-content: flex-end; gap: 6px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--text); text-decoration: none; cursor: pointer; }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.view svg { stroke-width: 2; }
.icon-btn.accept { color: var(--accept); }
.icon-btn.deny   { color: var(--deny); }
.icon-btn.view   { color: var(--orange-bright); }
.icon-btn:hover { background: var(--panel-light); border-color: currentColor; }
.icon-btn.accept[aria-pressed="true"] { background: var(--accept); border-color: var(--accept); color: var(--on-orange); }
.icon-btn.deny[aria-pressed="true"]   { background: var(--deny);   border-color: var(--deny);   color: var(--on-orange); }
.icon-btn:disabled { opacity: .3; cursor: not-allowed; }
.icon-btn:disabled:hover { background: transparent; border-color: var(--border); }

@media (max-width: 700px) {
    .terminal-content.wide { padding: 28px 16px 40px; }
    .detail { padding: 18px; }
    .footer-maker { align-items: flex-start; }
}

/* id card */
.account { position: relative; }
.account-trigger {
    display: inline-flex; align-items: center; gap: 10px; padding: 3px 8px 3px 3px;
    border: 1px solid transparent; background: transparent; cursor: pointer;
    color: var(--orange-bright); font: inherit; font-size: inherit; letter-spacing: 1px; text-transform: uppercase;
}
.account-trigger:hover, .account-trigger[aria-expanded="true"] { border-color: var(--orange-dark); background: rgba(182,90,56,.08); }
.account-trigger img { width: 24px; height: 24px; border: 1px solid var(--orange-dark); }
.account-caret { color: var(--orange); font-size: 10px; }

.id-card {
    position: absolute; top: calc(100% + 12px); right: 0; z-index: 60;
    width: min(340px, calc(100vw - 30px));
    border: 1px solid var(--orange-dark); background: var(--panel);
    box-shadow: 0 12px 40px rgba(0,0,0,.6), inset 0 0 30px rgba(0,0,0,.25);
    color: var(--text); text-transform: none; letter-spacing: normal; font-size: 12px; text-align: left;
}
.id-card::before {
    content: ""; position: absolute; top: -6px; right: 28px; width: 10px; height: 10px;
    background: var(--orange-dark); transform: rotate(45deg); z-index: -1;
}
.id-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 14px; background: var(--orange-dark); color: var(--text); font-size: 10px; font-weight: bold; letter-spacing: 2px; }
.id-top .maker-mark { color: var(--text); border-color: rgba(216,203,184,.5); }

.id-main { display: flex; gap: 16px; align-items: center; padding: 16px 14px 14px; }
.id-photo { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border: 1px solid var(--orange-dark); background: #0A0908; overflow: hidden; }
.id-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.7) saturate(1.4) hue-rotate(325deg) brightness(.85) contrast(1.2); }
.id-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.08) 0, rgba(255,255,255,.08) 1px, transparent 1px, transparent 5px); }
.id-initial { color: var(--orange); font-size: 32px; font-weight: bold; }
.id-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.id-name { color: var(--orange-bright); font-size: 18px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; overflow-wrap: anywhere; line-height: 1.2; }
.id-number { color: var(--text); font-size: 10px; letter-spacing: 1.5px; }
.id-clearance { color: var(--muted); font-size: 9px; letter-spacing: 1.5px; }

.id-rows { border-top: 1px solid var(--border); }
.id-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.id-label { color: var(--muted); font-size: 9px; letter-spacing: 1.5px; }
.id-value { color: var(--text); font-size: 11px; font-weight: bold; letter-spacing: 1px; text-align: right; overflow-wrap: anywhere; }
.id-value.with-head { display: inline-flex; align-items: center; gap: 8px; color: var(--orange-bright); }
.id-head { image-rendering: pixelated; border: 1px solid var(--orange-dark); }
.id-value.dim { color: var(--muted); font-weight: normal; }
.id-value.pending, .id-value.stage1, .id-value.stage2 { color: var(--orange-bright); }
.id-value.accepted { color: var(--accept); }
.id-value.denied { color: var(--danger); }

.id-vital { padding: 12px 14px 14px; border-bottom: 1px solid var(--border); }
.id-vital .id-label { margin-bottom: 8px; }
.id-stat { display: grid; grid-template-columns: 92px 1fr 18px; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 10px; letter-spacing: 1px; }
.id-stat-name { color: var(--text); }
.id-stat-bar { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.id-stat-bar i { height: 6px; background: var(--panel-light); border: 1px solid var(--border); }
.id-stat-bar i.on { background: var(--orange); border-color: var(--orange); }
.id-stat-num { text-align: right; color: var(--orange-bright); font-weight: bold; }

.id-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; }
.id-barcode { flex: 1; height: 22px; opacity: .55;
    background: repeating-linear-gradient(90deg, var(--text) 0 2px, transparent 2px 4px, var(--text) 4px 5px, transparent 5px 9px, var(--text) 9px 12px, transparent 12px 14px); }
.id-link { color: var(--orange-bright); font-size: 10px; font-weight: bold; letter-spacing: 1.5px; text-decoration: none; white-space: nowrap; }
.id-link:hover { color: var(--text); }
@media (max-width: 700px) {
    .account-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .session-bar { position: relative; }
    .account { position: static; }
    .id-card { top: calc(100% + 10px); left: 15px; right: 15px; width: auto; }
    .id-card::before { right: 40px; }
}

.vital-panel { margin: 20px 0 0; padding: 16px 18px; border: 1px solid var(--border); border-left: 3px solid var(--orange); background: var(--bg); }
.vital-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 12px; }
.vital-cell { display: flex; flex-direction: column; gap: 6px; }
.vital-name { color: var(--orange-bright); font-size: 11px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; }
.vital-value { color: var(--text); font-size: 24px; line-height: 1; }
.vital-bar { height: 4px; border: 1px solid var(--border); background: var(--panel-light); }
.vital-bar > span { display: block; height: 100%; background: var(--orange); }
.vital-desc { color: var(--muted); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
@media (max-width: 700px) { .vital-grid { grid-template-columns: repeat(2, 1fr); } }

.progress-panel { margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--border); border-left: 3px solid var(--orange); background: var(--bg); }
.progress-panel p { margin: 0 0 8px; color: var(--orange-bright); font-weight: bold; letter-spacing: .5px; }
.progress-bar { height: 8px; border: 1px solid var(--border); background: var(--panel); }
.progress-bar span { display: block; height: 100%; width: 0; background: var(--orange); transition: width .25s; }
.progress-panel .btn { margin-top: 12px; padding: 4px 10px; font-size: 10px; }

/* my reviews, the list of applications a reviewer has already dealt with */
.mine-panel { margin: 0 0 20px; padding: 16px 18px; border: 1px solid var(--border); border-left: 3px solid var(--orange); background: var(--panel); }
.mine-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 8px; }
.mine-head h2 { margin: 0; }
.mine-head h2:focus { outline: 0; }
.mine-head .btn { padding: 4px 10px; font-size: 10px; }
.mine-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 10px; }
.mine-filter { padding: 6px 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 11px; letter-spacing: 1px; cursor: pointer; }
.mine-filter:hover { border-color: var(--orange-dark); }
.mine-filter[aria-pressed="true"] { border-color: var(--orange); color: var(--orange-bright); font-weight: bold; }
/* the tick means picked, so the filter is not shown by colour alone */
.mine-filter[aria-pressed="true"]::before { content: "\2713\00a0"; }
.mine-list { display: grid; gap: 6px; margin: 12px 0; padding: 0; list-style: none; }
.mine-item { display: block; width: 100%; padding: 10px 12px; text-align: left; border: 1px solid var(--border); border-left: 3px solid var(--border); background: var(--bg); color: var(--text); font: inherit; cursor: pointer; }
.mine-item:hover { border-color: var(--orange); }
.mine-item-label { display: block; margin-bottom: 4px; font-size: 13px; overflow-wrap: anywhere; }
.mine-item .meta { display: block; }
.mine-filter:focus-visible, .mine-item:focus-visible { outline: 2px solid var(--orange-bright); outline-offset: 2px; }
.detail-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.btn.danger:hover:not(:disabled) { background: rgba(196,80,63,.1); box-shadow: none; }
.flag-panel { border-left-color: var(--danger); color: var(--text); }
.flag-panel p { color: var(--danger); font-weight: bold; }
.comment.flagged { border-left-color: var(--danger); }
.flag-note { margin: 0 0 6px; color: var(--danger); font-size: 12px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; }
.pill.flagged { color: var(--danger); border-color: var(--danger); }

.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
    color: var(--text); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { position: relative; width: 42px; height: 22px; border: 1px solid var(--border); background: var(--bg); transition: border-color .15s; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--muted); transition: transform .15s, background .15s; }
.switch input:checked + .track { border-color: var(--orange); }
.switch input:checked + .track::after { transform: translateX(20px); background: var(--orange-bright); }
.switch input:focus-visible + .track { outline: 2px solid var(--orange-bright); outline-offset: 2px; }

.comment .btn.small { margin-top: 10px; padding: 4px 10px; font-size: 10px; }

/* five page form: one-line answers, page intros, save button */
.question input {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--orange-dark);
    border-radius: 0;
    background: var(--bg);
    color: var(--orange-bright);
    caret-color: var(--orange-bright);
    font: inherit;
    font-size: 14px;
    line-height: 1.6;
}
.question input:focus {
    outline: 0;
    border-color: var(--orange);
    box-shadow: 0 0 15px rgba(182,90,56,.15);
}

.step-intro { margin: 0 0 20px; }
.step-intro h2 { margin: 0 0 8px; color: var(--orange-bright); font-size: 22px; letter-spacing: 1px; text-transform: uppercase; }
.step-intro .step-help { margin: 0; }

.step-actions { flex-wrap: wrap; }
.step-actions-right { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }

.save-status { min-height: 1.4em; margin: 10px 0 0; color: var(--muted); font-size: 10px; letter-spacing: 1px; line-height: 1.5; text-transform: uppercase; }
.save-status.ok  { color: var(--orange); }
.save-status.bad { color: var(--danger); }

/* decisions page totals */
.overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    margin: 0 0 20px;
    border: 1px solid var(--border);
    background: var(--border);
}
.overview-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--panel); }
.overview-label { color: var(--orange); font-size: 10px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; }
.overview-value { color: var(--text); font-size: 32px; line-height: 1; font-weight: bold; }
.overview-note { color: var(--muted); font-size: 10px; letter-spacing: .7px; }
.overview-tile.incomplete .overview-value { color: var(--warning, #C99A45); }
.overview-tile.accepted .overview-value { color: var(--accept); }
.overview-tile.denied .overview-value { color: var(--deny); }

/* situational topic picker, a terminal menu: one row per topic, [ ] turns into [X] when picked */
.topic-fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.topic-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; width: 100%; margin: 0 0 10px; padding: 0; color: var(--text); letter-spacing: 1px; text-transform: uppercase; }
.topic-legend::before { content: "$ select --topics"; color: var(--muted); font-size: 11px; letter-spacing: .5px; text-transform: none; }
.topic-legend span { color: var(--orange); font-size: 11px; }
.topic-grid { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); }
.topic { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 11px 16px 11px 38px; border-bottom: 1px dashed var(--border); cursor: pointer; letter-spacing: .5px; }
.topic:last-child { border-bottom: 0; }
.topic input { position: absolute; opacity: 0; pointer-events: none; }
/* the > cursor shows on hover and when focused with the keyboard */
.topic::before { content: ">"; position: absolute; left: 16px; color: var(--orange-bright); font-weight: bold; opacity: 0; }
.topic:hover::before, .topic:focus-within::before { opacity: 1; }
.topic:hover { background: var(--panel-light); }
.topic-num { color: var(--muted); font-size: 11px; }
.topic-name { flex: 1; color: var(--text); text-transform: uppercase; }
.topic::after { content: "[ ]"; margin-left: auto; color: var(--muted); letter-spacing: 1px; }
.topic.selected { background: var(--panel-light); box-shadow: inset 3px 0 0 var(--orange); }
.topic.selected::after { content: "[X]"; color: var(--orange-bright); font-weight: bold; }
.topic.selected .topic-num { color: var(--orange-bright); }
.topic.selected .topic-name { color: var(--orange-bright); }
/* once 3 are picked the rest dim out */
.topic.locked:not(.selected) { opacity: .35; cursor: not-allowed; }
.topic.locked:not(.selected):hover { background: transparent; }
.topic.locked:not(.selected):hover::before { opacity: 0; }
.topic.locked.selected { cursor: default; }
.topic-chosen { margin: 0 0 18px; color: var(--muted); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.topic-chosen span:first-child { color: var(--orange); }

/* denial reason popup on the decisions page */
.modal-overlay {
    position: fixed; inset: 0; z-index: 90;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(5,4,3,.82);
}
.modal {
    width: 100%; max-width: 520px;
    border: 1px solid var(--orange-dark); border-top: 3px solid var(--orange);
    background: var(--panel); box-shadow: 0 0 40px rgba(0,0,0,.6), inset 0 0 30px rgba(0,0,0,.25);
}
.modal-top {
    display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--orange); font-size: 10px; font-weight: bold; letter-spacing: 2px;
}
.modal-body { padding: 20px 20px 22px; }
.modal-body p { margin: 0 0 14px; color: var(--text); font-size: 12px; line-height: 1.7; letter-spacing: .5px; }
.modal textarea {
    display: block; width: 100%; min-height: 140px; padding: 12px 14px; resize: none;
    border: 1px solid var(--border); border-left: 3px solid var(--orange-dark); border-radius: 0;
    background: var(--bg); color: var(--orange-bright); caret-color: var(--orange-bright);
    font: inherit; font-size: 14px; line-height: 1.6;
}
.modal textarea::placeholder { color: var(--muted); }
.modal textarea:focus { outline: 0; border-color: var(--orange); box-shadow: 0 0 15px rgba(182,90,56,.15); }
.modal-count { margin-top: 6px; color: var(--muted); font-size: 10px; letter-spacing: 1px; text-align: right; }
.modal-body .modal-error { margin: 10px 0 0; color: var(--danger); font-size: 11px; letter-spacing: .8px; text-transform: uppercase; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* the reason shown to a denied applicant on the apply page */
.terminal-panel .denial-reason {
    margin: 16px 0 0; padding: 14px 16px;
    border: 1px solid var(--border); border-left: 3px solid var(--danger); background: var(--bg);
}
.denial-reason-label { display: block; margin-bottom: 6px; color: var(--danger); font-size: 10px; letter-spacing: 2px; }
.terminal-panel .denial-reason-text { margin: 0; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }

/* display settings. the Display menu in the header sets data-theme, data-font, data-size, data-palette, data-contrast and data-motion on <html> (see a11y.js), these rules react to them. keep this at the bottom so it wins over the rules above */

/* the dyslexia friendly fonts. they load from the fontsource CDN (jsDelivr) and the browser only downloads one once something on the page is using it, so that is the one picked or the three previews when the Display menu is opened. swap shows the fallback font until it arrives */
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 400; font-display: swap; src: url(https://cdn.jsdelivr.net/fontsource/fonts/lexend@latest/latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 700; font-display: swap; src: url(https://cdn.jsdelivr.net/fontsource/fonts/lexend@latest/latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "OpenDyslexic"; font-style: normal; font-weight: 400; font-display: swap; src: url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@5.3.0/latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "OpenDyslexic"; font-style: normal; font-weight: 700; font-display: swap; src: url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@5.3.0/latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url(https://cdn.jsdelivr.net/fontsource/fonts/atkinson-hyperlegible@latest/latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url(https://cdn.jsdelivr.net/fontsource/fonts/atkinson-hyperlegible@latest/latin-700-normal.woff2) format("woff2"); }

/* dyslexia friendly text: no all capitals, looser spacing and no scanlines over the text. the font itself is set for each choice below */
html[data-font]:not([data-font="standard"]) *,
html[data-font]:not([data-font="standard"]) *::before,
html[data-font]:not([data-font="standard"]) *::after {
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: .04em !important;
    word-spacing: .16em !important;
}
html[data-font]:not([data-font="standard"]) body,
html[data-font]:not([data-font="standard"]) p,
html[data-font]:not([data-font="standard"]) li { line-height: 1.9; }
html[data-font]:not([data-font="standard"]) body::before { display: none; }

/* the font for each choice, with plain fallbacks in case it has not loaded */
html[data-font="lexend"] *, html[data-font="lexend"] *::before, html[data-font="lexend"] *::after {
    font-family: "Lexend", Verdana, "Trebuchet MS", Tahoma, Arial, sans-serif !important;
}
html[data-font="opendyslexic"] *, html[data-font="opendyslexic"] *::before, html[data-font="opendyslexic"] *::after {
    font-family: "OpenDyslexic", Verdana, "Trebuchet MS", Tahoma, Arial, sans-serif !important;
}
html[data-font="atkinson"] *, html[data-font="atkinson"] *::before, html[data-font="atkinson"] *::after {
    font-family: "Atkinson Hyperlegible", Verdana, "Trebuchet MS", Tahoma, Arial, sans-serif !important;
}

/* text size. zoom scales the whole page, a phone's own text size setting still works on top of this */
html[data-size="large"]  { zoom: 1.15; }
html[data-size="larger"] { zoom: 1.3; }

/* light mode: paper colours in place of the dark terminal ones. the accents are darker so they still read on a light background */
html[data-theme="light"] {
    --orange:        #A3441F;
    --orange-bright: #8C3A18;
    --orange-dark:   #D3AE98;

    --bg:            #E8E1D2;
    --panel:         #F7F2E7;
    --panel-light:   #EEE7D8;
    --border:        #B2A58E;

    --text:          #2A2118;
    --muted:         #675B4C;
    --on-orange:     #FFFFFF;

    --danger:        #A62E1C;
    --accept:        #3A6B1F;
    --deny:          #A62E1C;

    --star-on:       #AD6000;
    --star-off:      #CDCDCD;
}
/* the scanlines and the header were made for a dark page */
html[data-theme="light"] body::before,
html[data-theme="light"] .boot::before {
    background: repeating-linear-gradient(to bottom, rgba(0,0,0,.03) 0, rgba(0,0,0,.03) 1px, transparent 1px, transparent 4px);
}
html[data-theme="light"] .terminal-header { background: rgba(247,242,231,.95); }
html[data-theme="light"] .id-top .maker-mark { border-color: rgba(42,33,24,.5); }

/* high contrast: brighter text, stronger borders and a thicker focus ring */
html[data-contrast="high"] {
    --bg:            #000000;
    --panel:         #070707;
    --panel-light:   #131313;
    --border:        #9C8F80;
    --text:          #FFFFFF;
    --muted:         #E3DBCE;
    --orange:        #FF9B6A;
    --orange-bright: #FFB38A;
    --orange-dark:   #B8663F;
    --on-orange:     #000000;
    --danger:        #FF8A78;
    --accept:        #A8D98A;
    --deny:          #FF8A78;
    --star-on:       #FFD23F;
    --star-off:      #7A7A7A;
}
html[data-contrast="high"] body::before { display: none; }
html[data-contrast="high"] :focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

/* colour blind safe: blue and yellow in place of green and red (these two stay apart for red-green and most other colour blindness). symbols are added so colour is never the only signal. comes after high contrast so it wins */
html[data-palette="colourblind"] {
    --accept: #56B4E9;
    --deny:   #F0E442;
    --danger: #F0E442;
}
html[data-palette="colourblind"] .status-steps li.current.accepted { background: rgba(86,180,233,.1); }
html[data-palette="colourblind"] .status-steps li.current.denied   { background: rgba(240,228,66,.08); }
html[data-palette="colourblind"] .btn.danger:hover:not(:disabled)  { background: rgba(240,228,66,.1); }
html[data-palette="colourblind"] .pill.accepted::before,
html[data-palette="colourblind"] .id-value.accepted::before { content: "\2713\00a0"; }
html[data-palette="colourblind"] .pill.denied::before,
html[data-palette="colourblind"] .id-value.denied::before   { content: "\2715\00a0"; }

/* light mode with high contrast or the colour blind palette. these come after the dark versions above so they win in light mode */
html[data-theme="light"][data-contrast="high"] {
    --bg:            #FFFFFF;
    --panel:         #FFFFFF;
    --panel-light:   #F0F0F0;
    --border:        #4A4A4A;
    --text:          #000000;
    --muted:         #222222;
    --orange:        #8A2F0C;
    --orange-bright: #7A2808;
    --orange-dark:   #C99A80;
    --on-orange:     #FFFFFF;
    --danger:        #9B1C0A;
    --accept:        #1F5A0E;
    --deny:          #9B1C0A;
    --star-on:       #8A5300;
    --star-off:      #B5B5B5;
}
html[data-theme="light"][data-contrast="high"] :focus-visible { outline: 3px solid #000000; outline-offset: 3px; }
html[data-theme="light"][data-palette="colourblind"] {
    --accept: #0B5CAD;
    --deny:   #8A6A00;
    --danger: #8A6A00;
}
html[data-theme="light"][data-palette="colourblind"] .status-steps li.current.accepted { background: rgba(11,92,173,.1); }
html[data-theme="light"][data-palette="colourblind"] .status-steps li.current.denied   { background: rgba(138,106,0,.1); }
html[data-theme="light"][data-palette="colourblind"] .btn.danger:hover:not(:disabled)  { background: rgba(138,106,0,.1); }

/* reduced motion: no animations or transitions, and the boot screens are skipped (boot.js and apply.js check the same setting) */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}
html[data-motion="reduced"] .boot { display: none !important; }

/* the Display menu in the header, built in app.js */
.session-tools { display: flex; align-items: center; gap: 12px; }
.display { position: relative; }
.display-trigger { padding: 3px 8px; }
.display-panel {
    position: absolute; top: calc(100% + 12px); right: 0; z-index: 60;
    width: min(380px, calc(100vw - 30px)); padding: 16px 18px;
    border: 1px solid var(--orange-dark); background: var(--panel);
    box-shadow: 0 12px 40px rgba(0,0,0,.6), inset 0 0 30px rgba(0,0,0,.25);
    color: var(--text); text-transform: none; letter-spacing: normal; font-size: 12px; text-align: left;
}
.display-panel h2 { margin: 0 0 14px; color: var(--orange-bright); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.display-panel fieldset { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.display-panel legend { padding: 0; margin-bottom: 6px; color: var(--muted); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.display-options { display: flex; flex-wrap: wrap; gap: 6px; }
.display-option { position: relative; }
.display-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.display-option span { display: inline-block; padding: 6px 10px; border: 1px solid var(--border); cursor: pointer; font-size: 11px; letter-spacing: 1px; }
.display-option span:hover { border-color: var(--orange-dark); }
/* each dyslexia friendly font is shown in its own font in the menu. the extra specificity is so these beat the rules for the picked font above */
.display-panel .display-option span[data-preview="lexend"]       { font-family: "Lexend", Verdana, sans-serif !important; }
.display-panel .display-option span[data-preview="opendyslexic"] { font-family: "OpenDyslexic", Verdana, sans-serif !important; }
.display-panel .display-option span[data-preview="atkinson"]     { font-family: "Atkinson Hyperlegible", Verdana, sans-serif !important; }
/* the tick means picked, so the choice is not shown by colour alone */
.display-option span::before { content: "[ ] "; white-space: pre; }
.display-option input:checked + span { border-color: var(--orange); color: var(--orange-bright); font-weight: bold; }
.display-option input:checked + span::before { content: "[\2713] "; }
.display-option input:focus-visible + span { outline: 2px solid var(--orange-bright); outline-offset: 2px; }
.display-hint { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; letter-spacing: .5px; }
.display-note { margin: 12px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; letter-spacing: .5px; }
@media (max-width: 700px) {
    .display { position: static; }
    .display-panel { top: calc(100% + 10px); left: 15px; right: 15px; width: auto; }
}
/* age check under the username on the apply form */
.age-check { min-width: 0; margin: 26px 0 0; padding: 0; border: 0; }
.age-check legend.field-label { padding: 0; }
.age-check .question-guide { display: block; margin: -4px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.6; letter-spacing: .5px; }
.age-check .confirm-row { margin: 0 0 12px; }
.age-minor { color: var(--orange-bright); font-weight: bold; }

/* denial popup with the reason categories. each category is a details tag so the arrow opens and closes it */
.modal:focus { outline: 0; }
.modal.wide { max-width: 760px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.modal.wide .modal-body { overflow-y: auto; }
.reason-cat { margin: 0 0 8px; border: 1px solid var(--border); background: var(--bg); }
.reason-cat > summary {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none;
    color: var(--text); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
}
.reason-cat > summary::-webkit-details-marker { display: none; }
.reason-cat > summary::before {
    content: ""; flex-shrink: 0; width: 0; height: 0; transition: transform .15s;
    border-left: 7px solid var(--orange); border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.reason-cat[open] > summary::before { transform: rotate(90deg); }
.reason-cat > summary:hover { background: var(--panel); }
.reason-cat > summary:focus-visible { outline: 2px solid var(--orange-bright); outline-offset: -2px; }
.reason-cat .cat-num { color: var(--orange); }
.reason-cat .cat-title { flex: 1; }
.reason-cat .cat-count { color: var(--orange-bright); font-size: 10px; }
.reason-cat .cat-tag { padding: 1px 6px; border: 1px solid var(--danger); color: var(--danger); font-size: 9px; }
.reason-cat-body { padding: 10px 14px 6px; border-top: 1px solid var(--border); }
.modal-body .reason-hint { margin: 0 0 8px; color: var(--muted); }
.modal-body .reason-staff { margin: 0 0 8px; color: var(--danger); font-size: 11px; letter-spacing: .8px; text-transform: uppercase; }
.reason-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; cursor: pointer; }
.reason-row input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.reason-row .confirm-box { margin-top: 2px; }
.reason-row input:checked + .confirm-box { background: var(--orange); }
.reason-row input:checked + .confirm-box::after {
    content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
    border: solid var(--on-orange); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.reason-row input:focus-visible + .confirm-box { outline: 2px solid var(--orange-bright); outline-offset: 2px; }
.reason-label { display: block; color: var(--text); font-size: 13px; line-height: 1.4; }
.reason-desc { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.reason-note-label { display: block; margin: 16px 0 8px; color: var(--muted); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
.modal .reason-note { min-height: 90px; }

/* the categories and reasons shown to a denied applicant */
.denial-cat { margin: 14px 0 0; }
.terminal-panel .denial-cat-title { margin: 0 0 6px; color: var(--orange-bright); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.denial-list { margin: 0; padding-left: 18px; }
.denial-list li { margin: 0 0 8px; color: var(--text); }
.denial-list .reason-desc { margin-top: 2px; }
.terminal-panel .denial-reason-text { margin-top: 14px; }

/* archive document, used on the About page: a header with the file details, numbered sections, an event box and a sign-off. the other record pages can use the same classes */
.doc { counter-reset: docsection; }
.doc-header { margin: 0 0 28px; padding: 18px 20px; border: 1px solid var(--border); border-top: 3px solid var(--orange-dark); background: var(--bg); }
.terminal-panel .doc-header p { margin: 0; }
.terminal-panel .doc-header .doc-nation { color: var(--text); font-size: 15px; font-weight: bold; letter-spacing: 3px; text-transform: uppercase; }
.terminal-panel .doc-header .doc-ministry { margin-top: 2px; color: var(--orange-bright); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.terminal-panel .doc-header .doc-archive { margin-top: 8px; color: var(--muted); font-size: 11px; letter-spacing: 1px; }
.doc-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--border); font-size: 11px; }
.doc-meta dt { color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; }
.doc-meta dt::after { content: " //"; color: var(--orange); }
.doc-meta dd { margin: 0; color: var(--text); letter-spacing: 1px; text-transform: uppercase; }
/* the stamp has a square and a border, so it is not shown by colour alone */
.doc-stamp { display: inline-block; padding: 1px 8px; border: 1px solid var(--orange); color: var(--orange-bright); font-weight: bold; }
.doc-stamp::before { content: "\25A0\00a0"; }

.terminal-panel h2.doc-title { margin: 0 0 6px; color: var(--text); font-size: clamp(20px, 3vw, 26px); letter-spacing: 2px; }
.terminal-panel p.doc-tagline { margin: 0 0 20px; color: var(--orange-bright); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.doc-lead { padding: 4px 0 4px 16px; border-left: 3px solid var(--orange-dark); }
.doc-lead p:last-child { margin-bottom: 0; }

.doc-contents { margin: 24px 0 0; padding: 14px 18px; border: 1px dashed var(--border); counter-reset: docitem; }
.terminal-panel .doc-contents-title { margin: 0 0 8px; color: var(--muted); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; }
.doc-contents ol { margin: 0; padding: 0; list-style: none; }
.doc-contents li { counter-increment: docitem; padding: 2px 0; }
.doc-contents li::before { content: counter(docitem, decimal-leading-zero) " // "; color: var(--orange); font-size: 11px; letter-spacing: 1px; }
.doc-contents a { color: var(--text); font-size: 12px; letter-spacing: .5px; text-decoration: none; }
.doc-contents a:hover { color: var(--orange-bright); text-decoration: underline; }

.doc-section { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border); counter-increment: docsection; scroll-margin-top: 90px; }
.terminal-panel .doc-section h3 { margin: 0 0 14px; color: var(--orange-bright); font-size: 18px; letter-spacing: 1px; text-transform: uppercase; }
.doc-section h3::before { content: "SECTION " counter(docsection, decimal-leading-zero) " //"; display: block; margin-bottom: 6px; color: var(--orange); font-size: 10px; letter-spacing: 2px; }

.doc-event { margin: 22px 0 6px; padding: 16px 18px; border: 1px solid var(--orange-dark); border-left: 3px solid var(--orange); background: var(--bg); }
.terminal-panel .doc-event .doc-event-label { margin: 0 0 10px; color: var(--orange); font-size: 10px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; }
.doc-event .doc-event-label::before { content: "\25B6\00a0"; }
.doc-event p:last-child { margin-bottom: 0; }

.doc-sign { margin: 34px 0 0; padding: 18px 20px; border: 1px solid var(--border); border-top: 3px solid var(--orange-dark); text-align: center; }
.terminal-panel .doc-sign p { margin: 0; }
.doc-sign-name { color: var(--text); font-size: 12px; font-weight: bold; letter-spacing: 3px; text-transform: uppercase; }
.doc-sign-nation { margin-top: 2px; color: var(--muted); font-size: 11px; letter-spacing: 1px; }
.terminal-panel .doc-sign .doc-motto { margin-top: 10px; color: var(--orange-bright); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.terminal-panel p.doc-end { margin: 24px 0 0; color: var(--muted); font-size: 10px; letter-spacing: 3px; text-align: center; text-transform: uppercase; }
.doc .step-note { margin-top: 22px; }
.doc-end::before { content: "-- "; }
.doc-end::after { content: " --"; }
/* on a phone the file details stack so the labels don't wrap */
@media (max-width: 520px) {
    .doc-meta { grid-template-columns: 1fr; gap: 2px; }
    .doc-meta dd { margin-bottom: 8px; }
}