/* 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; }