/* forum.css — the community feed and thread view.
 *
 * Text-first and dense on purpose: typography does the work, and the only
 * chrome is a hairline between rows. Everything is built from the tokens in
 * base.css — no new colours, no new radii, no card, no shadow. The page has to
 * look like the rest of the site read a forum into existence, not like a forum
 * template wearing the site's colours.
 */

.forum-head{padding:130px 0 var(--s6)}
.forum-head h1{font-size:clamp(30px,4.4vw,46px);line-height:1.15}
.forum-head .sub{margin-top:var(--s3)}

/* ---- toolbar -------------------------------------------------------------
   Sort and tag live on one line above the rule that starts the list. */
.forum-bar{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  padding-bottom:var(--s4);margin-top:var(--s6)}
.forum-sorts{display:flex;gap:2px;background:var(--card2);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:3px}
.forum-sorts button{border:0;background:none;cursor:pointer;color:var(--mut);
  font-family:var(--mono);font-size:12.5px;padding:6px 14px;border-radius:var(--r-pill);
  transition:color .2s,background .25s}
.forum-sorts button:hover{color:var(--txt)}
.forum-sorts button[aria-pressed="true"]{background:var(--acc);color:var(--acc-ink);font-weight:700}
.forum-bar .spacer{flex:1 1 auto}

.tagbar{display:flex;gap:var(--s2);flex-wrap:wrap}
.tagbar a{font-family:var(--mono);font-size:12px;color:var(--mut);padding:5px 10px;
  border-radius:var(--r-pill);border:1px solid transparent;transition:.2s;direction:ltr}
.tagbar a:hover{color:var(--acc);border-color:rgba(var(--acc-rgb),.3)}
.tagbar a[aria-current="true"]{color:var(--acc);border-color:var(--acc)}
.tagbar a i{font-style:normal;opacity:.55;margin-inline-start:5px}

/* ---- the list ------------------------------------------------------------
   Score column, then title, then a meta line. The score is the widest thing in
   its column at three digits, so the column is fixed and the titles all start
   on the same axis — a ragged left edge is what makes a feed feel unbuilt. */
.threads{border-block-start:1px solid var(--line)}
.thread{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:var(--s4);
  align-items:start;padding:var(--s4) 0;border-block-end:1px solid var(--line)}

.vote{grid-column:1;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:center;
  gap:2px;border:0;background:none;cursor:pointer;padding:2px 0;color:var(--mut);
  font-family:var(--mono);transition:color .2s}
.vote svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.vote b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--txt)}
.vote:hover{color:var(--acc)}
.vote:hover svg{transform:translateY(-2px)}
.vote[aria-pressed="true"]{color:var(--acc)}
.vote[aria-pressed="true"] b{color:var(--acc)}
.vote[disabled]{cursor:default;opacity:.65}
.vote[disabled]:hover svg{transform:none}

.thread .t{grid-column:2;grid-row:1;margin:0;font-size:clamp(16px,1.7vw,19px);
  font-weight:600;line-height:1.4;transition:color .2s}
.thread:hover .t{color:var(--acc)}
.thread .meta{grid-column:2;grid-row:2;margin-top:5px;display:flex;flex-wrap:wrap;
  align-items:center;gap:6px;color:var(--mut);font-size:13px}
.thread .meta .who{color:var(--txt);font-weight:600}
.thread .meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;
  opacity:.5;flex:none;animation:none;box-shadow:none}
.thread .meta .tag{font-family:var(--mono);font-size:11.5px;color:var(--acc);
  margin-inline-start:auto;direction:ltr}

/* ---- thread view --------------------------------------------------------- */
.post-head{padding:120px 0 0}
.post-head h1{font-size:clamp(26px,3.4vw,38px);line-height:1.22}
.post-meta{margin-top:var(--s3);display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  color:var(--mut);font-size:13.5px}
.post-body{margin-top:var(--s5);font-size:16px;line-height:1.85;color:var(--txt);
  white-space:pre-wrap;overflow-wrap:anywhere;max-width:70ch}
