/* PIP Deal Analyzer panel. Reuses pip-design-system.css tokens throughout —
   no new colours are introduced beyond the gold accent and status red already
   used elsewhere on the site (see .pip-gate-locked / .pip-nda for precedent). */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');

.pip-analyst {
	background: var(--pip-white);
	border: 1px solid var(--pip-ink-30);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin: var(--space-4) 0;
	max-width: 100%;
	overflow-x: hidden;
}
.pip-analyst__inner { display: flex; flex-direction: column; gap: var(--space-3); }

.pip-analyst__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pip-ink-60);
}
.pip-analyst__eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--pip-gold); flex-shrink: 0; }
.pip-analyst__title { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 700; margin: 8px 0 6px; color: var(--pip-ink); }
.pip-analyst__sub { color: var(--pip-ink-60); font-size: 14px; line-height: 1.65; margin: 0 0 var(--space-3); max-width: 62ch; }

.pip-analyst__run { min-height: 44px; }
.pip-analyst__run:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

/* Screen-reader-only utility (no visible sr-only class exists site-wide, so it
   is scoped to this component rather than added globally). */
.pip-analyst__sr-only {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pip-analyst__status { display: flex; align-items: center; gap: 10px; }
.pip-analyst__spinner {
	width: 18px; height: 18px;
	border-radius: 50%;
	border: 2px solid var(--pip-ink-30);
	border-top-color: var(--pip-gold);
	animation: pip-analyst-spin 0.8s linear infinite;
	flex-shrink: 0;
}
@keyframes pip-analyst-spin { to { transform: rotate(360deg); } }
.pip-analyst__timer {
	font-family: var(--pip-figure);
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	color: var(--pip-ink-60);
}

.pip-analyst__error {
	background: #FBEAEA;
	border: 1px solid #E3B3B3;
	color: #8B2C2C;
	border-radius: var(--radius-sm);
	padding: 12px 16px;
	font-size: 14px;
	line-height: 1.5;
}

.pip-analyst__notice {
	background: var(--pip-gold-light);
	border: 1px solid rgba(196, 153, 42, 0.4);
	border-radius: var(--radius-sm);
	padding: var(--space-2) var(--space-3);
}
.pip-analyst__notice-title { font-weight: 600; color: #6B5013; margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.pip-analyst__notice-list { margin: 0 0 8px; padding-left: 20px; font-size: 14px; color: #6B5013; }
.pip-analyst__notice-list li { margin-bottom: 4px; word-break: break-word; }
.pip-analyst__notice-note { margin: 0; font-size: 12px; color: #8B6A1A; line-height: 1.5; }

.pip-analyst__result { display: flex; flex-direction: column; gap: var(--space-3); }
.pip-analyst__summary { font-size: 16px; line-height: 1.7; color: var(--pip-ink); margin: 0; }

.pip-analyst__section { padding-top: var(--space-3); border-top: 1px solid var(--pip-surface); }
.pip-analyst__section:first-of-type { border-top: 0; padding-top: 0; }
.pip-analyst__section-title { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; margin: 0 0 12px; color: var(--pip-ink); }

.pip-analyst__facts { display: grid; gap: 14px; margin: 0; }
.pip-analyst__fact { display: grid; grid-template-columns: minmax(120px, 32%) 1fr; gap: 4px 12px; align-items: start; }
.pip-analyst__fact dt { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--pip-ink); margin: 0; }
.pip-analyst__fact dd { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pip-analyst__value {
	font-family: var(--pip-figure);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	font-size: 14px;
	color: var(--pip-ink);
	line-height: 1.5;
	word-break: break-word;
}
.pip-analyst__source { font-size: 12px; color: var(--pip-ink-60); word-break: break-word; }

.pip-analyst__questions { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.pip-analyst__questions li { font-size: 14px; line-height: 1.6; color: var(--pip-ink); }
.pip-analyst__question-why { color: var(--pip-ink-60); }

.pip-analyst__disclaimer {
	font-size: 12px;
	color: var(--pip-ink-60);
	line-height: 1.6;
	border-top: 1px solid var(--pip-surface);
	padding-top: var(--space-2);
	margin: 0;
}

/* --- Ask box --- */
.pip-analyst__ask {
	border-top: 1px solid var(--pip-ink-30);
	padding-top: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.pip-analyst__ask-title { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; margin: 0; color: var(--pip-ink); }
.pip-analyst__ask-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pip-analyst__ask-input {
	flex: 1 1 240px;
	min-width: 0;
	padding: 12px 16px;
	border: 1.5px solid var(--pip-ink-30);
	border-radius: var(--radius-pill);
	font-family: 'Inter', sans-serif;
	/* !important: the theme's own reset (body.pip-platform-theme :where(button,
	   input, select, textarea){font-size:inherit}) carries a body+class prefix
	   outside the :where(), which out-specifies a plain class selector here and
	   would otherwise let the input inherit whatever ambient size surrounds it.
	   16px is a floor, not a preference — anything smaller triggers iOS zoom
	   on focus, so it must win regardless of where this panel is mounted. */
	font-size: 16px !important;
	min-height: 44px;
	background: var(--pip-white);
	color: var(--pip-ink);
}
.pip-analyst__ask-input:focus-visible,
.pip-analyst__ask-input:focus { outline: 2px solid var(--pip-gold); outline-offset: 2px; border-color: var(--pip-ink); }
.pip-analyst__ask-submit { min-height: 44px; flex: 0 0 auto; }
.pip-analyst__ask-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

.pip-analyst__answers { display: flex; flex-direction: column; gap: var(--space-3); }
.pip-analyst__answer {
	border: 1px solid var(--pip-ink-30);
	border-radius: var(--radius-sm);
	padding: var(--space-2) var(--space-3);
	background: var(--pip-surface);
}
.pip-analyst__answer-q { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; margin: 0 0 8px; color: var(--pip-ink); }
.pip-analyst__answer-a { font-size: 14px; line-height: 1.65; margin: 0 0 10px; color: var(--pip-ink); white-space: pre-wrap; }

/* Pending row: shown above the answers list while one question is in
   flight. Reuses .pip-analyst__spinner so it inherits the same
   prefers-reduced-motion handling as the run-analysis spinner — no
   separate rule needed here. */
.pip-analyst__answer--pending { background: var(--pip-white); }
.pip-analyst__pending-row { display: flex; align-items: center; gap: 10px; }
.pip-analyst__pending-text { font-size: 13px; color: var(--pip-ink-60); }

.pip-analyst__cites { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pip-analyst__cite { border-left: 3px solid var(--pip-gold); padding: 4px 0 4px 12px; }
.pip-analyst__cite-head {
	font-family: var(--pip-figure);
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	font-weight: 500;
	color: var(--pip-ink);
	display: block;
	word-break: break-word;
}
.pip-analyst__cite-quote { margin: 6px 0 0; padding: 0; border: 0; font-size: 12px; color: var(--pip-ink-60); font-style: italic; }

/* An unresolved citation must never look like a verified one: muted border,
   no gold, plus an explicit flag rather than a silent visual downgrade. */
.pip-analyst__cite.is-unresolved { border-left-color: var(--pip-ink-30); }
.pip-analyst__cite-flag {
	display: inline-block;
	margin-top: 6px;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #8B2C2C;
	background: #FBEAEA;
	padding: 3px 10px;
	border-radius: 999px;
}

.pip-analyst *:focus-visible { outline: 2px solid var(--pip-gold); outline-offset: 2px; }

@media (max-width: 767px) {
	.pip-analyst { padding: var(--space-3); }
	.pip-analyst__fact { grid-template-columns: 1fr; }
	.pip-analyst__ask-row { flex-direction: column; }
	/* flex-basis is an axis-relative size: the 240px basis on .pip-analyst__ask-input
	   sizes its WIDTH in the desktop row layout, but once the row above switches to
	   flex-direction:column that same 240px sizes its HEIGHT instead, producing a
	   240px-tall text input. Reset the whole shorthand here rather than only width. */
	.pip-analyst__ask-input, .pip-analyst__ask-submit { width: 100%; flex: 0 0 auto; }
	.pip-analyst__run { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.pip-analyst *,
	.pip-analyst *::before,
	.pip-analyst *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}