/* --- PLAN7: the form --- */
.form{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px 10px;
  margin:14px 0 8px}
@media (min-width:900px){.form{position:sticky;top:0;z-index:6;box-shadow:0 8px 22px -14px rgba(0,0,0,.5)}}
.form .frow{display:flex;gap:12px 18px;flex-wrap:wrap;align-items:flex-end;margin-bottom:8px}
.form label{display:flex;flex-direction:column;gap:3px;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);min-width:9rem}
.form select,.form input[type=text]{font-family:var(--body);font-size:.92rem;padding:6px 8px;
  border-radius:8px;border:1px solid var(--line2);background:var(--paper);color:var(--ink);
  max-width:min(100%,24rem);text-transform:none;letter-spacing:0}
.form .seg{display:flex;gap:4px;flex-wrap:wrap}
.form .seg button{font-family:var(--body);font-size:.84rem;padding:5px 10px;border-radius:8px;
  border:1px solid var(--line2);background:var(--sunk);color:var(--ink2);cursor:pointer;text-transform:none;letter-spacing:0}
.form .seg button[aria-pressed=true]{background:var(--silk);color:#fff;border-color:var(--silk)}
.form .chk{flex-direction:row;align-items:center;gap:6px;min-width:0;text-transform:none;letter-spacing:0;
  font-family:var(--body);font-size:.8rem;color:var(--ink2)}
.form .whites{flex-direction:column;align-items:stretch;gap:6px}
.form .wlabel{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-family:var(--mono);
  font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.form .wlabel .mode{font-family:var(--body);font-size:.82rem;letter-spacing:0;text-transform:none;color:var(--ink2)}
.form .wlabel button,.form .wbtn{font-family:var(--body);font-size:.78rem;padding:4px 9px;border-radius:7px;
  border:1px solid var(--line2);background:var(--sunk);color:var(--ink2);cursor:pointer;letter-spacing:0;text-transform:none}
.form ol.wlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:4px 12px}
/* `display:grid` beats the UA rule for [hidden]: the eight empty slots stayed on screen in
   the 'as valued' mode, which is the default since PLAN9 (MEASURED 2026-10-02 in the pane) */
.form [hidden]{display:none!important}
.form ol.wlist li{display:flex;gap:4px;align-items:center;font-family:var(--mono);font-size:.7rem;color:var(--faint)}
.form ol.wlist li select{flex:1;min-width:0;font-size:.84rem;padding:4px 6px}
.form ol.wlist li .n{width:1.2em;text-align:right}
.form .weights label{min-width:11rem}
.form input[type=range]{width:100%;accent-color:var(--silk)}
.form .wv{font-family:var(--mono);color:var(--silk);font-size:.8rem}
.form .fnote{font-size:.78rem;color:var(--faint);margin:4px 0 0}
.form .fnote b{color:var(--ink2);font-weight:600}
.form .share{font-family:var(--mono);font-size:.7rem;color:var(--faint)}
/* the Cup header */
.cup{background:var(--card);border:1px solid var(--line);border-radius:12px;margin:14px 0;overflow:hidden}
.cup .cup-h{padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.cup .cm{font-family:var(--mono);font-size:.72rem;color:var(--silk);letter-spacing:.14em;text-transform:uppercase}
.cup .name{font-family:var(--disp);font-size:1.5rem;font-weight:700;line-height:1.1}
.cup .where{font-size:.9rem;color:var(--ink2)}
.cup .when{font-family:var(--mono);font-size:.74rem;color:var(--faint);margin-top:3px}
.cup .brief{margin:0;padding:10px 16px;border-bottom:1px solid var(--line);font-size:.92rem;line-height:1.5}
.cup .brief b{color:var(--silk)}
.goals{display:flex;gap:14px 22px;flex-wrap:wrap;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--line)}
.goals .g{text-align:center}
.goals .g b{display:block;font-family:var(--disp);font-size:1.5rem;font-weight:700;line-height:1;color:var(--ink)}
.goals .g span{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.goals .why{flex:1 1 20rem;font-size:.84rem;color:var(--ink2)}
.goals .why em{font-style:normal;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);display:block;margin-top:4px}
.cup .cupfold>summary{padding:8px 16px;border-bottom:1px solid var(--line)}
.cup .cupfold[open]>summary{border-bottom:0}
.cup .cup-body{padding-top:6px;background:none}
.retro{padding:8px 16px 10px}
.retro details{margin:6px 0}
.retro summary{cursor:pointer;font-family:var(--disp);font-size:1.02rem;font-weight:600}
.retro .banner{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gap)}
.retro .note{white-space:pre-wrap;font-size:.86rem;color:var(--ink2);margin-top:6px}
.retro .absent{font-size:.84rem;color:var(--faint)}
/* the list */
.out{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:14px 0}
.verdict{padding:10px 16px;background:var(--sunk);border-bottom:1px solid var(--line);font-size:.84rem;color:var(--ink2)}
.row{display:grid;grid-template-columns:30px 56px 1fr;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .rank{font-family:var(--disp);font-size:1.35rem;font-weight:700;color:var(--faint);text-align:right;line-height:1.15}
.row.top .rank{color:var(--silk)}
.row .pic{width:56px;height:56px;border-radius:10px;background:var(--sunk);display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;color:var(--ink2);overflow:hidden}
.row .pic img{width:56px;height:56px;object-fit:cover;display:block}
.row .who{font-family:var(--disp);font-size:1.12rem;font-weight:600;line-height:1.2}
.row .who small{font-family:var(--body);font-weight:400;font-size:.82rem;color:var(--ink2);margin-left:6px}
.row .code{display:inline-flex;align-items:center;gap:7px;margin:5px 0 3px;font-family:var(--mono);font-size:1.02rem;font-weight:600;
  letter-spacing:.04em;color:var(--board-ink);cursor:pointer}
.row .code span{font-size:.6rem;letter-spacing:.12em;opacity:.6;text-transform:uppercase}
.row .nums{font-family:var(--mono);font-size:.76rem;color:var(--faint);display:flex;gap:12px;flex-wrap:wrap}
.row .nums b{color:var(--ink);font-weight:600}
.row .nums .tot b{color:var(--silk)}
.row .m{font-family:var(--mono);font-size:.72rem;color:var(--faint);margin-top:3px;line-height:1.55}
.row .m b{color:var(--ink);font-weight:600}
.row .m i{font-style:normal;color:var(--silk);font-weight:700;font-size:.62rem;vertical-align:super}
.row .m .k{letter-spacing:.1em;text-transform:uppercase;font-size:.6rem;opacity:.75;margin-right:6px}
.row .m .miss{color:var(--gap)}
.tier{padding:6px 16px;background:var(--sunk);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.tier em{font-style:normal;letter-spacing:0;text-transform:none;margin-left:8px;font-family:var(--body)}
.more{display:block;width:100%;padding:10px;border:0;background:var(--sunk);color:var(--silk);font-family:var(--body);font-size:.9rem;cursor:pointer}
.finputs>summary{cursor:pointer;list-style:none;display:flex;gap:10px;align-items:baseline;padding:0 0 6px}
.finputs>summary::-webkit-details-marker{display:none}
.finputs .fl{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.finputs .fsum{font-size:.86rem;color:var(--ink2);min-width:0}
.finputs .fopen{font-size:.78rem;color:var(--silk);margin-left:auto}
.finputs[open] .fsum,.finputs[open] .fopen{display:none}
@media (max-width:600px){
  .form{padding:10px 12px 8px}
  .wants .pip,.pip{white-space:normal}
  .subhead em,.wantrow .v,.pip,.brief{overflow-wrap:anywhere}
  .form label{min-width:7.5rem}
  .row{grid-template-columns:24px 44px 1fr;gap:8px;padding:10px 12px}
  /* MEASURED 2026-10-02 at 375 px with a touch pointer: the friend code box (label + 12 digits
     + the copy button a touch device shows) is 251 px against a 225 px column; `1fr` grew to
     fit it and every row was clipped on the right. The column may shrink; the box wraps. */
  .row>div:last-child{min-width:0}
  .row .code{flex-wrap:wrap;max-width:100%;gap:4px 7px}
  .row .pic,.row .pic img{width:44px;height:44px}
  .goals .g b{font-size:1.25rem}
}
/* --- PLAN9: the chance beside a matched spark, and the skill-value table --- */
.row .m em.ch{font-style:normal;color:var(--faint);opacity:.85;font-size:.66rem;margin-left:2px}
.cup .skills>summary{padding:8px 16px;border-top:1px solid var(--line)}
.cup .skills .snote{margin:0;padding:2px 16px 8px;font-size:.8rem;color:var(--ink2);line-height:1.5}
.cup .skills .snote b{color:var(--ink)}
.stable{overflow-x:auto;padding:0 8px 8px}
.stable table{border-collapse:collapse;width:100%;font-size:.82rem}
.stable th{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  text-align:left;padding:5px 8px;border-bottom:1px solid var(--line2);white-space:nowrap;font-weight:500}
.stable td{padding:4px 8px;border-bottom:1px solid var(--line);vertical-align:baseline}
.stable th.n,.stable td.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.stable td.r{font-family:var(--mono);color:var(--faint);font-size:.72rem;text-align:right;width:2em}
.stable td.nm{min-width:11rem}
.stable td.nm small{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-left:6px}
.stable td.nm small.u{color:var(--silk)}
.stable td.t{font-family:var(--disp);font-weight:700;color:var(--silk)}
.stable td.L{font-weight:600;color:var(--ink)}
.stable td.b{font-size:.72rem;color:var(--faint);white-space:nowrap}
.stable tr.z td{opacity:.55}
.stable .bar{display:inline-block;height:.5em;border-radius:2px;background:var(--silk);opacity:.5;margin-right:6px;vertical-align:middle}