/* Brand tokens, from the Yokefellows brand kit's brand.css. Components use
   these, never raw hex: navy is structure, light blue is active/focus, gold
   (--yf-accent) is rare emphasis only. Danger is the one non-brand colour. */
:root {
  --yf-navy-900: #0A1F44;
  --yf-navy-800: #00285F;
  --yf-blue-400: #72B6F0;
  --yf-blue-300: #8AA4BF;
  --yf-blue-200: #D8EAF8;
  --yf-gold-500: #FFC400;
  --yf-gold-100: #FFF2BF;

  --yf-background: #F4F5F7;
  --yf-surface: #FFFFFF;
  --yf-border: #D8E1EA;
  --yf-text-primary: #0A1F44;
  --yf-text-secondary: #5F7288;

  --yf-primary: #00285F;
  --yf-primary-hover: #0A1F44;
  --yf-secondary: #72B6F0;
  --yf-secondary-hover: #5AA8EA;
  --yf-accent: #FFC400;
  --yf-focus: #72B6F0;

  --yf-on-primary: #FFFFFF;
  --yf-focus-ring: rgba(114,182,240,.5);
  --yf-danger: #9B1C1C;
  --yf-danger-bg: #FDE8E8;
}
@font-face { font-family: "Source Sans 3"; font-weight: 200 900; font-display: swap;
  src: url("../fonts/source-sans-3-latin-wght.30164609c163.woff2") format("woff2"); }

* { box-sizing: border-box; }
body { margin: 0; background: var(--yf-background); color: var(--yf-text-primary);
  font: 16px/1.5 "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: var(--yf-primary); }
:focus-visible { outline: 2px solid var(--yf-focus); outline-offset: 2px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--yf-primary);
  box-shadow: 0 0 0 3px var(--yf-focus-ring); }
#app { max-width: 760px; margin: 0 auto; padding: 0 0 64px; }

#app > header { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 20px; background: var(--yf-primary); color: var(--yf-background); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: .01em; line-height: 1.2; }
.brand img { width: 32px; height: 32px; flex: none; }
.brand span { display: block; font-weight: 400; font-size: 12px; color: var(--yf-blue-200); letter-spacing: .02em; }
.who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--yf-blue-200); flex-wrap: wrap; }
.who strong { color: var(--yf-on-primary); }
.who .out { color: var(--yf-blue-300); font-style: italic; }
.who select { font: inherit; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--yf-blue-300);
  background: var(--yf-primary-hover); color: var(--yf-background); max-width: 240px; }

nav { display: flex; gap: 2px; padding: 0 20px; background: var(--yf-primary-hover); }
nav a { padding: 11px 15px; color: var(--yf-blue-200); cursor: pointer; font-size: 14px; text-decoration: none;
  border-bottom: 3px solid transparent; }
nav a:hover { color: var(--yf-on-primary); }
nav a.on { color: var(--yf-on-primary); border-bottom-color: var(--yf-focus); font-weight: 600; }

main { padding: 22px 20px; }
.bar h2 { margin: 0 0 3px; font-size: 21px; }
.bar .sub { margin: 0 0 18px; color: var(--yf-text-secondary); font-size: 13px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--yf-text-secondary);
  margin: 22px 0 6px; }

.flash { margin: 0; padding: 10px 20px; background: var(--yf-blue-200); color: var(--yf-primary);
  border-bottom: 1px solid var(--yf-secondary); font-size: 14px; }

.filters { display: flex; gap: 7px; margin-bottom: 14px; flex-wrap: wrap; }
.chip { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--yf-border); background: var(--yf-surface); color: var(--yf-text-primary); }
.chip.on { background: var(--yf-primary); border-color: var(--yf-primary); color: var(--yf-on-primary); }
.chip .n { opacity: .6; margin-left: 4px; }

