/* ============================================================================
   First Cutt — competitions layer (boards, share sheet, challenges, name ask).
   Loads AFTER fc.css and uses ONLY its tokens — no raw hex in here.
   Everything must hold at 390px with zero horizontal overflow, and every
   animation is already killed globally by fc.css under prefers-reduced-motion.
   ========================================================================== */

/* ================================================================ boards === */
.fc-board {
  background: var(--fc-surface); border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius); padding: var(--sp-3) var(--sp-4) var(--sp-4);
  min-width: 0;                      /* grid-item guard — see LAFK min-w lesson */
}
.fc-board__head {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
  align-items: center; justify-content: space-between; margin-bottom: var(--sp-2);
}
.fc-board__title { display: flex; flex-direction: column; min-width: 0; }
.fc-board__title strong { font-size: 1.02rem; letter-spacing: -0.01em; }
.fc-board__month { font-size: .76rem; color: var(--fc-muted); font-weight: 600; }

.fc-board__tabs { display: inline-flex; gap: 4px; background: var(--fc-bg);
  border: 1px solid var(--fc-line-2); border-radius: 999px; padding: 3px; }
.fc-board__tab {
  border: 0; background: transparent; color: var(--fc-muted); cursor: pointer;
  font-size: .76rem; font-weight: 700; padding: 5px 12px; border-radius: 999px;
}
.fc-board__tab[aria-selected="true"] { background: rgba(162,230,26,.14); color: var(--fc-lime); }
.fc-board__tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--fc-focus); }

.fc-board__diffs { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 var(--sp-2); }
.fc-board__diff {
  border: 1px solid var(--fc-line-2); background: transparent; color: var(--fc-muted);
  cursor: pointer; font-size: .74rem; font-weight: 700; padding: 4px 11px; border-radius: 999px;
}
.fc-board__diff[aria-pressed="true"] { border-color: rgba(162,230,26,.4); color: var(--fc-lime); background: rgba(162,230,26,.08); }
.fc-board__diff:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--fc-focus); }

.fc-board__list { list-style: none; margin: 0; padding: 0; }
.fc-board__row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 8px 2px; border-bottom: 1px solid var(--fc-line);
  font-size: .9rem; min-width: 0;
}
.fc-board__row:last-child { border-bottom: 0; }
.fc-board__rank {
  flex: 0 0 26px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--fc-muted); font-size: .84rem;
}
.fc-board__rank.is-first { color: var(--fc-lime); }
.fc-board__name {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.fc-board__name em { font-style: normal; font-size: .7rem; font-weight: 700;
  color: var(--fc-lime); letter-spacing: .04em; text-transform: uppercase; margin-left: 5px; }
.fc-board__when { flex: 0 0 auto; color: var(--fc-muted); font-size: .76rem; }
.fc-board__val { flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; }

.fc-board__row.is-you { background: rgba(162,230,26,.06); border-radius: 8px; }
.fc-board__row.is-sample { opacity: .62; }
.fc-board__row.is-sample .fc-board__val { font-weight: 600; }

.fc-board__note { margin: var(--sp-2) 0 0; font-size: .78rem; color: var(--fc-muted); }

/* ====================================================== head-to-head panel === */
.fc-hth {
  background: var(--fc-surface-2); border: 1px solid rgba(162,230,26,.32);
  border-radius: var(--fc-radius); padding: var(--sp-4);
  margin-bottom: var(--sp-4); min-width: 0;
}
.fc-hth__eyebrow {
  margin: 0 0 6px; font-size: .74rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fc-lime);
}
.fc-hth__lead { margin: 0 0 var(--sp-2); font-size: 1.05rem; }
.fc-hth .fc-btn { margin-top: var(--sp-2); }

/* ============================================================= share sheet === */
.fc-cmodal { position: fixed; inset: 0; z-index: 320; display: flex;
  align-items: center; justify-content: center; padding: var(--sp-3); }
.fc-cmodal__overlay { position: absolute; inset: 0; background: rgba(6,15,16,.78); }
.fc-cmodal__box {
  position: relative; width: min(480px, 100%); max-height: min(86vh, 720px);
  overflow-y: auto; overflow-x: hidden;
  background: var(--fc-surface); border: 1px solid var(--fc-line-2);
  border-radius: var(--fc-radius-lg); box-shadow: var(--fc-shadow-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .2s ease, transform .2s ease;
}
.fc-cmodal[data-in="true"] .fc-cmodal__box { opacity: 1; transform: none; }
.fc-cmodal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: var(--sp-2);
}
.fc-cmodal__x {
  border: 1px solid var(--fc-line-2); background: transparent; color: var(--fc-text);
  width: 34px; height: 34px; border-radius: 9px; font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.fc-cmodal__x:hover { border-color: var(--fc-lime); color: var(--fc-lime); }
.fc-cmodal__x:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--fc-focus); }

