/* ═══════════════════════════════════════════════════════════════════════
   วิเคราะห์ห้องเรียน — report_student2.php
   โรงเรียนเทศบาล ๑ กิตติขจร

   โหลดต่อจาก css/tb1-report-student.css (ชุดรายงาน: โทเคน หัวหน้า การ์ดตัวเลข แถบเครื่องมือ
   แผง ตัวกรอง ตาราง การเคลื่อนไหว คอนทราสต์สูง การพิมพ์) ไฟล์นี้เพิ่มเฉพาะชิ้นของหน้าวิเคราะห์
   ผังสองแกน ตัวชี้วัด ความเสี่ยง แผนดำเนินการ ตารางเรียงตามความห่างจากเกณฑ์

   ★ ทุก selector ขึ้นต้นด้วย ra- หรืออยู่ใต้ main.ra ไม่กระทบหน้าภาพรวม
   ★ สีไม่ใช่ตัวบอกเดียว: รูปทรงจุดบอกขนาดห้อง (กลมทึบ เพชร กลมกลวง) วงประบอกสัดส่วนเพศเอียง
     ระดับความเสี่ยงเขียนเป็นคำ ตัวชี้วัดบอก "ถึงเป้า" หรือ "ต่ำกว่าเป้า … จุด"
   ★ ไม่มี opacity:0 เป็นสถานะพัก จุดบนผังเห็นตลอด แค่ลอยขึ้นจากแกนล่างไปที่ตำแหน่งจริง
   ═══════════════════════════════════════════════════════════════════════ */

.ra {
    --ra-h: 360px;
}

/* ── การ์ดตัวเลขสี่หรือห้าใบ · ค่าที่เป็นคำ ─────────────────────────────── */
.rs-figs.is-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rs-fig-v.is-text b {
    font-size: clamp(1.6rem, 2.3vw, 2.05rem);
}

.rs-fig.is-crit .rs-fig-v b,
.rs-fig.is-crit .rs-fig-s {
    color: var(--rs-crit-fg);
}

.rs-fig.is-ok .rs-fig-v.is-text b {
    color: var(--rs-ok-fg);
}

/* ═══════════════════════════════════════════════════════════════════════
   ผังสองแกน
   ═══════════════════════════════════════════════════════════════════════ */

.ra-sc {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    column-gap: 8px;
    padding-top: 4px;
}

.ra-sc-yt {
    grid-column: 1 / -1;
    margin-bottom: 8px;
    font-size: .78rem;
    color: var(--rs-muted);
}

.ra .ra-sc-y {
    height: var(--ra-h);
}

.ra .ra-sc-y .rs-dn-yl {
    bottom: calc(var(--v) / var(--ra-max) * var(--ra-h));
}

.ra-sc-plot {
    position: relative;
    height: var(--ra-h);
    background: var(--rs-paper);
    border-left: 2px solid var(--rs-line-bold);
    border-bottom: 2px solid var(--rs-line-bold);
}

.ra-sc-plot:focus-visible {
    outline-offset: 4px;
}

.ra-sc-hl {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--v) / var(--ra-max) * 100%);
    border-top: 1px solid var(--rs-line);
}

.ra-sc-hl:first-child {
    border-top: 0;
}

.ra-sc-vl {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--x) * 1%);
    border-left: 1px dashed var(--rs-line);
}

/* แถบสมดุลเพศเต็มความสูง กับกรอบ "ผ่านทั้งสองเกณฑ์" ตรงกลาง */
.ra-sc-band {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--a) * 1%);
    width: calc((var(--b) - var(--a)) * 1%);
    background: color-mix(in srgb, var(--rs-ok) 7%, transparent);
    border-inline: 1px dashed color-mix(in srgb, var(--rs-ok) 45%, transparent);
}

.ra-sc-zone {
    position: absolute;
    left: calc(var(--a) * 1%);
    width: calc((var(--b) - var(--a)) * 1%);
    bottom: calc(var(--lo) / var(--ra-max) * 100%);
    height: calc((var(--hi) - var(--lo)) / var(--ra-max) * 100%);
    background: color-mix(in srgb, var(--rs-ok) 14%, transparent);
    border: 2px solid color-mix(in srgb, var(--rs-ok) 55%, transparent);
    border-radius: 6px;
    transform-origin: center;
}