ul { list-style: none; margin: 0; padding: 0; }
.clist li, .hlist li { background: var(--yf-surface); border: 1px solid var(--yf-border); border-radius: 7px;
  margin-bottom: 7px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.crow { cursor: pointer; }
.crow:hover { border-color: var(--yf-focus); }
.crow.is-done { background: var(--yf-background); }
.crow.is-done .ctitle { color: var(--yf-text-secondary); }
.mark { width: 18px; flex: none; color: var(--yf-primary); font-weight: 700; }
.cbody { flex: 1; min-width: 0; }
.ctitle { display: block; font-weight: 600; font-size: 14.5px; }
.cdesc { display: block; color: var(--yf-text-secondary); font-size: 13px; margin-top: 1px; }
.chev { color: var(--yf-blue-300); font-size: 20px; }
.hlist li { justify-content: space-between; }
.empty { color: var(--yf-text-secondary); font-style: italic; }

.lede { font-size: 16px; margin: 0 0 4px; }
.instr { color: var(--yf-text-primary); margin: 0; }
.note { color: var(--yf-text-secondary); font-style: italic; }

button { font: inherit; cursor: pointer; border-radius: 6px; }
.primary { background: var(--yf-primary); color: var(--yf-on-primary); border: 1px solid var(--yf-primary); padding: 9px 18px; }
.primary:hover { background: var(--yf-primary-hover); }
.big { font-size: 15px; padding: 11px 22px; margin-top: 20px; }
.ghost { background: transparent; border: 1px solid var(--yf-border); color: var(--yf-text-primary); padding: 9px 16px;
  margin-left: 8px; }
.danger { background: var(--yf-surface); border: 1px solid var(--yf-danger); color: var(--yf-danger); padding: 8px 14px; }
.danger:hover { background: var(--yf-danger-bg); }
.sm { font-size: 13px; padding: 5px 11px; }
.donebox { margin-top: 22px; padding: 15px; background: var(--yf-surface); border: 1px solid var(--yf-border); border-radius: 7px; }
.donebox p { margin: 0 0 8px; }

.back { display: inline-block; margin-bottom: 12px; color: var(--yf-text-secondary); cursor: pointer; font-size: 13px; }
.back:hover { color: var(--yf-text-primary); }

form { max-width: 420px; }
label { display: block; margin-bottom: 15px; font-size: 13px; font-weight: 600; color: var(--yf-text-primary); }
.opt { font-weight: 400; color: var(--yf-text-secondary); }
input, textarea, select { font: inherit; width: 100%; padding: 8px 10px; margin-top: 5px;
  border: 1px solid var(--yf-border); border-radius: 6px; background: var(--yf-surface); color: var(--yf-text-primary); }
textarea { resize: vertical; }

.lb { width: 100%; border-collapse: collapse; background: var(--yf-surface);
  border: 1px solid var(--yf-border); border-radius: 7px; overflow: hidden; }
.lb th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--yf-text-secondary); padding: 9px 12px; background: var(--yf-background); border-bottom: 1px solid var(--yf-border); }
.lb td { padding: 10px 12px; border-bottom: 1px solid var(--yf-border); vertical-align: middle; }
.lb tr:last-child td { border-bottom: none; }
.lb .r { width: 62px; font-size: 17px; font-weight: 700; color: var(--yf-text-secondary); }
.lb .prog { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb .date { white-space: nowrap; color: var(--yf-text-secondary); font-size: 13px; }
.lb tr.me { background: var(--yf-blue-200); }
.lb tr.me .ctitle::after { content: " — your yoke"; font-weight: 400; color: var(--yf-primary); font-size: 12px; }

@media (max-width: 560px) {
  .lb .date { font-size: 12px; }
  #app > header { padding: 12px 14px; }
  main { padding: 18px 14px; }
  nav { padding: 0 8px; }
}

/* --- search filter bar (P1 list, P3 board) ------------------------------ */
.searchrow { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.searchrow input[type="search"] { flex: 1; min-width: 0; font: inherit; font-size: 15px;
  padding: 8px 11px; border: 1px solid var(--yf-border); border-radius: 7px; background: var(--yf-surface);
  color: var(--yf-text-primary); -webkit-appearance: none; appearance: none; }
.searchrow input[type="search"]::placeholder { color: var(--yf-text-secondary); }
.searchrow input[type="search"]:focus { outline: none; border-color: var(--yf-focus);
  box-shadow: 0 0 0 3px var(--yf-focus-ring); }
.rescount { margin: 0 0 12px; font-size: 12.5px; color: var(--yf-text-secondary); }
.rescount .of { color: var(--yf-text-secondary); }
.searchrow .rescount { margin: 0; white-space: nowrap; }

/* Split view (Challenge Board, C2 layout): finishers have no progress column. */
.lb-done { margin-bottom: 4px; }

/* A way out of the public board: the tabs pick a view, this leaves the page. */
nav .back { margin-left: auto; color: var(--yf-blue-300); }
nav .back:hover { color: var(--yf-on-primary); }
/* prototype 3 additions */
#app { max-width: 1080px; }
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.col { background: var(--yf-background); border: 1px solid var(--yf-border); border-radius: 8px; padding: 11px; }
.colhead { margin-bottom: 9px; display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
.colhead h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--yf-text-primary); }
.tally { font-size: 12px; color: var(--yf-text-secondary); font-variant-numeric: tabular-nums; }
.blurb { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; color: var(--yf-text-secondary); }
.card { background: var(--yf-surface); border: 1px solid var(--yf-border); border-radius: 6px; margin-bottom: 6px;
  padding: 0; display: block; }
.cardhead { display: flex; gap: 9px; align-items: flex-start; padding: 9px 10px; cursor: pointer; }
.cardhead:hover { background: var(--yf-background); }
/* Completion is stamped IN PLACE — cards never reorder. Status is carried by
   three redundant channels (checkbox glyph, left rule, date text) so it is
   never colour-alone and survives greyscale. See DESIGN-QUESTIONS.md Q1. */
.card { position: relative; }
.card.is-done { background: var(--yf-background); border-color: var(--yf-border); }
.card.is-done::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--yf-primary); border-radius: 6px 0 0 6px; }
.card.is-done .ctitle { color: var(--yf-text-primary); font-weight: 500; }
.card.open { border-color: var(--yf-focus); }
/* checkbox: empty square when remaining, filled and checked when done */
.box { width: 15px; height: 15px; flex: none; margin-top: 2px; border-radius: 3px;
  border: 1.5px solid var(--yf-blue-300); background: var(--yf-surface); color: transparent;
  font-size: 11px; font-weight: 700; line-height: 12px; text-align: center; }
