/* ===========================================================
   site.css — web reader chrome for boat-ev-manual (screen only)
   Layers on top of style.css. Print hides all chrome.
   =========================================================== */

:root{
    --nav-w:286px;
    --bg:#e9e9e9;
    --chrome:#161616;
    --chrome-2:#242424;
    --chrome-line:#2c2c2c;
    --accent-web:#0e7a6b;
    --txt-soft:#cfcfcf;
}

html{ scroll-behavior:smooth; }
body{ margin:0; }

/* ---------- top bar ---------- */
#topbar{
    position:fixed; top:0; left:0; right:0; height:54px; z-index:80;
    display:flex; align-items:center; gap:12px; padding:0 14px;
    background:var(--chrome); color:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,.25);
}
#topbar .tb-brand{ font-weight:800; font-size:15px; white-space:nowrap; }
#topbar .tb-brand small{ display:block; font-weight:400; font-size:10.5px; color:#9a9a9a; }
#topbar .tb-spacer{ flex:1; }
#topbar .tb-count{ font-size:13px; color:#bdbdbd; white-space:nowrap; }
#menuBtn{
    display:none; width:40px; height:40px; border:none; border-radius:10px;
    background:var(--chrome-2); color:#fff; font-size:19px; cursor:pointer; flex:none;
}
.tb-icon{
    width:40px; height:40px; border:none; border-radius:10px;
    background:var(--chrome-2); color:#fff; font-size:17px; cursor:pointer; flex:none;
    display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
}
.tb-icon:hover{ background:#333; }
/* labelled theme toggle (icon + "โทนหน้าจอ") */
.tb-theme{
    display:inline-flex; align-items:center; gap:7px; flex:none;
    height:40px; padding:0 13px; border:none; border-radius:10px;
    background:var(--chrome-2); color:#fff; cursor:pointer; font:inherit; font-size:13px; font-weight:600;
}
.tb-theme:hover{ background:#333; }
.tb-theme .ti{ display:inline-flex; }
.tb-theme .tl{ white-space:nowrap; }
@media (max-width:680px){ .tb-theme .tl{ display:none; } .tb-theme{ padding:0; width:40px; justify-content:center; } }

/* search */
#searchWrap{ position:relative; }
#search{
    width:190px; max-width:42vw; height:38px; border:none; border-radius:9px;
    background:var(--chrome-2); color:#fff; padding:0 12px; font:inherit; font-size:13.5px;
}
#search::placeholder{ color:#8f8f8f; }
#search:focus{ outline:2px solid var(--accent-web); background:#2b2b2b; }
#results{
    position:absolute; top:46px; right:0; width:340px; max-width:86vw;
    background:#fff; color:#111; border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.3);
    max-height:60vh; overflow:auto; display:none; z-index:90;
}
#results.show{ display:block; }
#results a{ display:block; padding:9px 13px; text-decoration:none; color:#111; border-bottom:1px solid #eee; font-size:13.5px; }
#results a:hover{ background:#f1f6f5; }
#results a b{ color:var(--accent-web); }
#results .none{ padding:12px 13px; color:#888; font-size:13px; }

/* ---------- progress bar under topbar ---------- */
#progbar{ position:fixed; top:54px; left:0; right:0; height:4px; background:#cdcdcd; z-index:79; }
#progbar > span{ display:block; height:100%; width:0; background:var(--accent-web); transition:width .3s; }

