/* ══════════════════════════════════════════════════════════════════════════
   pages.css — the DOCUMENT + GATE surfaces of bbaforum.com.
   SIXTH partial, linked last by shell() (forum/functions/_layout.js).

   WHY THIS FILE EXISTS
   Until now /login and /policy rendered against a SECOND, inline stylesheet
   injected by legacyPrimitives() in _layout.js — a private `.f-*` vocabulary
   (.f-card, .f-form, .f-cta, .f-lede, .f-crumb) that drew buttons with a 5px
   radius while the rest of the forum drew pills, section heads at 19px sans
   while the rest drew 26px serif, and a page title at 38px while every other
   page ran 44px. Two design systems on one site, and the fork sat on the two
   pages a prospective member has to walk through. Those pages now render the
   real system; this file holds only what is genuinely page-specific to them.

   OWNERSHIP / NON-OVERLAP
   • forum.css owns the primitives (.btn*, .bf-field, .bf-search*, .bf-eyebrow,
     .bf-headline, .bf-supporting, .sr-only, every token). Nothing here
     redefines one — this file positions them and adds its own children.
   • chrome.css / listing.css / thread.css / community.css own the sidebar,
     topbar, footer, listings, threads and the community layer. Nothing here
     reaches into any of their selectors.
   • Everything this file introduces is namespaced .bfp-  ("bf pages"), with
     the single documented exception of the INHERITED block directly below.
   • Light theme only, matching the rest of the forum. Reduced motion and
     :focus-visible are honoured through forum.css's global rules, which this
     file never overrides.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   1 · INHERITED PRIMITIVES — relocated verbatim, NOT a surviving fork.
   ══════════════════════════════════════════════════════════════════════════
   These four rules came out of legacyPrimitives() unchanged because routes
   this cell does not own still render them TODAY:

     .f-notice*  functions/index.js:450 · functions/c/[slug].js:272 ·
                 functions/t/[id].js:508,790,793 · functions/search.js:380 ·
                 functions/new.js:91 · public/forms.js:28 (built at runtime for
                 every failed form submit on the site)
     .f-hint     functions/new.js:88,121,134 · functions/t/[id].js:566 ·
                 public/forms.js:110
     .f-hp       functions/new.js:138 · functions/t/[id].js:343,584

   Deleting them with the fork would have unstyled every inline error box on
   the forum and — worse — made the honeypot VISIBLE, which both breaks the
   compose form for real people and stops it catching bots. Renaming them would
   have meant editing five route files another hand owns. So they move here,
   byte-identical, and the honeypot gains its correct .bf-hp name with the old
   one kept as a live alias until those routes are next touched.

   This is the whole remaining `.f-` surface: .f-card, .f-form, .f-cta,
   .f-lede and .f-crumb are GONE, and so is the alias block that used to
   redeclare --ink-72/--line/--teal-wash on :root (that last one silently
   overrode forum.css's own --teal-wash with a different alpha). */

