/* Flat SKIN for pages that are restyled rather than rebuilt.
 *
 * Four pages get this instead of their own new markup, and the reason is the
 * same in each case: their behaviour is driven by page script bound to existing
 * ids and classes, so replacing the markup would mean rewriting that script.
 *
 *   mentors      — booking modal, calendar, filters
 *   class detail — enrolment flow, payment QR, attendance
 *   BA path      — INVEST checker, SQL sandbox, progress accordions
 *   profile      — tabbed admin surfaces, uploads, toggles
 *
 * Loaded ON TOP of each page's own stylesheet, so anything not restated here
 * keeps working. Applied by adding .fs-skin to <main>.
 *
 * House rules: radius 0, no shadow, no gradient. Deliberately generic: it
 * touches shared primitives (headings, cards, buttons, inputs) and never a
 * page-specific behavioural class.
 */
/* Declared on the strip too, not only .fs-skin. Custom properties inherit down
   the tree, and .fs-strip is a SIBLING of the skinned <main> on class.php and
   profile.php — so var(--fs-ink) resolved to nothing there, the background was
   dropped as invalid, and the strip rendered its white text on a white page.
   It carries data-ab-cta, so the experiment's success metric was unclickable.
   community-flat.css already scoped its tokens this way. */
.fs-skin,.fs-strip{
  --fs-ink:#0a0a0a; --fs-paper:#fff; --fs-dim:#4b5563; --fs-lab:#9aa1ab; --fs-hair:#e6e6e6;
  --fs-blue:#1a3aff; --fs-orange:#e8501e; --fs-green:#0f7a4a;
  --fs-font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-family:var(--fs-font);
  color:var(--fs-ink);
}
.fs-skin *{box-sizing:border-box}

/* Corners and shadows go everywhere, in one sweep. This is the single biggest
   visual difference between the two designs, and doing it by hand per component
   is how a restyle ends up half-applied. */
.fs-skin [class*="card"],.fs-skin [class*="panel"],.fs-skin [class*="box"],
.fs-skin [class*="tile"],.fs-skin [class*="modal"],.fs-skin section,
.fs-skin aside,.fs-skin input,.fs-skin select,.fs-skin textarea,
.fs-skin button,.fs-skin .btn{border-radius:0 !important;box-shadow:none !important}

.fs-skin h1{font-size:clamp(26px,3.8vw,46px);line-height:1.06;letter-spacing:-.045em;
  font-weight:800}
.fs-skin h2{font-size:clamp(19px,2.4vw,30px);letter-spacing:-.038em;font-weight:800}
.fs-skin h3{font-size:clamp(16px,1.9vw,21px);letter-spacing:-.03em;font-weight:800}

/* Buttons: the flat pair, applied to whatever the page already calls them. */
.fs-skin .btn,.fs-skin button.btn{border:2px solid var(--fs-ink);font-family:inherit;
  font-weight:800;padding:12px 22px;line-height:1.2}
.fs-skin .btn-primary{background:var(--fs-ink);color:#fff;border-color:var(--fs-ink)}
.fs-skin .btn-primary:hover{background:#252525;border-color:#252525;color:#fff}
.fs-skin .btn-secondary,.fs-skin .btn-outline{background:transparent;color:var(--fs-ink);
  border-color:var(--fs-ink)}
.fs-skin .btn-secondary:hover,.fs-skin .btn-outline:hover{background:var(--fs-ink);color:#fff}
.fs-skin .btn-sm{padding:9px 16px;font-size:12.5px}

.fs-skin input,.fs-skin select,.fs-skin textarea{border:2px solid var(--fs-ink);
  font-family:inherit}
.fs-skin input:focus,.fs-skin select:focus,.fs-skin textarea:focus{
  outline:3px solid var(--fs-blue);outline-offset:-3px}

/* The strip every skinned page appends. */
.fs-strip{background:var(--fs-ink);color:#fff;padding:clamp(26px,4vw,46px) clamp(20px,5vw,56px);
  margin-top:32px;display:flex;gap:22px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;font-family:var(--fs-font)}
.fs-strip-green{background:var(--fs-green)}
.fs-strip-blue{background:var(--fs-blue)}
.fs-strip-t{font-size:clamp(18px,2.4vw,28px);font-weight:800;letter-spacing:-.032em;
  line-height:1.15;margin:0;color:#fff;max-width:28ch}
.fs-strip-s{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.75);margin:8px 0 0;
  max-width:58ch}
.fs-btn{display:inline-block;padding:14px 26px;font-weight:800;font-size:14.5px;
  text-decoration:none;border:2px solid #fff;background:#fff;color:var(--fs-ink);border-radius:0;
  font-family:inherit;line-height:1.2;white-space:nowrap}
.fs-btn:hover{background:#f0f0f0;border-color:#f0f0f0}
.fs-strip a.fs-btn,.fs-strip a.fs-btn:hover{color:var(--fs-ink);text-decoration:none}
.fs-strip .fs-strip-t{color:#fff}