/* ---------- sidebar nav ---------- */
#nav{
    position:fixed; top:58px; left:0; width:var(--nav-w); bottom:0;
    overflow-y:auto; background:var(--chrome); color:#e8e8e8;
    padding:10px 0 40px; z-index:70;
}
#nav .sep{ height:1px; background:var(--chrome-line); margin:6px 14px 8px; }
#nav a{
    display:flex; gap:9px; align-items:flex-start; padding:9px 16px;
    color:var(--txt-soft); text-decoration:none; font-size:13.5px; line-height:1.4;
    border-left:3px solid transparent;
}
#nav a .num{
    flex:0 0 24px; height:22px; border-radius:6px; background:var(--chrome-2);
    color:#cfcfcf; font-weight:700; font-size:12.5px; text-align:center; line-height:22px;
}
#nav a .lbl{ flex:1; }
#nav a .chk{ flex:none; color:var(--accent-web); font-weight:800; opacity:0; }
#nav a.done .chk{ opacity:1; }
#nav a.done .num{ background:var(--accent-web); color:#fff; }
#nav a:hover{ background:var(--chrome-2); color:#fff; }
#nav a.active{ background:#2b2b2b; color:#fff; border-left-color:var(--accent-web); }
#nav a.active .num{ background:var(--accent-web); color:#fff; }
#nav .navfoot{ padding:12px 16px 0; }
#nav .navfoot a{ border-left:none; padding:8px 0; color:#9a9a9a; font-size:13px; }

#backdrop{ display:none; }

/* ---------- main column ---------- */
main{ margin-left:var(--nav-w); padding-top:58px; background:var(--bg); min-height:100vh; }
.wrap{ max-width:1000px; margin:0 auto; padding:6px 10px 60px; }