.card.is-done .box { background: var(--yf-primary); border-color: var(--yf-primary); color: var(--yf-on-primary); }
.stamp { display: inline-block; font-size: 11px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--yf-primary); background: var(--yf-blue-200);
  border: 1px solid var(--yf-secondary); border-radius: 3px; padding: 1px 6px; }
.card .ctitle { font-size: 13.5px; line-height: 1.35; }
.card .cdesc { font-size: 12px; }
.cardpanel { padding: 0 10px 11px 33px; border-top: 1px solid var(--yf-border); margin-top: 2px; padding-top: 9px; }
.cardpanel .instr { font-size: 12.5px; color: var(--yf-text-primary); margin: 0 0 9px; }
.cardpanel .note { font-size: 12.5px; margin: 0 0 9px; }
.cardpanel label { font-size: 12px; margin-bottom: 8px; }
.cardpanel input { padding: 5px 8px; font-size: 13px; }
.inline { display: flex; gap: 8px; flex-wrap: wrap; }
.inline .grow { flex: 1; min-width: 130px; }
.scrim { position: fixed; inset: 0; background: rgba(10,31,68,.45); display: flex;
  justify-content: flex-end; }
.side { background: var(--yf-background); width: 560px; max-width: 92vw; height: 100%; overflow: auto;
  padding: 24px; position: relative; }
.side h2 { margin: 0 0 3px; font-size: 20px; }
.side .sub { margin: 0 0 16px; color: var(--yf-text-secondary); font-size: 13px; }
.x { cursor: pointer; color: var(--yf-text-secondary); font-size: 13px; }
.x:hover { color: var(--yf-text-primary); }
.close { position: absolute; top: 18px; right: 20px; }
nav a { user-select: none; }
@media (max-width: 900px) { .board { grid-template-columns: 1fr; } }

