/* ═══════════════════════════════════════════════════════════════════════
   ClassroomSchedules.php — ตารางเรียนประจำห้องเรียน
   ใช้คู่กับ css/tb1-curriculum.css ซึ่งถือโทเคนและคอมโพเนนต์กระดาษไว้
   ═══════════════════════════════════════════════════════════════════════
   สีบอกประเภทคาบสี่กลุ่มเท่านั้น และใช้โทเคนชุดเดียวกับหน้าตารางสอนครู
   เพื่อให้สีหมายถึงสิ่งเดียวกันทั้งสองหน้า วันนี้ทำเครื่องหมายด้วยรูปทรง
   ไม่ใช่สี เพราะสีถูกใช้บอกประเภทคาบไปแล้ว
   ตารางวาดเป็น <table> ของช่วงเวลาจริง ไม่มีไลบรารีภายนอก ไม่มี JavaScript
   ═══════════════════════════════════════════════════════════════════════ */

html {
    scroll-padding-top: 4.5rem;   /* WCAG 2.4.11 กันโฟกัสไปหลบใต้แถบเมนู sticky */
}

.cs {
    --cl-subject: var(--cs-mark);
    --cl-home: var(--tb1-text-info, #0E7490);
    --cl-develop: var(--tb1-text-warning, #B45309);
    --cl-work: var(--cs-ink-3);
    --cl-tone: var(--cs-ink-3);
    --cl-lift: 0 12px 30px -22px rgba(15, 23, 42, .5);
    --cl-lift-s: 0 5px 16px -11px rgba(15, 23, 42, .38);
    --cl-edge: inset 0 1px 0 rgba(255, 255, 255, .6);
}

:is(html.dark, html.dark-mode, html[data-theme="dark"],
    body.dark-mode, body[data-theme="dark"]) .cs {
    --cl-lift: 0 16px 36px -24px rgba(0, 0, 0, .9);
    --cl-lift-s: 0 7px 20px -13px rgba(0, 0, 0, .75);
    --cl-edge: inset 0 1px 0 rgba(255, 255, 255, .055);
}

.cs .is-subject { --cl-tone: var(--cl-subject); }
.cs .is-home    { --cl-tone: var(--cl-home); }
.cs .is-develop { --cl-tone: var(--cl-develop); }
.cs .is-work    { --cl-tone: var(--cl-work); }

/* ── จังหวะเดียวตอนโหลด ชี้ไปที่ตัวเลขเดียวที่เป็นเรื่องผิดปกติจริง ──────
   ถ้าไม่มีห้องไหนขาดตาราง ชั้น cl-beat จะไม่ถูกพิมพ์ออกมาเลย จึงไม่มีจังหวะใด ๆ
   ใช้ box-shadow ไม่ใช่ transform เพราะเงาไม่กินพื้นที่และไม่ดันหน้าเลื่อน */
.cs .cl-beat b {
    border-radius: .4rem;
    animation: cl-beat 1.6s ease-out 1;
}

@keyframes cl-beat {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cs-short) 38%, transparent); }
    70%  { box-shadow: 0 0 0 .85rem transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── ชิปเลือกภาคเรียน ─────────────────────────────────────────────── */
.cl-picks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin: 1.1rem 0 0;
}

.cl-pick-label {
    font-size: .82rem;
    color: var(--cs-ink-3);
    margin-inline-end: .3rem;
}

.cs .cl-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: .32rem .95rem;
    border: 1px solid var(--cs-rule-bold);
    border-radius: 999px;
    background: var(--cs-paper);
    color: var(--cs-ink-2);
    font-size: .86rem;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: border-color .16s ease, color .16s ease;
}

.cs .cl-chip:hover { border-color: var(--cs-mark); color: var(--cs-mark); }
.cs .cl-chip:focus-visible { outline: 3px solid var(--cs-mark); outline-offset: 3px; }

.cs .cl-chip[aria-current="page"] {
    background: var(--cs-mark);
    border-color: var(--cs-mark);
    color: var(--cs-on-mark);
    font-weight: 600;
}

/* ── ผังห้องเรียนทั้งโรงเรียน ─────────────────────────────────────── */
.cl-scroll {
    overflow-x: auto;
    margin-top: .9rem;
}

