/* ═══════════════════════════════════════════════════════════════════════
   หน้าวิเคราะห์สาธารณะ — TeacherWorkloadAnalytics.php และ HomeroomAdvisorAnalytics.php
   โรงเรียนเทศบาล ๑ กิตติขจร (4 ต.ค. 2569)

   ภาษาภาพเดียวกับ css/tb1-personal-report.css และ css/tb1-school-profile.css
   หัวแถบน้ำเงินไล่เฉด การ์ดตัวเลขลอยทับขอบล่าง แถบเครื่องมือติดใต้เมนู แผงมีแถบหัว

   ★ โทเคนทุกตัวเป็น alias ที่ชี้ไป --tb1-* โหมดมืดจึงพลิกให้เอง
   ★ สีสี่กลุ่มคาบชุดเดียวกับ css/tb1-teacher-schedules.css (สอนรายวิชา ประจำชั้น พัฒนาผู้เรียน งานที่ไม่มีนักเรียน)
     สีไม่ใช่ตัวบอกเดียว ทุกแถบมีคำอธิบายสัญลักษณ์และตัวเลขกำกับ
   ★ สีส้มสงวนไว้สำหรับ "ควรพิจารณา" สีแดงสำหรับ "ควรแก้ก่อน" ซึ่งมีเฉพาะในมุมมองบุคลากร
   ★ ไม่มี opacity:0 เป็นสถานะพัก ที่ขยับได้มีแค่ตำแหน่งกับความยาวแถบ
   ★ ธีมกลางบังคับ font-family ของ span div li p a ด้วย !important ตัวเลขเซริฟจึงใช้ <b>
   ★ ทุก selector ขึ้นต้นด้วย ax- ไม่ชนกับหน้าอื่นหรือไฟล์กลาง
   ═══════════════════════════════════════════════════════════════════════ */

