/* Shared lesson styling: use the same palette and type scale as Packet Tracer articles. */
.switchlab-lesson { max-width: 820px; }
.switchlab-lesson a:not(.btn-nes) { color: var(--lt-blue); text-underline-offset: 3px; }
.switchlab-lesson a:not(.btn-nes):hover { color: var(--lt-yel); }
.switchlab-lesson .article-title, .switchlab-lesson .article-tag { text-transform: uppercase; }
.switchlab-lesson .article-sub { color: #b8b8a0; line-height: 1.9; }
.switchlab-lesson nav { font-family: var(--mono); font-size: var(--body-xs); color: var(--gray); margin-bottom: 2rem; line-height: 1.8; }
.lab-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 2rem 0; border: 2px solid var(--border); background: var(--panel); box-shadow: 3px 3px 0 #000; font-family: var(--mono); }
.lab-facts div { padding: 1rem; }
.lab-facts dt { color: var(--cyan); font-size: var(--body-xs); text-transform: uppercase; letter-spacing: .04em; }
.lab-facts dd { margin: .4rem 0 0; color: var(--white); font-size: var(--body-sm); line-height: 1.8; }
.switchlab-lesson .article-body h2 { text-transform: uppercase; line-height: 2; }
.switchlab-lesson .article-body h2::before { content: '★ '; }
.switchlab-lesson .article-body h3 { line-height: 2; }
.switchlab-lesson li { font-family: var(--mono); font-size: var(--body-md); color: #d8d8c0; line-height: 1.9; margin: .8rem 0; }
.switchlab-lesson li::marker { color: var(--yellow); }
.switchlab-lesson ul, .switchlab-lesson ol { padding-left: 1.5rem; }
.switchlab-lesson pre { padding: 1.2rem; background: #000; color: var(--lt-green); border: 2px solid var(--border); box-shadow: 3px 3px 0 #000; overflow-x: auto; font: var(--body-sm)/1.85 var(--mono); }
.switchlab-lesson pre code { font: inherit; }
.switchlab-lesson details { border: 2px solid var(--border); border-left: 3px solid var(--yellow); background: var(--panel); box-shadow: 3px 3px 0 #000; margin: 1rem 0; padding: 1rem 1.2rem; }
.switchlab-lesson summary { cursor: pointer; font: 700 var(--body-sm)/1.9 var(--mono); color: var(--lt-yel); min-height: 28px; }
.switchlab-lesson summary:hover { color: var(--white); }
.switchlab-lesson details[open] summary { margin-bottom: 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--border); }
.switchlab-lesson details > :last-child { margin-bottom: 0; }
.switchlab-lesson details[data-lab-event="lab_solution_open"] { border-left-color: var(--green); }
.switchlab-lesson details[data-lab-event="lab_solution_open"] summary { color: var(--lt-green); }
.switchlab-lesson a:focus-visible, .switchlab-lesson summary:focus-visible { outline: 3px solid var(--lt-yel); outline-offset: 4px; }
.lab-topology { margin: 1.5rem 0; }
.lab-topology img { display: block; width: 100%; height: auto; border: 2px solid var(--border); }
.lab-topology figcaption { font: var(--body-xs)/1.8 var(--mono); color: #b8b8a0; margin-top: .7rem; }
.lab-table { overflow-x: auto; margin: 1.5rem 0; }
.lab-table table { width: 100%; border-collapse: collapse; font: var(--body-sm)/1.7 var(--mono); }
.lab-table th, .lab-table td { border: 2px solid var(--border); text-align: left; padding: .6rem .8rem; }
.lab-table th { background: var(--blue); color: #fff; border-color: #000; text-transform: uppercase; font-size: var(--body-xs); }
.lab-table td { background: var(--panel); }
.lab-table td:first-child { color: var(--yellow); }
.switchlab-lesson .btn-nes { line-height: 2; white-space: normal; }
@media(max-width: 520px) {
  .lab-facts { grid-template-columns: 1fr; }
  .lab-facts div + div { border-top: 1px solid var(--border); }
  .switchlab-lesson { padding-left: 1rem; padding-right: 1rem; }
  .switchlab-lesson details { padding: .85rem; }
}

/* Match the older lessons' inline IOS commands and green download callout. */
.switchlab-lesson :not(pre) > code { background: #000; border: 1px solid var(--border); padding: 1px 5px; color: var(--lt-green); font: .9em/1.8 var(--mono); overflow-wrap: anywhere; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.lab-download-panel { background: #0c1a0c; border: 3px solid var(--green); box-shadow: 3px 3px 0 #000; padding: 1.2rem; margin: 1.5rem 0; }
.switchlab-lesson .lab-download-label { color: var(--lt-green); font-weight: 700; font-size: var(--body-xs); letter-spacing: .04em; margin-bottom: .6rem; }
.lab-download-panel p:last-child { margin-bottom: 0; }

/* Library controls reuse the site's typography and panel palette. */
.labs-page .sec-tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.lab-library-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 1rem; align-items: end; margin: 1.5rem 0; }
.lab-library-filters label { display: grid; gap: .6rem; font: var(--body-sm)/1.7 var(--mono); color: var(--lt-blue); min-width: 0; }
.lab-library-filters select, .lab-library-filters button { width: 100%; min-height: 44px; padding: .65rem; border: 2px solid var(--border); background: var(--panel); color: var(--white); font: var(--body-sm)/1.7 var(--mono); }
.lab-library-filters button { cursor: pointer; color: var(--lt-yel); }
.lab-library-filters :focus-visible { outline: 3px solid var(--lt-yel); outline-offset: 3px; }
#switchlab-labs [hidden] { display: none !important; }
#switchlab-labs [data-lab-group] { margin: 2rem 0; }
#switchlab-labs h3 { font: bold var(--body-lg)/1.8 var(--mono); color: var(--lt-blue); margin: 1.5rem 0 1rem; }
#switchlab-labs p, #switchlab-labs li { font-family: var(--mono); line-height: 1.9; }
#switchlab-labs .lab-desc { color: #b8b8a0; }
.hub-lab-topic { border: 2px solid var(--border); background: var(--panel); padding: 1.25rem; margin: 1rem 0; }
.hub-lab-topic ol { padding-left: 1.5rem; }
.hub-lab-topic li { margin: .7rem 0; }
.hub-lab-topic a { color: var(--lt-blue); }
.hub-lab-topic li span { color: #b8b8a0; font-size: var(--body-xs); }
@media (max-width: 800px) { .lab-library-filters { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .lab-library-filters { grid-template-columns: 1fr; } }