/* --- silk tabs: the primary axis, so colour carries it --- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 22px}
.tabs button{font-family:var(--disp);font-size:1rem;font-weight:600;letter-spacing:.02em;
  padding:9px 15px 8px;border-radius:9px;cursor:pointer;background:var(--card);
  color:var(--ink2);border:1px solid var(--line);border-bottom:3px solid var(--line2);
  transition:transform .08s ease}
.tabs button:hover{color:var(--ink);transform:translateY(-1px)}
.tabs button:focus-visible{outline:2px solid var(--silk);outline-offset:2px}
.tabs button[aria-selected="true"]{color:#fff;background:var(--tab);
  border-color:var(--tab);border-bottom-color:rgba(0,0,0,.35)}
.tabs button small{display:block;font-family:var(--body);font-size:.66rem;
  font-weight:400;opacity:.72;letter-spacing:0;margin-top:-2px}
.panel[hidden]{display:none}
.styleline{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:12px 0 4px;border-top:3px solid var(--silk)}
.styleline .who{font-family:var(--disp);font-size:1.7rem;font-weight:700;color:var(--silk)}
.styleline .jp{font-family:var(--mono);font-size:.74rem;color:var(--faint)}
.styledoc{color:var(--ink2);max-width:70ch;margin:.3em 0 18px}

/* --- one column per meeting --- */
.meets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:900px){.meets{grid-template-columns:1fr}}
.meet{background:var(--card);border:1px solid var(--line);border-radius:13px;
  overflow:hidden;min-width:0}
.meet-h{padding:14px 16px 12px;border-bottom:1px solid var(--line);
  background:linear-gradient(to bottom,var(--sunk),transparent)}
.meet-h .cm{font-family:var(--mono);font-size:.72rem;color:var(--silk);
  letter-spacing:.1em;text-transform:uppercase}
.meet-h .name{font-family:var(--disp);font-size:1.45rem;font-weight:700;line-height:1.1}
.meet-h .where{font-size:.9rem;color:var(--ink2)}
.meet-h .when{font-family:var(--mono);font-size:.74rem;color:var(--faint);margin-top:3px}
.strip{font-family:var(--mono);font-size:.72rem;color:var(--faint);margin:4px 0 2px;
  line-height:1.55}
.strip>div{display:flex;gap:8px;flex-wrap:wrap}
.strip>div>span:first-child{min-width:5.2em;letter-spacing:.1em;text-transform:uppercase;
  font-size:.6rem;opacity:.75;padding-top:2px}
.strip b{color:var(--ink);font-weight:600}
.strip i{font-style:normal;color:var(--silk);font-weight:700;font-size:.62rem;
  vertical-align:super;margin-left:1px}
.brief{margin:0;padding:11px 16px;border-bottom:1px solid var(--line);font-size:.92rem;
  line-height:1.5;color:var(--ink)}
.brief b{color:var(--silk)}
.wants{padding:12px 16px;border-bottom:1px solid var(--line);background:var(--sunk)}
.wantrow{display:flex;gap:9px;align-items:baseline;margin:5px 0}
.wantrow .k{font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);width:46px;flex:none;padding-top:2px}
.wantrow .v{font-size:.88rem;min-width:0}
.pip{display:inline-block;font-family:var(--mono);font-size:.75rem;padding:1px 7px;
  border-radius:20px;border:1px solid var(--line2);margin:2px 4px 2px 0;white-space:nowrap}
.pip.dim{color:var(--faint);border-style:dashed}
.pip.prior{border-style:dashed;border-color:var(--gap)}
.pip.prior b{color:var(--gap)}
.pip .ph{font-style:normal;color:var(--faint);font-size:.66rem;margin-left:2px}
.pip b{font-weight:600;color:var(--silk)}
.pip em{font-style:normal;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);margin-left:5px}

/* --- the tote board --- */
.board{padding:6px 0 4px}
.ent{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:11px 16px;
  border-bottom:1px solid var(--line)}
.ent:last-child{border-bottom:0}
.ent .rank{font-family:var(--disp);font-size:1.35rem;font-weight:700;color:var(--faint);
  text-align:right;line-height:1.15}
.ent.top .rank{color:var(--silk)}
.ent .who{font-family:var(--disp);font-size:1.12rem;font-weight:600;line-height:1.2}
.ent .parent{font-size:.83rem;color:var(--ink2)}
.code{display:inline-flex;align-items:center;gap:7px;margin:6px 0 4px;
  font-family:var(--mono);font-size:1.02rem;font-weight:500;letter-spacing:.04em;
  background:var(--board);color:var(--board-ink);padding:4px 10px;border-radius:7px}
.code span{font-size:.6rem;letter-spacing:.12em;opacity:.6;text-transform:uppercase}
.nums{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:.76rem;
  color:var(--faint);margin:4px 0 2px}
