/* ==========================================================================
   VRCAD forum — layered on the tokens defined in styles.css
   ========================================================================== */

.body--forum{ background:var(--bg); }

.forum{ padding:126px 0 96px; min-height:70vh; }

.forum__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
  padding-bottom:26px; margin-bottom:30px;
  border-bottom:1px solid var(--line);
}
.forum__headings h1{
  font-size:clamp(1.85rem, 3.2vw, 2.5rem);
  letter-spacing:-.032em;
}
.forum__headings p{
  margin-top:.7rem; max-width:58ch;
  color:var(--text-2); font-size:1rem;
}

.forum__account{ display:flex; align-items:center; gap:.8rem; flex:none; }
.whoami{ display:flex; align-items:center; gap:.6rem; font-size:.9rem; }
.whoami__avatar{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  background:linear-gradient(150deg, var(--blue), rgba(41,184,217,.35));
  border:1px solid rgba(143,166,240,.3);
  font-weight:700; font-size:.85rem; color:#EAF1FF;
  text-transform:uppercase;
}
.whoami__name{ font-weight:600; }
.whoami__role{
  margin-left:.35rem; padding:.1rem .42rem;
  background:rgba(41,184,217,.16);
  border:1px solid rgba(41,184,217,.4);
  border-radius:4px;
  font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cyan-lit);
}
.linkbtn{
  background:none; border:none; padding:0;
  color:var(--muted); font-size:.88rem; cursor:pointer;
  border-bottom:1px solid transparent;
}
.linkbtn:hover{ color:var(--cyan-lit); border-bottom-color:rgba(79,211,240,.4); }

/* ---------------------------------------------------------- breadcrumbs -- */
.crumbs{ display:flex; align-items:center; gap:.5rem; margin-bottom:22px; font-size:.88rem; }
.crumbs a{ color:var(--muted); }
.crumbs a:hover{ color:var(--cyan-lit); }
.crumbs span{ color:var(--faint); }
.crumbs b{ color:var(--text-2); font-weight:550; }

/* ---------------------------------------------------------------- flash -- */
.flash{
  margin-bottom:22px; padding:.85rem 1.1rem;
  border-radius:var(--radius-sm);
  font-size:.92rem;
  background:rgba(239,110,110,.10);
  border:1px solid rgba(239,110,110,.35);
  color:#F3B5B5;
}
.flash--ok{
  background:rgba(74,222,128,.09);
  border-color:rgba(74,222,128,.32);
  color:#A6E9C1;
}
.loading{ color:var(--muted); padding:2rem 0; }

/* ------------------------------------------------------- category board -- */
.boards{ display:grid; gap:14px; }
.board{
  display:grid; grid-template-columns:52px 1fr auto;
  gap:1.1rem; align-items:center;
  padding:1.35rem 1.5rem;
  background:linear-gradient(168deg, rgba(31,36,46,.82), rgba(18,22,30,.82));
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.board:hover{
  transform:translateY(-3px);
  border-color:rgba(143,166,240,.28);
  box-shadow:var(--shadow);
}
.board__icon{
  width:52px; height:52px;
  display:grid; place-items:center;
  border-radius:12px;
  background:linear-gradient(150deg, rgba(61,92,143,.45), rgba(41,184,217,.14));
  border:1px solid rgba(143,166,240,.22);
  color:var(--cyan-lit);
}
.board__icon svg{ width:24px; height:24px; }
.board__name{ font-size:1.12rem; font-weight:640; letter-spacing:-.018em; }
.board__desc{ margin-top:.28rem; font-size:.9rem; color:var(--text-2); }
.board__latest{ margin-top:.5rem; font-size:.8rem; color:var(--faint); }
.board__latest b{ color:var(--muted); font-weight:550; }
.board__counts{ display:flex; gap:1.5rem; text-align:right; flex:none; }
.board__counts div{ display:flex; flex-direction:column; }
.board__counts b{ font-size:1.15rem; font-weight:650; color:var(--text); }
.board__counts span{ font-size:.72rem; color:var(--faint); text-transform:uppercase; letter-spacing:.08em; }

.tag-admin{
  display:inline-block; margin-left:.5rem;
  padding:.08rem .45rem;
  background:rgba(232,180,76,.12);
  border:1px solid rgba(232,180,76,.35);
  border-radius:4px;
  font-size:.64rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:#E8B44C;
  vertical-align:middle;
}

/* ---------------------------------------------------------- thread list -- */
.toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:18px;
}
.toolbar__note{ font-size:.88rem; color:var(--muted); }

