/*  BBS HQ — the directory (hq-002): the wall, the list, a board's card, the home page's picks.
    Source: bbshq-vault/sites/bbshq.org/public/css/bbs.css, published by tools/deploy.sh.
    Loaded after hq.css and bound by its rules: the VGA sixteen by index, 15 for the thing
    itself, 7 for prose, 8 for furniture. The status colours are the Vortex door's
    (cards.STATE_STYLE): 10 up, 14 not up or busy, 12 down, 5 dead.

    Art is drawn at 8x16 a cell by ansilove and shown with image-rendering: pixelated, at its
    own size wherever the layout allows, because a picture of block glyphs scaled by a
    fraction grows uneven columns.                                                           */

:root { --c5: #aa00aa; --c10: #55ff55; --c12: #ff5555; }
.f5  { color: var(--c5); }
.f10 { color: var(--c10); }
.f12 { color: var(--c12); }

[hidden] { display: none !important; }

.screen.wide { max-width: 1240px; }
.boardpage .screen.wide { max-width: 80ch; }

.k { color: var(--c8); }
.k b { color: var(--c15); font-weight: normal; }
.sep { color: var(--c8); }
.murmur { color: var(--c8); }

/*  ── the masthead ──────────────────────────────────────────────────────────────────── */
.masthead {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: 8px 3ch; margin: 0 0 28px;
}
.wordmark { font-size: 2em; line-height: 1.2; letter-spacing: 0.05ch; }
.wordmark .f11 { margin-left: 0.5ch; }
.wordmark:hover, .wordmark:focus-visible { background: none; }
.wordmark:hover .f15, .wordmark:focus-visible .f15 { color: var(--c11); }
.topnav a { margin-left: 2ch; color: var(--c7); }
.topnav a:hover .k, .topnav a:hover .k b, .topnav a:focus-visible .k, .topnav a:focus-visible .k b { color: inherit; }

/*  ── the directory's head ──────────────────────────────────────────────────────────── */
.dirhead h1 {
    margin: 0 0 6px; font-size: 1em; font-weight: normal; color: var(--c15); letter-spacing: 0.1ch;
}
.dirhead h1::before { content: '['; color: var(--c8); margin-right: 1ch; }
.dirhead h1::after  { content: ']'; color: var(--c8); margin-left: 1ch; }
.stats b { color: var(--c15); font-weight: normal; }
.stats b.f10 { color: var(--c10); }

.find { display: flex; align-items: center; gap: 1ch; margin: 16px 0 14px; max-width: 80ch; }
.find input {
    flex: 1; min-width: 0; padding: 4px 0;
    font: inherit; color: var(--c15); background: var(--c0); caret-color: var(--c11);
    border: 0; border-bottom: 2px solid var(--c1); border-radius: 0; outline: none;
}
.find input:focus { border-bottom-color: var(--c3); }
.find input::placeholder { color: var(--c8); }

.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 3ch; margin: 0 0 10px; }
.controls nav { display: flex; gap: 0 1.5ch; }
.controls button {
    padding: 0 0.5ch; font: inherit; color: var(--c7); background: none; border: 0; cursor: pointer;
}
.controls button:hover, .controls button:focus-visible { color: var(--c15); outline: none; }
.controls button[aria-pressed="true"] { color: var(--c0); background: var(--c3); }
.controls button[aria-pressed="true"] .k, .controls button[aria-pressed="true"] .k b { color: var(--c0); }
.controls label { display: inline-flex; align-items: center; gap: 1ch; cursor: pointer; }
.controls input[type="checkbox"] { accent-color: var(--c3); margin: 0; }
.controls select {
    max-width: 22ch; font: inherit; color: var(--c15); background: var(--c0);
    border: 1px solid var(--c8); border-radius: 0; padding: 0 0.5ch;
}
.explain { margin: 0 0 20px; color: var(--c7); }

/*  ── the wall ──────────────────────────────────────────────────────────────────────────
    Every board as a 24x8 window of its own art. Once one is lit the rest go grey, so moving
    reads as a picture lighting up rather than a box sliding about (the door's guide, page
    five). The lit tile gets the door's gold rails either side.                             */
.results.wall {
    display: grid; grid-template-columns: repeat(auto-fill, 192px); justify-content: space-between;
    gap: 26px 20px;
}
.tile { display: block; width: 192px; color: var(--c7); }
.tile:hover, .tile:focus-visible { color: var(--c7); background: none; outline: none; }
.tile .pic {
    position: relative; display: block; width: 192px; height: 128px; overflow: hidden;
    background: var(--c0);
}
.tile .pic img, .tile .pic canvas {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; image-rendering: pixelated;
}
.has-lit .tile:not(.lit) .pic { filter: grayscale(1) brightness(0.6); }
.tile.lit .pic { box-shadow: -5px 0 0 -1px var(--c14), 5px 0 0 -1px var(--c14); }
.tile .tname, .tile .tmeta { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tile .tname { margin-top: 6px; color: var(--c7); }
.tile.lit .tname { color: var(--c15); }
.tile .tmeta { color: var(--c8); }

.plate {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, var(--c1), var(--c0) 85%);
}
.plate .ini { font-size: 2em; color: var(--c11); letter-spacing: 0.3ch; }

