/* Semi Truck Owners Forum: logbook layout. Warm white paper, highway green guide sign, amber lane paint, asphalt. */
:root{
  --paper:#F3F1EC;
  --sheet:#FBFAF7;
  --lane:#ECE9E1;
  --green:#1E5B3A;
  --green-dk:#164430;
  --amber:#F0A400;
  --asphalt:#222222;
  --ink:#222222;
  --muted:#57534B;
  --rule:#D3CDC0;
  --grid:#E6E1D5;
  --quote:#EEECE5;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Red Hat Text",system-ui,sans-serif;font-size:1rem;line-height:1.55}
img{max-width:100%;height:auto}
a{color:var(--green)}
a:hover{color:var(--green-dk)}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}

/* ---------- header: cab ---------- */
.cab{background:var(--sheet);border-bottom:1px solid var(--rule)}
.cab-row{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{display:inline-block;line-height:0}
.brand > img{height:44px;width:auto}
.cab-nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;padding:0;list-style:none;font-weight:500;font-size:.95rem}
.cab-nav > li > a{color:var(--ink);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.cab-nav > li > a:hover{border-bottom-color:var(--amber)}
.cab-nav > li > a[aria-current="page"]{border-bottom-color:var(--green);color:var(--green)}

/* ---------- guide sign title bar ---------- */
.page{padding-top:18px;padding-bottom:40px}
.crumbs{font-size:.88rem;color:var(--muted);margin:0 0 10px}
.crumbs > a{color:var(--muted)}
.crumbs > span{margin:0 6px}
.sign{background:var(--green);color:#fff;border:3px solid var(--green);box-shadow:inset 0 0 0 2px #fff;border-radius:12px;padding:16px 22px 18px;margin:0 0 18px}
.sign h1{font-family:"Red Hat Display",sans-serif;font-weight:700;font-size:clamp(1.35rem,3.2vw,2rem);line-height:1.18;margin:0;letter-spacing:.1px}
.sign-sub{margin:6px 0 0;font-size:.98rem;color:#E4EEE7;max-width:70ch}
.sign-sub > a{color:#fff}
.page-note{max-width:72ch;margin:0 0 20px;color:var(--ink)}

/* ---------- stats strip ---------- */
.totals{display:flex;flex-wrap:wrap;gap:0;margin:0 0 22px;border:1px solid var(--rule);background:var(--sheet);border-radius:6px;width:max-content;max-width:100%}
.totals > div{padding:8px 18px;border-right:1px solid var(--rule)}
.totals > div:last-child{border-right:0}
.totals b{display:block;font-family:"Red Hat Display",sans-serif;font-weight:900;font-size:1.35rem;color:var(--green);line-height:1.1}
.totals small{font-size:.82rem;color:var(--muted)}

/* ---------- section heads ---------- */
.block{margin:0 0 26px}
.block-h{font-family:"Red Hat Display",sans-serif;font-weight:700;font-size:1.15rem;margin:0 0 8px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.block-h > small{font-family:"Red Hat Text",sans-serif;font-weight:400;font-size:.88rem;color:var(--muted)}

/* ---------- boards ---------- */
.boards{list-style:none;margin:0;padding:0;background:var(--sheet);border:1px solid var(--rule);border-radius:6px}
.board{display:grid;grid-template-columns:4rem 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-top:1px solid var(--rule)}
.board:first-child{border-top:0}
.board-code{font-family:"Red Hat Display",sans-serif;font-weight:900;font-size:.9rem;color:#fff;background:var(--green);border-radius:6px;text-align:center;padding:8px 4px;box-shadow:inset 0 0 0 2px var(--green),inset 0 0 0 3px #fff}
.board-name{font-family:"Red Hat Display",sans-serif;font-weight:700;font-size:1.08rem;text-decoration:none;color:var(--ink)}
.board-name:hover{color:var(--green)}
.board-desc{margin:2px 0 0;font-size:.93rem;color:var(--muted);max-width:66ch}
.board-nums{display:flex;gap:14px;font-size:.88rem;color:var(--muted);white-space:nowrap}
.board-nums b{color:var(--ink);font-weight:700}

/* ---------- the logbook (thread rows on an ELD duty grid) ---------- */
.log{background:var(--sheet);border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.log-ruler{display:flex;justify-content:space-between;padding:6px 10px 4px calc(4.6rem + 10px);font-size:.68rem;color:var(--muted);border-bottom:1px solid var(--rule);background:var(--lane)}
.log-ruler > span{min-width:1ch;text-align:center}
.log-rows{list-style:none;margin:0;padding:0;background-image:repeating-linear-gradient(to right,var(--grid) 0 1px,transparent 1px calc(100% / 24));background-position:4.6rem 0;background-size:calc(100% - 4.6rem) 100%;background-repeat:no-repeat}
.log-row{display:grid;grid-template-columns:4.6rem minmax(0,1fr) 5.2rem 5.2rem 10.5rem;align-items:center;border-top:1px solid var(--rule)}
.log-row:first-child{border-top:0}
.duty{align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;background:var(--lane);border-right:1px solid var(--rule);padding:10px 4px;font-family:"Red Hat Display",sans-serif;font-weight:900;font-size:.8rem;color:var(--green)}
.duty::after{content:"";display:block;width:70%;height:3px;background:var(--green);border-radius:2px}
.log-row.is-pinned .duty{color:var(--asphalt)}
.log-row.is-pinned .duty::after{background:var(--amber)}
.t-main{padding:11px 14px;min-width:0}
.t-title{font-family:"Red Hat Display",sans-serif;font-weight:700;font-size:1.02rem;line-height:1.3;color:var(--ink);text-decoration:none}
.t-title:hover{color:var(--green);text-decoration:underline}
.t-by{font-size:.85rem;color:var(--muted);margin-top:3px}
.t-by > b{color:var(--ink);font-weight:500}
.pin{display:inline-block;font-size:.74rem;font-weight:700;background:var(--amber);color:var(--asphalt);border-radius:3px;padding:0 6px;margin-right:6px;vertical-align:2px}
.t-num,.t-last{padding:8px 8px;font-size:.88rem;text-align:right}
.t-num > i,.t-last > i{display:block;font-style:normal;font-size:.72rem;color:var(--muted)}
.t-num > span{font-weight:700;font-variant-numeric:tabular-nums}
.t-last{text-align:left;padding-right:14px}
.t-last > span{display:inline}

/* ---------- thread ---------- */
.thread-meta{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.88rem;color:var(--muted);margin:-6px 0 18px}
.thread-meta b{color:var(--ink);font-weight:500}
.posts{display:flex;flex-direction:column;gap:14px}
.post{display:grid;grid-template-columns:13.5rem minmax(0,1fr);background:var(--sheet);border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.lane{background:linear-gradient(var(--amber) 55%,transparent 0) right top / 3px 24px repeat-y,var(--lane);padding:14px 16px 14px 14px;font-size:.86rem;display:flex;flex-direction:column;gap:3px}
.author-name{font-family:"Red Hat Display",sans-serif;font-weight:700;font-size:1rem;color:var(--ink);word-break:break-word}
.op{display:inline-block;margin-left:6px;font-family:"Red Hat Text",sans-serif;font-size:.7rem;font-weight:700;background:var(--amber);color:var(--asphalt);border-radius:3px;padding:0 5px;vertical-align:2px}
.rank{color:var(--green);font-weight:700}
.author-loc,.author-stats{color:var(--muted)}
.runs{margin-top:6px;padding-top:6px;border-top:1px dashed var(--rule);color:var(--ink)}
.runs > i{font-style:normal;display:block;font-size:.74rem;color:var(--muted)}
.slab{padding:12px 20px 12px;min-width:0}
.post-head{display:flex;justify-content:space-between;gap:10px;font-size:.84rem;color:var(--muted);border-bottom:1px solid var(--grid);padding-bottom:6px;margin-bottom:4px}
.post-head > a{color:var(--muted);text-decoration:none}
.post-content{max-width:72ch}
.post-content p{margin:.7em 0}
.post-content ol,.post-content ul{margin:.6em 0;padding-left:1.4em}
.post-content li{margin:.25em 0}
.post-content blockquote{margin:.8em 0;padding:8px 12px;background:var(--quote);border-left:3px solid var(--green);font-size:.95rem}
.post-content blockquote > cite{display:block;font-style:normal;font-weight:700;font-size:.8rem;color:var(--muted);margin-bottom:2px}
.post-content blockquote > p{margin:.3em 0}
.post.is-op .slab{border-top:3px solid var(--green)}
.post-footer{display:flex;gap:6px;justify-content:flex-end;border-top:1px solid var(--grid);padding-top:8px;margin-top:8px}
.post-footer > button,.post-footer > a{font:inherit;font-size:.8rem;color:var(--muted);background:none;border:1px solid var(--rule);border-radius:4px;padding:2px 10px;cursor:pointer;text-decoration:none}
.post-footer > button:hover,.post-footer > a:hover{border-color:var(--green);color:var(--green)}
.reply-note{margin:18px 0 0;padding:12px 16px;border:1px dashed var(--rule);border-radius:6px;font-size:.93rem;background:var(--sheet)}
.related{list-style:none;margin:0;padding:0;background:var(--sheet);border:1px solid var(--rule);border-radius:6px}
.related > li{padding:10px 16px;border-top:1px solid var(--rule)}
.related > li:first-child{border-top:0}
.related > li > a{font-weight:500}
.related > li > span{display:block;font-size:.82rem;color:var(--muted)}
.after{margin-top:28px}

/* ---------- prose pages ---------- */
.prose{max-width:70ch;background:var(--sheet);border:1px solid var(--rule);border-radius:6px;padding:8px 24px 18px}
.prose h2{font-family:"Red Hat Display",sans-serif;font-weight:700;font-size:1.15rem;margin:1.4em 0 .3em;color:var(--green)}
.prose p,.prose li{max-width:68ch}
.prose li{margin:.35em 0}

/* ---------- footer: the road ---------- */
.road{background:var(--asphalt);color:#E8E5DE;margin-top:20px;position:relative}
.road::before{content:"";display:block;height:4px;background:repeating-linear-gradient(to right,var(--amber) 0 30px,transparent 30px 54px)}
.road-in{padding-top:22px;padding-bottom:26px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:18px 40px}
.plate{display:inline-block;background:var(--paper);border-radius:6px;padding:5px 9px;line-height:0}
.plate > img{height:30px;width:auto}
.road p{margin:10px 0 0;font-size:.9rem;max-width:52ch}
.road a{color:#F3F1EC}
.road :focus-visible{outline-color:var(--amber)}
.road-nav{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.92rem;margin:0 0 12px}
.ranks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ranks > li{border:1px solid #4A4A47;border-radius:4px;padding:3px 9px;font-size:.8rem;color:#CFCBC2}
.ranks > li > b{color:var(--amber);font-weight:700;margin-right:5px}
.road-note{grid-column:1 / -1;border-top:1px solid #3A3A38;padding-top:12px;font-size:.84rem;color:#BDB9B0}

/* ---------- small screens ---------- */
@media (max-width:820px){
  .log-ruler{display:none}
  .log-rows{background-image:none}
  .log-row{grid-template-columns:3.6rem minmax(0,1fr) auto;grid-template-areas:"d m m" "d n v" "d l l"}
  .duty{grid-area:d}
  .t-main{grid-area:m;padding-bottom:4px}
  .log-row > .t-rep{grid-area:n;text-align:left;padding:2px 14px}
  .log-row > .t-view{grid-area:v;padding:2px 14px}
  .t-last{grid-area:l;padding:2px 14px 10px}
  .t-num > i,.t-last > i{display:inline;margin-right:5px}
  .post{grid-template-columns:1fr}
  .lane{background:linear-gradient(to right,var(--amber) 55%,transparent 0) left bottom / 24px 3px repeat-x,var(--lane);flex-direction:row;flex-wrap:wrap;gap:2px 12px;padding:10px 14px 12px}
  .runs{flex-basis:100%;margin-top:2px;padding-top:4px}
  .runs > i{display:inline;margin-right:5px}
  .road-in{grid-template-columns:1fr}
}
@media (max-width:560px){
  .board{grid-template-columns:3.2rem 1fr}
  .board-nums{grid-column:2}
  .slab{padding:10px 14px}
  .prose{padding:4px 16px 14px}
  .sign{padding:14px 16px 16px}
  .cab-nav{gap:2px 14px;font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

/* tall shield logo: larger header size so the wordmark reads */
.brand > img{height:76px}
@media (max-width:640px){.brand > img{height:56px}}