/* prev / next */
.pn{ display:flex; gap:10px; max-width:794px; margin:14px auto 0; }
.pn a, .pn span{
    flex:1; padding:13px 16px; border-radius:12px; text-decoration:none;
    background:#fff; color:#111; box-shadow:0 2px 10px rgba(0,0,0,.12);
    font-size:14px; font-weight:600;
}
.pn .nx{ text-align:right; }
.pn a small{ display:block; font-weight:400; font-size:11.5px; color:#888; }
.pn a:hover{ box-shadow:0 4px 16px rgba(0,0,0,.2); }
.pn .disabled{ opacity:.4; pointer-events:none; }

/* mark-done button */
.donebar{ max-width:794px; margin:14px auto 0; text-align:center; }
.btn{
    border:none; border-radius:10px; padding:11px 20px; font:inherit; font-weight:700;
    cursor:pointer; font-size:14px;
}
.btn-primary{ background:var(--accent-web); color:#fff; }
.btn-primary:hover{ background:#0b6357; }
.btn-ghost{ background:#fff; color:#111; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.btn.is-done{ background:#0b6357; }

/* ---------- interactive worksheet inputs ---------- */
input.ix, textarea.ix{
    font:inherit; font-size:13.5px; color:#0b3d36;
    background:#fffef6; border:none; border-bottom:1.6px solid #111;
    padding:2px 4px; width:100%; border-radius:0;
}
input.ix:focus, textarea.ix:focus{ outline:none; background:#fff7cf; border-bottom-color:var(--accent-web); }
.ix-fill{ display:inline-block; width:auto; min-width:64px; }
td input.ix{ border-bottom:none; min-height:24px; }
.res .cell input.ix{ border-bottom:1.6px solid #111; }
.print-ws{ margin:4px 0 0; }

/* ---------- quiz ---------- */
.quiz{
    max-width:794px; margin:16px auto 0; background:#fff; border-radius:14px;
    box-shadow:0 2px 12px rgba(0,0,0,.12); padding:16px 18px;
}
.quiz h2{ margin:0 0 4px; font-size:18px; color:#0b3d36; }
.quiz .lead{ margin:0 0 12px; font-size:13px; color:#777; }
.qitem{ border-top:1px solid #eee; padding:13px 0; }
.qitem:first-of-type{ border-top:none; }
.qitem .qq{ font-weight:700; margin:0 0 9px; font-size:14.5px; }
.qopt{
    display:block; width:100%; text-align:left; margin:6px 0; padding:10px 13px;
    border:1.6px solid #dcdcdc; border-radius:10px; background:#fafafa; cursor:pointer;
    font:inherit; font-size:14px; transition:.12s;
}
.qopt:hover{ border-color:#bbb; }
.qopt.correct{ border-color:#0e7a6b; background:#e6f5f1; }
.qopt.wrong{ border-color:#c0392b; background:#fbeae8; }
.qopt:disabled{ cursor:default; }
.qfb{ margin:8px 0 0; font-size:13px; padding:8px 12px; border-radius:8px; display:none; }
.qfb.show{ display:block; }
.qfb.ok{ background:#e6f5f1; color:#0b3d36; }
.qfb.no{ background:#fbeae8; color:#7a241b; }
.quiz .score{ margin-top:14px; font-weight:700; font-size:15px; color:#0b3d36; text-align:center; display:none; }
.quiz .score.show{ display:block; }

/* ---------- glossary tooltip ---------- */
.term{
    border-bottom:1.5px dotted var(--accent-web); cursor:help; position:relative;
}
.term:hover, .term:focus{ background:#e6f5f1; }
.term .tip-pop{
    position:absolute; left:0; bottom:130%; z-index:50;
    width:max-content; max-width:280px; background:#161616; color:#fff;
    padding:8px 11px; border-radius:9px; font-size:12.5px; line-height:1.5; font-weight:400;
    box-shadow:0 6px 20px rgba(0,0,0,.3); opacity:0; pointer-events:none; transition:.12s;
}
.term .tip-pop b{ color:#7fe0cf; }
.term:hover .tip-pop, .term:focus .tip-pop{ opacity:1; }

/* ---------- landing page ---------- */
.hero{
    max-width:1000px; margin:8px auto 0; padding:26px 22px;
    background:linear-gradient(135deg,#1b1b1b,#2a2a2a); color:#fff; border-radius:18px;
    display:flex; gap:22px; align-items:center; flex-wrap:wrap;
}
.hero img{ width:120px; height:120px; border-radius:16px; background:#fff; padding:6px; flex:none; }
.hero h1{ margin:0 0 6px; font-size:26px; font-weight:800; }
.hero p{ margin:0 0 14px; color:#cfcfcf; font-size:14px; max-width:560px; }
.hero .cta{ display:flex; gap:10px; flex-wrap:wrap; }
.grid{ max-width:1000px; margin:18px auto 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:13px; padding-bottom:50px; }
.card{
    display:block; text-decoration:none; color:#111; background:#fff; border-radius:14px;
    padding:15px 16px; box-shadow:0 2px 10px rgba(0,0,0,.1); position:relative; transition:.14s;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.16); }
.card .cnum{ font-size:12px; color:#888; font-weight:700; }
.card .ctitle{ font-size:15px; font-weight:700; margin:3px 0 0; line-height:1.35; }
.card .cdone{ position:absolute; top:12px; right:13px; color:var(--accent-web); font-weight:800; opacity:0; }
.card.done .cdone{ opacity:1; }
.card.done{ border-left:4px solid var(--accent-web); }

/* ---------- responsive ---------- */
@media (max-width:880px){
    #nav{ transform:translateX(-100%); transition:transform .25s ease; top:58px; }
    #nav.open{ transform:none; box-shadow:4px 0 22px rgba(0,0,0,.4); }
    main{ margin-left:0; }
    #menuBtn{ display:inline-flex; align-items:center; justify-content:center; }
    #backdrop.show{ display:block; position:fixed; inset:58px 0 0 0; background:rgba(0,0,0,.45); z-index:65; }
    #topbar .tb-brand small{ display:none; }
    #search{ width:120px; }
    /* mobile nav: emphasise number, allow label wrap small */
    #nav a .lbl{ font-size:13px; }
}
@media (max-width:520px){
    #topbar .tb-brand{ font-size:13px; }
    #search{ width:92px; }
}

/* ---------- make the A4 sheet fluid on small screens (screen only) ---------- */
@media screen and (max-width:840px){
    .sheet{ width:auto; min-height:0; margin:10px 0; padding:16px 14px; }
    .pn, .donebar, .quiz, .hero, .grid{ max-width:none; }
    .pn{ flex-direction:column; }
}
@media screen and (max-width:560px){
    .cols, .cols.cols3, .res, .res.res3{ grid-template-columns:1fr; }
    .hd-main h1{ font-size:18px; }
    .sheet{ padding:13px 11px; }
    table{ font-size:12.5px; }
    th, td{ padding:4px 6px; }
}

/* ---------- print: hide all chrome, show only the chapter sheets ---------- */
@media print{
    #topbar, #progbar, #nav, #backdrop, .pn, .donebar, .quiz, .print-ws, #results{ display:none !important; }
    main{ margin:0; padding:0; background:#fff; }
    .wrap{ max-width:none; margin:0; padding:0; }
    /* worksheet inputs print as underlines, not boxes */
    input.ix, textarea.ix{ background:transparent; border-bottom:1.4px solid #000; color:#000; }
    .term{ border-bottom:none; }
    .term .tip-pop{ display:none !important; }
}

/* ===========================================================
   DARK MODE  ( [data-theme="dark"] )
   keep .dia / images on white (B&W line art needs it)
   =========================================================== */
[data-theme="dark"]{ --bg:#15171a; }
[data-theme="dark"] body{ background:#0f1113; color:#e6e6e6; }
[data-theme="dark"] main{ background:#15171a; }
[data-theme="dark"] .sheet{ background:#1f2329; color:#e6e6e6; box-shadow:0 2px 14px rgba(0,0,0,.5); }
[data-theme="dark"] .sheet::after{ color:#7c7c7c; border-top-color:#3a3f47; }
[data-theme="dark"] .sheet::before{ opacity:.04; }

/* borders → visible on dark */
[data-theme="dark"] .sec, [data-theme="dark"] .ex, [data-theme="dark"] .overview,
[data-theme="dark"] .summary, [data-theme="dark"] .hd{ border-color:#3a3f47; }
[data-theme="dark"] th, [data-theme="dark"] td{ border-color:#3a3f47; }
[data-theme="dark"] tbody tr:nth-child(even){ background:#262b31; }
[data-theme="dark"] ul.kv li, [data-theme="dark"] .overview .row{ border-bottom-color:#3a3f47; }

/* emphasis text that was pure black → light */
[data-theme="dark"] .strong,
[data-theme="dark"] .formula b,
[data-theme="dark"] .res .cell label,
[data-theme="dark"] ul.kv li b,
[data-theme="dark"] .overview b,
[data-theme="dark"] .overview h2,
[data-theme="dark"] .summary h3{ color:#7fe0cf; }

/* callouts */
[data-theme="dark"] .tip{ background:#262b31; border-color:#4a5159; }
[data-theme="dark"] .warn{ background:#241f1f; border-color:#caa; }
[data-theme="dark"] .formula{ background:#262b31; border-color:#5b6068; }
[data-theme="dark"] .cap{ color:#9aa0a8; }

/* keep figures readable: white figure boxes + checklist boxes */
[data-theme="dark"] .dia{ background:#fff; border-color:#555; }
[data-theme="dark"] ul.chk li::before{ border-color:#cfcfcf; }
[data-theme="dark"] .lines .l, [data-theme="dark"] .summary .l,
[data-theme="dark"] .res .cell .blank{ border-bottom-color:#777; }

/* worksheet inputs on dark */
[data-theme="dark"] input.ix, [data-theme="dark"] textarea.ix{
    background:#2a2f36; color:#eafff9; border-bottom-color:#7fe0cf;
}
[data-theme="dark"] input.ix:focus, [data-theme="dark"] textarea.ix:focus{ background:#323841; }

/* cards / quiz / panels on dark */
[data-theme="dark"] .card, [data-theme="dark"] .quiz, [data-theme="dark"] .pn a, [data-theme="dark"] .pn span,
[data-theme="dark"] .btn-ghost{ background:#1f2329; color:#e6e6e6; box-shadow:0 2px 10px rgba(0,0,0,.5); }
[data-theme="dark"] .card .ctitle{ color:#e6e6e6; }
[data-theme="dark"] .quiz h2{ color:#7fe0cf; }
[data-theme="dark"] .qopt{ background:#262b31; border-color:#3a3f47; color:#e6e6e6; }
[data-theme="dark"] .qopt.correct{ background:#173b34; border-color:#0e7a6b; }
[data-theme="dark"] .qopt.wrong{ background:#3a201d; border-color:#c0392b; }
[data-theme="dark"] #results{ background:#1f2329; color:#e6e6e6; }
[data-theme="dark"] #results a{ color:#e6e6e6; border-bottom-color:#2c313800; }
[data-theme="dark"] #results a:hover{ background:#262b31; }