/*  ── the list ──────────────────────────────────────────────────────────────────────── */
.rows { list-style: none; margin: 0; padding: 0; }
.rows .row a {
    display: grid; align-items: baseline;
    grid-template-columns: 1ch 8ch minmax(18ch, 1.3fr) minmax(16ch, 1fr) minmax(10ch, 0.7fr) 16ch 17ch;
    gap: 0 1.5ch; padding: 1px 0.5ch; color: var(--c7);
}
.rows .row a > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rows .row a:hover, .rows .row a:focus-visible { color: var(--c7); background: var(--c1); }
.rows .nm { color: var(--c15); }
.rows .ad { color: var(--c11); }
.rows .tl { color: var(--c8); }

/*  ── a board's card ────────────────────────────────────────────────────────────────── */
.headcam {
    position: relative; width: 100%; max-width: 640px; aspect-ratio: 640 / 224;
    margin: 0 0 14px; overflow-y: auto; background: var(--c0);
}
.headcam img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.headcam.moving { overflow: hidden; }
.headcam.moving img { will-change: transform; }
.headcam.moving.scrolls { overflow-y: auto; }
.headcam.none { aspect-ratio: auto; height: auto; min-height: 0; overflow: visible; }
.headcam.none .plate { position: relative; display: flex; height: 112px; }
.headcam.none p { margin: 8px 0 0; }

.rule {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 2ch;
    margin: 0 0 10px; padding-top: 4px;
    border-top: 2px solid; border-image: linear-gradient(90deg, var(--c3), var(--c1) 22%, var(--c1) 78%, var(--c3)) 1;
}
.bname { margin: 0 0 4px; font-size: 2em; font-weight: normal; line-height: 1.2; }
.status { margin: 0 0 14px; }
.badge { margin-left: 1ch; padding: 0 1ch; color: var(--c0); background: var(--c3); }
.facts { display: grid; grid-template-columns: 10ch 1fr; gap: 2px 1ch; margin: 0 0 16px; }
.facts dt { color: var(--c8); }
.facts dd { margin: 0; color: var(--c7); overflow-wrap: anywhere; }
.desc { margin: 0 0 28px; }
.desc p { margin: 0 0 10px; }

.scoreline { margin: 0 0 8px; }
.bar { white-space: nowrap; }
.axes { list-style: none; margin: 0 0 12px; padding: 0; }
.axes li { display: grid; grid-template-columns: 12ch 1fr; gap: 0 1ch; }
.axes .ax { color: var(--c7); }

.review { margin: 0 0 16px; padding-left: 2ch; border-left: 2px solid var(--c1); }
.review p { margin: 0 0 4px; color: var(--c7); overflow-wrap: anywhere; }
.review footer { color: var(--c8); }

.screenful { margin: 0 0 18px; }
.screenful img { display: block; width: 100%; max-width: 640px; height: auto; image-rendering: pixelated; }
.screenful figcaption { margin-top: 4px; }

.keys { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 3ch; margin: 28px 0 8px; }
.keys a { color: var(--c7); }
.keys a:hover .k, .keys a:hover .k b, .keys a:focus-visible .k, .keys a:focus-visible .k b { color: inherit; }
.source { margin-top: 0; }

/*  ── boards that matter: the home page's square ────────────────────────────────────── */
.seats .square { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 3ch; margin: 6px 0 12px; }
.seat .label { margin: 0 0 6px; color: var(--c8); }
.seat:has(.lit) .label { color: var(--c15); }
.seat .tile { width: 100%; max-width: 288px; }
.seat .tile .pic { width: 192px; }
.dirlinks { display: flex; flex-wrap: wrap; gap: 4px 3ch; margin: 10px 0 6px; }
.dirlinks a { color: var(--c7); }
.dirlinks a:hover .k, .dirlinks a:hover .k b, .dirlinks a:focus-visible .k, .dirlinks a:focus-visible .k b { color: inherit; }
.home-find { margin: 12px 0 6px; }
.menu li a.name { color: var(--c15); }
.menu li.open .key b { color: var(--c11); }
.affil { margin: -22px 0 34px; color: var(--c8); }
.affil a { color: var(--c7); }

/*  ── narrow ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .rows .row a { grid-template-columns: 1ch 8ch minmax(0, 1fr) 16ch; }
    .rows .ad, .rows .sw, .rows .tl { display: none; }
}
@media (max-width: 640px) {
    .results.wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
    .results.wall .tile, .results.wall .tile .pic { width: 100%; }
    .results.wall .tile .pic { height: auto; aspect-ratio: 3 / 2; }
    .rows .row a { grid-template-columns: 1ch minmax(0, 1fr); }
    .rows .st, .rows .sc { display: none; }
    .seats .square { grid-template-columns: 1fr; }
    .facts { grid-template-columns: 8ch 1fr; }
    .wordmark { font-size: 1.5em; }
    .topnav a { margin-left: 1ch; }
}