/* ──────────────────────────────────────────────────────────────────────────
   attendance/index.php — หน้าหลักระบบลงเวลาปฏิบัติงาน (ผู้บริหาร)

   ภาษาภาพเดียวกับหน้าแรก tb1.ac.th (css/tb1-home.css, รอบ zerodropout 24 ก.ย. 2569)
       หัวหน้าน้ำเงินไล่เฉดเต็มจอ ซ้ายเป็นชื่อหน้า คำทักทาย ปุ่ม และแคปซูลเปิดบัญชีรายบุคคล
       ขวาเป็นการ์ดกระจกเข้ม "วันนี้" มีแผ่นปฏิทิน ล่างเป็นแถบ "วันนี้ในตัวเลข" (ตัวเลขนับขึ้น)
       การ์ดผู้ที่ยังไม่ลงเวลาลอยทับขอบล่างของหัวหน้า หัวข้อแต่ละส่วนมีขีดสีนำ แผงมีแถบหัว

   สี: alias ที่ชี้ไป --tb1-* ของธีมเท่านั้น พื้นเข้มใช้ --tb1-banner-1 ซึ่งเข้มทั้งสองโหมด
   สีสถานะ (ตรวจด้วย dataviz validate_palette.js แบบคู่ติดกันและตาบอดสี ทั้งบนแผงและบนหัวหน้า)
       บนแผง   มาปกติ ink-3  สาย warning-deep  ไปราชการ brand  ลา ink-4  ขาด #B91C1C  รอ = วงกลวง
       บนหัวหน้า มาปกติ ขาว  สาย ทอง  ไปราชการ ฟ้าอ่อน  ลา ลายทแยงขาว  ขาด ชมพูอ่อน  รอ = วงกลวง
   ความเฉพาะของเว็บนี้
       - ธีมบังคับ font-family บน p/span/div/li/a ด้วย !important ตัวเซริฟจึงอยู่ที่ h1–h3 และ b
       - กฎสีของ <a> ต้องมีคลาสสองชั้น เพื่อชนะสีลิงก์โหมดมืดของ tb1-display-scale.css (0,1,1)
   ★ ไม่มี opacity:0 เป็นสถานะพัก ที่ขยับได้มีแค่ตำแหน่ง (สคริปต์ติด ad-motion ก่อนเท่านั้น)
   ────────────────────────────────────────────────────────────────────────── */

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

html:has(body.ad-page) {
    scroll-padding-top: 4.5rem;
}

