/* "Try it yourself": one command, how long it takes, and a folded check
   against the numbers saved for the page. "Check your result" folds also
   replace hand-in lines inside the lessons. Colours follow the course pages.
   Selectors name the element as well as the class, so that page rules such as
   ".notes p" or ".notes details" do not restyle these blocks; this file is
   linked after each page's own styles. */
.try-it{max-width:850px;margin:40px 0 0;padding-top:24px;border-top:1px solid #dce1e6;color:#20242b;font-family:var(--font-ui)}
.try-it h2,.try-it h3{margin:0 0 14px;color:#20242b;font-size:var(--type-h3);font-weight:600;line-height:1.35}
.try-it h3{margin-bottom:9px;font-weight:500}
.try-it p{max-width:72ch;margin:0 0 14px;color:#20242b;font-size:var(--type-body);line-height:1.6}
p.try-it-kicker,.try-it p.try-it-kicker{margin:0 0 6px;color:#2357a4;font-size:var(--type-label);font-weight:600;line-height:1.5}
.try-it code,.try-it-check code{font-family:var(--font-code);font-size:.9em;white-space:nowrap}
/* Long paths may wrap; short options such as --points 512 stay on one line. */
.try-it code.long,.try-it-check code.long{white-space:normal;overflow-wrap:anywhere}
pre.try-it-command{max-width:100%;margin:14px 0 16px;padding:12px 16px;border:1px solid #dce1e6;border-radius:2px;background:#f6f8fa;color:#20242b;font-family:var(--font-code);font-size:var(--type-note);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
pre.try-it-command code{font-size:inherit;background:none;padding:0;white-space:inherit;overflow-wrap:inherit}
pre.try-it-command.try-it-output{background:#fff}

details.try-it-check{max-width:850px;margin:18px 0 0;border:0;border-block:1px solid #dce1e6;color:#20242b;font-family:var(--font-ui);font-size:var(--type-body)}
details.try-it-check>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;width:auto;min-height:52px;padding:12px 0;color:#2357a4;font-size:var(--type-body);font-weight:600;line-height:1.4;cursor:pointer;list-style:none}
details.try-it-check>summary::-webkit-details-marker{display:none}
details.try-it-check>summary::marker{content:""}
details.try-it-check>summary::after{content:"⌄";flex:0 0 auto;color:#59636e;font-size:19px;font-weight:400;transition:transform .15s ease}
details.try-it-check[open]>summary::after{transform:rotate(180deg)}
details.try-it-check>summary:hover{text-decoration:underline;text-underline-offset:4px}
details.try-it-check>summary:focus-visible{outline:2px solid #2357a4;outline-offset:4px}
details.try-it-check>div{padding:4px 0 20px}
details.try-it-check p{max-width:72ch;margin:0 0 12px;color:#20242b;font-size:var(--type-body);line-height:1.6}
details.try-it-check ul,details.try-it-check ol{max-width:72ch;margin:0 0 12px;padding-left:1.3em}
details.try-it-check li{margin:0 0 10px;color:#20242b;font-size:var(--type-body);line-height:1.6}
details.try-it-check p.try-it-note{color:#59636e;font-size:var(--type-note)}

/* "Code on GitHub": the repository files a lesson uses, one line at the end of
   the lesson or of its "Try it yourself", written from course_map.json by
   tools/site/source_links.py. In a lesson laid out as a grid it spans the row. */
p.lesson-code{grid-column:1/-1;max-width:850px;margin:28px 0 0;color:#59636e;font-family:var(--font-ui);font-size:var(--type-note);font-weight:400;line-height:1.6;text-align:left}
p.lesson-code>span{margin-right:10px;color:#20242b;font-weight:600}
p.lesson-code a{color:#2357a4;text-underline-offset:4px}
p.lesson-code code{font-family:var(--font-code);font-size:.9em;overflow-wrap:anywhere}

details.try-it-check .try-it-table-wrap{max-width:100%;margin:6px 0 14px;overflow-x:auto}
details.try-it-check .try-it-table{width:auto;min-width:0;border-collapse:collapse;border:0;font-size:var(--type-note);font-variant-numeric:tabular-nums}
details.try-it-check .try-it-table th,details.try-it-check .try-it-table td{width:auto;padding:8px 18px 8px 0;border:0;border-bottom:1px solid #dce1e6;color:#20242b;font-size:var(--type-note);font-weight:400;line-height:1.45;text-align:right;vertical-align:baseline;white-space:nowrap}
details.try-it-check .try-it-table th:first-child,details.try-it-check .try-it-table td:first-child{text-align:left;white-space:normal}
details.try-it-check .try-it-table thead th{color:#59636e;font-weight:600;white-space:normal;vertical-align:bottom}
details.try-it-check .try-it-table tbody th{min-width:0}
@media (max-width:700px){
  .try-it{margin-top:32px;padding-top:20px}
  pre.try-it-command{padding:10px 12px}
  details.try-it-check .try-it-table th,details.try-it-check .try-it-table td{padding-right:12px}
}