/* ================================================================
   FORUM RESULT
   ----------------------------------------------------------------
   The confirmation every request and report form shows after the
   site has posted it to the CIT forum: it went up, or it did not.

   It lives in its own stylesheet rather than in the partial because
   two of the forms (badge, test requests) post over fetch and build
   this markup in JavaScript — see /js/forum-result.js. Both paths
   render the same classes so the block looks identical whether the
   server drew it or the browser did.

   Register follows variables.css: hairlines, square corners, one
   gold accent, status colour only for state.
   ================================================================ */

.fpost {
  border-top: 2px solid var(--rule-strong);
  padding-top: 20px;
  margin-bottom: 32px;
  font-family: 'Barlow', sans-serif;
}
.fpost--ok   { border-top-color: var(--green); }
.fpost--fail { border-top-color: var(--red); }

.fpost-head {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(21px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}
.fpost--ok .fpost-head   { color: var(--green); }
.fpost--fail .fpost-head { color: var(--red); }

.fpost-body {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 68ch;
  margin: 10px 0 0;
}
.fpost-body + .fpost-body { margin-top: 10px; }

.fpost-reason {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink-3);
  background: var(--page-2);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--red);
  padding: 10px 12px;
  margin-top: 12px;
  word-break: break-word;
}

.fpost-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 18px;
}
.fpost-actions form { margin: 0; }

.fpost-btn {
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 9px 18px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: color 140ms ease-out, border-color 140ms ease-out;
}
.fpost-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.fpost-btn--primary {
  color: var(--sapd-gold);
  border-color: var(--sapd-gold-dim);
  font-weight: 600;
}
.fpost-btn--primary:hover { color: var(--sapd-gold); border-color: var(--sapd-gold); }
.fpost-btn:disabled { opacity: 0.55; cursor: default; }
.fpost-btn:focus-visible { outline: 2px solid var(--sapd-gold); outline-offset: 2px; }

/* Failure only: how to post it by hand. */
.fpost-manual {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.fpost-manual-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
}

.fpost-steps { list-style: none; margin: 0; padding: 0; }
.fpost-steps li {
  display: flex;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-2);
}
.fpost-steps li:last-child { border-bottom: none; }
.fpost-steps b {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-4);
  flex: 0 0 18px;
}
.fpost-steps a {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fpost-steps a:hover { color: var(--sapd-gold); }

.fpost-code-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0 8px;
}
.fpost-code-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fpost-code {
  background: var(--page-2);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  line-height: 1.65;
  padding: 16px 18px;
  margin: 0;
  max-height: 300px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}