.ra-sc-th {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: calc(var(--v) / var(--ra-max) * 100%);
    border-top: 2px dashed var(--rs-over);
    transform-origin: left center;
}

.ra-sc-th.is-low {
    border-top-color: var(--rs-low);
}

.ra .ra-sc-bandl {
    position: absolute;
    z-index: 3;
    bottom: 6px;
    left: calc(var(--x) * 1%);
    padding: 1px 9px;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--rs-ok-fg);
    white-space: nowrap;
    background: var(--rs-paper);
    border: 1px solid color-mix(in srgb, var(--rs-ok) 45%, transparent);
    border-radius: 999px;
    transform: translateX(-50%);
}

.ra-sc-dots,
.ra-sc-lbls {
    position: absolute;
    inset: 0;
}

/* จุดหนึ่งจุดคือหนึ่งห้อง พื้นที่แตะ 24px รูปทรงข้างในบอกขนาดห้อง */
.ra-dot {
    position: absolute;
    z-index: 4;
    left: calc(var(--x) * 1%);
    bottom: calc(var(--v) / var(--ra-max) * 100%);
    width: 24px;
    height: 24px;
    margin: 0 0 -12px -12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ra-dot i {
    width: 14px;
    height: 14px;
    background: var(--rs-brand);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--rs-paper);
    transition: transform .2s var(--rs-ease);
}

.ra-dot.is-over i {
    width: 13px;
    height: 13px;
    background: var(--rs-over);
    border-radius: 3px;
    transform: rotate(45deg);
}

.ra-dot.is-low i {
    background: var(--rs-paper);
    border: 3px solid var(--rs-low);
}

.ra-dot.is-na i {
    background: var(--rs-unknown);
}

/* สัดส่วนเพศเอียง: วงประรอบจุด */
.ra-dot.is-skew::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px dashed var(--rs-ink-2);
    border-radius: 50%;
}

.ra-dot:hover,
.ra-dot.is-tipped {
    z-index: 6;
}

.ra-dot:hover i,
.ra-dot.is-tipped i {
    transform: scale(1.35);
}

.ra-dot.is-over:hover i,
.ra-dot.is-over.is-tipped i {
    transform: rotate(45deg) scale(1.35);
}

.ra .ra-lbl {
    position: absolute;
    z-index: 3;
    left: calc(var(--x) * 1%);
    bottom: calc(var(--v) / var(--ra-max) * 100% + 13px + var(--lane) * 18px);
    padding: 0 4px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--rs-ink-2);
    white-space: nowrap;
    background: color-mix(in srgb, var(--rs-paper) 90%, transparent);
    border-radius: 4px;
    transform: translateX(-50%);
    pointer-events: none;
}

.ra .ra-lbl.is-over {
    color: var(--rs-over-fg);
}

.ra .ra-lbl.is-low {
    color: var(--rs-low-fg);
}

.ra .ra-lbl.is-start {
    transform: none;
}

.ra .ra-lbl.is-end {
    transform: translateX(-100%);
}

.ra-sc-x {
    grid-column: 2;
    position: relative;
    height: 24px;
}

.ra-sc-x span {
    position: absolute;
    top: 5px;
    left: calc(var(--x) * 1%);
    font-size: .76rem;
    color: var(--rs-muted);
    transform: translateX(-50%);
    font-variant-numeric: tabular-nums;
}

.ra-sc-x span:first-child {
    transform: none;
}

.ra-sc-x span:last-child {
    transform: translateX(-100%);
}

.ra-sc-xt {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 10px;
    font-size: .8rem;
    color: var(--rs-muted);
}

.ra-sc-xt b {
    font-weight: 600;
    color: var(--rs-ink-2);
}

/* สัญลักษณ์ในคำอธิบาย ชุดเดียวกับจุดบนผัง */
.ra-key {
    position: relative;
    display: inline-block;
    flex: none;
    width: 13px;
    height: 13px;
    margin-right: 6px;
    background: var(--rs-brand);
    border-radius: 50%;
}

.ra-key.is-over {
    width: 11px;
    height: 11px;
    margin: 0 8px 0 2px;
    background: var(--rs-over);
    border-radius: 2px;
    transform: rotate(45deg);
}

.ra-key.is-low {
    background: transparent;
    border: 3px solid var(--rs-low);
}

