/* Teach io – Learn Guide topic styles (scoped to .tio-lg)
   Add once in Appearance → Customise → Additional CSS, or keep the copy embedded in each topic. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

.tio-lg{
  --paper:#F4F2EC;--paper-2:#EAE7DE;--card:#FFFFFF;--rule:#DAD6CB;
  --ink:#15171C;--ink-2:#3A3D45;--ink-3:#5A5D66;
  --accent:#1E44C8;--accent-dk:#142F8C;--accent-tint:#E8EDFB;--signal:#F2B33D;
  --band:#15171C;--band-fg:#E9E7E0;--band-mut:#B9BCC4;--band-rule:#2C2F37;
  --ok:#1E7A4C;--ok-tint:#E6F3EC;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--ink);
  max-width:780px;margin:0 auto;
}
.tio-lg *,.tio-lg *::before,.tio-lg *::after{box-sizing:border-box}
.tio-lg :focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.tio-lg p{margin:0 0 14px}
.tio-lg a{color:var(--accent);text-underline-offset:2px}
.tio-lg a:hover{color:var(--accent-dk)}
.tio-lg strong{font-weight:600}
.tio-lg h2,.tio-lg h3,.tio-lg h4{font-family:var(--sans);color:var(--ink);letter-spacing:-.02em;line-height:1.15;text-transform:none;text-wrap:balance}
.tio-lg h2{font-size:clamp(24px,3.2vw,30px);font-weight:700;margin:0 0 12px}
.tio-lg h3{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:0 0 10px}
.tio-lg h4{font-size:17px;font-weight:600;letter-spacing:0;margin:0 0 8px}
.tio-lg ul,.tio-lg ol{margin:0 0 14px;padding-left:22px}
.tio-lg li{margin:0 0 6px}
.tio-lg code{font-family:var(--mono);font-size:.9em;background:var(--paper-2);border:1px solid var(--rule);border-radius:5px;padding:1px 5px}

/* Layout */
.tio-lg .tio-sec{margin:0 0 36px}
.tio-lg .tio-eb{display:block;margin:0 0 8px;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:0;color:var(--accent)}
.tio-lg .tio-lead{font-size:19px;color:var(--ink-2);margin:0 0 28px;max-width:62ch}
.tio-lg .tio-card{background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:20px 22px;margin:0 0 18px}
.tio-lg .tio-card > :last-child{margin-bottom:0}
.tio-lg .tio-alt{background:var(--paper)}

/* Key vocabulary */
.tio-lg .tio-vocab dl{margin:0;display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:10px 18px}
.tio-lg .tio-vocab dt{font-weight:600;color:var(--ink)}
.tio-lg .tio-vocab dd{margin:0;color:var(--ink-2)}
@media (max-width:560px){.tio-lg .tio-vocab dl{grid-template-columns:1fr;gap:2px}.tio-lg .tio-vocab dd{margin-bottom:10px}}

/* Worked example */
.tio-lg .tio-example{border-left:4px solid var(--accent)}
.tio-lg .tio-example ol.tio-steps{counter-reset:s;list-style:none;padding:0}
.tio-lg .tio-example ol.tio-steps li{counter-increment:s;position:relative;padding-left:40px;margin-bottom:12px}
.tio-lg .tio-example ol.tio-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--accent-tint);color:var(--accent);font-family:var(--mono);font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center}

