/*
 * Outcomes Ledger — the public survey form.
 *
 * Its own stylesheet, not app.css. This page is met by an employer on a phone who has never seen
 * this software and will never see it again; it needs to load fast, read clearly, and look like a
 * form rather than like an application. Tokens are declared on the root of this component, not on
 * #ol-app-root, because the app never mounts on this page.
 */
.olsv-page {
	--olsv-ink: #1E2433;
	--olsv-muted: #6B7284;
	--olsv-line: #DDE1EC;
	--olsv-primary: #1F2A52;
	--olsv-accent: #A9812F;
	--olsv-bg: #F4F5F9;
	--olsv-card: #FFFFFF;
	--olsv-danger: #B3261E;
	--olsv-danger-bg: #FCEAE9;
	--olsv-ok: #1F6E43;

	margin: 0;
	background: var(--olsv-bg);
	color: var(--olsv-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	padding: 24px 16px 64px;
}
.olsv-page * { box-sizing: border-box; }

#ol-survey-root { max-width: 640px; margin: 0 auto; }

.olsv-card {
	background: var(--olsv-card);
	border: 1px solid var(--olsv-line);
	border-radius: 12px;
	padding: 28px 26px 30px;
	box-shadow: 0 1px 2px rgba(30, 36, 51, .04), 0 12px 32px -18px rgba(30, 36, 51, .3);
}
.olsv-loading { color: var(--olsv-muted); margin: 0; }

/* ---- header ---- */
.olsv-head { border-bottom: 1px solid var(--olsv-line); padding-bottom: 18px; margin-bottom: 22px; }
.olsv-dept {
	font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
	font-weight: 700; color: var(--olsv-accent); margin-bottom: 8px;
}
.olsv-head h1 { margin: 0 0 8px; font-size: 1.45rem; line-height: 1.2; }
.olsv-for { margin: 0 0 8px; font-size: .95rem; }
.olsv-intro, .olsv-note { margin: 8px 0 0; color: var(--olsv-muted); font-size: .92rem; }

/* ---- restored draft ---- */
.olsv-resume {
	background: #FBF6E9; border: 1px solid #E8D9AE; border-radius: 8px;
	padding: 10px 14px; font-size: .88rem; margin-bottom: 20px;
}
.olsv-linkbtn {
	appearance: none; background: none; border: none; padding: 0;
	color: var(--olsv-primary); font: inherit; text-decoration: underline; cursor: pointer;
}

/* ---- questions ---- */
.olsv-form { display: block; }
.olsv-section {
	margin: 26px 0 12px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
	font-weight: 700; color: var(--olsv-primary);
	border-bottom: 1px solid var(--olsv-line); padding-bottom: 5px;
}
.olsv-optional { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--olsv-muted); }

.olsv-q { border: none; margin: 0 0 22px; padding: 0; min-width: 0; }
.olsv-qtext { padding: 0; font-size: 1rem; line-height: 1.4; font-weight: 600; }
.olsv-req { color: var(--olsv-danger); }
.olsv-help { margin: 4px 0 0; font-size: .85rem; color: var(--olsv-muted); }

/* A question the person still has to answer. Marked on the block rather than only in a message
   at the bottom, because on a phone the message and the question are never on screen together. */
.olsv-q--missing {
	background: var(--olsv-danger-bg);
	border-radius: 8px;
	padding: 10px 12px;
	margin-left: -12px; margin-right: -12px;
}

.olsv-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
/* Each option is a full-width target, not a small circle with a label beside it — this is
   answered with a thumb, and a 12px radio is not a usable target. */
