/*
 * Add Us On Google - frontend styles.
 *
 * Structure:
 *   1. Token layer  - each style and tone sets --aug-* custom properties.
 *   2. Consumption  - one hardened rule consumes them with !important.
 *
 * Splitting it this way is deliberate: a theme can style `button` with
 * whatever specificity it likes, but it cannot touch custom properties it has
 * never heard of. Our consuming rule is the only place properties are set, so
 * the reset that survives an arbitrary theme is written once instead of six
 * times. Single elevation throughout: a hairline border OR a soft shadow,
 * never both on one surface.
 *
 * Prefix: `aug-` (Add Us on Google). Fixed prefix, applied to every selector.
 */

/* ---------------------------------------------------------------- 1. Tokens
 *
 * Each style declares its tokens ONCE, using light-dark() for anything that
 * differs between modes, and `color-scheme` decides which side resolves:
 *
 *   .aug-tone-light -> color-scheme: light       (always the light values)
 *   .aug-tone-dark  -> color-scheme: dark        (always the dark values)
 *   .aug-tone-auto  -> color-scheme: light dark  (follows the reader's device)
 *
 * The plain declaration before each light-dark() is the fallback for a browser
 * too old to parse it, so an unsupported browser gets the light theme rather
 * than no background at all. Splitting this into a light block, a dark block
 * and a duplicated dark media query is the usual alternative; that is three
 * places to change one value, and they drift.
 *
 * Setting `color-scheme` also switches the browser's own surfaces inside the
 * control (form defaults, scrollbars) to match, which is free and was being
 * missed.
 */

.aug-control {
	--aug-focus: #e84e26;
	--aug-gap: 10px;
	--aug-radius: 8px;
	--aug-h: 44px;
	--aug-padx: 18px;
	--aug-fs: 14px;
	--aug-fw: 500;
	--aug-fw-label: 500;
	--aug-shadow: none;
	--aug-g-chip: 0;
	--aug-deco: none;

	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	position: relative;
	max-width: 100%;
}

.aug-tone-light {
	color-scheme: light;
}
.aug-tone-dark {
	color-scheme: dark;
}
.aug-tone-auto {
	color-scheme: light dark;
}

