/*
 * Ask jobgetr.ai - shared component styles.
 *
 * One component on two surfaces. The chrome (label, field, chips) follows
 * the surface it sits on: .jg-ask--on-light on the white instrument page,
 * .jg-ask--on-dark inside the navy Premium panel. The answer region has its
 * own reading mode, independent of the surface: "light" is a warm paper
 * research note (the default), "dark" is the jobgetr.ai terminal palette
 * the Premium panel already uses. Tokens come from the child theme
 * (--jg-*) with the same fallbacks the platform stylesheet carries.
 */

.jg-ask {
	--ask-ink: var(--jg-navy, #131f49);
	--ask-ink-soft: var(--jg-gray, #717176);
	--ask-line: var(--jg-border, #e1e4ea);
	--ask-brand: var(--jg-accent, #ff6a13);
	--ask-field-bg: #ffffff;
	--ask-field-ink: #111318;
	--ask-chip-bg: #f4f5f7;
	--ask-chip-line: #d9dde5;
	--ask-chip-ink: #111318;
	--ask-ring: rgba(255, 106, 19, 0.2);
	--ask-menu-bg: #ffffff;
	--ask-menu-line: #d9dde5;
	--ask-menu-ink: #111318;
	--ask-menu-hover: #f4f5f7;
	--ask-tag-bg: rgba(255, 106, 19, 0.12);
	--ask-tag-line: rgba(255, 106, 19, 0.4);
	--ask-tag-ink: #a3450b;
	--ask-mono: var(--jg-font-mono, ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Consolas, monospace);
	--ask-paper: #f4efe0;
	--ask-paper-line: #d8d0b6;
	--ask-paper-ink: #1f2329;
	--ask-paper-soft: #5b5f66;
	--ask-terminal: #0d1f3d;
	--ask-terminal-line: #26395f;
	--ask-terminal-ink: #ffffff;
	--ask-terminal-soft: rgba(255, 255, 255, 0.66);

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	min-width: 0;
	padding: 14px 16px 12px;
	border: 1px solid var(--ask-line);
	background: #fff;
	color: var(--ask-ink);
}

.jg-ask * {
	box-sizing: border-box;
}

/* ---- on the dark Premium panel */
.jg-ask--on-dark {
	--ask-ink: #ffffff;
	--ask-ink-soft: rgba(255, 255, 255, 0.66);
	--ask-line: #26395f;
	--ask-field-bg: #0b1a33;
	--ask-field-ink: #ffffff;
	--ask-chip-bg: #13284c;
	--ask-chip-line: #2c4470;
	--ask-chip-ink: #dce3ee;
	--ask-ring: rgba(255, 106, 19, 0.28);
	--ask-menu-bg: #0f2141;
	--ask-menu-line: #2c4470;
	--ask-menu-ink: #ffffff;
	--ask-menu-hover: #17305a;
	--ask-tag-bg: rgba(255, 106, 19, 0.16);
	--ask-tag-line: rgba(255, 106, 19, 0.5);
	--ask-tag-ink: #ff9a5c;

	padding: 0;
	border: 0;
	background: transparent;
}

/* ---- role summary strip (deterministic, under the form and its lede) */
.jg-ask__brief {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 0 0;
	margin-top: 2px;
	border-top: 1px solid var(--ask-line);
}

.jg-ask__brief-title {
	margin: 0;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--ask-ink);
}

.jg-ask__brief-text {
	margin: 0;
	max-width: 76ch;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ask-field-ink);
}

.jg-ask__brief-source {
	margin: 0;
	font-family: var(--ask-mono);
	font-size: 11px;
	color: var(--ask-ink-soft);
}

.jg-ask__brief .jg-ask__suggest {
	margin-top: 4px;
}

/* ---- head */
.jg-ask__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
}

/* The product identity: the mark and the label read as one row, so the
   surface's context stays a separate item and keeps its place opposite
   them. */
.jg-ask__identity {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	font-size: 12px;
}

/* Sized from the identity row's type, so the mark and the label stay in
   proportion, and only in height - the width follows, so the mark keeps
   its aspect ratio. No box, no background, no shadow. Scoped through
   .jg-ask because the Newspaper theme styles bare img. */
.jg-ask .jg-ask__mark {
	flex: 0 0 auto;
	display: block;
	width: auto;
	height: 1.35em;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.jg-ask__label {
	font-size: inherit;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ask-ink);
}

/* On the navy panel the label takes the surface's own white ink; the mark
   beside it carries the brand colour. */
.jg-ask--on-dark .jg-ask__label {
	color: var(--ask-ink);
}

.jg-ask__context {
	font-family: var(--ask-mono);
	font-size: 11px;
	color: var(--ask-ink-soft);
}

/* ---- form: one rounded field holding the question, the Ask mode control
   and the submit button */
.jg-ask__form {
	display: block;
	margin: 0;
}

.jg-ask__field {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-width: 0;
	padding: 6px 6px 6px 16px;
	border: 1px solid var(--ask-line);
	border-radius: 26px;
	background: var(--ask-field-bg);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.jg-ask__field:focus-within {
	border-color: var(--ask-brand);
	box-shadow: 0 0 0 3px var(--ask-ring);
}

/* The input is the field's inner surface, not a box of its own: the
   Newspaper theme styles `input[type="text"]` by element and attribute,
   so these rules are scoped through .jg-ask to outrank it. */
.jg-ask .jg-ask__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font: inherit;
	font-size: 15px;
	line-height: 1.2;
	color: var(--ask-field-ink);
	box-shadow: none;
}

.jg-ask .jg-ask__input::placeholder {
	color: var(--ask-ink-soft);
	opacity: 1;
}

/* The ring belongs to the field, which is what the visitor sees as the
   control; the input inside it carries no second outline. */
.jg-ask .jg-ask__input:focus,
.jg-ask .jg-ask__input:focus-visible {
	outline: none;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.jg-ask__controls {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
}

/* ---- submit: arrow at rest, square Stop while a question is running.
   The button is live in both states, so it keeps its pointer and ring. */
.jg-ask__submit {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--ask-brand);
	border-radius: 50%;
	background: var(--ask-brand);
	color: #0b1426;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.jg-ask__submit:hover,
.jg-ask__submit:focus {
	background: transparent;
	color: var(--ask-brand);
}

.jg-ask__submit:focus-visible {
	outline: 2px solid var(--ask-brand);
	outline-offset: 2px;
}

.jg-ask__icon {
	display: block;
}

.jg-ask__submit[data-jg-running="true"] .jg-ask__icon--arrow,
.jg-ask__submit[data-jg-running="false"] .jg-ask__icon--square {
	display: none;
}

/* ---- Ask mode: a compact control in the field, its menu over the page */
.jg-ask__tier {
	position: relative;
	flex: 0 0 auto;
}

.jg-ask__tier-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 30px;
	padding: 0 10px;
	border: 1px solid var(--ask-chip-line);
	border-radius: 15px;
	background: var(--ask-chip-bg);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: var(--ask-chip-ink);
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.jg-ask__tier-toggle:hover,
.jg-ask__tier-toggle:focus {
	border-color: var(--ask-brand);
	color: var(--ask-brand);
}

.jg-ask__tier-toggle:focus-visible {
	outline: 2px solid var(--ask-brand);
	outline-offset: 2px;
}

.jg-ask__tier-caret {
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}

.jg-ask__tier-toggle[aria-expanded="true"] .jg-ask__tier-caret {
	transform: rotate(180deg);
}

.jg-ask__tier-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 30;
	min-width: 190px;
	margin: 0;
	padding: 4px;
	list-style: none;
	border: 1px solid var(--ask-menu-line);
	border-radius: 10px;
	background: var(--ask-menu-bg);
	box-shadow: 0 10px 28px rgba(9, 17, 34, 0.22);
}

.jg-ask__tier-menu[hidden] {
	display: none;
}

/* The Newspaper theme carries its own list rules; the menu owns its rows. */
.jg-ask__tier-menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jg-ask__tier-menu li::before {
	content: none;
}

.jg-ask__tier-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	font: inherit;
	font-size: 13px;
	line-height: 1.3;
	color: var(--ask-menu-ink);
	text-align: left;
	cursor: pointer;
}

