/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
    --bg:        #0b1017;
    --bg-2:      #111823;
    --panel:     #151e2b;
    --line:      #243246;
    --text:      #dfe7f1;
    --muted:     #8798ad;
    --accent:    #f5a524;   /* bounty amber */
    --accent-2:  #3fb6d9;   /* HUD cyan */
    --danger:    #e5484d;
    --ok:        #3dd68c;
    --radius:    6px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body {
    margin: 0;
    font: 15px/1.55 var(--font);
    color: var(--text);
    background:
        radial-gradient(1200px 500px at 80% -10%, rgba(63,182,217,.10), transparent 60%),
        var(--bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2 { margin: 0 0 .5rem; font-weight: 650; letter-spacing: .01em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.15rem; }

.wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding-inline: 1.25rem; }
main.wrap { flex: 1; padding-block: 2rem; display: grid; gap: 1.5rem; align-content: start; }
.muted { color: var(--muted); }
.eyebrow {
    margin: 0 0 .25rem; font: 600 .72rem/1 var(--mono);
    letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}

/* ── Header / footer ────────────────────────────────────────────────────── */
.site-header { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: .9rem; }
.brand { display: flex; align-items: center; gap: .7rem; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-mark { font-size: 1.6rem; color: var(--accent); }
.brand-name { display: block; font-weight: 700; letter-spacing: .04em; }
.brand-tag  { display: block; font: .7rem/1.2 var(--mono); color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; font-size: .92rem; }
.site-nav a { color: var(--muted); }
.site-nav a.active, .site-nav a:hover { color: var(--text); text-decoration: none; }
.nav-user { padding: .2rem .6rem; border: 1px solid var(--line); border-radius: 99px; font-size: .82rem; }

.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; padding-block: 1.25rem; text-align: center; }

/* ── Panels ─────────────────────────────────────────────────────────────── */
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
}
.hero { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
        border-left: 3px solid var(--accent); }
.hero p { margin: 0; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .6rem 1.1rem; border-radius: var(--radius);
    border: 1px solid var(--line); background: var(--bg-2); color: var(--text);
    font: 600 .92rem/1 var(--font); cursor: pointer;
}
.btn:hover { text-decoration: none; border-color: var(--muted); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #1a1205; }
.btn-primary:hover { background: #ffb941; border-color: #ffb941; }
.btn-lg { padding: .9rem 1.6rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
button:disabled, fieldset:disabled .btn-primary { opacity: .45; cursor: not-allowed; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; margin-top: .75rem; }
.links-table { width: 100%; border-collapse: collapse; }
.links-table th, .links-table td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.links-table thead th { font: 600 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.links-table .group-row th {
    background: var(--bg-2); color: var(--accent);
    font: 600 .75rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding-top: .9rem;
}
.links-table tbody tr:not(.group-row):hover { background: rgba(63,182,217,.06); }
.links-table td:first-child a { font-weight: 600; white-space: nowrap; }
.col-cat { display: none; }   /* group rows already show the category */

/* ── Forms ──────────────────────────────────────────────────────────────── */
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.field { display: block; margin-bottom: 1rem; }
.label { display: block; margin-bottom: .35rem; font: 600 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
input, select, textarea {
    width: 100%; padding: .6rem .75rem; border-radius: var(--radius);
    border: 1px solid var(--line); background: var(--bg); color: var(--text);
    font: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-2); }
fieldset:disabled input, fieldset:disabled select, fieldset:disabled textarea { opacity: .6; }

input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; }
.hint { display: block; margin-top: .3rem; font-size: .8rem; color: var(--muted); }

.bounty-form { display: grid; gap: 1.5rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1.25rem; margin-top: 1rem; }
.field-wide { grid-column: 1 / -1; }
.actions { display: flex; justify-content: flex-end; gap: .75rem; }

/* ── Reward section ─────────────────────────────────────────────────────── */
.reward { border-left: 3px solid var(--accent); }
.reward > .muted { margin: 0 0 1rem; }
.reward-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.choice-card {
    display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: center;
    padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--bg); cursor: pointer;
}
.choice-card input { width: auto; grid-row: span 2; accent-color: var(--accent); }
.choice-title { font-weight: 650; }
.choice-sub { font-size: .82rem; color: var(--muted); }
.choice-card:has(input:checked) { border-color: var(--accent); background: rgba(245,165,36,.07); }

.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.check {
    display: flex; align-items: center; gap: .55rem; padding: .55rem .75rem;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); cursor: pointer;
}
.check input { width: auto; accent-color: var(--accent); }
.check:has(input:checked) { border-color: var(--accent-2); }

/* ── Conditional sub-sections (e.g. Acquisition target) ─────────────────── */
.subsection {
    margin: 0 0 1rem; padding: 1rem 1.1rem .25rem;
    border: 1px solid var(--line); border-left: 3px solid var(--accent-2);
    border-radius: var(--radius); background: var(--bg-2);
}
.subsection legend {
    padding: 0 .4rem; font: 600 .75rem/1 var(--mono);
    letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2);
}
.subsection .form-grid { margin-top: .25rem; }

