/* bigo.css — "Big O Notation, by Example" Go tutorial.
   Same terminal theme as the bowling lesson (dark hero + green scan-line, white
   "postbox" separation cards, blue accents, dark code blocks), self-contained so
   this public page has no dependency on admin.css / bowling.css. */

body { background-color: #e7edf1; }

.bigo-page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 8px 4px 80px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #1d2327;
}
.bigo-page .back-link {
    display: inline-block; margin-bottom: 18px;
    color: #1e40af; font-size: .9rem; text-decoration: none; font-weight: 600;
}
.bigo-page .back-link:hover { text-decoration: underline; }

/* ── dark hero (black background, green scan-line) ─────────────────────── */
.bigo-hero {
    background: #0d1117; border: 1px solid #30363d; border-radius: 6px;
    padding: 30px 32px; margin-bottom: 22px; color: #c9d1d9;
    position: relative; overflow: hidden;
}
.bigo-hero::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #39d353, #26a641, #39d353);
    background-size: 200% 100%; animation: bigo-scan 4s linear infinite;
}
@keyframes bigo-scan { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
.bigo-hero .eyebrow {
    color: #39d353; font-family: Consolas, Menlo, Monaco, monospace; font-weight: 700;
    font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 12px;
}
.bigo-hero h1 { margin: 0 0 14px; font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.1; color: #fff; }
.bigo-hero h1 em { font-style: normal; color: #39d353; }
.bigo-hero .cursor {
    display: inline-block; width: 10px; height: 1em; background: #39d353;
    vertical-align: text-bottom; margin-left: 3px; animation: bigo-blink 1s step-end infinite;
}
@keyframes bigo-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.bigo-hero .lede { color: #8b949e; font-size: 1rem; line-height: 1.65; max-width: 920px; margin: 0; }
.bigo-hero .lede code, .bigo-hero .lede em {
    color: #c9d1d9; font-style: normal;
    font-family: Consolas, Menlo, Monaco, monospace; font-size: .9em;
}

/* ── table of contents ─────────────────────────────────────────────────── */
.bigo-toc {
    background: #fff; border: 1px solid #c3c4c7; border-radius: 6px;
    box-shadow: 0 1px 1px rgba(0,0,0,.04); margin-bottom: 20px; padding: 16px 18px;
    scroll-margin-top: 72px; /* clear the fixed navbar when jumping back to it */
}
/* "↑ Contents" back-link at the foot of each section */
.bigo-toplink {
    display: block; text-align: right; margin-top: 14px;
    font-size: .8rem; font-weight: 600; color: #1e40af; text-decoration: none;
}
.bigo-toplink:hover { text-decoration: underline; }
.bigo-toc-title {
    font-family: Consolas, Menlo, Monaco, monospace; font-size: .66rem;
    letter-spacing: .16em; text-transform: uppercase; color: #1e40af; font-weight: 700; margin-bottom: 12px;
}
.bigo-toc-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px 20px;
}
.bigo-toc-list li { margin: 0; }
.bigo-toc-list a {
    display: flex; align-items: baseline; gap: 10px; text-decoration: none;
    color: #2c3338; padding: 6px 8px; border-radius: 4px; font-size: .92rem; line-height: 1.35;
}
.bigo-toc-list a:hover { background: #eef2fb; color: #1e40af; }
.bigo-toc-list a .n {
    font-family: Consolas, Menlo, Monaco, monospace; font-size: .72rem; font-weight: 700;
    color: #1e40af; min-width: 18px; flex-shrink: 0;
}
@media (max-width: 620px) { .bigo-toc-list { grid-template-columns: 1fr; } }

/* ── postbox separation cards ──────────────────────────────────────────── */
.bigo-page .postbox {
    background: #fff; border: 1px solid #c3c4c7; border-radius: 6px;
    box-shadow: 0 1px 1px rgba(0,0,0,.04); margin-bottom: 20px; overflow: hidden;
    scroll-margin-top: 72px; /* clear the fixed 60px site navbar on anchor jumps */
}
.bigo-page .postbox-header {
    display: flex; align-items: center; gap: 14px;
    border-bottom: 1px solid #c3c4c7; padding: 12px 16px; background: #f6f7f7;
}
.bigo-page .postbox-header .step-tag {
    font-family: Consolas, Menlo, Monaco, monospace;
    font-size: .62rem; font-weight: 700; letter-spacing: .16em;
    color: #fff; background: #1e40af; padding: 3px 8px; border-radius: 3px; flex-shrink: 0;
}
.bigo-page .postbox-header h2 { font-size: 1.05rem; font-weight: 600; color: #1d2327; margin: 0; }
.bigo-page .postbox-header h2 em { font-style: italic; color: #1e40af; }
.bigo-page .inside { padding: 16px 18px; }
.bigo-page .inside p { color: #2c3338; line-height: 1.65; margin: 0 0 14px; max-width: none; }
.bigo-page .inside p:last-child { margin-bottom: 0; }
.bigo-page .inside strong { color: #1d2327; font-weight: 600; }
.bigo-page .inside em { color: #1e40af; font-style: italic; }
.bigo-page .inside h3 { font-size: 1rem; color: #1d2327; margin: 22px 0 10px; font-weight: 600; }
.bigo-page .inside h3 em { color: #1e40af; }
.bigo-page .inside ul, .bigo-page .inside ol { padding-left: 22px; margin: 12px 0 16px; max-width: none; }
.bigo-page .inside li { margin-bottom: 8px; line-height: 1.6; color: #2c3338; }
.bigo-page .inside code {
    background: #f0f0f1; border: 1px solid #e0e0e2; border-radius: 3px; padding: 1px 5px;
    font-family: Consolas, Menlo, Monaco, monospace; font-size: .86em; color: #14285f;
}

/* ── complexity badge chip ─────────────────────────────────────────────── */
.bigo-badge {
    display: inline-block; font-family: Consolas, Menlo, Monaco, monospace;
    font-weight: 700; font-size: .82rem; padding: 3px 10px; border-radius: 4px;
    color: #fff; letter-spacing: .02em; white-space: nowrap;
}
.bigo-badge.c1     { background: #16a34a; }  /* O(1)        */
.bigo-badge.clog   { background: #0891b2; }  /* O(log n)    */
.bigo-badge.cn     { background: #1e40af; }  /* O(n)        */
.bigo-badge.cnlogn { background: #b45309; }  /* O(n log n)  */
.bigo-badge.cn2    { background: #b91c1c; }  /* O(n^2)      */
.bigo-badge.cexp   { background: #7f1d1d; }  /* O(2^n) — worst */
.bigo-verdict { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; flex-wrap: wrap; }
.bigo-verdict .lbl { font-size: .9rem; color: #3c434a; }

/* ── dark code blocks with Go syntax highlighting ──────────────────────── */
.bigo-codelabel {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    font-family: Consolas, Menlo, Monaco, monospace; font-size: .64rem;
    letter-spacing: .12em; text-transform: uppercase; color: #646970; margin: 20px 0 6px;
}
.bigo-codelabel .cost { color: #1e40af; font-weight: 700; }
.bigo-page pre.bd-code {
    background: #1d2327; color: #e7e8ea; border-radius: 5px; padding: 16px 18px; margin: 0 0 18px;
    overflow-x: auto; font-family: Consolas, Menlo, Monaco, monospace;
    font-size: .82rem; line-height: 1.6; white-space: pre;
}
.bigo-page pre.bd-code .cmt { color: #8f9aa3; font-style: italic; }
.bigo-page pre.bd-code .kw  { color: #a9c5a0; }
.bigo-page pre.bd-code .str { color: #e8c77a; }
.bigo-page pre.bd-code .num { color: #e8c77a; }
.bigo-page pre.bd-code .var { color: #e38b85; font-weight: 500; }
.bigo-page pre.bd-code .hot { display: inline-block; background: rgba(185, 28, 28, 0.22); box-shadow: 4px 0 0 rgba(185,28,28,.22), -2px 0 0 rgba(185,28,28,.22); }
.bigo-page pre.bd-code .cool { display: inline-block; background: rgba(22, 163, 74, 0.20); box-shadow: 4px 0 0 rgba(22,163,74,.20), -2px 0 0 rgba(22,163,74,.20); }

/* blue copy button injected by bandwidth-docs.js */
.bigo-page .bd-code-wrap { position: relative; }
.bigo-page .bd-copy {
    position: absolute; top: 8px; right: 8px; padding: 4px 12px;
    font: 700 .72rem/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #eaf0ff; background: #1e40af; border: 1px solid #3b5bd6; border-radius: 4px;
    cursor: pointer; opacity: 1; transition: background .15s, color .15s;
}
.bigo-page .bd-copy:hover { background: #1d4ed8; color: #fff; }
.bigo-page .bd-copy.done { background: #2563eb; border-color: #2563eb; color: #fff; }

/* ── expected-output / operation-count block (dark) ────────────────────── */
.bigo-out {
    background: #1d2327; color: #e7e8ea; border-radius: 5px; padding: 16px 18px; margin: 16px 0 18px;
    overflow-x: auto; font-family: Consolas, Menlo, Monaco, monospace;
    font-size: .82rem; line-height: 1.75; white-space: pre;
}
.bigo-out .lbl { color: #8f9aa3; }
.bigo-out .val { color: #e8c77a; }
.bigo-out .good { color: #39d353; font-weight: 700; }
.bigo-out .bad { color: #f87171; font-weight: 700; }

/* ── callout (blue-accented note) ──────────────────────────────────────── */
.bigo-callout {
    background: #dbeafe; border-left: 4px solid #1e40af; border-radius: 4px;
    padding: 14px 16px; margin: 16px 0; line-height: 1.6;
}
.bigo-callout .tag {
    display: block; font-family: Consolas, Menlo, Monaco, monospace;
    font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: #1e40af; margin-bottom: 8px;
}
.bigo-callout p { margin: 0 0 8px; color: #1e3a5f; max-width: none; }
.bigo-callout p:last-child { margin-bottom: 0; }
.bigo-callout em { color: #1d4ed8; }

/* ── pull quote ────────────────────────────────────────────────────────── */
.bigo-pull {
    border-left: 3px solid #39d353; padding: 4px 0 4px 18px; margin: 18px 0;
    font-size: 1.15rem; line-height: 1.4; font-style: italic; color: #14285f; max-width: none;
}

/* ── growth comparison table ───────────────────────────────────────────── */
.bigo-tablewrap { overflow-x: auto; margin: 16px 0; }
.bigo-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 560px; }
.bigo-table th, .bigo-table td {
    padding: 9px 12px; text-align: right; border: 1px solid #d3d5d8;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bigo-table thead th { background: #1e40af; color: #fff; font-weight: 600; text-align: right; }
.bigo-table thead th:first-child, .bigo-table td:first-child { text-align: left; }
.bigo-table td:first-child { font-weight: 600; color: #1d2327; background: #f6f7f7; }
.bigo-table tbody tr:nth-child(even) td { background: #f9fafb; }
.bigo-table .col-c1     { color: #16a34a; }
.bigo-table .col-clog   { color: #0891b2; }
.bigo-table .col-cn     { color: #1e40af; }
.bigo-table .col-cnlogn { color: #b45309; }
.bigo-table .col-cn2    { color: #b91c1c; font-weight: 700; }
.bigo-tablecap { font-size: .8rem; color: #646970; margin: 6px 0 0; }

/* ── growth-curve SVG chart ────────────────────────────────────────────── */
.bigo-figure { margin: 16px 0 4px; background: #fbfcfd; border: 1px solid #dfe3e8; border-radius: 6px; padding: 12px 14px; }
.bigo-chart { display: block; max-width: 100%; height: auto; }
.bigo-chart .bigo-grid { stroke: #e3e7ec; stroke-width: 1; }
.bigo-chart .bigo-axis { stroke: #9aa3ad; stroke-width: 1.5; }
.bigo-chart .bigo-axlab { fill: #646970; font-size: 12px; font-family: Consolas, Menlo, Monaco, monospace; }
.bigo-chart .bigo-leg { fill: #1d2327; font-size: 13px; font-family: Consolas, Menlo, Monaco, monospace; }
.bigo-figcap { font-size: .8rem; color: #646970; margin: 8px 2px 0; text-align: center; }

.bigo-footer {
    margin-top: 24px; padding-top: 20px; border-top: 1px solid #c3c4c7; text-align: center;
    font-family: Consolas, Menlo, Monaco, monospace; font-size: .66rem;
    letter-spacing: .14em; text-transform: uppercase; color: #646970;
}
.bigo-footer .x { color: #1e40af; font-weight: 700; }

@media (max-width: 620px) {
    .bigo-hero { padding: 22px 18px; }
    .bigo-page pre.bd-code, .bigo-out { font-size: .74rem; padding: 13px 12px; }
    .bigo-page .postbox-header { flex-wrap: wrap; gap: 8px; }
}