/* FILL THE ROOM · form, exam and practice desk.
   Foundation tokens only. No new color. Asserted in build_foh_tools.py. */

.ftr-note {
  background:var(--bg-soft); border:1px solid var(--rule);
  border-left:3px solid var(--bronze); border-radius:4px;
  padding:20px 24px; margin:26px 0; font-size:15.5px; line-height:1.7; color:var(--ink-soft);
}
.ftr-note b { color:var(--ink); }
.ftr-save { font-family:'Courier New',monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bronze-deep); margin:18px 0 8px; }

#f h2 {
  font-family:Georgia,serif; font-size:24px; color:var(--ink);
  margin:44px 0 4px; padding-bottom:10px; border-bottom:1px solid var(--rule);
}
.q { margin:24px 0; }
.ql { display:block; font-family:Georgia,serif; font-size:17.5px; color:var(--ink);
  line-height:1.4; margin-bottom:6px; }
.qn { font-size:14px; line-height:1.65; color:var(--ink-soft); margin:0 0 12px; }
.q input[type=text], .q input[type=tel], .q input[type=email], .q textarea, .q select {
  width:100%; box-sizing:border-box; font-family:'Segoe UI',sans-serif; font-size:16px;
  color:var(--ink); background:var(--bg-card);
  border:1px solid var(--rule); border-radius:4px; padding:15px 16px;
}
.q textarea { line-height:1.6; resize:vertical; }
.q input:focus, .q textarea:focus, .q select:focus {
  outline:2px solid var(--bronze); outline-offset:1px; border-color:var(--bronze);
}
.opts { display:grid; gap:8px; }
.opt {
  display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:start;
  background:var(--bg-card); border:1px solid var(--rule); border-radius:4px;
  padding:16px 18px; font-size:15.5px; line-height:1.5; color:var(--ink-soft); cursor:pointer;
}
.opt:hover { background:var(--bg-soft); }
.opt input { width:20px; height:20px; margin:0; accent-color:var(--bronze); }
.opt input:checked + span { color:var(--ink); font-weight:600; }
.rank { display:grid; grid-template-columns:76px 1fr; gap:14px; align-items:center;
  margin-bottom:10px; font-size:15px; color:var(--ink-soft); }
.rank select { padding:12px 10px; }
.sendbar { display:flex; gap:14px; flex-wrap:wrap; margin-top:40px; }

/* ⛔ the confirmation that replaces the old mailto: */
.ftr-done {
  margin-top:34px; padding:26px 28px; background:var(--bg-card);
  border:1px solid var(--rule); border-left:3px solid var(--bronze); border-radius:5px;
}
.ftr-done h3 { font-family:Georgia,serif; font-size:24px; color:var(--ink); margin:0 0 10px; }
.ftr-done p { font-size:15.5px; line-height:1.7; color:var(--ink-soft); margin:0 0 12px; }
.ftr-done b { color:var(--ink); }
.ftr-done__next { padding-top:12px; border-top:1px solid var(--rule); }
.ftr-code {
  margin-top:16px; padding:18px 20px; background:var(--bg-soft);
  border:1px solid var(--rule); border-left:3px solid var(--bronze); border-radius:5px;
}
.ftr-code h4 { font-family:Georgia,serif; font-size:17px; color:var(--ink); margin:0 0 8px; }
.ftr-code p { font-size:14.5px; line-height:1.65; color:var(--ink-soft); margin:0 0 10px; }
.ftr-code textarea {
  width:100%; box-sizing:border-box; font-family:'Courier New',monospace; font-size:11.5px;
  line-height:1.5; color:var(--ink); background:var(--bg-card);
  border:1px solid var(--rule); border-radius:4px; padding:10px; margin-bottom:10px;
  word-break:break-all;
}
.ftr-copy { margin-top:6px; }
.ftr-copy > summary {
  cursor:pointer; font-family:'Courier New',monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bronze-deep); padding:8px 0;
}
.ftr-copy textarea {
  width:100%; box-sizing:border-box; font-family:'Courier New',monospace; font-size:12.5px;
  line-height:1.6; color:var(--ink-soft); background:var(--bg-soft);
  border:1px solid var(--rule); border-radius:4px; padding:12px; margin-bottom:10px;
}

