/* "Can I do this yet?" self-check. On tools.css + tools2.css. Neutral choices: no colours that read as right or wrong. */
.sc-page [hidden]{display:none!important}

/* Picking the session */
.sc-pick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.2rem}
.sc-pick-grid .field{margin:0;min-width:0}
.sc-pick-grid select{width:100%;max-width:100%}
@media (max-width:640px){.sc-pick-grid{grid-template-columns:minmax(0,1fr)}}
.sc-empty{margin:0;padding:1rem;border:1px dashed var(--line-2);border-radius:10px;color:var(--muted)}

/* The items */
.sc-lead{margin:0 0 .4rem;color:var(--muted);font-size:.95rem}
.form fieldset.sc-item{display:block;border:0;margin:0;padding:1.1rem 0 1.2rem;border-bottom:1px solid var(--line);min-width:0}
.form fieldset.sc-item:last-child{border-bottom:0;padding-bottom:0}
.form .sc-item legend{float:left;width:100%;padding:0;margin:0 0 .8rem;display:grid;gap:.25rem;font-family:var(--f-sans);font-size:1rem;font-weight:400;letter-spacing:0}
.sc-ask{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--sun-ink)}
.sc-out{font-size:1.05rem;line-height:1.5;color:var(--text);overflow-wrap:anywhere}
.sc-opts{clear:both;display:flex;flex-wrap:wrap;gap:.5rem}
.sc-opt{position:relative;display:inline-flex}
.sc-opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.sc-opt span{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 1.1rem;border:1px solid var(--line-2);border-radius:999px;font-size:.95rem;font-weight:500;color:var(--body);background:var(--white);transition:background .2s,border-color .2s}
.sc-opt span::before{content:"";width:.6rem;height:.6rem;border-radius:50%;border:1.5px solid currentColor;opacity:.55}
.sc-opt:hover span{border-color:var(--text)}
.sc-opt input:focus-visible + span{outline:2px solid var(--sun);outline-offset:3px}
.sc-opt input:checked + span{border-color:var(--text);color:var(--text);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--text)}
.sc-opt input:checked + span::before{opacity:1;background:currentColor}
.sc-again{clear:both;margin-top:.75rem;padding:.7rem .9rem;border-left:3px solid var(--sun);background:var(--paper-3);border-radius:0 8px 8px 0;font-size:.93rem;overflow-wrap:anywhere}
.sc-again p{margin:0}
.sc-again a{color:var(--text);text-decoration-color:var(--sun)}
.sc-jump{display:none;margin:0;font-size:.92rem}
.sc-jump a{color:var(--text);text-decoration-color:var(--sun)}
@media (max-width:980px){.sc-jump{display:block}}
#sc-status[data-kind="err"]{color:var(--err-ink);font-weight:500}

/* My next steps (a printed page) */
.sc-head{grid-template-columns:minmax(0,1fr)}
.sc-head .doc-kicker{overflow-wrap:anywhere}
.sc-state{margin:0 0 1rem;padding:1rem;border:1px dashed var(--rule);border-radius:10px;color:var(--soft);font-size:1rem}
.sc-state p{margin:0}
.sc-sec + .sc-sec{margin-top:1.1rem}
.sc-sec h3{margin-top:0}
.sc-open,.sc-links{margin:0;padding-left:1.1rem;display:grid;gap:.35rem}
.sc-open li,.sc-links li{line-height:1.45;overflow-wrap:anywhere}
.sc-tag{display:inline-block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;padding:.05rem .4rem;border:1px solid currentColor;border-radius:4px;color:var(--muted)}
.sc-addr{font-size:.78rem;color:var(--muted);overflow-wrap:anywhere}
.sc-words{margin:.6rem 0 0;font-size:.93rem;overflow-wrap:anywhere}
.sc-foot{grid-template-columns:minmax(0,1fr)}

/* No JavaScript: every kit as a checklist */
.sc-nojs .callout{margin:0 0 1.5rem}
.sc-nj-nav ul{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.4rem;font-size:.95rem}
.sc-nj{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1.8rem}
.sc-nj-kit{min-width:0;break-inside:avoid;scroll-margin-top:5.5rem}
.sc-nj-kit h3{margin-top:0;display:grid;gap:.2rem}
.sc-nj-kit h3 .mono{font-size:.72rem;color:var(--sun-ink);text-transform:uppercase;letter-spacing:.04em}
.sc-nj-list li{overflow-wrap:anywhere}
.sc-nj-hint{margin:.6rem 0 .3rem;font-size:.9rem;color:var(--muted)}
.sc-nj-links{margin:0;padding-left:1.1rem;font-size:.9rem;display:grid;gap:.3rem;overflow-wrap:anywhere}
@media (max-width:760px){.sc-nj{grid-template-columns:minmax(0,1fr)}}

/* Print: my next steps only */
@media print{
  @page{margin:12mm 13mm}
  body:has(.sc-page) main > :not(.sc-page){display:none!important}
  .sc-page .sc-form,.sc-page .ip-bar,.sc-page .ip-tip,.sc-page .sc-nojs .callout,.sc-page .sc-nj-nav{display:none!important}
  .sc-page{padding:0!important}
  .sc-doc{font-size:10.5pt;line-height:1.4;padding:0!important;border-top:0!important;box-shadow:none!important}
  .sc-doc a{text-decoration:none;color:#000}
  .sc-doc .doc-title{font-size:18pt}
  .sc-sec{break-inside:avoid}
  .sc-addr{color:#333;font-size:8.5pt}
  .sc-tag{color:#000}
  .sc-foot{border-top:.5pt solid #999!important}
  /* Without JavaScript the page prints every kit's checklist (tools.css hides .no-js-only in print) */
  html:not(.js) .sc-page .sc-nojs{display:block!important}
  .sc-doc--all{font-size:9pt}
  .sc-nj{gap:8pt 14pt}
}
/* Inside the printed page (.doc is white in both themes): its own muted ink */
.sc-doc .sc-lead,.sc-doc .sc-nj-hint,.sc-doc .sc-addr,.sc-doc .sc-tag{color:var(--soft)}