.jg-ask__tier-option:hover,
.jg-ask__tier-option:focus {
	background: var(--ask-menu-hover);
}

.jg-ask__tier-option:focus-visible {
	outline: 2px solid var(--ask-brand);
	outline-offset: -2px;
}

.jg-ask__tier-option[aria-checked="true"] .jg-ask__tier-name {
	font-weight: 800;
}

.jg-ask__tier-name {
	min-width: 0;
}

.jg-ask__tier-tag {
	flex: 0 0 auto;
	padding: 2px 7px;
	border: 1px solid var(--ask-tag-line);
	border-radius: 10px;
	background: var(--ask-tag-bg);
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.07em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--ask-tag-ink);
}

/* ---- copy */
.jg-ask__lede {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ask-ink-soft);
}

/* A multi-line lede stacks inside its paragraph: one block per line, no
   type of its own, so every line reads the same and the paragraph keeps
   its single slot in the component's spacing. */
.jg-ask__lede-line {
	display: block;
}

.jg-ask__fine {
	margin: 0;
	font-size: 11px;
	line-height: 1.45;
	color: var(--ask-ink-soft);
}

/* ---- suggested questions */
.jg-ask__suggest {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.jg-ask__suggest[hidden] {
	display: none;
}

.jg-ask__suggest-label {
	margin-right: 2px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ask-ink-soft);
}

