/* FORUM: a bulletin board on the green screen of a terminal on the hangar bay photo. The bezel is a Krea render
   (assets/console/term.webp: tools/gen_console.sh, tools/prep_console.py) drawn as a border image (its rim is 63 75 74 71
   px of the image, shown at half), its power light and knobs (term_knobs.webp) laid on the bottom right corner. The
   terminal fills the page's height (#pg-forum is a size container) and its screen scrolls. Headings and lists are in
   the screen's VT323; post texts in Share Tech Mono, larger, so long posts stay easy to read. */
#pg-forum{background:#121517 url(../assets/items/profile_bg.jpg) center/cover no-repeat;container-type:size;overflow:hidden}
.term{--g:#7dff5f;--g2:#4fd236;--g3:#2b7d22;--gdim:#1d4d18;--bg:#020a03;--glow:0 0 6px rgba(125,255,95,.55);
  position:relative;box-sizing:border-box;width:min(100% - 24px,1040px);height:calc(100cqh - 24px);margin:12px auto;
  border:solid transparent;border-width:31.5px 37.5px 37px 35.5px;border-image:url(../assets/console/term.webp) 63 75 74 71 stretch;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.6))}
.t-knobs{position:absolute;right:-6.5px;bottom:-28.5px;width:47.5px;height:16px;pointer-events:none}
.t-scr{position:relative;height:100%;overflow:hidden;border-radius:10px;background:radial-gradient(ellipse at 50% 45%,#0b2a0c 0%,#041306 60%,#010501 100%);color:var(--g);text-shadow:var(--glow)}
.t-scr::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px)}
.t-scr::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 40px rgba(0,0,0,.85),inset 0 0 8px rgba(125,255,95,.15)}
#forumIn{position:absolute;inset:0;z-index:2;overflow-y:auto;padding:16px 22px 22px;font:19px/1.2 'VT323',var(--f-lcd),monospace;scrollbar-width:thin;scrollbar-color:var(--g3) transparent;touch-action:pan-y}
#forumIn button{all:unset;cursor:pointer;font:inherit;color:inherit}
/* heading, the path line with the actions on its right, buttons in brackets that invert under the cursor */
.tH{display:flex;align-items:baseline;gap:14px;padding-bottom:4px;border-bottom:2px solid var(--g);font-size:26px;letter-spacing:2px;text-transform:uppercase}
.tH b{font-weight:normal;overflow-wrap:anywhere}.tH small{margin-left:auto;font-size:17px;letter-spacing:1px;color:var(--g2);text-transform:none;white-space:nowrap}
.tPath{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:8px 0 12px;color:var(--g2)}
.tPath i{flex:1}
#forumIn .tBtn,#forumIn .tLnk{padding:0 3px;color:var(--g)}
#forumIn .tBtn:hover,#forumIn .tLnk:hover,#forumIn .tBtn.on{background:var(--g);color:var(--bg);text-shadow:none}
#forumIn .tBtn.confirm{background:#ff5a3a;color:#000;text-shadow:none;animation:blink 1s steps(2) infinite}
.tNote{margin:10px 0;color:var(--g2)}
/* the lists: one row per board or topic, the row under the cursor lit */
.tList{display:flex;flex-direction:column}
.tRow{display:grid;grid-template-columns:minmax(0,1fr) 64px 64px minmax(0,.8fr);gap:12px;align-items:start;padding:5px 4px;border-bottom:1px dashed var(--gdim)}
.tRow.t3{grid-template-columns:minmax(0,1fr) 72px minmax(0,.5fr)}
.tRow .n{text-align:right}
.tRow.tTh{color:var(--g3);text-shadow:none;letter-spacing:1px;border-bottom:1px solid var(--g3)}
.tRow:not(.tTh):hover{background:rgba(125,255,95,.08)}
#forumIn .bname{font-size:21px;color:#c9ffb8}
.bdesc{display:block;font-size:16px;color:#46b33a;text-shadow:none}
.ftag{display:inline-block;margin-right:6px;padding:0 4px;font-size:15px;line-height:1.1;letter-spacing:1px;color:var(--bg);background:var(--g);text-shadow:none;vertical-align:1px}
.ftag.lock,.ftag.admin{background:#ff6a4a}.ftag.pin{background:#ffd24a}.ftag.mod{background:#6fd0ff}
.uname.admin{color:#ff7a5c!important}.uname.mod{color:#8fdcff!important}
/* a post: the pilot's mech as a green photo, then the message */
.fpost{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px dashed var(--gdim)}
.fpost.del{opacity:.55}
.fwho{text-align:center;font-size:17px;line-height:1.2;color:var(--g2);overflow-wrap:anywhere}
.fwho .av{position:relative;width:112px;height:84px;margin:0 auto 4px;overflow:hidden;border:1px solid var(--g3);background:var(--bg)}
.fwho .av img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.2) brightness(.9) sepia(1) hue-rotate(55deg) saturate(2.4);mix-blend-mode:screen}
.fwho .av .rkb{position:absolute;right:2px;bottom:2px;width:36px;height:18px;margin:0;filter:grayscale(1) brightness(1.3) sepia(1) hue-rotate(55deg) saturate(3)}
.fwho b{font-weight:normal;font-size:20px;color:#c9ffb8}
.fmeta{display:flex;gap:12px;align-items:center;padding-bottom:4px;margin-bottom:6px;border-bottom:1px solid var(--gdim);font-size:16px;color:#46b33a;text-shadow:none}
.fmeta .sp{flex:1}
.fbody{white-space:pre-wrap;overflow-wrap:anywhere;font:15px/1.6 'Share Tech Mono',var(--f-lcd),monospace;color:#d8ffd0;text-shadow:0 0 4px rgba(125,255,95,.35);user-select:text;-webkit-user-select:text}
/* writing: fields boxed in thin green, a block cursor colour, the counter and the send button under them */
.fform{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.fform label{display:flex;flex-direction:column;gap:3px;color:var(--g2);letter-spacing:1px}
.fform input,.fform textarea{padding:6px 8px;font:15px/1.5 'Share Tech Mono',var(--f-lcd),monospace;color:#d8ffd0;background:rgba(0,0,0,.35);border:1px solid var(--g3);border-radius:0;outline:none;caret-color:var(--g);resize:vertical;-webkit-user-select:text;user-select:text}
.fform input::placeholder,.fform textarea::placeholder{color:var(--g3)}
.fform input:focus,.fform textarea:focus{border-color:var(--g);box-shadow:0 0 6px rgba(125,255,95,.35)}
.fform textarea{min-height:120px}
.fform .row2{display:flex;gap:12px;align-items:center}.fform .row2 .sp{flex:1}
.fform .msg{font:17px VT323,var(--f-lcd),monospace;color:#ff7a5c;text-shadow:0 0 5px rgba(255,90,58,.5)}
.fpages{display:flex;gap:6px;align-items:center;justify-content:center;margin:12px 0;color:var(--g3)}
@media (max-width:700px){
  .term{width:calc(100% - 8px);height:calc(100cqh - 8px);margin:4px auto;border-width:21px 25px 24.5px 23.5px}
  .t-knobs{right:-4px;bottom:-19px;width:32px;height:11px}
  #forumIn{padding:10px 12px 16px;font-size:17px}
  .tH{font-size:21px}
  .tRow,.tRow.t3{grid-template-columns:minmax(0,1fr) 48px}.tRow>span:nth-child(n+3){display:none}
  .fpost{grid-template-columns:1fr;gap:8px}.fwho{display:flex;gap:10px;align-items:center;text-align:left}.fwho .av{width:64px;height:48px;margin:0}
}