/* /test, /test/flow, /test/result.
   Lifted from BIF_SITE_FINALS/06_Source/gensite.py. */

/* ------------------------------------------------------------------ /test */
.three{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px}
.three > div{padding:20px 26px 6px;border-left:1px solid var(--hair)}
.three > div:first-child{border-left:0;padding-left:0}
.three h3{margin-top:8px}
.three p{margin-top:8px;font-size:.97rem}
.small{margin-top:14px;font-size:.9rem}
.last{margin-top:20px;max-width:72ch}
.sect .hr{margin-top:40px}
.sect .btns{margin-top:26px}
.sect h1{margin-top:14px}
.sect .big{margin-top:20px}

/* ------------------------------------------------------------- /test/flow */
.flowwrap{padding:46px 0 60px}
.card{background:#FFFDF9;border:1px solid var(--hair);padding:40px 48px 34px}
.card h1{font-size:2.05rem;letter-spacing:-.6px;line-height:1.14;margin-top:10px;max-width:26ch}
.prog{display:flex;gap:6px;margin-bottom:26px}
.prog i{height:3px;flex:1;background:var(--hair)}
.prog i.done{background:var(--ink)}
.prog i.on{background:var(--yellow)}
.scale{display:flex;gap:9px;margin-top:30px;flex-wrap:wrap}
.scale button{width:58px;height:58px;border:1px solid var(--hair);display:flex;
  align-items:center;justify-content:center;font-size:1.02rem;font-weight:500;
  color:var(--muted);background:#fff;cursor:pointer;border-radius:0}
/* Hover is the affordance. The click goes straight through, so this is the
   only moment the number gets to say it is the one you are about to pick. */
.scale button:hover,.scale button:focus-visible{background:var(--yellow);
  border-color:var(--yellow);color:var(--ink);font-weight:800}
.scale button.sel{background:var(--yellow);border-color:var(--yellow);color:var(--ink);
  font-weight:800}
.ends{display:flex;justify-content:space-between;max-width:728px;margin-top:11px;
  font-size:.82rem;color:#8C8880}
.cardfoot{display:flex;justify-content:space-between;align-items:center;margin-top:34px;
  padding-top:20px;border-top:1px solid var(--hair)}
.cardfoot .back{background:transparent;border:0;font-size:.92rem;font-weight:700;cursor:pointer;
  color:var(--ink);padding:0}
.cardfoot .left{font-size:.92rem;color:var(--muted)}

/* ----------------------------------------------------------- /test/result */
.result .top{display:grid;grid-template-columns:1fr 500px;gap:56px;align-items:start}
.score{font-size:7rem;font-weight:800;letter-spacing:-5.5px;line-height:.84;margin-top:10px;
  font-variant-numeric:tabular-nums}
.outof{margin-top:18px;font-size:1.02rem}
.result h1{font-size:2.05rem;letter-spacing:-.6px;line-height:1.14;margin-top:26px;max-width:24ch}
.read{margin-top:20px;max-width:56ch}
.result .btns{margin-top:26px}
.shapewrap{padding-top:18px}

.mid{display:grid;grid-template-columns:1fr 492px;gap:56px;margin-top:56px;align-items:start}
.brow{display:grid;grid-template-columns:30px 128px 1fr 40px;gap:14px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--hair)}
.bn{font-size:10px;font-weight:700;letter-spacing:1.4px;color:#A8A399}
.bl{font-size:.97rem;font-weight:700}
.btrack{height:10px;background:#EDEAE3}
.bfill{height:10px;background:var(--yellow);width:0}
.bfill.lo{background:var(--ink)}
.bv{font-size:1rem;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}

.startcard{border:1.5px solid var(--ink);padding:20px 24px;background:#FFFDF9}
.startcard .hd{display:grid;grid-template-columns:118px 1fr;gap:20px;align-items:center;
  margin-top:12px}
.startcard img{height:46px;width:auto}
.sname{font-size:1.12rem;font-weight:800;letter-spacing:-.3px}
.squestion{margin-top:5px;font-size:.97rem}
.startcard .cta{display:flex;align-items:center;gap:16px;margin-top:18px}
.note{font-size:.9rem;color:var(--muted)}
.under{margin-top:20px;font-size:.97rem}
.mini{display:grid;grid-template-columns:1fr 1fr;margin-top:26px}
.mini > div{padding:16px 24px;border-left:1px solid var(--hair)}
.mini > div:first-child{border-left:0;padding-left:0}
.mini h3{margin-top:6px;font-size:1.08rem}
.mini p{margin-top:8px;font-size:.95rem}
.sheetlink{display:inline-block;margin-top:12px;font-size:.95rem;font-weight:800;
  border-bottom:2px solid var(--yellow);padding-bottom:1px}
.honest{margin-top:26px;font-size:.9rem;max-width:60ch}

@media (max-width:900px){
  .three{grid-template-columns:1fr}
  .three > div{border-left:0;padding-left:0;border-top:1px solid var(--hair);padding-top:20px}
  .three > div:first-child{border-top:0}
  .card{padding:28px 24px 24px}
  .card h1{font-size:1.5rem;max-width:none}
  .scale{gap:6px}
  .scale button{width:calc((100% - 60px) / 11);min-width:0;height:48px;font-size:.9rem}
  .result .top{grid-template-columns:1fr;gap:34px}
  .score{font-size:5rem;letter-spacing:-3.5px}
  .result h1{font-size:1.6rem;max-width:none}
  .shapewrap{max-width:440px}
  .mid{grid-template-columns:1fr;gap:40px}
  .mini{grid-template-columns:1fr}
  .mini > div{border-left:0;padding-left:0;border-top:1px solid var(--hair);padding-top:16px}
  .mini > div:first-child{border-top:0}
}
@media (max-width:680px){
  .scale button{width:calc((100% - 30px) / 6);height:44px}
  .brow{grid-template-columns:26px 1fr 40px;gap:10px}
  .btrack{display:none}
  .startcard .hd{grid-template-columns:1fr}
  .startcard img{margin-bottom:6px}
}