/* ── SCDB search (full width of its section) ────────────────────────────── */
.scdb-search { position: relative; width: 100%; margin-top: .5rem; }
.scdb-search .field { margin-bottom: .25rem; }
.scdb-search input[type="search"] {
    padding-left: 2.1rem;
    background: var(--bg) no-repeat .7rem 50% / 1rem
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238798ad' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}
.scdb-status { min-height: 1.2em; margin: 0 0 .5rem; }
.scdb-status.is-error { color: #ffb3b5; }
.scdb-results {
    list-style: none; margin: 0 0 1rem; padding: .25rem;
    max-height: 18rem; overflow-y: auto;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
}
.scdb-option {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .15rem 1rem;
    padding: .5rem .65rem; border-radius: 4px; cursor: pointer;
}
.scdb-option:hover, .scdb-option.is-active { background: rgba(63,182,217,.10); }
.scdb-option[aria-selected="true"] { background: rgba(245,165,36,.12); box-shadow: inset 3px 0 0 var(--accent); }
.scdb-name { font-weight: 600; }
.scdb-meta { font: .78rem/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }

@supports selector(:has(*)) {
    .bounty-form:not(:has(#bounty-type option[value="acquisition"]:checked)) .acq-section { display: none; }
}

/* Show only the panel for the chosen reward type (both show if :has is unsupported) */
@supports selector(:has(*)) {
    .reward:has(#rt-auec:checked)     .panel-services { display: none; }
    .reward:has(#rt-services:checked) .panel-auec     { display: none; }
}

.auth-card { width: 100%; max-width: 420px; margin: 2rem auto; }
.auth-card h1 { font-size: 1.4rem; }
.auth-card form { margin-top: 1.25rem; }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert { padding: .7rem .95rem; border-radius: var(--radius); border: 1px solid; font-size: .92rem; margin: .75rem 0; }
.alert-success { border-color: rgba(61,214,140,.4); background: rgba(61,214,140,.08); color: #9ff0c7; }
.alert-error   { border-color: rgba(229,72,77,.45); background: rgba(229,72,77,.08); color: #ffb3b5; }
.alert-info    { border-color: rgba(63,182,217,.4); background: rgba(63,182,217,.08); color: #a9e3f4; }

/* ── Create user ────────────────────────────────────────────────────────── */
form.panel h2 { margin-top: .5rem; }
form.panel h2 + .form-grid { margin-bottom: .5rem; }
.temp-password { margin-top: .5rem; }
.temp-password code {
    font: 600 1rem/1 var(--mono); padding: .25rem .5rem; border-radius: 4px;
    background: var(--bg); color: var(--accent); user-select: all;
}

/* ── Org banner (home page) ─────────────────────────────────────────────── */
:root { --neon-orange: #ff9a2e; --neon-cyan: #3fd8ff; --chamfer: 22px; }

.org-banner {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.75rem;
    padding-block: 2.5rem;
    background:
        radial-gradient(600px 320px at 50% 0%, rgba(63,216,255,.10), transparent 70%),
        radial-gradient(500px 300px at 50% 100%, rgba(255,154,46,.10), transparent 70%),
        var(--panel);
    overflow: hidden;
}
.org-info { display: flex; flex-direction: column; align-items: center; }

/* Futuristic HUD frame: chamfered corners, gradient edge, light sweep, corner brackets */
.org-logo-frame {
    position: relative; width: min(340px, 80%); padding: 14px;
    filter: drop-shadow(0 0 10px rgba(255,154,46,.35)) drop-shadow(0 0 22px rgba(63,216,255,.18));
    transition: filter .25s;
}
.org-logo-frame:hover {
    filter: drop-shadow(0 0 14px rgba(63,216,255,.5)) drop-shadow(0 0 28px rgba(255,154,46,.25));
}
.org-logo {
    position: relative; display: block; line-height: 0; padding: 3px;
    clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
                       calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
    background: linear-gradient(135deg, var(--neon-orange), #ffcf7a 25%, var(--neon-cyan) 50%, #1d6c86 75%, var(--neon-orange));
    background-size: 300% 300%;
    animation: hud-edge 8s linear infinite;
}
.org-logo img {
    width: 100%; height: auto; display: block;
    clip-path: polygon(calc(var(--chamfer) - 1px) 0, 100% 0, 100% calc(100% - var(--chamfer) + 1px),
                       calc(100% - var(--chamfer) + 1px) 100%, 0 100%, 0 calc(var(--chamfer) - 1px));
}
/* faint scanlines over the image */
.org-logo::after {
    content: ""; position: absolute; inset: 3px; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px);
    mix-blend-mode: multiply;
}
@keyframes hud-edge { to { background-position: 300% 300%; } }

.hud-corner {
    position: absolute; width: 26px; height: 26px; pointer-events: none;
    border: 0 solid var(--neon-cyan);
}
.hud-corner.tl { top: 0;    left: 0;  border-top-width: 2px;    border-left-width: 2px; }
.hud-corner.tr { top: 0;    right: 0; border-top-width: 2px;    border-right-width: 2px; border-color: var(--neon-orange); }
.hud-corner.bl { bottom: 0; left: 0;  border-bottom-width: 2px; border-left-width: 2px;  border-color: var(--neon-orange); }
.hud-corner.br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

.hud-tag {
    position: absolute; bottom: -.35rem; left: 50%; transform: translateX(-50%);
    padding: .1rem .55rem; background: var(--panel);
    font: 600 .62rem/1.4 var(--mono); letter-spacing: .22em; color: var(--neon-cyan);
    border: 1px solid rgba(63,216,255,.45); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .org-logo { animation: none; }
}

.org-name {
    margin: 0; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.05;
    font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--neon-orange);
    text-shadow: 0 0 6px rgba(255,154,46,.55), 0 0 22px rgba(255,154,46,.30);
}
.org-motto {
    margin: .5rem 0 1.5rem; font: 600 .78rem/1.4 var(--mono);
    letter-spacing: .18em; text-transform: uppercase; color: var(--neon-cyan);
}

/* Neon-sign style link to the RSI org page */
.rsi-link {
    display: inline-flex; align-items: center; gap: .9rem; max-width: 100%; text-align: left;
    padding: .85rem 1.2rem; border-radius: 10px;
    border: 2px solid var(--neon-orange); background: rgba(11,16,23,.75);
    color: var(--text);
    box-shadow: 0 0 10px rgba(255,154,46,.35), inset 0 0 12px rgba(255,154,46,.12);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.rsi-link:hover {
    text-decoration: none; transform: translateY(-1px); border-color: var(--neon-cyan);
    box-shadow: 0 0 14px rgba(63,216,255,.45), inset 0 0 14px rgba(63,216,255,.15);
}
.rsi-link:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 3px; }
.rsi-link-icon { font-size: 1.5rem; color: var(--neon-orange); text-shadow: 0 0 8px rgba(255,154,46,.7); }
.rsi-link-text { display: grid; min-width: 0; }
.rsi-link-title { font-weight: 700; letter-spacing: .04em; color: var(--neon-cyan);
    text-shadow: 0 0 8px rgba(63,216,255,.5); }
.rsi-link-url { font: .74rem/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.rsi-link-arrow { font-size: 1.2rem; color: var(--neon-orange); }

/* ── Members list + profile ─────────────────────────────────────────────── */
a.nav-user:hover { border-color: var(--muted); }
.btn-sm { padding: .4rem .75rem; font-size: .82rem; }
.mono { font-family: var(--mono); font-size: .88rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.list-head, .profile-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.list-head p, .profile-head p { margin: 0; }
.head-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { text-align: left; padding: .65rem .75rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table thead th { font: 600 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.data-table tbody tr:hover { background: rgba(63,182,217,.05); }
.data-table tr.is-me { background: rgba(245,165,36,.05); }
.col-actions { text-align: right !important; white-space: nowrap; }
.col-actions .btn + .btn { margin-left: .4rem; }

.you-tag { margin-left: .4rem; padding: .05rem .4rem; border-radius: 99px; font: 600 .65rem/1.5 var(--mono);
    letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(245,165,36,.5); }
.role-badge { display: inline-block; padding: .1rem .55rem; border-radius: 99px; font: 600 .72rem/1.5 var(--mono);
    letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line); color: var(--muted); }
.role-badge.role-admin   { color: var(--accent);   border-color: rgba(245,165,36,.55); }
.role-badge.role-officer { color: var(--accent-2); border-color: rgba(63,182,217,.55); }
.status-pending  { color: var(--accent); }
.status-disabled { color: #ffb3b5; }
.status-active   { color: var(--ok); }

.detail-list { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 0; margin: .75rem 0 0; }
.detail-list dt, .detail-list dd { margin: 0; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.detail-list dt { font: 600 .72rem/1.9 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 520px) {
    .detail-list { grid-template-columns: 1fr; }
    .detail-list dt { border-bottom: 0; padding-bottom: 0; }
}

/* ── Floating "Welcome back" dock (all logged-in pages) ─────────────────── */
.dock {
    --dock-w: 240px;
    --tab-w: 34px;
    --dock-shift: 0px;
    position: fixed; z-index: 50; right: 0; top: 50%;
    display: flex; align-items: flex-start;
    transform: translate(var(--dock-shift), -50%);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
/* closed: slide the body off-screen, leaving only the chevron tab */
.dock.dock-closed { --dock-shift: var(--dock-w); }
.dock.dock-auto   { --dock-shift: var(--dock-w); --dock-auto-open: 0; }
@media (min-width: 1600px) {
    .dock.dock-auto { --dock-shift: 0px; --dock-auto-open: 1; }
}

.dock-toggle {
    flex: 0 0 var(--tab-w); width: var(--tab-w); height: 64px; margin-top: 1.25rem;
    display: grid; place-items: center; cursor: pointer;
    color: var(--accent); background: var(--bg-2);
    border: 1px solid var(--line); border-right: 0; border-radius: 10px 0 0 10px;
    box-shadow: -4px 0 14px rgba(0,0,0,.35);
}
.dock-toggle:hover { color: var(--neon-cyan, var(--accent-2)); border-color: var(--muted); }
.dock-toggle:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.dock-toggle svg { transition: transform .35s; }
/* chevron points left (slide in) when closed, right (slide out) when open */
.dock[aria-label] .dock-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.dock-body {
    width: var(--dock-w); padding: 1.1rem 1.1rem 1.2rem;
    background: var(--panel); border: 1px solid var(--line); border-right: 0;
    border-left: 3px solid var(--accent); border-radius: 0 0 0 10px;
    box-shadow: -8px 8px 28px rgba(0,0,0,.45);
}
.dock-body .eyebrow { margin-bottom: .35rem; }
.dock-name { display: block; font-size: 1.15rem; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.dock-name:hover { color: var(--accent-2); text-decoration: none; }
.dock-meta { margin: .35rem 0 1rem; }

.dock-actions { display: grid; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.dock-action {
    display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem;
    border-radius: var(--radius); font-weight: 600; color: #1a1205; background: var(--accent);
}
.dock-action:hover { text-decoration: none; background: #ffb941; }
.dock-action.active { box-shadow: inset 0 0 0 2px #1a1205; }
.dock-icon { width: 1.1rem; text-align: center; }

@media (prefers-reduced-motion: reduce) {
    .dock, .dock-toggle svg { transition: none; }
}