/* cisco-lab.css — Cisco lab guides (1921+2960L Setup, NAT, VLANs, IOS commands).
   The page uses the terminal theme from bowling.css (dark hero, postbox
   cards, bd-code blocks, callouts, bowl-table). This file only adds what that
   stylesheet lacks: the topology strip in the hero, the per-step device tag,
   IOS prompts inside code blocks, the verify checklist, and the blue/amber
   callout variants. Shared by the Setup, NAT, VLANs and IOS-commands pages;
   the old cisco-setup.css/.js were retired 2026-09-20. */

/* ── topology strip in the hero ────────────────────────────────────────── */
.topo {
    display: flex; align-items: stretch; gap: 0;
    border: 1px solid #30363d; border-radius: 4px; overflow: hidden;
    background: #161b22;
}
.topo-node {
    flex: 1 1 0; min-width: 0;
    padding: 12px 10px; text-align: center;
    font-family: Consolas, Menlo, Monaco, monospace;
    color: #c9d1d9; background: #0d1117;
}
.topo-node .ico { display: block; font-size: 1.3rem; color: #8b949e; margin-bottom: 4px; }
.topo-node .lbl { font-size: .8rem; font-weight: 700; color: #fff; white-space: nowrap; }
.topo-node .sub { font-size: .66rem; color: #8b949e; margin-top: 3px; white-space: nowrap; }
.topo-node.hot { background: #10261a; }
.topo-node.hot .ico { color: #39d353; }
.topo-node.hot .sub { color: #39d353; }
.topo-link {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    padding: 0 8px; position: relative; min-width: 72px;
}
.topo-link::before {
    content: ""; position: absolute; left: 6px; right: 6px; top: 50%;
    border-top: 1px dashed #39d353; opacity: .6;
}
.topo-link::after {
    content: "\25B8"; position: absolute; right: 2px; top: 50%;
    transform: translateY(-52%); color: #39d353; font-size: .8rem;
}
.topo-link .port {
    position: relative; z-index: 1;
    font-family: Consolas, Menlo, Monaco, monospace;
    font-size: .6rem; letter-spacing: .08em; color: #8b949e;
    background: #161b22; padding: 2px 6px; border-radius: 3px;
}
.bowl-hero .lede a { color: #39d353; text-decoration: underline; text-decoration-color: rgba(57,211,83,.4); }
.bowl-hero .lede a:hover { text-decoration-color: #39d353; }

/* ── per-step device tag, right-aligned in the postbox header ──────────── */
.bowl-page .postbox-header .dev-tag {
    margin-left: auto; flex-shrink: 0;
    font-family: Consolas, Menlo, Monaco, monospace;
    font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px;
    background: #f0f0f1; border: 1px solid #dcdcde; color: #646970;
}
.bowl-page .dev-tag.router { color: #1e40af; border-color: #bfd0f5; background: #eef2ff; }
.bowl-page .dev-tag.switch { color: #92400e; border-color: #f2d59b; background: #fffbeb; }
.bowl-page .dev-tag.both   { color: #14694a; border-color: #9fd3b8; background: #ecfdf3; }

/* ── IOS prompts inside code blocks: visible, greyed, stripped on copy ─── */
.bowl-page pre.bd-code .prompt { color: #7f8a93; font-style: normal; user-select: none; }

/* ── verify checklist ──────────────────────────────────────────────────── */
.bowl-page .bowl-check { list-style: none; padding-left: 0; margin: 10px 0 14px; }
.bowl-page .bowl-check li {
    position: relative; padding: 6px 0 6px 26px; margin: 0;
    border-bottom: 1px dashed #e0e0e2; color: #2c3338;
}
.bowl-page .bowl-check li:last-child { border-bottom: 0; }
.bowl-page .bowl-check li::before {
    content: ""; position: absolute; left: 2px; top: 10px;
    width: 12px; height: 12px; border: 1.5px solid #14694a; border-radius: 3px;
}

/* ── callout variants ──────────────────────────────────────────────────── */
.bowl-page .bowl-callout.info { background: #dbeafe; border-left-color: #1e40af; }
.bowl-page .bowl-callout.info .tag { color: #1e40af; }
.bowl-page .bowl-callout.info p { color: #1e3a8a; }
.bowl-page .bowl-callout.warn { background: #fef3c7; border-left-color: #b45309; }
.bowl-page .bowl-callout.warn .tag { color: #b45309; }
.bowl-page .bowl-callout.warn p { color: #78350f; }
.bowl-page .bowl-callout.warn code { border-color: #f2d59b; }

@media (max-width: 720px) {
    .topo { flex-wrap: wrap; }
    .topo-node { flex: 1 1 45%; }
    .topo-link { flex: 1 1 100%; min-height: 28px; }
    .topo-link::after { right: 50%; transform: translate(50%, 40%) rotate(90deg); }
    .topo-link::before { display: none; }
    .bowl-page .postbox-header { flex-wrap: wrap; }
    .bowl-page .postbox-header .dev-tag { margin-left: 0; }
}

/* ── key chips (IOS reference: Tab, ?) ─────────────────────────────────── */
.bowl-page kbd {
    font-family: Consolas, Menlo, Monaco, monospace; font-size: .84em;
    color: #14332a; background: #f0f0f1; border: 1px solid #c3c4c7;
    border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}
/* long commands in the first column of reference tables stay on one line where they fit */
.bowl-page .bowl-table td:first-child code { white-space: nowrap; }

/* ── examples index: the five guides as full-width step cards ──────────── */
.bowl-page .bowl-steps.cisco-index { grid-template-columns: 1fr; gap: 10px; }
.bowl-page .cisco-index .bowl-step h3 { font-size: 1.02rem; }
.bowl-page .cisco-index .bowl-step p { font-size: .93rem; }
.bowl-page .inside .bowl-pull code {
    font-style: normal; font-size: .85em;
    background: #f0f0f1; border: 1px solid #e0e0e2; border-radius: 3px; padding: 1px 5px;
}

/* ── the Cisco theme (.cisco-theme): bluish variant of bowling.css ───
   On the index AND all six guide pages since 2026-09-20. Navy hero (#0b1628)
   with muted blue accents (#58a6ff), cream (#fffdf8) panel in the hero, #1e40af
   on the cards. Green from bowling.css is overridden everywhere below. */
body:has(.cisco-theme) { background-color: #dfe6f0; }
.bowl-page.cisco-theme .back-link { color: #1e40af; }

/* hero: navy instead of black, blue scan-line, blue accents */
.cisco-theme .bowl-hero { background: #0b1628; border-color: #1f3556; }
.cisco-theme .bowl-hero::before { background: linear-gradient(90deg, #58a6ff, #388bfd, #58a6ff); background-size: 200% 100%; }
.cisco-theme .bowl-hero .eyebrow,
.cisco-theme .bowl-hero h1 em { color: #58a6ff; }
.cisco-theme .bowl-hero .cursor { background: #58a6ff; }
.cisco-theme .bowl-hero .lede { color: #9fb3c8; }
.cisco-theme .bowl-hero .lede code, .cisco-theme .bowl-hero .lede em { color: #d6e2f0; }
.cisco-theme .bowl-hero .lede a { color: #58a6ff; text-decoration-color: rgba(88,166,255,.4); }
.cisco-theme .bowl-hero .lede a:hover { text-decoration-color: #58a6ff; }

/* "The lab these guides build": cream-white panel inside the navy hero */
.cisco-theme .bowl-scoresheet {
    background: #fffdf8; border: 1px solid #e6dcc3; border-radius: 6px;
    padding: 16px 18px 14px;
}
.cisco-theme .bowl-scoresheet .ss-label { color: #7a6a48; }
.cisco-theme .topo { background: #f1ebdd; border-color: #e0d5ba; }
.cisco-theme .topo-node { background: #fbf7ee; color: #2c3338; }
.cisco-theme .topo-node .ico { color: #7a6a48; }
.cisco-theme .topo-node .lbl { color: #1d2327; }
.cisco-theme .topo-node .sub { color: #7a6a48; }
.cisco-theme .topo-node.hot { background: #e8f0fb; }
.cisco-theme .topo-node.hot .ico, .cisco-theme .topo-node.hot .sub { color: #1e40af; }
.cisco-theme .topo-link::before { border-top-color: #1e40af; opacity: .5; }
.cisco-theme .topo-link::after { color: #1e40af; }
.cisco-theme .topo-link .port { background: #fffdf8; color: #5c4f33; border: 1px solid #e0d5ba; }
.cisco-theme .bowl-final { color: #7a6a48; }
.cisco-theme .bowl-final strong { color: #1e40af; }

/* cards: blue tags, numbers, rules and links */
.bowl-page.cisco-theme .postbox { border-color: #b9c6d8; }
.bowl-page.cisco-theme .postbox-header { background: #f3f6fa; border-bottom-color: #b9c6d8; }
.bowl-page.cisco-theme .postbox-header .frame-tag { background: #1e40af; }
.bowl-page.cisco-theme .postbox-header h2 em { color: #1e40af; }
.bowl-page.cisco-theme .inside em { color: #1e40af; }
.bowl-page.cisco-theme .inside a { color: #1e40af; text-decoration-color: #a9c0ea; }
.bowl-page.cisco-theme .inside a:hover { color: #172f7f; text-decoration-color: #1e40af; }
.bowl-page.cisco-theme .bowl-step { background: #f3f6fa; border-color: #d3dceb; border-left-color: #388bfd; }
.bowl-page.cisco-theme .bowl-step .num { background: #1e40af; }
.bowl-page.cisco-theme .bowl-step h3 a:hover { color: #1e40af; }
.bowl-page.cisco-theme .bowl-callout { background: #dbeafe; border-left-color: #1e40af; }
.bowl-page.cisco-theme .bowl-callout .tag { color: #1e40af; }
.bowl-page.cisco-theme .bowl-callout p { color: #1e3a8a; }
.bowl-page.cisco-theme .bowl-callout em { color: #1e40af; }
.bowl-page.cisco-theme .bowl-pull { border-left-color: #388bfd; color: #1a2a4a; }
.bowl-page.cisco-theme .bowl-footer { border-top-color: #b9c6d8; }
.bowl-page.cisco-theme .bowl-footer .x { color: #1e40af; }

/* guide pages: the remaining green accents from bowling.css / above */
.bowl-page.cisco-theme .bowl-expected .final { color: #58a6ff; }
.bowl-page.cisco-theme .bowl-codelabel .lines { color: #1e40af; }
.bowl-page.cisco-theme .bowl-check li::before { border-color: #1e40af; }
.bowl-page.cisco-theme .dev-tag.both { color: #0b1628; border-color: #b9c6d8; background: #e4ebf5; }
.bowl-page.cisco-theme .inside .bowl-pull code { background: #eef2f8; border-color: #d3dceb; }
.bowl-page.cisco-theme .bowl-divider .x, .bowl-page.cisco-theme .bowl-transition em { color: #1e40af; }

/* ---- Labelled diagram inside a step (e.g. the 1921 rear-panel SVG) ---- */
.bowl-page .cisco-figure {
    max-width: 85%;
    margin: 16px auto 18px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #d3dceb;
    border-radius: 8px;
}
.bowl-page .cisco-figure img {
    display: block;
    width: 100%;
    height: auto;
}
.bowl-page .cisco-figure figcaption {
    margin-top: 8px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #475569;
    text-align: center;
}
/* On phones keep the diagram full width so its labels stay readable */
@media (max-width: 640px) {
    .bowl-page .cisco-figure { max-width: 100%; }
}

/* ── whole-card links on /examples/networking/ (same pattern as the Go and
   Database index pages). Each .bowl-step is one <a class="cisco-card">.
   Reset the .inside a blue/bold/underline, and never underline in a card.
   Scoped to .cisco-card, so the six guide pages sharing this file are
   unaffected. */
.bowl-page.cisco-theme .inside a.cisco-card,
.bowl-page.cisco-theme .inside a.cisco-card:hover {
    display: block; color: inherit; font-weight: inherit; text-decoration: none;
}
.bowl-page.cisco-theme .cisco-card,
.bowl-page.cisco-theme .cisco-card * { text-decoration: none; }
.bowl-page.cisco-theme .cisco-index .cisco-card {
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.bowl-page.cisco-theme .cisco-index .cisco-card:hover,
.bowl-page.cisco-theme .cisco-index .cisco-card:focus-visible {
    background: #eef4ff; border-color: #b9cdf5; border-left-color: #1e40af;
    box-shadow: 0 2px 8px rgba(30, 64, 175, .12);
}
.bowl-page.cisco-theme .cisco-index .cisco-card:hover h3,
.bowl-page.cisco-theme .cisco-index .cisco-card:focus-visible h3 { color: #1e40af; }
.bowl-page.cisco-theme .cisco-index .cisco-card:focus-visible { outline: 2px solid #1e40af; outline-offset: 2px; }

/* ── Networking Examples index (/examples/networking/, 2026-09-26) ─────────────
   Stats row under the topology strip in the cream hero panel, and a row of
   topic chips on each guide card. Index-only classes (net-*). */
.cisco-theme .net-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px;
}
.cisco-theme .net-stats div {
    background: #fbf7ee; border: 1px solid #e0d5ba; border-radius: 5px;
    padding: 8px 10px; text-align: center;
}
.cisco-theme .net-stats strong { display: block; font-size: 1.25rem; color: #1e40af; line-height: 1.2; }
.cisco-theme .net-stats span { display: block; font-size: .72rem; color: #7a6a48; letter-spacing: .02em; }
.bowl-page .net-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bowl-page .net-chip {
    font-size: .74rem; line-height: 1; padding: 4px 8px; border-radius: 999px;
    color: #334155; background: #ffffff; border: 1px solid #d3dceb; white-space: nowrap;
}
.bowl-page .net-chip.time { color: #1e40af; background: #e8f0fb; border-color: #b9cdf5; font-weight: 600; }
.bowl-page.cisco-theme .cisco-index .cisco-card:hover .net-chip { border-color: #b9cdf5; }
@media (max-width: 640px) {
    .cisco-theme .net-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── Networking hub: device cards (ROUTERS / SWITCHES), 2026-09-26 ────────
   .net-device is a .bowl-step laid out as a two-up grid. A live device is an
   <a class="cisco-card"> (hover from the rules above, via .net-devices);
   .net-soon is a plain div, dashed and muted, for devices not written yet. */
.bowl-page .net-devices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.bowl-page .net-device h3 { display: block; margin: 8px 0 0; font-size: 1.05rem; }
.bowl-page .net-device-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bowl-page .net-kind {
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1e40af;
}
.bowl-page .net-status {
    font-size: .72rem; line-height: 1; padding: 4px 8px; border-radius: 999px;
    color: #64748b; background: #ffffff; border: 1px solid #d3dceb; white-space: nowrap;
}
.bowl-page .net-status.live { color: #ffffff; background: #1e40af; border-color: #1e40af; font-weight: 600; }
.bowl-page.cisco-theme .net-device.net-soon {
    background: #f8fafc; border-style: dashed; border-left-style: solid; border-left-color: #b9c6d8;
}
.bowl-page.cisco-theme .net-soon h3 { color: #475569; }
.bowl-page.cisco-theme .net-soon .net-kind { color: #64748b; }
.bowl-page.cisco-theme .net-devices .cisco-card {
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.bowl-page.cisco-theme .net-devices .cisco-card:hover,
.bowl-page.cisco-theme .net-devices .cisco-card:focus-visible {
    background: #eef4ff; border-color: #b9cdf5; border-left-color: #1e40af;
    box-shadow: 0 2px 8px rgba(30, 64, 175, .12);
}
.bowl-page.cisco-theme .net-devices .cisco-card:hover h3 { color: #1e40af; }
.bowl-page.cisco-theme .net-devices .cisco-card:focus-visible { outline: 2px solid #1e40af; outline-offset: 2px; }
@media (max-width: 640px) {
    .bowl-page .net-devices { grid-template-columns: 1fr; }
}

/* Wide diagrams (the Networking Introduction's teaching figures): full column
   width so their 16-20px labels stay readable once the SVG scales down. */
.bowl-page .cisco-figure.wide { max-width: 100%; padding: 8px; }

/* Practice problems (Networking Basics guides): numbered cards, each with a
   question and a native <details> reveal. Blue counterpart of the purple
   Feynman reveal; no JS. */
.bowl-page ol.net-practice { list-style: none; counter-reset: q; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.bowl-page ol.net-practice > li {
    counter-increment: q; position: relative;
    background: #f3f6fa; border: 1px solid #d3dceb; border-left: 4px solid #388bfd; border-radius: 6px;
    padding: 12px 14px 12px 52px;
}
.bowl-page ol.net-practice > li::before {
    content: counter(q); position: absolute; left: 14px; top: 12px;
    width: 26px; height: 26px; line-height: 26px; border-radius: 50%;
    background: #1e40af; color: #fff; font-weight: 700; font-size: .85rem; text-align: center;
}
.bowl-page .net-practice .q { margin: 2px 0 0; font-weight: 600; color: #1d2327; max-width: none; }
.bowl-page .net-practice details { margin-top: 8px; }
.bowl-page .net-practice summary {
    cursor: pointer; list-style: none; color: #1e40af; font-weight: 700; font-size: .9rem;
}
.bowl-page .net-practice summary::-webkit-details-marker { display: none; }
.bowl-page .net-practice summary::before { content: "\25B8"; display: inline-block; margin-right: 6px; transition: transform .15s ease; }
.bowl-page .net-practice details[open] summary::before { transform: rotate(90deg); }
.bowl-page .net-practice details > p {
    margin: 8px 0 0; padding: 10px 12px; background: #ffffff; border: 1px solid #d3dceb; border-radius: 5px; max-width: none;
}

/* A device/basics card that spans both columns of .net-devices (the Basics capstone). */
.bowl-page .net-devices .net-wide { grid-column: 1 / -1; }