.ra-key.is-skew {
    width: 18px;
    height: 18px;
    background: transparent;
    border: 2px dashed var(--rs-ink-2);
}

.ra-key.is-zone {
    width: 22px;
    height: 13px;
    background: color-mix(in srgb, var(--rs-ok) 14%, transparent);
    border: 2px solid color-mix(in srgb, var(--rs-ok) 55%, transparent);
    border-radius: 3px;
}

.ra-legend {
    gap: 8px 22px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ตัวชี้วัด
   ═══════════════════════════════════════════════════════════════════════ */

.ra-kpis {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 18px);
}

.ra-kpi {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px 16px;
    background: var(--rs-paper);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-r);
    box-shadow: var(--rs-shadow);
}

.ra-kpi-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
}

.ra-kpi-n {
    font-family: var(--rs-serif);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--rs-ink);
}

.ra-kpi-v {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    color: var(--rs-muted);
}

.ra-kpi-v b {
    font-family: var(--rs-serif);
    font-size: clamp(1.9rem, 2.8vw, 2.4rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--rs-ink);
    font-variant-numeric: tabular-nums;
}

.ra-kpi-v small {
    font-size: 1rem;
}

.ra-kpi-d {
    margin-left: auto;
    font-size: .86rem;
    color: var(--rs-muted);
}

.ra-kpi-track {
    position: relative;
    height: 14px;
    margin: 4px 0 6px;
    background: var(--rs-paper-alt);
    border-radius: 999px;
}

.ra-kpi-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--p);
    background: var(--rs-over);
    border-radius: 999px;
    transform-origin: left center;
}

.ra-kpi.is-hit .ra-kpi-fill {
    background: var(--rs-ok);
}

/* ขีดเป้าหมาย ป้ายอยู่ใต้ขีดชิดซ้าย (เป้า 100% ป้ายจึงไม่ล้นขอบขวา) */
.ra-kpi-target {
    position: absolute;
    font-style: normal;
    top: -4px;
    bottom: -4px;
    left: var(--p);
    width: 3px;
    margin-left: -1.5px;
    background: var(--rs-ink);
    border-radius: 2px;
}

/* ป้ายเป้าหมายอยู่ใต้ขีด ชิดขวาของขีด (เป้า 100% จึงไม่ล้นขอบขวา) */
.ra-kpi-tl {
    position: relative;
    height: 1.2em;
    margin-top: -6px;
    font-size: .74rem;
    line-height: 1.2;
    color: var(--rs-muted);
}

.ra .ra-kpi-tl span {
    position: absolute;
    top: 0;
    right: calc(100% - var(--p));
    white-space: nowrap;
}

.ra-kpi-note {
    font-size: .84rem;
    line-height: 1.55;
    color: var(--rs-muted);
}

.ra-tag-gap {
    color: var(--rs-over-fg);
    background: var(--rs-over-bg);
    border-color: color-mix(in srgb, var(--rs-over) 50%, transparent);
}

.ra-tag-skew {
    color: var(--rs-ink-2);
    background: var(--rs-paper-alt);
    border-color: var(--rs-line-bold);
}

.ra-tag-na {
    color: var(--rs-muted);
    border: 1px dashed var(--rs-line-bold);
}

/* ═══════════════════════════════════════════════════════════════════════
   ความเสี่ยงและแผนดำเนินการ (บุคลากร)
   ═══════════════════════════════════════════════════════════════════════ */

.ra-overall {
    margin-top: 18px;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 18px;
    padding: 16px 20px;
    background: var(--rs-ok-bg);
    border: 1px solid color-mix(in srgb, var(--rs-ok) 45%, transparent);
    border-radius: var(--rs-r);
}

.ra-overall.is-mid {
    background: var(--rs-over-bg);
    border-color: color-mix(in srgb, var(--rs-over) 50%, transparent);
}

.ra-overall.is-high {
    background: var(--rs-crit-bg);
    border-color: color-mix(in srgb, var(--rs-crit) 45%, transparent);
}

.ra-overall-ic {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #047857, #059669);
    border-radius: 13px;
}