body.ad-page a.ad-skip {
    position: fixed;
    top: -100px;
    left: 16px;
    z-index: 10000;
    padding: 10px 18px;
    color: #ffffff;
    background: var(--tb1-banner-1, #1d4ed8);
    border-radius: 0 0 10px 10px;
    font-weight: 600;
    text-decoration: none;
}

body.ad-page a.ad-skip:focus {
    top: 0;
    outline: 3px solid var(--tb1-warning-soft, #fbbf24);
    outline-offset: 2px;
}

body.ad-page .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── โทเคนของหน้า ─────────────────────────────────────────────────────── */
.ad {
    --ad-paper: var(--tb1-surface, #ffffff);
    --ad-paper-alt: var(--tb1-surface-alt, #f1f5f9);
    --ad-ink: var(--tb1-ink-1, #0f172a);
    --ad-ink-2: var(--tb1-ink-2, #334155);
    --ad-muted: var(--tb1-ink-3, #5a697f);
    --ad-line: var(--tb1-border, #e2e8f0);
    --ad-line-bold: var(--tb1-border-bold, #cbd5e1);
    --ad-brand: var(--tb1-brand, #1d4ed8);
    --ad-brand-soft: color-mix(in srgb, var(--tb1-brand, #1d4ed8) 10%, var(--tb1-surface, #ffffff));
    --ad-on-brand: var(--tb1-on-brand, #ffffff);
    --ad-navy: var(--tb1-banner-1, #1d4ed8);
    --ad-gold: var(--tb1-warning-soft, #fbbf24);
    /* ตัวอักษรทองบนน้ำเงิน: #FBBF24 ได้แค่ 4.0:1 บนน้ำเงินโหมดสว่าง */
    --ad-gold-text: #fde68a;
    --ad-warn-fg: var(--tb1-text-warning, #b45309);
    --ad-ok-mark: var(--tb1-success, #10b981);
    /* text-danger โหมดสว่าง (#DC2626) ได้ 4.41:1 บนพื้นรอง ไม่ผ่าน AA */
    --ad-alert: #b91c1c;
    /* ตัวอักษรรองบนพื้นน้ำเงิน เกิน 7:1 ทุกตำแหน่งของไล่เฉด */
    --ad-on-hero-2: #e0e7ff;
    --ad-serif: var(--tb1-font-display, "Noto Sans Thai Looped", sans-serif);
    --ad-sans: var(--tb1-font-body, "Sarabun", system-ui, sans-serif);
    --ad-ease: cubic-bezier(.4, 0, .2, 1);
    --ad-r: 16px;
    --ad-gap: clamp(16px, 2vw, 24px);
    --ad-shadow: 0 14px 32px -24px rgba(15, 23, 42, .55), inset 0 1px 0 rgba(255, 255, 255, .6);
    --ad-shadow-float: 0 30px 60px -34px rgba(15, 23, 42, .7), inset 0 1px 0 rgba(255, 255, 255, .6);
    --ad-hero-a: color-mix(in srgb, var(--tb1-banner-1, #1d4ed8) 60%, var(--tb1-ink-surface, #0f172a));
    --ad-hero-b: var(--tb1-banner-1, #1d4ed8);
    --ad-hero-c: color-mix(in srgb, var(--tb1-banner-1, #1d4ed8) 78%, var(--tb1-accent-strong, #0284c7));

    /* สีสถานะบนแผง */
    --m-present: var(--tb1-ink-3, #5a697f);
    --m-late: var(--tb1-warning-deep, #d97706);
    --m-travel: var(--tb1-brand, #1d4ed8);
    --m-leave: var(--tb1-ink-4, #94a3b8);
    --m-missing: #b91c1c;
    --m-ring: var(--tb1-ink-3, #5a697f);
    --m-uncounted: var(--tb1-border-bold, #cbd5e1);

    display: block;
    color: var(--ad-ink);
    font-family: var(--ad-sans);
    font-size: 1rem;
    line-height: 1.6;
}

:is(html.dark, html.dark-mode, html[data-theme="dark"],
    body.dark-mode, body[data-theme="dark"]) .ad {
    --ad-alert: var(--tb1-text-danger, #fda4af);
    --ad-brand-soft: color-mix(in srgb, var(--tb1-brand, #60a5fa) 16%, var(--tb1-surface, #111c31));
    --ad-shadow: 0 14px 32px -22px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .055);
    --ad-shadow-float: 0 30px 60px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
    /* โหมดมืด: banner เป็นกรมท่าเข้ม เติมน้ำเงินสดที่ปลายไล่เฉดให้มีมิติ (แบบหน้าแรก) */
    --ad-hero-a: #050d22;
    --ad-hero-c: color-mix(in srgb, #1d4ed8 42%, var(--tb1-banner-1, #0e1f45));
    --m-present: color-mix(in srgb, var(--tb1-ink-3, #94a3b8) 72%, var(--tb1-surface, #111c31));
    --m-late: var(--tb1-warning, #fbbf24);
    --m-missing: var(--tb1-danger, #f87171);
    --m-ring: var(--tb1-ink-3, #94a3b8);
    color-scheme: dark;
}

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

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

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

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

.ad:focus {
    outline: none;
}

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

.ad-wrap {
    width: 100%;
    max-width: var(--tb1-page-max-width, 1440px);
    margin-inline: auto;
    padding-inline: var(--tb1-shell-gutter, 20px);
}

/* ── ปุ่ม ───────────────────────────────────────────────────────────────── */
.ad-acts {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.ad .ad-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.6rem;
    padding: 0 1.15rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s var(--ad-ease), border-color .2s var(--ad-ease), box-shadow .2s var(--ad-ease);
}

.ad .ad-btn:active {
    transform: translateY(1px);
}

/* ปุ่มบนพื้นน้ำเงิน: สีคงที่ทั้งสองโหมดเพราะพื้นเข้มทั้งสองโหมด */
.ad .ad-btn-light {
    color: var(--tb1-banner-1, #1d4ed8);
    background: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 12px 26px -16px rgba(2, 6, 23, .7);
}

.ad .ad-btn-light:hover {
    background: #eef2ff;
    border-color: #eef2ff;
}

/* ★ พื้นขาว .12 บนน้ำเงินหัวหน้า ตัวอักษรขาวยังเกิน 4.5:1 ชี้แล้วพื้นเข้มขึ้น ไม่สว่างขึ้น */
.ad .ad-btn-glass {
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.ad .ad-btn-glass:hover {
    background: rgba(2, 6, 23, .2);
    border-color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════════
   ๑ หัวหน้า: น้ำเงินไล่เฉดเต็มจอ แบบหน้าแรก
   ═══════════════════════════════════════════════════════════════════════ */

.ad-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(22px, 2.8vw, 40px) clamp(28px, 3vw, 40px);
    color: #ffffff;
    /* ★ สีพื้นทึบอยู่ใต้ไล่เฉด ตัวตรวจคอนทราสต์อ่านค่านี้ */
    background-color: var(--ad-hero-b);
    background-image: linear-gradient(135deg, var(--ad-hero-a) 0%, var(--ad-hero-b) 52%, var(--ad-hero-c) 100%);

    /* สีสถานะบนหัวหน้า */
    --m-present: #ffffff;
    --m-late: #fbbf24;
    --m-travel: #7dd3fc;
    --m-leave: rgba(255, 255, 255, .5);
    --m-missing: #fda4af;
    --m-ring: #ffffff;
    --m-uncounted: rgba(255, 255, 255, .3);
}

/* การ์ดผู้ที่ยังไม่ลงเวลาลอยทับขอบล่าง หัวหน้าจึงเว้นที่ด้านล่างไว้ให้ */
.ad-hero.has-float {
    padding-bottom: clamp(96px, 8.4vw, 124px);
}

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

.ad-hero::before {
    background-image:
        radial-gradient(circle at 12% 24%, rgba(255, 255, 255, .09) 0%, transparent 42%),
        radial-gradient(circle at 60% 115%, rgba(56, 189, 248, .12) 0%, transparent 46%);
}

.ad-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 30%, transparent);
    mask-image: linear-gradient(180deg, #000000 30%, transparent);
}

.ad-hero-fx {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.ad-orb {
    position: absolute;
    display: block;
    border-radius: 50%;
}

.ad-orb.is-a {
    top: -14rem;
    right: -10rem;
    width: 40rem;
    height: 40rem;
    background: radial-gradient(circle, rgba(96, 165, 250, .26) 0%, rgba(96, 165, 250, 0) 68%);
}

.ad-orb.is-b {
    bottom: -12rem;
    left: -10rem;
    width: 32rem;
    height: 32rem;
    background: radial-gradient(circle, rgba(56, 189, 248, .16) 0%, rgba(56, 189, 248, 0) 68%);
}

.ad-orb.is-c {
    top: 30%;
    right: 30%;
    width: 18rem;
    height: 18rem;
    background: radial-gradient(circle, rgba(253, 230, 138, .09) 0%, rgba(253, 230, 138, 0) 70%);
}

:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode) .ad-orb.is-a {
    background: radial-gradient(circle, rgba(59, 130, 246, .34) 0%, rgba(59, 130, 246, 0) 68%);
}

:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode) .ad-orb.is-b {
    background: radial-gradient(circle, rgba(14, 165, 233, .2) 0%, rgba(14, 165, 233, 0) 68%);
}

.ad-hero :focus-visible {
    outline-color: #ffffff;
}

.ad-hero-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 26px clamp(28px, 3.6vw, 64px);
}

@media (min-width: 1024px) {
    .ad-hero-top {
        grid-template-columns: minmax(0, 1fr) minmax(22rem, 27rem);
    }
}

.ad-hero-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ad-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.ad .ad-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 3px 14px;
    font: inherit;
    font-size: .86rem;
    font-weight: 500;
    line-height: 1.4;
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ★ ตัวทองบนกระจกขาว .12 ได้แค่ 4.3:1 ป้ายทองจึงเป็นกระจกเข้ม (เกิน 6:1) */
.ad .ad-tag.is-gold {
    font-weight: 600;
    color: var(--ad-gold-text);
    background: rgba(2, 6, 23, .26);
    border-color: rgba(253, 230, 138, .45);
}

.ad .ad-tag-btn {
    cursor: pointer;
    transition: background-color .2s var(--ad-ease), border-color .2s var(--ad-ease);
}

.ad .ad-tag-btn:hover {
    background: rgba(2, 6, 23, .22);
    border-color: #ffffff;
}

.ad .ad-tag-btn[aria-pressed="true"] {
    color: #172554;
    background: #ffffff;
    border-color: #ffffff;
}

.ad-title {
    font-family: var(--ad-serif);
    font-size: clamp(2rem, 1.05rem + 3.1vw, 3.5rem);
    font-weight: 600;
    line-height: 1.2;
    color: #ffffff;
    overflow-wrap: anywhere;
    text-wrap: balance;
    text-shadow: 0 2px 22px rgba(2, 6, 23, .3);
}

/* ★ #dbeafe บนส่วนที่สว่างที่สุดของไล่เฉดยังเกิน 4.5:1 */
.ad-title-2 {
    color: #dbeafe;
}

.ad-nw {
    display: inline-block;
    white-space: nowrap;
}

.ad-sub {
    max-width: 46rem;
    margin-top: 14px;
    font-size: clamp(1rem, .95rem + .3vw, 1.12rem);
    line-height: 1.75;
    color: var(--ad-on-hero-2);
    text-wrap: pretty;
}

.ad-hero-acts {
    margin-top: 20px;
}

/* ── แคปซูลเปิดบัญชีรายบุคคล (แบบช่องค้นหาของหน้าแรก) ───────────────────── */
.ad-find {
    width: 100%;
    max-width: 44rem;
    margin-top: 22px;
}

.ad-find-label {
    display: block;
    margin: 0 0 6px 18px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ad-on-hero-2);
}

.ad-find-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: var(--ad-paper);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    box-shadow: 0 22px 44px -24px rgba(2, 6, 23, .75);
}

.ad-find-row:focus-within {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

.ad-find-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

.ad-find-field > i {
    position: absolute;
    left: 16px;
    color: var(--ad-muted);
    pointer-events: none;
}

.ad .ad-find-select {
    width: 100%;
    min-width: 0;
    min-height: 2.9rem;
    padding: .4rem 2.4rem .4rem 2.7rem;
    color: var(--ad-ink);
    background: transparent;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 1rem;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.ad .ad-find-select:focus-visible {
    outline: none;
}

.ad .ad-find-select option,
.ad .ad-find-select optgroup {
    color: #0f172a;
    background: #ffffff;
}

.ad .ad-find-btn {
    min-height: 2.9rem;
    padding: 0 1.4rem;
    color: #ffffff;
    background: var(--ad-navy);
    border-color: var(--ad-navy);
}

.ad .ad-find-btn:hover {
    background: color-mix(in srgb, var(--ad-navy) 84%, #000000);
}

:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode) .ad-find-row {
    background: #1b2842;
    border-color: rgba(255, 255, 255, .4);
    box-shadow: 0 22px 44px -24px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* ตัวขาวบน #2563eb ได้ 5.2:1 */
:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode) .ad .ad-find-btn {
    background: #2563eb;
    border-color: #2563eb;
}

:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode) .ad .ad-find-btn:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode) .ad .ad-find-select {
    color: #f1f5f9;
}

/* ═══════════════════════════════════════════════════════════════════════
   การ์ด "วันนี้": กระจกสีเข้ม แผ่นปฏิทิน และสามแถวที่กดไปยังคำตอบได้
   ═══════════════════════════════════════════════════════════════════════ */

.ad-today-card {
    min-width: 0;
    padding: 18px;
    color: #ffffff;
    background: rgba(2, 6, 23, .3);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 24px;
    box-shadow: 0 30px 60px -32px rgba(2, 6, 23, .85), inset 0 1px 0 rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.ad-today-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 2px 14px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.ad-today-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ad-sans);
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ad-on-hero-2);
}

.ad-today-title::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, .28);
}

.ad-day {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "n m"
        "n w";
    align-items: center;
    column-gap: 14px;
}

/* แผ่นปฏิทิน: พื้นขาว ตัวเลขน้ำเงินเข้ม แถบทองด้านบน สีคงที่ทั้งสองโหมด */
.ad-day-n {
    grid-area: n;
    position: relative;
    display: grid;
    place-items: center;
    width: 4.1rem;
    height: 4.1rem;
    padding-top: 6px;
    overflow: hidden;
    font-family: var(--ad-serif);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    color: #172554;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 14px 28px -16px rgba(2, 6, 23, .9);
    font-variant-numeric: tabular-nums;
}

.ad-day-n::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 7px;
    background: #fbbf24;
}

.ad-day-m {
    grid-area: m;
    align-self: end;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
    color: #ffffff;
}

.ad-day-w {
    grid-area: w;
    align-self: start;
    font-size: .88rem;
    line-height: 1.4;
    color: var(--ad-on-hero-2);
}

.ad-clock {
    margin-left: .35rem;
    font-weight: 600;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.ad-today {
    display: grid;
    gap: 8px;
}

.ad .ad-today-link {
    display: grid;
    grid-template-columns: 2.3rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 12px 9px 9px;
    color: #ffffff;
    text-decoration: none;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    transition: background-color .2s var(--ad-ease), border-color .2s var(--ad-ease);
}

.ad .ad-today-link:hover {
    background: rgba(2, 6, 23, .2);
    border-color: rgba(255, 255, 255, .5);
}

.ad-today-ic {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    border-radius: 11px;
}

.ad-today-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ad-today-k,
.ad-today-sub {
    font-size: .78rem;
    line-height: 1.45;
    color: var(--ad-on-hero-2);
}

.ad-today-v {
    font-family: var(--ad-serif);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    color: #ffffff;
    overflow-wrap: anywhere;
}

/* สถานะของแถว: จุดหน้าตัวเลข (ทอง = ต้องติดตาม เขียว = เรียบร้อย) คำบอกสถานะเป็นตัวอักษรอยู่แล้ว */
.ad-today-row:is(.is-warn, .is-ok) .ad-today-v::before {
    content: "";
    display: inline-block;
    width: .55rem;
    height: .55rem;
    margin-right: .45rem;
    vertical-align: .12em;
    border-radius: 50%;
}

.ad-today-row.is-warn .ad-today-v::before {
    background: #fbbf24;
}

.ad-today-row.is-ok .ad-today-v::before {
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, .3);
}

.ad-today-go {
    font-size: .85rem;
    color: var(--ad-on-hero-2);
    transition: translate .2s var(--ad-ease);
}

.ad .ad-today-link:hover .ad-today-go {
    color: #ffffff;
    translate: 3px 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   แถบ "วันนี้ในตัวเลข": กระจกเข้มแถวเดียว ไอคอนบนแผ่นขาว ตัวเลขนับขึ้น
   ช่องแรกกว้างกว่าและมีแถบองค์ประกอบของทั้งวัน ช่องอื่นมีจุดสีเป็นคำอธิบายแถบ
   ═══════════════════════════════════════════════════════════════════════ */

.ad-band {
    margin-top: clamp(24px, 2.4vw, 32px);
}

.ad-band-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 18px;
    margin-bottom: 10px;
    padding-inline: 4px;
}

.ad-band-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ad-serif);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.4;
    color: #ffffff;
}

.ad-band-title::before {
    content: "";
    width: 28px;
    height: 3px;
    border-radius: 3px;
    background: var(--ad-gold);
}

.ad-band-note {
    font-size: .82rem;
    line-height: 1.6;
    color: var(--ad-on-hero-2);
}

.ad .ad-band-more {
    display: inline-block;
    min-height: 24px;
    margin-left: 12px;
    padding-block: .1rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .5);
    text-underline-offset: 3px;
}

.ad .ad-band-more:hover {
    text-decoration-color: #ffffff;
    text-decoration-thickness: 2px;
}

.ad-facts {
    display: flex;
    overflow: hidden;
    background: rgba(2, 6, 23, .28);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 22px;
    box-shadow: 0 30px 60px -34px rgba(2, 6, 23, .85), inset 0 1px 0 rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.ad-fact {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 16px clamp(12px, 1.3vw, 20px);
}

.ad-fact + .ad-fact {
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .14);
}

.ad-fact.has-chart {
    flex-grow: 1.9;
    flex-wrap: wrap;
}

.ad-fact-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.05rem;
    color: #1d4ed8;
    background: linear-gradient(150deg, #ffffff 0%, #dbeafe 100%);
    border-radius: 14px;
    box-shadow: 0 14px 26px -16px rgba(2, 6, 23, .9);
}

.ad-fact-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ad-fact-k {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .84rem;
    line-height: 1.4;
    color: var(--ad-on-hero-2);
}

.ad-fact-v {
    font-size: .92rem;
    line-height: 1.25;
    color: var(--ad-on-hero-2);
}

.ad-fact-v b {
    font-family: var(--ad-serif);
    font-size: clamp(1.6rem, 1.15rem + 1.1vw, 2.2rem);
    font-weight: 600;
    line-height: 1.15;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ad-fact-s {
    font-size: .78rem;
    line-height: 1.45;
    color: var(--ad-on-hero-2);
    overflow-wrap: anywhere;
}

/* แถบองค์ประกอบของทั้งวัน อยู่เต็มความกว้างใต้ตัวเลขของช่องแรก */
.ad-mix.is-hero {
    flex: 1 0 100%;
    height: 10px;
    margin-top: 4px;
}

/* ── แถบองค์ประกอบ (ใช้ทั้งบนหัวหน้าและในตาราง) ช่องไฟ 2px หักให้เองด้วย flex ── */
.ad-mix {
    display: flex;
    gap: 2px;
    min-width: 0;
}

.ad-seg {
    min-width: 3px;
    background: var(--m-present);
    transform-origin: left center;
}

.ad-seg:first-child {
    border-radius: 4px 0 0 4px;
}

.ad-seg:last-child {
    border-radius: 0 4px 4px 0;
}

.ad-seg:only-child {
    border-radius: 4px;
}

.ad-seg.is-late { background: var(--m-late); }
.ad-seg.is-travel { background: var(--m-travel); }
.ad-seg.is-missing { background: var(--m-missing); }
.ad-seg.is-uncounted { background: var(--m-uncounted); }

/* ลา: ลายทแยง (รูปทรงต่างจากมาปกติ ไม่พึ่งสีอย่างเดียว) */
.ad-seg.is-leave {
    background: repeating-linear-gradient(135deg, var(--m-leave) 0 2px, transparent 2px 4px);
    box-shadow: inset 0 0 0 1px var(--m-leave);
}

/* ยังไม่ลงเวลา: กรอบกลวง */
.ad-seg.is-pending {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--m-ring);
}

.ad-key {
    display: inline-block;
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--m-present);
}

.ad-key.is-late { background: var(--m-late); }
.ad-key.is-travel { background: var(--m-travel); }
.ad-key.is-missing { background: var(--m-missing); }

.ad-key.is-leave {
    background: repeating-linear-gradient(135deg, var(--m-leave) 0 2px, transparent 2px 4px);
    box-shadow: inset 0 0 0 1px var(--m-leave);
}

.ad-key.is-pending {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--m-ring);
}

/* ═══════════════════════════════════════════════════════════════════════
   ๒ การ์ดลอย: ผู้ที่ยังไม่ลงเวลา (ซ้าย) และยังไม่ลงเวลาออก (ขวา)
   ═══════════════════════════════════════════════════════════════════════ */

.ad-float-sec {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * clamp(62px, 5.8vw, 86px));
}

.ad-float {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 1fr);
    gap: clamp(16px, 2vw, 28px);
    padding: clamp(16px, 1.8vw, 24px);
    background: var(--ad-paper);
    border: 1px solid var(--ad-line);
    border-radius: 24px;
    box-shadow: var(--ad-shadow-float);
}

.ad-float-main,
.ad-float-side {
    min-width: 0;
    scroll-margin-top: 5rem;
}

.ad-float-main:focus,
.ad-float-side:focus,
.ad-panel:focus,
.ad-sec:focus {
    outline: none;
}

.ad-float-side {
    padding-left: clamp(16px, 2vw, 28px);
    border-left: 1px solid var(--ad-line);
}

.ad-float-head {
    margin-bottom: 12px;
}

.ad-float-title {
    font-family: var(--ad-serif);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
}

.ad-float-sub {
    margin-top: .1rem;
    padding-left: 16px;
    font-size: .86rem;
    color: var(--ad-muted);
}

.ad-groups {
    display: grid;
}

/* หนึ่งแถวต่อกลุ่มสาระ: ชื่อกลุ่มทางซ้าย รายชื่อเป็นชิปเรียงต่อกันทางขวา */
.ad-group {
    display: grid;
    grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
    align-items: start;
    gap: 6px 14px;
    padding: 10px 0;
    border-top: 1px solid var(--ad-line);
}

.ad-group:first-child {
    padding-top: 0;
    border-top: 0;
}

.ad-group-t {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 7px;
    font-family: var(--ad-sans);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ad-ink-2);
}

.ad-group-n {
    min-width: 1.6rem;
    padding: 0 .45rem;
    font-size: .78rem;
    font-weight: 700;
    text-align: center;
    color: var(--ad-brand);
    background: var(--ad-brand-soft);
    border-radius: 999px;
}

.ad-people {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ad .ad-person {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 2.3rem;
    padding: 2px 12px 2px 2px;
    color: var(--ad-ink);
    text-decoration: none;
    background: var(--ad-paper);
    border: 1px solid var(--ad-line);
    border-radius: 999px;
    transition: background-color .2s var(--ad-ease), border-color .2s var(--ad-ease);
}

.ad .ad-person:hover {
    background: var(--ad-brand-soft);
    border-color: var(--ad-brand);
}

.ad-person .ad-av {
    width: 30px;
    height: 30px;
    font-size: .74rem;
}

.ad-person-n {
    min-width: 0;
    font-size: .9rem;
    overflow-wrap: anywhere;
}

.ad-flag {
    flex: none;
    padding: 0 .45rem;
    font-size: .72rem;
    font-weight: 700;
    color: var(--ad-alert);
    border: 1px solid currentColor;
    border-radius: 999px;
}

/* ใบลาที่ยังรออนุมัติ: บอกไว้ ไม่นับ */
.ad-flag.is-wait {
    color: var(--ad-warn-fg);
}

/* รูปบุคลากร หรืออักษรย่อบนพื้นกลาง (สีเดียวทุกคน ไม่ไล่สีวน) */
.ad-av {
    flex: none;
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 50%;
    background: var(--ad-paper-alt);
    box-shadow: 0 0 0 1px var(--ad-line);
}

.ad-av.is-initials {
    display: grid;
    place-items: center;
    font-size: .8rem;
    font-weight: 700;
    color: var(--ad-ink-2);
}

.ad-rows {
    display: grid;
    gap: 2px;
}

.ad .ad-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 2.8rem;
    padding: 5px 8px 5px 4px;
    color: var(--ad-ink);
    text-decoration: none;
    border-radius: 12px;
    transition: background-color .2s var(--ad-ease);
}

.ad .ad-row:hover {
    background: var(--ad-brand-soft);
}

.ad-row-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ad-row-n {
    font-size: .94rem;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.ad-row-d {
    font-size: .8rem;
    color: var(--ad-muted);
}

.ad-row-t {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: .84rem;
    color: var(--ad-muted);
    white-space: nowrap;
}

.ad-row-t b {
    font-size: 1rem;
    color: var(--ad-ink);
    font-variant-numeric: tabular-nums;
}

.ad-row-s,
.ad-row-late {
    font-size: .76rem;
}

.ad-row-late {
    font-weight: 700;
    color: var(--ad-warn-fg);
}

.ad-st {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    color: var(--ad-muted);
}

.ad-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--m-present);
}

.ad-st.is-late { color: var(--ad-warn-fg); font-weight: 600; }
.ad-st.is-late .ad-dot { background: var(--m-late); }
.ad-st.is-travel .ad-dot { background: var(--m-travel); }
.ad-st.is-leave .ad-dot { background: var(--m-leave); }
.ad-st.is-absent .ad-dot,
.ad-st.is-unrecorded .ad-dot { background: var(--m-missing); }

/* ═══════════════════════════════════════════════════════════════════════
   ส่วนทั่วไป: หัวข้อมีขีดสีนำ แผงมีแถบหัว (แบบหน้าแรก)
   ═══════════════════════════════════════════════════════════════════════ */

.ad-sec {
    padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem);
    scroll-margin-top: 4.5rem;
}

.ad-sec-alt {
    background: var(--ad-paper-alt);
    border-block: 1px solid var(--ad-line);
}

.ad-h {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-bottom: clamp(1.1rem, .9rem + .8vw, 1.5rem);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ad-line);
}

.ad-h-text {
    min-width: 0;
}

.ad-h h2 {
    font-family: var(--ad-serif);
    font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
    font-weight: 600;
    line-height: 1.35;
}

.ad-h p {
    margin-top: .2rem;
    padding-left: 16px;
    color: var(--ad-muted);
}

.ad-lead {
    position: relative;
    padding-left: 16px;
}

.ad-lead::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    bottom: .18em;
    width: 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--ad-brand), var(--tb1-accent, #0ea5e9));
    transform-origin: center top;
}

.ad .ad-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 2.4rem;
    padding: 0 .95rem 0 1.15rem;
    color: var(--ad-brand);
    background: var(--ad-brand-soft);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s var(--ad-ease);
}

.ad-float-main .ad-more {
    margin-top: 14px;
}

.ad .ad-more i {
    font-size: .85em;
    transition: translate .2s var(--ad-ease);
}

.ad .ad-more:hover {
    border-color: var(--ad-brand);
}

.ad .ad-more:hover i {
    translate: 3px 0;
}

.ad-note {
    margin-top: .75rem;
    font-size: .86rem;
    color: var(--ad-muted);
}

.ad-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ad-gap);
    align-items: start;
}

.ad-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--ad-paper);
    border: 1px solid var(--ad-line);
    border-radius: var(--ad-r);
    box-shadow: var(--ad-shadow);
    scroll-margin-top: 5rem;
}

.ad-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 14px 18px;
    background: linear-gradient(180deg, var(--ad-paper-alt), var(--ad-paper));
    border-bottom: 1px solid var(--ad-line);
    border-radius: var(--ad-r) var(--ad-r) 0 0;
}

.ad-panel-ic {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    color: var(--ad-brand);
    background: var(--ad-brand-soft);
    border-radius: 12px;
    font-size: 1rem;
}

.ad-panel-title {
    flex: 1 1 10rem;
    min-width: 0;
    font-family: var(--ad-serif);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ad-ink);
}

.ad-panel-sub {
    display: block;
    font-family: var(--ad-sans);
    font-size: .84rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ad-muted);
}

.ad-panel-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 14px 18px 18px;
}

.ad-pill {
    padding: 1px 9px;
    font-size: .76rem;
    font-weight: 700;
    color: var(--ad-brand);
    background: var(--ad-brand-soft);
    border-radius: 999px;
}

.ad-quiet {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem 1.1rem;
    background: var(--ad-paper-alt);
    border: 1px dashed var(--ad-line-bold);
    border-radius: 14px;
}

.ad-quiet-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    color: var(--ad-brand);
    background: var(--ad-brand-soft);
    border-radius: 12px;
}

.ad-quiet p {
    color: var(--ad-ink-2);
}

.ad-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1rem;
    margin-bottom: .6rem;
    font-size: .8rem;
    color: var(--ad-ink-2);
}

.ad-legend li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.ad-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ad-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.ad-tbl th,
.ad-tbl td {
    position: relative;
    padding: .5rem .55rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--ad-line);
}

.ad-tbl thead th {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ad-muted);
    border-bottom-color: var(--ad-line-bold);
}

.ad-tbl tbody th {
    font-weight: 600;
}

.ad-tbl .is-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ad-tbl td.is-crit {
    font-weight: 600;
    color: var(--ad-alert);
}

.ad-tbl td.is-warn {
    font-weight: 600;
    color: var(--ad-warn-fg);
}

.ad-tbl tr.is-today th {
    box-shadow: inset 3px 0 0 var(--ad-brand);
}

.ad-bar-col {
    width: 45%;
    min-width: 9rem;
}

.ad-mix.is-row {
    height: 12px;
}

.ad-cell-note,
.ad-cell-of {
    font-size: .76rem;
    font-weight: 400;
    color: var(--ad-muted);
}

.ad-cell-note {
    display: block;
}

.ad .ad-rules {
    display: grid;
    gap: .3rem;
    padding-left: 1.2rem;
    font-size: .88rem;
    color: var(--ad-ink-2);
    list-style: disc;
}

.ad-rules .is-warn {
    font-weight: 600;
    color: var(--ad-warn-fg);
}

/* ═══════════════════════════════════════════════════════════════════════
   จอแคบ
   ═══════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 1279.98px) {
    .ad-facts {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ad-fact.has-chart {
        grid-column: 1 / -1;
    }

    .ad-fact + .ad-fact {
        box-shadow: none;
    }

    .ad-fact {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
    }

    .ad-fact.has-chart {
        box-shadow: none;
    }

    .ad-fact:not(.has-chart):not(:nth-child(3n + 2)) {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 1px 0 0 rgba(255, 255, 255, .14);
    }
}

@media screen and (max-width: 1023.98px) {
    .ad-float {
        grid-template-columns: minmax(0, 1fr);
    }

    .ad-float-side {
        padding-left: 0;
        padding-top: 18px;
        border-left: 0;
        border-top: 1px solid var(--ad-line);
    }

    .ad-grid-2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .ad-today-card {
        display: grid;
        grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
        gap: 0 18px;
    }

    .ad-today-head {
        margin: 0;
        padding: 0 16px 0 2px;
        border-bottom: 0;
        border-right: 1px solid rgba(255, 255, 255, .16);
    }
}

@media screen and (max-width: 679.98px) {
    .ad-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ad-fact {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14) !important;
    }

    .ad-fact.has-chart {
        box-shadow: none !important;
    }

    .ad-fact:not(.has-chart) {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .ad-fact-ic {
        width: 2.3rem;
        height: 2.3rem;
        font-size: .95rem;
        border-radius: 12px;
    }

    .ad-today-card {
        display: block;
    }

    .ad-today-head {
        margin-bottom: 12px;
        padding: 0 2px 14px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .16);
    }

    .ad-find-row {
        flex-wrap: wrap;
        border-radius: 22px;
    }

    .ad-find-field {
        flex-basis: 100%;
    }

    .ad .ad-find-btn {
        width: 100%;
    }

    .ad-orb.is-a {
        width: 26rem;
        height: 26rem;
        right: -14rem;
    }
}

@media screen and (max-width: 576px) {
    .ad-wrap {
        padding-inline: 12px;
    }

    .ad-group {
        grid-template-columns: minmax(0, 1fr);
    }

    .ad-group-t {
        padding-top: 0;
    }

    .ad-hero-acts .ad-btn {
        flex: 1 1 auto;
    }

    .ad-panel-body,
    .ad-panel-head {
        padding-inline: 14px;
    }

    .ad-bar-col {
        min-width: 7rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   การเคลื่อนไหว (แบบหน้าแรก)
   ★ ทุกอย่างอยู่ใน prefers-reduced-motion: no-preference
   ★ สถานะ "รอเล่น" มีเฉพาะเมื่อสคริปต์ติดคลาส ad-motion แล้ว และไม่ติดเมื่อหน้าโหลดใหม่เอง
     ทุกนาที (ad-still) ตัวเลขและแถบจึงไม่เล่นซ้ำทุกนาที
   ═══════════════════════════════════════════════════════════════════════ */

@media screen and (prefers-reduced-motion: no-preference) {
    .ad:not(.ad-still) .ad-hero-main > *,
    .ad:not(.ad-still) .ad-today-card,
    .ad:not(.ad-still) .ad-band {
        animation: ad-rise .75s var(--ad-ease) both;
    }

    .ad-hero-main > :nth-child(2) { animation-delay: .05s; }
    .ad-hero-main > :nth-child(3) { animation-delay: .1s; }
    .ad-hero-main > :nth-child(4) { animation-delay: .15s; }
    .ad-hero-main > :nth-child(5) { animation-delay: .2s; }
    .ad-today-card { animation-delay: .14s; }
    .ad-band { animation-delay: .24s; }

    .ad:not(.ad-still) .ad-orb {
        animation: ad-orb-in 2.6s var(--ad-ease) both;
    }

    .ad-orb.is-b { animation-delay: .2s; }
    .ad-orb.is-c { animation-delay: .4s; }

    .ad:not(.ad-still) .ad-today-title::before {
        animation: ad-ping 1.4s ease-out .6s 2 both;
    }

    /* แถบองค์ประกอบยืดจากซ้ายเมื่อเข้าที่ */
    .ad-seg {
        transition: transform .9s var(--ad-ease) .35s;
    }

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

    .ad-rise {
        transition: translate .75s var(--ad-ease) var(--ad-d, 0s);
    }

    .ad.ad-motion [data-ad-reveal].ad-rise:not(.is-in) {
        translate: 0 28px;
    }

    .ad-lead::before {
        transition: transform .5s var(--ad-ease) .12s;
    }

    .ad.ad-motion [data-ad-reveal]:not(.is-in) .ad-lead::before {
        transform: scaleY(0);
    }
}

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

@keyframes ad-rise {
    from {
        transform: translateY(16px);
    }

    to {
        transform: none;
    }
}

@keyframes ad-orb-in {
    from {
        transform: translate(0, 40px) scale(.85);
    }

    to {
        transform: none;
    }
}

@keyframes ad-ping {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, .6);
    }

    100% {
        box-shadow: 0 0 0 9px rgba(52, 211, 153, 0);
    }
}

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

    .ad .ad-more:hover i,
    .ad .ad-today-link:hover .ad-today-go {
        translate: none;
    }

    .ad .ad-btn:active {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   โหมดคอนทราสต์สูง: ไฟล์กลางบังคับพื้นดำ ตัวอักษรขาว ลิงก์และปุ่มเหลือง
   ที่นี่เขียนเฉพาะสิ่งที่ไฟล์กลางไม่รู้จัก และให้สถานะที่แยกด้วยสีมีรูปทรงรองรับ
   ═══════════════════════════════════════════════════════════════════════ */

html.tb1-contrast-high body.ad-page {
    background: #000000;
}

html.tb1-contrast-high .ad {
    --ad-shadow: none;
    --ad-shadow-float: none;
    --ad-paper: #000000;
    --ad-paper-alt: #000000;
    --ad-on-hero-2: #ffffff;
    --ad-line: #ffffff;
    --ad-line-bold: #ffffff;
    --m-present: #ffffff;
    --m-late: #facc15;
    --m-travel: #ffffff;
    --m-leave: #ffffff;
    --m-missing: #facc15;
    --m-ring: #ffffff;
    --m-uncounted: #666666;
}

html.tb1-contrast-high .ad-hero {
    background: #000000 !important;
    border-bottom: 3px solid #ffffff;
    --m-present: #ffffff;
    --m-late: #facc15;
    --m-travel: #ffffff;
    --m-leave: #ffffff;
    --m-missing: #facc15;
    --m-ring: #ffffff;
}

html.tb1-contrast-high .ad-hero::before,
html.tb1-contrast-high .ad-hero::after,
html.tb1-contrast-high .ad-hero-fx,
html.tb1-contrast-high .ad-day-n::before {
    display: none;
}

html.tb1-contrast-high .ad :where(.ad-tag, .ad-find-row, .ad-today-card, .ad-facts, .ad-today-link, .ad-today-ic,
    .ad-float, .ad-panel, .ad-panel-head, .ad-panel-ic, .ad-pill, .ad-quiet, .ad-quiet-ic, .ad-fact-ic, .ad-group-n, .ad-av, .ad-sec-alt) {
    background: #000000 !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html.tb1-contrast-high .ad :where(.ad-panel-ic, .ad-pill, .ad-quiet-ic, .ad-fact-ic, .ad-today-ic, .ad-group-n, .ad-av) {
    color: #ffffff !important;
    border: 1px solid #ffffff;
}

/* ไฟล์กลางไม่ได้บังคับสีของสิ่งเหล่านี้ หมึกของหน้าจะไปอยู่บนพื้นดำ */
html.tb1-contrast-high .ad :where(b, dt, dd, time, caption, label, h1, h2, h3, .ad-tag, .ad-fact-k, .ad-fact-v, .ad-fact-s, .ad-band-note,
    .ad-day-m, .ad-day-w, .ad-today-title, .ad-today-k, .ad-today-sub, .ad-panel-sub, .ad-float-sub, .ad-row-d, .ad-row-t, .ad-st, .ad-legend) {
    color: #ffffff !important;
}

html.tb1-contrast-high .ad .ad-tag.is-gold,
html.tb1-contrast-high .ad .ad-flag {
    color: #facc15 !important;
    border-color: #facc15 !important;
}

html.tb1-contrast-high .ad .ad-find-row {
    border: 2px solid #facc15 !important;
}

html.tb1-contrast-high .ad .ad-find-select {
    color: #ffffff !important;
    background-color: #000000 !important;
}

html.tb1-contrast-high .ad :is(.ad-btn, .ad-more, .ad-tag-btn):not(:hover),
html.tb1-contrast-high .ad :is(a.ad-btn, a.ad-more):hover {
    color: #facc15 !important;
    background: #000000 !important;
    border-color: #facc15 !important;
    box-shadow: none !important;
}

html.tb1-contrast-high .ad .ad-tag-btn[aria-pressed="true"] {
    color: #000000 !important;
    background: #facc15 !important;
}

html.tb1-contrast-high .ad :is(.ad-today-link, .ad-person, .ad-row):hover {
    background: #000000 !important;
    border-color: #facc15 !important;
    box-shadow: inset 0 0 0 1px #facc15 !important;
}

html.tb1-contrast-high .ad .ad-day-n {
    color: #000000 !important;
    background: #facc15;
    box-shadow: none;
}

html.tb1-contrast-high .ad .ad-band-title::before,
html.tb1-contrast-high .ad .ad-today-title::before,
html.tb1-contrast-high .ad .ad-lead::before {
    background: #ffffff;
    box-shadow: none;
}

html.tb1-contrast-high .ad .ad-today-row.is-warn .ad-today-v::before {
    background: #facc15;
}

html.tb1-contrast-high .ad .ad-today-row.is-ok .ad-today-v::before {
    background: #000000;
    border: 2px solid #ffffff;
    box-shadow: none;
}

/* สายเหลืองทึบ ขาด/ไม่ลงเวลาเหลืองลายทแยง ไปราชการกรอบขาว ลาลายทแยงขาว */
html.tb1-contrast-high .ad :is(.ad-seg, .ad-key).is-missing {
    background: repeating-linear-gradient(135deg, #facc15 0 3px, #000000 3px 5px);
}

html.tb1-contrast-high .ad :is(.ad-seg, .ad-key).is-travel {
    background: #000000;
    box-shadow: inset 0 0 0 2px #ffffff;
}

html.tb1-contrast-high .ad :where(.ad-fact, .ad-today-head, .ad-h, .ad-float-side) {
    border-color: #ffffff !important;
}

html.tb1-contrast-high .ad .ad-tbl :is(th, td) {
    border-color: #ffffff;
}

html.tb1-contrast-high body.ad-page a.ad-skip {
    color: #000000;
    background: #facc15 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ฉบับพิมพ์: ตัวเลขของวัน รายชื่อที่ต้องติดตาม และตาราง บนพื้นขาว
   ═══════════════════════════════════════════════════════════════════════ */

@media print {
    @page {
        size: A4;
        margin: 12mm 10mm;
    }

    body.ad-page {
        background: #ffffff !important;
    }

    .ad {
        --ad-ink: #000000;
        --ad-ink-2: #1f2937;
        --ad-muted: #374151;
        --ad-paper: #ffffff;
        --ad-paper-alt: #ffffff;
        --ad-line: #cbd5e1;
        --ad-on-hero-2: #1f2937;
        font-size: 10pt;
        color-scheme: light;
    }

    .ad-hero {
        --m-present: #5a697f;
        --m-late: #d97706;
        --m-travel: #1d4ed8;
        --m-leave: #94a3b8;
        --m-missing: #b91c1c;
        --m-ring: #5a697f;
    }

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

    .ad .ad-rise,
    .ad [data-ad-reveal] {
        translate: none !important;
    }

    .ad .ad-seg,
    .ad .ad-lead::before {
        transform: none !important;
    }

    body.ad-page .tb1-navbar,
    body.ad-page .tb1-topbar,
    body.ad-page .premium-footer,
    .ad-skip,
    .ad-find,
    .ad-hero-acts,
    .ad-hero-fx,
    .ad-fact-ic,
    .ad-today-go,
    .ad-tag-btn,
    .ad-more,
    .ad-hero::before,
    .ad-hero::after {
        display: none !important;
    }

    .ad-hero,
    .ad-hero.has-float {
        padding-block: 0 10px;
        color: #000000;
        background: #ffffff !important;
        border-bottom: 2px solid #000000;
    }

    .ad-title,
    .ad-title-2,
    .ad-band-title,
    .ad-day-m,
    .ad-today-v,
    .ad-fact-v b,
    .ad-clock {
        color: #000000;
        text-shadow: none;
    }

    .ad .ad-tag,
    .ad .ad-tag.is-gold {
        color: #000000;
        background: #ffffff;
        border-color: #999999;
    }

    .ad-today-card,
    .ad-facts,
    .ad .ad-today-link {
        color: #000000;
        background: #ffffff !important;
        border-color: #999999;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .ad-today-ic {
        color: #000000;
        background: #ffffff;
        border: 1px solid #999999;
    }

    .ad-day-n {
        border: 1px solid #999999;
        box-shadow: none;
    }

    .ad-fact + .ad-fact,
    .ad-fact {
        box-shadow: inset 1px 0 0 #cbd5e1 !important;
    }

    .ad-float-sec {
        margin-top: 10px;
    }

    /* A4 is narrow: the three shortcuts sit in one row, and the lists and
       the week tables take the full width instead of sharing it */
    .ad-today {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ad-float,
    .ad-sec[aria-labelledby="ad-week-h"] .ad-grid-2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .ad-h,
    .ad-float-head,
    .ad-panel-head {
        break-inside: avoid;
        break-after: avoid;
    }

    .ad-float,
    .ad-panel {
        border-color: #999999;
        box-shadow: none;
    }

    .ad-sec {
        padding-block: 10px;
    }

    .ad-sec-alt {
        background: #ffffff;
    }

    .ad-seg,
    .ad-key,
    .ad-dot,
    .ad-day-n::before,
    .ad-lead::before {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* long panels may continue on the next page (rows never split, table
       heads repeat); only short blocks are kept whole */
    .ad-float-side,
    #ad-method,
    .ad-group,
    .ad-tbl tr,
    .ad-rows li,
    .ad-today-card,
    .ad-band {
        break-inside: avoid;
    }

    .ad .ad-person,
    .ad .ad-row,
    .ad .ad-today-link,
    .ad .ad-band-more {
        color: #000000 !important;
        text-decoration: none !important;
    }

    .ad-scroll {
        overflow: visible !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   ขนาดและฟอนต์ชุดเดียวกับหน้าสาธารณะ (อ้างอิง personal.php) · 2 ต.ค. 2569
   ══════════════════════════════════════════════════════════════════════════
   ★ ทั้งเว็บย่อเหลือ 90% ด้วย tb1-display-scale.css (personal.php ตัวอักษรพื้นฐาน 14.4px)
     แต่หน้าผู้ดูแลที่ชื่อขึ้นต้นด้วย add_ / มีคำว่า dashboard, manage ถูกยกเว้นจากไฟล์นั้น
     หน้าหัวน้ำเงินจึงมีสองขนาดปนกัน (16px กับ 14.4px) — ตรงนี้ย่อเฉพาะขนาดตัวอักษรให้เท่ากัน
     โดยไม่ดึงกฎอื่นของ tb1-display-scale.css มาด้วย และยังทำตามปุ่มขนาดตัวอักษร เล็ก/ปกติ/ใหญ่
     (เบราว์เซอร์ที่ไม่รู้จัก :has() ได้ขนาดเดิม 100%)
   ★ หัวเรื่องในหัวน้ำเงินเป็นตัวเซริฟ Noto Serif Thai เหมือน personal.php
     เดิมข้อความใน <span class="ad-nw"> ถูกธีมกลางบังคับเป็น Sarabun (body :where(span) … !important)
     หัวเรื่องจึงกลายเป็นตัวไม่มีหัวขนาด 50–56px · กฎนี้ (0,1,1) ชนะกฎของธีม (0,0,1) */
html:not(.tb1-display-compact).tb1-font-normal:has(> body.ad-page) {
    font-size: 90%;
}

/* 31 ต.ค. 2569 ทั้งเว็บเริ่มที่เล็กสุด: ยังไม่เลือกขนาด (ไม่มีคลาส) = เล็ก เดิม = ปกติ 90% */
html:not(.tb1-display-compact):has(> body.ad-page),
html:not(.tb1-display-compact).tb1-font-small:has(> body.ad-page) {
    font-size: 81%;
}

html:not(.tb1-display-compact).tb1-font-large:has(> body.ad-page) {
    font-size: 101.25%;
}

.ad-title {
    font-size: clamp(1.9rem, 4.6vw, 2.9rem);
    line-height: 1.25;
    letter-spacing: 0;
}

.ad-title span {
    font-family: var(--ad-serif) !important;
}

.ad-sub {
    font-size: clamp(.98rem, 1.5vw, 1.08rem);
}

.ad-panel-title {
    font-size: 1.12rem;
}

.ad-panel-sub {
    font-size: .86rem;
}

.ad-today-k {
    font-size: .84rem;
}

.ad-today-sub {
    font-size: .82rem;
}

/* ★ 22 ต.ค. 2569 (ครูหนึ่ง): ระบบไปราชการและระบบคำสั่งที่เปิดในหน้าต่างแอปงานครูบนมือถือ หัวน้ำเงินเตี้ยลง
   ไม่มีป้ายแท็กและคำอธิบายยาว หัวเรื่องเล็กลง บรรทัดที่บอกข้อเท็จจริงหรือผลการทำรายการ (.ad-sub-key: คุณไปในฐานะ…
   วันที่ของคำสั่ง ไม่พบรายการ บันทึกแล้ว) ยังอยู่ · display-mode สำหรับภาพแรก, html.tb1-in-app สำหรับ iPhone
   (attendance/assets/js/app-return.js) · หน้าระบบลงเวลาและระบบลาคงเดิม (คำอธิบายของหน้าเหล่านั้นบอกสถานะ) */
@media (display-mode: standalone) and (max-width: 767.98px) {
    :is(body.tv-page, body.dr-page, body.da-page) .ad-hero {
        padding-top: 12px;
    }

    :is(body.tv-page, body.dr-page, body.da-page) .ad-hero :is(.ad-tags, .ad-sub:not(.ad-sub-key)) {
        display: none;
    }

    :is(body.tv-page, body.dr-page, body.da-page) .ad-hero .ad-title {
        font-size: clamp(1.3rem, 1rem + 1.6vw, 1.6rem);
        line-height: 1.3;
    }
}

@media (max-width: 767.98px) {
    html.tb1-in-app :is(body.tv-page, body.dr-page, body.da-page) .ad-hero {
        padding-top: 12px;
    }

    html.tb1-in-app :is(body.tv-page, body.dr-page, body.da-page) .ad-hero :is(.ad-tags, .ad-sub:not(.ad-sub-key)) {
        display: none;
    }

    html.tb1-in-app :is(body.tv-page, body.dr-page, body.da-page) .ad-hero .ad-title {
        font-size: clamp(1.3rem, 1rem + 1.6vw, 1.6rem);
        line-height: 1.3;
    }
}