/* ============================================================
   manual-pro.css — professional docs layer v3
   Task: bomai_manual_reburn_p0_professional_v3 (yt-tutorial-kit)
   Scope: .bomai (manual pages only) — no effect on other themes/pages.
   Load order: bomai.css -> manual.css -> manual-pro.css -> grav-nav.css
   Base tokens (dark premium v1) come from bomai.css / grav-nav.css.
   ============================================================ */

/* ---------- hero & typography ---------- */
.bomai .bm-hero{border-bottom:1px solid var(--line);padding-bottom:34px;margin-bottom:26px}
.bomai .bm-eyebrow{display:inline-flex;align-items:center;gap:12px;letter-spacing:2px}
.bomai .bm-eyebrow::after{content:"";width:46px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),transparent)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .bomai .bm-main h1{background:linear-gradient(115deg,#f2d98e 0%,#D4A017 55%,#a87e0f 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
}
.bomai .bm-content>:first-child{margin-top:0}
.bomai .bm-content h2{position:relative;font-size:24px;line-height:1.45;margin:46px 0 16px;padding-left:16px;border-left:4px solid var(--gold);scroll-margin-top:24px}
.bomai .bm-content h3{color:var(--teal);font-size:19px;margin:26px 0 10px}
.bomai .bm-content a{color:#57d6c8}

/* ---------- video clips (core asset) ---------- */
.bomai .bm-content video{display:block;width:100%;aspect-ratio:16/9;border-radius:16px;border:1px solid rgba(46,196,182,.22);background:#05070a;box-shadow:0 6px 28px rgba(0,0,0,.45),0 0 0 4px rgba(46,196,182,.05);margin:20px 0 8px;transition:border-color .15s}
.bomai .bm-content video:hover{border-color:rgba(46,196,182,.5)}
.bomai .bm-content video+p{font-size:14.5px;line-height:1.7;color:#9fb0bc;margin:6px 0 24px;padding-left:14px;border-left:3px solid rgba(212,160,23,.55);display:flex;gap:8px;align-items:baseline}
.bomai .bm-content video+p::before{content:"\25B6";font-size:9px;color:var(--gold);flex:none;position:relative;top:-1px}
.bomai .bm-content video+p code{font-size:.9em}

/* ---------- notices / callouts (markdown-notices) ---------- */
.bomai .notices{position:relative;margin:22px 0;padding:15px 18px 15px 52px;border-radius:14px;border:1px solid transparent;font-size:15px;line-height:1.75}
.bomai .notices p{margin:0}
.bomai .notices p+p{margin-top:8px}
.bomai .notices::before{content:"!";position:absolute;left:15px;top:16px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:800 13px/1 Inter,sans-serif}
.bomai .notices.yellow{background:rgba(212,160,23,.09);border-color:rgba(212,160,23,.35)}
.bomai .notices.yellow::before{background:rgba(212,160,23,.2);color:var(--gold)}
.bomai .notices.yellow strong{color:#e9c766}
.bomai .notices.red{background:rgba(239,107,115,.08);border-color:rgba(239,107,115,.4)}
.bomai .notices.red::before{background:rgba(239,107,115,.18);color:#ef6b73;content:"\2715"}
.bomai .notices.red strong{color:#f3979d}
.bomai .notices.blue{background:rgba(46,196,182,.07);border-color:rgba(46,196,182,.35)}
.bomai .notices.blue::before{background:rgba(46,196,182,.18);color:var(--teal);content:"i"}
.bomai .notices.blue strong{color:#57d6c8}
.bomai .notices.green{background:rgba(43,196,154,.08);border-color:rgba(43,196,154,.4)}
.bomai .notices.green::before{background:rgba(43,196,154,.18);color:#2bc49a;content:"\2713"}
.bomai .notices.green strong{color:#5fd8b2}
.bomai .notices a{color:#57d6c8}

/* ---------- details / accordion (FAQ + advanced) ---------- */
.bomai .bm-content details{border:1px solid var(--line);border-radius:14px;padding:0;margin:12px 0;background:#161b22;overflow:hidden;transition:border-color .15s}
.bomai .bm-content details[open]{border-color:rgba(212,160,23,.4)}
.bomai .bm-content summary{cursor:pointer;padding:15px 48px 15px 18px;font-weight:600;color:#e6edf3;position:relative;list-style:none;min-height:48px;display:flex;align-items:center;line-height:1.6}
.bomai .bm-content summary::-webkit-details-marker{display:none}
.bomai .bm-content summary::after{content:"+";position:absolute;right:18px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;border:1px solid rgba(212,160,23,.5);color:var(--gold);font-size:15px;font-weight:400;display:flex;align-items:center;justify-content:center;transition:transform .18s}
.bomai .bm-content details[open] summary::after{transform:rotate(45deg)}
.bomai .bm-content details[open] summary{color:var(--gold);background:rgba(212,160,23,.07);border-bottom:1px solid rgba(212,160,23,.25)}
.bomai .bm-content details>*:not(summary){margin-left:18px;margin-right:18px}
.bomai .bm-content details>*:not(summary):first-of-type{margin-top:14px}
.bomai .bm-content details>*:not(summary):last-child{margin-bottom:16px}
.bomai .bm-content details pre{margin-left:18px;margin-right:18px}

/* ---------- numbered steps ---------- */
.bomai ol.bm-steps{list-style:none;padding:0;margin:20px 0;counter-reset:bmstep;display:grid;gap:12px}
.bomai ol.bm-steps>li{counter-increment:bmstep;position:relative;padding:14px 16px 14px 60px;border:1px solid var(--line);border-radius:14px;background:#161b22;margin:0}
.bomai ol.bm-steps>li::before{content:counter(bmstep);position:absolute;left:15px;top:14px;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#e9c25c,#D4A017);color:#0d1117;font:800 14px/1 Inter,sans-serif;display:flex;align-items:center;justify-content:center}

/* ---------- cards & grid (index hub) ---------- */
.bomai .bm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px}
.bomai .bm-grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bomai .bm-card{border:1px solid var(--line);border-radius:18px;padding:24px;background:#161b22;position:relative;display:block;transition:transform .16s ease,border-color .16s,box-shadow .16s}
.bomai a.bm-card{transition:transform .16s ease,border-color .16s,box-shadow .16s}
.bomai a.bm-card:hover{transform:translateY(-3px);border-color:rgba(212,160,23,.5);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.bomai a.bm-card::after{content:"\2192";position:absolute;top:20px;right:20px;color:var(--gold);opacity:0;transform:translateX(-6px);transition:.16s;font-size:18px}
.bomai a.bm-card:hover::after{opacity:1;transform:none}
.bomai .bm-card>span:first-child{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:rgba(212,160,23,.15);color:var(--gold);font:700 13px/1 Inter,sans-serif;letter-spacing:1px;margin-bottom:12px}
.bomai .bm-card h2,.bomai .bm-card h3{margin:0 0 8px;color:var(--gold);font-size:18px;border:0;padding:0}
.bomai .bm-card p{margin:0;color:#9fb0bc;font-size:14px}

/* ---------- tables (markdown output has no wrap class) ---------- */
.bomai .bm-content table{display:block;width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:14px;border-collapse:separate;border-spacing:0;margin:20px 0;font-size:14.5px}
.bomai .bm-content th{background:rgba(212,160,23,.1);color:var(--gold);text-align:left;padding:13px 16px}
.bomai .bm-content th:first-child{border-top-left-radius:13px}
.bomai .bm-content th:last-child{border-top-right-radius:13px}
.bomai .bm-content td{padding:13px 16px;border-top:1px solid var(--line);text-align:left;vertical-align:top;color:#cfd9e1}
.bomai .bm-content tr:last-child td:first-child{border-bottom-left-radius:13px}
.bomai .bm-content tr:last-child td:last-child{border-bottom-right-radius:13px}

/* ---------- code & port form ---------- */
.bomai .bm-content pre{border:1px solid rgba(46,196,182,.25);background:#10151c;border-radius:14px;padding:18px}
.bomai .bm-content pre code{color:#7ee0d5}
.bomai .bm-url-form{background:#161b22;border-color:rgba(46,196,182,.3);border-radius:16px}
.bomai .bm-url-form output{color:var(--teal);font-family:ui-monospace,monospace}

/* ---------- pagination / footer ---------- */
.bomai .bm-pagination a:hover{border-color:rgba(212,160,23,.5)}
.bomai .bm-footer{color:#9fb0bc}

/* ---------- responsive ---------- */
@media(max-width:750px){
  .bomai .bm-content h2{font-size:21px;margin:36px 0 12px;padding-left:12px}
  .bomai .bm-content video{border-radius:12px}
  .bomai .bm-content video+p{font-size:13.5px}
  .bomai .bm-card{padding:18px}
  .bomai .bm-grid.g2{grid-template-columns:1fr}
  .bomai .notices{padding:14px 14px 14px 46px}
  .bomai .notices::before{left:12px}
}
@media(prefers-reduced-motion:reduce){
  .bomai *{transition:none!important;animation:none!important}
}