.cl-map {
    width: 100%;
    min-width: 44rem;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.cl-map th,
.cl-map td {
    position: relative;          /* ให้ .sr-only ยึดกับช่อง ไม่ใช่กรอบทั้งหน้า */
    border: 1px solid var(--cs-rule);
    padding: 0;
    text-align: left;
}

.cl-map thead th {
    padding: .5rem .7rem;
    font-size: .78rem;
    font-weight: 500;
    color: var(--cs-ink-3);
    border-bottom-width: 2px;
    border-bottom-color: var(--cs-rule-bold);
    white-space: nowrap;
}

.cl-map tbody th {
    padding: .5rem .7rem;
    font-weight: 600;
    color: var(--cs-ink);
    white-space: nowrap;
    position: sticky;            /* ชื่อชั้นต้องอยู่กับที่เมื่อเลื่อนแนวนอน */
    left: 0;
    background: var(--cs-paper);
    z-index: 1;
}

.cl-map .cl-num { text-align: right; }

.cl-total {
    padding: .5rem .7rem;
    text-align: right;
    font-weight: 600;
    color: var(--cs-ink-2);
}

/* แถวที่มีห้องขาดตาราง ทำเครื่องหมายที่ขอบ ไม่ลงพื้นทั้งแถว */
.cl-map tbody tr.cl-row-short th { box-shadow: inset 3px 0 0 var(--cs-short); }

.cl-cell { vertical-align: top; }

.cl-cell.is-none {
    background: repeating-linear-gradient(135deg,
        transparent 0 5px, var(--cs-rule) 5px 6px);
}

.cs .cl-cell-link {
    display: grid;
    gap: .05rem;
    padding: .5rem .7rem;
    min-height: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .16s ease, background-color .16s ease;
}

.cs .cl-cell-link:hover { box-shadow: inset 0 0 0 2px var(--cs-mark); }
.cs .cl-cell-link:focus-visible { outline: 3px solid var(--cs-mark); outline-offset: -3px; }

.cl-cell-l { font-size: .74rem; color: var(--cs-ink-3); }

.cl-cell-v {
    font-family: var(--tb1-font-display, 'Noto Serif Thai', serif);
    font-weight: 600;
    font-size: 1.12rem;
    line-height: 1.25;
    color: var(--cs-ink);
}

.cl-cell-s { font-size: .72rem; color: var(--cs-ink-3); }

.cl-cell.is-empty { padding: .5rem .7rem; box-shadow: inset 3px 0 0 var(--cs-short); }
.cl-cell.is-empty .cl-cell-v {
    font-family: var(--tb1-font-body, 'Sarabun', sans-serif);
    font-size: .8rem;
    font-weight: 600;
    color: var(--cs-short);
}

/* ── การ์ดของแต่ละห้อง ────────────────────────────────────────────── */
.cl-room {
    margin-top: 1.1rem;
    padding: 1rem 1.1rem 1.1rem;
    background: var(--cs-paper);
    border: 1px solid var(--cs-rule);
    border-left: var(--cs-spine, 12px) solid var(--cs-mark);
    border-radius: var(--cs-radius, 14px);
    box-shadow: var(--cl-lift), var(--cl-edge);
    scroll-margin-top: 4.5rem;
}

.cl-room:focus-visible { outline: 3px solid var(--cs-mark); outline-offset: 3px; }

.cl-room-h {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .9rem;
}

.cl-room-t {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.4;
}

.cl-room-s {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .1rem 0;
    font-size: .82rem;
    color: var(--cs-ink-3);
    font-variant-numeric: tabular-nums;
}

.cl-room-s span { padding: 0 .7rem; border-left: 2px solid var(--cs-rule); }
.cl-room-s span:first-child { padding-left: 0; border-left: 0; }

.cs .cl-one {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    font-size: .8rem;
    color: var(--cs-mark);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .16s ease;
}

.cs .cl-one:hover { color: var(--cs-ink); }
.cs .cl-one:focus-visible { outline: 3px solid var(--cs-mark); outline-offset: 3px; }

.cl-none {
    margin: .8rem 0 0;
    padding: .6rem .85rem;
    border-left: 3px solid var(--cs-short);
    background: var(--cs-paper-alt);
    border-radius: .5rem;
    font-size: .88rem;
    color: var(--cs-ink-2);
}


/* ── ครูที่ปรึกษาและครูผู้สอนของห้อง ──────────────────────────────────
   รูปเป็นข้อมูล ไม่ใช่การตกแต่ง ผู้ปกครองใช้จำหน้าครูที่สอนลูกตัวเอง
   ทุกรูปมี alt เป็นชื่อครู และโหลดแบบ lazy เพราะหน้ารวมมีรูปหลายร้อยรูป */
.cl-people {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .7rem 1.4rem;
    margin-top: .85rem;
    padding-top: .8rem;
    border-top: 1px solid var(--cs-rule);
}

.cl-face {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    object-fit: cover;
    object-position: center top;
    background: var(--cs-paper-alt);
    border: 1px solid var(--cs-rule-bold);
    flex: none;
}

.cl-face.is-big {
    width: 3.5rem;
    height: 3.5rem;
    border-width: 2px;
    border-color: var(--cs-mark);
}

.cl-adv {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-inline-end: 1.2rem;
    border-inline-end: 1px solid var(--cs-rule);
}

.cl-adv-t { display: grid; gap: .1rem; }
.cl-adv-k { font-size: .74rem; color: var(--cs-ink-3); }
.cl-adv-t b { font-size: .95rem; color: var(--cs-ink); }

.cl-who-wrap { flex: 1 1 22rem; min-width: 0; }

.cl-who-k {
    margin: 0 0 .45rem;
    font-size: .74rem;
    color: var(--cs-ink-3);
}

.cl-who-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .9rem;
}