.f-notice{
  padding:13px 15px;
  border-radius:var(--radius-sm);
  font-size:13.5px; line-height:1.55;
  margin-bottom:18px;
  border:1px solid;
}
.f-notice-teal { background:rgba(12,110,120,.06); border-color:rgba(12,110,120,.35); color:#0A4F57; }
.f-notice-amber{ background:rgba(200,145,43,.10); border-color:rgba(200,145,43,.40); color:#6B4E15; }
.f-notice-red  { background:rgba(205,70,66,.07);  border-color:rgba(205,70,66,.35);  color:#8E3330; }
.f-notice a{ font-weight:600; }

.f-hint{ font-size:12.5px; color:var(--body); margin:0; }

/* Honeypot. A real person never sees or focuses this field; anything typed
   into it flags a bot (forum/functions/_forum.js honeypotHit()). The
   off-screen positioning is load-bearing and identical to what shipped:
   display:none / visibility:hidden would let a bot detect and skip it. */
.bf-hp, .f-hp{
  position:absolute; left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}


/* ══════════════════════════════════════════════════════════════════════════
   2 · /login — THE GATE
   ══════════════════════════════════════════════════════════════════════════
   Every prospective member walks through this page, so it gets a real
   two-column treatment rather than a 400px box floating in 1080px of canvas:
   the promise on the left, the form on the right, the form pinned to the top
   of the fold. Below 980px it stacks head → card → aside, so the fields are
   the first thing under the headline on a phone and the reassurance follows
   rather than pushing the form below the fold. */

.bfp-auth{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  align-items:start;
  padding-bottom:8px;
}

@media (min-width:980px){
  .bfp-auth{
    grid-template-columns:minmax(0,1fr) 400px;
    grid-template-areas:
      "head card"
      "aside card";
    column-gap:56px;
    row-gap:26px;
  }
  .bfp-auth__head { grid-area:head; }
  .bfp-auth__card { grid-area:card; }
  .bfp-auth__aside{ grid-area:aside; }
}

.bfp-auth__head{ max-width:54ch; }
.bfp-auth__head .bf-supporting{ margin-top:10px; }
/* forum.css sets a{color:inherit} globally and leaves prose links to their
   surface, so every link these pages draw names its own colour. Scoped inside
   .bfp-* so the .bf-supporting primitive itself is untouched — /login and
   /policy both open with a link in their lede (the store, the affiliation
   disclosure) and neither may render as plain body text. */
.bfp-auth__head .bf-supporting a,
.bfp-doc__head .bf-supporting a{
  color:var(--teal);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}
.bfp-auth__head .bf-supporting a:hover,
.bfp-doc__head .bf-supporting a:hover{ color:var(--accent-press); }

/* The card. Same ground, hairline, radius and padding as the composer card
   the /new page draws (.bf-compose-card, forum.css) — a member who signs in
   and immediately starts a thread should not see the surface change shape. */
.bfp-auth__card{
  background:var(--surface-1);
  border:1px solid var(--hair-1);
  border-radius:var(--radius-md);
  padding:22px;
  box-shadow:var(--shadow-xs);
}

.bfp-form{ display:flex; flex-direction:column; gap:16px; }

/* Field visuals are copied VALUE-FOR-VALUE from forum.css's composer fields
   (.bf-compose-form input/select/textarea) rather than sharing the selector:
   that selector is scoped to the composer and belongs to another surface, and
   widening it from this file would be exactly the cross-sheet reach this
   partial exists to avoid. Identical result, no shared selector. */
.bfp-form input[type=email],
.bfp-form input[type=password],
.bfp-form input[type=text]{
  width:100%;
  min-height:46px;
  padding:12px;
  font:400 15px/1.6 var(--f-text);
  color:var(--ink);
  background:var(--surface-1);
  border:1px solid var(--hair-2);
  border-radius:var(--radius-sm);
  transition:border-color var(--dur-base) var(--ease-out);
}
.bfp-form input[type=email]:hover,
.bfp-form input[type=password]:hover{ border-color:var(--hair-3); }
.bfp-form input::placeholder{ color:var(--text-ghost); }

/* 16px on touch: anything smaller makes iOS Safari zoom the page on focus,
   which is its own horizontal-scroll bug. Same threshold forum.css applies to
   the composer. */
@media (pointer:coarse){
  .bfp-form input[type=email],
  .bfp-form input[type=password],
  .bfp-form input[type=text]{ font-size:16px; min-height:48px; }
}

.bfp-form__actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.bfp-form__actions .btn{ flex:1 1 auto; justify-content:center; }

/* The "no account yet" exit. It is a real part of the gate — a stranger with
   no store account has nothing to sign into (forum/functions/api/session.js) —
   so it sits inside the card under a hairline, not lost in a paragraph above. */
.bfp-auth__alt{
  margin:18px 0 0;
  padding-top:16px;
  border-top:1px solid var(--hair-1);
  font-size:13.5px; line-height:1.6;
  color:var(--body);
}
.bfp-auth__alt a{
  color:var(--teal);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}
.bfp-auth__alt a:hover{ color:var(--accent-press); }

.bfp-auth__aside{
  display:flex; flex-direction:column; gap:18px;
  max-width:52ch;
}
.bfp-auth__points{
  display:flex; flex-direction:column; gap:12px;
  margin:0; padding:0; list-style:none;
}
.bfp-auth__points li{
  position:relative;
  padding-left:20px;
  font-size:14.5px; line-height:1.6;
  color:var(--body);
}
.bfp-auth__points li::before{
  content:"";
  position:absolute; left:0; top:.62em;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--teal);
}
.bfp-auth__points strong{ color:var(--ink); font-weight:600; }

/* The compliance frame. Warm tint rather than another white card, so the
   research-use-only + 18+ line reads as a standing condition of the account
   and not as one more piece of page furniture. Text is --ink-soft, measured
   at 9.49:1 on this ground. */
.bfp-note{
  padding:14px 16px;
  background:var(--warm-tint);
  border:1px solid var(--warm-rule);
  border-radius:var(--radius-sm);
  font-size:13.5px; line-height:1.65;
  color:var(--ink-soft);
}
/* --accent-press, not --teal. On this warm-tint ground plain --teal measures
   4.90:1 — it clears WCAG AA but sits under the 5.18:1 floor the rest of the
   forum was brought to in this pass. --accent-press measures 6.49:1 on the
   same ground and is already the system's pressed/hover teal, so nothing new
   is invented to buy the margin. */
.bfp-note a{
  color:var(--accent-press);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}
.bfp-note a:hover{ color:var(--navy); }


/* ══════════════════════════════════════════════════════════════════════════
   3 · /policy — THE DOCUMENT
   ══════════════════════════════════════════════════════════════════════════
   This is a long prose document that people are sent to from a moderation
   notice, so it is set to be READ, not scanned like a row list: one measured
   column at ~68ch, 1.75 line-height, sections divided by rules instead of
   being chopped into five identical white cards, and a sticky contents rail
   so someone arriving for one clause can jump to it. */

.bfp-doc__head{
  padding-bottom:24px;
  margin-bottom:32px;
  border-bottom:1px solid var(--hairline);
}
.bfp-doc__head .bf-supporting{ margin-top:12px; max-width:64ch; }

.bfp-doc__body{ display:grid; grid-template-columns:1fr; gap:32px; }

@media (min-width:1080px){
  .bfp-doc__body{
    grid-template-columns:210px minmax(0,1fr);
    gap:56px;
  }
  .bfp-toc{
    position:sticky;
    /* clears the sticky topbar plus a breath of air */
    top:88px;
    align-self:start;
  }
}

/* ── contents rail ───────────────────────────────────────────────────── */
.bfp-toc__label{
  font-family:var(--f-mono);
  font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--body);
  margin:0 0 12px;
}
.bfp-toc__list{
  display:flex; flex-direction:column;
  margin:0; padding:0; list-style:none;
  border-left:1px solid var(--hair-1);
}
.bfp-toc__list a{
  display:block;
  padding:7px 0 7px 14px;
  margin-left:-1px;
  border-left:2px solid transparent;
  font-size:13.5px; line-height:1.45;
  color:var(--body);
  text-decoration:none;
  transition:color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
}
.bfp-toc__list a:hover{ color:var(--teal); border-left-color:var(--teal); }

@media (max-width:1079px){
  .bfp-toc{
    padding:16px 18px;
    background:var(--surface-2);
    border:1px solid var(--hair-1);
    border-radius:var(--radius-md);
  }
  .bfp-toc__list{
    flex-flow:row wrap;
    gap:2px 20px;
    border-left:0;
  }
  .bfp-toc__list a{
    padding:6px 0;
    margin-left:0;
    border-left:0;
    border-bottom:2px solid transparent;
    color:var(--teal);
    font-weight:600;
  }
  .bfp-toc__list a:hover{ border-bottom-color:var(--teal); }
}
@media (pointer:coarse){
  .bfp-toc__list a{ min-height:44px; display:flex; align-items:center; }
}

/* ── the prose column ────────────────────────────────────────────────── */
/* MEASURED, not guessed. The `ch` unit is the width of "0", which in IBM Plex
   Sans is noticeably wider than the average lowercase letter — 68ch measured
   out at 80 real characters per line, well past the comfortable range. 60ch
   lands at ~70, inside the 65–75 a long document wants. */
.bfp-prose{ max-width:60ch; }

.bfp-doc__section + .bfp-doc__section{
  margin-top:38px;
  padding-top:34px;
  border-top:1px solid var(--hairline);
}
/* Anchor jumps must not land the heading underneath the sticky topbar. */
.bfp-doc__section{ scroll-margin-top:96px; }

.bfp-prose h2{
  font-family:var(--f-display);
  font-weight:500;
  font-size:var(--t-h3);
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0 0 14px;
}
.bfp-prose p{
  font-size:16.5px;
  line-height:1.75;
  color:var(--ink-soft);
  margin:0 0 16px;
}
.bfp-prose p:last-child{ margin-bottom:0; }
.bfp-prose strong{ color:var(--ink); font-weight:600; }
.bfp-prose a{
  color:var(--teal);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}
.bfp-prose a:hover{ color:var(--accent-press); }

.bfp-list{
  display:flex; flex-direction:column; gap:10px;
  margin:0 0 16px; padding:0;
  list-style:none;
}
.bfp-list li{
  position:relative;
  padding-left:22px;
  font-size:16px;
  line-height:1.7;
  color:var(--ink-soft);
}
.bfp-list li::before{
  content:"";
  position:absolute; left:2px; top:.7em;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--teal);
  opacity:.55;
}

