/* ────────────────────────────────────────────────────────────────────────── * Shared UI components (plain CSS, โหลดหลัง tailwind.css → survive `make css`) * * .ch-info* — ปุ่ม ⓘ มุมขวาบนการ์ด + popover "วิธีคำนวณ" * markup จาก templates/components/_card_info.html (block tag {% card_info %}) * popover ตัวจริงถูกสร้าง/ย้ายไป โดย JS ใน base.html (position:fixed) * ────────────────────────────────────────────────────────────────────────── */ /* Fixed touch targets for the three icon-only controls in the global topbar. */ .ch-topbar-icon-btn { flex: 0 0 44px; width: 44px; height: 44px; } /* ปุ่มเล็ก inline ติดท้ายชื่อการ์ด (กดดูวิธีคำนวณ) */ .ch-info { display: inline-flex; align-items: center; vertical-align: middle; line-height: 0; margin-left: 4px; } .ch-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 9999px; background: transparent; color: var(--ch-text-4); cursor: pointer; transition: color .15s ease, background-color .15s ease; } .ch-info-btn > svg { width: 14px; height: 14px; } .ch-info-btn:hover, .ch-info-btn[aria-expanded="true"] { color: var(--ch-accent); background: var(--ch-surface-2); } .ch-info-btn:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 1px; } /* popover (สร้างโดย JS, append ที่ body) */ .ch-info-pop { position: fixed; z-index: 1000; width: max-content; max-width: 340px; background: var(--ch-surface); border: 1px solid var(--ch-line); border-radius: 0.625rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08); padding: 0; font-size: 12.5px; line-height: 1.55; color: var(--ch-text-2); overflow: hidden; opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity .12s ease, transform .12s ease; } .ch-info-pop.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .ch-info-pop-inner { max-height: min(60vh, 420px); overflow-y: auto; padding: 11px 13px 12px; } .ch-info-head { font-weight: 600; font-size: 12.5px; color: var(--ch-text); margin: 0 0 5px; padding-bottom: 5px; border-bottom: 1px solid var(--ch-line); } .ch-info-body { color: var(--ch-text-2); } .ch-info-body p { margin: 0 0 6px; } .ch-info-body p:last-child { margin-bottom: 0; } .ch-info-body ul { margin: 4px 0 6px; padding-left: 16px; list-style: disc; } .ch-info-body li { margin: 1px 0; } .ch-info-body b, .ch-info-body strong { color: var(--ch-text); font-weight: 600; } /* บรรทัดสูตร — mono + พื้นอ่อน */ .ch-info-body .ch-info-formula { display: block; margin: 6px 0; padding: 6px 8px; background: var(--ch-surface-2); border: 1px solid var(--ch-line); border-radius: 6px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ch-text); white-space: pre-wrap; word-break: break-word; } /* หมายเหตุ/เงื่อนไขพิเศษ */ .ch-info-body .ch-info-note { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--ch-line); font-size: 11.5px; color: var(--ch-text-3); } /* ────────────────────────────────────────────────────────────────────────── * .ch-ss — searchable select (progressive enhancement จาก