.nums b{color:var(--ink);font-weight:600}
.why{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}
.why li{font-size:.83rem;color:var(--ink2);padding-left:15px;position:relative}
.why li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:2px;background:var(--ok)}
.why li.unpriced::before{background:var(--gap)}
.why li.weak::before{background:var(--warn)}
.why li.info::before{background:var(--line2)}
.why em{font-style:normal;color:var(--faint)}
.caveat{background:var(--sunk);border:1px solid var(--line);border-left:3px solid var(--gap);
  border-radius:9px;padding:12px 15px;margin:18px 0 0;font-size:.88rem;color:var(--ink2)}
.caveat b{color:var(--ink)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:820px){.grid2{grid-template-columns:1fr}}
.box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px 17px}
.subhead{padding:12px 16px 6px;border-top:2px solid var(--silk);
  font-family:var(--disp);font-size:1.02rem;font-weight:600;color:var(--silk);
  background:var(--sunk)}
.subhead em{display:block;font-family:var(--body);font-size:.74rem;font-weight:400;
  font-style:normal;color:var(--faint);line-height:1.35}
.foot{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--faint)}

/* --- PLAN6 C2: the page in a player's reading order --- */
details.how{margin:28px 0 0;border:1px solid var(--line);border-radius:12px;
  background:var(--card);padding:0 16px}
details.how>summary{cursor:pointer;font-family:var(--disp);font-size:1.16rem;
  font-weight:600;padding:12px 0;list-style:none;display:flex;align-items:center;gap:10px}
details.how>summary::-webkit-details-marker{display:none}
details.how>summary::before{content:'+';font-family:var(--mono);color:var(--silk);
  font-weight:600;width:1em}
details.how[open]>summary::before{content:'\2212'}
details.how>.grid2{margin:0 0 16px!important}
@media (min-width:900px){
  .picker{position:sticky;top:0;z-index:6;box-shadow:0 6px 18px -12px rgba(0,0,0,.45)}
}
@media (max-width:600px){
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:6px;margin:14px -20px 16px;padding-left:20px;padding-right:20px;
    scrollbar-width:thin}
  .tabs button{flex:0 0 auto;white-space:nowrap}
  /* the phone budget: first friend code within two screens (1624px). With the folds
     closed it measured 1628px; these trims are the last few pixels, not the fix. */
  .wrap{padding-top:18px}
  .lede{font-size:.98rem}
  .brief{padding:9px 14px;font-size:.9rem}
  .meet-h{padding:12px 14px 10px}
  .picker{padding:10px 12px;margin-top:12px}
  .styledoc{margin:.35em 0}
}
details.fold>summary{cursor:pointer;list-style:none;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);display:flex;
  align-items:center;gap:8px}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:'+';color:var(--silk);font-weight:600;width:1em}
details.fold[open]>summary::before{content:'\2212'}
details.wants>summary{margin-bottom:8px}
details.caveat>summary{text-transform:none;letter-spacing:0;font-family:var(--body);
  font-size:inherit;color:inherit}
details.caveat>summary b{font-weight:600}
details.caveat>div{margin-top:6px}
.picker details.pfold{flex-basis:100%}
.picker details.pfold>summary{font-size:.62rem}
.code .copy{display:none;font-style:normal;font-family:var(--body);font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--silk);margin-left:8px;
  border:1px solid var(--line2);border-radius:5px;padding:1px 6px}
@media (hover:none){.code .copy{display:inline-block}}

/* --- the trainee picker (X1) --- */
.picker{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:16px 0 2px;
  padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:11px}
.picker label{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}
.picker select{font-family:var(--body);font-size:.95rem;padding:7px 10px;
  border-radius:8px;border:1px solid var(--line2);background:var(--paper);
  color:var(--ink);max-width:min(100%,26rem)}
.picker button{font-family:var(--body);font-size:.85rem;padding:7px 11px;cursor:pointer;
  border-radius:8px;border:1px solid var(--line2);background:var(--sunk);color:var(--ink2)}
.picker .pnote{font-size:.8rem;color:var(--faint);flex-basis:100%;margin:0}
.standing{font-family:var(--mono);font-size:.75rem;color:var(--silk)}
.tverdict{padding:10px 16px;background:var(--sunk);border-bottom:1px solid var(--line);
  font-size:.84rem;color:var(--ink2)}
.tent{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:11px 16px;
  border-bottom:1px solid var(--line)}
.tent:last-child{border-bottom:0}
.tent .rank{font-family:var(--disp);font-size:1.35rem;font-weight:700;color:var(--faint);
  text-align:right;line-height:1.15}
.tent.top .rank{color:var(--silk)}
.tent .who{font-family:var(--disp);font-size:1.1rem;font-weight:600}
.tent .parent{font-size:.86rem;color:var(--ink2)}
.tent .nums{font-family:var(--mono);font-size:.76rem;color:var(--faint);margin-top:3px}
.tent .nums b{color:var(--ink);font-weight:600}
.tent .nums span{margin-right:11px;white-space:nowrap}
.tent .code{font-family:var(--mono);font-size:1.02rem;font-weight:600;color:var(--board-ink);
  letter-spacing:.04em;margin-top:2px}
.tent .code span{font-family:var(--body);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:inherit;margin-right:8px}