/* The removal-category vocabulary. It is a reference list a member checks a
   removal notice against, so it is set as a labelled grid rather than prose —
   and it keeps the exact MODERATION_CATEGORIES strings the moderation_log
   writes, which is the whole point of publishing it (16 CFR 465.6). */
.bfp-cats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:8px 20px;
  margin:0; padding:16px 18px;
  list-style:none;
  background:var(--surface-2);
  border:1px solid var(--hair-1);
  border-radius:var(--radius-md);
}
.bfp-cats li{
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink-soft);
}
.bfp-cats strong{
  font-weight:600;
  color:var(--ink);
}

/* The research-use-only frame is the one clause on this page that is a
   condition of using the site rather than a description of it, so it gets a
   teal rule and a wash instead of being one more paragraph. */
.bfp-callout{
  padding:18px 20px;
  background:var(--teal-wash);
  border:1px solid var(--teal-edge);
  border-left:3px solid var(--teal);
  border-radius:var(--radius-sm);
  margin:0 0 16px;
}
.bfp-callout p:last-child{ margin-bottom:0; }
/* Same 5.18:1 floor guard as .bfp-note: --teal drops to 4.90:1 once the teal
   wash is composited under it, --accent-press holds 6.49:1. Set here rather
   than left to .bfp-prose a so this block cannot regress if a link is ever
   added to the research-use-only clause. */
