/*
 * Twenty Sixteen Child — Plugin bridge to mood/dark
 * -------------------------------------------------
 * make-library : สี chrome/ปุ่ม → var(--accent) + พื้นผิว dark
 * make-bb      : พื้น/ตัวอักษรฐาน → var; depth rainbow คงไว้ (สื่อความหมาย)
 * make-lazy-load: tree reader chrome → var; depth rainbow คงไว้
 * make-menu    : *** ไม่แตะ *** ใช้สีของปลั๊กจาก Settings (--make-mmenu-*)
 */

/* ============ make-library ============ */
/* bridge ตัวแปรปลั๊ก → ตามอารมณ์/โหมด */
html[data-theme] .make-lib-single,
html[data-theme] .make-lib-archive {
    --mlib-primary:       var(--accent);
    --mlib-primary-hover: var(--accent-hover);
    --mlib-text:          var(--fg);
    --mlib-muted:         var(--muted);
    --mlib-border:        var(--line);
    color: var(--fg);
}

/* พื้นผิว hardcode → ผูก surface/bg (สำคัญสำหรับ dark ไม่ให้แสบตา) */
html[data-theme] .make-lib-vol-card       { background: var(--surface); border-color: var(--line); }
html[data-theme] .make-lib-vol-body       { background: color-mix(in srgb, var(--surface) 88%, var(--fg) 6%); }
html[data-theme] .make-lib-cover-empty,
html[data-theme] .make-lib-tag            { background: color-mix(in srgb, var(--surface) 85%, var(--fg) 8%); color: var(--fg); }
html[data-theme] .make-lib-tag:hover      { background: color-mix(in srgb, var(--surface) 70%, var(--fg) 14%); }

/* ปุ่มอ่าน (outline) / ดาวน์โหลด (ทึบ) → accent */
html[data-theme] .make-lib-btn-read {
    background: var(--surface);
    color: var(--accent);
    border-color: var(--accent);
}
html[data-theme] .make-lib-btn-read:hover {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
html[data-theme] .make-lib-btn-download {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: var(--accent);
}
html[data-theme] .make-lib-btn-download:hover {
    background: var(--accent-hover);
    color: var(--accent-fg);
}

/* viewer popup — เป็นโรงหนัง (พื้นเข้ม) ปกติทุกโหมด: คงโทนเข้มไว้ */
/* (ไม่ override — chrome สีเทาเข้มอ่านง่ายทั้ง light/dark) */


/* ============ make-bb (เนื้อหา markup) — .mbb (หน้าเดี่ยว) + .t-tab-con (lazy) ============ */
/* ฐานพื้น/ตัวอักษร → var; depth rainbow .b1-.b5/.ts คงไว้ (สื่อความหมาย) */
html[data-theme] .mbb,
html[data-theme] .t-tab-con { color: var(--fg); }

/* .dd หัวข้อ (สีตามเนื้อ) · .te ท้าย (เทา→muted) · .el เลขวินเทจ (ดำ #070f18 → fg) */
html[data-theme] .mbb .dd,       html[data-theme] .t-tab-con .dd  { color: var(--fg); }
html[data-theme] .mbb .te,       html[data-theme] .t-tab-con .te  { color: var(--muted); }
html[data-theme] .mbb .el,       html[data-theme] .t-tab-con .el  { color: var(--fg); }

/* dark: ปิด text-shadow ที่ออกแบบมาสำหรับพื้นขาว (ไม่งั้นเป็นรัศมีเรืองบนพื้นมืด) */
html[data-theme="dark"] .mbb .dd,  html[data-theme="dark"] .t-tab-con .dd,
html[data-theme="dark"] .mbb .b1,  html[data-theme="dark"] .t-tab-con .b1,
html[data-theme="dark"] .mbb .b2,  html[data-theme="dark"] .t-tab-con .b2,
html[data-theme="dark"] .mbb .b3,  html[data-theme="dark"] .t-tab-con .b3,
html[data-theme="dark"] .mbb .b4,  html[data-theme="dark"] .t-tab-con .b4,
html[data-theme="dark"] .mbb .b5,  html[data-theme="dark"] .t-tab-con .b5,
html[data-theme="dark"] .mbb .te,  html[data-theme="dark"] .t-tab-con .te { text-shadow: none; }


/* ============ make-lazy-load (tree reader chrome) ============ */
html[data-theme] .t-block        { color: var(--fg); border-color: var(--line); background: var(--surface); }
html[data-theme] .t-tabs-wrapper { background-color: var(--surface); border-right-color: var(--line); }
html[data-theme] .t-tabs-wrapper::-webkit-scrollbar-track { background-color: var(--bg); }
html[data-theme] .t-tabs-wrapper::-webkit-scrollbar-thumb { background-color: var(--line); }

/* แท็บ */
html[data-theme] .t-tab {
    border-top-color: color-mix(in srgb, var(--surface) 60%, #fff);
    border-bottom-color: var(--line);
    border-left-color: var(--line);
    border-right-color: var(--line);
}
html[data-theme] .t-tab:hover  { background-color: color-mix(in srgb, var(--surface) 80%, var(--fg) 10%); }
html[data-theme] .t-tab.active {
    background-color: var(--bg);
    border-right: 6px solid var(--accent);   /* indicator ชมพู #B76E79 → ตาม accent */
}

/* พื้นที่เนื้อหา */
html[data-theme] .t-tab-con { background-color: var(--bg); }
html[data-theme] .t-tab-con .loading,
html[data-theme] .t-con-pane .loading { color: var(--muted); }

/* depth-0 (ดำ #333) → อ่านออกใน dark; depth-1..5 rainbow คงไว้ */
html[data-theme="dark"] .t-tab.depth-0 { color: var(--fg); }

/* resume banner → ผูก surface/accent (dark ไม่แสบตา) */
html[data-theme] .make-resume-banner {
    background-color: color-mix(in srgb, var(--surface) 82%, var(--accent) 18%);
    border-color: var(--accent);
    color: var(--fg);
}
html[data-theme] .make-resume-btn        { background-color: var(--accent); color: var(--accent-fg); }
html[data-theme] .make-resume-btn:hover  { background-color: var(--accent-hover); }
html[data-theme] .make-resume-close      { background: none; border: 0; color: var(--muted); }
html[data-theme] .make-resume-close:hover { background: none; color: var(--fg); }