/* Board skin: steel table panels, vBulletin 3.x grammar. */
:root{
  --canvas:#E1E4F2; --gutter:#D3D8EC; --cell:#FFFFFF; --cell-alt:#F5F5FF;
  --ink:#12131A; --link:#22229C; --border:#2B3A63; --hair:#C7CEE6;
  --bar-a:#869BBF; --bar-b:#5C7099; --head:#DDE1F0; --warm:#B4620F;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--gutter);color:var(--ink);
  font:11px/1.5 Tahoma,Geneva,Verdana,sans-serif}
.shell{width:94%;max-width:1180px;margin:0 auto;background:var(--canvas);
  border-left:1px solid var(--hair);border-right:1px solid var(--hair);
  padding:0 10px 22px}
a{color:var(--link)}
a:focus-visible{outline:2px solid var(--border);outline-offset:1px}
img{max-width:100%;height:auto;display:block}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

/* --- banner ------------------------------------------------------- */
.banner{padding:8px 0 6px}
.bannerbox{background:linear-gradient(var(--bar-a),var(--bar-b));
  border:1px solid var(--border);border-bottom:5px solid var(--border);
  border-radius:4px 4px 0 0;padding:16px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;min-height:112px}
.bannerbox .wordmark{display:block;font:bold 32px/1.1 Verdana,Geneva,sans-serif;
  color:#fff;text-decoration:none;letter-spacing:.01em}
.bannerbox .wordmark:hover{text-decoration:underline}
.bannerbox .bsub{margin:7px 0 0;font-size:13px;color:#EBEEF7;max-width:52ch}
.bannerbox img{width:196px;flex:0 0 196px;opacity:.92}

/* --- navbars ------------------------------------------------------ */
.navbar{background:linear-gradient(var(--bar-a),var(--bar-b));
  border:1px solid var(--border);padding:5px 8px}
.navbar ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.navbar a{color:#fff;font-weight:bold;text-decoration:none;font-size:11px;
  letter-spacing:.03em}
.navbar a:hover{text-decoration:underline}
.utilbar{background:var(--head);border:1px solid var(--border);border-top:0;
  padding:4px 8px;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:11px}
.utilbar .path{font-weight:bold}
.crumb{background:var(--cell);border:1px solid var(--border);border-top:0;
  padding:5px 8px;font-size:11px}

/* --- panels ------------------------------------------------------- */
.panel{border:1px solid var(--border);background:var(--cell);margin:12px 0 0;
  border-radius:4px 4px 0 0}
.panel > .bar{background:linear-gradient(var(--bar-a),var(--bar-b));color:#fff;
  border-radius:3px 3px 0 0;min-height:28px;padding:6px 10px;
  font:bold 11px/1.4 Verdana,Geneva,sans-serif;text-transform:uppercase;
  letter-spacing:.06em;display:flex;justify-content:space-between;align-items:center;
  gap:12px}
.panel > .bar .arrow{font-size:9px;opacity:.85}
.panel .body{padding:10px 12px}
.panel p{margin:0 0 9px;font-size:12px;line-height:1.65;max-width:66ch}
.panel p:last-child{margin-bottom:0}

/* --- board tables ------------------------------------------------- */
table.board{width:100%;border-collapse:collapse;font-size:11px}
table.board caption{text-align:left;padding:8px 12px 0;font-size:11px;
  color:#3C4560}
table.board th,table.board td{border-bottom:1px solid var(--hair);
  padding:8px 10px;text-align:left;vertical-align:top}
table.board thead th{background:var(--head);font:bold 11px Verdana,sans-serif;
  border-bottom:1px solid var(--border);white-space:nowrap}
table.board tbody tr:nth-child(even) td{background:var(--cell-alt)}
table.board tbody tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;width:1%}
.when{white-space:nowrap;width:1%;color:#3C4560}
.st{width:1%;padding-right:0}
.rowtitle{font:bold 13px Verdana,Geneva,sans-serif;text-decoration:none}
.rowdesc{margin:3px 0 0;font-size:11px;color:#3C4560;max-width:62ch}

/* status squares */
.sq{display:inline-block;width:11px;height:11px;border:1px solid var(--border);
  margin-top:2px}
.sq.filled{background:var(--warm);border-color:#7C4409}
.sq.hollow{background:var(--cell)}

/* --- subforum / section index ------------------------------------ */
.subgroup{border-bottom:1px solid var(--hair);padding:9px 12px}
.subgroup:last-child{border-bottom:0}
.subgroup:nth-child(even){background:var(--cell-alt)}
.subgroup .sfhead{display:flex;justify-content:space-between;gap:14px;
  align-items:baseline;flex-wrap:wrap}
.subgroup .sfhead a{font:bold 12px Verdana,sans-serif;text-decoration:none}
.tag{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#4A5675;
  border:1px solid var(--hair);padding:1px 6px;background:var(--cell);
  white-space:nowrap}
ul.sublist{list-style:none;margin:6px 0 0;padding:0 0 0 18px;
  border-left:2px solid var(--hair)}
ul.sublist li{padding:2px 0;font-size:11px}

/* --- post panels -------------------------------------------------- */
.post{display:flex;gap:0;border-top:1px solid var(--hair)}
.post:first-of-type{border-top:0}
.post .who{width:176px;flex:0 0 176px;background:var(--cell-alt);
  border-right:1px solid var(--hair);padding:10px 12px;font-size:11px}
.post .who .byline{font:bold 12px Verdana,sans-serif;margin:0 0 6px}
.post .who dl{margin:0;font-size:10px;color:#3C4560}
.post .who dt{font-weight:bold;margin-top:5px}
.post .who dd{margin:0}
.post .msg{padding:10px 14px;min-width:0;flex:1;max-width:820px}
.post .msg h2{font:bold 15px Verdana,sans-serif;margin:0 0 8px}
.post .msg h3{font:bold 12px Verdana,sans-serif;margin:14px 0 6px}
.post .msg p{font-size:12px;line-height:1.7;max-width:66ch;margin:0 0 10px}
.post .msg ul{font-size:12px;line-height:1.7;max-width:66ch;padding-left:18px}
.post .msg ul li{margin-bottom:6px}
.post .msg table.board{margin:4px 0 12px;border:1px solid var(--border)}
.lead p{font-size:12.5px}

/* --- what's going on / stats -------------------------------------- */
table.stats{width:100%;border-collapse:collapse;font-size:11px}
table.stats th,table.stats td{padding:7px 10px;border-bottom:1px solid var(--hair);
  text-align:left}
table.stats th{width:60%;font-weight:normal}
table.stats td{font-variant-numeric:tabular-nums;text-align:right}
table.stats tr:nth-child(even) th,table.stats tr:nth-child(even) td{background:var(--cell-alt)}
table.stats tr:last-child th,table.stats tr:last-child td{border-bottom:0}

/* --- jump strip + legend ------------------------------------------ */
.jump{margin-top:12px;border:1px solid var(--border);background:var(--cell);
  padding:8px 12px;font-size:11px}
.jump .row{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.jump .lab{font-weight:bold}
.legend{margin:8px 0 0;padding:8px 0 0;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:6px 22px;font-size:11px;color:#3C4560}
.legend span.item{display:flex;gap:7px;align-items:center}
.tz{margin:8px 0 0;text-align:right;font-size:10px;color:#414B68}
.adjacent{margin-top:12px;border:1px solid var(--border);background:var(--cell);
  padding:8px 12px;display:flex;justify-content:space-between;gap:16px;
  flex-wrap:wrap;font-size:11px}

/* --- mobile ------------------------------------------------------- */
@media (max-width:760px){
  body{font-size:13px}
  .shell{width:100%;padding:0 8px 20px;border:0}
  .banner{padding:6px 0 5px}
  .bannerbox{padding:12px 14px;min-height:78px;gap:12px}
  .bannerbox .wordmark{font-size:24px}
  .bannerbox .bsub{font-size:13px;margin-top:5px}
  .bannerbox img{width:92px;flex:0 0 92px}
  .navbar ul{gap:6px 14px}
  .panel p,.post .msg p,.post .msg ul{font-size:16px;max-width:none}
  .panel .body{padding:12px}
  .post{display:block}
  .post .who{width:auto;flex:none;border-right:0;
    border-bottom:1px solid var(--hair);padding:9px 12px}
  .post .who dl{display:flex;flex-wrap:wrap;gap:2px 16px}
  .post .who dt{margin-top:0}
  .post .who dt::after{content:" "}
  .post .msg h2{font-size:17px}
  .stack thead{display:none}
  .stack tbody tr{display:block;border-bottom:1px solid var(--border);
    padding:10px 12px}
  .stack tbody tr:last-child{border-bottom:0}
  .stack tbody tr:nth-child(even) td{background:transparent}
  .stack tbody tr:nth-child(even){background:var(--cell-alt)}
  .stack td{display:block;border:0;padding:2px 0;width:auto;text-align:left}
  .stack td.num,.stack td.when{text-align:left;width:auto}
  .stack td[data-label]::before{content:attr(data-label) ": ";font-weight:bold;
    color:#3C4560}
  .stack td.st{padding-bottom:0}
  .rowdesc{max-width:none;font-size:14px}
  table.board caption{font-size:13px}
  table.stats th{width:auto}
  .tz{text-align:left}
}