.bfp-callout a{ color:var(--accent-press); }
.bfp-callout a:hover{ color:var(--navy); }


/* ══════════════════════════════════════════════════════════════════════════
   4 · 404 — A FORK IN THE ROAD, NOT A DEAD END
   ══════════════════════════════════════════════════════════════════════════
   Most 404s here are a mistyped or stale /t/<id> link, so the page's job is to
   get the reader back to the thing they were looking for: a search box they can
   type the thread's title into, then the three places worth going instead. */

.bfp-404{ max-width:60ch; padding:8px 0 12px; }
.bfp-404 .bf-supporting{ margin-top:12px; }

.bfp-404__search{
  /* .bf-search is a topbar-sized control (34px, 360px cap). On a page where it
     is the primary action it needs to look like one — this sets only the two
     dimensions, and inherits every other property from the primitive. */
  height:48px;
  max-width:none;
  width:100%;
  margin:26px 0 22px;
}
.bfp-404__search .bf-search-input{ font-size:15px; padding-left:18px; }
@media (pointer:coarse){
  .bfp-404__search .bf-search-input{ font-size:16px; }
  .bfp-404__search .bf-search-btn{ min-width:56px; }
}

.bfp-404__label{
  font-family:var(--f-mono);
  font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--body);
  margin:0 0 12px;
}
.bfp-404__links{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:0; padding:0; list-style:none;
}
.bfp-404__links a{
  display:inline-flex; align-items:center;
  min-height:40px;
  padding:0 16px;
  background:var(--surface-1);
  border:1px solid var(--hair-2);
  border-radius:var(--radius-pill);
  font-size:13.5px; font-weight:600;
  color:var(--ink);
  text-decoration:none;
  transition:border-color var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out);
}
.bfp-404__links a:hover{ border-color:var(--teal); color:var(--teal); }
@media (pointer:coarse){
  .bfp-404__links a{ min-height:44px; }
}