.pqs { list-style:none; padding:0; margin:0; counter-reset:pq; }
.pq {
  background:var(--bg-card); border:1px solid var(--rule);
  border-left:3px solid var(--muted); border-radius:4px;
  padding:24px 26px; margin:16px 0;
}
.pq.ok { border-left-color:var(--bronze); }
.pq.no { border-left-color:var(--bronze-deep); background:var(--bg-soft); }
.pq__q { font-family:Georgia,serif; font-size:18px; color:var(--ink);
  line-height:1.4; margin:0 0 14px; }
.pq__q::before { counter-increment:pq; content:counter(pq) '. ';
  font-family:'Courier New',monospace; font-size:12px; color:var(--bronze-deep); }
.pq__o { display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:start;
  padding:13px 16px; margin-bottom:7px; font-size:15.5px; color:var(--ink-soft);
  background:var(--bg-soft); border:1px solid var(--rule); border-radius:4px; cursor:pointer; }
.pq__o:hover { border-color:var(--bronze); }
.pq__o input { width:20px; height:20px; margin:0; accent-color:var(--bronze); }
.pq__o input:checked + span { color:var(--ink); font-weight:600; }

.pres, .pmiss {
  background:var(--bg-card); border:1px solid var(--rule);
  border-left:3px solid var(--bronze); border-radius:4px; padding:28px 30px; margin:26px 0;
}
.pmiss { border-left-color:var(--bronze-deep); font-size:15.5px;
  line-height:1.7; color:var(--ink-soft); }
.pres__score { font-family:Georgia,serif; font-size:34px; color:var(--ink); margin:0 0 10px;
  font-variant-numeric:tabular-nums; }
.pres h3 { font-family:Georgia,serif; font-size:21px; color:var(--ink); margin:0 0 8px; }
.pres p { font-size:15.5px; line-height:1.75; color:var(--ink-soft); margin:0 0 8px; }
.pres__note { font-size:14px; color:var(--muted); }
.delta { display:flex; gap:16px; align-items:baseline; flex-wrap:wrap;
  background:var(--bg-soft); border-left:2px solid var(--muted); border-radius:3px;
  padding:16px 20px; margin:14px 0; }
.delta.up { border-left-color:var(--bronze); }
.delta b { font-family:Georgia,serif; font-size:19px; color:var(--ink); }
.delta span { font-family:'Courier New',monospace; font-size:13px; color:var(--bronze-deep); }

.mrow { display:grid; grid-template-columns:30px 1fr 110px; gap:14px; align-items:baseline;
  padding:13px 18px; margin-bottom:8px; background:var(--bg-card);
  border:1px solid var(--rule); border-left:3px solid var(--rule); border-radius:4px; }
.mrow.weak { border-left-color:var(--bronze-deep); }
.mrow.up { border-left-color:var(--bronze); }
.mrow b { font-family:'Courier New',monospace; font-size:12px; color:var(--bronze-deep); }
.mrow span:nth-child(2) { font-size:15px; color:var(--ink); }
.mscore { font-family:'Courier New',monospace; font-size:13px; color:var(--ink-soft);
  text-align:right; font-variant-numeric:tabular-nums; }
.bands { display:none; }

.deskwrap { margin:26px 0; }
.desk { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); }
.strip { background:var(--bg-card); border:1px solid var(--rule);
  border-left:3px solid var(--bronze); border-radius:4px; padding:14px; font-size:13px;
  color:var(--ink-soft); }
.mixbar { display:grid; grid-template-columns:62px 1fr 70px; gap:14px; align-items:center;
  margin-top:16px; padding:16px 18px; background:var(--bg-soft);
  border:1px solid var(--rule); border-radius:4px;
  font-family:'Courier New',monospace; font-size:11px;
  letter-spacing:.2em; color:var(--bronze-deep); }
.mixtrack { display:block; height:12px; background:var(--bg-card);
  border:1px solid var(--rule); border-radius:6px; overflow:hidden; }
.mixtrack > span { display:block; height:100%; background:var(--bronze); width:0; }
.pathwrap { margin-top:26px; padding:22px 24px; background:var(--bg-card);
  border:1px solid var(--rule); border-radius:4px; }
.crmbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:22px 0; }
.f { font-family:'Courier New',monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bronze-deep); }

@media (max-width:640px){
  .mrow { grid-template-columns:26px 1fr; }
  .mscore { grid-column:2; text-align:left; }
  .rank { grid-template-columns:1fr; gap:6px; }
}