/* JCO content components — extracted from the legacy per-page stylesheets,
   chrome rules removed, page-specific rules scoped. Generated 2026-10-24. */

/* ---- blog article components (9 rules) ---- */
article.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:2.2rem;margin:0 0 2.6rem}
article.post h2{font-size:clamp(1.5rem,3.4vw,2rem);margin-bottom:1rem}
article.post p{color:var(--muted);margin:0 0 1.1rem}
article.post p strong, article.post li strong{color:var(--ink)}
article.post ul, article.post ol{color:var(--muted);margin:0 0 1.2rem;padding-left:1.4rem}
article.post li{margin-bottom:.55rem}
article.post .tip{border-left:3px solid var(--gold);padding:.6rem 1rem;background:rgba(199,155,67,.08);border-radius:0 var(--radius) var(--radius) 0;margin:1.4rem 0;color:var(--ink)}
article.post .share{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.85rem}
article.post .share a{margin-right:.9rem}

/* ---- book reader components (46 rules) ---- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--gold);color:#1d1503;padding:.6rem 1rem;z-index:100;border-radius:0 0 8px 0;font-weight:600}
.skip-link:focus{left:0}
.back-link{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--muted);font-size:.95rem;font-weight:500;border:1px solid var(--line);border-radius:999px;padding:.55rem 1.1rem;transition:border-color .15s,color .15s}
.back-link:hover{color:var(--gold-bright);border-color:var(--gold)}
.book-hero{padding:84px 0 60px;background:linear-gradient(180deg,var(--navy-deep),var(--navy));border-bottom:1px solid var(--line);text-align:center}
.book-hero .eyebrow{display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.1rem;color:var(--gold-bright);font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.book-hero h1{font-size:clamp(2.4rem,5vw,3.8rem);margin:0 0 .6rem;color:#fff}
.book-hero .sub{font-family:var(--font-head);font-style:italic;color:var(--gold-soft);font-size:clamp(1.05rem,2vw,1.35rem);max-width:640px;margin:0 auto 1rem}
.book-hero .byline{color:var(--muted);margin-bottom:1.4rem}
.book-hero .meta{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.6rem}
.pill{border:1px solid var(--gold);color:var(--gold-bright);border-radius:999px;padding:.35rem .9rem;font-size:.8rem;font-weight:600;letter-spacing:.06em}
.read-note{max-width:620px;margin:0 auto;color:var(--muted);font-size:.95rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.4rem}
.read-note strong{color:var(--gold-bright)}
.toc-section{padding:64px 0 20px}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:2rem 2.2rem;box-shadow:var(--shadow);columns:2;column-gap:3rem}
.toc h2{column-span:all;margin-top:0;font-size:1.6rem}
.toc ol{margin:0;padding-left:1.2rem;break-inside:avoid}
.toc li{margin:.45rem 0;color:var(--muted)}
.toc li.section-item{list-style:none;margin-left:-1.2rem;font-weight:600;color:var(--gold-soft)}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--gold-bright);text-decoration:underline}
@media(max-width:760px){
.toc{columns:1}
}
.book-section{padding:40px 0 80px}
.book-body{max-width:760px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.6rem,4vw,3.2rem);box-shadow:var(--shadow);
  user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
.book-body h2.chapter-title{font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--gold-bright);margin:3rem 0 1.2rem;padding-top:1rem;border-top:1px solid var(--line)}
.book-body h2.chapter-title:first-child{margin-top:0;padding-top:0;border-top:none}
.book-body h3{font-size:1.35rem;color:var(--gold-soft);margin:2.2rem 0 .8rem}
.book-body h4{font-size:1.15rem;color:var(--ink);margin:1.8rem 0 .6rem}
.book-body p{margin:0 0 1.1rem;color:#e9e2d2}
.book-body ul,.book-body ol{margin:0 0 1.2rem;padding-left:1.6rem;color:#e9e2d2}
.book-body li{margin:.4rem 0}
.book-body li::marker{color:var(--gold)}
.book-body .list-note{margin:-.6rem 0 1rem 1.6rem;color:var(--muted);font-size:.95rem}
.book-body blockquote{margin:1.6rem 0;padding:1rem 1.4rem;border-left:3px solid var(--gold);background:rgba(199,155,67,.08);border-radius:0 10px 10px 0}
.book-body blockquote p{margin:.4rem 0;color:var(--gold-bright)}
.book-body table{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:.92rem;display:block;overflow-x:auto}
.book-body th,.book-body td{text-align:left;padding:.65rem .9rem;border:1px solid var(--line)}
.book-body th{background:var(--surface-2);color:var(--gold-bright);font-weight:600;white-space:nowrap}
.book-body td{color:#e9e2d2}
.book-body tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.book-body pre{background:var(--navy-deep);border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.3rem;overflow-x:auto;margin:1.6rem 0}
.book-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;color:var(--gold-soft)}
.book-body pre code{color:#e9e2d2}
.book-body hr{border:none;border-top:1px solid var(--line);margin:2.4rem 0}
.book-body strong{color:#fff}
@media(max-width:640px){
.book-body{padding:1.4rem 1.1rem}
}

/* ---- assessment (scoped .assess) (63 rules) ---- */
.assess .hero{text-align:center;padding:3rem 0 2rem}
.assess .hero .badge{display:inline-block;background:rgba(199,155,67,.12);border:1px solid var(--gold);color:var(--gold-bright);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.45rem 1.1rem;border-radius:999px;margin-bottom:1.2rem}
.assess .hero h1{font-size:clamp(2.1rem,5vw,3rem);margin-bottom:.8rem}
.assess .hero h1 em{color:var(--gold-bright);font-style:italic}
.assess .hero p{color:var(--muted);max-width:620px;margin:0 auto 1rem}
.assess .hero .free-pill{display:inline-block;margin-top:.6rem;background:var(--gold);color:var(--navy);font-weight:800;padding:.55rem 1.6rem;border-radius:999px;font-size:1.05rem}
.assess .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;margin:0 0 1.8rem}
.assess .card h2{font-size:1.45rem;margin-bottom:1rem;color:var(--gold-bright)}
.assess .card p, .assess .card li{color:var(--muted)}
.assess .card ul{padding-left:1.3rem;margin:0 0 1rem}
.assess .card li{margin-bottom:.5rem}
.assess .topics{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:640px){
.assess .topics{grid-template-columns:1fr}
}
.assess .topic{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.2rem}
.assess .topic h3{font-size:1.02rem;color:var(--ink);margin-bottom:.4rem}
.assess .topic p{font-size:.88rem;margin:0;color:var(--muted-2)}
.assess .rules-list{list-style:none;padding:0;margin:0}
.assess .rules-list li{padding:.55rem 0 .55rem 2rem;position:relative;border-bottom:1px dashed var(--line);font-size:.95rem}
.assess .rules-list li:last-child{border-bottom:none}
.assess .rules-list li::before{content:"📌";position:absolute;left:0;top:.55rem}
.assess .btn{display:inline-block;background:var(--gold);color:var(--navy);font-weight:700;padding:.85rem 2rem;border-radius:999px;border:none;font-size:1rem;cursor:pointer;text-decoration:none;font-family:inherit;transition:transform .15s ease,background .15s ease}
.assess .btn:hover{background:var(--gold-bright);transform:translateY(-1px)}
.assess .btn:disabled{background:var(--muted-2);cursor:not-allowed;transform:none}
.assess .btn-big{font-size:1.15rem;padding:1rem 2.6rem}
.assess input[type=text]{padding:.85rem 1.1rem;border-radius:10px;border:1px solid var(--line);background:var(--navy);color:var(--ink);font-size:1.05rem;font-family:inherit;width:100%;max-width:420px}
.assess input[type=text]:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.assess label.lbl{display:block;font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:.5rem}
.assess #exam-shell{display:none}
.assess #exam-shell.no-select, .assess #exam-shell.no-select *{user-select:none;-webkit-user-select:none}
.assess .exam-topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:.8rem 1.2rem;margin-bottom:1.4rem;flex-wrap:wrap}
.assess .timer{font-size:1.25rem;font-weight:800;color:var(--gold-bright);font-variant-numeric:tabular-nums}
.assess .timer.danger{color:#ff7b6b;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}
.assess .progress-wrap{margin-bottom:1.6rem}
.assess .progress-label{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted-2);margin-bottom:.4rem}
.assess .progress{height:10px;background:var(--navy-deep);border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.assess .progress>div{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-bright));border-radius:999px;transition:width .3s ease}
.assess .q-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;margin-bottom:1.4rem}
.assess .q-num{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:.7rem}
.assess .q-text{font-size:1.2rem;font-weight:600;color:var(--ink);margin-bottom:1.4rem;line-height:1.5}
.assess .choice{display:block;width:100%;text-align:left;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:10px;padding:.95rem 1.15rem;margin-bottom:.7rem;color:var(--ink);font-size:.98rem;cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s}
.assess .choice:hover{border-color:var(--gold);background:rgba(199,155,67,.07)}
.assess .choice.selected{border-color:var(--gold-bright);background:rgba(199,155,67,.14);box-shadow:0 0 0 1px var(--gold-bright)}
.assess .choice .letter{display:inline-block;width:1.7rem;height:1.7rem;line-height:1.7rem;text-align:center;border-radius:50%;background:var(--surface-2);color:var(--gold-bright);font-weight:700;font-size:.82rem;margin-right:.7rem}
.assess .warn-box{display:none;background:rgba(192,57,43,.12);border:1px solid var(--red);border-radius:10px;padding:.9rem 1.2rem;margin-bottom:1.2rem;font-size:.92rem;color:#f0a49a}
.assess #result-shell{display:none;text-align:center}
.assess .score-big{font-size:4rem;font-weight:800;color:var(--gold-bright);line-height:1;margin:.6rem 0}
.assess .pass{color:var(--green)}
.assess .fail{color:#ff7b6b}
.assess #cert-shell{display:none}
.assess .certificate{background:linear-gradient(160deg,#f7f2e7,#efe3c8);color:#1d2b28;border:3px double var(--gold);border-radius:8px;padding:3rem 2.4rem;text-align:center;max-width:640px;margin:0 auto 1.6rem;position:relative}
.assess .certificate::before{content:"";position:absolute;inset:10px;border:1px solid var(--gold);border-radius:4px;pointer-events:none}
.assess .certificate .c-head{font-family:var(--font-head);font-size:.95rem;letter-spacing:.28em;text-transform:uppercase;color:#7a5c1e;margin-bottom:.4rem}
.assess .certificate .c-title{font-family:var(--font-head);font-size:2rem;color:#14332f;margin-bottom:.6rem}
.assess .certificate .c-name{font-family:var(--font-head);font-size:1.7rem;font-style:italic;color:#0d1514;border-bottom:2px solid var(--gold);display:inline-block;padding:0 2rem .3rem;margin:.6rem 0}
.assess .certificate .c-meta{font-size:.85rem;color:#5a5142;margin-top:1rem;line-height:1.8}
.assess .certificate .c-seal{font-size:2.6rem;margin-top:.8rem}
.assess .share-row{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.4rem}
.assess .share-btn{display:inline-block;padding:.6rem 1.3rem;border-radius:999px;font-size:.88rem;font-weight:700;text-decoration:none;border:1px solid var(--line);color:var(--ink);background:var(--surface)}
.assess .share-btn:hover{border-color:var(--gold);color:var(--gold-bright)}
.assess .tip{background:rgba(199,155,67,.08);border-left:3px solid var(--gold);padding:1rem 1.2rem;border-radius:0 var(--radius) var(--radius) 0;margin:1.6rem 0}
.assess .tip p{margin:0;color:var(--muted);font-size:.93rem}
.assess #cert-print-area{display:none}

/* ---- community board (scoped .board) (24 rules) ---- */
.board .hero{text-align:center;padding:2rem 0 3rem}
.board .hero h1{font-size:clamp(2rem,5vw,2.8rem);margin-bottom:.6rem}
.board .hero p{color:var(--muted);max-width:600px;margin:0 auto 1rem}
.board .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;margin:0 0 2rem}
.board .card h2{font-size:1.4rem;margin-bottom:1rem}
.board .card p{color:var(--muted);margin:0 0 1rem}
.board .listing{border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;margin:0 0 1.2rem;background:rgba(255,255,255,.02)}
.board .listing h3{font-size:1.15rem;margin-bottom:.4rem}
.board .listing .meta{font-size:.82rem;color:var(--gold-bright);margin-bottom:.6rem}
.board .listing p{color:var(--muted);font-size:.92rem;margin:0 0 .8rem}
.board .listing .contact{font-size:.88rem}
.board .empty{text-align:center;padding:3rem 1rem;color:var(--muted);border:2px dashed var(--line);border-radius:var(--radius);margin:0 0 2rem}
.board .empty p{margin:0 0 1rem}
.board form.bookkeeper-form{display:grid;gap:.9rem}
.board form.bookkeeper-form label{font-size:.85rem;font-weight:600;color:var(--muted)}
.board form.bookkeeper-form input, .board form.bookkeeper-form textarea, .board form.bookkeeper-form select{padding:.75rem .95rem;border-radius:10px;border:1px solid var(--line);background:var(--navy);color:var(--ink);font-size:1rem;font-family:inherit;width:100%}
.board form.bookkeeper-form textarea{min-height:100px;resize:vertical}
.board .btn{display:inline-block;background:var(--gold);color:var(--navy);font-weight:700;padding:.8rem 1.8rem;border-radius:999px;border:none;font-size:1rem;cursor:pointer;text-decoration:none;font-family:inherit}
.board .btn:hover{background:var(--gold-bright)}
.board .form-status{margin-top:.6rem;font-size:.9rem}
.board .safety{background:rgba(199,155,67,.08);border-left:3px solid var(--gold);padding:1rem 1.2rem;border-radius:0 var(--radius) var(--radius) 0;margin:2rem 0}
.board .safety h3{font-size:1.05rem;margin-bottom:.6rem}
.board .safety ul{color:var(--muted);font-size:.9rem;margin:0;padding-left:1.2rem}
.board .safety li{margin-bottom:.4rem}

/* ---- tutorials components (35 rules) ---- */
.tut-hero{padding:84px 0 30px}
.tut-hero h1{font-size:clamp(2.4rem,5vw,3.6rem);max-width:760px}
.tut-hero .lead{color:var(--muted);font-size:1.08rem;max-width:680px}
.tut-hero .honest{max-width:680px;padding:14px 18px;border-left:3px solid var(--gold);background:var(--surface);color:#d8d2c0;font-size:.92rem;margin:1.6rem 0 2rem}
.tut-ctas{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem}
.chapter{padding:56px 0 8px}
.chapter-head{margin-bottom:2rem}
.chapter-head h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.chapter-head p{color:var(--muted);max-width:640px;margin:0}
.embed-slot{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.embed-slot iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.embed-caption{color:var(--muted);font-size:.95rem;margin-top:.9rem}
.feature-ep{margin-bottom:1rem}
.feature-ep h3{font-size:1.5rem;margin-top:1.2rem}
.feature-ep p{color:var(--muted);max-width:680px}
.ep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.ep-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .15s ease,border-color .15s ease;display:flex;flex-direction:column}
.ep-card:hover{transform:translateY(-3px);border-color:rgba(199,155,67,.6)}
.ep-media{position:relative;aspect-ratio:16/9;background:linear-gradient(160deg,var(--surface-2),var(--navy-deep));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;color:var(--muted-2)}
.ep-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ep-media .play{font-size:1.9rem;color:var(--gold);line-height:1}
.ep-media .soon{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.ep-body{padding:1.1rem 1.2rem;display:flex;flex-direction:column;flex:1}
.ep-body .flag{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-bright)}
.ep-body h3{font-size:1.2rem;margin:.4rem 0}
.ep-body p{color:var(--muted);font-size:.9rem;margin:0 0 1rem;flex:1}
.status-pill{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-bright);background:rgba(199,155,67,.12);border:1px solid rgba(199,155,67,.35);padding:.25rem .7rem;border-radius:999px;margin-bottom:1rem}
.card-links{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;font-size:.9rem;font-weight:600}
.card-links a{text-decoration:none}
.card-links a:hover{text-decoration:underline}
.tut-note{background:var(--navy-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:960px){
.ep-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
.chapter{padding:44px 0 4px}
.tut-hero{padding:56px 0 16px}
}

/* ---- user guide (scoped .guide) (31 rules) ---- */
.guide h1, .guide h2, .guide h3, .guide h4{font-family:var(--font-head);font-weight:500;line-height:1.2;margin:0 0 .7rem}
.guide h4{font-size:1.05rem;color:var(--ink)}
.guide .hero{background:linear-gradient(160deg,#0d1f1c 0%,#091211 70%);padding:3.5rem 0 2.5rem;text-align:center;border-bottom:1px solid var(--line)}
.guide .hero .eyebrow{display:inline-block;color:var(--gold-bright);font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.8rem}
.guide .hero h1{font-size:2.4rem;margin-bottom:.5rem}
.guide .hero h1 .gold{color:var(--gold-bright)}
.guide .hero p{color:var(--muted);max-width:620px;margin:.6rem auto}
.guide .toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.75rem;margin:2rem 0;box-shadow:var(--shadow)}
.guide .toc h2{border:none;margin:0 0 .8rem;padding:0;font-size:1.2rem}
.guide .toc ol{margin:0;padding-left:1.3rem;columns:2;column-gap:2rem}
.guide .toc li{margin:.3rem 0;font-size:.92rem;break-inside:avoid}
.guide .toc a{text-decoration:none;color:var(--muted)}
.guide .toc a:hover{color:var(--gold-bright)}
@media(max-width:640px){
.guide .toc ol{columns:1}
}
.guide .step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem 1.4rem;margin:1rem 0}
.guide .step ol, .guide .step ul{margin:.5rem 0;padding-left:1.4rem}
.guide .step li{margin:.35rem 0}
.guide .tip{border-left:3px solid var(--gold);background:rgba(199,155,67,.08);padding:.8rem 1rem;border-radius:0 10px 10px 0;margin:1rem 0;font-size:.95rem}
.guide .tip strong{color:var(--gold-bright)}
.guide .warn{border-left:3px solid #d66;background:rgba(220,100,100,.08);padding:.8rem 1rem;border-radius:0 10px 10px 0;margin:1rem 0;font-size:.95rem}
.guide table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.92rem}
.guide th, .guide td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
.guide th{color:var(--gold-bright);font-weight:600;background:rgba(199,155,67,.06)}
.guide code{background:#0a0f0e;padding:.15rem .45rem;border-radius:6px;font-size:.88em;color:var(--gold-soft)}
.guide kbd{background:#0a0f0e;border:1px solid var(--line);border-radius:6px;padding:.1rem .5rem;font-size:.85em;font-family:inherit}
.guide .btn{display:inline-block;background:linear-gradient(135deg,var(--gold-bright),var(--gold));color:#1d1503;font-weight:700;text-decoration:none;padding:.7rem 1.4rem;border-radius:10px;margin:.5rem .3rem .5rem 0}
.guide .btn.ghost{background:transparent;color:var(--gold-bright);border:1px solid var(--gold)}
.guide .faq details{background:var(--surface);border:1px solid var(--line);border-radius:10px;margin:.6rem 0;padding:.9rem 1.1rem}
.guide .faq summary{cursor:pointer;font-weight:600;color:var(--gold-soft)}
.guide .faq summary:hover{color:var(--gold-bright)}
.guide .back-top{position:fixed;bottom:1.2rem;right:1.2rem;background:var(--gold);color:#1d1503;border:none;border-radius:50%;width:48px;height:48px;font-size:1.3rem;cursor:pointer;box-shadow:var(--shadow);display:none}

/* ---- tutorials theatre facades (Build 3) ---- */
.ep-facade{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;position:relative}
.ep-facade img{width:100%;height:100%;object-fit:cover;display:block}
.ep-facade .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--gold-bright);text-shadow:0 2px 14px rgba(0,0,0,.6)}
.ep-media iframe{width:100%;height:100%;border:0;display:block}
.status-pill{white-space:nowrap}