/* style-8051.css — extra styles for the 8051 tutorial pages.
   Load AFTER style.css. Uses the same colour variables, so light/dark mode still works. */

.topic h2{font-size:1.22rem;margin:2.1rem 0 .55rem;line-height:1.25;}
.topic h3{font-size:1.02rem;margin:1.5rem 0 .4rem;}
.topic ol{margin:0 0 1.2rem 1.3rem;padding:0;}
.topic ol li{margin-bottom:.4rem;}
.topic code{font-family:'IBM Plex Mono', monospace;font-size:.86em;background:var(--paper-panel);border:1px solid var(--line);border-radius:2px;padding:.05em .3em;}
.topic .keybox code{background:transparent;border:none;padding:0;color:#F2E9CF;}

/* tables */
.tablewrap{overflow-x:auto;margin:1.2rem 0 1.5rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-panel);}
.tablewrap table{border-collapse:collapse;width:100%;font-size:.88rem;line-height:1.45;}
.tablewrap caption{caption-side:top;text-align:left;padding:.65rem .9rem .2rem;font-family:'IBM Plex Mono', monospace;font-size:.76rem;color:var(--ink-soft);}
.tablewrap th{text-align:left;font-family:'IBM Plex Mono', monospace;font-size:.76rem;font-weight:600;color:var(--ink-soft);padding:.6rem .9rem;border-bottom:1px solid var(--line);white-space:nowrap;}
.tablewrap td{padding:.55rem .9rem;border-bottom:1px solid var(--line);vertical-align:top;}
.tablewrap tr:last-child td{border-bottom:none;}
.tablewrap td:first-child{font-family:'IBM Plex Mono', monospace;font-size:.82rem;color:var(--ink);white-space:nowrap;}

/* code blocks */
.codeblock{margin:1.3rem 0 1.6rem;background:var(--green-deep);border-radius:var(--radius);overflow:hidden;}
.codeblock .fname{display:block;font-family:'IBM Plex Mono', monospace;font-size:.72rem;color:var(--amber);padding:.5rem 1rem;border-bottom:1px solid rgba(239,236,226,.12);}
.codeblock pre{margin:0;padding:.9rem 1rem 1rem;overflow-x:auto;font-family:'IBM Plex Mono', monospace;font-size:.82rem;line-height:1.55;color:#EDEAE0;tab-size:4;}
.codeblock pre code{background:none;border:none;padding:0;font-size:inherit;color:inherit;}
.codeblock .c{color:#8FA394;font-style:italic;}
.codeblock .k{color:#E7C27A;}

/* diagrams */
.diagram-box{background:var(--paper-panel);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;margin:1.4rem 0;}
.diagram-box svg{display:block;width:100%;height:auto;max-width:640px;margin:0 auto;}
.diagram-box .figcap{font-size:.82rem;color:var(--ink-soft);margin-top:.7rem;text-align:center;}
.dg-box{fill:var(--paper);stroke:var(--copper);stroke-width:2;}
.dg-box-solid{fill:var(--green-mid);stroke:var(--copper-bright);stroke-width:2;}
.dg-txt{font-family:'IBM Plex Mono', monospace;font-size:12px;fill:var(--ink);}
.dg-txt-sm{font-family:'IBM Plex Mono', monospace;font-size:10.5px;fill:var(--ink-soft);}
.dg-txt-lt{font-family:'IBM Plex Mono', monospace;font-size:12px;fill:#EFECE2;}
.dg-txt-num{font-family:'IBM Plex Mono', monospace;font-size:10px;fill:#E7C27A;}
.dg-txt-b{font-family:'IBM Plex Mono', monospace;font-size:12.5px;font-weight:600;fill:var(--ink);}
.dg-bus{stroke:var(--copper);stroke-width:6;fill:none;stroke-linecap:round;}
.dg-line{stroke:var(--ink-soft);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.dg-pin{stroke:var(--ink-soft);stroke-width:2;}
.dg-fill{fill:var(--copper);}
.dg-note{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 4;}

/* related links */
.related{border-left:3px solid var(--copper);background:var(--paper-panel);padding:.8rem 1.1rem;margin:1.8rem 0 1rem;font-size:.9rem;}
.related .rt{font-family:'IBM Plex Mono', monospace;font-size:.74rem;color:var(--ink-soft);margin-bottom:.35rem;}
.related ul{margin:0 0 0 1.1rem;}
.related li{margin-bottom:.2rem;}

/* sidebar extras */
nav.toc .toc-sub{margin-top:1.6rem;}
.cosy-mini a{display:block;}
.cosy-mini a + a{margin-top:.35rem;}

/* series card grid on the homepage section */
.series-list{list-style:none;margin:0 0 1.2rem 0;padding:0;display:grid;grid-template-columns:1fr;gap:.35rem;}
.series-list li{margin:0;}
.series-list a{display:flex;gap:.7rem;align-items:baseline;text-decoration:none;color:var(--ink);padding:.5rem .7rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-panel);}
.series-list a:hover{border-color:var(--copper);}
.series-list .n{font-family:'IBM Plex Mono', monospace;font-size:.76rem;color:var(--copper);min-width:1.6em;}

/* accessibility */
a:focus-visible,button:focus-visible{outline:2px solid var(--copper-bright);outline-offset:2px;}
.topbar .brand-mark a{color:#fff;border-bottom-color:rgba(255,255,255,.4);}

/* stop wide tables/code from stretching the mobile grid */
.layout > *{min-width:0;}
.topic{min-width:0;}
.codeblock,.tablewrap,.diagram-box{max-width:100%;}
.diagram-box.tall svg{max-width:440px;}
.topic ul.series-list{margin:0 0 1.2rem 0;}