/* Code */
.tio-lg .tio-code{margin:0 0 18px;border-radius:10px;overflow:hidden;border:1px solid var(--band-rule);background:var(--band)}
.tio-lg .tio-code-hd{display:flex;justify-content:space-between;gap:12px;padding:8px 14px;border-bottom:1px solid var(--band-rule);font-family:var(--mono);font-size:12px;color:var(--band-mut)}
.tio-lg .tio-code pre{margin:0;padding:14px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;background:transparent;border:0}
.tio-lg .tio-code pre code{font-family:var(--mono);font-size:14.5px;line-height:1.55;color:var(--band-fg);background:none;border:0;padding:0;white-space:pre}
.tio-lg .tio-out{border-top:1px solid var(--band-rule);background:#1D2027}
.tio-lg .tio-out-hd{padding:8px 14px 0;font-family:var(--mono);font-size:12px;color:var(--signal)}
.tio-lg .tio-out pre code{color:#FFFFFF}
.tio-lg .tio-code-cap{padding:0 16px 12px;font-size:14px;color:var(--band-mut)}

/* Table */
.tio-lg .tio-table{overflow-x:auto;margin:0 0 18px;border:1px solid var(--rule);border-radius:10px;background:var(--card)}
.tio-lg .tio-table table{border-collapse:collapse;width:100%;font-size:15.5px}
.tio-lg .tio-table th,.tio-lg .tio-table td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.tio-lg .tio-table th{background:var(--paper-2);font-weight:600}
.tio-lg .tio-table tr:last-child td{border-bottom:0}
.tio-lg .tio-table caption{caption-side:bottom;text-align:left;padding:8px 14px;font-size:14px;color:var(--ink-3)}

/* Remember callout */
.tio-lg .tio-remember{background:var(--accent-tint);border:1px solid #C5D1F5;border-radius:10px;padding:16px 20px;margin:0 0 18px}
.tio-lg .tio-remember .tio-eb{margin-bottom:4px}
.tio-lg .tio-remember p:last-child{margin:0}

/* Check your understanding / answers */
.tio-lg .tio-check ol{padding-left:22px}
.tio-lg details{margin:6px 0 0;border:1px solid var(--rule);border-radius:8px;background:var(--paper)}
.tio-lg summary{cursor:pointer;padding:8px 12px;font-family:var(--mono);font-size:13px;font-weight:500;color:var(--accent);list-style-position:inside}
.tio-lg details[open] summary{border-bottom:1px solid var(--rule)}
.tio-lg details .tio-ans{padding:10px 14px;color:var(--ink-2)}
.tio-lg details .tio-ans > :last-child{margin-bottom:0}

/* Practice tasks */
.tio-lg .tio-task{position:relative}
.tio-lg .tio-task-n{display:inline-block;margin:0 0 8px;padding:2px 10px;border-radius:999px;background:var(--band);color:var(--band-fg);font-family:var(--mono);font-size:12px;font-weight:500}
.tio-lg .tio-level{margin-left:8px;font-family:var(--mono);font-size:12px;color:var(--ink-3)}

/* Figure placeholder (diagram described in text) */
.tio-lg .tio-figure{margin:0 0 18px;padding:16px 18px;border:1px dashed var(--rule);border-radius:10px;background:var(--paper)}
.tio-lg .tio-figure pre{margin:0;overflow-x:auto;font-family:var(--mono);font-size:14px;line-height:1.4;color:var(--ink);background:none;border:0;padding:0}
.tio-lg .tio-figure figcaption{margin-top:8px;font-size:14px;color:var(--ink-3)}

@media (max-width:480px){.tio-lg{font-size:16px}.tio-lg .tio-card{padding:16px}.tio-lg .tio-lead{font-size:17px}}

/* Illustrations */
.tio-lg .tio-pic{margin:0 0 20px;padding:18px;background:var(--card);border:1px solid var(--rule);border-radius:10px}
.tio-lg .tio-pic-in svg{display:block;width:100%;height:auto;max-width:720px;margin:0 auto}
.tio-lg .tio-pic figcaption,.tio-lg .tio-sb figcaption{margin-top:10px;font-size:14px;color:var(--ink-3);text-align:center}
.tio-lg .tio-sb{margin:0 0 20px;padding:18px;background:var(--card);border:1px solid var(--rule);border-radius:10px}
.tio-lg .tio-sb-in{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tio-lg .tio-sb-in svg{display:block;max-width:100%;height:auto}
.tio-lg .tio-sb details pre{margin:0;white-space:pre-wrap;font-family:var(--mono);font-size:14px}
@media (max-width:480px){.tio-lg .tio-pic,.tio-lg .tio-sb{padding:12px}}