/* JatimSatu ID -- Phase 1A
   Enqueued only on the 4 account page templates (see core.php),
   depends on jsn-main so it can read the site's existing design
   tokens (--color-red, --font-headline, --space-*, etc.) instead of
   redefining them. Never loaded on homepage/article/category pages. */

.jsn-id-wrap{
	max-width:var(--container-max);
	margin:0 auto;
	padding:var(--space-8) var(--container-pad);
	display:flex;
	justify-content:center;
}
.jsn-id-wrap--wide{ display:block; }

.jsn-id-card{
	width:100%;
	max-width:420px;
	background:var(--color-paper);
	border:1px solid var(--color-rule);
	border-radius:var(--radius-sm);
	padding:var(--space-6) var(--space-5);
}

.jsn-id-eyebrow{
	font-family:var(--font-mono);
	font-size:12px;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--color-red);
	font-weight:600;
}
.jsn-id-title{
	font-family:var(--font-headline);
	font-size:28px;
	line-height:1.2;
	margin:var(--space-2) 0 var(--space-2);
	color:var(--color-ink);
}
.jsn-id-title--sm{ font-size:22px; margin:0; }
.jsn-id-sub{
	color:var(--color-muted);
	font-size:14px;
	margin:0 0 var(--space-4);
}

.jsn-id-alert{
	background:var(--color-red-wash);
	border:1px solid var(--color-red);
	color:var(--color-red-deep);
	border-radius:var(--radius-sm);
	padding:var(--space-3) var(--space-4);
	font-size:13.5px;
	margin-bottom:var(--space-4);
}
.jsn-id-alert--ok{
	background:rgba(30,122,62,.06);
	border-color:#1E7A3E;
	color:#1E7A3E;
}

.jsn-id-form{ display:flex; flex-direction:column; gap:var(--space-1); margin-top:var(--space-3); }
.jsn-id-label{
	font-family:var(--font-mono);
	font-size:11.5px;
	text-transform:uppercase;
	letter-spacing:.04em;
	color:var(--color-muted);
	margin-top:var(--space-3);
}
.jsn-id-input{
	font-family:var(--font-body);
	font-size:15px;
	padding:var(--space-3);
	border:1px solid var(--color-rule);
	border-radius:var(--radius-sm);
	background:#fff;
	color:var(--color-ink);
}
.jsn-id-input:focus-visible{ outline:2px solid var(--color-red); outline-offset:1px; }
.jsn-id-input--static{ background:var(--color-canvas); color:var(--color-muted); }
.jsn-id-hint{ font-size:12px; color:var(--color-faint); }

.jsn-id-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.jsn-id-chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-2); }
.jsn-id-chip{
	display:inline-flex; align-items:center; gap:6px;
	font-size:13px; padding:6px 12px;
	border:1px solid var(--color-rule); border-radius:99px;
	cursor:pointer; user-select:none;
}
.jsn-id-chip input{ accent-color:var(--color-red); }
.jsn-id-chip--readonly{
	background:var(--color-canvas); color:var(--color-ink);
	border-color:var(--color-rule);
}
.jsn-id-chips--readonly{ min-height:32px; }
.jsn-id-skeleton{
	display:inline-block; width:180px; height:24px;
	background:var(--color-canvas); border-radius:99px;
}

.jsn-id-btn{
	font-family:var(--font-body);
	font-weight:600; font-size:15px;
	background:var(--color-ink); color:#fff;
	border:none; border-radius:var(--radius-sm);
	padding:var(--space-3) var(--space-5);
	cursor:pointer; margin-top:var(--space-4);
	transition:background var(--transition-fast);
	text-align:center; text-decoration:none; display:inline-block;
}
.jsn-id-btn:hover{ background:var(--color-red); }
.jsn-id-btn--ghost{
	background:transparent; color:var(--color-ink);
	border:1px solid var(--color-rule);
	margin-top:0;
}
.jsn-id-btn--ghost:hover{ background:var(--color-canvas); color:var(--color-ink); }

.jsn-id-divider{
	display:flex; align-items:center; gap:var(--space-3);
	color:var(--color-faint); font-size:12px;
	margin:var(--space-5) 0;
}
.jsn-id-divider::before,.jsn-id-divider::after{
	content:''; flex:1; height:1px; background:var(--color-rule);
}
.jsn-id-google{ display:flex; justify-content:center; }
.jsn-id-btn--google{
	display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
	width:100%;
	background:#fff; color:var(--color-ink);
	border:1px solid var(--color-rule);
	margin-top:0;
}
.jsn-id-btn--google:hover{ background:var(--color-canvas); color:var(--color-ink); }

.jsn-id-footnote{
	text-align:center; font-size:13.5px; color:var(--color-muted);
	margin-top:var(--space-5);
}
.jsn-id-footnote a{ color:var(--color-red); font-weight:600; }

.jsn-id-back{
	display:inline-block; font-size:13px; color:var(--color-muted);
	margin-bottom:var(--space-4); text-decoration:none;
}
.jsn-id-back:hover{ color:var(--color-red); }

/* Dashboard */
.jsn-id-dash{ max-width:720px; margin:0 auto; }
.jsn-id-dash-head{
	display:flex; align-items:center; gap:var(--space-4);
	padding-bottom:var(--space-5); border-bottom:1px solid var(--color-rule);
	margin-bottom:var(--space-5);
}
.jsn-id-avatar{
	width:52px; height:52px; border-radius:50%;
	background-color:var(--color-red); background-size:cover; background-position:center;
	flex:0 0 auto;
}
.jsn-id-dash-head > div{ flex:1; min-width:0; }
.jsn-id-logout{ flex:0 0 auto; }

.jsn-id-menu{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-6); }
.jsn-id-menu-item{
	font-size:13.5px; font-weight:600;
	padding:8px 14px; border-radius:99px;
	border:1px solid var(--color-rule);
	color:var(--color-ink); text-decoration:none;
	display:inline-flex; align-items:center; gap:6px;
}
.jsn-id-menu-item.is-active{ background:var(--color-ink); color:#fff; border-color:var(--color-ink); }
.jsn-id-menu-item--disabled{ color:var(--color-faint); cursor:default; }
.jsn-id-badge{
	font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase;
	background:var(--color-canvas); color:var(--color-muted);
	padding:2px 6px; border-radius:99px;
}
.jsn-id-badge--soon{ background:var(--color-red-wash); color:var(--color-red-deep); }

.jsn-id-panel{
	border:1px solid var(--color-rule); border-radius:var(--radius-sm);
	padding:var(--space-5);
}
.jsn-id-panel-title{
	font-family:var(--font-headline); font-size:18px; margin:0 0 var(--space-3);
	color:var(--color-ink);
}
.jsn-id-note{ font-size:13px; color:var(--color-muted); margin-top:var(--space-3); }

@media (max-width:600px){
	.jsn-id-wrap{ padding:var(--space-5) var(--space-4); }
	.jsn-id-card{ padding:var(--space-5) var(--space-4); }
	.jsn-id-dash-head{ flex-wrap:wrap; }
	.jsn-id-logout{ margin-left:auto; }
}