.ra-overall.is-mid .ra-overall-ic {
    background: linear-gradient(135deg, #b45309, #d97706);
}

.ra-overall.is-high .ra-overall-ic {
    background: linear-gradient(135deg, #b91c1c, #dc2626);
}

.ra-overall-k {
    display: block;
    font-size: .84rem;
    color: var(--rs-ink-2);
}

.ra-overall b {
    font-family: var(--rs-serif);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--rs-ok-fg);
}

.ra-overall.is-mid b {
    color: var(--rs-over-fg);
}

.ra-overall.is-high b {
    color: var(--rs-crit-fg);
}

.ra-overall-s {
    font-size: .88rem;
    line-height: 1.6;
    color: var(--rs-ink-2);
}

.ra-risks {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ra-risk {
    min-width: 0;
    padding: 14px 16px 14px 18px;
    background: var(--rs-paper);
    border: 1px solid var(--rs-line);
    border-left: 5px solid var(--rs-c, var(--rs-ok));
    border-radius: var(--rs-rs);
    box-shadow: var(--rs-shadow);
}

.ra-risk.is-high { --rs-c: var(--rs-crit); }
.ra-risk.is-mid { --rs-c: var(--rs-over); }

.ra-risk-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.ra-risk-t {
    font-family: var(--rs-serif);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--rs-ink);
}

.ra-lv {
    flex: none;
    padding: 1px 11px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--rs-ok-fg);
    background: var(--rs-ok-bg);
    border-radius: 999px;
}

.ra-lv.is-mid {
    color: var(--rs-over-fg);
    background: var(--rs-over-bg);
}

.ra-lv.is-high {
    color: var(--rs-crit-fg);
    background: var(--rs-crit-bg);
}

.ra-risk-d {
    margin-top: 6px;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--rs-ink-2);
}

.ra-risk-w {
    margin-top: 4px;
    font-size: .86rem;
    line-height: 1.6;
    color: var(--rs-muted);
}

.ra-plan {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ra-plan-col {
    min-width: 0;
    padding: 16px 20px 18px;
    background: var(--rs-paper);
    border: 1px solid var(--rs-line);
    border-top: 4px solid var(--rs-brand);
    border-radius: var(--rs-r);
    box-shadow: var(--rs-shadow);
}

.ra-plan-col.is-now {
    border-top-color: var(--rs-over);
}

.ra-plan-h {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-family: var(--rs-serif);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--rs-ink);
}

.ra-plan-h .rs-icon {
    color: var(--rs-brand);
}

.ra-plan-col.is-now .ra-plan-h .rs-icon {
    color: var(--rs-over-fg);
}

.ra .ra-plan-col ol {
    display: grid;
    gap: 8px;
    padding-left: 1.3rem;
    list-style: decimal;
    font-size: .92rem;
    line-height: 1.65;
    color: var(--rs-ink-2);
}

