/* ==========================================================================
   DefiantScape bug tracker.

   The tokens, the two fonts and the corner treatment are lifted from
   defiantscape.com so the tracker reads as part of the same site rather than
   a third-party tool someone bolted on. What is deliberately not carried over
   is the motion: the homepage is a shop window and can afford drifting glows
   and rising embers, while this is a tool people use for twenty minutes at a
   time, where movement at the edge of the eye is a nuisance.
   ========================================================================== */

:root {
    --bg-primary: #050a18;
    --bg-secondary: #0a1128;
    --bg-card: #0d1a36;
    --bg-card-hover: #112244;

    --text-primary: #e8f0ff;
    --text-secondary: #7a8fad;
    --text-muted: #56688a;

    --accent: #00d4ff;
    --accent-hover: #00b8e6;
    --accent-glow: rgba(0, 212, 255, 0.4);
    --accent-subtle: rgba(0, 212, 255, 0.08);
    --gold: #ffc861;

    --border-color: rgba(0, 212, 255, 0.12);
    --border-strong: rgba(0, 212, 255, 0.28);

    --danger: #ff6b6b;
    --success: #3ddc84;
    --warn: #ffb347;

    --font-display: "Cinzel", Georgia, "Times New Roman", serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    --nav-height: 68px;
}

/* Self-hosted, the same faces and the same swap behaviour as the main site. */
@font-face {
    font-family: "Cinzel"; font-style: normal; font-weight: 700;
    font-display: swap; src: url("/assets/fonts/cinzel-700.woff2") format("woff2");
}
@font-face {
    font-family: "Cinzel"; font-style: normal; font-weight: 900;
    font-display: swap; src: url("/assets/fonts/cinzel-900.woff2") format("woff2");
}
@font-face {
    font-family: "Inter"; font-style: normal; font-weight: 400;
    font-display: swap; src: url("/assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
    font-family: "Inter"; font-style: normal; font-weight: 600;
    font-display: swap; src: url("/assets/fonts/inter-600.woff2") format("woff2");
}
@font-face {
    font-family: "Inter"; font-style: normal; font-weight: 700;
    font-display: swap; src: url("/assets/fonts/inter-700.woff2") format("woff2");
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------- background --- */

/* The same two scenes the main site uses, and the same way round: the sign-in
   page gets the one behind sign in and register, and everything past sign-in
   gets the one behind the dashboard and the admin panel. Arriving here from
   defiantscape.com should not feel like a different building.

   It is a fixed layer behind the content rather than a background on body,
   because a body background would scroll away on a long board and the panels
   need something to sit against all the way down. */
.page-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(0, 212, 255, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(0, 212, 255, 0.05) 0%, transparent 50%),
        linear-gradient(180deg, rgba(5, 10, 24, 0.82) 0%, rgba(5, 10, 24, 0.88) 55%, rgba(5, 10, 24, 0.94) 100%),
        url("/assets/img/bg-dashboard.webp?v=1") center center / cover no-repeat;
    background-attachment: scroll, scroll, scroll, fixed;
}

body.is-signin .page-bg {
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(0, 212, 255, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(0, 212, 255, 0.05) 0%, transparent 50%),
        linear-gradient(180deg, rgba(5, 10, 24, 0.80) 0%, rgba(5, 10, 24, 0.86) 55%, rgba(5, 10, 24, 0.94) 100%),
        url("/assets/img/bg-auth.webp?v=1");
}

/* Everything the visitor actually reads sits above the scene. */
.topbar, main, .site-foot { position: relative; z-index: 1; }

/* Phones get the 1000px files. The full images are 152 and 186 KB for a
   picture a narrow screen crops most of away. */
@media (max-width: 767.98px) {
    .page-bg {
        background-image:
            radial-gradient(ellipse at 20% 50%, rgba(0, 212, 255, 0.08) 0%, transparent 60%),
            radial-gradient(ellipse at 80% 20%, rgba(0, 212, 255, 0.05) 0%, transparent 50%),
            linear-gradient(180deg, rgba(5, 10, 24, 0.86) 0%, rgba(5, 10, 24, 0.90) 55%, rgba(5, 10, 24, 0.95) 100%),
            url("/assets/img/bg-dashboard-sm.webp?v=1");
    }
    body.is-signin .page-bg {
        background-image:
            radial-gradient(ellipse at 20% 50%, rgba(0, 212, 255, 0.08) 0%, transparent 60%),
            radial-gradient(ellipse at 80% 20%, rgba(0, 212, 255, 0.05) 0%, transparent 50%),
            linear-gradient(180deg, rgba(5, 10, 24, 0.84) 0%, rgba(5, 10, 24, 0.90) 55%, rgba(5, 10, 24, 0.95) 100%),
            url("/assets/img/bg-auth-sm.webp?v=1");
    }
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; margin: 0 0 0.6rem; }
h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 900; letter-spacing: -0.01em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.02rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

.accent { color: var(--accent); }
.muted  { color: var(--text-muted); }
.wrap   { width: min(1180px, calc(100% - 2.4rem)); margin: 0 auto; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--accent); color: #04121c; padding: 0.6rem 1rem; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------- topbar --- */

.topbar {
    position: sticky; top: 0; z-index: 40;
    height: var(--nav-height);
    display: flex; align-items: center;
    background: rgba(5, 10, 24, 0.88);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.topbar-inner { display: flex; align-items: center; gap: 1.2rem; position: relative; }

.brand { display: flex; align-items: baseline; gap: 0.6rem; color: var(--text-primary); }
.brand-text {
    font-family: var(--font-display); font-weight: 900;
    font-size: 1.2rem; letter-spacing: 0.04em;
}
.brand-tag {
    font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--accent); border: 1px solid var(--border-strong);
    padding: 0.16rem 0.45rem;
}

.topbar-nav { margin-left: auto; display: flex; align-items: center; gap: 1.3rem; }

.tlink {
    position: relative; color: var(--text-secondary); font-weight: 500; font-size: 0.92rem;
    padding: 0.4rem 0; transition: color 0.3s var(--ease-out);
}
.tlink::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    transform: scaleX(0); transition: transform 0.35s var(--ease-out);
}
.tlink:hover, .tlink.is-active { color: var(--text-primary); }
.tlink:hover::after, .tlink.is-active::after { transform: scaleX(1); }

