/* Find the 3rds — guided practice (js/18-find-thirds.js) */
.ft-wrap { padding: 8px 0 40px; }
.ft-back { font-family: 'Mulish', sans-serif; font-size: 13px; font-weight: 600; color: #b8ad9c; background: transparent; border: 1px solid #4a4238; border-radius: 8px; padding: 7px 14px; margin-bottom: 18px; cursor: pointer; }
.ft-back:hover { color: #f2ece1; border-color: #6b6154; }

.ft-card { max-width: 1040px; margin: 0 auto; font-family: 'Mulish', system-ui, sans-serif; color: #e8e0d4; }
/* step strip below the board (Design explorations 5a/5b) — pick markers:
   done = wood pick with a check, current = gold pick, upcoming = dark pick */
.ft-strip { display: flex; margin-top: 2px; border: 1px solid #33291f; border-top: none; border-radius: 0 0 12px 12px; background: #1c1712; overflow: hidden; }
.ft-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; border-top: 2px solid transparent; }
.ft-tab-l { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #6b6154; white-space: nowrap; }
.ft-pick { width: 22px; height: 25px; display: grid; place-items: center; padding-bottom: 3px;
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: 11px; color: #9a9186; background: #3E342E;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='300 235 425 470'%3E%3Cpath d='M495.2,249.5c46.7-3.2,96.1,9.1,138.4,28.3,98.2,44.6,58.4,167.2,22.5,240.7-21.8,44.7-91.6,154.9-139.5,171.4-19.7,5.3-34.5-5.2-48.9-17.8-21.9-19.1-39.7-42-56.8-65.4-36.6-49.9-65.9-103.2-82.9-162.3-22.3-77.6-14-146.1,72-175.6,35.8-12.2,56.8-17.1,95.3-19.3Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='300 235 425 470'%3E%3Cpath d='M495.2,249.5c46.7-3.2,96.1,9.1,138.4,28.3,98.2,44.6,58.4,167.2,22.5,240.7-21.8,44.7-91.6,154.9-139.5,171.4-19.7,5.3-34.5-5.2-48.9-17.8-21.9-19.1-39.7-42-56.8-65.4-36.6-49.9-65.9-103.2-82.9-162.3-22.3-77.6-14-146.1,72-175.6,35.8-12.2,56.8-17.1,95.3-19.3Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ft-tab.cur { border-top-color: #E8C36B; background: rgba(232,195,107,0.05); }
.ft-tab.cur .ft-pick { background: #E8C36B; color: #1a1614; }
.ft-tab.cur .ft-tab-l { color: #E8C36B; }
.ft-tab.done .ft-pick { background: #8a6d3a; color: #1a1614; }
.ft-tab.done .ft-tab-l { color: #9a9186; }
@media (max-width: 720px) { .ft-tab-l { font-size: 8.5px; letter-spacing: 0.03em; } }
.ft-context { font-size: 13.5px; color: #b8ad9c; margin-bottom: 10px; }
.ft-context b { color: #E8C36B; font-weight: 600; }
.ft-k { color: #fff; font-weight: 700; }
.ft-r { color: #EC6A43; font-weight: 700; }
.ft-b { color: #4FA0EC; font-weight: 700; }
.ft-prompt { font-family: 'Fraunces', Georgia, serif; font-size: 20px; line-height: 1.4; margin-bottom: 12px; color: #f2ece1; }
.ft-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; }
.ft-lbl { color: #9a9186; }
.ft-letter { width: 44px; height: 38px; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 18px; text-transform: uppercase; background: #211b16; border: 2px solid #4a4238; border-radius: 8px; color: #f2ece1; }
.ft-letter.correct { border-color: #6bb583; }
.ft-letter.wrong { border-color: #d65c4e; }
.ft-acc { display: inline-flex; gap: 2px; }
.ft-acc button { width: 32px; height: 38px; font-size: 16px; background: #211b16; border: 2px solid #4a4238; border-radius: 8px; color: #b8ad9c; cursor: pointer; }
.ft-acc button.sel { background: #4a4238; color: #fff; border-color: #6b6154; }
.ft-nmstate { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.ft-nmstate.correct { color: #6bb583; }
.ft-nmstate.wrong { color: #d68b4e; }
.ft-cap { font-size: 12px; color: #9a9186; }
.ft-link { font-size: 12px; color: #7fb0e0; cursor: pointer; text-decoration: underline; }
.ft-board { background: #1c1712; border: 1px solid #33291f; border-radius: 12px 12px 0 0; padding: 10px 8px 4px; }
.ft-board svg { width: 100%; height: auto; display: block; }
.ft-board-hdr { display: flex; justify-content: space-between; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #8a7f6f; padding: 2px 6px 8px; }
.ft-count { color: #b8ad9c; }
.ft-count.done { color: #6bb583; font-weight: 600; }
.ft-actions { display: flex; align-items: center; gap: 14px; min-height: 40px; margin-top: 12px; }
.ft-try { color: #d68b4e; font-size: 13.5px; flex: 1; }
.ft-btn { font-family: 'Mulish', sans-serif; font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; }
.ft-ghost { background: transparent; border-color: #4a4238; color: #b8ad9c; }
.ft-next { background: #E8C36B; color: #1a1614; }
.ft-help { background: rgba(79,160,236,0.12); border-color: rgba(79,160,236,0.4); color: #7fb0e0; padding: 6px 12px; }
.ft-help.on { background: rgba(79,160,236,0.25); color: #cde3f8; }
.ft-banner { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 16px; background: rgba(107,181,131,0.08); border: 1px solid rgba(107,181,131,0.25); border-radius: 12px; }
.ft-banner.assist { background: rgba(214,139,78,0.08); border-color: rgba(214,139,78,0.28); }
.ft-chk { color: #6bb583; font-size: 20px; }
.ft-bt { flex: 1; font-size: 14.5px; color: #e8e0d4; }
.ft-bt small { display: block; color: #9a9186; font-size: 12.5px; margin-top: 3px; }
.ft-bt small.ft-assist { color: #d68b4e; }
.ft-note { font-size: 11.5px; color: #6b6154; line-height: 1.5; margin-top: 12px; padding-top: 10px; border-top: 1px solid #2a231b; }
.ft-done { text-align: center; padding: 40px 20px; }
.ft-done-big { font-family: 'Fraunces', serif; font-size: 26px; color: #6bb583; margin-bottom: 14px; }
.ft-done p { color: #b8ad9c; font-size: 14.5px; line-height: 1.6; margin-bottom: 20px; }

/* ---- mobile + accessibility (editor edit #6) ---- */
.ft-board-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ft-board-scroll svg { min-width: 680px; }   /* keeps tap targets ≥ ~40px on phones; board scrolls */
.fb-cell-multi:focus-visible { outline: none; stroke: #E8C36B; stroke-width: 2.5; fill: rgba(232,195,107,0.12); }
.ft-btn:focus-visible, .ft-back:focus-visible, .ft-letter:focus-visible, .ft-acc button:focus-visible, .ft-link:focus-visible { outline: 2px solid #E8C36B; outline-offset: 2px; }
@media (max-width: 640px) {
  .ft-prompt { font-size: 17px; }
  .ft-steps { font-size: 11px; }
  .ft-btn { padding: 12px 16px; }              /* ≥44px touch targets */
  .ft-acc button { width: 40px; height: 44px; }
  .ft-letter { width: 52px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-card *, .ft-board * { transition: none !important; animation: none !important; }
}
/* Deep Check preview summary table */
.ftdc-table { margin: 14px auto; border-collapse: collapse; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #c8bcac; }
.ftdc-table th, .ftdc-table td { padding: 5px 12px; border-bottom: 1px solid #33291f; text-align: left; }
.ftdc-table th { color: #8a7f6f; font-weight: 600; }

/* drills-pass row 1 (2026-07-18): bigger surface, clearer chrome */
.ft-card { max-width: 1280px; }
.ft-board-hdr { font-size: 13px; color: #C9BDAF; }
.ft-prog { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ft-prog-l { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #8F7F72; }
.ft-chip { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px; color: #8F7F72; background: rgba(255,255,255,0.04); border: 1px solid #433730; border-radius: 8px; padding: 5px 12px; }
.ft-chip.cur { color: #1a1614; background: #E8C36B; border-color: #E8C36B; font-size: 16px; padding: 6px 15px; }
.ft-chip.done { color: #6bb583; border-color: rgba(107,181,131,0.4); }
.ft-prog-n { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #C9BDAF; }
.ft-nmstate.almost { color: #E8C36B; }
.ft-letter.almost { border-color: #E8C36B; }

/* Deep Check — editor-response build: Check-name action + two-domain result */
.ftdc-check { padding: 7px 14px; font-size: 13px; }
.ft-note-inline { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #8F7F72; }
.ftdc-domain { margin: 6px 0; font-size: 14.5px; color: #C9BDAF; }
.ftdc-domain b { color: #E8C36B; }
.ftdc-overall { margin-top: 10px; padding-top: 10px; border-top: 1px solid #33291f; font-size: 15.5px; }