.ra-plan-col li::marker {
    font-weight: 700;
    color: var(--rs-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   ตารางห้องเรียงตามความห่างจากเกณฑ์
   ═══════════════════════════════════════════════════════════════════════ */

.ra-tbl {
    min-width: 54rem;
}

.ra-rank {
    width: 3.6rem;
    color: var(--rs-muted);
}

.ra-th-mix,
.ra-td-mix {
    width: 9rem;
}

.ra-issue {
    font-size: .86rem;
    line-height: 1.5;
}

.ra-tbl .rs-dash {
    font-size: .84rem;
}

.rs-tr.is-skew:not(.is-over):not(.is-low) > th {
    box-shadow: inset 4px 0 0 var(--rs-ink-2);
}

/* ═══════════════════════════════════════════════════════════════════════
   จอกลางและจอแคบ
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 979.98px) {
    .rs-figs.is-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .ra {
        --ra-h: 300px;
    }

    .ra-kpis,
    .ra-risks,
    .ra-plan {
        grid-template-columns: minmax(0, 1fr);
    }

    .ra-overall {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ra-overall-s {
        grid-column: 1 / -1;
    }

    .ra-th-mix,
    .ra-td-mix {
        display: none;
    }

    .ra-tbl {
        min-width: 40rem;
    }
}

@media (max-width: 640px) {
    .ra {
        --ra-h: 270px;
    }

    /* ป้ายชื่อห้องบนผังเบียดกันบนจอแคบ ชื่อทุกห้องอยู่ในทูลทิปและตารางด้านล่าง
       ป้าย "ช่วงสมดุล" ก็ทับจุดได้ คำอธิบายใต้ผังบอกไว้แล้ว */
    .ra-sc-lbls,
    .ra .ra-sc-bandl {
        display: none;
    }

    .ra-sc-xt b {
        order: -1;
        flex-basis: 100%;
        text-align: center;
    }

    .ra-sc {
        grid-template-columns: 2.2rem minmax(0, 1fr);
        column-gap: 4px;
    }

    .ra-kpi {
        padding: 16px 16px 14px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   การเคลื่อนไหว — ต่อจากกติกาของชุดรายงาน (rs-motion / is-in / rs-arming)
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
    /* จุดลอยขึ้นจากแกนล่างไปที่จำนวนนักเรียนจริง ทีละห้องตามชั้น ป้ายชื่อขึ้นตามไป */
    .ra-dot {
        transition: translate .85s var(--rs-ease) calc(.1s + var(--i, 0) * .024s);
    }

    .ra .ra-lbl {
        transition: translate .85s var(--rs-ease) .35s;
    }

    .rs.rs-motion .ra-map-panel:not(.is-in) :is(.ra-dot, .ra-lbl),
    .rs.rs-motion .ra-map-panel.is-regrow :is(.ra-dot, .ra-lbl) {
        translate: 0 calc(var(--v) / var(--ra-max) * var(--ra-h));
    }

    .ra-sc-th {
        transition: transform 1s var(--rs-ease) .7s;
    }

    .rs.rs-motion .ra-map-panel:not(.is-in) .ra-sc-th {
        transform: scaleX(0);
    }

    .ra-sc-zone {
        transition: transform .8s var(--rs-ease) .2s;
    }

    .rs.rs-motion .ra-map-panel:not(.is-in) .ra-sc-zone {
        transform: scale(.4);
    }

    .ra-kpi,
    .ra-risk {
        --rs-d: calc(var(--k, 0) * .07s);
    }

    .ra-kpi-fill {
        transition: transform 1s var(--rs-ease) calc(var(--rs-d, 0s) + .2s);
    }

    .rs.rs-motion [data-rs-reveal]:not(.is-in) .ra-kpi-fill {
        transform: scaleX(0);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   โหมดคอนทราสต์สูง
   ═══════════════════════════════════════════════════════════════════════ */

html.tb1-contrast-high .ra {
    --rs-ink-2: #ffffff;
}

html.tb1-contrast-high .ra-sc-plot,
html.tb1-contrast-high .ra-kpi,
html.tb1-contrast-high .ra-risk,
html.tb1-contrast-high .ra-plan-col,
html.tb1-contrast-high .ra-overall,
html.tb1-contrast-high .ra-overall-ic,
html.tb1-contrast-high .ra-lv,
html.tb1-contrast-high .ra-tag-gap,
html.tb1-contrast-high .ra-tag-skew,
html.tb1-contrast-high .ra-tag-na,
html.tb1-contrast-high .ra .ra-sc-bandl,
html.tb1-contrast-high .ra .ra-lbl {
    background: #000000;
    border-color: #ffffff;
    box-shadow: none;
}

html.tb1-contrast-high .ra-lv,
html.tb1-contrast-high .ra .ra-overall .ra-overall-ic {
    background: #000000;
    border: 1px solid #ffffff;
}

html.tb1-contrast-high .ra-lv.is-high,
html.tb1-contrast-high .ra-lv.is-mid,
html.tb1-contrast-high .ra-risk.is-high,
html.tb1-contrast-high .ra-risk.is-mid,
html.tb1-contrast-high .ra-overall.is-high,
html.tb1-contrast-high .ra-overall.is-mid {
    border-color: #facc15;
}

html.tb1-contrast-high .ra-sc-band {
    background: transparent;
    border-color: #ffffff;
}

html.tb1-contrast-high .ra-sc-zone,
html.tb1-contrast-high .ra-key.is-zone {
    background: transparent;
    border: 2px dashed #facc15;
}

html.tb1-contrast-high .ra-sc-hl,
html.tb1-contrast-high .ra-sc-vl {
    border-color: #555555;
}

html.tb1-contrast-high .ra-dot i,
html.tb1-contrast-high .ra-key {
    background: #ffffff;
}

html.tb1-contrast-high .ra-dot.is-over i,
html.tb1-contrast-high .ra-key.is-over {
    background: #facc15;
}

html.tb1-contrast-high .ra-dot.is-low i,
html.tb1-contrast-high .ra-key.is-low {
    background: #000000;
    border-color: #ffffff;
}

html.tb1-contrast-high .ra-dot.is-skew::before,
html.tb1-contrast-high .ra-key.is-skew {
    background: transparent;
    border-color: #ffffff;
}

html.tb1-contrast-high .ra-kpi-fill {
    background: #facc15;
}

html.tb1-contrast-high .ra-kpi.is-hit .ra-kpi-fill,
html.tb1-contrast-high .ra-kpi-target {
    background: #ffffff;
}

html.tb1-contrast-high .ra-kpi-track {
    background: #000000;
    box-shadow: inset 0 0 0 1px #ffffff;
}

html.tb1-contrast-high .ra .ra-plan-col ol,
html.tb1-contrast-high .ra-plan-col li::marker {
    color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════════
   พิมพ์ลงกระดาษ / บันทึก PDF
   ═══════════════════════════════════════════════════════════════════════ */

@media print {
    .ra {
        --ra-h: 250px;
    }

    .rs-figs.is-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .rs .ra-dot,
    .rs .ra-lbl {
        translate: none !important;
    }

    .rs .ra-sc-th,
    .rs .ra-sc-zone,
    .rs .ra-kpi-fill {
        transform: none !important;
    }

    .ra-dot i,
    .ra-key,
    .ra-sc-band,
    .ra-sc-zone,
    .ra-sc-th,
    .ra-kpi-track,
    .ra-kpi-fill,
    .ra-kpi-target,
    .ra-lv,
    .ra-overall,
    .ra-overall-ic,
    .ra-risk,
    .ra-plan-col {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .ra-kpis,
    .ra-risks,
    .ra-plan {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .ra-kpi,
    .ra-risk,
    .ra-plan-col,
    .ra-overall {
        box-shadow: none !important;
        break-inside: avoid;
    }

    .ra-kpi {
        padding: 10px 12px;
    }

    .ra-kpi-v b {
        font-size: 1.5rem;
    }

    .ra-tbl {
        min-width: 0;
    }

    .ra #ra-p-rooms {
        break-inside: auto;
    }

    /* แถวตารางเตี้ยลง ห้อง 31 แถวจึงไม่ล้นไปหน้าใหม่แค่ขอบแผง */
    .ra-tbl .rs-tag {
        padding: 0 6px;
        font-size: .7rem;
        line-height: 1.45;
    }

    .ra-tbl .rs-tag .rs-icon {
        width: 11px;
        height: 11px;
    }

    .ra-issue {
        font-size: .74rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ห้องนอกระบบ (7 ต.ค. 2569): เพชรกลวงสีบานเย็น ไม่ใช้เกณฑ์ขนาดห้อง
   ต่างจากห้องเกินเกณฑ์ซึ่งเป็นเพชรทึบสีเตือน · โทเคน --rs-nf อยู่ใน tb1-report-student.css
   ═══════════════════════════════════════════════════════════════════════ */

.ra-dot.is-nonformal i {
    width: 12px;
    height: 12px;
    background: var(--rs-paper);
    border: 3px solid var(--rs-nf);
    border-radius: 2px;
    transform: rotate(45deg);
}

.ra-key.is-nonformal {
    width: 10px;
    height: 10px;
    margin: 0 8px 0 2px;
    background: transparent;
    border: 2px solid var(--rs-nf);
    border-radius: 2px;
    transform: rotate(45deg);
}

html.tb1-contrast-high .ra-dot.is-nonformal i,
html.tb1-contrast-high .ra-key.is-nonformal {
    background: #000000;
    border-color: #ffffff;
}

.ra-dot.is-nonformal:hover i,
.ra-dot.is-nonformal.is-tipped i {
    transform: rotate(45deg) scale(1.35);
}

@media screen {
    .rs-student-report .ra-kpis,
    .rs-student-report .ra-risks,
    .rs-student-report .ra-plan { gap: 14px; align-items: stretch; }
    .rs-student-report .ra-kpi { padding: 14px; display: flex; flex-direction: column; }
    .rs-student-report .ra-kpi-note { margin-top: auto; padding-top: 10px; }
}