* { box-sizing: border-box; }
body { margin: 0; background: #f6f5f2; color: #1c1b19;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#app { max-width: 760px; margin: 0 auto; padding: 0 0 64px; }

header { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 20px; background: #2c2a26; color: #f6f5f2; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 17px; letter-spacing: .01em; }
.brand span { display: block; font-weight: 400; font-size: 12px; color: #a9a49a; letter-spacing: .02em; }
.who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #cfcabf; flex-wrap: wrap; }
.who strong { color: #fff; }
.who .out { color: #a9a49a; font-style: italic; }
.who select { font: inherit; padding: 5px 8px; border-radius: 5px; border: 1px solid #55514a;
  background: #3a3833; color: #f6f5f2; max-width: 240px; }

nav { display: flex; gap: 2px; padding: 0 20px; background: #3a3833; }
nav a { padding: 11px 15px; color: #cfcabf; cursor: pointer; font-size: 14px;
  border-bottom: 3px solid transparent; }
nav a:hover { color: #fff; }
nav a.on { color: #fff; border-bottom-color: #c08b3e; font-weight: 600; }

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

.flash { margin: 0; padding: 10px 20px; background: #e6efe3; color: #2f5127;
  border-bottom: 1px solid #cfe0c9; 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: 999px; cursor: pointer;
  border: 1px solid #d6d2c9; background: #fff; color: #4a463f; }
.chip.on { background: #2c2a26; border-color: #2c2a26; color: #fff; }
.chip .n { opacity: .6; margin-left: 4px; }

ul { list-style: none; margin: 0; padding: 0; }
.clist li, .hlist li { background: #fff; border: 1px solid #e4e0d8; border-radius: 7px;
  margin-bottom: 7px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.crow { cursor: pointer; }
.crow:hover { border-color: #c08b3e; }
.crow.is-done { background: #fbfaf7; }
.crow.is-done .ctitle { color: #6c675e; }
.mark { width: 18px; flex: none; color: #4a7c3f; font-weight: 700; }
.cbody { flex: 1; min-width: 0; }
.ctitle { display: block; font-weight: 600; font-size: 14.5px; }
.cdesc { display: block; color: #6c675e; font-size: 13px; margin-top: 1px; }
.chev { color: #b6b1a7; font-size: 20px; }
.hlist li { justify-content: space-between; }
.empty { color: #8a857b; font-style: italic; }

.lede { font-size: 16px; margin: 0 0 4px; }
.instr { color: #3c3931; margin: 0; }
.note { color: #6c675e; font-style: italic; }

button { font: inherit; cursor: pointer; border-radius: 6px; }
.primary { background: #2c2a26; color: #fff; border: 1px solid #2c2a26; padding: 9px 18px; }
.primary:hover { background: #45423b; }
.big { font-size: 15px; padding: 11px 22px; margin-top: 20px; }
.ghost { background: transparent; border: 1px solid #d6d2c9; color: #4a463f; padding: 9px 16px;
  margin-left: 8px; }
.danger { background: #fff; border: 1px solid #c9a3a0; color: #8c3b34; padding: 8px 14px; }
.danger:hover { background: #fbf0ef; }
.sm { font-size: 13px; padding: 5px 11px; }
.donebox { margin-top: 22px; padding: 15px; background: #fff; border: 1px solid #e4e0d8; border-radius: 7px; }
.donebox p { margin: 0 0 8px; }

.back { display: inline-block; margin-bottom: 12px; color: #6c675e; cursor: pointer; font-size: 13px; }
.back:hover { color: #1c1b19; }

form { max-width: 420px; }
label { display: block; margin-bottom: 15px; font-size: 13px; font-weight: 600; color: #4a463f; }
.opt { font-weight: 400; color: #8a857b; }
input, textarea, select { font: inherit; width: 100%; padding: 8px 10px; margin-top: 5px;
  border: 1px solid #d6d2c9; border-radius: 6px; background: #fff; color: #1c1b19; }
textarea { resize: vertical; }

.lb { width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid #e4e0d8; border-radius: 7px; overflow: hidden; }
.lb th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: #6c675e; padding: 9px 12px; background: #faf9f6; border-bottom: 1px solid #e4e0d8; }
.lb td { padding: 10px 12px; border-bottom: 1px solid #f0ede7; vertical-align: middle; }
.lb tr:last-child td { border-bottom: none; }
.lb .r { width: 62px; font-size: 17px; font-weight: 700; color: #8a857b; }
.lb .prog { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb .date { white-space: nowrap; color: #6c675e; font-size: 13px; }
.lb tr.me { background: #fdf7ec; }
.lb tr.me .ctitle::after { content: " — your yoke"; font-weight: 400; color: #a07a35; font-size: 12px; }

@media (max-width: 560px) {
  .lb .date { font-size: 12px; }
  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 #d6d2c9; border-radius: 7px; background: #fff;
  color: #1c1b19; -webkit-appearance: none; appearance: none; }
.searchrow input[type="search"]::placeholder { color: #a09a8f; }
.searchrow input[type="search"]:focus { outline: none; border-color: #c08b3e;
  box-shadow: 0 0 0 3px rgba(192,139,62,.18); }
.rescount { margin: 0 0 12px; font-size: 12.5px; color: #6c675e; }
.rescount .of { color: #8a857b; }
.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: #a9a49a; }
nav .back:hover { color: #fff; }
/* prototype 3 additions */
#app { max-width: 1080px; }
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.col { background: #efece5; border: 1px solid #e0dcd3; 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: #4a463f; }
.tally { font-size: 12px; color: #6c675e; font-variant-numeric: tabular-nums; }
.blurb { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; color: #8a857b; }
.card { background: #fff; border: 1px solid #e4e0d8; 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: #fffaf1; }
/* 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: #fbfaf7; border-color: #dcd6c8; }
.card.is-done::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: #4a7c3f; border-radius: 6px 0 0 6px; }
.card.is-done .ctitle { color: #4a463f; font-weight: 500; }
.card.open { border-color: #c08b3e; }
/* 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 #c4bfb4; background: #fff; color: transparent;
  font-size: 11px; font-weight: 700; line-height: 12px; text-align: center; }
.card.is-done .box { background: #4a7c3f; border-color: #4a7c3f; color: #fff; }
.stamp { display: inline-block; font-size: 11px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: #3f6b35; background: #e6efe3;
  border: 1px solid #cfe0c9; 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 #f0ede7; margin-top: 2px; padding-top: 9px; }
.cardpanel .instr { font-size: 12.5px; color: #4a463f; 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(28,27,25,.42); display: flex;
  justify-content: flex-end; }
.side { background: #f6f5f2; 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: #6c675e; font-size: 13px; }
.x { cursor: pointer; color: #6c675e; font-size: 13px; }
.x:hover { color: #1c1b19; }
.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-color: #b45309; background: #fef3c7; color: #92400e; }
.card.is-pending::before { background: #d97706; }
.card.is-rejected .box { border-color: #b91c1c; background: #fee2e2; color: #991b1b;
  font-weight: 700; }
.card.is-rejected::before { background: #dc2626; }
.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: #fef3c7; color: #92400e; border-color: #fcd34d; }
.stamp.rej  { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

.meta { font-size: 12px; color: #6b7280; margin: 6px 0; }
.meta.pend { color: #92400e; }
.req { font-size: 11px; color: #b45309; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; margin-left: 6px; }

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

.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 #d1d5db;
  border-radius: 6px; background: #fff; font-size: 12px; font-weight: 600;
  cursor: pointer; color: #374151; }
.filebtn:hover { background: #f9fafb; border-color: #9ca3af; }
.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 #d1d5db; cursor: zoom-in; display: block; background: #f3f4f6; }
.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: #fff;
  border: 1px solid #d1d5db; font-size: 13px; cursor: pointer; padding: 0; color: #6b7280; }
.thumb .x.sm:hover { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }

.reject-note { border-left: 3px solid #dc2626; background: #fef2f2; padding: 9px 12px;
  border-radius: 0 6px 6px 0; margin: 8px 0; }
.reject-note strong { font-size: 12px; color: #991b1b; display: block; }
.reject-note p { margin: 4px 0 0; font-size: 13px; color: #7f1d1d; }
.reject-note .meta { color: #9f5a5a; }

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 #e5e7eb; border-radius: 10px; padding: 16px 18px;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.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: #6b7280; }
.waited.old { color: #b45309; font-weight: 600; }
.badge { font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  background: #1f2937; color: #fff; padding: 2px 6px; border-radius: 4px; font-weight: 700; }
nav .count { background: #d97706; color: #fff; 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: #6b7280; }
.rfacts dd { margin: 0; }
.ractions { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid #f3f4f6; }
.rejectbox { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f3f4f6; }

.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: #dcfce7; color: #166534; }
.chip-pending  { background: #fef3c7; color: #92400e; }
.chip-rejected { background: #fee2e2; color: #991b1b; }
.cdesc.why { color: #991b1b; font-style: italic; margin-top: 3px; }

.lightbox { position: relative; background: #fff; 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: #fff; border-radius: 10px; padding: 20px 22px;
  width: 440px; max-width: 92vw; box-shadow: 0 18px 44px rgba(28,27,25,.3); }
.dialog h3.warn { margin: 0 0 10px; font-size: 16px; text-transform: none;
  letter-spacing: 0; color: #991b1b; }
.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(0,0,0,.35); background: #fff; }
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: #6b665d; }
.dlg input[type=date], .dlg textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px;
  padding: 8px 10px; border: 1px solid #ddd8ce; border-radius: 8px; font: inherit; }
.dlg .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.dlg .errorlist { color: #b3261e; 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: #fff; border-radius: 10px; overflow: hidden; }
.lb th, .lb td { text-align: left; padding: 10px 14px; border-bottom: 1px solid #ece8df; }
.lb th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #a9a49a; }
.lb tr.is-done td { background: #f4f8f1; }
.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 #ddd8ce; border-radius: 8px; font: inherit; margin-bottom: 8px; }
.hlist .evidence { max-width: 400px; }
.who a, .sub a { color: inherit; }
.who a { color: #e8e3d8; text-decoration: underline; }
.bar select { font: inherit; padding: 8px 10px; border: 1px solid #ddd8ce; border-radius: 8px; background: #fff; }
footer { padding: 20px 0 8px; text-align: center; font-size: 13px; }
footer a { color: #6b6355; 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; }