/* mod_my_visitors - สถิติผู้เยี่ยมชมเว็บไซต์ */

.my-vis {
	--vis-cols: 2;
	--vis-size: 22px;
	--vis-weight: 700;
	--vis-ink: #fff;
	/* Written inline only when colours were picked by hand, so these follow the site's tone. */
	--vis-bg1: var(--my-primary, #1b5fa8);
	--vis-bg2: var(--my-light, #2e80d6);
	--vis-c1: var(--my-primary, #1b5fa8);
	--vis-c2: var(--my-light, #5eb8f0);
	--vis-label: var(--my-dark, #13203a);
	--vis-icon: var(--vis-bg1);
	--vis-box-bg: transparent;
	--vis-box-line: var(--my-line, #e5e7eb);
	--vis-today: #e0762c;

	color: var(--vis-label);

	/*
	 * The module measures itself so the headline figure can be sized against
	 * the column it is standing in rather than against the whole window - a
	 * sidebar and a full-width strip need very different type.
	 */
	container-type: inline-size;
}

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

.my-vis__head {
	display: flex; align-items: center; gap: 8px;
	margin: 0 0 12px; font-size: 1.05rem; font-weight: 700;
	color: var(--vis-label);
}
.my-vis__head i { color: var(--vis-icon); }

/* ------------------------------------------------------ the headline total -- */
/*
 * The whole-site total, on a card of its own above everything else. It sets
 * its own --vis-ink / --vis-bg1 / --vis-bg2 so the digit styles underneath
 * pick up its colours rather than the ones the rows use.
 */
.my-vis__hero {
	/*
	 * Its own palette, not the rows'. A module saved before this card existed
	 * carries no colours for it, and inheriting the row colours would dress
	 * the headline figure in settings chosen for something else entirely.
	 * Anything the editor picks is written inline and wins over these.
	 */
	--vis-ink: #fff;
	--vis-bg1: var(--my-dark, #0f3d73);
	--vis-bg2: var(--my-primary, #1b5fa8);

	--hero-card1: color-mix(in srgb, var(--my-primary, #1b5fa8) 9%, #fff);
	--hero-card2: color-mix(in srgb, var(--my-primary, #1b5fa8) 18%, #fff);
	--hero-label: var(--vis-label);
	--hero-size: 40px;
	--hero-weight: 800;

	display: flex; flex-direction: column; gap: 4px;
	margin-bottom: 12px; padding: 16px 18px;
	border-radius: var(--hero-radius, var(--my-radius, 14px));
	background: linear-gradient(150deg, var(--hero-card1), var(--hero-card2));
	color: var(--hero-label);
	box-shadow: 0 2px 14px rgba(16, 40, 80, .08);
	text-align: center;
}
.my-vis__hero[style*="--hero-line"] { border: 1px solid var(--hero-line); }

/* Bare: the figure with nothing behind it. */
.my-vis__hero.is-bare {
	background: none; box-shadow: none; border: 0;
	padding: 4px 0 10px;
}

.my-vis__hero.align-start { text-align: start; align-items: flex-start; }
.my-vis__hero.align-center { text-align: center; align-items: center; }
.my-vis__hero.align-end { text-align: end; align-items: flex-end; }

.my-vis__hero-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	margin-bottom: 2px; font-size: 1.05rem; color: #fff;
	background: linear-gradient(140deg, var(--vis-bg1), var(--vis-bg2));
	box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}

.my-vis__hero-label {
	font-size: .86rem; font-weight: 600; opacity: .85;
	letter-spacing: .01em;
}

.my-vis__hero-fig { display: inline-flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.my-vis__hero-unit { font-size: .82rem; opacity: .65; }
.my-vis__hero-sub { font-size: .74rem; opacity: .6; }

/* The hero's own type, overriding the row size set on the module. */
.my-vis__hero .my-vis__n {
	font-size: var(--hero-size);
	font-weight: var(--hero-weight);
	line-height: 1.05;
	gap: 3px;
	max-width: 100%;
	flex-wrap: wrap;
	justify-content: center;
}

/*
 * Never wider than the column. Each digit takes roughly 1.2em with its tile
 * and gap, so the size it may reach is the column divided by the number of
 * digits - the chosen size stays the ceiling. Browsers without container
 * queries ignore this line and keep the rule above.
 */
.my-vis__hero .my-vis__n {
	font-size: min(var(--hero-size), calc(74cqw / var(--hero-digits, 6)));
}

.my-vis__hero.align-start .my-vis__n { justify-content: flex-start; }
.my-vis__hero.align-end .my-vis__n { justify-content: flex-end; }
.my-vis__hero.is-italic .my-vis__n { font-style: italic; }
.my-vis .my-vis__hero:not(.is-italic) .my-vis__n { font-style: normal; }

/* A tile in the headline figure is bigger, so it can carry more relief. */
.my-vis__hero .my-vis__n.is-box .my-vis__d,
.my-vis__hero .my-vis__n.is-flip .my-vis__d,
.my-vis__hero .my-vis__n.is-odometer .my-vis__d {
	border-radius: .18em;
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .22);
}

/* --------------------------------------------------------------- the rows -- */
.my-vis__rows { display: grid; gap: 6px; }

.my-vis__row {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 7px 10px; border-radius: 8px;
	background: var(--vis-box-bg);
	min-width: 0;
}

.my-vis.is-striped .my-vis__row:nth-child(odd) { background: rgba(0, 0, 0, .035); }

.my-vis__label {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: .88rem; min-width: 0;
}
.my-vis__label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-vis.has-icons .my-vis__label i { color: var(--vis-icon); width: 1.1em; text-align: center; flex: 0 0 auto; }

.my-vis__value { display: inline-flex; align-items: baseline; gap: 6px; flex: 0 0 auto; }
.my-vis__unit { font-size: .76rem; opacity: .6; }

/* A green dot that breathes, so "now" reads as now. */
.my-vis__row.is-online .my-vis__label i { color: #16a34a; animation: vis-pulse 2.2s ease-in-out infinite; }

@keyframes vis-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .45; transform: scale(.82); }
}

.my-vis__row.is-today .my-vis__label { font-weight: 700; }
.my-vis__row.is-today .my-vis__n.is-plain .my-vis__v,
.my-vis__row.is-today .my-vis__n.is-led .my-vis__v { color: var(--vis-today); }
.my-vis__row.is-today .my-vis__n.is-box .my-vis__d,
.my-vis__row.is-today .my-vis__n.is-flip .my-vis__d,
.my-vis__row.is-today .my-vis__n.is-odometer .my-vis__d,
.my-vis__row.is-today .my-vis__n.is-pill .my-vis__v {
	background: linear-gradient(160deg, var(--vis-today), color-mix(in srgb, var(--vis-today) 70%, #000 30%));
}

.my-vis__row.is-all { border-top: 1px dashed var(--vis-box-line); margin-top: 4px; padding-top: 11px; }
.my-vis__row.is-all .my-vis__label { font-weight: 700; }

/* Tiles across, one card per statistic. */
.my-vis.style-grid .my-vis__rows {
	grid-template-columns: repeat(var(--vis-cols), minmax(0, 1fr));
	gap: 10px;
}
.my-vis.style-grid .my-vis__row {
	flex-direction: column; align-items: center; gap: 6px; text-align: center;
	padding: 14px 10px;
	border: 1px solid var(--vis-box-line); border-radius: var(--my-radius, 12px);
}
.my-vis.style-grid.is-striped .my-vis__row:nth-child(odd) { background: var(--vis-box-bg); }
.my-vis.style-grid .my-vis__label { order: 2; font-size: .8rem; }
.my-vis.style-grid .my-vis__row.is-all { margin-top: 0; border-top-style: solid; }

/* One line across a full-width position. */
.my-vis.style-strip .my-vis__rows {
	grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
	gap: 4px;
}
.my-vis.style-strip .my-vis__row {
	flex-direction: column; align-items: center; gap: 4px; text-align: center;
	border-inline-end: 1px solid var(--vis-box-line);
}
.my-vis.style-strip .my-vis__row:last-child { border-inline-end: 0; }
.my-vis.style-strip.is-striped .my-vis__row:nth-child(odd) { background: transparent; }
.my-vis.style-strip .my-vis__label { order: 2; font-size: .78rem; }
.my-vis.style-strip .my-vis__row.is-all { margin-top: 0; border-top: 0; padding-top: 7px; }

/* ------------------------------------------------------------ the numbers -- */
.my-vis__n {
	display: inline-flex; align-items: center; gap: 2px;
	font-size: var(--vis-size); font-weight: var(--vis-weight); line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.my-vis.is-italic .my-vis__n { font-style: italic; }
.my-vis.is-mono .my-vis__n {
	font-family: "DejaVu Sans Mono", "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ตัวเลขธรรมดา */
.my-vis__n.is-plain .my-vis__v { color: var(--vis-bg1); }

/* กล่องแยกหลัก - one tile per digit, the classic counter */
.my-vis__n.is-box .my-vis__d {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: .78em; padding: .16em .2em; border-radius: .22em;
	color: var(--vis-ink);
	background: linear-gradient(160deg, var(--vis-bg1), var(--vis-bg2));
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .22), 0 1px 3px rgba(0, 0, 0, .18);
}

/* ป้ายพลิก - a tile with the fold line across its middle */
.my-vis__n.is-flip .my-vis__d {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	min-width: .82em; padding: .2em .22em; border-radius: .18em;
	color: var(--vis-ink);
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--vis-bg1) 82%, #fff 18%) 0 50%,
		var(--vis-bg1) 50% 100%);
	box-shadow: 0 2px 5px rgba(0, 0, 0, .28);
}
.my-vis__n.is-flip .my-vis__d::after {
	content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px;
	background: rgba(0, 0, 0, .35);
}

/* จอ LED */
.my-vis__n.is-led {
	padding: .2em .5em; border-radius: .25em;
	background: #0b1220; border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: inset 0 0 14px rgba(0, 0, 0, .8);
}
.my-vis__n.is-led .my-vis__v {
	color: var(--vis-bg2); letter-spacing: .08em;
	text-shadow: 0 0 6px var(--vis-bg2), 0 0 14px color-mix(in srgb, var(--vis-bg2) 60%, transparent);
}

/* แคปซูล */
.my-vis__n.is-pill .my-vis__v {
	display: inline-block; padding: .18em .8em; border-radius: 999px;
	color: var(--vis-ink);
	background: linear-gradient(135deg, var(--vis-bg1), var(--vis-bg2));
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* มาตรวัด - tiles on a dark drum, the way a meter reads */
.my-vis__n.is-odometer {
	gap: 1px; padding: .16em; border-radius: .25em;
	background: #10192b;
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, .7);
}
.my-vis__n.is-odometer .my-vis__d {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: .8em; padding: .14em .18em; border-radius: .12em;
	color: var(--vis-ink);
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--vis-bg1) 70%, #fff 30%),
		var(--vis-bg1) 46%,
		color-mix(in srgb, var(--vis-bg1) 76%, #000 24%));
}

/* Each digit lands in turn when the module first comes into view. */
.my-vis.is-counting .my-vis__n.is-box .my-vis__d,
.my-vis.is-counting .my-vis__n.is-flip .my-vis__d,
.my-vis.is-counting .my-vis__n.is-odometer .my-vis__d {
	animation: vis-drop .45s cubic-bezier(.2, .7, .3, 1) both;
	animation-delay: calc(var(--d, 0) * 70ms);
}

@keyframes vis-drop {
	from { opacity: 0; transform: translateY(-45%) rotateX(-70deg); }
	to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- the chart -- */
.my-vis__chart { margin-top: 16px; }

.my-vis__chart-head {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
	margin-bottom: 8px;
}
.my-vis__chart-title { font-size: .92rem; font-weight: 700; }
.my-vis__chart-when { font-size: .78rem; opacity: .6; }

.my-vis__plot {
	position: relative; height: var(--vis-h, 150px);
	padding-inline-start: 34px;
}

/* The scale behind the data. */
.my-vis__grid {
	position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
	pointer-events: none;
}
.my-vis__gridline {
	position: relative; display: block; height: 1px;
	background: var(--vis-box-line); opacity: .8;
}
.my-vis__gridline i {
	position: absolute; inset-inline-start: 0; top: -.62em;
	font-size: .66rem; font-style: normal; opacity: .55;
	width: 30px; text-align: end;
}

.my-vis__bars {
	position: relative; height: 100%;
	display: flex; align-items: flex-end; gap: 3px;
}

.my-vis__bar {
	position: relative; flex: 1 1 0; min-width: 0; height: 100%;
	display: flex; align-items: flex-end; justify-content: center;
	cursor: default;
}

.my-vis__bar-fill {
	display: block; width: 100%; height: var(--pc);
	min-height: 2px; border-radius: 4px 4px 0 0;
	background: linear-gradient(180deg, var(--vis-c2), var(--vis-c1));
	transition: filter .16s ease;
}
.my-vis__bar:hover .my-vis__bar-fill { filter: brightness(1.15); }

.my-vis__bar.is-now .my-vis__bar-fill {
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--vis-today) 75%, #fff 25%), var(--vis-today));
	box-shadow: 0 0 10px color-mix(in srgb, var(--vis-today) 55%, transparent);
}

.my-vis__bar-n {
	position: absolute; bottom: calc(var(--pc) + 3px); inset-inline: 0;
	text-align: center; font-size: .62rem; opacity: .7;
	pointer-events: none; white-space: nowrap;
}

/* The bars grow when the module is first seen. */
.my-vis__chart.is-live .my-vis__bar-fill {
	animation: vis-grow .7s cubic-bezier(.2, .7, .3, 1) both;
	animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes vis-grow {
	from { height: 0; opacity: .2; }
	to   { height: var(--pc); opacity: 1; }
}

/* ------------------------------------------------------- the line and area -- */
.my-vis__svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }

.my-vis__line {
	fill: none; stroke: var(--vis-c1); stroke-width: 6;
	stroke-linejoin: round; stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.my-vis__chart.is-live .my-vis__line {
	stroke-dasharray: 2600; stroke-dashoffset: 2600;
	animation: vis-draw 1.5s ease forwards .1s;
}
.my-vis__chart.is-live .my-vis__area { animation: vis-fade .9s ease both .5s; }

@keyframes vis-draw { to { stroke-dashoffset: 0; } }
@keyframes vis-fade { from { opacity: 0; } to { opacity: 1; } }

.my-vis__dots { position: absolute; inset: 0 0 0 34px; pointer-events: none; }
.my-vis__dot {
	position: absolute; inset-inline-start: var(--x); bottom: var(--y);
	width: 9px; height: 9px; margin: 0 0 -4.5px -4.5px;
	border-radius: 50%; background: var(--vis-c1);
	border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	pointer-events: auto; cursor: default;
}
.my-vis__dot.is-now { background: var(--vis-today); transform: scale(1.25); }

.my-vis__axis {
	display: flex; gap: 3px; margin-top: 5px; padding-inline-start: 34px;
}
.my-vis__tick {
	flex: 1 1 0; min-width: 0; text-align: center;
	font-size: .64rem; opacity: .6;
	overflow: hidden; text-overflow: clip; white-space: nowrap;
}
.my-vis__tick.is-now { opacity: 1; font-weight: 700; color: var(--vis-today); }

/* ------------------------------------------------------------ the picker -- */
/*
 * The month labels double as buttons. They keep the axis's size and spacing
 * so the chart above still lines up with them exactly.
 */
.my-vis__axis.is-pick .my-vis__tick {
	appearance: none; border: 0; padding: 3px 0; cursor: pointer;
	font: inherit; font-size: .64rem; color: inherit;
	background: transparent; border-radius: 5px;
	transition: background .14s ease, color .14s ease, opacity .14s ease;
}
.my-vis__axis.is-pick .my-vis__tick:hover { opacity: 1; background: rgba(0, 0, 0, .06); }
.my-vis__axis.is-pick .my-vis__tick:focus-visible {
	outline: 2px solid var(--vis-c1); outline-offset: 1px; opacity: 1;
}
.my-vis__axis.is-pick .my-vis__tick.is-picked {
	opacity: 1; font-weight: 700; color: #fff;
	background: var(--vis-c1);
}
.my-vis__axis.is-pick .my-vis__tick.is-picked.is-now { background: var(--vis-today); }

/* The bar the picker is on gets a quiet marker of its own. */
.my-vis__bar.is-picked .my-vis__bar-fill {
	outline: 2px solid color-mix(in srgb, var(--vis-c1) 70%, transparent);
	outline-offset: 1px;
}
.my-vis__bar.is-now.is-picked .my-vis__bar-fill {
	outline-color: color-mix(in srgb, var(--vis-today) 70%, transparent);
}
.my-vis__chart.is-bars .my-vis__bar { cursor: pointer; }

/* The readout: which slot, how many, and how it compares with the busiest. */
.my-vis__read {
	display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
	margin-top: 9px; padding: 8px 12px;
	border: 1px solid var(--vis-box-line); border-radius: var(--my-radius, 10px);
	background: rgba(0, 0, 0, .025);
}

.my-vis__read-when { font-size: .82rem; font-weight: 700; }

.my-vis__read-fig { display: inline-flex; align-items: baseline; gap: 4px; margin-inline-start: auto; }
.my-vis__read-n {
	font-size: 1.15rem; font-weight: 700; color: var(--vis-c1);
	font-variant-numeric: tabular-nums;
}
.my-vis__read-unit { font-size: .74rem; opacity: .6; }

.my-vis__read-track {
	flex: 1 0 100%; height: 5px; border-radius: 999px; overflow: hidden;
	background: rgba(0, 0, 0, .08);
}
.my-vis__read-track i {
	display: block; height: 100%; border-radius: inherit;
	background: linear-gradient(90deg, var(--vis-c1), var(--vis-c2));
	transition: width .32s cubic-bezier(.2, .7, .3, 1);
}

.my-vis__chart-sum { margin: 8px 0 0; font-size: .78rem; opacity: .7; text-align: end; }

/* A month of days needs more room than a year of months. */
@media (max-width: 480px) {
	.my-vis__tick { font-size: .58rem; }
	.my-vis.style-strip .my-vis__rows { grid-auto-flow: row; grid-auto-columns: auto; }
	.my-vis.style-strip .my-vis__row { border-inline-end: 0; border-bottom: 1px solid var(--vis-box-line); }
	.my-vis.style-grid .my-vis__rows { --vis-cols: 2; }
}

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

	.my-vis__chart.is-live .my-vis__line { stroke-dashoffset: 0; }
}

/*
 * The heading settings every Gov module shares. Written on the module's own
 * element only when an editor changed one, so an untouched module keeps the
 * look it always had.
 */
.my-vis__head {
	font-weight: var(--my-head-weight, 700);
	font-style: var(--my-head-style, inherit);
	background: var(--my-head-bg, transparent);
	padding: var(--my-head-pad, 0);
	border-radius: var(--my-head-round, 0);
	width: var(--my-head-w, auto);
}
.my-vis__head[class] { font-size: var(--my-head-size, 1.05rem); }
.my-vis__head { color: var(--my-head-colour, var(--vis-label)); }
.my-vis__head span { color: inherit; }
.my-vis__head .my-heading__icon { color: var(--my-head-icon, var(--my-primary, #1b5fa8)); margin-inline-end: 8px; }