.cl-who-list li {
    display: flex;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
}

.cl-who-n {
    font-size: .8rem;
    color: var(--cs-ink-2);
    overflow-wrap: anywhere;
}

.cl-who-p {
    font-size: .72rem;
    color: var(--cs-ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── ตารางเรียนรายสัปดาห์ ─────────────────────────────────────────── */
.cl-week {
    width: 100%;
    min-width: 52rem;
    border-collapse: collapse;
    table-layout: fixed;
}

.cl-week th,
.cl-week td {
    position: relative;
    border: 1px solid var(--cs-rule);
    padding: .4rem .5rem;
    vertical-align: top;
    text-align: left;
}

.cl-week thead th {
    font-weight: 500;
    border-bottom-width: 2px;
    border-bottom-color: var(--cs-rule-bold);
    white-space: nowrap;
}

.cl-week .cl-day-h { width: 6.4rem; }

.cl-p {
    display: block;
    font-size: .74rem;
    color: var(--cs-ink-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cl-t {
    display: block;
    font-size: .68rem;
    color: var(--cs-ink-3);
    font-variant-numeric: tabular-nums;
}

.cl-week .cl-break-h { background: var(--cs-paper-alt); }

.cl-week tbody th {
    position: sticky;            /* ชื่อวันต้องอยู่กับที่เมื่อเลื่อนแนวนอน */
    left: 0;
    background: var(--cs-paper);
    z-index: 1;
    width: 6.4rem;
    font-weight: 600;
    color: var(--cs-ink);
    white-space: nowrap;
}

/* วันนี้ แยกด้วยรูปทรงและตัวอักษร ไม่ใช่สี */
.cl-week tbody tr.is-today th { box-shadow: inset 4px 0 0 var(--cs-ink); }

.cl-today {
    display: block;
    margin-top: .1rem;
    font-size: .68rem;
    font-weight: 500;
    color: var(--cs-ink-3);
}

.cl-c {
    box-shadow: inset 3px 0 0 var(--cl-tone);
    transition: box-shadow .16s ease;
}

.cl-c:hover { box-shadow: inset 6px 0 0 var(--cl-tone); }

.cl-c.is-break {
    background: var(--cs-paper-alt);
    box-shadow: none;
}

.cl-c.is-free {
    background: repeating-linear-gradient(135deg,
        transparent 0 5px, var(--cs-rule) 5px 6px);
    box-shadow: none;
}

/* ช่องที่มีมากกว่าหนึ่งรายการ ทำเครื่องหมายที่ขอบบนและมีข้อความกำกับ
   ไม่ลงพื้นทั้งช่อง เพราะพื้นช่องยังต้องให้ตัวอักษรอ่านออกเหมือนช่องอื่น */
.cl-c.is-clash {
    box-shadow: inset 3px 0 0 var(--cl-tone), inset 0 3px 0 var(--cs-short);
}

.cl-c.is-clash:hover {
    box-shadow: inset 6px 0 0 var(--cl-tone), inset 0 3px 0 var(--cs-short);
}

.cl-clash {
    display: block;
    margin-bottom: .18rem;
    font-size: .66rem;
    font-weight: 600;
    color: var(--cs-short);
}

/* หนึ่งรายการคือหนึ่งวิชา ครูหลายท่านในวิชาเดียวกันอยู่ใต้หัวข้อเดียว
   เส้นประขั้นจึงหมายถึง "คนละวิชาในเวลาเดียวกัน" อย่างเดียว */
.cl-item {
    display: block;
    position: relative;
}

.cl-item.is-more {
    margin-top: .25rem;
    padding-top: .25rem;
    border-top: 1px dashed var(--cs-rule-bold);
}

.cl-n {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--cl-tone);
    overflow-wrap: anywhere;
}

/* พื้นที่กดต้องสูงพอตามเกณฑ์ 24 พิกเซล จึงเติม padding แล้วหัก margin กลับเท่ากัน
   ความสูงของแถวในตารางจึงไม่ขยับ แต่เป้าที่นิ้วแตะได้ใหญ่ขึ้นจริง
   เส้นใต้ใช้ text-decoration ไม่ใช่ border เพราะ border จะถูก padding ดันลงไปลอยห่างตัวอักษร */
a.cl-n {
    padding-block: .2rem;
    margin-block: -.2rem;
    text-decoration: underline dotted;
    text-underline-offset: .16em;
    text-decoration-thickness: 1px;
    transition: background-color .16s ease;
}

a.cl-n:hover,
a.cl-n:focus-visible {
    text-decoration-style: solid;
    background: var(--cs-paper-alt);
}

.cl-code {
    display: block;
    font-size: .7rem;
    color: var(--cs-ink-3);
    font-variant-numeric: tabular-nums;
}

.cl-who {
    display: block;
    position: relative;
    font-size: .74rem;
    color: var(--cs-ink-2);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.cl-teach {
    color: inherit;
    padding-block: .32rem;
    text-decoration: underline dotted;
    text-underline-offset: .16em;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--cs-rule-bold);
    transition: color .16s ease;
}

.cl-teach:hover,
.cl-teach:focus-visible {
    color: var(--cs-ink);
    text-decoration-style: solid;
    text-decoration-color: currentColor;
}

/* ── ป้ายรายละเอียดย่อ ────────────────────────────────────────────────
   เปิดด้วย :hover และ :focus จึงใช้ได้ทั้งเมาส์และแป้นพิมพ์ ไม่ต้องมีสคริปต์
   ซ่อนด้วย display:none ไม่ใช่ opacity เพราะถ้ายังกินที่ ตารางจะมีแถบเลื่อน
   ค้างอยู่ตลอดเวลาแม้ยังไม่มีใครชี้ */
.cl-pop {
    display: none;
    position: absolute;
    z-index: 4;
    inset-block-start: calc(100% + 3px);
    inset-inline-start: 0;
    width: max-content;
    max-width: 15rem;
    padding: .45rem .6rem .5rem;
    gap: .1rem;
    background: var(--cs-paper);
    border: 1px solid var(--cs-rule-bold);
    border-radius: .4rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .18);
    font-size: .72rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--cs-ink-2);
    text-align: start;
    white-space: normal;
}

/* ★ เปิดป้ายเฉพาะจอที่มีตัวชี้จริงและกว้างพอ
   บนมือถือไม่มีการ "ชี้" การแตะจึงกลายเป็นต้องแตะสองครั้งกว่าจะเข้าลิงก์
   และตารางบนจอแคบเลื่อนแนวนอนอยู่แล้ว ป้ายที่ลอยทับจะถูกตัดขอบจนอ่านไม่จบ
   จอแคบจึงแตะชื่อวิชาแล้วเข้าหน้ารายละเอียดตรง ๆ ซึ่งเร็วกว่าและไม่มีอะไรถูกบัง */
@media (hover: hover) and (pointer: fine) and (min-width: 48rem) {
    .cl-n:hover + .cl-pop,
    .cl-n:focus + .cl-pop,
    .cl-teach:hover + .cl-pop,
    .cl-teach:focus + .cl-pop { display: grid; }
}

/* หัวป้ายของครู รูปคู่กับชื่อ ป้ายลอยห่างจากตัวที่ชี้ ถ้ามีแต่รูปจะไม่รู้ว่ารูปใคร */
.cl-pop-face {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .3rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--cs-rule);
}