.post-actions{display:flex;gap:var(--s4);align-items:center;margin-top:var(--s5);
  padding-bottom:var(--s5);border-block-end:1px solid var(--line)}

/* Links inside a body are pasted by strangers and can be arbitrarily long, so
   they wrap mid-string rather than pushing the column wide. Underlined because
   colour alone is not an affordance for anyone who cannot separate these two
   greens. */
.post-body a,.cmt-body a{color:var(--acc);text-decoration:underline;
  text-underline-offset:3px;overflow-wrap:anywhere}
.post-body a:hover,.cmt-body a:hover{color:var(--acc2)}
.linkbtn{border:0;background:none;padding:0;cursor:pointer;color:var(--mut);
  font-size:13px;font-family:inherit;transition:color .2s}
.linkbtn:hover{color:var(--acc)}
.linkbtn.danger:hover{color:var(--warn)}

/* ---- comments ------------------------------------------------------------
   Depth is drawn with a single hairline rather than indentation alone, so a
   deep reply is still readable on a phone. Capped at 5 levels: past that the
   thread is a conversation between two people and should stay flat. */
.comments{margin-top:var(--s6);padding-bottom:var(--s9)}
.comments h2{font-size:20px;margin-bottom:var(--s4)}
.cmt{padding:var(--s4) 0;border-block-start:1px solid var(--line)}
.cmt-kids{margin-inline-start:var(--s4);padding-inline-start:var(--s4);
  border-inline-start:1px solid var(--line)}
.cmt-head{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:12.5px}
.cmt-head .who{color:var(--txt);font-weight:600;font-size:13.5px}
.cmt-head .owner{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--acc-ink);background:var(--acc);
  padding:2px 7px;border-radius:var(--r-pill)}
.cmt-body{margin-top:6px;font-size:15px;line-height:1.8;white-space:pre-wrap;
  overflow-wrap:anywhere;max-width:70ch}
.cmt-body.gone{color:var(--mut);font-style:italic}
.cmt-actions{margin-top:8px;display:flex;gap:var(--s4)}

/* ---- composer ------------------------------------------------------------ */
.composer{margin-top:var(--s5)}
.composer.hidden{display:none}
.field{display:block;margin-bottom:var(--s4)}
.field span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut);margin-bottom:8px}
html[lang="ar"] .field span{font-family:Qomraa,Tajawal,sans-serif;letter-spacing:0;
  font-size:13px;text-transform:none}
.field input,.field textarea,.field select{width:100%;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-sm);color:var(--txt);
  font:inherit;font-size:15px;padding:12px 14px;transition:border-color .2s}
.field textarea{min-height:150px;resize:vertical;line-height:1.75}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--acc)}
.field .count{float:inline-end;font-family:var(--mono);font-size:11px;color:var(--mut)}
.field .count.over{color:var(--warn)}
.composer-actions{display:flex;gap:var(--s3);align-items:center}

.reply-box{margin-top:var(--s3)}
.reply-box textarea{min-height:90px}

/* ---- states -------------------------------------------------------------- */
.notice{padding:var(--s5);border:1px dashed var(--line);border-radius:var(--r);
  color:var(--mut);font-size:14.5px;text-align:center}
.notice a{color:var(--acc);font-weight:700}
.flash{margin-top:var(--s4);padding:12px 16px;border-radius:var(--r-sm);font-size:14px;
  border:1px solid rgba(var(--warn-rgb),.4);background:rgba(var(--warn-rgb),.08);color:var(--warn)}
.flash.ok{border-color:rgba(var(--acc-rgb),.4);background:rgba(var(--acc-rgb),.08);color:var(--acc)}
.empty{padding:var(--s8) 0;text-align:center;color:var(--mut)}
.skeleton{padding:var(--s8) 0;text-align:center;color:var(--mut);font-family:var(--mono);font-size:13px}

/* ---- sign in ------------------------------------------------------------- */
.signin{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center;margin-top:var(--s4)}
.signin a{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);
  background:var(--card);color:var(--txt);padding:11px 20px;border-radius:var(--r-sm);
  font-weight:600;font-size:14.5px;transition:border-color .2s,color .2s}
