/* =========================================================
   LIVING ASSISTANCE -- REVISION 8.1 (visual polish, same data/logic as 8)
   Conditionally enqueued on is_front_page() only -- see
   inc/enqueue.php. All selectors scoped under .jsn-la, cannot affect
   any other page/template.

   Target: desktop module height <=105px, mobile <=130px. Changes from
   revision 8 (all visual, nothing structural): flat neutral section
   background (#F7F5F1, was a warm gradient -- felt too "landing page"
   per feedback), per-source icon colors (was uniform brand red),
   desktop-only hover lift on cards. Header text condensed in the PHP
   template ("Live Jatim" instead of title+badge) -- markup change
   only, no data/logic.

   Icon colors reuse .jsn-la-chip--<source> (already on every chip
   wrapper, added in revision 6) as the selector -- no new classes or
   markup needed in weather.php/gold.php/usdidr.php/ihsg.php/
   prayer.php, all five are untouched this revision (confirmed via
   diff before staging).

   Same --jsn-la-radius exception as prior revisions (12px): module
   keeps its own rounded corners instead of the sitewide
   --radius-sm:0px -- approved, nothing here touches that global
   token.

   Layout: ONE set of markup for all breakpoints. Desktop/tablet:
   .jsn-la-strip is a 5-column grid of cards. Mobile: the SAME
   .jsn-la-strip becomes a horizontal scroll-snap row -- no
   duplicated DOM, CSS only.
========================================================= */

.jsn-la{
	--jsn-la-radius: 12px;
	--jsn-la-card-border: #e7e2d8;
	background:#F7F5F1;
	border-top:3px solid #C9002B;
	border-bottom:1px solid var(--color-rule);
}
.jsn-la-inner{
	max-width:var(--container-max);
	margin:0 auto;
	padding:8px var(--container-pad) 7px;
}

/* -- head row: LIVE indicator + location button --
   flex-wrap:nowrap + justify-content:space-between guarantee this
   never breaks into multiple lines at any breakpoint (including
   mobile) -- long city names truncate via ellipsis instead (see
   .jsn-la-geo-btn-label) rather than wrapping. */
.jsn-la-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:nowrap;
	gap:10px;
	margin:0 0 6px;
}

.jsn-la-live{ display:flex; align-items:center; gap:6px; min-width:0; flex:0 1 auto; }
.jsn-la-live-dot{
	width:6px;
	height:6px;
	border-radius:50%;
	background:var(--color-red);
	flex:0 0 auto;
	animation:jsn-la-pulse 1.8s ease-in-out infinite;
}
@keyframes jsn-la-pulse{
	0%, 100%{ opacity:1; transform:scale(1); }
	50%{ opacity:.45; transform:scale(1.3); }
}
@media(prefers-reduced-motion: reduce){
	.jsn-la-live-dot{ animation:none; }
}
/* v8.1: "Live Jatim" is now the only header title element (was a
   separate uppercase title + a small mono "LIVE" badge) -- one
   compact status tag, sized a touch larger than the old badge since
   it now carries the whole label on its own. */