.fc-share__imgwrap {
  border-radius: var(--fc-radius-sm); overflow: hidden;
  border: 1px solid var(--fc-line); margin-bottom: var(--sp-2);
}
.fc-share__imgwrap img { width: 100%; height: auto; }
.fc-share__claim { font-size: .88rem; font-weight: 600; margin: 0 0 var(--sp-2); }
.fc-share__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-2); }
.fc-share__ch {
  background: var(--fc-bg); border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius-sm); padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2); font-size: .88rem;
}
.fc-share__link { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.fc-share__link code {
  flex: 1 1 200px; min-width: 0; overflow-x: auto; white-space: nowrap;
  font-size: .76rem; color: var(--fc-lime); background: rgba(162,230,26,.07);
  border: 1px solid rgba(162,230,26,.2); border-radius: 7px; padding: 7px 9px;
  scrollbar-width: thin;
}

/* ========================================================== name capture === */
.fc-nameask {
  position: fixed; z-index: 310; right: 16px; bottom: 16px; left: 16px;
  max-width: 420px; margin-left: auto;
  background: var(--fc-surface-2); border: 1px solid var(--fc-line-2);
  border-left: 4px solid var(--fc-lime);
  border-radius: var(--fc-radius); box-shadow: var(--fc-shadow-2);
  padding: var(--sp-3) var(--sp-4);
  opacity: 0; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
}
.fc-nameask[data-in="true"] { opacity: 1; transform: none; }
.fc-nameask__lead { margin: 0 0 3px; font-weight: 800; }
.fc-nameask__sub { margin: 0 0 var(--sp-2); font-size: .8rem; color: var(--fc-muted); }
.fc-nameask__row { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-nameask__row input { flex: 1 1 140px; min-width: 0; padding: 9px 12px; }
.fc-nameask__err { margin: 6px 0 0; font-size: .8rem; color: var(--fc-caution); min-height: 1em; }

/* ==================================================== /challenges/ page === */
.fc-events { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 860px) { .fc-events { grid-template-columns: 1fr 1fr; } }
.fc-event { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.fc-event__meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: .8rem; color: var(--fc-muted);
}
.fc-event__meta a { font-weight: 700; }

.fc-howit { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; counter-reset: fcstep; }
@media (min-width: 760px) { .fc-howit { grid-template-columns: repeat(4, 1fr); } }
.fc-howit__step {
  background: var(--fc-surface); border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius); padding: var(--sp-3) var(--sp-4); min-width: 0;
}
.fc-howit__step::before {
  counter-increment: fcstep; content: counter(fcstep, decimal-leading-zero);
  display: block; font-weight: 800; font-size: .8rem; letter-spacing: .1em;
  color: var(--fc-lime); margin-bottom: 6px;
}
.fc-howit__step h3 { font-size: 1rem; margin-bottom: 6px; }
.fc-howit__step p { margin: 0; font-size: .88rem; color: var(--fc-muted); }

/* the sample-vs-real honesty band reuses .band from fc.css */


/* ---- Touch-target floor on the board controls -----------------------------
   qa/fc-qa.mjs measured .fc-board__tab / .fc-board__diff at 50x29 CSS px on a
   390px viewport — comfortably over the WCAG 2.2 SC 2.5.8 floor of 24x24, but
   well under the 44x44 every mobile platform actually designs to, and there
   are 30 of them stacked on /challenges/. Rather than fatten the pills (which
   would wreck the compact board header), the HIT AREA is extended with a
   centred pseudo-element. The pill looks identical; the finger target is 44px.
   tap-target floor. */
.fc-board__tab, .fc-board__diff { position: relative; }
.fc-board__tab::after, .fc-board__diff::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: var(--fc-tap, 44px); min-width: var(--fc-tap, 44px);
}
/* The row of pills needs the vertical room the hit areas now occupy, or
   adjacent rows overlap them and the top one wins every tap. */
.fc-board__tabs, .fc-board__diffs { row-gap: 10px; }