.threads{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.threadrow{
  display:grid; grid-template-columns:1fr auto auto;
  gap:1.2rem; align-items:center;
  padding:1rem 1.3rem;
  background:rgba(28,31,38,.5);
  border-bottom:1px solid var(--line);
  transition:background .22s var(--ease);
}
.threadrow:last-child{ border-bottom:none; }
.threadrow:hover{ background:rgba(41,50,66,.5); }
.threadrow__title{ font-size:1rem; font-weight:600; letter-spacing:-.012em; }
.threadrow__title:hover{ color:var(--cyan-lit); }
.threadrow__meta{ margin-top:.25rem; font-size:.8rem; color:var(--faint); }
.threadrow__meta b{ color:var(--muted); font-weight:550; }
.threadrow__count{ text-align:right; font-size:.85rem; color:var(--muted); flex:none; }
.threadrow__count b{ display:block; color:var(--text); font-size:1rem; font-weight:640; }
.badge{
  display:inline-block; margin-right:.45rem;
  padding:.1rem .42rem;
  border-radius:4px;
  font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  vertical-align:middle;
}
.badge--pin{ background:rgba(41,184,217,.14); border:1px solid rgba(41,184,217,.38); color:var(--cyan-lit); }
.badge--lock{ background:rgba(232,180,76,.12); border:1px solid rgba(232,180,76,.35); color:#E8B44C; }

.empty{
  padding:3rem 1.5rem; text-align:center;
  color:var(--muted); font-size:.95rem;
  border:1px dashed var(--line-2);
  border-radius:var(--radius);
}

/* --------------------------------------------------------------- thread -- */
.threadhead{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; margin-bottom:24px;
}
.threadhead h1{ font-size:clamp(1.45rem, 2.6vw, 2rem); letter-spacing:-.028em; line-height:1.2; }
.threadhead__meta{ margin-top:.55rem; font-size:.86rem; color:var(--faint); }
.modbar{ display:flex; gap:.5rem; flex-wrap:wrap; flex:none; }
.modbtn{
  padding:.42rem .8rem;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-2);
  border-radius:var(--radius-sm);
  font-size:.82rem; font-weight:550; color:var(--text-2);
  cursor:pointer;
  transition:all .22s var(--ease);
}
.modbtn:hover{ color:var(--text); border-color:rgba(143,166,240,.4); }
.modbtn.is-on{
  background:rgba(41,184,217,.14);
  border-color:rgba(41,184,217,.45);
  color:var(--cyan-lit);
}
.modbtn--danger:hover{ color:#F09090; border-color:rgba(239,110,110,.5); }

.posts{ display:grid; gap:16px; }
.post{
  display:grid; grid-template-columns:auto 1fr;
  gap:1.1rem;
  padding:1.4rem 1.5rem;
  background:linear-gradient(168deg, rgba(31,36,46,.7), rgba(18,22,30,.7));
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.post--op{ border-color:rgba(143,166,240,.22); }
.post__avatar{
  width:42px; height:42px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  background:linear-gradient(150deg, var(--blue), rgba(41,184,217,.3));
  border:1px solid rgba(143,166,240,.28);
  font-weight:700; font-size:1rem; color:#EAF1FF; text-transform:uppercase;
}
.post__head{
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  margin-bottom:.6rem;
}
.post__author{ font-weight:640; font-size:.96rem; }
.post__time{ font-size:.79rem; color:var(--faint); }
.post__actions{ margin-left:auto; display:flex; gap:.7rem; }
.post__main{ min-width:0; }

/* the author's standing, under their name */
.post__stats{
  display:flex; flex-wrap:wrap; gap:.35rem .9rem;
  margin:-.25rem 0 .85rem;
  font-size:.76rem; color:var(--faint);
}
.post__stats span{ display:inline-flex; align-items:center; }
.post__stats span + span::before{
  content:"·"; margin-right:.9rem; color:rgba(255,255,255,.18);
}

.post__foot{ margin-top:1rem; display:flex; align-items:center; gap:.7rem; }

.vote{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.34rem .7rem .34rem .55rem;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-2);
  border-radius:100px;
  color:var(--muted);
  font-size:.84rem; font-weight:600;
  cursor:pointer;
  transition:all .22s var(--ease);
}
.vote svg{ width:15px; height:15px; }
.vote:hover:not(:disabled){
  color:var(--cyan-lit);
  border-color:rgba(41,184,217,.45);
  background:rgba(41,184,217,.08);
}
.vote.is-on{
  color:var(--cyan-lit);
  border-color:rgba(41,184,217,.55);
  background:rgba(41,184,217,.14);
}
.vote:disabled{ opacity:.45; cursor:not-allowed; }
.vote__n{ font-variant-numeric:tabular-nums; }

.post__body{ font-size:.96rem; line-height:1.72; color:var(--text-2); overflow-wrap:anywhere; }
.post__body p{ margin:0 0 .85rem; }
.post__body p:last-child{ margin-bottom:0; }
.post__body a{ color:var(--cyan-lit); border-bottom:1px solid rgba(79,211,240,.35); }
.post__body a:hover{ border-bottom-color:var(--cyan-lit); }

/* --------------------------------------------------------------- editor -- */
.composer{
  margin-top:26px;
  padding:1.5rem 1.6rem;
  background:linear-gradient(168deg, rgba(31,36,46,.85), rgba(16,20,28,.88));
  border:1px solid var(--line-2);
  border-radius:var(--radius);
}
.composer h3{ font-size:1.05rem; margin-bottom:1rem; letter-spacing:-.015em; }
.composer .field:last-of-type{ margin-bottom:1.1rem; }
.composer__row{ display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; }
.composer__hint{ font-size:.8rem; color:var(--faint); }

.signedout{
  margin-top:26px; padding:1.6rem;
  text-align:center;
  background:rgba(28,31,38,.55);
  border:1px dashed var(--line-2);
  border-radius:var(--radius);
  color:var(--text-2); font-size:.95rem;
}
.signedout .btn{ margin-top:.9rem; }

/* ------------------------------------------------------- title editing -- */
.titleedit__box{ display:grid; gap:.7rem; margin-bottom:.4rem; }
.titleedit{
  width:100%;
  padding:.7rem .9rem;
  background:rgba(0,0,0,.32);
  border:1px solid rgba(41,184,217,.5);
  border-radius:var(--radius-sm);
  font-size:1.15rem; font-weight:640; letter-spacing:-.02em;
}
.titleedit:focus{ outline:none; box-shadow:0 0 0 3px rgba(41,184,217,.13); }

/* --------------------------------------------------------- admin: users -- */
.usersearch{ display:flex; gap:.6rem; margin-bottom:22px; flex-wrap:wrap; }
.usersearch__input{
  flex:1; min-width:220px;
  padding:.7rem .95rem;
  background:rgba(0,0,0,.30);
  border:1px solid var(--line-2);
  border-radius:var(--radius-sm);
  font-size:.95rem;
}
.usersearch__input:focus{
  outline:none;
  border-color:rgba(41,184,217,.6);
  box-shadow:0 0 0 3px rgba(41,184,217,.13);
}

.users{ display:grid; gap:12px; }

.userrow{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,1.4fr) auto;
  gap:1.2rem; align-items:center;
  padding:1.05rem 1.3rem;
  background:linear-gradient(168deg, rgba(31,36,46,.7), rgba(18,22,30,.7));
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.userrow.is-banned{
  border-color:rgba(239,110,110,.3);
  background:linear-gradient(168deg, rgba(52,32,36,.6), rgba(24,18,22,.7));
}
.userrow__name{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; min-width:0; }
.userrow__name b{ font-size:.98rem; font-weight:640; }

.userrow__field{ display:flex; flex-direction:column; gap:.25rem; min-width:0; }
.userrow__field label{
  font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint);
}
.userrow__email{ font-family:var(--mono); font-size:.82rem; color:var(--text-2); overflow-wrap:anywhere; }
.userrow__edit{ display:flex; gap:.4rem; flex-wrap:wrap; }
.userrow__edit input{
  flex:1; min-width:150px;
  padding:.45rem .6rem;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(41,184,217,.5);
  border-radius:6px;
  font-size:.85rem;
}
.userrow__edit input:focus{ outline:none; box-shadow:0 0 0 3px rgba(41,184,217,.13); }

.userrow__stats{
  display:flex; flex-wrap:wrap; gap:.3rem .9rem;
  font-size:.78rem; color:var(--faint);
}
.userrow__stats b{ color:var(--text-2); font-weight:640; }

.userrow__actions{ display:flex; gap:.45rem; flex-wrap:wrap; justify-content:flex-end; }

.userrow__pw{
  grid-column:1 / -1;
  display:flex; flex-direction:column; gap:.45rem;
  margin-top:.4rem; padding-top:.9rem;
  border-top:1px solid var(--line);
}
.userrow__pw label{
  font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint);
}
.userrow__hint{ font-size:.76rem; color:var(--faint); line-height:1.55; }