.jsn-la-live-badge{
	font-family:var(--font-body);
	font-size:11px;
	font-weight:700;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:var(--color-red);
	background:rgba(200,16,46,.08);
	padding:2px 8px;
	border-radius:4px;
	flex:0 1 auto;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.jsn-la-geo-btn{
	appearance:none;
	-webkit-appearance:none;
	display:inline-flex;
	align-items:center;
	gap:4px;
	flex:0 0 auto;
	background:var(--color-paper);
	border:1px solid var(--jsn-la-card-border);
	border-radius:999px;
	padding:3px 10px;
	font-family:var(--font-body);
	font-size:11px;
	font-weight:600;
	color:var(--color-ink-soft);
	cursor:pointer;
	transition:border-color var(--transition-fast), color var(--transition-fast);
}
@media(hover:hover) and (pointer:fine){
	.jsn-la-geo-btn:hover{ border-color:var(--color-red); color:var(--color-red); }
}
.jsn-la-geo-btn:focus-visible{ outline:2px solid var(--color-red); outline-offset:2px; }
.jsn-la-geo-btn[disabled]{ opacity:.55; cursor:default; }
.jsn-la-geo-btn-label{ max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.jsn-la-geo-status{
	font-size:10.5px;
	color:var(--color-muted);
	font-style:italic;
}

/* -- strip: desktop/tablet, 5-column card grid -- */
.jsn-la-strip{
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	gap:8px;
}

/* -- card: white, very light shadow, 12px radius -- */
.jsn-la-chip{
	display:flex;
	align-items:flex-start;
	gap:6px;
	background:var(--color-paper);
	border:1px solid var(--jsn-la-card-border);
	border-radius:var(--jsn-la-radius);
	box-shadow:0 1px 3px rgba(20,22,28,.04), 0 1px 1px rgba(20,22,28,.02);
	padding:6px 9px 6px;
	min-width:0;
	transition:transform var(--transition-fast), box-shadow var(--transition-fast);
}
/* v8.1: desktop-only hover lift -- gated to real mouse/hover devices
   so touch/tap on mobile never triggers a "stuck hover" state, and
   respects prefers-reduced-motion (transform is skipped, shadow
   change alone is not motion). transform never affects layout/box
   size, so this cannot introduce a layout shift (CLS unaffected). */
@media(hover:hover) and (pointer:fine){
	.jsn-la-chip:hover{
		transform:translateY(-3px);
		box-shadow:0 10px 20px -10px rgba(20,22,28,.18), 0 2px 6px rgba(20,22,28,.06);
	}
}
@media(prefers-reduced-motion: reduce){
	.jsn-la-chip{ transition:box-shadow var(--transition-fast); }
	.jsn-la-chip:hover{ transform:none; }
}

.jsn-la-icon{ width:16px; height:16px; color:var(--color-red); flex:0 0 auto; margin-top:2px; }
/* v8.1: per-source icon colors instead of uniform brand red -- muted,
   restrained tones (not saturated "dashboard" colors), each reusing
   the .jsn-la-chip--<source> modifier class already on every chip
   (added revision 6) so no markup change is needed in any of the 5
   item templates. */
.jsn-la-chip--weather .jsn-la-icon{ color:#5B7C99; }
.jsn-la-chip--gold .jsn-la-icon{ color:#B8860B; }
.jsn-la-chip--usdidr .jsn-la-icon{ color:#3B6FB0; }
.jsn-la-chip--ihsg .jsn-la-icon{ color:#1A7A3E; }
.jsn-la-chip--prayer .jsn-la-icon{ color:#2E8B57; }

.jsn-la-chip-text{ min-width:0; flex:1; }
.jsn-la-chip-label{
	font-family:var(--font-body);
	font-size:11px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.04em;
	color:var(--color-muted);
	margin-bottom:1px;
}
.jsn-la-chip-main{
	font-family:var(--font-body);
	font-size:18px;
	font-weight:700;
	color:var(--color-ink);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-variant-numeric:tabular-nums;
	line-height:1.2;
}
.jsn-la-num{ font-weight:700; color:var(--color-ink); }
.jsn-la-chip-placeholder{
	font-size:11px;
	font-weight:400;
	font-style:italic;
	color:var(--color-faint);
	white-space:normal;
}

.jsn-la-chip-sub{
	font-family:var(--font-body);
	font-size:10.5px;
	font-weight:400;
	color:var(--color-muted);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	margin-top:1px;
}
.jsn-la-chip-sub--up{ color:#1a7a3e; font-weight:600; }
.jsn-la-chip-sub--down{ color:var(--color-red); font-weight:600; }

/* -- inline city select on the weather chip's sub-line: reads as
   plain text "Malang" with a small chevron -- */
.jsn-la-city-row{ display:block; }
.jsn-la-city-select{
	appearance:none;
	-webkit-appearance:none;
	border:0;
	background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239C9C94' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right center;
	font-family:var(--font-body);
	font-size:10.5px;
	font-weight:400;
	color:var(--color-muted);
	padding:0 12px 0 0;
	margin:0;
	cursor:pointer;
	max-width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.jsn-la-city-select:focus-visible{ outline:2px solid var(--color-red); outline-offset:2px; }

/* -- has-data / no-data toggle (see weather.php / prayer.php) --
   Both states always in the DOM; living-assistance.js only ever flips
   .is-empty and updates text -- never creates/removes elements. */
.jsn-la-chip [data-jsn-la-when="no-data"]{ display:none; }
.jsn-la-chip.is-empty [data-jsn-la-when="has-data"]{ display:none; }
.jsn-la-chip.is-empty [data-jsn-la-when="no-data"]{ display:block; }

/* -- source line -- */
.jsn-la-source{
	font-size:9.5px;
	color:var(--color-faint);
	margin-top:5px;
}

/* -- mobile dot indicator (visual only; toggled by living-assistance.js) -- */
.jsn-la-dots{ display:none; gap:5px; justify-content:center; margin-top:6px; }
.jsn-la-dots span{ width:5px; height:5px; border-radius:50%; background:var(--color-rule); transition:width var(--transition-fast), background-color var(--transition-fast); }
.jsn-la-dots span.on{ background:var(--color-red); width:14px; border-radius:3px; }

/* -- responsive -- */
@media(max-width:1024px){
	.jsn-la-strip{ grid-template-columns:repeat(3, 1fr); }
}

@media(max-width:767px){
	.jsn-la-inner{ padding:8px var(--container-pad) 7px; }
	.jsn-la-head{ gap:6px; }
	.jsn-la-live-badge{ max-width:104px; }
	.jsn-la-geo-btn{ padding:3px 8px; }
	.jsn-la-geo-btn-label{ max-width:62px; }

	.jsn-la-strip{
		display:flex;
		gap:8px;
		overflow-x:auto;
		scroll-snap-type:x mandatory;
		-webkit-overflow-scrolling:touch;
		margin:0 -2px;
		padding:2px;
	}
	.jsn-la-strip::-webkit-scrollbar{ display:none; }

	.jsn-la-chip{
		flex:0 0 72%;
		scroll-snap-align:start;
	}

	.jsn-la-dots{ display:flex; }
}

@media(prefers-reduced-motion: reduce){
	.jsn-la-strip{ scroll-behavior:auto; }
}