.who { display: flex; flex-direction: column; line-height: 1.15; text-align: right; }
.who-name { font-weight: 700; font-size: 0.9rem; }
.who-rank { font-size: 0.7rem; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; }
.signout-form { margin: 0; }

.topbar-toggle {
    display: none; margin-left: auto;
    width: 44px; height: 44px; padding: 0;
    background: none; border: 1px solid var(--border-strong); cursor: pointer;
}
.topbar-toggle span {
    display: block; width: 20px; height: 2px; margin: 4px auto; background: var(--accent);
    transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.topbar-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topbar-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topbar-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------------------------------------- panels --- */

/* Square corners with a thickened top-left and bottom-right, drawn by one
   pseudo-element with four gradients. The same recipe the main site uses, for
   the same reason: it leaves ::before free for anything else. */
.panel {
    position: relative;
    /* Slightly translucent so the scene behind is felt rather than hidden,
       but dark enough that body text keeps its contrast over a photograph. */
    background: rgba(13, 26, 54, 0.92);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
}
.panel::after {
    content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 2;
    background:
        linear-gradient(var(--accent), var(--accent)) 0    0    / 20px 2px  no-repeat,
        linear-gradient(var(--accent), var(--accent)) 0    0    / 2px  20px no-repeat,
        linear-gradient(var(--accent), var(--accent)) 100% 100% / 20px 2px  no-repeat,
        linear-gradient(var(--accent), var(--accent)) 100% 100% / 2px  20px no-repeat;
    opacity: 0.45;
    transition: opacity 0.4s var(--ease-out);
}
.panel:hover::after { opacity: 0.75; }

.page-head { padding: 2.4rem 0 1.4rem; }
.page-head p { color: var(--text-secondary); margin: 0.2rem 0 0; max-width: 62ch; }

.eyebrow {
    display: inline-block; font-size: 0.7rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--accent);
    border: 1px solid var(--border-strong); padding: 0.2rem 0.55rem; margin-bottom: 0.9rem;
}