.jg-ask__chip {
	padding: 5px 10px;
	border: 1px solid var(--ask-chip-line);
	border-radius: 4px;
	background: var(--ask-chip-bg);
	font: inherit;
	font-size: 12.5px;
	line-height: 1.3;
	color: var(--ask-chip-ink);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.jg-ask__chip:hover,
.jg-ask__chip:focus {
	border-color: var(--ask-brand);
	color: var(--ask-brand);
}

.jg-ask__chip:focus-visible {
	outline: 2px solid var(--ask-brand);
	outline-offset: 1px;
}

/* ---- answer region: the research note (light) or the terminal (dark) */
.jg-ask__answer {
	--note-bg: var(--ask-paper);
	--note-line: var(--ask-paper-line);
	--note-ink: var(--ask-paper-ink);
	--note-soft: var(--ask-paper-soft);

	padding: 12px 16px 14px;
	border: 1px solid var(--note-line);
	background: var(--note-bg);
	color: var(--note-ink);
}

.jg-ask__answer[hidden] {
	display: none;
}

.jg-ask__answer[data-jg-mode="dark"] {
	--note-bg: var(--ask-terminal);
	--note-line: var(--ask-terminal-line);
	--note-ink: var(--ask-terminal-ink);
	--note-soft: var(--ask-terminal-soft);
}

.jg-ask__answer-bar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--note-line);
}

.jg-ask__question {
	margin: 0;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--note-ink);
}

.jg-ask__question::before {
	content: 'Q · ';
	color: var(--note-soft);
	font-weight: 600;
}

.jg-ask__mode {
	display: inline-flex;
	flex: 0 0 auto;
	gap: 2px;
	border: 1px solid var(--note-line);
	border-radius: 3px;
	padding: 2px;
}

.jg-ask__mode-btn {
	padding: 2px 8px;
	border: 0;
	border-radius: 2px;
	background: transparent;
	font: inherit;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--note-soft);
	cursor: pointer;
}