.olsv-choice {
	display: flex; align-items: center; gap: 10px;
	border: 1px solid var(--olsv-line); border-radius: 9px;
	padding: 11px 14px; cursor: pointer; background: #fff;
	font-size: .95rem;
}
.olsv-choice:hover { border-color: var(--olsv-primary); }
.olsv-choice input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--olsv-primary); }
.olsv-choice:has(input:checked) { border-color: var(--olsv-primary); background: #F3F5FB; font-weight: 600; }
.olsv-choice--na { border-style: dashed; color: var(--olsv-muted); }
.olsv-choice input:focus-visible { outline: 2px solid var(--olsv-primary); outline-offset: 2px; }

.olsv-text, .olsv-num {
	width: 100%; margin-top: 10px; padding: 11px 13px;
	border: 1px solid var(--olsv-line); border-radius: 9px;
	font: inherit; color: var(--olsv-ink); background: #fff;
}
.olsv-text:focus, .olsv-num:focus { outline: none; border-color: var(--olsv-primary); }
.olsv-numrow { display: flex; gap: 10px; align-items: center; }
.olsv-num { max-width: 160px; }
.olsv-nabtn {
	appearance: none; cursor: pointer; margin-top: 10px;
	border: 1px dashed var(--olsv-line); border-radius: 9px;
	padding: 11px 14px; background: #fff; font: inherit; color: var(--olsv-muted);
}
.olsv-nabtn.is-on { border-style: solid; border-color: var(--olsv-primary); color: var(--olsv-primary); font-weight: 600; }

/* ---- about you ---- */
.olsv-about { margin-top: 8px; }
.olsv-field { display: block; margin-bottom: 12px; }
.olsv-field span { display: block; font-size: .85rem; color: var(--olsv-muted); margin-bottom: 4px; }
.olsv-field input {
	width: 100%; padding: 11px 13px; border: 1px solid var(--olsv-line);
	border-radius: 9px; font: inherit; background: #fff; color: var(--olsv-ink);
}
.olsv-field input:focus { outline: none; border-color: var(--olsv-primary); }

/* The honeypot: off-screen rather than display:none, because some bots skip hidden fields and
   fill everything else. Never announced and never reachable by keyboard. */
.olsv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- submit ---- */
.olsv-error {
	background: var(--olsv-danger-bg); color: var(--olsv-danger);
	border-radius: 9px; padding: 11px 14px; font-size: .9rem; margin: 18px 0 0;
}
.olsv-error[hidden] { display: none; }
.olsv-submit { margin-top: 24px; }
.olsv-btn {
	appearance: none; cursor: pointer; width: 100%;
	background: var(--olsv-primary); color: #fff; border: none;
	border-radius: 10px; padding: 14px 20px; font: inherit; font-weight: 600; font-size: 1rem;
}
.olsv-btn:hover:not(:disabled) { background: #16204A; }
.olsv-btn:disabled { opacity: .6; cursor: default; }
.olsv-btn:focus-visible { outline: 2px solid var(--olsv-accent); outline-offset: 2px; }

/* ---- terminal states ---- */
.olsv-card--message { text-align: center; padding: 44px 26px; }
.olsv-card--message h1 { margin: 0 0 10px; font-size: 1.3rem; }
.olsv-card--message p { margin: 0; color: var(--olsv-muted); }
.olsv-state-done h1 { color: var(--olsv-ok); }
.olsv-state-error h1, .olsv-state-unknown h1, .olsv-state-revoked h1 { color: var(--olsv-danger); }

@media (max-width: 560px) {
	.olsv-page { padding: 12px 10px 48px; }
	.olsv-card { padding: 22px 18px 24px; border-radius: 10px; }
	.olsv-head h1 { font-size: 1.25rem; }
}

/* A numeric scale answered as a row of chips. Ten stacked full-width rows is a correct control
   and a bad one — it turns a single question into most of a phone screen and buries whatever
   follows it. The radio itself stays in the DOM and keeps working for keyboard and screen
   reader users; it is only moved out of the way visually. */
.olsv-choices--compact { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.olsv-choices--compact .olsv-choice {
	position: relative; flex: 0 0 auto;
	min-width: 52px; justify-content: center; padding: 11px 10px;
	font-variant-numeric: tabular-nums;
}
.olsv-choices--compact .olsv-choice input {
	position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.olsv-choices--compact .olsv-choice:has(input:focus-visible) {
	outline: 2px solid var(--olsv-primary); outline-offset: 2px;
}
.olsv-choices--compact .olsv-choice--na { min-width: auto; padding-left: 14px; padding-right: 14px; }