/* --- Google Classic: the reference treatment --- */
.aug-control--google_classic {
	--aug-radius: 4px;
	--aug-h: 40px;
	--aug-padx: 16px;
	--aug-gap: 10px;

	--aug-bg: #ffffff;
	--aug-bg: light-dark(#ffffff, #202124);
	--aug-fg: #3c4043;
	--aug-fg: light-dark(#3c4043, #e8eaed);
	--aug-border: #dadce0;
	--aug-border: light-dark(#dadce0, #5f6368);
	--aug-bg-h: #f8f9fa;
	--aug-bg-h: light-dark(#f8f9fa, #303134);
	--aug-border-h: #c6cbd1;
	--aug-border-h: light-dark(#c6cbd1, #80868b);
	--aug-info-fg: #5f6368;
	--aug-info-fg: light-dark(#5f6368, #9aa0a6);
}

/* Google's own button puts the mark after the words. */
.aug-control--google_classic .aug-btn__g {
	order: 2;
}

/* --- Brand Neutral: belongs to the host design system --- */
.aug-control--brand_neutral {
	--aug-bg: #ffffff;
	--aug-bg: light-dark(#ffffff, #1e1e1e);
	--aug-fg: #111827;
	--aug-fg: light-dark(#111827, #f3f4f6);
	--aug-border: #e5e7eb;
	--aug-border: light-dark(#e5e7eb, #383838);
	--aug-bg-h: #f1f3f5;
	--aug-bg-h: light-dark(#f1f3f5, #242424);
	--aug-border-h: #d1d5db;
	--aug-border-h: light-dark(#d1d5db, #4b5563);
	--aug-info-fg: #6b7280;
	--aug-info-fg: light-dark(#6b7280, #9ca3af);
}

/* --- Dark Solid: the filled primary action --- */
.aug-control--dark_solid {
	--aug-bg: #111827;
	--aug-bg: light-dark(#111827, #f3f4f6);
	--aug-fg: #f9fafb;
	--aug-fg: light-dark(#f9fafb, #111827);
	--aug-border: transparent;
	--aug-bg-h: #1f2937;
	--aug-bg-h: light-dark(#1f2937, #ffffff);
	--aug-border-h: transparent;
	--aug-info-fg: #6b7280;
	--aug-info-fg: light-dark(#6b7280, #9ca3af);
}

/* --- Accent Pill: accent fill, Google mark on its own white chip --- */
.aug-control--accent_pill {
	--aug-radius: 999px;
	--aug-h: 44px;
	--aug-padx: 20px;
	--aug-gap: 10px;
	--aug-g-chip: 30px;
	--aug-fw-label: 600;
	--aug-border: transparent;
	--aug-border-h: transparent;
	--aug-info-fg: #6b7280;
	--aug-info-fg: light-dark(#6b7280, #9ca3af);
}
.aug-accent--brand.aug-control--accent_pill {
	--aug-bg: #e84e26;
	--aug-fg: #ffffff;
	--aug-bg-h: #d03e17;
	--aug-bg-h: light-dark(#d03e17, #f06a45);
}
.aug-accent--emerald.aug-control--accent_pill {
	--aug-bg: #059669;
	--aug-fg: #ffffff;
	--aug-bg-h: #047857;
	--aug-bg-h: light-dark(#047857, #0aa876);
}
.aug-accent--ink.aug-control--accent_pill {
	--aug-bg: #111827;
	--aug-fg: #ffffff;
	--aug-bg-h: #1f2937;
	--aug-bg-h: light-dark(#1f2937, #374151);
}

/* --- Compact: header and byline chip --- */
.aug-control--compact {
	--aug-radius: 6px;
	--aug-h: 32px;
	--aug-padx: 11px;
	--aug-gap: 7px;
	--aug-fs: 12.5px;

	--aug-bg: transparent;
	--aug-fg: #4b5563;
	--aug-fg: light-dark(#4b5563, #9ca3af);
	--aug-border: #e5e7eb;
	--aug-border: light-dark(#e5e7eb, #383838);
	--aug-bg-h: #f1f3f5;
	--aug-bg-h: light-dark(#f1f3f5, #242424);
	--aug-fg-h: #111827;
	--aug-fg-h: light-dark(#111827, #f3f4f6);
	--aug-border-h: #d1d5db;
	--aug-border-h: light-dark(#d1d5db, #4b5563);
	--aug-info-fg: #6b7280;
	--aug-info-fg: light-dark(#6b7280, #9ca3af);
}

/* --- Text Link: no chrome, sits inside a sentence --- */
.aug-control--text_link {
	--aug-h: auto;
	--aug-padx: 0;
	--aug-gap: 8px;
	--aug-radius: 0;
	--aug-deco: underline;
	--aug-border: transparent;
	--aug-border-h: transparent;

	--aug-fg: #111827;
	--aug-fg: light-dark(#111827, #f3f4f6);
	--aug-bg: transparent;
	--aug-bg-h: transparent;
	--aug-info-fg: #6b7280;
	--aug-info-fg: light-dark(#6b7280, #9ca3af);
}

/* --- Official: Google renders this one; we only reserve its space --- */
.aug-official-wrap {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
}
.aug-official-wrap [google-add-preferred-source-btn] {
	display: inline-block;
}

/* Shown in the admin picker where the SDK is not loaded to draw the real one. */
.aug-style__pending {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 40px;
	padding: 0 12px;
	border: 1px dashed var(--aug-a-line-strong, #d4d4d8);
	border-radius: 6px;
	font-size: 12px;
	color: var(--aug-a-ink-3, #71717a);
	text-align: center;
}

/* ----------------------------------------------------------- 2. Consumption */

.aug-btn {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;

	font-family: inherit !important;
	font-size: var(--aug-fs) !important;
	font-weight: var(--aug-fw) !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-align: center !important;
	white-space: nowrap !important;
	vertical-align: middle !important;

	gap: var(--aug-gap);
	height: var(--aug-h) !important;
	padding: 0 var(--aug-padx) !important;
	border-radius: var(--aug-radius) !important;
	border: 1px solid var(--aug-border) !important;
	background: var(--aug-bg) !important;
	color: var(--aug-fg) !important;
	box-shadow: var(--aug-shadow);
	cursor: pointer !important;
	transition:
		background-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
		color 160ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 120ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aug-btn__label {
	display: inline-block;
	line-height: 1.1;
}

/* Google's own treatment is set in its grotesque, not the host theme's face.
   `font-family: inherit` above is right for the six styles that should belong
   to the site's design system, but this one is a reproduction of a specific
   control - on a serif host theme "inherit" would render it in serif and it
   would stop reading as the thing readers already recognise. */
.aug-control--google_classic .aug-btn {
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

.aug-btn__g {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 0;
}

/* Accent Pill sets the mark on a white chip so it holds on any accent fill. */
.aug-control--accent_pill .aug-btn__g {
	width: var(--aug-g-chip);
	height: var(--aug-g-chip);
	border-radius: 999px;
	background: #ffffff;
}

/* --- states --- */
.aug-btn:hover {
	background: var(--aug-bg-h, var(--aug-bg)) !important;
	border-color: var(--aug-border-h, var(--aug-border)) !important;
	color: var(--aug-fg-h, var(--aug-fg)) !important;
}

.aug-btn:active {
	transform: translateY(1px);
}

.aug-btn:focus-visible {
	outline: 2px solid var(--aug-focus);
	outline-offset: 2px;
}

.aug-btn[aria-busy='true'],
.aug-btn[data-aug-state='pending'] {
	cursor: progress !important;
	opacity: 0.72;
}

.aug-btn:disabled,
.aug-btn[aria-disabled='true'] {
	opacity: 0.45;
	cursor: not-allowed !important;
	transform: none;
}

/* Text-link is the one style that underlines, and only on hover and focus. */
.aug-control--text_link .aug-btn {
	text-decoration: none !important;
	text-underline-offset: 3px;
}
.aug-control--text_link .aug-btn:hover,
.aug-control--text_link .aug-btn:focus-visible {
	text-decoration: var(--aug-deco) !important;
	text-decoration-thickness: 1px;
}

/* --- info disclosure --- */
.aug-info {
	appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--aug-info-fg) !important;
	cursor: pointer !important;
	transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1), color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.aug-info:hover {
	background: color-mix(in srgb, currentColor 12%, transparent) !important;
}
.aug-info:active {
	transform: translateY(1px);
}
.aug-info:focus-visible {
	outline: 2px solid var(--aug-focus);
	outline-offset: 2px;
}
.aug-info[aria-expanded='true'] {
	background: color-mix(in srgb, currentColor 14%, transparent) !important;
}

.aug-info__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 40;
	box-sizing: border-box;
	width: min(320px, 78vw);
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.5;
	text-align: left;
	white-space: normal;
	background: #ffffff;
	color: #4b5563;
	box-shadow: 0 10px 28px rgb(0 0 0 / 14%);
}

/* The popup sits at the bottom of the viewport, so a panel opening downward
   from it lands off-screen. Flip it above the control there. */
.aug-popup .aug-info__panel {
	top: auto;
	bottom: calc(100% + 8px);
}

@media (prefers-color-scheme: dark) {
	.aug-tone-auto .aug-info__panel {
		background: #1e1e1e;
		color: #9ca3af;
	}
}
.aug-tone-dark .aug-info__panel {
	background: #1e1e1e;
	color: #9ca3af;
}
.aug-tone-light .aug-info__panel {
	background: #ffffff;
	color: #4b5563;
}

/* ---------------------------------------------------- 3. Placement wrappers */

/* Vertical rhythm is ours; horizontal layout belongs to the theme. Setting
   the margin shorthand here (or a max-width) would override the auto-inline
   margins that block themes use to centre content inside their constrained
   layout, and the button would sit flush against the page edge instead of in
   the article column. */
.aug-block {
	display: block !important;
	clear: both;
	margin-top: 20px !important;
	margin-bottom: 20px !important;
}

.aug-inline {
	display: inline-block;
	max-width: 100%;
}

/* ------------------------------------------------------------- 4. The popup */

.aug-popup {
	position: fixed;
	z-index: 9990;
	bottom: 24px;
	right: 24px;
	box-sizing: border-box;
	width: min(340px, calc(100vw - 32px));
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aug-popup[hidden] {
	display: none;
}

.aug-popup[data-aug-open='1'] {
	opacity: 1;
	transform: translateY(0);
}

.aug-popup--bottom-left {
	right: auto;
	left: 24px;
}
.aug-popup--bottom-center {
	right: auto;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
}
.aug-popup--bottom-center[data-aug-open='1'] {
	transform: translateX(-50%) translateY(0);
}

/* One elevation system: a soft offset shadow, no border. */
.aug-popup__card {
	position: relative;
	box-sizing: border-box;
	padding: 16px 18px 18px;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 16px 40px rgb(0 0 0 / 16%);
	font-family: inherit;
	font-size: 13px;
	line-height: 1.55;
	color: #4b5563;
}

/* The card follows the same tone the PHP resolved for the button inside it, so
   a dark-pinned reader never gets a dark control on a white card. Light is the
   base declaration above; only the two dark cases are overridden here. */
@media (prefers-color-scheme: dark) {
	.aug-popup.aug-tone-auto .aug-popup__card,
	.aug-popup[data-aug-tone='auto'] .aug-popup__card {
		background: #1e1e1e;
		box-shadow: 0 16px 40px rgb(0 0 0 / 52%);
		color: #9ca3af;
	}
}

.aug-popup.aug-tone-dark .aug-popup__card,
.aug-popup[data-aug-tone='dark'] .aug-popup__card {
	background: #1e1e1e;
	box-shadow: 0 16px 40px rgb(0 0 0 / 52%);
	color: #9ca3af;
}

.aug-popup__lead {
	margin: 0 0 14px !important;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
	color: inherit !important;
	max-width: none !important;
}

.aug-popup__action {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.aug-popup__close {
	appearance: none !important;
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 26px !important;
	height: 26px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: #71717a !important;
	cursor: pointer !important;
	transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1), color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.aug-popup__close:hover {
	background: rgb(0 0 0 / 6%) !important;
	color: #111827 !important;
}
.aug-popup__close:focus-visible {
	outline: 2px solid var(--aug-focus, #e84e26);
	outline-offset: 2px;
}

/* ------------------------------------------------- 5. Browser surfaces + a11y */

.aug-btn::selection,
.aug-btn *::selection,
.aug-info__panel::selection {
	background: rgb(232 78 38 / 18%);
	color: inherit;
}

/* Announced to assistive technology, never drawn. */
.aug-live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.aug-popup__card ::selection {
	background: rgb(232 78 38 / 18%);
}

@media (max-width: 480px) {
	.aug-popup {
		right: 16px;
		left: 16px;
		bottom: 16px;
		width: auto;
	}
	.aug-popup--bottom-center {
		left: 16px;
		transform: translateY(8px);
	}
	.aug-popup--bottom-center[data-aug-open='1'] {
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.aug-btn,
	.aug-info,
	.aug-popup,
	.aug-popup__close {
		transition: none !important;
	}
	.aug-btn:active,
	.aug-info:active {
		transform: none;
	}
}