/* search: keep the columns standing even when they empty out */
.colempty { margin: 10px 2px; font-size: 13px; }

/* ---- approval workflow ---- */

/* Status glyphs. Each state differs by shape and text, not colour alone, so it
   survives greyscale and colour-blindness. See DESIGN-QUESTIONS.md Q1. */
.card.is-pending .box { border: 1.5px dashed var(--yf-primary); background: var(--yf-surface); color: var(--yf-primary); }
.card.is-pending::before { background: var(--yf-blue-300); }
.card.is-rejected .box { border-color: var(--yf-danger); background: var(--yf-danger-bg); color: var(--yf-danger);
  font-weight: 700; }
.card.is-rejected::before { background: var(--yf-danger); }
.card.is-pending::before, .card.is-rejected::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.card.is-pending, .card.is-rejected { position: relative; }

.stamp.pend { background: var(--yf-surface); color: var(--yf-primary); border: 1px dashed var(--yf-primary); }
.stamp.rej  { background: var(--yf-danger-bg); color: var(--yf-danger); border-color: var(--yf-danger); }

.meta { font-size: 12px; color: var(--yf-text-secondary); margin: 6px 0; }
.meta.pend { color: var(--yf-primary); }
.req { font-size: 11px; color: var(--yf-primary); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; margin-left: 6px; }

label.ev { display: block; margin: 8px 0 4px; font-size: 12px; color: var(--yf-text-primary); font-weight: 600; }
label.ev textarea { display: block; width: 100%; margin-top: 4px; padding: 7px 9px;
  border: 1px solid var(--yf-border); border-radius: 6px; font: inherit; font-size: 13px;
  font-weight: 400; resize: vertical; box-sizing: border-box; }
label.ev textarea:focus { outline: 2px solid var(--yf-focus); outline-offset: -1px; border-color: var(--yf-focus); }

.photorow { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; flex-wrap: wrap; }
.filebtn { display: inline-block; padding: 5px 11px; border: 1px solid var(--yf-border);
  border-radius: 6px; background: var(--yf-surface); font-size: 12px; font-weight: 600;
  cursor: pointer; color: var(--yf-text-primary); }
.filebtn:hover { background: var(--yf-background); border-color: var(--yf-blue-300); }
.filebtn input[type=file] { display: none; }

.photos { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.thumb { position: relative; margin: 0; }
.thumb img { width: 84px; height: 64px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--yf-border); cursor: zoom-in; display: block; background: var(--yf-background); }
.photos.big .thumb img { width: 180px; height: 135px; }
.thumb .x.sm { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px;
  line-height: 16px; text-align: center; border-radius: 50%; background: var(--yf-surface);
  border: 1px solid var(--yf-border); font-size: 13px; cursor: pointer; padding: 0; color: var(--yf-text-secondary); }
.thumb .x.sm:hover { background: var(--yf-danger-bg); border-color: var(--yf-danger); color: var(--yf-danger); }

.reject-note { border-left: 3px solid var(--yf-danger); background: var(--yf-danger-bg); padding: 9px 12px;
  border-radius: 0 6px 6px 0; margin: 8px 0; }
.reject-note strong { font-size: 12px; color: var(--yf-danger); display: block; }
.reject-note p { margin: 4px 0 0; font-size: 13px; color: var(--yf-danger); }
.reject-note .meta { color: var(--yf-danger); }

button[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- admin review queue: a page, not a popup ---- */
.adminmain { max-width: 860px; }
.queue { display: flex; flex-direction: column; gap: 16px; }
.review { border: 1px solid var(--yf-border); border-radius: 10px; padding: 16px 18px;
  background: var(--yf-surface); box-shadow: 0 1px 2px rgba(10,31,68,.06); }
.rhead { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 8px; }
.rhead h3 { margin: 0; font-size: 16px; }
.rhead .sub { margin: 2px 0 0; }
.rmeta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  flex-shrink: 0; }
.waited { font-size: 11px; color: var(--yf-text-secondary); }
.waited.old { color: var(--yf-primary); font-weight: 600; }
.badge { font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  background: var(--yf-secondary); color: var(--yf-text-primary); padding: 2px 6px; border-radius: 4px; font-weight: 700; }
nav .count { background: var(--yf-accent); color: var(--yf-text-primary); border-radius: 9px; padding: 1px 7px;
  font-size: 11px; font-weight: 700; margin-left: 4px; }

