/* Day Cab Forum. dispatch board layout, dark deck. */

:root{
  --black:#141414;
  --slab:#1A1C1E;
  --slab2:#212427;
  --line:#34383C;
  --line-soft:#272A2D;
  --chrome:#D9DCDF;
  --dim:#9BA2A8;
  --dimmer:#7E858B;
  --red:#D7262E;
  --steel:#4F6D8A;
  --steel-lit:#8FB3D4;
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --gut:20px;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--black);
  color:var(--chrome);
  font:400 16px/1.62 var(--body);
}

a{color:var(--steel-lit)}
a:hover{color:#BCD6EC}

:focus-visible{outline:2px solid var(--steel-lit);outline-offset:2px}

img{max-width:100%}

/* ---------- header ---------- */

.rig{background:#101112;border-bottom:1px solid var(--line-soft)}

.rig-in{
  max-width:1180px;margin:0 auto;padding:14px var(--gut) 12px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}

.brand{display:inline-flex;align-items:center;line-height:0}
.logo-img{height:44px;width:auto;display:block}
.logo-sm{height:30px}

.rig-note{
  margin:0;flex:1 1 220px;min-width:0;
  color:var(--dim);font-size:13.5px;
}

.rig-link{
  font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:.01em;
  color:var(--chrome);text-decoration:none;
  border:1px solid var(--steel);padding:3px 13px 2px;
}
.rig-link:hover{background:var(--steel-lit);border-color:var(--steel-lit);color:#0E0F10}

/* the lane stripe. niche detail, used once per page under the header */
.lane{
  height:5px;
  background:
    repeating-linear-gradient(90deg,
      var(--red) 0 54px, transparent 54px 96px),
    linear-gradient(var(--steel),var(--steel));
  opacity:.9;
}

.tabs{background:var(--slab);border-bottom:1px solid var(--line)}
.tabs-in{
  max-width:1180px;margin:0 auto;padding:0 var(--gut);
  display:flex;align-items:stretch;flex-wrap:wrap;
}
.tabs-in a{
  font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:.015em;
  color:var(--dim);text-decoration:none;
  padding:11px 14px 9px;border-bottom:3px solid transparent;
}
.tabs-in a:hover{color:var(--chrome);background:#24282B}
.tabs-in a[aria-current]{color:#fff;border-bottom-color:var(--red)}
.tabs-gap{flex:1 1 20px}

/* ---------- frame ---------- */

.deck{
  max-width:1180px;margin:0 auto;padding:26px var(--gut) 48px;
  display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:30px;align-items:start;
}

.crumbs{font-size:13px;color:var(--dimmer);margin:0 0 14px}
.crumbs a{color:var(--dim);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs i{font-style:normal;padding:0 7px;color:#4A4F54}

h1{
  font-family:var(--display);font-weight:700;line-height:1.04;
  font-size:clamp(28px,4.2vw,42px);margin:0 0 10px;letter-spacing:.005em;
}

.lede{margin:0 0 22px;color:var(--dim);max-width:68ch}
.lede b{color:var(--chrome);font-weight:600}

/* ---------- whiteboard columns (home) ---------- */

.wboard{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line);margin:0 0 30px;
}
.wcol{background:var(--slab);padding:16px 16px 14px;display:flex;flex-direction:column}
.wcol-h{margin:0 0 2px;position:relative;display:inline-block}
.wcol-h a{
  font-family:var(--display);font-weight:700;font-size:25px;line-height:1.08;
  text-transform:uppercase;letter-spacing:.02em;
  color:#fff;text-decoration:none;
}
/* marker swipe under the board name */
.wcol-h::after{
  content:"";display:block;height:4px;background:var(--red);
  margin:3px 0 0;transform:rotate(-.5deg);transform-origin:left center;
}
.wcol p{margin:9px 0 14px;font-size:14.5px;color:var(--dim);flex:1}
.wcol-n{
  font-family:var(--display);font-size:19px;color:var(--chrome);
  border-top:1px dashed #3C4146;padding-top:9px;letter-spacing:.02em;
}
.wcol-n span{color:var(--steel-lit)}

/* ---------- slabs ---------- */

.slab{border:1px solid var(--line);background:var(--slab);margin:0 0 26px}
.slab-h{
  margin:0;padding:10px 16px 8px;background:#101112;border-bottom:1px solid var(--line);
  font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--chrome);
}
.slab-h em{font-style:normal;color:var(--dimmer);font-size:15px;letter-spacing:.01em}

/* ---------- load rows ---------- */

.loads{width:100%;border-collapse:collapse;font-size:15px}
.loads thead th{
  font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dimmer);text-align:left;
  padding:7px 16px;border-bottom:1px solid var(--line);background:#17191B;
}
.loads thead th.n,.loads thead th.w{text-align:right}
.loads tbody tr{border-bottom:1px solid var(--line-soft);transition:background-color .15s ease}
.loads tbody tr:last-child{border-bottom:0}
.loads tbody tr:hover{background:#1F2225}
.loads td{padding:12px 16px;vertical-align:top}
.load a{color:var(--chrome);text-decoration:none;font-weight:500;font-size:16.5px}
.load a:hover{color:#fff;text-decoration:underline}
.load-by{display:block;margin-top:4px;font-size:13px;color:var(--dimmer)}
.load-by a{font-size:13px;font-weight:400;color:var(--dim)}
.td-n{
  text-align:right;white-space:nowrap;
  font-family:var(--display);font-size:21px;color:var(--chrome);letter-spacing:.02em;
}
.td-w{text-align:right;white-space:nowrap;font-size:13.5px;color:var(--dim)}
.w-by{display:block;color:var(--dimmer);font-size:12.5px}

.tag-pin{
  display:inline-block;margin:0 8px 0 0;padding:2px 7px 1px;
  background:var(--red);color:#fff;
  font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.07em;text-transform:uppercase;
  vertical-align:2px;
}

.replybar{
  padding:13px 16px;border:1px dashed #3C4146;background:#17191B;
  font-size:14px;color:var(--dim);
}

/* ---------- thread ---------- */

.thead{border-left:5px solid var(--red);padding:0 0 0 16px;margin:0 0 22px}
.thead h1{margin-bottom:8px}
.thead .meta{font-size:13.5px;color:var(--dimmer)}
.thead .meta b{color:var(--dim);font-weight:600}
.thead .meta a{color:var(--dim)}

.post{
  border:1px solid var(--line);border-left:5px solid var(--steel);
  background:var(--slab);margin:0 0 14px;
}
.post.is-op{border-left-color:var(--red)}
.post.is-mod{border-left-color:var(--chrome)}

.post-head{
  display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;
  padding:11px 16px 9px;background:#17191B;border-bottom:1px solid var(--line);
}
.tile{
  width:34px;height:34px;flex:0 0 34px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:22px;color:#fff;
}
.who{flex:1 1 200px;min-width:0}
.author-name{font-weight:600;font-size:15.5px;color:#fff;word-break:break-word}
.op-pill{
  display:inline-block;margin-left:7px;padding:1px 6px 0;
  background:var(--red);color:#fff;font-family:var(--display);font-size:13px;letter-spacing:.07em;
  vertical-align:1px;
}
.who-line{margin-top:3px;font-size:12.5px;color:var(--dimmer)}
.who-line .author-loc{color:var(--dim)}
.who-line span+span::before{content:"·";padding:0 6px;color:#4A4F54}
.runs{
  margin-top:4px;font-size:12.5px;color:var(--dim);
  border-left:2px solid var(--steel);padding-left:7px;
}
.rank{
  font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--steel-lit);
}
.rank-mod{color:#fff;background:var(--red);padding:0 6px}
.stamp{margin-left:auto;text-align:right;font-size:12.5px;color:var(--dimmer);white-space:nowrap}
.stamp time{display:block;color:var(--dim)}
.stamp .no{font-family:var(--display);font-size:16px;letter-spacing:.04em}

.post-content{padding:15px 18px 4px}
.post-content p{margin:0 0 14px}
.post-content p:last-child{margin-bottom:12px}
.post-content strong{color:#fff}
.post-content ul{margin:0 0 14px;padding-left:20px}
.post-content li{margin-bottom:6px}
.post-content blockquote{
  margin:0 0 14px;padding:10px 14px;background:#101112;
  border-left:3px solid var(--steel);color:var(--dim);font-size:15px;
}
.post-content blockquote cite{
  display:block;font-style:normal;font-size:12.5px;color:var(--dimmer);
  margin-bottom:5px;letter-spacing:.02em;
}

.post-footer{
  display:flex;gap:16px;align-items:center;
  padding:8px 18px 9px;border-top:1px solid var(--line-soft);
}
.post-action{
  background:none;border:0;padding:0;cursor:pointer;
  font:500 12.5px/1 var(--body);color:var(--dimmer);
}
.post-action:hover{color:var(--chrome)}
.post-link{font-size:12.5px;color:var(--dimmer);text-decoration:none;margin-left:auto}
.post-link:hover{color:var(--chrome)}

/* ---------- side column ---------- */

.col{display:flex;flex-direction:column;gap:18px}
.panel{border:1px solid var(--line);background:var(--slab)}
.panel-h{
  margin:0;padding:9px 14px 7px;background:#101112;border-bottom:1px solid var(--line);
  font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--dim);
}
.panel-b{padding:13px 14px}
.panel-b p{margin:0;font-size:13.5px;color:var(--dim)}

.tally{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.tally div{background:var(--slab2);padding:11px 8px;text-align:center}
.tally b{
  display:block;font-family:var(--display);font-weight:700;font-size:27px;
  color:#fff;line-height:1;letter-spacing:.01em;
}
.tally span{font-size:11.5px;color:var(--dimmer);letter-spacing:.04em}

.sidelist{list-style:none;margin:0;padding:0}
.sidelist li{padding:10px 14px;border-bottom:1px solid var(--line-soft);font-size:14px}
.sidelist li:last-child{border-bottom:0}
.sidelist a{color:var(--chrome);text-decoration:none}
.sidelist a:hover{text-decoration:underline;color:#fff}
.sidelist li>span{display:block;font-size:12px;color:var(--dimmer);margin-top:3px}

.ranklist{list-style:none;margin:0;padding:0}
.ranklist li{
  display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:7px 14px;border-bottom:1px solid var(--line-soft);
}
.ranklist li:last-child{border-bottom:0}
.ranklist b{
  font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--chrome);
}
.ranklist span{font-size:12px;color:var(--dimmer)}

.tags{list-style:none;margin:0;padding:12px 14px;display:flex;flex-wrap:wrap;gap:7px}
.tags li{
  font-size:12.5px;color:var(--dim);border:1px solid var(--line);
  padding:2px 8px 1px;background:var(--slab2);
}

/* ---------- prose pages ---------- */

.prose{max-width:70ch}
.prose h1{margin-bottom:14px}
.prose h2{
  font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:.01em;
  margin:30px 0 10px;color:#fff;
}
.prose p{margin:0 0 15px}
.prose ul{margin:0 0 16px;padding-left:20px}
.prose li{margin-bottom:9px}
.prose strong{color:#fff}

/* ---------- footer ---------- */

.yard{border-top:3px solid var(--red);background:#101112;margin-top:10px}
.yard-in{
  max-width:1180px;margin:0 auto;padding:22px var(--gut) 30px;
  display:grid;grid-template-columns:auto 1fr;gap:14px 28px;align-items:center;
}
.yard-nav{display:flex;flex-wrap:wrap;gap:4px 18px;justify-self:end}
.yard-nav a{font-size:13.5px;color:var(--dim);text-decoration:none}
.yard-nav a:hover{color:#fff;text-decoration:underline}
.yard-note{grid-column:1/-1;margin:0;font-size:12.5px;color:var(--dimmer)}

/* ---------- narrow ---------- */

@media (max-width:980px){
  .deck{grid-template-columns:minmax(0,1fr)}
  .col{flex-direction:row;flex-wrap:wrap}
  .col .panel{flex:1 1 280px}
  .wboard{grid-template-columns:1fr}
}

@media (max-width:700px){
  .loads thead{position:absolute;left:-9999px}
  .loads,.loads tbody,.loads tr,.loads td{display:block;width:auto}
  .loads tbody tr{padding:12px 14px;border-bottom:1px solid var(--line-soft)}
  .loads td{padding:0}
  .td-n,.td-w{
    display:inline-block;text-align:left;font-size:13px;color:var(--dim);
    font-family:var(--body);letter-spacing:0;margin:7px 16px 0 0;
  }
  .td-n::after{content:" replies";color:var(--dimmer);font-size:12px}
  .loads td.td-n+.td-n::after{content:" views"}
  .w-by{display:inline;margin-left:5px}
  .yard-in{grid-template-columns:1fr}
  .yard-nav{justify-self:start}
  .post-head{gap:9px}
  .stamp{margin-left:0;text-align:left;flex:1 1 100%}
  .stamp time{display:inline}
  .stamp .no{margin-left:8px}
}

@media (max-width:400px){
  :root{--gut:14px}
  .logo-img{height:38px}
}

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