/* -------------------------------------------------------------- buttons -- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    font-family: var(--font-body); font-weight: 600; font-size: 0.92rem;
    padding: 0.62rem 1.25rem; border: 1px solid transparent; border-radius: 0;
    cursor: pointer; text-decoration: none;
    transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out),
                border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.btn-sm { padding: 0.42rem 0.85rem; font-size: 0.84rem; }

.btn-accent { background: var(--accent); color: #04121c; }
.btn-accent:hover { background: var(--accent-hover); color: #04121c; box-shadow: 0 0 18px -2px var(--accent-glow); }

.btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border-strong); }
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-subtle); }

.btn-danger { background: transparent; color: var(--danger); border-color: rgba(255, 107, 107, 0.4); }
.btn-danger:hover { background: rgba(255, 107, 107, 0.1); border-color: var(--danger); color: var(--danger); }

/* --------------------------------------------------------------- forms --- */

.field { margin-bottom: 1.15rem; }
.field label {
    display: block; margin-bottom: 0.4rem; font-weight: 600; font-size: 0.86rem;
    letter-spacing: 0.04em; color: var(--text-primary);
}
.field .hint { display: block; margin-top: 0.3rem; font-size: 0.8rem; color: var(--text-muted); }

input[type="text"], input[type="password"], input[type="search"], input[type="file"],
select, textarea {
    width: 100%; padding: 0.65rem 0.85rem;
    background: rgba(5, 10, 24, 0.7); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: 0;
    font-family: var(--font-body); font-size: 0.94rem;
    transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle);
}
textarea { min-height: 170px; resize: vertical; line-height: 1.6; }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.15rem; }

/* --------------------------------------------------------------- flash --- */