.jg-ask__mode-btn[aria-pressed="true"] {
	background: var(--note-ink);
	color: var(--note-bg);
}

.jg-ask__mode-btn:focus-visible {
	outline: 2px solid var(--ask-brand);
	outline-offset: 1px;
}

.jg-ask__status {
	margin: 10px 0 0;
	font-family: var(--ask-mono);
	font-size: 12px;
	color: var(--note-soft);
}

.jg-ask__status[hidden],
.jg-ask__body[hidden] {
	display: none;
}

.jg-ask__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 10px;
}

.jg-ask__kicker {
	margin: 0;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--note-soft);
}

.jg-ask__text {
	margin: 0;
	max-width: 68ch;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--note-ink);
}

.jg-ask__source,
.jg-ask__vintage {
	margin: 0;
	font-family: var(--ask-mono);
	font-size: 11px;
	color: var(--note-soft);
}

.jg-ask__source[hidden],
.jg-ask__vintage[hidden],
.jg-ask__dest[hidden],
.jg-ask__level[hidden],
.jg-ask__cta[hidden] {
	display: none;
}

.jg-ask__dest {
	margin: 0;
	font-size: 12.5px;
}

.jg-ask__dest a {
	font-weight: 700;
	color: var(--note-ink) !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

.jg-ask__dest a:hover,
.jg-ask__dest a:focus {
	color: var(--ask-brand) !important;
}

.jg-ask__level {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	padding-top: 8px;
	border-top: 1px solid var(--note-line);
	font-size: 12px;
	color: var(--note-soft);
}

.jg-ask__level strong {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--note-ink);
}

.jg-ask__cta {
	align-self: flex-start;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ask-brand) !important;
	text-decoration: none !important;
}

.jg-ask__cta:hover,
.jg-ask__cta:focus {
	text-decoration: underline !important;
}

/* ---- surfaces */
.jg-prm__tool .jg-ask {
	gap: 12px;
}

.jg-inst .jg-ask {
	margin-top: 22px;
}

/* ---- responsive */
@media (max-width: 767px) {
	.jg-ask {
		padding: 12px 12px 10px;
	}

	.jg-ask--on-dark {
		padding: 0;
	}

	.jg-ask .jg-ask__input {
		font-size: 16px;
	}

	.jg-ask__field {
		gap: 6px;
		padding: 5px 5px 5px 13px;
		border-radius: 24px;
	}

	.jg-ask__tier-toggle {
		height: 28px;
		padding: 0 8px;
		font-size: 11.5px;
	}

	.jg-ask__submit {
		width: 34px;
		height: 34px;
	}

	.jg-ask__tier-menu {
		min-width: 176px;
	}

	.jg-ask__answer-bar {
		flex-wrap: wrap;
	}

	.jg-ask__text {
		font-size: 14px;
	}
}

/* ---- rotating sample questions (homepage and role surfaces, data-jg-ask-rotate)
   The controller swaps the field's placeholder every few seconds; the
   is-rotating class fades it out for the swap. On phones the question
   moves to the caption under the field, which can wrap. Reduced motion
   keeps the first question still (the controller never starts). */
.jg-ask .jg-ask__input {
	text-overflow: ellipsis;
}

.jg-ask .jg-ask__input::placeholder {
	transition: opacity 0.32s ease;
}

.jg-ask.is-rotating .jg-ask__input::placeholder {
	opacity: 0;
}

.jg-ask__rotate-caption {
	display: none;
	margin: 8px 0 0;
	padding: 0 14px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ask-ink-soft);
	transition: opacity 0.32s ease;
}

@media (max-width: 767px) {
	.jg-ask__rotate-caption {
		display: block;
	}

	.jg-ask.is-rotating .jg-ask__rotate-caption {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jg-ask .jg-ask__input::placeholder,
	.jg-ask__rotate-caption {
		transition: none;
	}
}