/* JatimSatu ID -- article engagement bar (Phase 3, STEP 12C).

   Its OWN file, deliberately not merged into jsn-gam-profile.css: this
   one loads on 30,000+ article pages while the profile stylesheet loads
   on exactly one template. Keeping them apart means articles never
   download profile-panel rules they cannot use.

   A new filename is also the only reliable cache-bust on this site --
   LiteSpeed strips ?ver= from asset URLs (documented for jsn-nav in the
   theme's inc/enqueue.php).

   Namespaced .jsn-gart-* so nothing here can reach .jsn-share (the
   existing share bar, untouched), .jsn-gam-* (Phase 2) or .jsn-gpro-*
   (the profile panel). Built on main.css tokens, every var() with a
   fallback.
*/

.jsn-gart{
	display: flex;
	align-items: center;
	gap: var(--space-2, 8px);
	margin: var(--space-4, 16px) 0 0;
	padding: var(--space-3, 12px) 0 0;
	border-top: 1px solid var(--color-rule, #E4E2DC);
	flex-wrap: wrap;
}

.jsn-gart-btn{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 15px;
	border: 1px solid var(--color-rule, #E4E2DC);
	border-radius: 99px;
	background: #fff;
	color: var(--color-ink, #14161C);
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color var(--transition-fast, 180ms ease),
	            background var(--transition-fast, 180ms ease),
	            color var(--transition-fast, 180ms ease);
	-webkit-appearance: none;
	appearance: none;
}

.jsn-gart-btn:hover{
	border-color: var(--color-ink, #14161C);
	background: var(--color-canvas, #FAFAF8);
	color: var(--color-ink, #14161C);
}

.jsn-gart-btn:focus-visible{
	outline: 2px solid var(--color-red, #C8102E);
	outline-offset: 2px;
}

.jsn-gart-btn[disabled]{
	opacity: .6;
	cursor: default;
}

.jsn-gart-ico{
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
}

/* Saved state is painted by JS after the REST hydrate, never by PHP --
   the cached HTML always ships the neutral state. */
.jsn-gart-btn--bookmark.is-saved{
	background: var(--color-red, #C8102E);
	border-color: var(--color-red, #C8102E);
	color: #fff;
}
.jsn-gart-btn--bookmark.is-saved:hover{
	background: var(--color-red-deep, #A50D25);
	border-color: var(--color-red-deep, #A50D25);
	color: #fff;
}
.jsn-gart-btn--bookmark.is-saved .jsn-gart-ico svg{
	fill: currentColor;
}

/* Brief highlight when the Bagikan CTA scrolls the existing share bar
   into view, so the reader can see where they were sent. */
.jsn-share--flash{
	animation: jsn-gart-flash 1.2s ease;
}
@keyframes jsn-gart-flash{
	0%, 100% { background: transparent; }
	30%      { background: var(--color-red-wash, rgba(200,16,46,.05)); }
}

/* ---- toast ---- */

.jsn-gart-toast{
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 16px);
	z-index: 9999;
	background: var(--color-ink, #14161C);
	color: #fff;
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 14px;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: 99px;
	opacity: 0;
	transition: opacity 280ms ease, transform 280ms ease;
	pointer-events: none;
	max-width: calc(100vw - 32px);
	text-align: center;
}
.jsn-gart-toast.is-visible{
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce){
	.jsn-gart-toast{ transition: none; }
	.jsn-share--flash{ animation: none; }
}

/* ---- mobile ---- */

@media (max-width: 600px){
	.jsn-gart{
		gap: 6px;
		margin-top: var(--space-3, 12px);
	}
	.jsn-gart-btn{
		padding: 9px 13px;
		font-size: 13px;
	}
}

@media (max-width: 380px){
	/* Three pills must still fit one row at 360px without wrapping into
	   a ragged second line. */
	.jsn-gart{ gap: 5px; }
	.jsn-gart-btn{
		padding: 8px 10px;
		font-size: 12.5px;
		gap: 5px;
		flex: 1 1 0;
		justify-content: center;
		min-width: 0;
	}
	.jsn-gart-txt{
		overflow: hidden;
		text-overflow: ellipsis;
	}
}


/* ==================================================================
   STEP 13F -- author badges on the article byline.

   Namespaced .jsn-abadge-* so it cannot reach .jsn-gart-* (the
   engagement bar in this same file), .jsn-share, .jsn-cmt-* or
   .jsn-gpro-*. Text and CSS only -- no images, no webfont, no network
   call, and no query: the whole badge set arrives from one cached array.
   ================================================================== */

.jsn-abadge-row{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 4px 0 2px;
	line-height: 1;
}

.jsn-abadge{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1;
	padding: 4px 9px;
	border-radius: 99px;
	text-decoration: none;
	white-space: nowrap;
	color: var(--color-ink, #14161C);
	background: var(--color-canvas, #FAFAF8);
	border: 1px solid var(--color-rule, #E4E2DC);
	transition: border-color var(--transition-fast, 180ms ease);
}

a.jsn-abadge:hover{ border-color: var(--color-ink, #14161C); }
a.jsn-abadge:focus-visible{ outline: 2px solid var(--color-red, #C8102E); outline-offset: 2px; }

.jsn-abadge-icon{ font-size: 11px; line-height: 1; }

/* Each badge means something different, so each reads differently. */
.jsn-abadge--verified{ color: #0B6B3A; background: rgba(11,107,58,.08); border-color: rgba(11,107,58,.22); }
.jsn-abadge--pioneer{ color: #8A5A00; background: rgba(196,132,0,.10); border-color: rgba(196,132,0,.26); }
.jsn-abadge--editorial{ color: #fff; background: var(--color-ink, #14161C); border-color: var(--color-ink, #14161C); }
.jsn-abadge--bureau{ color: var(--color-red-deep, #A50D25); background: var(--color-red-wash, rgba(200,16,46,.05)); border-color: rgba(200,16,46,.20); }
.jsn-abadge--senior{ color: #3A3D45; background: var(--color-canvas, #FAFAF8); border-color: var(--color-rule-strong, #D3D0C8); }

@media (max-width: 600px){
	.jsn-abadge{ font-size: 10.5px; padding: 3px 8px; }
	.jsn-abadge-row{ gap: 5px; }
}

@media (max-width: 380px){
	.jsn-abadge{ font-size: 10px; padding: 3px 7px; }
	/* Below this width the label alone is enough; the icon keeps the
	   row from becoming a wall of text but must not force a wrap. */
	.jsn-abadge-row{ gap: 4px; }
}

@media (prefers-reduced-motion: reduce){
	.jsn-abadge{ transition: none; }
}

/* ==================================================================
   STEP 13C -- public author profile at /author/{slug}.

   Lives in this stylesheet rather than a fourth file because the profile
   header reuses .jsn-abadge, which is already defined here for the
   byline. One definition, one file, no drift.

   Namespaced .jsn-aprof-* so it cannot reach the engagement bar
   (.jsn-gart-*), the dashboard (.jsn-gauth-*) or the reader panel
   (.jsn-gpro-*).
   ================================================================== */

.jsn-aprof{
	padding-top: 8px;
}

.jsn-aprof-head{
	display: flex;
	align-items: flex-start;
	gap: 22px;
	padding: 22px 0 26px;
	border-bottom: 1px solid var(--color-rule, #E4E2DC);
	margin-bottom: 26px;
}

.jsn-aprof-avatar{
	flex: 0 0 auto;
	line-height: 0;
}

.jsn-aprof-avatar img{
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: var(--color-canvas, #FAFAF8);
}

.jsn-aprof-ident{
	flex: 1 1 auto;
	min-width: 0;
}

.jsn-aprof-name{
	font-family: var(--font-headline, Georgia, serif);
	font-size: 30px;
	line-height: 1.15;
	color: var(--color-ink, #14161C);
	margin: 0 0 4px;
}

/* The masthead title sits directly under the name, in the newsroom's
   accent, because it is the single most useful thing a reader can learn
   about who wrote the article they just read. */
.jsn-aprof-position{
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--color-red, #C8102E);
	margin: 0 0 10px;
}

.jsn-aprof-ident .jsn-abadge-row{
	margin: 0 0 12px;
}

.jsn-aprof-bio{
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 15px;
	line-height: 1.65;
	color: var(--color-ink-soft, #2B2E35);
	max-width: 68ch;
	margin: 0 0 12px;
}

.jsn-aprof-bio p{ margin: 0 0 10px; }
.jsn-aprof-bio p:last-child{ margin-bottom: 0; }

.jsn-aprof-meta{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 13px;
	color: var(--color-muted, #6B6F76);
	font-variant-numeric: tabular-nums;
}

.jsn-aprof-count{
	font-weight: 700;
	color: var(--color-ink, #14161C);
}

.jsn-aprof-since::before{
	content: '·';
	margin-right: 8px;
	color: var(--color-rule-strong, #D3D0C8);
}

.jsn-aprof-subhead{
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--color-ink, #14161C);
	margin: 0 0 16px;
}

/* ---- mobile ---- */

@media (max-width: 600px){
	/* The header stacks: a 96px circle beside text leaves too little
	   measure for a name and a bio on a phone. */
	.jsn-aprof-head{
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 16px 0 20px;
		margin-bottom: 20px;
	}

	.jsn-aprof-avatar img{ width: 72px; height: 72px; }
	.jsn-aprof-name{ font-size: 24px; }
	.jsn-aprof-position{ font-size: 12.5px; }
	.jsn-aprof-bio{ font-size: 14.5px; }
}

@media (max-width: 380px){
	.jsn-aprof-avatar img{ width: 64px; height: 64px; }
	.jsn-aprof-name{ font-size: 21px; }
	.jsn-aprof-meta{ font-size: 12.5px; }
}

/* ==================================================================
   READER LOGIN CTA -- inline banner (.jsn-rcta) and the bookmark
   prompt (.jsn-gart-prompt).

   Both live here because both appear only on article pages, where this
   stylesheet already loads, and because the prompt reuses the banner's
   button rules -- one definition of the button, not two that drift.

   The banner sits BETWEEN paragraphs. It therefore has to read as part
   of the page, not as an advertisement dropped into it: paper ground,
   one red rule down the left edge, the newsroom's own type. No shadow,
   no gradient, no full-bleed colour block, nothing that overlays or
   follows the reader.
   ================================================================== */

.jsn-rcta{
	margin: 30px 0;
	padding: 18px 20px;
	background: var(--color-canvas, #FAFAF8);
	border: 1px solid var(--color-rule, #E4E2DC);
	border-left: 3px solid var(--color-red, #C8102E);
	border-radius: var(--radius-sm, 6px);
}

.jsn-rcta-title{
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 6px;
	font-family: var(--font-headline, Georgia, serif);
	font-size: 18px;
	line-height: 1.25;
	color: var(--color-ink, #14161C);
}

.jsn-rcta-ico{
	font-size: 15px;
	line-height: 1;
	flex: 0 0 auto;
}

.jsn-rcta-body{
	margin: 0 0 14px;
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--color-ink-soft, #2B2E35);
	max-width: 60ch;
}

.jsn-rcta-actions{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.jsn-rcta-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1;
	padding: 11px 18px;
	border-radius: var(--radius-sm, 6px);
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid transparent;
	transition: background-color var(--transition-fast, 180ms ease),
	            border-color var(--transition-fast, 180ms ease),
	            color var(--transition-fast, 180ms ease);
}

.jsn-rcta-btn--primary{
	background: var(--color-red, #C8102E);
	border-color: var(--color-red, #C8102E);
	color: #fff;
}

.jsn-rcta-btn--primary:hover,
.jsn-rcta-btn--primary:focus{
	background: var(--color-red-deep, #A50D25);
	border-color: var(--color-red-deep, #A50D25);
	color: #fff;
}

.jsn-rcta-btn--ghost{
	background: transparent;
	border-color: var(--color-rule-strong, #D3D0C8);
	color: var(--color-ink, #14161C);
}

.jsn-rcta-btn--ghost:hover,
.jsn-rcta-btn--ghost:focus{
	border-color: var(--color-ink, #14161C);
	color: var(--color-ink, #14161C);
}

.jsn-rcta-btn:focus-visible{
	outline: 2px solid var(--color-red, #C8102E);
	outline-offset: 2px;
}

/* ---- bookmark prompt ----

   Appears only after a guest presses Simpan, directly beneath the
   engagement bar. It pushes the content below it down instead of
   covering anything, and it is never shown on load. */

.jsn-gart-prompt{
	margin: 10px 0 0;
	padding: 14px 16px;
	background: var(--color-canvas, #FAFAF8);
	border: 1px solid var(--color-rule, #E4E2DC);
	border-radius: var(--radius-sm, 6px);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity var(--transition-fast, 180ms ease),
	            transform var(--transition-fast, 180ms ease);
}

.jsn-gart-prompt.is-visible{
	opacity: 1;
	transform: none;
}

.jsn-gart-prompt-title{
	margin: 0 0 4px;
	font-family: var(--font-headline, Georgia, serif);
	font-size: 16px;
	line-height: 1.3;
	color: var(--color-ink, #14161C);
}

.jsn-gart-prompt-body{
	margin: 0 0 12px;
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 14px;
	line-height: 1.55;
	color: var(--color-ink-soft, #2B2E35);
	max-width: 56ch;
}

.jsn-gart-prompt-actions{
	margin: 0;
}

/* ---- mobile ---- */

@media (max-width: 600px){
	.jsn-rcta{
		margin: 24px 0;
		padding: 15px 16px;
	}

	.jsn-rcta-title{ font-size: 16.5px; }
	.jsn-rcta-body{ font-size: 14px; margin-bottom: 12px; }
	.jsn-gart-prompt-title{ font-size: 15px; }
	.jsn-gart-prompt-body{ font-size: 13.5px; }
}

@media (max-width: 420px){
	/* Two buttons side by side stop fitting here: the second label is a
	   full sentence, and shrinking the type to keep them on one line
	   would cost more than the extra row does. */
	.jsn-rcta-actions{
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.jsn-rcta-btn{
		width: 100%;
		white-space: normal;
		padding: 12px 14px;
		text-align: center;
	}

	.jsn-rcta{ padding: 14px; }
	.jsn-rcta-title{ font-size: 16px; }
	.jsn-gart-prompt{ padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce){
	.jsn-rcta-btn,
	.jsn-gart-prompt{ transition: none; }
	.jsn-gart-prompt{ transform: none; }
}