.ax {
    --ax-ink: var(--tb1-ink-1, #0f172a);
    --ax-ink-2: var(--tb1-ink-2, #334155);
    --ax-muted: var(--tb1-ink-3, #5a697f);
    --ax-paper: var(--tb1-surface, #ffffff);
    --ax-paper-alt: var(--tb1-surface-alt, #f1f5f9);
    --ax-line: var(--tb1-border, #e2e8f0);
    --ax-line-bold: var(--tb1-border-bold, #cbd5e1);
    --ax-brand: var(--tb1-brand, #1d4ed8);
    --ax-brand-soft: color-mix(in srgb, var(--tb1-brand, #1d4ed8) 10%, var(--tb1-surface, #ffffff));
    --ax-brand-line: color-mix(in srgb, var(--tb1-brand, #1d4ed8) 35%, var(--tb1-border, #e2e8f0));
    --ax-page-max: var(--tb1-page-max-width, 1440px);
    --ax-gutter: var(--tb1-shell-gutter, 20px);
    --ax-ease: cubic-bezier(.4, 0, .2, 1);
    --ax-r: 16px;
    --ax-rs: 12px;
    --ax-serif: var(--tb1-font-display, 'Noto Sans Thai Looped', sans-serif);
    --ax-sans: var(--tb1-font-body, 'Sarabun', sans-serif);
    --ax-shadow: 0 14px 32px -24px rgba(15, 23, 42, .55), inset 0 1px 0 rgba(255, 255, 255, .6);
    --ax-shadow-float: 0 22px 44px -26px rgba(15, 23, 42, .6), inset 0 1px 0 rgba(255, 255, 255, .6);
    --ax-hero-a: color-mix(in srgb, var(--tb1-banner-1, #1d4ed8) 60%, var(--tb1-ink-surface, #0f172a));
    --ax-hero-b: var(--tb1-banner-1, #1d4ed8);
    --ax-hero-c: color-mix(in srgb, var(--tb1-banner-1, #1d4ed8) 78%, var(--tb1-accent-strong, #0284c7));

    --ax-neutral: color-mix(in srgb, var(--tb1-ink-3, #5a697f) 80%, var(--tb1-surface, #ffffff));
    --ax-warn: var(--tb1-warning, #f59e0b);
    --ax-warn-fg: #9a4508;
    --ax-warn-bg: color-mix(in srgb, var(--tb1-warning, #f59e0b) 14%, var(--tb1-surface, #ffffff));
    --ax-crit: var(--tb1-danger, #ef4444);
    --ax-crit-fg: #b91c1c;
    --ax-ok: var(--tb1-success, #10b981);
    --ax-ok-fg: var(--tb1-text-success, #047857);
    --ax-info: var(--tb1-info, #0ea5e9);
    --ax-info-fg: var(--tb1-text-info, #0e7490);

    /* สี่กลุ่มคาบ (ชุดเดียวกับหน้าตารางสอนครู) */
    --ax-g-subject: var(--tb1-brand, #1d4ed8);
    --ax-g-home: var(--tb1-text-info, #0e7490);
    --ax-g-develop: #9a4508;
    --ax-g-work: var(--tb1-ink-3, #5a697f);

    /* ผังความเข้ม: สีเดียวไล่ความเข้ม เพดาน 43% ตัวเลขในช่องใช้หมึกเดียวได้ทุกระดับ */
    --ax-hm-0: var(--tb1-surface, #ffffff);
    --ax-hm-1: color-mix(in srgb, var(--ax-brand) 6%, var(--ax-paper));
    --ax-hm-2: color-mix(in srgb, var(--ax-brand) 12%, var(--ax-paper));
    --ax-hm-3: color-mix(in srgb, var(--ax-brand) 19%, var(--ax-paper));
    --ax-hm-4: color-mix(in srgb, var(--ax-brand) 27%, var(--ax-paper));
    --ax-hm-5: color-mix(in srgb, var(--ax-brand) 35%, var(--ax-paper));
    --ax-hm-6: color-mix(in srgb, var(--ax-brand) 43%, var(--ax-paper));
}

:is(html.dark, html.dark-mode, html[data-theme="dark"],
    body.dark-mode, body[data-theme="dark"]) .ax {
    --ax-brand-soft: color-mix(in srgb, var(--tb1-brand, #60a5fa) 16%, var(--tb1-surface, #111c31));
    --ax-shadow: 0 14px 32px -22px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .055);
    --ax-shadow-float: 0 22px 44px -24px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .055);
    --ax-neutral: color-mix(in srgb, var(--tb1-ink-3, #94a3b8) 72%, var(--tb1-surface, #111c31));
    --ax-warn-fg: var(--tb1-text-warning, #fbbf24);
    --ax-crit-fg: var(--tb1-text-danger, #fda4af);
    --ax-g-develop: var(--tb1-text-warning, #fbbf24);
    color-scheme: dark;
}

/* โหมดมืดสีแบรนด์เป็นฟ้าอ่อน ตัวอักษรบนพื้นแบรนด์จึงต้องเป็นสีเข้ม */
:is(html.dark, html.dark-mode, html[data-theme="dark"],
    body.dark-mode, body[data-theme="dark"]) .ax :is(.ax-chip[aria-pressed="true"], .ax-nav-a[aria-current="location"]) {
    color: #0b1324;
}

/* ── เปลือกหน้า ───────────────────────────────────────────────────────── */
body.ax-page {
    margin: 0;
    background: var(--tb1-page, #f8fafc);
    color: var(--tb1-ink-2, #334155);
}

html:has(body.ax-page) {
    scroll-padding-top: var(--ax-stick, 8.5rem);
}

main.ax {
    padding: 0 var(--ax-gutter) clamp(40px, 5vw, 72px);
    color: var(--ax-ink-2);
}

main.ax:focus {
    outline: none;
}

.ax-wrap {
    max-width: calc(var(--ax-page-max) - 2 * var(--ax-gutter));
    margin-inline: auto;
}

.ax :where(h1, h2, h3, h4, p, ul, ol, dl, dd, dt, figure) {
    margin: 0;
}

.ax :where(ul, ol) {
    padding: 0;
    list-style: none;
}

.ax *,
.ax *::before,
.ax *::after {
    box-sizing: border-box;
}

.ax [hidden] {
    display: none !important;
}

.ax-icon {
    display: block;
    flex: 0 0 auto;
}

.ax .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ax :focus-visible {
    outline: 2px solid var(--ax-brand);
    outline-offset: 2px;
}

.ax-skip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

body.ax-page a.ax-skip:focus {
    width: auto;
    height: auto;
    clip: auto;
    padding: 12px 18px;
    color: #ffffff;
    background: var(--tb1-banner-1, #1d4ed8);
    border-radius: 0 0 10px 0;
    text-decoration: underline;
}

html.tb1-contrast-high body.ax-page a.ax-skip:focus {
    color: #facc15;
    background: #000000;
    outline: 3px solid #facc15;
}

/* ═══════════════════════════════════════════════════════════════════════
   หัวหน้า
   ═══════════════════════════════════════════════════════════════════════ */

.ax-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-inline: calc(-1 * var(--ax-gutter));
    padding: clamp(34px, 5vw, 58px) var(--ax-gutter) clamp(92px, 9vw, 120px);
    color: #ffffff;
    text-align: center;
    background-color: var(--ax-hero-b);
    background-image: linear-gradient(135deg, var(--ax-hero-a) 0%, var(--ax-hero-b) 52%, var(--ax-hero-c) 100%);
}

.ax-hero.is-plain {
    padding-bottom: clamp(34px, 5vw, 58px);
}

/* ★ 30 ต.ค. 2569: ตัวเลขอยู่ในหัวหน้าแล้ว ไม่มีการ์ดลอยทับขอบล่าง จึงไม่ต้องเว้นท้ายหัวหน้า (หน้าที่ปรับให้กระชับมีกฎของตัวเองด้านล่าง) */
.ax-hero.has-figs {
    padding-bottom: clamp(34px, 5vw, 58px);
}

.ax-hero::before,
.ax-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.ax-hero::before {
    background-image:
        radial-gradient(circle at 18% 40%, rgba(255, 255, 255, .09) 0%, transparent 48%),
        radial-gradient(circle at 84% 18%, rgba(255, 255, 255, .07) 0%, transparent 40%);
}

.ax-hero::after {
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(180deg, #000000 35%, transparent);
    mask-image: linear-gradient(180deg, #000000 35%, transparent);
}

.ax-hero-in {
    max-width: 60rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ax-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: .88rem;
    font-weight: 500;
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.ax-hero-title {
    margin-top: 16px;
    font-family: var(--ax-serif);
    font-size: clamp(1.9rem, 4.6vw, 2.9rem);
    font-weight: 600;
    line-height: 1.25;
    color: #ffffff;
    text-wrap: balance;
}

.ax-hero-sub {
    margin-top: 10px;
    max-width: 48rem;
    text-wrap: balance;
    font-size: clamp(.98rem, 1.5vw, 1.08rem);
    line-height: 1.75;
    color: #e0e7ff;
}

.ax-hero-date {
    margin-top: 4px;
    font-size: .92rem;
    color: #e0e7ff;
}

/* ═══════════════════════════════════════════════════════════════════════
   การ์ดตัวเลข ลอยทับขอบล่างของหัวหน้า
   ═══════════════════════════════════════════════════════════════════════ */

.ax-figs {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * clamp(66px, 7vw, 86px));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(10px, 1.2vw, 16px);
}

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

.ax-figs > li {
    min-width: 0;
    display: flex;
}

.ax .ax-fig {
    position: relative;
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 18px 16px 16px;
    color: var(--ax-muted);
    text-decoration: none;
    background: var(--ax-paper);
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-r);
    box-shadow: var(--ax-shadow-float);
    transition: border-color .25s var(--ax-ease), box-shadow .25s var(--ax-ease);
}

.ax a.ax-fig:hover {
    border-color: var(--ax-brand-line);
    box-shadow: 0 26px 48px -26px rgba(15, 23, 42, .7), inset 0 1px 0 rgba(255, 255, 255, .6);
}

.ax-fig::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tb1-banner-1, #1d4ed8), var(--tb1-accent, #0ea5e9));
}

.ax-fig.is-warn::before {
    background: var(--ax-warn);
}

.ax-fig-k {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: .88rem;
    line-height: 1.45;
    color: var(--ax-muted);
}

.ax-fig-ic {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--tb1-banner-1, #1d4ed8), var(--tb1-accent-strong, #0284c7));
    border-radius: 11px;
}

.ax-fig.is-warn .ax-fig-ic {
    background: linear-gradient(135deg, #9a4508, #c2410c);
}

.ax-fig-v {
    margin-top: 2px;
    color: var(--ax-muted);
    font-size: .95rem;
}

.ax-fig-v b {
    font-family: var(--ax-serif);
    font-size: clamp(1.55rem, 2.2vw, 2.05rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--ax-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ax-fig.is-warn .ax-fig-v b {
    color: var(--ax-warn-fg);
}

.ax-fig-s {
    font-size: .86rem;
    line-height: 1.5;
    color: var(--ax-muted);
    overflow-wrap: anywhere;
}

.ax-fig.is-warn .ax-fig-s {
    color: var(--ax-warn-fg);
    font-weight: 600;
}

.ax-fig-lock {
    display: inline-flex;
    vertical-align: -2px;
    margin-left: 4px;
    color: #6d28d9;
}

/* ── กล่องแจ้ง ────────────────────────────────────────────────────────── */
.ax-callout {
    margin-top: clamp(22px, 3vw, 32px);
    padding: 18px 22px;
    color: var(--ax-ink-2);
    background: var(--ax-paper);
    border: 1px solid var(--ax-line);
    border-left: 5px solid var(--ax-brand);
    border-radius: var(--ax-rs);
    box-shadow: var(--ax-shadow);
    line-height: 1.7;
}

.ax-callout.is-warn {
    background: var(--ax-warn-bg);
    border-color: var(--ax-warn);
}

.ax-callout-title {
    font-family: var(--ax-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ax-ink);
}

.ax-callout p + p {
    margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   บุคคลทั่วไป / บุคลากร
   ═══════════════════════════════════════════════════════════════════════ */

.ax-lock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px 2px 8px;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.5;
    color: #6d28d9;
    background: color-mix(in srgb, #7c3aed 9%, var(--ax-paper));
    border: 1px solid color-mix(in srgb, #7c3aed 35%, var(--ax-paper));
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
}

:is(html.dark, html.dark-mode, html[data-theme="dark"],
    body.dark-mode, body[data-theme="dark"]) .ax :is(.ax-lock, .ax-fig-lock, .ax-audience-ic) {
    color: #c4b5fd;
}

.ax-audience {
    margin-top: clamp(18px, 2.4vw, 26px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 16px;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--ax-ink-2);
    background: color-mix(in srgb, #7c3aed 6%, var(--ax-paper));
    border: 1px solid color-mix(in srgb, #7c3aed 28%, var(--ax-line));
    border-radius: var(--ax-rs);
}

.ax-audience.is-preview {
    background: var(--ax-brand-soft);
    border-color: var(--ax-brand-line);
}

.ax-audience p {
    flex: 1 1 18rem;
    min-width: 0;
}

.ax-audience b {
    color: var(--ax-ink);
}

.ax-audience-ic {
    width: 34px;
    height: 34px;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    color: #6d28d9;
    background: var(--ax-paper);
    border-radius: 10px;
}

.ax-audience.is-preview .ax-audience-ic {
    color: var(--ax-brand);
}

/* ═══════════════════════════════════════════════════════════════════════
   แถบเครื่องมือ ติดใต้แถบเมนูตอนเลื่อน
   ═══════════════════════════════════════════════════════════════════════ */

.ax-tools {
    position: sticky;
    top: var(--ax-nav-h, 57px);
    z-index: 20;
    margin-top: clamp(22px, 3vw, 34px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--ax-paper) 92%, transparent);
    border: 1px solid var(--ax-line);
    border-radius: 999px;
    box-shadow: var(--ax-shadow);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.ax-nav {
    min-width: 0;
    flex: 1 1 auto;
}

.ax-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ax .ax-nav-a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 14px;
    font-size: .92rem;
    font-weight: 500;
    color: var(--ax-ink-2);
    text-decoration: none;
    border-radius: 999px;
    white-space: nowrap;
    transition: background-color .2s var(--ax-ease), color .2s var(--ax-ease);
}

.ax .ax-nav-a:hover {
    color: var(--ax-brand);
    background: var(--ax-brand-soft);
}

.ax .ax-nav-a[aria-current="location"] {
    color: #ffffff;
    background: var(--ax-brand);
}

.ax-nav-n {
    min-width: 22px;
    padding: 0 7px;
    font-size: .8rem;
    line-height: 20px;
    text-align: center;
    color: #ffffff;
    background: #9a4508;
    border-radius: 999px;
}

.ax-tools-act {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.ax-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 16px;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ax-ink-2);
    text-decoration: none;
    background: var(--ax-paper);
    border: 1px solid var(--ax-line-bold);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .2s, color .2s, background-color .2s;
}

.ax-btn:hover {
    color: var(--ax-brand);
    border-color: var(--ax-brand);
}

.ax-term {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    color: var(--ax-muted);
}

.ax-select {
    min-height: 36px;
    padding: 4px 30px 4px 12px;
    font: inherit;
    font-size: .9rem;
    color: var(--ax-ink);
    background: var(--ax-paper);
    border: 1px solid var(--ax-line-bold);
    border-radius: 999px;
}

/* สคริปต์เปลี่ยนภาคเรียนทันทีที่เลือก ปุ่ม "เปิด" มีไว้ให้หน้าที่ไม่มีสคริปต์ */
.ax-js .ax-term-go {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   หมวดและแผง
   ═══════════════════════════════════════════════════════════════════════ */

.ax-sec {
    margin-top: clamp(34px, 4.4vw, 56px);
}

.ax-sec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ax-line);
}

.ax-sec-title {
    position: relative;
    padding-left: 16px;
    font-family: var(--ax-serif);
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--ax-ink);
    text-wrap: balance;
}

.ax-sec-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: .2em;
    bottom: .2em;
    width: 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--tb1-banner-1, #1d4ed8), var(--tb1-accent, #0ea5e9));
}

.ax-sec-count {
    padding: 3px 12px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ax-brand);
    background: var(--ax-brand-soft);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.ax-sec-note {
    margin-top: 12px;
    max-width: 90ch;
    font-size: .92rem;
    line-height: 1.65;
    color: var(--ax-muted);
}

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

.ax-panel {
    min-width: 0;
    background: var(--ax-paper);
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-r);
    box-shadow: var(--ax-shadow);
    overflow: hidden;
}

.ax-sec > .ax-panel,
.ax-sec > div > .ax-panel {
    margin-top: 18px;
}

.ax-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ax-line);
    background: linear-gradient(180deg, var(--ax-paper-alt), var(--ax-paper));
}

.ax-panel-ic {
    width: 34px;
    height: 34px;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    color: var(--ax-brand);
    background: var(--ax-brand-soft);
    border-radius: 10px;
}

.ax-panel-title {
    font-family: var(--ax-serif);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ax-ink);
}

.ax-panel-note {
    margin-left: auto;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--ax-muted);
}

.ax-panel-body {
    position: relative;
    padding: 16px 20px 18px;
}

.ax-note {
    margin-bottom: 14px;
    max-width: 80ch;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--ax-muted);
}

.ax-empty {
    padding: 18px 0;
    font-size: .92rem;
    color: var(--ax-muted);
}

.ax-foot-note {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--ax-line-bold);
    font-size: .84rem;
    line-height: 1.65;
    color: var(--ax-muted);
}

.ax-foot-note b {
    color: var(--ax-ink);
}

/* ── ข้อค้นพบ ──────────────────────────────────────────────────────────── */
.ax-finds {
    margin-top: 16px;
    display: grid;
    gap: 8px;
}

.ax-find {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--ax-ink-2);
    background: var(--ax-paper);
    border: 1px solid var(--ax-line);
    border-left: 4px solid var(--ax-info);
    border-radius: 10px;
}

.ax-find .ax-icon {
    margin-top: .2em;
    color: var(--ax-info-fg);
}

.ax-find.is-warn {
    border-left-color: var(--ax-warn);
}

.ax-find.is-warn .ax-icon {
    color: var(--ax-warn-fg);
}

.ax-find.is-ok {
    border-left-color: var(--ax-ok);
}

.ax-find.is-ok .ax-icon {
    color: var(--ax-ok-fg);
}

/* ═══════════════════════════════════════════════════════════════════════
   กราฟคอลัมน์ (การกระจาย)
   ═══════════════════════════════════════════════════════════════════════ */

.ax-cols {
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    gap: 8px;
    height: clamp(170px, 17vw, 200px);
    margin-top: 6px;
    padding-bottom: 2.6em;
}

.ax-col {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
}

.ax-col-n {
    font-size: .86rem;
    font-weight: 700;
    text-align: center;
    color: var(--ax-ink);
    font-variant-numeric: tabular-nums;
}

.ax-col-plot {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
    border-bottom: 2px solid var(--ax-line-bold);
}

.ax-col-bar {
    display: block;
    width: 100%;
    height: var(--h);
    min-height: 2px;
    background: var(--ax-neutral);
    border-radius: 5px 5px 0 0;
    transform-origin: center bottom;
}

.ax-col.is-median .ax-col-bar {
    background: var(--ax-brand);
}

.ax-col-x {
    position: absolute;
    left: 50%;
    top: calc(100% + 4px);
    transform: translateX(-50%);
    font-size: .78rem;
    color: var(--ax-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ax-col-tag {
    position: absolute;
    left: 50%;
    top: calc(100% + 1.55em);
    transform: translateX(-50%);
    font-size: .74rem;
    font-weight: 700;
    color: var(--ax-brand);
    white-space: nowrap;
}

/* ── ค่าสรุป ──────────────────────────────────────────────────────────── */
.ax-stats {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--ax-line);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 10px 16px;
}

.ax-stats.is-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ax-stats dt {
    font-size: .8rem;
    line-height: 1.45;
    color: var(--ax-muted);
}

.ax-stats dd {
    margin: 2px 0 0;
    font-size: .86rem;
    color: var(--ax-muted);
}

.ax-stats dd b {
    font-family: var(--ax-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ax-ink);
    font-variant-numeric: tabular-nums;
}

.ax-stats small {
    font-size: .76rem;
}

/* ── แถบแนวนอน ───────────────────────────────────────────────────────── */
.ax-track {
    position: relative;
    display: block;
    height: 14px;
    background: var(--ax-paper-alt);
    border-radius: 4px;
    overflow: hidden;
}

.ax-bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w);
    background: var(--ax-neutral);
    border-radius: 4px;
    transform-origin: left center;
}

.ax-bar.is-brand { background: var(--ax-brand); }
.ax-bar.is-ok { background: var(--ax-ok); }
.ax-bar.is-warn { background: var(--ax-warn); }

.ax-meter {
    display: grid;
    gap: 10px;
}

.ax-meter-row,
.ax-hrow {
    display: grid;
    grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    font-size: .9rem;
    color: var(--ax-ink-2);
}

.ax-meter-row b,
.ax-hrow-v b {
    color: var(--ax-ink);
    font-variant-numeric: tabular-nums;
}

.ax-hrows {
    display: grid;
    gap: 9px;
}

.ax-hrows.is-wide .ax-hrow {
    grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr) auto;
}

.ax-hrow-k {
    overflow-wrap: anywhere;
}

.ax-hrow-v {
    font-size: .88rem;
    color: var(--ax-muted);
    white-space: nowrap;
    text-align: right;
}

.ax-hrow.is-warn .ax-hrow-k,
.ax-hrow.is-warn .ax-hrow-v b {
    color: var(--ax-warn-fg);
    font-weight: 600;
}

/* ── แท่งซ้อนสี่กลุ่มคาบ ───────────────────────────────────────────────── */
.ax-stack {
    display: flex;
    gap: 2px;
    height: 14px;
    margin-top: 2px;
    border-radius: 4px;
    overflow: hidden;
}

.ax-seg {
    display: block;
    flex: 0 0 auto;
    width: var(--w);
    height: 100%;
    transform-origin: left center;
}

.ax-seg.is-subject, .ax-sw.is-subject { background: var(--ax-g-subject); }
.ax-seg.is-home, .ax-sw.is-home { background: var(--ax-g-home); }
.ax-seg.is-develop, .ax-sw.is-develop { background: var(--ax-g-develop); }
.ax-seg.is-work, .ax-sw.is-work { background: var(--ax-g-work); }

.ax-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin-top: 12px;
    font-size: .84rem;
    color: var(--ax-muted);
}

.ax-legend b {
    color: var(--ax-ink);
    font-variant-numeric: tabular-nums;
}

.ax-sw {
    display: inline-block;
    width: 18px;
    height: 9px;
    margin-right: 7px;
    vertical-align: 1px;
    border-radius: 3px;
}

.ax-sw.is-dot {
    width: 10px;
    height: 10px;
    background: var(--ax-ink);
    border-radius: 50%;
}

.ax-sw.is-med {
    width: 3px;
    height: 14px;
    vertical-align: -3px;
    background: var(--ax-warn);
    border-radius: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   ตาราง
   ═══════════════════════════════════════════════════════════════════════ */

.ax-scroll {
    overflow-x: auto;
    border-radius: 10px;
}

.ax-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    color: var(--ax-ink-2);
}

.ax-table th,
.ax-table td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--ax-line);
}

.ax-table thead th {
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ax-ink);
    background: var(--ax-paper-alt);
    vertical-align: bottom;
    white-space: nowrap;
}

.ax-table thead th small,
.ax-table td small {
    display: block;
    font-size: .76rem;
    font-weight: 500;
    color: var(--ax-muted);
    white-space: normal;
}

.ax-table tbody th {
    font-weight: 600;
    color: var(--ax-ink);
}

.ax-table .is-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ax-table td b {
    color: var(--ax-ink);
}

.ax-dept-table .is-high th {
    color: var(--ax-warn-fg);
}

.ax-td-range {
    min-width: 12rem;
}

.ax-range {
    position: relative;
    display: block;
    height: 18px;
}

.ax-range-line {
    position: absolute;
    top: 8px;
    left: var(--a);
    width: calc(var(--b) - var(--a));
    min-width: 2px;
    height: 3px;
    background: var(--ax-line-bold);
    border-radius: 2px;
}

.ax-range-med {
    position: absolute;
    top: 1px;
    left: var(--x);
    width: 3px;
    height: 16px;
    background: var(--ax-warn);
}

.ax-range-dot {
    position: absolute;
    top: 4px;
    left: calc(var(--x) - 5px);
    width: 11px;
    height: 11px;
    background: var(--ax-ink);
    border: 2px solid var(--ax-paper);
    border-radius: 50%;
}

.ax-td-mix {
    min-width: 8rem;
}

.ax-dq-mini {
    color: var(--ax-warn-fg) !important;
    font-weight: 600 !important;
}

/* ── ผังครูที่สอนพร้อมกัน / ผังชั้น × ห้อง ─────────────────────────────── */
.ax-hm th,
.ax-hm td,
.ax-rg th,
.ax-rg td {
    text-align: center;
}

.ax-hm thead th small {
    font-variant-numeric: tabular-nums;
}

.ax-hm tbody th,
.ax-rg tbody th {
    text-align: left;
    white-space: nowrap;
}

.ax-hm-c,
.ax-rg-c {
    color: var(--ax-ink);
    border: 1px solid var(--ax-paper);
}

.ax-hm-c b,
.ax-rg-c b {
    display: block;
    font-family: var(--ax-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ax-ink);
    font-variant-numeric: tabular-nums;
}

.ax-hm-w {
    display: block;
    font-size: .72rem !important;
    color: var(--ax-ink-2) !important;
    white-space: nowrap !important;
}

.ax .is-l0 { background: var(--ax-hm-0); }
.ax .is-l1 { background: var(--ax-hm-1); }
.ax .is-l2 { background: var(--ax-hm-2); }
.ax .is-l3 { background: var(--ax-hm-3); }
.ax .is-l4 { background: var(--ax-hm-4); }
.ax .is-l5 { background: var(--ax-hm-5); }
.ax .is-l6 { background: var(--ax-hm-6); }

.ax-rg-c {
    padding: 0 !important;
    min-width: 7.5rem;
}

.ax .ax-rg-a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 9px 6px;
    color: inherit;
    text-decoration: none;
}

.ax .ax-rg-a:hover {
    box-shadow: inset 0 0 0 2px var(--ax-brand);
}

.ax-rg-l {
    font-size: .82rem;
    font-weight: 700;
    color: var(--ax-ink-2);
}

.ax-rg-s {
    font-size: .74rem;
    line-height: 1.35;
    color: var(--ax-ink-2);
}

.ax-rg-c.is-gap {
    background: repeating-linear-gradient(135deg, var(--ax-paper-alt) 0 6px, var(--ax-paper) 6px 12px);
}

.ax-rg-c.is-gap .ax-rg-s {
    color: var(--ax-muted);
}

.ax-rg-c.is-none {
    background: transparent;
}

/* ห้องเรียนนอกระบบและตามอัธยาศัย: ไม่มีตารางเรียน แสดงป้ายแทนตัวเลข 0 */
.ax-rg-c.is-nf {
    background: repeating-linear-gradient(135deg, var(--ax-paper-alt) 0 6px, var(--ax-paper) 6px 12px);
}

.ax .ax-nf-pill {
    display: inline-block;
    padding: 1px 9px;
    border: 1px solid var(--ax-line-bold);
    border-radius: 999px;
    font-family: var(--ax-sans);
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ax-ink-2);
    background: var(--ax-paper);
    white-space: nowrap;
    /* the mobile card layout turns cells into flex/grid boxes: keep the pill its own width */
    width: max-content;
    align-self: flex-start;
    justify-self: start;
}

.ax .ax-rg-a .ax-nf-pill {
    align-self: center;
    margin: 3px 0 1px;
}

.ax .ax-table tbody th .ax-nf-sub {
    display: block;
    font-size: .72rem;
    font-weight: 500;
    color: var(--ax-muted);
    white-space: nowrap;
}

/* ── เวลาว่างร่วม ─────────────────────────────────────────────────────── */
.ax-plcs {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: clamp(10px, 1.2vw, 16px);
}

.ax-plc {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    background: var(--ax-paper);
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-r);
    box-shadow: var(--ax-shadow);
}

.ax-plc-t {
    font-family: var(--ax-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ax-ink);
}

.ax-plc-t small {
    margin-left: 4px;
    font-family: var(--ax-sans);
    font-size: .84rem;
    font-weight: 500;
    color: var(--ax-muted);
}

.ax-plc-meet {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--ax-muted);
    background: var(--ax-paper-alt);
    border-radius: 8px;
}

.ax-plc-meet .ax-icon {
    margin-top: .2em;
}

.ax-plc-meet.is-has {
    color: var(--ax-ok-fg);
    background: color-mix(in srgb, var(--ax-ok) 11%, var(--ax-paper));
}

.ax-plc-meet b {
    color: var(--ax-ink);
}

.ax-plc-sub {
    font-size: .84rem;
    color: var(--ax-muted);
}

.ax-plc-list {
    display: grid;
    gap: 6px;
}

.ax-plc-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 10px;
    padding: 7px 10px;
    font-size: .88rem;
    border: 1px solid var(--ax-line);
    border-radius: 8px;
}

.ax-plc-list li.is-all {
    border-color: var(--ax-brand-line);
    background: var(--ax-brand-soft);
}

.ax-plc-when b {
    color: var(--ax-ink);
}

.ax-plc-when small {
    margin-left: 6px;
    color: var(--ax-muted);
    font-variant-numeric: tabular-nums;
}

.ax-plc-free {
    font-weight: 600;
    color: var(--ax-ink-2);
}

.ax-plc-list li.is-all .ax-plc-free {
    color: var(--ax-brand);
}

/* ═══════════════════════════════════════════════════════════════════════
   ตารางรายคน: ค้นหา กรอง เรียง
   ═══════════════════════════════════════════════════════════════════════ */

.ax-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 14px;
}

.ax-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 1 18rem;
    min-width: 12rem;
}

.ax-search .ax-icon {
    position: absolute;
    left: 12px;
    color: var(--ax-muted);
    pointer-events: none;
}

.ax .ax-search input {
    width: 100%;
    min-height: 40px;
    padding: 6px 14px 6px 38px;
    font: inherit;
    font-size: .95rem;
    color: var(--ax-ink);
    background: var(--ax-paper);
    border: 1px solid var(--ax-line-bold);
    border-radius: 999px;
}

.ax-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 24rem;
}

.ax .ax-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 4px 12px;
    font: inherit;
    font-size: .86rem;
    font-weight: 500;
    color: var(--ax-ink-2);
    background: var(--ax-paper);
    border: 1px solid var(--ax-line-bold);
    border-radius: 999px;
    cursor: pointer;
}

.ax .ax-chip b {
    font-size: .78rem;
    color: var(--ax-muted);
}

.ax .ax-chip:hover {
    border-color: var(--ax-brand);
    color: var(--ax-brand);
}

.ax .ax-chip[aria-pressed="true"] {
    color: #ffffff;
    background: var(--ax-brand);
    border-color: var(--ax-brand);
}

.ax .ax-chip[aria-pressed="true"] b {
    color: inherit;
}

.ax-count {
    font-size: .86rem;
    color: var(--ax-muted);
}

.ax .ax-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    font: inherit;
    font-weight: 700;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}

.ax .ax-sort .ax-icon {
    color: var(--ax-muted);
}

.ax [aria-sort="ascending"] .ax-sort .ax-icon,
.ax [aria-sort="descending"] .ax-sort .ax-icon {
    color: var(--ax-brand);
}

.ax-people-scroll {
    max-height: min(78vh, 900px);
    overflow: auto;
}

.ax-people thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.ax-people tbody tr:hover > * {
    background: color-mix(in srgb, var(--ax-brand) 4%, var(--ax-paper));
}

.ax-people tr.is-gap > * {
    background: var(--ax-paper-alt);
}

.ax .ax-who {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.ax a.ax-who:hover .ax-who-n {
    color: var(--ax-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ax-av {
    width: 36px;
    height: 36px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 700;
    color: var(--ax-brand);
    background: var(--ax-brand-soft);
    border-radius: 50%;
}

.ax-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ax-who-t {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.4;
}

.ax-who-n {
    font-weight: 600;
    color: var(--ax-ink);
}

.ax-who-s {
    font-size: .8rem;
    font-weight: 400;
    color: var(--ax-muted);
}

.ax-td-who {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.ax-gap-t {
    font-size: .86rem;
    color: var(--ax-muted);
}

.ax .ax-room-a {
    color: var(--ax-brand);
    font-weight: 700;
    text-decoration: none;
}

.ax .ax-room-a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ax-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.ax-flag {
    padding: 1px 8px;
    font-size: .74rem;
    font-weight: 600;
    color: #6d28d9;
    background: color-mix(in srgb, #7c3aed 8%, var(--ax-paper));
    border: 1px solid color-mix(in srgb, #7c3aed 30%, var(--ax-paper));
    border-radius: 999px;
    white-space: nowrap;
}

.ax-flag.is-warn {
    color: var(--ax-warn-fg);
    background: var(--ax-warn-bg);
    border-color: color-mix(in srgb, var(--ax-warn) 50%, var(--ax-paper));
}

/* นอกกลุ่มสาระ: บอกการจัดกลุ่ม ไม่ใช่คำเตือน จึงใช้สีกลาง */
.ax .ax-flag.is-note {
    color: var(--ax-ink-2);
    background: var(--ax-paper-alt);
    border-color: var(--ax-line-bold);
}

:is(html.dark, html.dark-mode, html[data-theme="dark"],
    body.dark-mode, body[data-theme="dark"]) .ax .ax-flag:not(.is-warn):not(.is-note) {
    color: #c4b5fd;
}

.ax-td-eq {
    min-width: 9rem;
}

.ax-td-eq b {
    font-family: var(--ax-serif);
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── การ์ดข้อมูลที่ควรตรวจ ─────────────────────────────────────────────── */
.ax-notes {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 1.2vw, 16px);
}

.ax-note-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 16px 18px 16px 22px;
    background: var(--ax-paper);
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-r);
    box-shadow: var(--ax-shadow);
    overflow: hidden;
}

.ax-note-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--ax-line-bold);
}

.ax-note-card.is-crit::before { background: var(--ax-crit); }
.ax-note-card.is-warn::before { background: var(--ax-warn); }
.ax-note-card.is-info::before { background: var(--ax-info); }
.ax-note-card.is-ok::before { background: var(--ax-ok); }

.ax-note-lv {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .84rem;
    font-weight: 700;
}

.ax-note-card.is-crit .ax-note-lv { color: var(--ax-crit-fg); }
.ax-note-card.is-warn .ax-note-lv { color: var(--ax-warn-fg); }
.ax-note-card.is-info .ax-note-lv { color: var(--ax-info-fg); }
.ax-note-card.is-ok .ax-note-lv { color: var(--ax-ok-fg); }

.ax-note-t {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ax-ink);
}

.ax-note-v b {
    font-family: var(--ax-serif);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ax-ink);
    font-variant-numeric: tabular-nums;
}

.ax-note-card.is-crit .ax-note-v b { color: var(--ax-crit-fg); }
.ax-note-card.is-warn .ax-note-v b { color: var(--ax-warn-fg); }

.ax-note-w {
    font-size: .9rem;
    line-height: 1.65;
    color: var(--ax-muted);
    overflow-wrap: anywhere;
}

.ax .ax-note-a {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin-top: 6px;
    padding: 4px 12px;
    font-size: .86rem;
    font-weight: 600;
    color: var(--ax-brand);
    text-decoration: none;
    border: 1px solid var(--ax-brand-line);
    border-radius: 999px;
}

.ax .ax-note-a:hover {
    background: var(--ax-brand-soft);
    border-color: var(--ax-brand);
}

/* ── เกี่ยวกับตัวเลข ──────────────────────────────────────────────────── */
.ax-about {
    margin-top: clamp(28px, 3.4vw, 40px);
    padding: 18px 22px;
    background: var(--ax-paper-alt);
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-r);
}

.ax-about-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ax-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ax-ink);
}

.ax-about-title .ax-icon {
    color: var(--ax-brand);
}

.ax-about-list {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 28px;
}

.ax-about-list li {
    font-size: .88rem;
    line-height: 1.65;
    color: var(--ax-muted);
}

.ax-about-list b {
    color: var(--ax-ink);
}

.ax-about-meta {
    margin-top: 12px;
    font-size: .82rem;
    color: var(--ax-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   จอเล็กลง
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1240px) {
    .ax-figs,
    .ax-figs.is-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .ax-grid-2,
    .ax-notes,
    .ax-about-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .ax-tools {
        position: static;
        border-radius: var(--ax-r);
    }

    .ax-tools-act {
        margin-left: 0;
    }
}

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

    /* การ์ดห้าใบในสองคอลัมน์: ใบสุดท้ายกินเต็มแถว ไม่เหลือช่องว่างข้างมัน */
    .ax-figs.is-5 > li:last-child {
        grid-column: 1 / -1;
    }

    .ax .ax-fig {
        padding: 14px 12px 12px;
    }

    .ax-fig-ic {
        width: 34px;
        height: 34px;
    }

    .ax-panel-body {
        padding: 14px 14px 16px;
    }

    .ax-panel-head {
        padding: 12px 14px;
    }

    .ax-meter-row,
    .ax-hrow,
    .ax-hrows.is-wide .ax-hrow {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 4px;
    }

    .ax-meter-row .ax-track,
    .ax-hrow .ax-track {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .ax-stats.is-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ax-cols {
        gap: 4px;
    }

    .ax-col-x {
        font-size: .7rem;
    }
}

/* ตารางรายคนบนจอแคบ: หนึ่งแถวเป็นหนึ่งการ์ด หัวคอลัมน์ย้ายมาเป็นป้ายหน้าค่า */
@media (max-width: 760px) {
    .ax-people-scroll {
        max-height: none;
        overflow: visible;
    }

    .ax-people thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .ax-people,
    .ax-people tbody,
    .ax-people tr,
    .ax-people th,
    .ax-people td {
        display: block;
        width: 100%;
    }

    .ax-people tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px 10px;
        padding: 12px 2px;
        border-bottom: 1px solid var(--ax-line);
    }

    .ax-people tbody th {
        grid-column: 1 / -1;
        padding: 0;
        border: 0;
    }

    .ax-people td {
        display: flex;
        flex-direction: column;
        padding: 0;
        text-align: left !important;
        border: 0;
        white-space: normal;
    }

    .ax-people td::before {
        content: attr(data-label);
        font-size: .76rem;
        color: var(--ax-muted);
    }

    /* เวลาสอนมีแถบซ้อนจึงกินเต็มแถว รายชื่อครูที่ปรึกษาย้ายไปท้ายการ์ด ตัวเลขที่เหลือเรียงแถวละสาม */
    .ax-people td.ax-td-eq {
        grid-column: 1 / -1;
    }

    .ax-people td.ax-td-who {
        grid-column: 1 / -1;
        order: 9;
    }

    .ax-people td::before {
        line-height: 1.35;
    }

    .ax-people tbody tr:hover > * {
        background: transparent;
    }

    .ax-people tr.is-gap {
        background: var(--ax-paper-alt);
    }

    .ax-people tr.is-gap > * {
        background: transparent;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   การเคลื่อนไหว: แถบยืดเมื่อแผงเข้าจอ (ไม่มี opacity:0 เป็นสถานะพัก)
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
    .ax-bar,
    .ax-seg {
        transition: transform .9s var(--ax-ease) .1s;
    }

    .ax-col-bar {
        transition: transform .8s var(--ax-ease) .1s;
    }

    .ax.ax-motion [data-ax-reveal]:not(.is-in) .ax-bar,
    .ax.ax-motion [data-ax-reveal]:not(.is-in) .ax-seg {
        transform: scaleX(0);
    }

    .ax.ax-motion [data-ax-reveal]:not(.is-in) .ax-col-bar {
        transform: scaleY(0);
    }
}

.ax.ax-arming *,
.ax.ax-arming *::before {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .ax *,
    .ax *::before,
    .ax *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   โหมดคอนทราสต์สูง
   ไฟล์กลาง (css/tb1-navbar.css) บังคับ h1-h6 p li span div b small เป็นขาว ลิงก์เป็น #facc15
   ที่นี่เขียนเฉพาะการ์ด เส้นขอบ แถบ ผังความเข้ม และความหมายของสี
   ═══════════════════════════════════════════════════════════════════════ */

html.tb1-contrast-high .ax {
    --ax-neutral: #ffffff;
    --ax-warn: #facc15;
    --ax-crit: #facc15;
    --ax-ok: #ffffff;
    --ax-info: #ffffff;
    --ax-brand: #ffffff;
}

html.tb1-contrast-high .ax-hero {
    background: #000000;
}

html.tb1-contrast-high .ax-hero::before,
html.tb1-contrast-high .ax-hero::after {
    display: none;
}

html.tb1-contrast-high .ax-hero-eyebrow {
    background: #000000;
    border-color: #facc15;
}

html.tb1-contrast-high .ax .ax-fig,
html.tb1-contrast-high .ax-panel,
html.tb1-contrast-high .ax-tools,
html.tb1-contrast-high .ax-about,
html.tb1-contrast-high .ax-callout,
html.tb1-contrast-high .ax-note-card,
html.tb1-contrast-high .ax-find,
html.tb1-contrast-high .ax-plc,
html.tb1-contrast-high .ax-plc-meet,
html.tb1-contrast-high .ax-plc-list li,
html.tb1-contrast-high .ax-fig-ic,
html.tb1-contrast-high .ax-panel-ic,
html.tb1-contrast-high .ax .ax-btn,
html.tb1-contrast-high .ax .ax-chip,
html.tb1-contrast-high .ax .ax-note-a,
html.tb1-contrast-high .ax-sec-count,
html.tb1-contrast-high .ax-lock,
html.tb1-contrast-high .ax-flag,
html.tb1-contrast-high .ax-audience,
html.tb1-contrast-high .ax-audience-ic,
html.tb1-contrast-high .ax-av,
html.tb1-contrast-high .ax .ax-search input,
html.tb1-contrast-high .ax-select,
html.tb1-contrast-high .ax .ax-chip b {
    background: #000000;
    border-color: #ffffff;
    box-shadow: none;
}

html.tb1-contrast-high .ax-fig-ic,
html.tb1-contrast-high .ax-panel-ic,
html.tb1-contrast-high .ax-audience-ic,
html.tb1-contrast-high .ax-sec-count,
html.tb1-contrast-high .ax-lock,
html.tb1-contrast-high .ax-flag,
html.tb1-contrast-high .ax-av {
    color: #ffffff;
    border: 1px solid #ffffff;
}

html.tb1-contrast-high .ax .ax-flag.is-note {
    color: #ffffff;
    background: #000000;
    border-color: #ffffff;
}

html.tb1-contrast-high .ax-panel-head,
html.tb1-contrast-high .ax-table thead th,
html.tb1-contrast-high .ax-people tr.is-gap > *,
html.tb1-contrast-high .ax-people tbody tr:hover > * {
    background: #000000;
}

html.tb1-contrast-high .ax-panel-head,
html.tb1-contrast-high .ax-sec-head,
html.tb1-contrast-high .ax-table th,
html.tb1-contrast-high .ax-table td,
html.tb1-contrast-high .ax-stats,
html.tb1-contrast-high .ax-foot-note,
html.tb1-contrast-high .ax-col-plot {
    border-color: #ffffff;
}

html.tb1-contrast-high .ax-fig::before,
html.tb1-contrast-high .ax-sec-title::before,
html.tb1-contrast-high .ax-note-card::before {
    background: #ffffff;
}

html.tb1-contrast-high .ax-note-card.is-crit::before,
html.tb1-contrast-high .ax-note-card.is-warn::before,
html.tb1-contrast-high .ax-fig.is-warn::before {
    background: #facc15;
}

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

/* สี่กลุ่มคาบ: ขาว ลายเฉียง เหลือง ลายจุด (ชุดเดียวกับหน้าตารางสอนครู) */
html.tb1-contrast-high .ax-seg.is-subject,
html.tb1-contrast-high .ax-sw.is-subject {
    background: #ffffff;
}

html.tb1-contrast-high .ax-seg.is-home,
html.tb1-contrast-high .ax-sw.is-home {
    background: repeating-linear-gradient(135deg, #ffffff 0 3px, #000000 3px 6px);
}

html.tb1-contrast-high .ax-seg.is-develop,
html.tb1-contrast-high .ax-sw.is-develop {
    background: #facc15;
}

html.tb1-contrast-high .ax-seg.is-work,
html.tb1-contrast-high .ax-sw.is-work {
    background: radial-gradient(circle, #ffffff 1.2px, #000000 1.6px) 0 0 / 5px 5px;
}

html.tb1-contrast-high .ax-sw.is-dot,
html.tb1-contrast-high .ax-range-dot {
    background: #ffffff;
    border-color: #000000;
}

html.tb1-contrast-high .ax-range-line {
    background: #ffffff;
}

html.tb1-contrast-high .ax-col.is-median .ax-col-bar {
    background: #facc15;
}

/* ผังความเข้มบนพื้นดำ: ช่องเป็นดำ ระดับบอกด้วยเส้นขอบล่างหนาขึ้น ตัวเลขยังอ่านได้ */
html.tb1-contrast-high .ax :is(.is-l0, .is-l1, .is-l2, .is-l3, .is-l4, .is-l5, .is-l6) {
    background: #000000;
}

html.tb1-contrast-high .ax .is-l1 { box-shadow: inset 0 -2px 0 #ffffff; }
html.tb1-contrast-high .ax .is-l2 { box-shadow: inset 0 -3px 0 #ffffff; }
html.tb1-contrast-high .ax .is-l3 { box-shadow: inset 0 -4px 0 #ffffff; }
html.tb1-contrast-high .ax .is-l4 { box-shadow: inset 0 -5px 0 #facc15; }
html.tb1-contrast-high .ax .is-l5 { box-shadow: inset 0 -6px 0 #facc15; }
html.tb1-contrast-high .ax .is-l6 { box-shadow: inset 0 -8px 0 #facc15; }

html.tb1-contrast-high .ax-rg-c.is-gap,
html.tb1-contrast-high .ax-rg-c.is-nf {
    background: #000000;
    box-shadow: inset 0 0 0 1px #ffffff;
}

html.tb1-contrast-high .ax .ax-nf-pill {
    color: #ffffff;
    background: #000000;
    border-color: #ffffff;
}

html.tb1-contrast-high .ax-hm-c,
html.tb1-contrast-high .ax-rg-c {
    border-color: #333333;
}

html.tb1-contrast-high .ax .ax-chip[aria-pressed="true"],
html.tb1-contrast-high .ax .ax-nav-a[aria-current="location"] {
    background: #facc15;
    border-color: #facc15;
}

html.tb1-contrast-high .ax .ax-chip[aria-pressed="true"],
html.tb1-contrast-high .ax .ax-chip[aria-pressed="true"] *,
html.tb1-contrast-high .ax .ax-nav-a[aria-current="location"] {
    color: #000000 !important;
}

html.tb1-contrast-high .ax .ax-chip[aria-pressed="true"] b {
    background: #facc15;
}

html.tb1-contrast-high .ax .ax-nav-a:hover,
html.tb1-contrast-high .ax .ax-chip:hover,
html.tb1-contrast-high .ax .ax-note-a:hover,
html.tb1-contrast-high .ax .ax-rg-a:hover {
    background: #000000;
    box-shadow: inset 0 0 0 2px #facc15;
}

html.tb1-contrast-high .ax-plc-list li.is-all {
    border-color: #facc15;
}

html.tb1-contrast-high .ax :focus-visible {
    outline-color: #facc15;
}

/* ไฟล์กลางไม่รวม dt dd ในรายการบังคับสีขาว ค่าสรุปจึงต้องตั้งเอง */
html.tb1-contrast-high .ax-stats :is(dt, dd) {
    color: #ffffff !important;
}

/* จำนวนเรื่องที่ควรตรวจอยู่ในลิงก์ (ไฟล์กลางทำลิงก์เป็นเหลือง) พื้นจึงต้องเป็นดำ */
html.tb1-contrast-high .ax-nav-n {
    color: #facc15 !important;
    background: #000000;
    box-shadow: inset 0 0 0 1px #facc15;
}

html.tb1-contrast-high .ax .ax-nav-a[aria-current="location"] .ax-nav-n {
    color: #000000 !important;
    background: #facc15;
    box-shadow: inset 0 0 0 1px #000000;
}

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

@media print {
    body.ax-page {
        background: #ffffff;
    }

    .ax {
        --ax-ink: #0f172a;
        --ax-ink-2: #334155;
        --ax-muted: #475569;
        --ax-paper: #ffffff;
        --ax-paper-alt: #f1f5f9;
        --ax-line: #cbd5e1;
        --ax-line-bold: #94a3b8;
        --ax-neutral: #94a3b8;
        color-scheme: light;
    }

    .ax *,
    .ax *::before,
    .ax *::after {
        transition: none !important;
        animation: none !important;
    }

    .ax-tools,
    .ax-audience,
    .ax-filter,
    .ax-note-a,
    .ax-fig-ic,
    .ax-panel-ic,
    .ax-sort .ax-icon,
    .ax-hero::before,
    .ax-hero::after {
        display: none !important;
    }

    main.ax {
        padding: 0;
    }

    .ax-hero {
        margin: 0;
        padding: 0 0 10px;
        color: #000000;
        text-align: left;
        background: #ffffff;
        border-bottom: 2px solid #000000;
    }

    .ax-hero-in {
        max-width: none;
        align-items: flex-start;
    }

    .ax-hero-eyebrow {
        padding: 0;
        color: #000000;
        background: none;
        border: 0;
    }

    .ax-hero-eyebrow .ax-icon {
        display: none;
    }

    .ax-hero-title,
    .ax-hero-sub,
    .ax-hero-date {
        color: #000000;
    }

    .ax-hero-title {
        margin-top: 4px;
        font-size: 1.6rem;
    }

    .ax-figs,
    .ax-figs.is-6 {
        margin-top: 12px;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 8px;
    }

    .ax .ax-fig,
    .ax-panel,
    .ax-note-card,
    .ax-plc,
    .ax-find {
        box-shadow: none !important;
        border-color: #999999;
    }

    .ax .ax-bar,
    .ax .ax-seg,
    .ax .ax-col-bar {
        transform: none !important;
    }

    .ax-fig::before,
    .ax-sec-title::before,
    .ax-note-card::before,
    .ax-bar,
    .ax-seg,
    .ax-col-bar,
    .ax-sw,
    .ax-range-med,
    .ax-range-dot,
    .ax-hm-c,
    .ax-rg-c {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .ax-sec {
        margin-top: 18px;
    }

    .ax-sec-head {
        break-after: avoid;
    }

    .ax-panel,
    .ax .ax-fig,
    .ax-note-card,
    .ax-plc,
    .ax-about,
    .ax-table tr {
        break-inside: avoid;
    }

    .ax-people-panel {
        break-inside: auto;
    }

    .ax-people-scroll,
    .ax-scroll {
        max-height: none;
        overflow: visible;
    }

    .ax-people thead th {
        position: static;
    }

    .ax a {
        color: #000000 !important;
        text-decoration: none !important;
    }
}

/* ภาระงานครู: พื้นที่อ่านกระชับ ใช้เฉพาะหน้านี้ */
@media screen {
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-hero,
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-hero.is-plain { padding: 24px var(--ax-gutter); }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-hero-title { font-size: clamp(1.6rem, 3vw, 2.2rem); }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-hero-sub { max-width: 76ch; }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-figs { margin-top: 16px; gap: 10px; }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-fig { padding: 12px; box-shadow: var(--ax-shadow); }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-fig-k { flex-direction: row; align-items: center; gap: 8px; }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-fig-ic { width: 30px; height: 30px; flex: none; }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-fig-v b { font-size: 1.7rem; }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-sec { margin-top: 24px; }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-grid-2 { gap: 14px; align-items: stretch; }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-panel { min-width: 0; }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-panel-head { padding: 10px 14px; }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-panel-body { padding: 14px; }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-filter { gap: 8px; }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-filter-help { flex-basis: 100%; font-size: .85rem; color: var(--ax-muted); }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-btn { min-height: 40px; }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-btn[hidden] { display: none; }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-empty .ax-btn { margin: 8px; }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-retry { margin-top: 12px; }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-people-scroll { overscroll-behavior-inline: contain; }
}
@media screen and (min-width: 981px) {
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-grid-2 > .ax-panel { display: flex; flex-direction: column; }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-grid-2 > .ax-panel > .ax-panel-head { min-height: 54px; }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-grid-2 > .ax-panel > .ax-panel-body { flex: 1; }
}
@media screen and (max-width: 640px) {
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-hero,
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-hero.is-plain { padding: 18px var(--ax-gutter); }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-search { width: 100%; flex-basis: 100%; }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-search input,
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-select { font-size: 16px; }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-btn,
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-chip { min-height: 44px; }
}
@media screen and (min-width: 641px) and (max-width: 1240px) {
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-figs.is-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-figs.is-5 > li { grid-column: span 2; }
    :is(.wa-page, .ha-page, .sr-dashboard, .ac-dashboard, .pa-dashboard, .pl-dashboard, .an-dashboard, .sca-dashboard, .ns-dashboard, .ss-dashboard, .ssy-dashboard, .nla-dashboard) .ax-figs.is-5 > li:nth-child(n+4) { grid-column: span 3; }
}

/* ═══════════════════════════════════════════════════════════════════════
   วิเคราะห์ภาระงานครู: เทียบภาคก่อน และงานนอกการสอน (28 ต.ค. 2569)
   ★ ทิศทางของการเปลี่ยนบอกด้วยเครื่องหมาย + − เสมอ สีเป็นตัวช่วย ไม่ใช่ตัวบอกเดียว
     เพิ่ม/ลดไม่ได้แปลว่าดีหรือแย่ จึงใช้สีแบรนด์กับสีน้ำเงินอมเขียว ไม่ใช้เขียว/แดง
   ═══════════════════════════════════════════════════════════════════════ */

.ax-delta {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--ax-ink-2);
}

.ax-delta.is-up {
    color: var(--ax-brand);
}

.ax-delta.is-down {
    color: var(--ax-g-home);
}

.ax-delta.is-new {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ax-muted);
}

td .ax-delta + small {
    display: block;
    font-size: .76rem;
    color: var(--ax-muted);
}

.ax-td-dv {
    min-width: 9rem;
}

.ax-dv {
    position: relative;
    display: block;
    height: 10px;
    background: var(--ax-paper-alt);
    border-radius: 999px;
}

.ax-dv::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -4px;
    bottom: -4px;
    width: 2px;
    margin-left: -1px;
    background: var(--ax-line-bold);
}

.ax-dv-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(var(--w, 0%) / 2);
}

.ax-dv-bar.is-up {
    left: 50%;
    background: var(--ax-brand);
    border-radius: 0 999px 999px 0;
}

.ax-dv-bar.is-down {
    right: 50%;
    background: var(--ax-g-home);
    border-radius: 999px 0 0 999px;
}

.ax-big {
    margin-top: 6px;
    font-size: .95rem;
    color: var(--ax-muted);
}

.ax-big b {
    font-family: var(--ax-serif);
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ax-ink);
    font-variant-numeric: tabular-nums;
}

.ax-duty-n {
    font-family: var(--ax-serif);
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ax-td-roles {
    min-width: 14rem;
}

.ax-td-roles > b {
    font-variant-numeric: tabular-nums;
}

.ax-duty-roles {
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--ax-ink-2);
}

.ax-duty-roles li.is-more {
    color: var(--ax-muted);
}

.ax-muted-s {
    color: var(--ax-muted);
}

@media (max-width: 760px) {
    .ax-people td.ax-td-roles {
        grid-column: 1 / -1;
        order: 9;
    }

    .ax-td-dv {
        min-width: 6rem;
    }
}

@media print {
    .ax-dv,
    .ax-dv-bar {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ★ 30 ต.ค. 2569: หัวหน้าสองฝั่ง (หน้าที่ส่งตัวเลขเข้า axHero เท่านั้น ตอนนี้คือวิเคราะห์ภาระงานครู)
   ข้อความซ้าย ตัวเลขขวาเป็นแผงกระจกฝ้าสีเข้ม แถวละหนึ่งตัว ทั้งแถวยังเป็นลิงก์ไปหมวดของมัน
   ผังเดียวกับหน้าทำเนียบและรายงานบุคลากร · หน่วยอยู่ในช่องกว้างคงที่ ตัวเลขทุกแถวจึงจบตรงกัน
   เฉพาะหน้าจอ · กระดาษใช้กฎพิมพ์เดิมของ .ax-figs
   ★ ตัวเลือกของแผงขึ้นต้น .ax.ax ... .has-figs ให้ชนะกฎสี่คอลัมน์ของไฟล์ CSS รายหน้า (เช่น .ns-page .ns-dashboard .ax-figs.is-4)
   ═══════════════════════════════════════════════════════════════════════ */
@media screen {
    .ax .ax-hero.has-figs .ax-hero-in {
        max-width: calc(var(--ax-page-max) - 2 * var(--ax-gutter));
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        gap: 18px clamp(24px, 3vw, 48px);
    }

    .ax .ax-hero.has-figs .ax-hero-main {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .ax.ax .ax-hero.has-figs .ax-figs,
    .ax.ax .ax-hero.has-figs .ax-figs.is-5,
    .ax.ax .ax-hero.has-figs .ax-figs.is-6 {
        width: 100%;
        max-width: 46rem;
        justify-self: center;
        margin: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 6px 10px;
        text-align: left;
        background: rgba(2, 6, 23, .28);
        border: 1px solid rgba(255, 255, 255, .2);
        border-radius: var(--tb1-radius-lg, 22px);
        box-shadow: 0 24px 48px -28px rgba(2, 6, 23, .7), inset 0 1px 0 rgba(255, 255, 255, .14);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    .ax.ax .ax-hero.has-figs .ax-figs > li,
    .ax.ax .ax-hero.has-figs .ax-figs.is-5 > li,
    .ax.ax .ax-hero.has-figs .ax-figs.is-5 > li:nth-child(n),
    .ax.ax .ax-hero.has-figs .ax-figs.is-5 > li:last-child {
        grid-column: auto;
    }

    .ax.ax .ax-hero.has-figs .ax-figs > li + li {
        border-top: 1px solid rgba(255, 255, 255, .16);
    }

    .ax .ax-hero .ax-fig {
        display: grid;
        grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr) auto;
        grid-template-areas: "k s v";
        align-items: center;
        gap: 2px 12px;
        padding: 4px 6px;
        color: #e0e7ff;
        background: transparent;
        border: 0;
        border-radius: 10px;
        box-shadow: none;
        overflow: visible;
    }

    .ax .ax-hero a.ax-fig:hover {
        background: rgba(255, 255, 255, .07);
        border-color: transparent;
        box-shadow: none;
    }

    .ax .ax-hero a.ax-fig:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 1px;
    }

    .ax .ax-hero .ax-fig::before {
        display: none;
    }

    .ax .ax-hero .ax-fig-k {
        grid-area: k;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        color: #ffffff;
        font-size: .875rem;
        font-weight: 600;
        line-height: 1.35;
    }

    .ax .ax-hero .ax-fig-ic {
        flex-shrink: 0;
        width: 26px;
        height: 26px;
        color: #ffffff;
        background: rgba(255, 255, 255, .14);
        border-radius: 8px;
    }

    .ax .ax-hero .ax-fig-ic .ax-icon {
        width: 15px;
        height: 15px;
    }

    .ax .ax-hero .ax-fig-s {
        grid-area: s;
        font-size: .875rem;
        line-height: 1.4;
        color: #e0e7ff;
    }

    .ax .ax-hero .ax-fig-v {
        grid-area: v;
        margin: 0;
        display: inline-grid;
        /* หน่วยยาวเกินช่อง (ไม่มีในหน้าปัจจุบัน) ช่องขยายให้แถวนั้นแทนการล้นออกนอกแผง */
        grid-template-columns: auto minmax(5.4em, max-content);
        align-items: baseline;
        column-gap: 5px;
        font-size: .875rem;
        color: #e0e7ff;
        white-space: nowrap;
    }

    .ax .ax-hero .ax-fig-v b {
        text-align: right;
        font-size: clamp(1.25rem, 1.7vw, 1.45rem);
        line-height: 1.15;
        color: #ffffff;
        font-variant-numeric: tabular-nums;
    }

    .ax .ax-hero .ax-fig-u {
        text-align: left;
        white-space: nowrap;
    }

    /* สถานะต้องดู (ต่ำกว่าเกณฑ์) ยังเห็นในแผง: ไอคอนพื้นอำพัน ตัวเลขและคำอธิบายสีอำพันอ่อน (เกิน 4.5:1 บนแผงเข้ม) */
    .ax .ax-hero .ax-fig.is-warn .ax-fig-ic {
        background: rgba(245, 158, 11, .38);
    }

    .ax .ax-hero .ax-fig.is-warn .ax-fig-v b {
        color: #fcd34d;
    }

    .ax .ax-hero .ax-fig.is-warn .ax-fig-s {
        color: #fde68a;
        font-weight: 600;
    }
}

/* จอกว้าง: สองฝั่ง ขอบซ้ายขวาตรงกับเนื้อหาด้านล่าง ข้อความชิดซ้าย */
@media screen and (min-width: 1080px) {
    .ax .ax-hero.has-figs {
        text-align: left;
    }

    .ax .ax-hero.has-figs .ax-hero-in {
        grid-template-columns: minmax(0, 1fr) minmax(28rem, 36rem);
    }

    .ax .ax-hero.has-figs .ax-hero-main {
        align-items: flex-start;
    }

    .ax.ax .ax-hero.has-figs .ax-figs,
    .ax.ax .ax-hero.has-figs .ax-figs.is-5,
    .ax.ax .ax-hero.has-figs .ax-figs.is-6 {
        max-width: none;
        justify-self: stretch;
    }
}

@media screen and (min-width: 1280px) {
    .ax .ax-hero.has-figs .ax-hero-in {
        grid-template-columns: minmax(0, 1fr) minmax(28rem, 44rem);
    }
}

/* จอแคบ: คำอธิบายลงไปอยู่ใต้ชื่อตัวเลข ตัวเลขยังอยู่ขวา */
@media screen and (max-width: 640px) {
    .ax .ax-hero .ax-fig {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "k v" "s v";
        padding: 7px 4px;
    }

    .ax .ax-hero .ax-fig-s {
        padding-left: 34px;
    }
}

html.tb1-contrast-high .ax.ax .ax-hero.has-figs .ax-figs {
    background: #000000;
    border-color: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}