/* incitez_web styles — self-hosted, no external resources (privacy invariant).
   M1/M2 placeholder design; the M3 design pass refines this. */

/* Libre Baskerville (SIL OFL), self-hosted woff2 — renders identically on every machine
   (no OS-font dependency) and stays CSP-clean (font-src 'self', same-origin). The
   "weight of law" serif. font-display: swap shows the serif fallback until it loads. */
@font-face {
	font-family: "Libre Baskerville"; font-style: normal; font-weight: 400; font-display: swap;
	src: url("fonts/libre-baskerville-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Libre Baskerville"; font-style: normal; font-weight: 700; font-display: swap;
	src: url("fonts/libre-baskerville-latin-700-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap;
	src: url("fonts/libre-baskerville-latin-400-italic.woff2") format("woff2");
}
:root {
	--accent: #3b82f6;
	--accent-dark: #2563eb;
	--ink: #0f172a;
	--muted: #64748b;
	--faint: #94a3b8;
	--bg: #f8fafc;
	--panel: #ffffff;
	--border: #e2e8f0;
	--ok-bg: #ecfdf5; --ok-fg: #047857; --ok-bd: #a7f3d0;
	--warn-bg: #fffbeb; --warn-fg: #b45309; --warn-bd: #fde68a;
	--chip-bg: #f1f5f9;
	/* Self-hosted Libre Baskerville → consistent "weight of law" serif on every machine;
	   serif fallbacks cover the brief font-swap window / offline first paint. */
	--font: "Libre Baskerville", Georgia, "Times New Roman", Times, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	font-family: var(--font);
	color: var(--ink);
	background: var(--bg);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.app { max-width: 760px; margin: 0 auto; padding: 3rem 1.5rem 4rem; }

/* Boot placeholder — shown until Elm renders (Browser.element replaces #app).
   Keeps the page from being blank while main.js/Elm download. */
.boot {
	max-width: 760px; margin: 0 auto; padding: 3rem 1.5rem;
	min-height: 60vh; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 1.1rem; text-align: center;
}
.boot__logo { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.boot__spinner {
	width: 30px; height: 30px; border-radius: 50%;
	border: 3px solid var(--border); border-top-color: var(--accent);
	animation: boot-spin 0.8s linear infinite;
}
.boot__msg { color: var(--muted); font-size: 0.9375rem; }
@keyframes boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot__spinner { animation: none; } }

.app__header { margin-bottom: 1rem; }
.app__title { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; margin: 0; }
.app__tagline { color: var(--muted); margin: 0.25rem 0 0; font-size: 1.0625rem; }

.badge {
	display: inline-flex; align-items: center; gap: 0.4em;
	font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em;
	padding: 0.3rem 0.6rem; border-radius: 999px;
	border: 1px solid var(--border); color: var(--muted); background: var(--panel);
}
.badge--checking { color: var(--faint); }
.badge--ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.badge--warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.upload { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 0.75rem; }
.upload__btn {
	font-family: var(--font); font-size: 0.875rem; font-weight: 600;
	color: var(--accent-dark); background: var(--panel);
	border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.9rem; cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.upload__btn:hover { border-color: var(--accent); background: rgba(59, 130, 246, 0.04); }
.upload__hint { color: var(--faint); font-size: 0.8125rem; }

.demos {
	display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
	margin: 0 0 1rem; padding: 0.6rem 0.75rem;
	border: 1px dashed var(--border); border-radius: 8px; background: var(--panel);
}
.demos__label { color: var(--muted); font-size: 0.8125rem; }
.demos__btn {
	display: inline-block; text-decoration: none;
	font-family: var(--font); font-size: 0.8125rem; font-weight: 600;
	color: var(--accent-dark); background: rgba(59, 130, 246, 0.06);
	border: 1px solid var(--border); border-radius: 999px; padding: 0.35rem 0.8rem; cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.demos__btn:hover { border-color: var(--accent); background: rgba(59, 130, 246, 0.12); }
/* The currently-loaded demo stays highlighted until another demo / upload / edit. */
.demos__btn--active {
	color: #fff; background: var(--accent); border-color: var(--accent);
}
.demos__btn--active:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.app__privacy {
	margin: 1.25rem 0; padding: 0.75rem 1rem;
	border-left: 3px solid var(--accent); background: var(--panel);
	border-radius: 0 8px 8px 0; color: var(--muted); font-size: 0.9375rem;
}
.app__privacy-em { color: var(--ink); font-weight: 600; }

.app__input {
	width: 100%; min-height: 200px; padding: 1rem;
	font-family: var(--font); font-size: 0.9375rem; color: var(--ink);
	background: var(--panel); border: 1px solid var(--border);
	border-radius: 10px; resize: vertical;
}
.app__input:focus {
	outline: none; border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.app__analyze {
	margin-top: 1rem; padding: 0.7rem 1.4rem;
	font-family: var(--font); font-size: 0.9375rem; font-weight: 600;
	color: #fff; background: var(--accent); border: none; border-radius: 8px;
	cursor: pointer; transition: background 0.15s ease, opacity 0.15s ease;
}
.app__analyze:hover:not(:disabled) { background: var(--accent-dark); }
.app__analyze:disabled { opacity: 0.45; cursor: not-allowed; }

.results { margin-top: 2rem; }
.results--status { color: var(--muted); }
.results--error {
	color: var(--warn-fg); background: var(--warn-bg);
	border: 1px solid var(--warn-bd); border-radius: 8px; padding: 0.75rem 1rem;
}
.results--scan {
	color: var(--muted); background: var(--panel);
	border: 1px dashed var(--border); border-radius: 8px; padding: 0.85rem 1rem;
}
.results__count {
	font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.06em; color: var(--faint); margin: 0 0 0.75rem;
}
/* Folded-count note (e.g. "64 bare § hidden") — sits inside .results__count but
   reads as a quiet aside, not part of the uppercase count label. */
.results__folded { text-transform: none; letter-spacing: normal; font-weight: 600; color: var(--muted); }
/* Clickable "N unclassified ▸ review" — reveals the hidden UnknownCitations for audit. */
.results__reveal {
	font: inherit; text-transform: none; letter-spacing: normal; font-weight: 600;
	color: var(--accent-dark); background: none; border: none; padding: 0; cursor: pointer;
}
.results__reveal:hover { text-decoration: underline; }
/* The revealed audit section — set off + de-emphasized from the main authority list. */
.results__unclassified { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed var(--border); }
.results__unclassified-head { font-size: 0.8125rem; color: var(--muted); margin: 0 0 0.5rem; }
.cite--unclassified { opacity: 0.75; }
.results__list { display: flex; flex-direction: column; gap: 0.6rem; }
/* Download row — export the results as Table of Authorities / annotated HTML / report /
   JSON / TSV. Generated client-side; nothing is uploaded. */
.results__exports { display: flex; flex-direction: column; gap: 0.4rem; margin: 0 0 1rem; }
.results__export-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.results__exports-label { min-width: 4.5rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); }
.results__export-btn {
	font-family: var(--font); font-size: 0.8125rem; font-weight: 600;
	color: var(--accent-dark); background: var(--panel);
	border: 1px solid var(--border); border-radius: 7px; padding: 0.35rem 0.7rem; cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.results__export-btn:hover { border-color: var(--accent); background: rgba(59, 130, 246, 0.06); }

.cite {
	background: var(--panel); border: 1px solid var(--border);
	border-radius: 10px; padding: 0.85rem 1rem;
}
.cite__head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.cite__kind {
	font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.04em; color: var(--accent);
	background: rgba(59, 130, 246, 0.1); padding: 0.15rem 0.45rem; border-radius: 5px;
	flex: none;
}
.cite__title { font-weight: 600; font-size: 0.96rem; }

/* Tasteful tooltip: hover on desktop, tap-to-reveal on mobile (the chip is
   focusable, so a tap focuses it and shows the tip; tapping away hides it). */
.tip { position: relative; cursor: help; }
.tip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tip::after {
	content: attr(data-tip);
	position: absolute; left: 0; top: calc(100% + 7px); z-index: 20;
	width: max-content; max-width: 16rem;
	background: var(--ink); color: #fff;
	font: 400 0.75rem/1.45 var(--font);
	text-transform: none; letter-spacing: normal;
	padding: 0.5rem 0.65rem; border-radius: 7px;
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
	opacity: 0; transform: translateY(-3px); pointer-events: none;
	transition: opacity 0.12s ease, transform 0.12s ease;
}
.tip:hover::after, .tip:focus::after { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .tip::after { transition: none; } }
.cite__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; }
.chip {
	font-size: 0.75rem; color: var(--muted);
	background: var(--chip-bg); padding: 0.2rem 0.5rem; border-radius: 5px;
}
.chip--resolves { color: var(--accent-dark); background: rgba(59, 130, 246, 0.08); }
/* "+N references" — a button that toggles the inline list of back-references for this authority. */
.chip--refs {
	font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--accent-dark);
	background: rgba(59, 130, 246, 0.08); padding: 0.2rem 0.5rem; border: none; border-radius: 5px; cursor: pointer;
}
.chip--refs:hover { background: rgba(59, 130, 246, 0.16); }
/* "verify ↗" — inert outbound links to look the citation up (CourtListener / Scholar).
   The ONLY outbound action in the app; no request fires until the user clicks. */
.cite__verify { display: inline-flex; gap: 0.4rem; align-items: center; }
.cite__verify-link {
	font-size: 0.75rem; font-weight: 600; text-decoration: none; white-space: nowrap;
	color: var(--accent-dark); background: rgba(59, 130, 246, 0.08);
	padding: 0.2rem 0.5rem; border-radius: 5px; border: 1px solid transparent;
}
.cite__verify-link:hover { background: rgba(59, 130, 246, 0.16); border-color: var(--accent); }
/* The expanded inline back-references list under an authority. */
.cite__refs { margin-top: 0.55rem; padding-left: 0.75rem; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 0.25rem; }
.cite__ref { font-size: 0.8125rem; color: var(--muted); display: flex; gap: 0.4rem; align-items: baseline; }
.cite__ref-kind { font-weight: 600; color: var(--faint); }

.app__footer {
	margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--border);
	color: var(--faint); font-size: 0.8125rem;
}
.app__footer a { color: var(--accent); text-decoration: none; font-weight: 600; }
.app__footer a:hover { text-decoration: underline; }