.rfacts { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px;
  margin: 10px 0; font-size: 13px; }
.rfacts dt { color: var(--yf-text-secondary); }
.rfacts dd { margin: 0; }
.ractions { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--yf-background); }
.rejectbox { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--yf-background); }

.chip { font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 4px; font-weight: 700; margin-left: 6px;
  vertical-align: middle; }
.chip-approved { background: var(--yf-blue-200); color: var(--yf-primary); }
.chip-pending  { background: var(--yf-background); color: var(--yf-primary); }
.chip-rejected { background: var(--yf-danger-bg); color: var(--yf-danger); }
.cdesc.why { color: var(--yf-danger); font-style: italic; margin-top: 3px; }

.lightbox { position: relative; background: var(--yf-surface); padding: 12px; border-radius: 10px;
  max-width: 90vw; max-height: 90vh; margin: auto; }
.lightbox img { max-width: 86vw; max-height: 80vh; display: block; border-radius: 6px; }
/* The scrim right-aligns the history panel; a photo should sit centred. */
.scrim:has(.lightbox) { justify-content: center; align-items: center; }

/* --- revoke confirmation dialog ----------------------------------------
   Centred like the lightbox, not a side panel: it is a decision to make, not
   a surface to browse. */
.scrim:has(.dialog) { justify-content: center; align-items: center; }
.dialog { background: var(--yf-surface); border-radius: 10px; padding: 20px 22px;
  width: 440px; max-width: 92vw; box-shadow: 0 18px 44px rgba(10,31,68,.22); }
.dialog h3.warn { margin: 0 0 10px; font-size: 16px; text-transform: none;
  letter-spacing: 0; color: var(--yf-danger); }
.dialog p { margin: 6px 0; font-size: 14px; }
.dialog .ractions { border-top: none; }

/* ---- dialog (server-rendered; opened by the `open` attribute, no JS) ---- */
dialog#modal[open] { position: fixed; inset: 0; margin: auto; width: min(560px, 92vw); border: 0; border-radius: 12px;
  padding: 0; box-shadow: 0 20px 60px rgba(10,31,68,.22); background: var(--yf-surface); }
dialog#modal[open]::before { content: ""; position: fixed; inset: 0; z-index: -1; }
.dlg { padding: 22px 24px; }
.dlg h3 { margin: 0 0 6px; font-size: 18px; }
.dlg label { display: block; margin: 12px 0 4px; font-size: 13px; color: var(--yf-text-secondary); }
.dlg input[type=date], .dlg textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px;
  padding: 8px 10px; border: 1px solid var(--yf-border); border-radius: 8px; font: inherit; }
.dlg .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.dlg .errorlist { color: var(--yf-danger); margin: 0 0 8px; padding-left: 18px; font-size: 13px; }
.evidence { display: block; max-width: 100%; border-radius: 8px; margin-top: 10px; }

/* ---- public leaderboard ---- */
table.lb { width: 100%; border-collapse: collapse; background: var(--yf-surface); border-radius: 10px; overflow: hidden; }
.lb th, .lb td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--yf-border); }
.lb th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--yf-text-secondary); }
.lb tr.is-done td { background: var(--yf-blue-200); }
.sub a.on { font-weight: 700; }

/* ---- review / history rows ---- */
.hlist .actions { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; }
.hlist details { display: inline-block; }
.hlist summary { list-style: none; cursor: pointer; border-radius: 6px; }
.hlist summary::-webkit-details-marker { display: none; }
.hlist details[open] summary { margin-bottom: 8px; }
.hlist textarea { display: block; width: min(480px, 100%); box-sizing: border-box; padding: 8px 10px;
  border: 1px solid var(--yf-border); border-radius: 8px; font: inherit; margin-bottom: 8px; }