.flash {
    margin: 1.2rem 0 0; padding: 0.8rem 1.1rem;
    border: 1px solid var(--border-strong); background: var(--accent-subtle);
    font-size: 0.92rem;
}
.flash.is-error   { border-color: rgba(255, 107, 107, 0.45); background: rgba(255, 107, 107, 0.08); color: #ffc9c9; }
.flash.is-success { border-color: rgba(61, 220, 132, 0.45);  background: rgba(61, 220, 132, 0.08);  color: #bff7d6; }

/* -------------------------------------------------------------- badges --- */

.badge {
    display: inline-block; padding: 0.2rem 0.6rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    border: 1px solid currentColor;
}
.badge.s-new              { color: var(--accent); }
.badge.s-confirmed        { color: var(--warn); }
.badge.s-in-progress      { color: var(--gold); }
.badge.s-fixed            { color: var(--success); }
.badge.s-cannot-reproduce,
.badge.s-duplicate,
.badge.s-rejected         { color: var(--text-muted); }

.badge.p-low      { color: var(--text-muted); }
.badge.p-medium   { color: var(--accent); }
.badge.p-high     { color: var(--warn); }
.badge.p-critical { color: var(--danger); }

/* --------------------------------------------------------------- table --- */

.board { margin: 1.4rem 0 3rem; }

.board-tools {
    display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center;
    margin-bottom: 1.1rem;
}
.board-tools .grow { flex: 1 1 220px; }
.board-tools select { width: auto; min-width: 150px; }

.table-scroll { overflow-x: auto; }

table.reports { width: 100%; min-width: 720px; border-collapse: collapse; }
table.reports thead th {
    text-align: left; padding: 0.7rem 0.9rem;
    font-family: var(--font-display); font-size: 0.72rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
    border-bottom: 1px solid var(--border-strong);
    white-space: nowrap;
}
table.reports tbody td {
    padding: 0.85rem 0.9rem; border-bottom: 1px solid rgba(0, 212, 255, 0.07);
    vertical-align: top;
}
table.reports tbody tr { transition: background 0.25s var(--ease-out); }
table.reports tbody tr:hover { background: var(--bg-card-hover); }
table.reports .c-id { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.reports .c-title a { font-weight: 600; color: var(--text-primary); }
table.reports .c-title a:hover { color: var(--accent); }
table.reports .c-title .sub { display: block; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem; }
table.reports .c-when { color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; }

.pager { display: flex; gap: 0.6rem; align-items: center; justify-content: center; margin-top: 1.4rem; }
.pager .page-of { color: var(--text-muted); font-size: 0.85rem; }

.empty { padding: 3rem 1rem; text-align: center; color: var(--text-secondary); }
.empty strong { display: block; font-family: var(--font-display); font-size: 1.1rem; color: var(--text-primary); margin-bottom: 0.35rem; }

/* --------------------------------------------------------------- stats --- */

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.stat { padding: 1rem 1.2rem; }
.stat .n {
    display: block; font-family: var(--font-display); font-weight: 900;
    font-size: 1.9rem; line-height: 1; color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.stat .k { display: block; margin-top: 0.35rem; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }

/* ---------------------------------------------------------- single bug --- */

.bug-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; align-items: start; }
.bug-body { white-space: pre-wrap; word-wrap: break-word; line-height: 1.7; }

.meta-list { list-style: none; margin: 0; padding: 0; }
.meta-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(0, 212, 255, 0.07); }
.meta-list li:last-child { border-bottom: 0; }
.meta-list .k { color: var(--text-muted); font-size: 0.84rem; }
.meta-list .v { text-align: right; font-weight: 600; font-size: 0.88rem; }

.attachments { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1rem; }
.attachments a { display: block; border: 1px solid var(--border-color); padding: 0.35rem; }
.attachments img { display: block; width: 128px; height: 96px; object-fit: cover; }
.attachments a:hover { border-color: var(--accent); }
.attachments .file-chip { display: flex; align-items: center; width: 128px; height: 96px; padding: 0.5rem; font-size: 0.8rem; color: var(--text-secondary); word-break: break-all; }

.comment { padding: 1rem 0; border-bottom: 1px solid rgba(0, 212, 255, 0.07); }
.comment:last-of-type { border-bottom: 0; }
.comment-head { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.comment-who { font-weight: 700; }
.comment.is-staff .comment-who { color: var(--accent); }
.comment-when { font-size: 0.8rem; color: var(--text-muted); }
.comment-body { white-space: pre-wrap; word-wrap: break-word; color: var(--text-secondary); }

.staff-tag {
    font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: #04121c; background: var(--accent); padding: 0.08rem 0.4rem; font-weight: 700;
}

/* ---------------------------------------------------------------- foot --- */

.site-foot { border-top: 1px solid var(--border-color); padding: 1.6rem 0; margin-top: 3rem; }
.foot-inner { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: space-between; align-items: center; }
.site-foot p { margin: 0; color: var(--text-muted); font-size: 0.85rem; }
.foot-links { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.foot-links a { color: var(--text-secondary); font-size: 0.85rem; }
.foot-links a:hover { color: var(--accent); }

/* --------------------------------------------------------------- login --- */

.signin-shell { min-height: calc(100vh - var(--nav-height) - 90px); display: grid; place-items: center; padding: 2.5rem 0; }
.signin { width: min(420px, 100%); padding: 2rem; }
.signin h1 { font-size: 1.55rem; text-align: center; }
.signin .lead { text-align: center; color: var(--text-secondary); margin: 0 0 1.6rem; font-size: 0.92rem; }
.signin .btn { width: 100%; }
.signin-alt { margin-top: 1.3rem; text-align: center; font-size: 0.87rem; color: var(--text-muted); }

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 900px) {
    .bug-grid { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
    .topbar-toggle { display: block; }
    .topbar-nav {
        position: absolute; top: var(--nav-height); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--bg-secondary); border-bottom: 1px solid var(--border-strong);
        padding: 0.5rem 1.2rem 1.2rem;
        display: none;
    }
    .topbar-nav.is-open { display: flex; }
    /* A finger needs a bigger target than a mouse pointer does. */
    .topbar-nav .tlink { min-height: 44px; display: flex; align-items: center; }
    .who { flex-direction: row; gap: 0.5rem; text-align: left; padding: 0.7rem 0; }
    .signout-form, .topbar-nav .btn { margin-top: 0.6rem; }
    .field-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ==================================================== scrollbars =========
   The browser default is a light grey bar that sits on a dark page like a
   strip of tape. These are the same surfaces and the same accent as
   everything else, so a long description scrolls without the furniture
   announcing itself.
   ======================================================================== */

* {
    scrollbar-width: thin;                              /* Firefox */
    scrollbar-color: rgba(0, 212, 255, 0.35) rgba(5, 10, 24, 0.6);
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track {
    background: rgba(5, 10, 24, 0.6);
    border-left: 1px solid var(--border-color);
}
*::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.3);
    border: 2px solid rgba(5, 10, 24, 0.6);
}
*::-webkit-scrollbar-thumb:hover { background: rgba(0, 212, 255, 0.55); }
*::-webkit-scrollbar-corner { background: rgba(5, 10, 24, 0.6); }

/* =================================================== select control ======
   A native select draws its own list, and the operating system draws it: the
   blue highlight bar and the white rows in it cannot be reached from CSS at
   all. So the real select stays in the form, doing the real work, and this
   draws over it.

   Without JavaScript the native control is what you get, which is the right
   fallback: a plain working dropdown beats a styled one that does nothing.
   ======================================================================== */

.select-wrap { position: relative; }

/* Only once the script has taken over. Both selectors on purpose: the class
   says what the element is, and the child selector means a missing class can
   never leave two controls stacked on top of each other again. */
.select-wrap.is-enhanced .select-native,
.select-wrap.is-enhanced > select {
    position: absolute;
    /* The padding, border and min-width the form styles give every select
       have to go too, or box-sizing keeps the element at its full size and
       only the clip hides it. Clipped is enough to be invisible, but an
       element that still measures 150 by 23 will surprise whoever looks at
       it next. */
    padding: 0;
    border: 0;
    min-width: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.select-button {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    background: rgba(5, 10, 24, 0.7);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 0.94rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.select-wrap.is-enhanced .select-button { display: flex; }

.select-button:hover { border-color: var(--border-strong); }
.select-button:focus-visible,
.select-wrap.is-open .select-button {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}
/* Until something is picked the label is a prompt, not a value. */
.select-button.is-placeholder { color: var(--text-muted); }

.select-caret {
    flex: 0 0 auto;
    font-size: 0.7em;
    color: var(--accent);
    transition: transform 0.3s var(--ease-out);
}
.select-wrap.is-open .select-caret { transform: rotate(180deg); }

.select-list {
    position: absolute;
    z-index: 60;
    top: calc(100% + 4px);
    left: 0;
    /* At least as wide as the control, but free to grow to whatever the
       longest label needs. Pinned to both edges instead, the filter bar's
       narrow controls broke "Cannot Reproduce" across two lines. */
    right: auto;
    min-width: 100%;
    width: max-content;
    max-width: min(320px, 88vw);
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    /* Nineteen categories is more than fits on a phone, so the list scrolls
       inside itself rather than running off the bottom of the screen. */
    max-height: 288px;
    overflow-y: auto;
    background: rgba(8, 16, 36, 0.98);
    border: 1px solid var(--border-strong);
    box-shadow: 0 20px 44px -16px rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0.2s;
}
.select-wrap.is-open .select-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.select-option {
    padding: 0.5rem 0.7rem;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 0.92rem;
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out),
                border-color 0.2s var(--ease-out);
}
/* One highlight for both the pointer and the arrow keys, so keyboard and
   mouse never disagree about where you are in the list. */
.select-option.is-active {
    color: var(--text-primary);
    background: var(--accent-subtle);
    border-left-color: var(--accent);
}
.select-option.is-selected { color: var(--accent); font-weight: 600; }
.select-option.is-selected::after { content: ' \2713'; }

/* The prompt row sits at the top of the list and is not a category, so it is
   dimmed rather than presented as one of the things you could pick. */
.select-option.is-prompt { color: var(--text-muted); font-style: italic; }

/* The filter bar sizes its controls to the row rather than to the page, and
   the hidden select can no longer carry that width for the button that
   replaced it. */
.board-tools .select-wrap { min-width: 160px; }