/*
 * [dia_tcas_calendar] — the full-page calendar's styles (2026-10-29: moved out of the page into this static file; loaded
 * in <head> by dia_tcas_calendar_maybe_enqueue_fonts() in dia-calendar.php with ?ver=). The few rules the page needs
 * before this file arrives stay inline (dia_tcas_calendar_critical_css()).
 */
	/* The page's own top-level heading (rendered by the theme, outside
	   .dia-cal) should match this component's Kanit heading font too —
	   this print_assets() block only ever loads on a page that rendered
	   [dia_tcas_calendar] (see the lazy wp_footer hook below), so this
	   stays scoped to that page rather than becoming a site-wide theme
	   override. (Deliberately not writing the literal heading tag here —
	   a raw substring grep for it would double-count this comment, same
	   footgun as the dia-deadline-item/dia-deadlines-footer CSS-noise
	   case documented in deploy-notes.md.) */
	.td-page-header .td-page-title { font-family: Kanit, sans-serif; }
	.dia-cal { font-family: Sarabun, 'Noto Sans Thai', Tahoma, sans-serif; color: #1a1a1a; max-width: 1068px; margin: 0 auto; line-height: 1.6; --ink: #1a1a1a; --muted: #5f5f5f; --line: #e6e6e6; --accent: #fc5b16; --accent-ink: #c2410c; }
	.dia-cal h1, .dia-cal h2, .dia-cal h3 { font-family: Kanit, sans-serif; letter-spacing: 0; }
	.dia-cal [hidden] { display: none !important; }
	.dia-cal p { margin: 0; } /* the theme gives every <p> a 21px bottom margin */
	.dia-cal button, .dia-cal input { font-family: inherit; }
	.dia-cal :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
	.dia-cal-nw { white-space: nowrap; }
	/* Per-type colour tokens: --c = brand colour (dots, bars), --ct = darker
	   text-safe shade (>= 4.5:1 on --cb and on white), --cb = soft tint. */
	.dia-cal .t-official, .dia-cal .is-t-official { --c: #fc5b16; --ct: #b43d08; --cb: #fff1e9; --cbd: #f9cfb6; --ce: #f7a273; --cr: #ffe3d3; }
	.dia-cal .t-direct, .dia-cal .is-t-direct { --c: #0162ff; --ct: #0150d0; --cb: #e8f0ff; --cbd: #c3d6ff; --ce: #8fb4ff; --cr: #dde9ff; }
	.dia-cal .t-camp, .dia-cal .is-t-camp { --c: #00b050; --ct: #007a38; --cb: #e6f7ee; --cbd: #b9e6cb; --ce: #86d9a6; --cr: #d8f4e4; }
	.dia-cal .t-none, .dia-cal .is-t-none { --c: #999999; --ct: #5f5f5f; --cb: #efefef; --cbd: #d9d9d9; --ce: #c4c4c4; --cr: #ececec; }

	.dia-cal-app { display: flex; flex-direction: column; gap: 24px; padding: 8px 0 40px; }
	.dia-cal-header { display: flex; flex-direction: column; gap: 8px; }
	.dia-cal-kicker { font-family: Kanit, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--accent-ink); }
	.dia-cal-lead { margin: 0; font-family: Sarabun, sans-serif; font-size: 16px; line-height: 1.65; color: #444; max-width: 680px; }
	.dia-cal-subline { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-family: Sarabun, sans-serif; font-size: 14px; color: var(--muted); margin-top: 2px; }
	.dia-cal-subline .dia-cal-nw { display: inline-flex; align-items: center; gap: 8px; }
	.dia-cal-subline a { color: #0150d0; text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 2px; }
	.dia-cal-subline a:hover { text-decoration: underline; }
	.dia-cal-footer .dia-cal-subline { margin-top: 10px; }
	.dia-cal-footer a { color: #0150d0; }

	/* "My universities" panel */
	.dia-cal-mine { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; background: #fffaf6; border: 1px solid #f0dccd; border-radius: 10px; }
	.dia-cal-mine-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
	.dia-cal h2.dia-cal-mine-title { margin: 0; padding: 0; border: 0; background: none; text-transform: none; text-align: start; font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--ink); }
	.dia-cal-mine-hint { margin: 0; font-size: 14px; color: var(--muted); }
	.dia-cal-combo-label { display: block; font-family: Kanit, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.6; color: #444; margin-bottom: 4px; }
	.dia-cal-combo-field { position: relative; }
	.dia-cal input.dia-cal-q { display: block; box-sizing: border-box; width: 100%; min-height: 46px; padding: 0 14px; font-size: 16px; line-height: 1.6; color: var(--ink); background: #fff; border: 1.5px solid #a89d93; border-radius: 8px; }
	.dia-cal input.dia-cal-q::placeholder { color: #6f6a65; }
	.dia-cal-listbox { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; max-height: 300px; overflow-y: auto; background: #fff; border: 1px solid #cfc6bd; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
	.dia-cal-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; min-height: 44px; box-sizing: border-box; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 15px; line-height: 1.6; }
	.dia-cal-opt.is-active, .dia-cal-opt:hover { background: #fff1e9; }
	.dia-cal-opt-short { font-family: Kanit, sans-serif; font-weight: 600; }
	.dia-cal-opt-name { color: #444; min-width: 0; overflow-wrap: break-word; }
	.dia-cal-opt-meta { font-size: 14px; color: var(--muted); white-space: nowrap; }
	.dia-cal-opt-none { padding: 12px; font-size: 14px; color: var(--muted); }
	.dia-cal-selected { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
	.dia-cal-selected:empty { display: none; }
	.dia-cal-uchip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 14px; border: 0; border-radius: 999px; background: #272727; color: #fff; font-family: Kanit, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.6; cursor: pointer; }
	.dia-cal-uchip:hover { background: #000; }
	.dia-cal-uchip-x { font-size: 18px; line-height: 1; }
	.dia-cal-mine-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
	.dia-cal-linkbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; background: #fff; color: var(--ink); border: 1px solid #bdb5ad; border-radius: 8px; font-family: Kanit, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.6; cursor: pointer; }
	.dia-cal-linkbtn:hover { border-color: var(--ink); }
	.dia-cal-linkbtn.is-quiet { border-color: transparent; background: none; color: #0150d0; padding: 0 6px; }
	.dia-cal-linkbtn.is-quiet:hover { text-decoration: underline; }
	.dia-cal-check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 15px; cursor: pointer; }
	.dia-cal-check input, .dia-cal-regopt input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: 0 0 auto; }
	.dia-cal-regions { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 6px 20px; padding-top: 4px; }
	.dia-cal-region { margin: 0; padding: 0; border: 0; min-width: 0; }
	.dia-cal-region legend { padding: 0 0 2px; font-family: Kanit, sans-serif; font-size: 14px; font-weight: 600; color: #b43d08; }
	.dia-cal-regopt { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: 15px; cursor: pointer; }
	.dia-cal-regopt { align-items: flex-start; padding: 6px 0; }
	.dia-cal-regtext { min-width: 0; line-height: 1.6; }
	.dia-cal-regtext b { font-family: Kanit, sans-serif; font-weight: 600; }
	.dia-cal-regtext .nm { color: #444; font-size: 14px; overflow-wrap: break-word; }
	.dia-cal-regopt .n { color: var(--muted); font-size: 14px; white-space: nowrap; }
	.dia-cal-regopt .n::before { content: '· '; }
	.dia-cal-mine-sub > span { font-weight: 600; }
	.dia-cal-printbtn svg { flex: 0 0 auto; }

	/* The paper copy is built by buildPrint(); it lives in <body>, outside .dia-cal, so it styles itself. */
	#dia-cal-print { display: none; }
	@page { size: A4 portrait; margin: 14mm 12mm 16mm; }
	@media print {
		html, body.dia-cal-printing { background: #fff !important; background-image: none !important; margin: 0 !important; padding: 0 !important; }
		body.dia-cal-printing > *:not(#dia-cal-print) { display: none !important; }
		body.dia-cal-printing #dia-cal-print { display: block; color: #000; font-family: Sarabun, 'Noto Sans Thai', Tahoma, sans-serif; font-size: 10.5pt; line-height: 1.55; }
		/* the theme's own print CSS sets break-before/inside: avoid on tables, rows and headings — with every row "avoid" nothing may break, so reset first */
		#dia-cal-print, #dia-cal-print * { break-before: auto; break-after: auto; break-inside: auto; page-break-before: auto; page-break-after: auto; page-break-inside: auto; }
		#dia-cal-print .dia-cal-pt-h { margin: 0 0 3mm; font-family: Kanit, sans-serif; font-size: 18pt; font-weight: 600; line-height: 1.4; color: #000; }
		#dia-cal-print .dia-cal-pt-meta { margin-bottom: 5mm; padding-bottom: 3mm; border-bottom: 1.2pt solid #000; font-size: 10pt; }
		#dia-cal-print .dia-cal-pt-meta b { font-family: Kanit, sans-serif; font-weight: 500; }
		#dia-cal-print .dia-cal-pt { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 10pt; }
		#dia-cal-print .dia-cal-pt col.c-date { width: 34mm; }
		#dia-cal-print .dia-cal-pt col.c-type { width: 15mm; }
		#dia-cal-print .dia-cal-pt col.c-uni { width: 26mm; }
		#dia-cal-print .dia-cal-pt col.c-cb { width: 14mm; }
		/* Chrome only repeats a header on every page when the thead itself is unbreakable */
		#dia-cal-print .dia-cal-pt thead { display: table-header-group; break-inside: avoid; page-break-inside: avoid; }
		#dia-cal-print .dia-cal-pt tr { break-inside: avoid; page-break-inside: avoid; }
		#dia-cal-print .dia-cal-pt th, #dia-cal-print .dia-cal-pt td { padding: 1.6mm 1.5mm; border-bottom: .5pt solid #000; text-align: left; vertical-align: top; overflow-wrap: break-word; }
		#dia-cal-print .dia-cal-pt thead th { font-family: Kanit, sans-serif; font-size: 9.5pt; font-weight: 600; border-bottom: 1.2pt solid #000; }
		#dia-cal-print .dia-cal-pt tr.m th { padding-top: 4mm; font-family: Kanit, sans-serif; font-size: 11.5pt; font-weight: 600; border-bottom: 1pt solid #000; break-after: avoid; page-break-after: avoid; }
		#dia-cal-print .c-cb { text-align: center !important; }
		#dia-cal-print .ctx { display: block; font-size: 8.5pt; }
		#dia-cal-print .cb { display: inline-block; width: 4mm; height: 4mm; border: .8pt solid #000; vertical-align: middle; }
		#dia-cal-print .dia-cal-pt-empty { margin: 8mm 0; font-size: 11pt; }
		#dia-cal-print .dia-cal-pt-foot { margin: 6mm 0 0; padding-top: 3mm; border-top: .5pt solid #000; font-size: 9.5pt; }
	}
	.dia-cal-mine-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 10px; border-top: 1px dashed #e4cfbf; font-size: 14px; color: #444; }
	.dia-cal-mine-sub a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid #bdb5ad; border-radius: 8px; background: #fff; color: #0150d0; font-weight: 600; text-decoration: none; }
	.dia-cal-mine-sub a:hover { border-color: #0150d0; }


	.dia-cal-hero-box { container-type: inline-size; }
	.dia-cal-hero { --wsh: 304px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	@container (max-width: 700px) { .dia-cal-hero { --wsh: auto; grid-template-columns: minmax(0, 1fr); } } /* stacked: each card is as tall as its content */
	.dia-cal-hero:empty { display: none; }
	.dia-cal-hero-card { position: relative; box-sizing: border-box; height: var(--wsh, auto); overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 16px; background: var(--cb); border: 1px solid var(--cbd); border-radius: 12px; color: var(--ink); text-decoration: none; transition: box-shadow .15s ease-out, transform .15s ease-out; }
	.dia-cal-hero-card.t-official { --ct: #c2410c; --cb: #fff1ea; --cbd: #f0cdb9; }
	.dia-cal-hero-card:hover { color: var(--ink); box-shadow: 0 8px 20px rgba(0,0,0,.10); }
	@media (prefers-reduced-motion: no-preference) {
		a.dia-cal-hero-card:hover, a.dia-cal-hero-card:focus-visible { transform: translateY(-2px); }
	}
	.dia-cal-hero-top { display: flex; align-items: center; gap: 10px; }
	.dia-cal-hero-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--ct); }
	.dia-cal-hero-title { flex: 1 1 auto; min-width: 0; font-family: Kanit, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--ct); }
	.dia-cal-urgent { flex: 0 0 auto; padding: 0 10px; border-radius: 999px; background: #b91c1c; color: #fff; font-family: Kanit, sans-serif; font-size: 12px; font-weight: 600; line-height: 1.7; }
	.dia-cal-hero-num-row { display: flex; align-items: baseline; gap: 8px; }
	.dia-cal-hero-lab, .dia-cal-hero-unit { font-family: Kanit, sans-serif; font-size: 15px; color: #444; }
	.dia-cal-hero-num { font-family: Kanit, sans-serif; font-size: 48px; font-weight: 700; line-height: 1.15; color: var(--ct); }
	.dia-cal-hero-item-title { font-family: Kanit, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.6; color: #1a1a1a; }
	.dia-cal-hero-meta { font-family: Sarabun, sans-serif; font-size: 14px; color: #444; }
	/* week-strip cards (รับตรงที่กำลังปิดเร็ว ๆ นี้ / ค่ายถัดไป) */
	.dia-cal-ws { gap: 4px; }
	.dia-cal-stretch { position: absolute; inset: 0; z-index: 0; border-radius: 12px; }
	.dia-cal-ws > :not(.dia-cal-stretch) { position: relative; z-index: 1; }
	.dia-cal-ws a:focus-visible, .dia-cal-ws button:focus-visible { outline: 3px solid var(--ct); outline-offset: 2px; }
	.dia-cal-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-top: 2px; }
	.dia-cal-col { appearance: none; -webkit-appearance: none; display: flex; flex-direction: column; align-items: center; min-height: 44px; margin: 0; padding: 3px 0 4px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; cursor: pointer; }
	.dia-cal-col.zero { cursor: default; }
	.dia-cal-col:not(.zero):not(.hi):hover { background: rgba(255, 255, 255, .6); }
	.dia-cal-col.hi { background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1.5px var(--ct); }
	.dia-cal-col .cn { height: 18px; font-family: Kanit, sans-serif; font-size: 14px; font-weight: 700; line-height: 18px; color: var(--ct); }
	.dia-cal-col .barw { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 38px; border-bottom: 2px solid var(--cbd); }
	.dia-cal-col .barw i { display: block; width: 22px; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--ct) 55%, #fff); }
	.dia-cal-col.hi .barw { border-bottom-color: var(--ct); }
	.dia-cal-col.hi .barw i { background: var(--ct); }
	.dia-cal-col .wd { margin-top: 3px; font-family: Sarabun, sans-serif; font-size: 14px; line-height: 1.3; color: #444; white-space: nowrap; }
	.dia-cal-col.tod .wd { font-weight: 700; color: var(--ink); }
	.dia-cal-col .dn { font-family: Kanit, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink); }
	.dia-cal-fh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 2px; font-family: Kanit, sans-serif; font-size: 16px; line-height: 1.5; color: var(--ct); }
	.dia-cal-fh b { font-weight: 600; }
	.dia-cal-fh .when { font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; }
	.dia-cal-fh .when b { font-size: 20px; font-weight: 700; color: var(--ct); }
	.dia-cal .dia-cal-wlist { list-style: none; margin: 0; padding: 0; }
	.dia-cal .dia-cal-wlist li { list-style: none; margin: 0; padding: 0; }
	.dia-cal-wlist a { display: flex; align-items: baseline; gap: 8px; height: 24px; overflow: hidden; white-space: nowrap; text-decoration: none; font-size: 14px; line-height: 1.7; color: var(--ink); }
	.dia-cal-wlist a:hover b { text-decoration: underline; }
	.dia-cal-wlist .one a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: auto; white-space: normal; font-family: Kanit, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.6; }
	.dia-cal-wlist b { flex: 0 0 auto; min-width: 0; max-width: 62%; overflow: hidden; text-overflow: ellipsis; font-family: Kanit, sans-serif; font-weight: 600; } /* the university name wins: a long round text (sub-project titles) is what gets cut */
	.dia-cal-wlist .rd { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #333; }
	.dia-cal .dia-cal-wlist li.has-det { display: flex; align-items: baseline; gap: 10px; }
	.dia-cal-wlist li.has-det > :first-child { flex: 1 1 auto; min-width: 0; }
	.dia-cal-wlist li .dia-cal-wdet { display: inline; flex: 0 0 auto; height: auto; font-family: Sarabun, sans-serif; font-size: 13px; font-weight: 600; color: var(--ct); } /* beats ".one a" */
	.dia-cal-wlist li .dia-cal-wdet:hover { text-decoration: underline; }
	.dia-cal-det { border-color: var(--cbd); color: var(--ct); }
	.dia-cal-wlist .cnt { flex: 0 0 auto; align-self: center; padding: 0 8px; border: 1px solid var(--cbd); border-radius: 999px; background: #fff; color: var(--ct); font-family: Kanit, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.55; }
	.dia-cal-wbody { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
	.dia-cal-wmore { align-self: flex-start; display: inline-flex; align-items: center; gap: .3em; min-height: 28px; margin-top: auto; font-family: Kanit, sans-serif; font-size: 14px; font-weight: 500; color: var(--ct); text-decoration: none; white-space: nowrap; }
	.dia-cal-wmore:hover { text-decoration: underline; }
	.dia-cal-ws-msg { margin-top: 8px; font-family: Sarabun, sans-serif; font-size: 15px; line-height: 1.65; color: #444; }
	.dia-cal-prog { height: 8px; margin-top: 6px; border-radius: 999px; background: #fff; overflow: hidden; }
	.dia-cal-prog i { display: block; height: 100%; border-radius: 999px; background: var(--ct); }
	.dia-cal-prog-t { font-size: 13px; color: #444; }

	/* TCAS70 path: one timeline (wide screens), vertical stepper (phones) */
	.dia-cal h2.dia-cal-track-label { margin: 0 0 8px; padding: 0; border: 0; background: none; text-transform: none; text-align: start; font-size: 15px; font-weight: 600; line-height: 1.5; color: #444; }
	.dia-cal-tl-inner { position: relative; background: #fff; border: 1px solid #ece6e0; border-radius: 12px; overflow: hidden; }
	.dia-cal-tl-todayrow { position: relative; height: 32px; }
	.dia-cal-tl-todaychip { position: absolute; top: 4px; left: clamp(52px, var(--x), calc(100% - 52px)); transform: translateX(-50%); padding: 0 10px; border-radius: 999px; background: var(--accent-ink); color: #fff; font-family: Kanit, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.7; white-space: nowrap; }
	.dia-cal-tl-axis { position: relative; height: 28px; border-top: 1px solid #f0e6dd; border-bottom: 1px solid #e6dcd2; }
	.dia-cal-tl-mon, .dia-cal-yr-mon { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding-left: 6px; border-left: 1px solid #eee3da; font-family: Kanit, sans-serif; font-size: 13px; font-weight: 500; color: #444; white-space: nowrap; }
	.dia-cal-tl-mon.is-odd, .dia-cal-yr-mon.is-odd { background: #faf5f0; }
	.dia-cal-tl-body { position: relative; }
	.dia-cal-tl-col, .dia-cal-yr-col { position: absolute; top: 0; bottom: 0; background: #faf5f0; }
	.dia-cal-tl-list { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
	.dia-cal-tl-item { position: absolute; left: 0; right: 0; height: 56px; margin: 0; }
	.dia-cal-tl-bar { position: absolute; top: 10px; height: 12px; box-sizing: border-box; border-radius: 6px; background: #ffd9c4; border: 1px solid #f4a77d; overflow: hidden; }
	.dia-cal-tl-bar i { display: block; height: 100%; background: #fc5b16; }
	.dia-cal-tl-label { position: absolute; top: 27px; display: flex; flex-direction: column; font-family: Sarabun, sans-serif; font-size: 13px; line-height: 1.5; color: #444; white-space: nowrap; }
	.dia-cal-tl-label b { font-family: Kanit, sans-serif; font-size: 13px; font-weight: 600; color: #1a1a1a; }
	.dia-cal-tl-item.is-past .dia-cal-tl-label b { color: #555; }
	.dia-cal-tl-nowline { position: absolute; top: 32px; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent-ink); }
	.dia-cal-tl-nowdot { position: absolute; top: 46px; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fc5b16; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--accent-ink); box-sizing: border-box; }
	.dia-cal-tl-nowdot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #fc5b16; opacity: 0; }
	@media (prefers-reduced-motion: no-preference) {
		.dia-cal-tl-nowdot::after { animation: dia-cal-pulse 2s ease-out infinite; }
	}
	@keyframes dia-cal-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3); opacity: 0; } }
	.dia-cal-steps { display: none; margin: 0; padding: 0; list-style: none; }
	.dia-cal-step { position: relative; display: flex; gap: 12px; margin: 0; padding: 0 0 14px; }
	.dia-cal-step::before { content: ''; position: absolute; left: 11px; top: 26px; bottom: 0; width: 2px; background: #e2d7cc; }
	.dia-cal-step:last-child::before { display: none; }
	.dia-cal-step-dot { position: relative; box-sizing: border-box; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #cfc3b8; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #5f5f5f; font-size: 13px; line-height: 1; }
	.dia-cal-step-main { min-width: 0; padding-top: 1px; }
	.dia-cal-step-name { font-family: Kanit, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.6; color: #1a1a1a; }
	.dia-cal-step-date { font-size: 14px; color: #444; }
	.dia-cal-step.is-past .dia-cal-step-dot { background: #e9e2dc; border-color: #e9e2dc; }
	.dia-cal-step.is-past .dia-cal-step-dot::before { content: '\2713'; }
	.dia-cal-step.is-past .dia-cal-step-name, .dia-cal-step.is-past .dia-cal-step-date { color: #6b6b6b; font-weight: 400; }
	.dia-cal-step.is-now .dia-cal-step-dot { background: #fc5b16; border-color: #fc5b16; box-shadow: 0 0 0 4px #ffe3d3; }
	.dia-cal-step.is-now .dia-cal-step-main { margin-top: -6px; padding: 7px 12px; border-radius: 10px; background: #fff1e9; border: 1px solid #f9cfb6; flex: 1 1 auto; }
	.dia-cal-step.is-now .dia-cal-step-name { font-weight: 700; }
	.dia-cal-step.is-next .dia-cal-step-dot { border-color: #fc5b16; }
	.dia-cal-step-badge { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 999px; background: var(--accent-ink); color: #fff; font-family: Kanit, sans-serif; font-size: 12px; font-weight: 600; line-height: 1.7; vertical-align: 1px; }
	.dia-cal-step-badge.is-next { background: #fff1e9; color: #b43d08; border: 1px solid #f9cfb6; }
	.dia-cal-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

	.dia-cal-controls { position: sticky; top: 0; background: #fff; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid #ececec; }
	.dia-cal-filters { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
	.dia-cal-frow { display: flex; align-items: center; gap: 10px; }
	.dia-cal-flabel { flex: 0 0 44px; font-family: Kanit, sans-serif; font-size: 13px; font-weight: 500; color: var(--muted); }
	.dia-cal-chips { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
	.dia-cal-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid #cfcfcf; color: #272727; font-family: Kanit, sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; }
	.dia-cal-chip .n { color: var(--muted); }
	.dia-cal-chip.is-active { background: #272727; border-color: #272727; color: #fff; }
	.dia-cal-chip.is-active .n { color: rgba(255,255,255,.8); }
	.dia-cal-chip-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
	.dia-cal-viewswitch { display: inline-flex; border: 1px solid #cfcfcf; border-radius: 8px; overflow: hidden; }
	.dia-cal-viewswitch button { min-height: 40px; border: 0; background: #fff; color: #272727; padding: 0 14px; font-family: Kanit, sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; }
	.dia-cal-viewswitch button.is-active { background: #272727; color: #fff; }

	.dia-cal-view { display: none; }
	.dia-cal-view.is-active { display: block; }

	/* List view: month = a band above its rows (the <h2> stays for SEO) */
	.dia-cal-month-group { margin-top: 22px; }
	.dia-cal-month-group-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; padding: 10px 14px; background: #f6f1ec; border-radius: 6px; }
	.dia-cal-month-group-title { font-family: Kanit, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.4; color: #1a1a1a; }
	.dia-cal h2.dia-cal-month-group-title { margin: 0; padding: 0; border: 0; background: none; text-transform: none; letter-spacing: normal; text-align: start; font-style: normal; font-size: 20px; font-weight: 600; line-height: 1.4; color: #1a1a1a; }
	.dia-cal-month-group-count { font-family: Sarabun, sans-serif; font-size: 14px; color: #5a4d44; }

	.dia-cal-item { display: grid; grid-template-columns: 176px minmax(0, 1fr) auto; gap: 8px 20px; align-items: start; padding: 16px 12px; border-bottom: 1px solid #ececec; transition: background-color .12s ease-out; }
	.dia-cal-item:hover { background-color: #faf7f4; }
	.dia-cal-item-when { display: flex; flex-direction: column; gap: 2px; }
	.dia-cal-item-range { font-family: Kanit, sans-serif; font-size: 17px; font-weight: 600; line-height: 1.6; color: #1a1a1a; }
	.dia-cal-item-status { font-family: Kanit, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.6; }
	.dia-cal-item-status.s-open { color: var(--accent-ink); }
	.dia-cal-item-status.s-soon { color: #b91c1c; }
	.dia-cal-item-status.s-later { color: #5f5f5f; }
	.dia-cal-item-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
	.dia-cal-item-top { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
	.dia-cal-item-badge { display: inline-block; padding: 1px 10px; border-radius: 999px; background: var(--cb, #efefef); color: var(--ct, #5f5f5f); font-family: Kanit, sans-serif; font-size: 12px; font-weight: 600; line-height: 1.6; }
	.dia-cal-item-org { font-family: Sarabun, sans-serif; font-size: 14px; color: #444; min-width: 0; overflow-wrap: break-word; }
	.dia-cal-item-title { font-family: Kanit, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.6; color: #1a1a1a; overflow-wrap: break-word; }
	.dia-cal-item-notewrap { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
	.dia-cal-item-note { max-width: 40em; margin: 0; font-family: Sarabun, sans-serif; font-size: 14px; line-height: 1.6; padding: .1em 0 0; color: #555; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; clip-path: inset(0 0 3px 0); /* hides the tone marks of line 3 that poke into the last px */ }
	.dia-cal-item-notewrap.is-open .dia-cal-item-note { display: block; -webkit-line-clamp: unset; overflow: visible; clip-path: none; }
	.dia-cal-more { min-height: 32px; margin: 0 0 0 -4px; padding: 0 4px; border: 0; background: none; font-size: 14px; font-weight: 600; color: #0150d0; cursor: pointer; }
	.dia-cal-more:hover { text-decoration: underline; }
	.dia-cal-item-actions { display: flex; gap: 8px; align-self: center; flex-wrap: wrap; justify-content: flex-end; }
	.dia-cal-act { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; box-sizing: border-box; padding: 0 12px; font-family: Sarabun, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; color: #3a3a3a; text-decoration: none; border: 1px solid #cfcfcf; border-radius: 8px; background: #fff; white-space: nowrap; }
	.dia-cal-act:hover { border-color: #272727; color: #000; }
	.dia-cal-item { scroll-margin-top: 72px; }
	/* row we just jumped to from the year view: tint that fades out (reduced motion: a plain outline, no animation) */
	.dia-cal-item.is-jump { background-color: #fff1e9; box-shadow: inset 0 0 0 2px #fc5b16; }
	@media (prefers-reduced-motion: no-preference) {
		.dia-cal-item.is-jump { box-shadow: none; animation: dia-cal-jump 1.5s ease-out forwards; }
	}
	@keyframes dia-cal-jump { 0%, 35% { background-color: #ffe3d3; } 100% { background-color: transparent; } }
	.dia-cal-item.is-highlighted { background-color: #fff4ee; transition: background-color .6s ease; }
	/* the row's expand panel (2026-10-29): the toggle in the row body, then the panel — an indented block on the type's
	   tint holding one <section> per kind of content (today: sub-projects). hidden="until-found" must stay find-in-page
	   reachable, so it is not display:none (and has no box while folded). A section heading shows only once a panel holds
	   more than one section (phase 2); alone, the toggle already says what it is. */
	.dia-cal-panel-btn { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 8px; align-self: flex-start; min-height: 36px; box-sizing: border-box; margin: 4px 0 0; padding: 2px 12px; border: 1px solid var(--cbd); border-radius: 8px; background: var(--cb); color: var(--ct); font-family: Kanit, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.5; text-align: left; cursor: pointer; }
	.dia-cal-panel-btn:hover { border-color: var(--ct); }
	.dia-cal-panel-sub { font-family: Sarabun, sans-serif; font-weight: 500; color: #3a3a3a; }
	.dia-cal-panel-caret { display: inline-block; transition: transform .15s ease-out; }
	.dia-cal-panel-btn[aria-expanded="true"] .dia-cal-panel-caret { transform: rotate(180deg); }
	.dia-cal .dia-cal-panel[hidden="until-found"] { display: block !important; content-visibility: hidden; }
	.dia-cal-panel:not([hidden]) { margin: 0 0 8px 28px; border-left: 3px solid var(--cbd); background: #fcfaf7; border-radius: 0 0 6px 0; }
	.dia-cal-psec + .dia-cal-psec { border-top: 1px solid #ece4dc; }
	.dia-cal h3.dia-cal-psec-h { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
	.dia-cal-panel:has(.dia-cal-psec + .dia-cal-psec) h3.dia-cal-psec-h { position: static; width: auto; height: auto; margin: 0; padding: 12px 16px 0; overflow: visible; clip: auto; white-space: normal; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ct); }
	.dia-cal-kids-filter { padding: 12px 12px 4px 16px; }
	.dia-cal input.dia-cal-kids-q { display: block; box-sizing: border-box; width: 100%; max-width: 420px; min-height: 40px; margin: 0; padding: 0 12px; font-family: Sarabun, sans-serif; font-size: 16px; line-height: 1.6; color: var(--ink); background: #fff; border: 1.5px solid #a89d93; border-radius: 8px; }
	.dia-cal-kids-more { display: block; min-height: 40px; margin: 6px 12px 12px 16px; padding: 0 14px; border: 1px solid var(--cbd); border-radius: 8px; background: #fff; color: var(--ct); font-family: Kanit, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.5; cursor: pointer; }
	.dia-cal-kids-more:hover { border-color: var(--ct); }
	.dia-cal-kids-none { padding: 12px 16px; font-family: Sarabun, sans-serif; font-size: 14px; color: var(--muted); }
	/* long sub-project titles (up to ~230 characters): two lines, the whole title in the tooltip */
	.dia-cal-item.is-kid .dia-cal-item-title, .dia-cal-item.is-agg .dia-cal-item-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
	/* "<round> · N โครงการ" unfolded in place: month view day panel (after the row) and week strips (box under the cards) */
	.dia-cal-agg-kids:not([hidden]), .dia-cal-strip-detail:not([hidden]) { margin: 0 0 8px 28px; border-left: 3px solid var(--cbd); background: #fcfaf7; border-radius: 0 0 6px 0; }
	.dia-cal-strip-detail:not([hidden]) { margin: 12px 0 0; border: 1px solid var(--cbd); border-left-width: 3px; border-radius: 0 8px 8px 0; }
	.dia-cal-sd-head { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 12px; padding: 10px 8px 6px 16px; }
	.dia-cal h3.dia-cal-sd-title:focus { outline: none; } /* focused by script so screen readers start there, not a control */
	.dia-cal h3.dia-cal-sd-title { margin: 0; padding: 0; border: 0; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--ct); }
	.dia-cal-sd-sub { font-family: Sarabun, sans-serif; font-size: 14px; color: #3a3a3a; }
	.dia-cal-sd-close { margin-left: auto; min-width: 40px; min-height: 40px; border: 0; border-radius: 8px; background: none; color: #3a3a3a; font-size: 22px; line-height: 1; cursor: pointer; }
	.dia-cal-sd-close:hover { background: var(--cb); }
	.dia-cal-agg-list { display: inline-flex; align-items: center; gap: .3em; min-height: 40px; margin: 0 12px 8px 16px; font-family: Kanit, sans-serif; font-size: 14px; font-weight: 500; color: #0150d0; text-decoration: none; }
	.dia-cal-agg-list:hover { text-decoration: underline; }
	.dia-cal-wlist .dia-cal-wagg { display: flex; align-items: baseline; gap: 8px; width: 100%; height: 24px; margin: 0; padding: 0; border: 0; background: none; overflow: hidden; white-space: nowrap; text-align: left; font-family: inherit; font-size: 14px; line-height: 1.7; color: var(--ink); cursor: pointer; }
	.dia-cal-wlist .dia-cal-wagg::after { content: '▾'; flex: 0 0 auto; margin-left: auto; padding-left: 4px; color: var(--ct); }
	.dia-cal-wlist .dia-cal-wagg[aria-expanded="true"]::after { content: '▴'; }
	.dia-cal-wlist .dia-cal-wagg:hover b { text-decoration: underline; }
	.dia-cal-wlist .one .dia-cal-wagg { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: auto; white-space: normal; font-family: Kanit, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.6; }
	.dia-cal-item.is-kid { grid-template-columns: 148px minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 12px 12px 16px; border-bottom-color: #f0ebe6; }
	.dia-cal-item.is-kid:last-child { border-bottom: 0; }
	.dia-cal-item.is-kid .dia-cal-item-range { font-size: 15px; }
	.dia-cal-item.is-kid .dia-cal-item-status { font-size: 13px; }
	.dia-cal-item.is-kid .dia-cal-item-title { font-size: 15px; line-height: 1.55; }
	.dia-cal-item.is-kid .dia-cal-item-note { font-size: 13px; }
	.dia-cal-item.is-kid .dia-cal-act { min-height: 32px; padding: 0 10px; font-size: 13px; }
	.dia-cal-item-ctx { font-family: Sarabun, sans-serif; font-size: 13px; line-height: 1.5; color: var(--muted); }
	.dia-cal-ev-n { font-family: Kanit, sans-serif; font-weight: 600; }

	@media (max-width: 680px) {
		.dia-cal-item { grid-template-columns: 1fr; gap: 6px; padding: 16px 4px; }
		.dia-cal-item-when { flex-direction: row; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0 12px; }
		.dia-cal-item-actions { justify-content: flex-start; align-self: start; gap: 10px; padding-top: 4px; }
		.dia-cal-act { min-height: 44px; padding: 0 16px; }
		.dia-cal-more { min-height: 44px; }
		.dia-cal-panel-btn, .dia-cal-kids-more { min-height: 44px; }
		.dia-cal input.dia-cal-kids-q { min-height: 44px; }
		.dia-cal-kids-filter { padding-left: 12px; }
		.dia-cal-kids-more { margin-left: 12px; }
		.dia-cal-panel:not([hidden]) { margin-left: 6px; }
		.dia-cal-item.is-kid { grid-template-columns: 1fr; gap: 4px; padding: 12px 6px 12px 12px; }
		.dia-cal-item.is-kid .dia-cal-act { min-height: 44px; padding: 0 14px; font-size: 14px; }
		.dia-cal-mine { padding: 16px 14px; }
		.dia-cal-hero-num { font-size: 32px; }
		.dia-cal-regions { max-height: 440px; overflow-y: auto; }
		.dia-cal-linkbtn, .dia-cal-uchip, .dia-cal-chip, .dia-cal-viewswitch button, .dia-cal-monthnav button, .dia-cal-subline a, .dia-cal-mine-sub a, .dia-cal-check, .dia-cal-regopt { min-height: 44px; }
	}

	.dia-cal-monthnav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
	.dia-cal-monthnav button { min-height: 40px; border: 1px solid #cfcfcf; background: #fff; border-radius: 8px; padding: 0 14px; font-family: Kanit, sans-serif; font-size: 14px; font-weight: 500; color: #272727; cursor: pointer; }
	.dia-cal-monthnav button:disabled { opacity: .35; cursor: default; }
	.dia-cal-monthnav-title { font-family: Kanit, sans-serif; font-size: 20px; font-weight: 600; color: #1a1a1a; }
	.dia-cal-evdot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--c, #999); vertical-align: middle; }
	.dia-cal-monthfull { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 12px; padding: 10px 12px; background: #fffaf6; border: 1px solid #f0dccd; border-radius: 10px; }
	.dia-cal-monthfull-t { margin-right: 4px; font-family: Kanit, sans-serif; font-size: 14px; font-weight: 500; color: #444; }
	.dia-cal-fchip { display: inline-block; max-width: 240px; padding: 0 10px; border-radius: 999px; background: var(--cb); border: 1px solid var(--cbd); color: var(--ct); font-size: 13px; line-height: 1.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.dia-cal-fmore { min-height: 32px; padding: 0 12px; border: 1px solid #bdb5ad; border-radius: 999px; background: #fff; color: #272727; font-family: Kanit, sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; }
	.dia-cal-monthgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
	.dia-cal-monthgrid-wd { padding-bottom: 4px; font-family: Kanit, sans-serif; font-size: 13px; color: var(--muted); text-align: center; }
	.dia-cal-monthgrid-wd.is-wkend { color: #8b3a1b; }
	.dia-cal-daycell { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; min-height: 98px; margin: 0; padding: 6px; background: #fff; border: 1px solid #e3e3e3; border-radius: 8px; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color .12s ease-out; }
	.dia-cal-daycell:hover { background: #faf7f4; }
	.dia-cal-daycell.is-empty { border: 0; background: transparent; cursor: default; }
	.dia-cal-daycell.is-wkend { background: #f9f5f1; }
	.dia-cal-daycell.is-past { background: #f6f6f6; border-color: #ececec; }
	.dia-cal-daycell.is-past .dia-cal-dn { color: #6b6b6b; font-weight: 500; }
	.dia-cal-daycell.is-today { background: #fff1e9; border: 2px solid #fc5b16; padding: 5px; }
	.dia-cal-daycell.is-selected { box-shadow: inset 0 0 0 2px #272727; }
	.dia-cal-dn { font-family: Kanit, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.5; color: #1a1a1a; }
	.dia-cal-dtoday { position: absolute; top: 4px; right: 5px; padding: 0 7px; border-radius: 999px; background: var(--accent-ink); color: #fff; font-family: Kanit, sans-serif; font-size: 12px; font-weight: 600; line-height: 1.6; }
	.dia-cal-devs { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
	.dia-cal-ev { display: block; min-width: 0; padding: 0 6px; border-radius: 4px; font-family: Sarabun, sans-serif; font-size: 12px; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.dia-cal-ev b { margin-right: 2px; font-family: Kanit, sans-serif; font-weight: 600; }
	.dia-cal-ev.is-close { background: #b91c1c; color: #fff; font-weight: 600; }
	.dia-cal-ev.is-open { background: var(--cb); color: var(--ct); border: 1px solid var(--cbd); }
	.dia-cal-ev.is-single { padding-left: 0; color: #1a1a1a; }
	.dia-cal-ev.has-n { display: flex; align-items: center; }
	.dia-cal-ev.has-n > b, .dia-cal-ev.has-n > i, .dia-cal-ev.has-n .dia-cal-ev-n { flex: none; }
	.dia-cal-ev.has-n .dia-cal-ev-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
	.dia-cal-ev.has-n > b { margin-right: 5px; } /* the space after it collapses in a flex row */
	.dia-cal-ev.has-n .dia-cal-ev-n { padding-left: 3px; }
	.dia-cal-ev-more { align-self: flex-start; padding: 0 8px; border: 1px solid #bdb5ad; border-radius: 999px; background: #fff; color: #1a1a1a; font-family: Kanit, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.6; }
	.dia-cal-daycell:hover .dia-cal-ev-more { border-color: #1a1a1a; }
	.dia-cal-dots { display: none; }
	.dia-cal-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #999); }
	.dia-cal-dot.is-close { background: #b91c1c; }
	.dia-cal-month-detail { margin-top: 18px; padding-top: 14px; border-top: 1px solid #ececec; }
	.dia-cal-dsec { display: inline-block; margin: 14px 0 2px; padding: 0 10px; border-radius: 999px; font-family: Kanit, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.7; background: #efefef; color: #272727; }
	.dia-cal-dsec.is-close { background: #b91c1c; color: #fff; }
	.dia-cal-dsec.is-open { background: #e8f0ff; color: #0150d0; }
	.dia-cal-ongoing-btn { margin: 14px 0 6px; }
	.dia-cal-month-detail-title { font-family: Kanit, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.6; margin-bottom: 8px; }
	@media (max-width: 600px) {
		.dia-cal-monthgrid { gap: 4px; }
		.dia-cal-daycell { align-items: center; gap: 2px; min-height: 52px; padding: 4px 2px; }
		.dia-cal-daycell.is-today { padding: 3px 1px; }
		.dia-cal-devs, .dia-cal-dtoday { display: none; }
		.dia-cal-dots { display: flex; gap: 3px; justify-content: center; min-height: 10px; }
	}

	/* Year overview (gantt) */
	.dia-cal-yearwrap { overflow-x: auto; border: 1px solid #ece6e0; border-radius: 12px; background: #fff; }
	.dia-cal-yearinner { --lab: 200px; --lh: 28px; position: relative; min-width: 940px; }
	.dia-cal-yr { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); }
	.dia-cal-yr-lab { position: sticky; left: 0; z-index: 3; display: flex; align-items: center; min-width: 0; padding: 0 10px 0 12px; background: #fff; border-right: 1px solid #eee3da; font-family: Kanit, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.6; }
	.dia-cal-yr-lab { gap: 6px; }
	.dia-cal-yr-lab .n { flex: 0 0 auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: #f1ebe5; color: #444; font-family: Sarabun, sans-serif; font-size: 12px; font-weight: 600; line-height: 1.7; text-align: center; }
	.dia-cal-yr-lab a, .dia-cal-yr-lab span { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #272727; text-decoration: none; }
	.dia-cal-yr-lab a:hover { text-decoration: underline; }
	.dia-cal-yr-track { position: relative; }
	.dia-cal-yr-row .dia-cal-yr-track { height: calc(var(--lanes, 1) * var(--lh) + 8px); }
	.dia-cal-yr-todayrow { height: 32px; }
	/* centred on today's x (margin %, of the track), but sticky inside the scroll box so the label is never cut off */
	.dia-cal-yr-todaychip { position: sticky; left: calc(var(--lab) + 6px); right: 6px; display: block; box-sizing: border-box; width: 104px; margin: 4px 0 0 calc(var(--x) - 52px); border-radius: 999px; background: var(--accent-ink); color: #fff; font-family: Kanit, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.7; text-align: center; white-space: nowrap; }
	.dia-cal-yr-axis { height: 28px; border-top: 1px solid #f0e6dd; border-bottom: 1px solid #e6dcd2; }
	.dia-cal-yr-axis .dia-cal-yr-lab { border-right-color: #eee3da; }
	.dia-cal-yr-body { position: relative; }
	.dia-cal-yr-cols { position: absolute; top: 0; bottom: 0; left: var(--lab); right: 0; pointer-events: none; }
	.dia-cal-yr-nowline { position: absolute; top: 0; bottom: 0; z-index: 2; left: calc(var(--lab) + (100% - var(--lab)) * var(--now) / 100); width: 2px; margin-left: -1px; background: var(--accent-ink); pointer-events: none; }
	.dia-cal-yr-row { position: relative; z-index: 1; border-bottom: 1px solid #f3ece5; }
	.dia-cal-yr-group { position: relative; z-index: 1; padding: 5px 0; background: var(--cb); border-top: 1px solid var(--cbd); border-bottom: 1px solid var(--cbd); }
	.dia-cal-yr-gin { position: sticky; left: 12px; display: inline-flex; align-items: center; gap: 4px; margin-left: 12px; font-family: Kanit, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--ct); }
	.dia-cal-yr-gin .n { margin-left: 4px; font-family: Sarabun, sans-serif; font-size: 13px; font-weight: 400; color: #444; }
	.dia-cal-g-bar { position: absolute; top: calc(var(--lane, 0) * var(--lh) + 4px); display: flex; align-items: center; box-sizing: border-box; min-width: 6px; height: 20px; padding: 0 6px; border: 1.5px solid var(--c); border-radius: 6px; background: linear-gradient(90deg, var(--ce) 0, var(--ce) var(--e), var(--cr) var(--e), var(--cr) 100%); color: #1a1a1a; font-family: Sarabun, sans-serif; font-size: 12px; font-weight: 600; line-height: 1; text-align: left; cursor: pointer; overflow: hidden; }
	.dia-cal-g-bar:hover, .dia-cal-g-dia:hover { box-shadow: 0 0 0 2px #1a1a1a, 0 3px 8px rgba(0,0,0,.25); filter: brightness(.96); }
	.dia-cal-g-dia:hover { box-shadow: 0 0 0 2px #1a1a1a; }
	.dia-cal-g-bt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.dia-cal-g-dia, .dia-cal-g-dia-sw { box-sizing: border-box; background: #7c2d12; border: 2px solid #fff; box-shadow: 0 0 0 1px #7c2d12; transform: rotate(45deg); }
	.dia-cal-g-dia { position: absolute; top: calc((var(--lh) + 8px - 14px) / 2); z-index: 1; width: 14px; height: 14px; margin-left: -7px; padding: 0; cursor: pointer; }
	.dia-cal-g-dia-sw { display: inline-block; width: 10px; height: 10px; }
	.dia-cal-g-tip { position: fixed; z-index: 40; display: flex; flex-direction: column; max-width: 300px; padding: 8px 12px; border-radius: 8px; background: #1a1a1a; color: #fff; font-family: Sarabun, sans-serif; font-size: 13px; line-height: 1.6; box-shadow: 0 6px 18px rgba(0,0,0,.25); pointer-events: none; }
	.dia-cal-g-tip.has-action { pointer-events: auto; }
	.dia-cal-g-tipgo { align-self: stretch; min-height: 44px; margin-top: 8px; padding: 0 16px; border: 0; border-radius: 8px; background: #fff; color: #1a1a1a; font-family: Kanit, sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; }
	.dia-cal-g-tip b { font-family: Kanit, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.5; }
	.dia-cal-year-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 12px 14px; border-top: 1px solid #ececec; font-family: Sarabun, sans-serif; font-size: 13px; color: #444; position: sticky; left: 0; }
	.dia-cal-year-legend span { display: inline-flex; align-items: center; gap: 6px; }
	.dia-cal-year-legend .sw { display: inline-block; width: 16px; height: 10px; border: 1.5px solid var(--c); border-radius: 3px; background: var(--cr); box-sizing: border-box; }
	.dia-cal-year-legend .sw.sw-split { border-color: #777; background: linear-gradient(90deg, #aaa 0 50%, #e4e4e4 50% 100%); }
	.dia-cal-year-legend i.dia-cal-year-legend-line { display: inline-block; width: 2px; height: 12px; background: var(--accent-ink); }

	.dia-cal-footer { max-width: 38em; margin-top: 8px; padding-top: 18px; border-top: 1px solid #ececec; font-family: Sarabun, sans-serif; font-size: 14px; line-height: 1.65; color: var(--muted); }
	.dia-cal-empty { font-family: Sarabun, sans-serif; font-size: 15px; line-height: 1.65; color: #444; padding: 16px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

	@media (max-width: 768px) {
	}
	/* Phones: hero cards and the 6-round strip become swipeable rows (next card peeks in),
	   so the list starts near the first screen. Overflow stays inside the row. */
	@media (max-width: 600px) {
		.dia-cal-tl { display: none; }
		.dia-cal-steps { display: block; padding-top: 4px; }
		.dia-cal-yearinner { --lab: 100px; min-width: 780px; }
		.dia-cal-yr-lab { padding: 0 4px 0 8px; font-size: 13px; }
		.dia-cal-yr-lab .n { display: none; } /* the round count stays in the row's title/tooltip */
		.dia-cal-monthnav button, .dia-cal-fmore { min-height: 44px; }
		.dia-cal-controls { position: static; flex-direction: column; align-items: stretch; }
		.dia-cal-frow { align-items: flex-start; gap: 6px; }
		.dia-cal-flabel { flex-basis: 40px; padding-top: 9px; }
		.dia-cal-chips { gap: 6px; }
		.dia-cal-frow .dia-cal-chip { min-height: 40px; padding: 0 11px; font-size: 13px; }
		.dia-cal-yearinner { --lh: 32px; }
		.dia-cal-g-bar { height: 24px; }
		.dia-cal-g-dia::before { content: ''; position: absolute; inset: -12px; }
		.dia-cal-yr-lab a, .dia-cal-yr-lab span { display: block; min-height: 40px; line-height: 40px; } /* block + nowrap keeps the ellipsis */
		.dia-cal-hero-card { padding: 14px 16px; gap: 4px; }
		.dia-cal-wk { gap: 1px; }
		.dia-cal-wlist a, .dia-cal-wlist .dia-cal-wagg { height: 44px; align-items: center; }
		.dia-cal-agg-kids:not([hidden]) { margin-left: 6px; }
		.dia-cal-agg-list, .dia-cal-sd-close { min-height: 44px; min-width: 44px; }
		.dia-cal-wlist .one a { min-height: 44px; }
		.dia-cal-wmore { min-height: 44px; }
		.dia-cal-wbody { min-height: 142px; } /* room for 2 rows + "ดูทั้งหมด" (measured 142px, 2026-10-29: 132 let a day with both grow the card): picking another day never changes the card height */
	}
	@media (prefers-reduced-motion: reduce) {
		.dia-cal *, .dia-cal *::before, .dia-cal *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
	}

/* the server's light list of sub-projects (seen only without JS, or if the data fetch fails) */
.dia-cal-kidlite { margin: 0; padding: 8px 16px 12px 32px; font-family: Sarabun, sans-serif; font-size: 14px; line-height: 1.6; color: #333; }
.dia-cal-kidlite li { margin: 0 0 6px; }
.dia-cal-kidlite a { color: #0150d0; }
.dia-cal-kidlite-d { white-space: nowrap; color: var(--muted); }