@media (max-width:900px){
  .userrow{ grid-template-columns:minmax(0,1fr); gap:.85rem; }
  .userrow__actions{ justify-content:flex-start; }
}

/* --------------------------------------------------------------- dialog -- */
.dlg{
  width:min(430px, calc(100vw - 32px));
  padding:2rem 1.9rem 1.8rem;
  background:linear-gradient(168deg, #1E232D, #12161E);
  border:1px solid var(--line-2);
  border-radius:calc(var(--radius) + 4px);
  color:var(--text);
  box-shadow:var(--shadow-lg);
}
.dlg::backdrop{ background:rgba(5,7,11,.72); backdrop-filter:blur(4px); }
.dlg__close-form{ position:absolute; top:.75rem; right:.75rem; margin:0; }
.dlg__close{
  width:32px; height:32px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--muted); font-size:1.2rem; line-height:1; cursor:pointer;
}
.dlg__close:hover{ color:var(--text); }
.dlg__title{ font-size:1.35rem; letter-spacing:-.024em; margin-bottom:1.2rem; }
.dlg__tabs{
  display:flex; gap:.3rem; margin-bottom:1.4rem;
  padding:.28rem;
  background:rgba(0,0,0,.3);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
.dlg__tab{
  flex:1; padding:.5rem .6rem;
  background:none; border:none; border-radius:6px;
  font-size:.88rem; font-weight:600; color:var(--muted);
  cursor:pointer; transition:all .2s var(--ease);
}
.dlg__tab:hover{ color:var(--text-2); }
.dlg__tab.is-active{ background:rgba(61,92,143,.45); color:var(--text); }
.dlg__error{
  margin-bottom:1rem; padding:.65rem .8rem;
  background:rgba(239,110,110,.10);
  border:1px solid rgba(239,110,110,.35);
  border-radius:var(--radius-sm);
  font-size:.86rem; color:#F3B5B5;
}
.dlg__note{ margin-top:.9rem; text-align:center; font-size:.78rem; color:var(--faint); }

/* ----------------------------------------------------------- responsive -- */
@media (max-width:820px){
  .forum{ padding:104px 0 72px; }
  .board{ grid-template-columns:44px 1fr; }
  .board__icon{ width:44px; height:44px; }
  .board__counts{ grid-column:1 / -1; justify-content:flex-start; gap:2rem; text-align:left; }
  .threadrow{ grid-template-columns:1fr auto; }
  .post{ grid-template-columns:1fr; gap:.8rem; }
  .post__avatar{ width:34px; height:34px; font-size:.85rem; }
}
@media (max-width:560px){
  .forum__head{ flex-direction:column; align-items:flex-start; }
  .threadrow{ grid-template-columns:1fr; }
  .threadrow__count{ text-align:left; }
  .composer{ padding:1.2rem 1.1rem; }
}