/* ==========================================================================
   Forum stylesheet.
   --------------------------------------------------------------------------
   Everything is prefixed fm- so this can drop into a site with its own CSS
   without colliding. The accent is a single custom property; change it in one
   place and every highlight follows.

   Dense on purpose. A forum is a list of links, and the useful comparison is
   how many questions fit on a screen, not how much air surrounds each one.
   ========================================================================== */

:root{
  --fm-accent:#d4622a;
  --fm-link:#0f62b5;
  --fm-link-hover:#0b4e91;
  --fm-tx:#13232c;
  --fm-tx-2:#5b6f7d;
  --fm-tx-3:#8a9aa7;
  --fm-line:#e3e8ee;
  --fm-line-2:#cfd8e1;
  --fm-bg:#f6f7f9;
  --fm-surface:#ffffff;
  --fm-ink:#0e1a20;
  --fm-ok:#1b6b47;
  --fm-bad:#b3261e;
  --fm-warn:#8a6d1f;
  --fm-r:6px;
  --fm-font:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --fm-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* Only applied when the forum renders its own chrome. A host header supplies
   its own body styling. */
body{
  margin:0;background:var(--fm-bg);color:var(--fm-tx);
  font-family:var(--fm-font);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

.fm-wrap{max-width:940px;margin:0 auto;padding:0 16px}

/* --- top bar -------------------------------------------------------------- */
.fm-top{background:var(--fm-ink);color:#dfe8ed}
.fm-topin{display:flex;align-items:center;gap:18px;height:46px}
.fm-brand{
  color:#fff;font-weight:600;font-size:15px;text-decoration:none;letter-spacing:.01em;
  padding-right:16px;border-right:1px solid #2b3d46;
}
.fm-nav{display:flex;gap:16px;flex:1;min-width:0}
.fm-nav a{color:#9db0bb;text-decoration:none;font-size:13.5px;white-space:nowrap}
.fm-nav a:hover{color:#fff}
.fm-mod{position:relative}
.fm-badge{
  background:var(--fm-accent);color:#fff;border-radius:9px;
  padding:1px 6px;font-size:11px;font-weight:600;margin-left:2px;
}
.fm-me{display:flex;align-items:center;gap:12px;font-size:13.5px;white-space:nowrap}
.fm-me a{color:#9db0bb;text-decoration:none}
.fm-me a:hover{color:#fff}
.fm-karma{color:var(--fm-accent);font-weight:600;font-variant-numeric:tabular-nums}

.fm-body{padding:20px 16px 40px}

/* --- intro ---------------------------------------------------------------- */
.fm-intro{
  background:var(--fm-surface);border:1px solid var(--fm-line);
  border-radius:8px;padding:20px 22px;margin-bottom:18px;
}
.fm-intro h1{font-size:21px;font-weight:600;margin:0 0 6px;letter-spacing:-.015em}
.fm-intro p{color:var(--fm-tx-2);margin:0 0 14px;max-width:70ch}

/* --- tabs ----------------------------------------------------------------- */
.fm-tabs{display:flex;gap:2px;border-bottom:1px solid var(--fm-line);margin-bottom:4px}
.fm-tabs a{
  padding:8px 12px;font-size:13.5px;color:var(--fm-tx-2);text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.fm-tabs a:hover{color:var(--fm-tx)}
.fm-tabs a.on{color:var(--fm-tx);font-weight:500;border-bottom-color:var(--fm-accent)}

/* --- listing -------------------------------------------------------------- */
.fm-list{padding:6px 0}
.fm-row{display:flex;align-items:baseline;gap:6px;padding:7px 0}
.fm-rank{
  flex:none;width:26px;text-align:right;
  color:var(--fm-tx-3);font-size:13px;font-variant-numeric:tabular-nums;
}
.fm-vote{flex:none;width:20px;display:flex;flex-direction:column;align-items:center}
.fm-vote form{margin:0;line-height:1}
.fm-up,.fm-down{
  border:0;background:none;cursor:pointer;padding:0;
  color:var(--fm-line-2);font-size:11px;line-height:1.1;text-decoration:none;display:block;
}
.fm-up:hover,.fm-down:hover{color:var(--fm-tx-2)}
.fm-up.on{color:var(--fm-accent)}
.fm-down.on{color:var(--fm-link)}
.fm-item{flex:1;min-width:0}
.fm-title{font-size:14.5px;line-height:1.4}
.fm-title a{color:var(--fm-tx);text-decoration:none}
.fm-title a:hover{color:var(--fm-link);text-decoration:underline}
.fm-host{color:var(--fm-tx-3);font-size:12px}
.fm-meta{font-size:12px;color:var(--fm-tx-3);margin-top:2px}
.fm-meta a{color:var(--fm-tx-3);text-decoration:none}
.fm-meta a:hover{color:var(--fm-link);text-decoration:underline}
.fm-dot{color:var(--fm-line-2);margin:0 2px}

.fm-flag{
  display:inline-block;font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;padding:1px 5px;border-radius:3px;
  background:#eef1f5;color:var(--fm-tx-2);margin-left:4px;
}
.fm-flag.pending{background:#faf3e0;color:var(--fm-warn)}
.fm-flag.rejected{background:#fceceb;color:var(--fm-bad)}

.fm-more{padding:14px 0 0 32px}
.fm-more a{color:var(--fm-link);text-decoration:none;font-size:13.5px}
.fm-more a:hover{text-decoration:underline}

/* --- a single question ---------------------------------------------------- */
.fm-post{
  background:var(--fm-surface);border:1px solid var(--fm-line);
  border-radius:8px;padding:18px 20px;margin-bottom:20px;
}
.fm-post-head{display:flex;gap:12px;align-items:flex-start}
.fm-vote.big{width:34px;padding-top:4px}
.fm-vote.big .fm-up,.fm-vote.big .fm-down{font-size:15px}
.fm-score{
  font-size:14px;font-weight:600;color:var(--fm-tx-2);
  font-variant-numeric:tabular-nums;padding:1px 0;
}
.fm-post-title{flex:1;min-width:0}
.fm-post-title h1{font-size:21px;font-weight:600;letter-spacing:-.015em;margin:0 0 4px;line-height:1.35}
.fm-post-title h1 a{color:var(--fm-tx);text-decoration:none}
.fm-post-title h1 a:hover{color:var(--fm-link)}

/* --- body text ------------------------------------------------------------ */
.fm-text{font-size:14px;line-height:1.65;color:var(--fm-tx);margin-top:12px;max-width:76ch}
.fm-text p{margin:0 0 12px}
.fm-text p:last-child{margin-bottom:0}
.fm-text a{color:var(--fm-link)}
.fm-text a:hover{color:var(--fm-link-hover)}
.fm-text code{
  font-family:var(--fm-mono);font-size:12.5px;
  background:#f0f3f6;border:1px solid var(--fm-line);border-radius:3px;padding:1px 4px;
}

/* --- answers -------------------------------------------------------------- */
.fm-answers h2{font-size:16px;font-weight:600;margin:0 0 12px}
.fm-answer-form{margin:0 0 22px}
.fm-answer-form textarea{
  width:100%;box-sizing:border-box;font-family:var(--fm-font);font-size:14px;
  line-height:1.6;padding:11px 12px;border:1px solid var(--fm-line-2);
  border-radius:var(--fm-r);background:var(--fm-surface);resize:vertical;
}
.fm-answer-form textarea:focus{outline:0;border-color:var(--fm-link);box-shadow:0 0 0 3px #e8f1fb}
.fm-answer-actions{display:flex;align-items:center;gap:12px;margin-top:9px;flex-wrap:wrap}

.fm-comment{
  display:flex;gap:8px;padding:14px 0;border-top:1px solid var(--fm-line);
}
.fm-comment-body{flex:1;min-width:0}
.fm-comment .fm-text{margin-top:5px;font-size:13.5px}

/* --- forms ---------------------------------------------------------------- */
.fm-form-page,.fm-auth,.fm-doc,.fm-search-page,.fm-profile,.fm-mod-page{max-width:720px}
.fm-auth{max-width:390px;margin:24px auto}
.fm-form-page h1,.fm-auth h1,.fm-doc h1,.fm-search-page h1,.fm-profile h1,.fm-mod-page h1{
  font-size:21px;font-weight:600;letter-spacing:-.015em;margin:0 0 6px;
}
.fm-h2{font-size:16px;font-weight:600;margin:26px 0 10px}

label{display:block;font-size:13px;font-weight:500;color:var(--fm-tx-2);margin:16px 0 5px}
.fm-optional{font-weight:400;color:var(--fm-tx-3)}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=search],textarea{
  width:100%;box-sizing:border-box;font-family:var(--fm-font);font-size:14px;
  padding:9px 11px;border:1px solid var(--fm-line-2);border-radius:var(--fm-r);
  background:var(--fm-surface);color:var(--fm-tx);
}
textarea{line-height:1.6;resize:vertical}
input:focus,textarea:focus{outline:0;border-color:var(--fm-link);box-shadow:0 0 0 3px #e8f1fb}
.fm-hint{font-size:12.5px;color:var(--fm-tx-3);margin-top:5px;line-height:1.5}
.fm-hint code{font-family:var(--fm-mono);font-size:12px}
.fm-form-actions{display:flex;align-items:center;gap:14px;margin-top:20px}
.fm-cancel{color:var(--fm-tx-3);text-decoration:none;font-size:13.5px}
.fm-cancel:hover{color:var(--fm-tx-2)}

.fm-btn{
  display:inline-block;font-family:var(--fm-font);font-size:13.5px;font-weight:500;
  padding:9px 16px;border-radius:var(--fm-r);border:1px solid var(--fm-accent);
  background:var(--fm-accent);color:#fff;cursor:pointer;text-decoration:none;
}
.fm-btn:hover{background:#bd5624;border-color:#bd5624;color:#fff}
.fm-btn.wide{width:100%;margin-top:18px}
.fm-btn.ghost{background:none;color:var(--fm-tx-2);border-color:var(--fm-line-2)}
.fm-btn.ghost:hover{background:#eef1f5;color:var(--fm-tx);border-color:var(--fm-line-2)}
.fm-btn.danger{background:none;color:var(--fm-bad);border-color:#f0cdca}
.fm-btn.danger:hover{background:var(--fm-bad);color:#fff;border-color:var(--fm-bad)}

/* --- sign in -------------------------------------------------------------- */
.fm-google{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:10px;border:1px solid var(--fm-line-2);border-radius:var(--fm-r);
  background:var(--fm-surface);color:var(--fm-tx);text-decoration:none;
  font-size:14px;font-weight:500;margin-top:16px;
}
.fm-google:hover{background:#f6f7f9;color:var(--fm-tx)}
.fm-g{
  width:19px;height:19px;border-radius:50%;background:#4285f4;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;
}
.fm-or{position:relative;text-align:center;margin:18px 0 4px}
.fm-or:before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--fm-line);
}
.fm-or span{position:relative;background:var(--fm-bg);padding:0 10px;color:var(--fm-tx-3);font-size:12.5px}
.fm-auth-foot{margin-top:18px;font-size:13.5px;color:var(--fm-tx-2);text-align:center}
.fm-auth-foot a{color:var(--fm-link)}

/* --- notes ---------------------------------------------------------------- */
.fm-note{
  padding:11px 14px;border-radius:var(--fm-r);margin-bottom:16px;
  background:#eef1f5;color:var(--fm-tx-2);font-size:13.5px;line-height:1.55;
}
.fm-note b{color:var(--fm-tx)}
.fm-note a{color:var(--fm-link)}
.fm-note.bad{background:#fceceb;color:#7d1a14}
.fm-note.bad b{color:#7d1a14}

.fm-empty{
  text-align:center;padding:44px 20px;color:var(--fm-tx-2);
  background:var(--fm-surface);border:1px solid var(--fm-line);border-radius:8px;
}
.fm-empty p{margin:0 0 8px}
.fm-muted{color:var(--fm-tx-3)}

/* --- search --------------------------------------------------------------- */
.fm-search-form{display:flex;gap:8px;margin:14px 0 18px}
.fm-search-form input{flex:1}
.fm-result{padding:13px 0;border-bottom:1px solid var(--fm-line)}
.fm-result-t{font-size:14.5px;color:var(--fm-tx);text-decoration:none;font-weight:500}
.fm-result-t:hover{color:var(--fm-link);text-decoration:underline}
.fm-result-s{font-size:13px;color:var(--fm-tx-2);margin:3px 0 3px;line-height:1.55}
.fm-result-s mark{background:#fdf0d0;color:inherit;padding:0 1px}

/* Containers that only exist to group. Given rules rather than left as
   orphan class names, so a later reader does not wonder what happened to
   their styling. */
.fm-results{margin-top:4px}
.fm-answer-list{margin-top:4px}
.fm-mod-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}

/* --- profile -------------------------------------------------------------- */
.fm-realname{font-weight:400;color:var(--fm-tx-3);font-size:16px;margin-left:6px}
/* The real name in a byline. Same size as the username but lighter, so the
   handle stays the thing your eye lands on. */
.fm-realname-inline{color:var(--fm-tx-3);font-weight:400}
.fm-profile{margin-bottom:8px}
.fm-answer-item{padding:14px 0;border-bottom:1px solid var(--fm-line)}
.fm-answer-on{font-size:13.5px;color:var(--fm-link);text-decoration:none}
.fm-answer-on:hover{text-decoration:underline}

/* --- moderation ----------------------------------------------------------- */
.fm-mod-page{max-width:820px}
.fm-mod-item{
  background:var(--fm-surface);border:1px solid var(--fm-line);
  border-radius:8px;padding:16px 18px;margin-top:14px;
}
.fm-mod-title{font-size:15.5px;font-weight:600;line-height:1.4}
.fm-mod-title a{color:var(--fm-tx);text-decoration:none}
.fm-mod-body{
  max-height:280px;overflow:auto;background:#fafbfc;
  border:1px solid var(--fm-line);border-radius:var(--fm-r);padding:11px 13px;font-size:13.5px;
}
.fm-mod-actions{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.fm-mod-actions form{margin:0}
.fm-mod-view{margin-left:auto;color:var(--fm-tx-3);text-decoration:none;font-size:13px}
.fm-mod-view:hover{color:var(--fm-link)}

/* --- documents ------------------------------------------------------------ */
.fm-doc h2{font-size:16px;font-weight:600;margin:26px 0 8px}
.fm-doc p,.fm-doc li{color:var(--fm-tx-2);line-height:1.65;max-width:74ch}
.fm-doc p{margin:0 0 12px}
.fm-doc ul{margin:0 0 14px;padding-left:20px}
.fm-doc li{margin-bottom:6px}
.fm-doc a{color:var(--fm-link)}
.fm-doc code{
  font-family:var(--fm-mono);font-size:12.5px;background:#f0f3f6;
  border:1px solid var(--fm-line);border-radius:3px;padding:1px 4px;
}

.fm-aside{
  margin-top:26px;padding:16px 18px;background:#f0f3f6;
  border-radius:8px;font-size:13px;color:var(--fm-tx-2);
}
.fm-aside h3{font-size:13.5px;font-weight:600;color:var(--fm-tx);margin:0 0 8px}
.fm-aside ul{margin:0;padding-left:18px}
.fm-aside li{margin-bottom:5px;line-height:1.55}
.fm-aside a{color:var(--fm-link)}

/* --- footer --------------------------------------------------------------- */
.fm-foot{
  border-top:1px solid var(--fm-line);padding:18px 0;margin-top:30px;
  font-size:13px;
}
.fm-foot .fm-wrap{display:flex;gap:18px;flex-wrap:wrap}
.fm-foot a{color:var(--fm-tx-3);text-decoration:none}
.fm-foot a:hover{color:var(--fm-link)}

@media (max-width:640px){
  .fm-topin{gap:12px;height:auto;padding:8px 0;flex-wrap:wrap}
  .fm-nav{order:3;width:100%;gap:14px;overflow-x:auto}
  .fm-brand{padding-right:12px}
  .fm-rank{display:none}
  .fm-post{padding:15px 16px}
  .fm-post-title h1{font-size:18px}
}