.cl-pop-img {
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--cs-rule-bold);
    background: var(--cs-paper-alt);
}

.cl-pop-name {
    font-size: .76rem;
    font-weight: 600;
    color: var(--cs-ink);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.cl-pop-r {
    display: grid;
    grid-template-columns: 4.6rem 1fr;
    gap: .35rem;
}

.cl-pop-k { color: var(--cs-ink-3); }

.cl-pop-v {
    color: var(--cs-ink);
    overflow-wrap: anywhere;
}

.cl-pop-go {
    margin-top: .3rem;
    padding-top: .3rem;
    border-top: 1px solid var(--cs-rule);
    font-size: .68rem;
    color: var(--cs-ink-3);
}

/* ช่องที่กำลังถูกชี้ต้องอยู่เหนือช่องที่วาดทีหลัง ไม่งั้นป้ายจะถูกทับ */
.cl-c:hover,
.cl-c:focus-within { z-index: 30; }

/* สองแถวท้ายเปิดป้ายขึ้นบน สามคอลัมน์ท้ายเปิดไปทางซ้าย
   เพื่อให้ป้ายอยู่ในกรอบตารางเสมอ ตารางจะได้ไม่มีแถบเลื่อนโผล่ตอนชี้ */
.cl-week tbody tr:nth-last-child(-n+2) .cl-pop {
    inset-block-start: auto;
    inset-block-end: calc(100% + 3px);
}

.cl-week td:nth-last-child(-n+3) .cl-pop {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

/* ── คำอธิบายสัญลักษณ์ ───────────────────────────────────────────── */
.cl-key {
    display: inline-block;
    width: .95rem;
    height: .95rem;
    border-radius: .22rem;
    vertical-align: -.14rem;
    border: 1px solid var(--cs-rule-bold);
}

.cl-key.is-subject { background: var(--cl-subject); border-color: var(--cl-subject); }
.cl-key.is-home    { background: var(--cl-home);    border-color: var(--cl-home); }
.cl-key.is-develop { background: var(--cl-develop); border-color: var(--cl-develop); }
.cl-key.is-work    { background: var(--cl-work);    border-color: var(--cl-work); }

.cl-key.is-free {
    background: repeating-linear-gradient(135deg,
        transparent 0 4px, var(--cs-rule-bold) 4px 5px);
}

.cl-key.is-today {
    background: var(--cs-paper);
    box-shadow: inset 4px 0 0 var(--cs-ink);
}

.cl-key.is-clash {
    background: var(--cs-paper);
    box-shadow: inset 0 3px 0 var(--cs-short);
}

/* ── จอแคบ ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .cl-room { padding: .85rem .9rem 1rem; }
    .cl-adv { padding-inline-end: 0; border-inline-end: 0; }
    .cl-who-wrap { flex-basis: 100%; }
    .cl-room-s span:nth-child(1) { padding-left: 0; border-left: 0; }
    .cs .cl-one { margin-inline-start: 0; }
}

/* ── ลดการเคลื่อนไหว ปลายทางของสถานะยังต้องเปลี่ยน ───────────────── */
@media (prefers-reduced-motion: reduce) {
    .cs .cl-beat b,
    .cs .cl-chip,
    .cs .cl-cell-link,
    .cs .cl-one,
    .cl-c,
    a.cl-n,
    .cl-teach {
        animation: none !important;
        transition: none !important;
    }
    .cl-c:hover { box-shadow: inset 6px 0 0 var(--cl-tone); }
    .cs .cl-cell-link:hover { box-shadow: inset 0 0 0 2px var(--cs-mark); }
}

/* ── โหมดคอนทราสต์สูง ────────────────────────────────────────────────
   เหลือแค่ดำ ขาว เหลือง สีจึงบอกประเภทคาบไม่ได้อีก
   ต้องแยกด้วยรูปทรงของสันซ้าย และชื่อประเภทที่เป็นตัวอักษรอยู่แล้วในทุกช่อง */
html.tb1-contrast-high .cl-room,
html.tb1-contrast-high .cl-none,
html.tb1-contrast-high .cl-map tbody th,
html.tb1-contrast-high .cl-week tbody th,
html.tb1-contrast-high .cl-week .cl-break-h,
html.tb1-contrast-high .cl-c.is-break {
    background: #000 !important;
    box-shadow: none;
}

html.tb1-contrast-high .cl-room { border-color: #ffff00 !important; }
html.tb1-contrast-high .cl-face { border-color: #ffff00 !important; background: #000 !important; }
html.tb1-contrast-high .cl-adv { border-inline-end-color: #ffff00 !important; }
html.tb1-contrast-high .cl-people { border-top-color: #ffff00 !important; }
html.tb1-contrast-high .cl-adv-t b { color: #ffff00 !important; }
html.tb1-contrast-high .cl-adv-k,
html.tb1-contrast-high .cl-who-k,
html.tb1-contrast-high .cl-who-n,
html.tb1-contrast-high .cl-who-p { color: #ffffff !important; }

html.tb1-contrast-high .cl-map th,
html.tb1-contrast-high .cl-map td,
html.tb1-contrast-high .cl-week th,
html.tb1-contrast-high .cl-week td {
    border-color: #ffff00 !important;
}

html.tb1-contrast-high .cl-cell-v,
html.tb1-contrast-high .cl-n,
html.tb1-contrast-high caption,
html.tb1-contrast-high .cl-room-t { color: #ffff00 !important; }

/* ป้ายรายละเอียด ต้องทึบเต็มพื้นดำ ไม่งั้นตัวอักษรของช่องข้างใต้จะทะลุขึ้นมา */
html.tb1-contrast-high .cl-pop {
    background: #000 !important;
    border-color: #ffff00 !important;
    box-shadow: 0 0 0 2px #000 !important;
}

html.tb1-contrast-high .cl-pop-k,
html.tb1-contrast-high .cl-pop-v,
html.tb1-contrast-high .cl-pop-go { color: #ffffff !important; }

html.tb1-contrast-high .cl-pop-name { color: #ffff00 !important; }

html.tb1-contrast-high .cl-pop-img {
    border-color: #ffff00 !important;
    background: #000 !important;
}

html.tb1-contrast-high .cl-pop-face,
html.tb1-contrast-high .cl-pop-go { border-color: #ffff00 !important; }
html.tb1-contrast-high a.cl-n,
html.tb1-contrast-high .cl-teach { text-decoration-color: #ffff00 !important; }

/* โหมดนี้มีแค่ดำ ขาว เหลือง พื้นอ่อนตอนชี้จึงกลายเป็นเหลืองบนเหลือง
   ย้ำสถานะด้วยเส้นใต้ทึบแทน พื้นยังดำเหมือนเดิม */
html.tb1-contrast-high a.cl-n:hover,
html.tb1-contrast-high a.cl-n:focus-visible {
    background: #000 !important;
    text-decoration-style: solid !important;
    text-decoration-thickness: 2px !important;
}

html.tb1-contrast-high .cl-teach:hover,
html.tb1-contrast-high .cl-teach:focus-visible {
    text-decoration-style: solid !important;
    text-decoration-thickness: 2px !important;
}

html.tb1-contrast-high .cl-p,
html.tb1-contrast-high .cl-t,
html.tb1-contrast-high .cl-who,
html.tb1-contrast-high .cl-code,
html.tb1-contrast-high .cl-today,
html.tb1-contrast-high .cl-cell-l,
html.tb1-contrast-high .cl-cell-s,
html.tb1-contrast-high .cl-pick-label,
html.tb1-contrast-high .cl-room-s span { color: #ffffff !important; }

html.tb1-contrast-high .cs .cl-chip,
html.tb1-contrast-high .cs .cl-cell-link,
html.tb1-contrast-high .cs .cl-one {
    background: #000 !important;
    color: #ffff00 !important;
    border-color: #ffff00 !important;
}

html.tb1-contrast-high .cs .cl-chip[aria-current="page"] {
    background: #ffff00 !important;
    color: #000000 !important;
}

/* รูปทรงของสันซ้ายคือสิ่งที่แยกสี่กลุ่มเมื่อเหลือแค่ดำเหลือง */
html.tb1-contrast-high .cl-c { box-shadow: inset 4px 0 0 #ffff00; border-left-style: solid; }
html.tb1-contrast-high .cl-c.is-subject { border-left: 4px solid #ffff00; box-shadow: none; }
html.tb1-contrast-high .cl-c.is-home    { border-left: 4px dotted #ffff00; box-shadow: none; }
html.tb1-contrast-high .cl-c.is-develop { border-left: 4px double #ffff00; box-shadow: none; }
html.tb1-contrast-high .cl-c.is-work    { border-left: 4px dashed #ffff00; box-shadow: none; }
html.tb1-contrast-high .cl-c.is-clash { border-top: 3px solid #ffff00; }
html.tb1-contrast-high .cl-clash { color: #ffff00 !important; }
html.tb1-contrast-high .cl-item.is-more { border-top-color: #ffff00 !important; }
html.tb1-contrast-high .cl-key.is-clash { background: #000 !important; border-top: 3px solid #ffff00; }
html.tb1-contrast-high .cl-c.is-free,
html.tb1-contrast-high .cl-c.is-break   { border-left: 1px solid #ffff00; box-shadow: none; }
html.tb1-contrast-high .cl-week tbody tr.is-today th { box-shadow: inset 5px 0 0 #ffff00; }
html.tb1-contrast-high .cl-map tbody tr.cl-row-short th { box-shadow: inset 4px 0 0 #ffff00; }

html.tb1-contrast-high .cl-key.is-subject { background: #ffff00 !important; }
html.tb1-contrast-high .cl-key.is-home,
html.tb1-contrast-high .cl-key.is-develop,
html.tb1-contrast-high .cl-key.is-work {
    background: #000 !important;
    border-color: #ffff00 !important;
}
html.tb1-contrast-high .cl-key.is-home    { border-style: dotted; }
html.tb1-contrast-high .cl-key.is-develop { border-style: double; }
html.tb1-contrast-high .cl-key.is-work    { border-style: dashed; }
html.tb1-contrast-high .cl-key.is-today   { background: #000 !important; box-shadow: inset 5px 0 0 #ffff00; }

/* ── พิมพ์ลงกระดาษ ───────────────────────────────────────────────── */
@media print {
    .cl-picks,
    .cl-pop,
    .cs .cl-one { display: none !important; }

    /* บนกระดาษไม่มีอะไรให้กด เส้นใต้ประของลิงก์จึงเป็นแค่ขยะสายตา */
    a.cl-n,
    .cl-teach {
        text-decoration: none !important;
        padding-block: 0 !important;
        margin-block: 0 !important;
        color: inherit;
    }
    a.cl-n { color: #000 !important; }

    .cl-room {
        box-shadow: none !important;
        background: #fff !important;
        border-left-width: 4px;
        break-inside: avoid;
        margin-top: .6rem;
    }

    .cl-scroll { overflow: visible; }
    .cl-week,
    .cl-map { min-width: 0; font-size: .7rem; }
    .cl-week th, .cl-week td { padding: .22rem .3rem; }

    .cl-c,
    .cl-c.is-clash,
    .cl-c.is-break,
    .cl-c.is-free,
    .cl-key,
    .cl-map tbody tr.cl-row-short th,
    .cl-week tbody tr.is-today th {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* สันซ้ายต้องยังแยกสี่กลุ่มได้บนกระดาษขาวดำ จึงใช้รูปทรงเหมือนโหมดคอนทราสต์สูง */
    .cl-c.is-subject { border-left: 3px solid #000 !important; box-shadow: none !important; }
    .cl-c.is-home    { border-left: 3px dotted #000 !important; box-shadow: none !important; }
    .cl-c.is-develop { border-left: 3px double #000 !important; box-shadow: none !important; }
    .cl-c.is-work    { border-left: 3px dashed #000 !important; box-shadow: none !important; }
    .cl-c.is-clash { border-top: 2px solid #000 !important; }
    .cl-key.is-clash { background: #fff !important; border-top: 3px solid #000 !important; }
    .cl-key.is-subject { background: #000 !important; }
    .cl-key.is-home    { background: #fff !important; border: 2px dotted #000 !important; }
    .cl-key.is-develop { background: #fff !important; border: 2px double #000 !important; }
    .cl-key.is-work    { background: #fff !important; border: 2px dashed #000 !important; }

    .cl-map tbody th,
    .cl-week tbody th { position: static; }
    /* ความสูงของรูปที่ตั้งไว้สำหรับหน้าจอ ต้องเขียนทับในบล็อกพิมพ์ด้วย */
    .cl-face { width: 1.6rem; height: 1.6rem; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .cl-face.is-big { width: 2.2rem; height: 2.2rem; }
    .cl-people { break-inside: avoid; }
    .cs .cl-beat b { animation: none !important; }
}