.signin a:hover{border-color:var(--acc);color:var(--acc)}
.signin svg{width:17px;height:17px;flex:none}

.me{display:flex;align-items:center;gap:9px;font-size:13.5px}
.me img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--line)}
.me .h{font-family:var(--mono);font-size:12.5px;color:var(--mut);direction:ltr}

@media (max-width:640px){
  .forum-head{padding:110px 0 var(--s5)}
  .thread{grid-template-columns:40px minmax(0,1fr);column-gap:var(--s3)}
  .thread .meta .tag{margin-inline-start:0}
  .cmt-kids{margin-inline-start:var(--s2);padding-inline-start:var(--s3)}
}
@media (prefers-reduced-motion:reduce){
  .vote:hover svg{transform:none}
}

/* ---- migration additions ------------------------------------------------
   Added when the feed moved into Next. Everything below is still built from
   base.css tokens — no new colours, no new radii. */

/* Sort and tags share one row. Two full-width control rows stacked above a
   list compete for the eye and push the first post below the fold. */
.forum-bar{align-items:center}
.tagbar button{border:1px solid transparent;background:none;cursor:pointer;
  font-family:var(--mono);font-size:12px;color:var(--mut);padding:5px 10px;
  border-radius:var(--r-pill);transition:.2s;direction:ltr}
.tagbar button:hover{color:var(--acc);border-color:rgba(var(--acc-rgb),.3)}
.tagbar button[aria-current="true"]{color:var(--acc);border-color:var(--acc)}

/* The empty state is the first thing every visitor sees until someone posts,
   so it invites rather than reports. */
.forum-empty{padding:var(--s9) var(--s5);text-align:center;
  border-block-start:1px solid var(--line)}
.forum-empty h2{font-size:clamp(19px,2.2vw,23px);margin-bottom:8px}
.forum-empty p{color:var(--mut);font-size:15px;max-width:44ch;margin-inline:auto;line-height:1.75}

/* The sign-in panel is the conversion point of the page, so it reads as a
   destination rather than as the dashed placeholder it used to be. */
.signin-panel{margin-top:var(--s7);padding:var(--s7) var(--s5);text-align:center;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.signin-panel h2{font-size:clamp(18px,2vw,22px)}
.signin-panel p{color:var(--mut);font-size:14.5px;margin-top:8px;
  max-width:46ch;margin-inline:auto;line-height:1.7}
.signin-panel .muted{color:var(--mut);font-size:14px}
.tg-login{display:flex;justify-content:center;margin-top:var(--s5);min-height:48px}

/* Skeleton rows match the real row's geometry so nothing jumps when the feed
   arrives. Animation is dropped under reduced motion — a pulsing block is
   exactly the kind of thing that setting exists for. */
.thread.skel{pointer-events:none}
.thread.skel .vote,.thread.skel .t,.thread.skel .meta{
  background:var(--card2);border-radius:var(--r-sm);animation:skel 1.4s ease-in-out infinite}
.thread.skel .vote{height:38px;border:0}
.thread.skel .t{height:19px;width:min(72%,520px)}
.thread.skel .meta{height:13px;width:min(46%,300px);margin-top:9px}
@keyframes skel{0%,100%{opacity:.45}50%{opacity:.8}}
@media (prefers-reduced-motion:reduce){
  .thread.skel .vote,.thread.skel .t,.thread.skel .meta{animation:none;opacity:.5}
}

/* Under 640px the vote column and the meta line were cramped: the tag was
   colliding with the comment count and the score sat too close to the title. */
@media (max-width:640px){
  .forum-bar{gap:var(--s3)}
  .forum-bar .spacer{display:none}
  .forum-bar .btn{width:100%}
  .tagbar{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;
    scrollbar-width:none}
  .tagbar::-webkit-scrollbar{display:none}
  .thread .meta{gap:5px;font-size:12.5px}
  .thread .meta .tag{width:100%;margin-top:4px}
  .signin-panel{padding:var(--s6) var(--s4)}
}
.signin-alt{margin-top:14px;font-size:14px}
.signin-alt a{color:var(--acc,var(--accent));text-decoration:underline;text-underline-offset:3px}