.hlist .evidence { max-width: 400px; }
.who a, .sub a { color: inherit; }
.who a { color: var(--yf-blue-200); text-decoration: underline; }
.bar select { font: inherit; padding: 8px 10px; border: 1px solid var(--yf-border); border-radius: 8px; background: var(--yf-surface); }
footer { padding: 20px 0 8px; text-align: center; font-size: 13px; }
footer a { color: var(--yf-text-secondary); margin: 0 10px; }
.prose { max-width: 62ch; line-height: 1.55; padding: 4px 2px 24px; }
.prose h3 { margin: 22px 0 6px; font-size: 15px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 6px; }

/* Sign out must be a POST (allauth clears the session only on POST), so it is
   a form; these rules make the button read as the plain link beside it. */
.who .signout { display: inline; margin: 0; }
.who .signout button {
  font: inherit; color: var(--yf-blue-200); background: none; border: 0; padding: 0;
  text-decoration: underline; cursor: pointer;
}
.who .signout button:hover { color: var(--yf-on-primary); }

/* join + pending members */
.who .yoke { color: var(--yf-blue-300); }
.who .yoke::before { content: "·"; margin-right: 8px; }
.join { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.join select { font: inherit; padding: 9px 10px; border-radius: 6px; border: 1px solid var(--yf-border);
  background: var(--yf-surface); color: var(--yf-text-primary); min-width: 240px; }
.pending-join h3 { margin: 0 0 10px; font-size: 15px; }
.decide { display: flex; gap: 10px; align-items: center; padding: 7px 0;
  border-top: 1px solid var(--yf-border); }
.decide > span { flex: 1; display: flex; flex-direction: column; }
.decide .sub { margin: 0; font-size: 12px; }

/* sign-in page */
/* Crest band over the sign-in pages; the .signin card lifts into it. */
.hero { background: var(--yf-primary); text-align: center; padding: 22px 20px 72px; }
.hero img { width: 104px; height: 104px; display: block; margin: 0 auto 8px; }
.hero .motto { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .22em; color: var(--yf-secondary); }
.signin { max-width: 440px; margin: -72px auto 24px; background: var(--yf-surface);
  border: 1px solid var(--yf-border); border-radius: 10px; padding: 24px 22px;
  box-shadow: 0 4px 12px rgba(10,31,68,.08); }
.signin h2 { margin: 0 0 6px; }
.signin .lede { color: var(--yf-text-secondary); margin: 0 0 22px; }
.bigbtn { display: block; text-align: center; padding: 12px 16px; border-radius: 6px;
          background: var(--yf-primary); color: var(--yf-on-primary); text-decoration: none; font-weight: 600; }
.bigbtn:hover { background: var(--yf-primary-hover); }
/* Google's own button look: white, grey hairline, the four-colour G. */
.gbtn { display: flex; align-items: center; justify-content: center; gap: 12px;
        background: var(--yf-surface); color: #3c4043; border: 1px solid #dadce0;
        font-family: Roboto, Arial, sans-serif; font-weight: 500; }
.gbtn:hover { background: #f8f9fa; border-color: #d2e3fc; }
.or { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--yf-text-secondary); font-size: 14px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--yf-border); }
.codeform label { display: block; font-weight: 600; margin-bottom: 8px; }
.codeform .row { display: flex; gap: 8px; }
.codeform input { flex: 1; font: inherit; padding: 10px; border-radius: 6px; margin-top: 0;
                  border: 1px solid var(--yf-border); min-width: 0; }
.codeform button { padding: 10px 16px; border: 0; background: var(--yf-primary); color: var(--yf-on-primary); font-weight: 600; }
.signin .hint { color: var(--yf-text-secondary); font-size: 14px; margin: 10px 0 0; }
.codeform .err { color: var(--yf-danger); font-size: 14px; margin: 10px 0 0; }

/* public leaderboard: first place is the one gold moment on the page */
.lb .gold { display: inline-block; min-width: 24px; text-align: center; border-radius: 4px;
  background: var(--yf-accent); color: var(--yf-text-primary); font-weight: 700; }