/* Ninebloom technique guides (apps/ninebloom/learn/). Generated pages: see marketing/learn_pages.py in the Ninebloom
   repo. Builds on ninebloom.css (.nb tokens); every rule here is under .nbl. */

.nbl main { padding-bottom: 24px; }
.nbl section { padding: 0; }
.nbl .crumbs { padding-top: 22px; font-size: 0.9rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; }
.nbl .crumbs a { color: var(--muted); }
.nbl .crumbs a:hover { color: var(--ink); }

.nbl .learn-head { padding: 28px 0 8px; }
.nbl .learn-head.center { text-align: center; max-width: 760px; margin: 0 auto; }
.nbl .learn-head.center .lead { margin: 0 auto 1em; }
.nbl .learn-head h1 { font-size: clamp(2rem, 4.6vw, 2.9rem); line-height: 1.12; }
.nbl .answer { font-size: 1.15rem; background: var(--g-soft); border-left: 4px solid var(--g); border-radius: 0 14px 14px 0; padding: 16px 20px; margin: 18px 0 0; }

.nbl .learn h2 { margin: 1.8em 0 0.5em; }
.nbl .learn h3 { margin: 0 0 0.25em; font-size: 1.15rem; }
.nbl .note { color: var(--muted); font-size: 0.92rem; }

/* Boards. The SVGs are drawn in the app's light Lagoon colours, so they sit on a light card in both themes. */
.nbl .board-fig { margin: 26px 0; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 18px; }
.nbl .board-fig img { width: 100%; max-width: 494px; margin: 0 auto; background: #fff; border-radius: 12px; }
.nbl .board-fig figcaption { margin-top: 14px; }
.nbl .board-fig figcaption p { margin: 0 0 0.6em; }
.nbl .ex-label { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-dark); }
.nbl .try { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; background: var(--surface-alt); border-radius: 12px; padding: 12px 14px; font-size: 0.9rem; color: var(--muted); }
.nbl .try span { grid-column: 1 / -1; }
.nbl .try code { font-size: 0.78rem; color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.nbl .copy { all: unset; cursor: pointer; font-weight: 700; font-size: 0.85rem; color: #fff; background: var(--g); padding: 7px 14px; border-radius: 999px; white-space: nowrap; }
.nbl .copy:hover { background: var(--g-dark); }
.nbl .copy:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

.nbl .legend { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.9rem; color: var(--muted); }
.nbl .legend li { display: flex; align-items: center; gap: 8px; }
.nbl .legend i { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.12); display: inline-block; }
.nbl .legend i.x { background: #fce7e1; position: relative; }
.nbl .legend i.x::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 2px; background: #b3361a; transform: rotate(-35deg); }
.nbl .legend i.dash { width: 20px; height: 0; border: 0; border-radius: 0; border-top: 2px dashed currentColor; }

.nbl .steps, .nbl .checklist { padding-left: 1.4em; }
.nbl .steps li { margin-bottom: 0.5em; }
.nbl .checklist > li { margin-bottom: 1.2em; }
.nbl .checklist > li::marker { font-weight: 800; color: var(--g-dark); }
.nbl .mistakes { padding-left: 1.2em; }
.nbl .mistakes li { margin-bottom: 0.5em; }

.nbl .faq-block .faq { margin: 0; }

.nbl .ladder-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 40px 0 0; }
.nbl .ladder-nav > * { display: block; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); font-weight: 700; color: var(--ink); }
.nbl .ladder-nav small { display: block; font-weight: 600; }
.nbl .ladder-nav .next { text-align: right; }
.nbl .ladder-nav .soon { color: var(--muted); font-weight: 600; }
.nbl .ladder-nav > span:empty { border: 0; background: none; }
.nbl .ladder-nav a:hover { border-color: var(--g); text-decoration: none; }

.nbl .learn-cta { margin: 44px 0 0; padding: 32px 28px; border-radius: 24px; text-align: center; color: #fff; background: linear-gradient(135deg, #12867a, #06372f); }
.nbl .learn-cta h2 { color: #fff; margin: 0 0 0.3em; }
.nbl .learn-cta p { color: rgba(255, 255, 255, 0.88); max-width: 560px; margin: 0 auto 18px; }
.nbl .learn-cta .btn { background: #fff; color: #08493f; }
.nbl .learn-cta .btn:hover { background: var(--peach); }
.nbl .learn-cta .small { font-size: 0.88rem; margin: 14px auto 0; }

/* Index */
.nbl .tgrid { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: t; }
@media (max-width: 860px) { .nbl .tgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .nbl .tgrid { grid-template-columns: 1fr; } }
.nbl .tgrid li { counter-increment: t; }
.nbl .tcard { display: flex; flex-direction: column; height: 100%; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink); position: relative; }
.nbl .tcard::before { content: counter(t, decimal-leading-zero); position: absolute; right: 18px; top: 16px; font-family: var(--serif); font-weight: 700; color: var(--g-soft); font-size: 1.6rem; }
.nbl .tcard h3 { margin: 0 0 0.3em; }
.nbl .tcard p { margin: 0 0 0.8em; color: var(--muted); font-size: 0.95rem; }
.nbl .tcard .lvl { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--g-dark); margin-bottom: 6px; }
.nbl .tcard .go { margin-top: auto; font-weight: 700; font-size: 0.9rem; color: var(--g-dark); }
.nbl a.tcard:hover { border-color: var(--g); text-decoration: none; box-shadow: 0 14px 30px -20px rgba(8, 73, 63, 0.5); }
.nbl .tcard.off { opacity: 0.72; }
.nbl .tcard.off .go { color: var(--muted); }
.nbl .levels-note { max-width: 760px; margin: 0 auto; }
.nbl .learn-index .learn-cta { max-width: 760px; margin-left: auto; margin-right: auto; }

@media (max-width: 520px) {
  .nbl .board-fig { padding: 12px; }
  .nbl .ladder-nav { grid-template-columns: 1fr; }
  .nbl .ladder-nav .next { text-align: left; }
  .nbl .try { grid-template-columns: 1fr; }
}