/* Workplace Impairment Policy Builder
   Aesthetic: utilitarian-editorial. Confident slate ground, amber signal accent,
   serif display for authority + clean sans for the working UI. Everything scoped
   to #ipb-app so it never leaks into the host theme. */

#ipb-app {
	--ipb-ink: #1c2230;
	--ipb-ink-soft: #4a5468;
	--ipb-paper: #f7f5f0;
	--ipb-card: #ffffff;
	--ipb-line: #d8d3c7;
	--ipb-line-strong: #b7b0a0;
	--ipb-accent: #c8761b;
	--ipb-accent-deep: #a35d11;
	--ipb-accent-wash: #fbf0df;
	--ipb-flag: #8a3a2e;
	--ipb-flag-wash: #f6e7e3;
	--ipb-state: #2f5d50;
	--ipb-state-wash: #e3efea;
	--ipb-ok: #2f6d4f;
	--ipb-radius: 4px;
	--ipb-sans: "Helvetica Neue", Arial, sans-serif;
	--ipb-serif: Georgia, "Times New Roman", serif;

	box-sizing: border-box;
	max-width: 860px;
	margin: 0 auto;
	padding: 0;
	color: var(--ipb-ink);
	font-family: var(--ipb-sans);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
#ipb-app *,
#ipb-app *::before,
#ipb-app *::after { box-sizing: inherit; }

/* ---- Masthead ---- */
.ipb-masthead {
	border: 1px solid var(--ipb-line-strong);
	border-bottom-width: 3px;
	background: var(--ipb-card);
	padding: 26px 30px 24px;
}
.ipb-kicker {
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ipb-accent-deep);
	font-weight: 700;
	margin: 0 0 8px;
}
.ipb-masthead h2 {
	font-family: var(--ipb-serif);
	font-size: 28px;
	line-height: 1.15;
	margin: 0 0 8px;
	color: var(--ipb-ink);
	font-weight: 700;
}
.ipb-masthead p {
	margin: 0;
	color: var(--ipb-ink-soft);
	font-size: 14.5px;
	max-width: 62ch;
}

/* ---- Progress rail ---- */
.ipb-rail {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--ipb-line);
	border-top: none;
	background: var(--ipb-line);
}
.ipb-rail li {
	flex: 1 1 auto;
	background: var(--ipb-paper);
	font-size: 10.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ipb-ink-soft);
	padding: 9px 8px;
	text-align: center;
	font-weight: 600;
	white-space: nowrap;
	transition: background .2s, color .2s;
}
.ipb-rail li.is-active {
	background: var(--ipb-ink);
	color: #fff;
}
.ipb-rail li.is-done {
	background: var(--ipb-accent-wash);
	color: var(--ipb-accent-deep);
}

/* ---- Panel ---- */
.ipb-panel {
	border: 1px solid var(--ipb-line-strong);
	border-top: none;
	background: var(--ipb-card);
	padding: 30px;
	min-height: 280px;
}
.ipb-step-num {
	font-family: var(--ipb-serif);
	font-style: italic;
	color: var(--ipb-accent-deep);
	font-size: 15px;
	margin: 0 0 2px;
}
.ipb-panel h3 {
	font-family: var(--ipb-serif);
	font-size: 22px;
	margin: 0 0 10px;
	color: var(--ipb-ink);
}
.ipb-intro {
	color: var(--ipb-ink-soft);
	font-size: 14.5px;
	margin: 0 0 22px;
	max-width: 64ch;
	border-left: 3px solid var(--ipb-accent);
	padding-left: 14px;
}

/* ---- Fields ---- */
.ipb-field { margin-bottom: 18px; }
.ipb-field label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--ipb-ink-soft);
	margin-bottom: 6px;
}
.ipb-field input[type="text"] {
	width: 100%;
	font-family: var(--ipb-sans);
	font-size: 15px;
	padding: 11px 13px;
	border: 1px solid var(--ipb-line-strong);
	border-radius: var(--ipb-radius);
	background: var(--ipb-paper);
	color: var(--ipb-ink);
}
.ipb-field input[type="text"]:focus {
	outline: none;
	border-color: var(--ipb-accent);
	box-shadow: 0 0 0 3px var(--ipb-accent-wash);
	background: #fff;
}

/* ---- Choice cards ---- */
.ipb-choices { display: grid; gap: 12px; }
.ipb-choice {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	border: 1px solid var(--ipb-line-strong);
	border-radius: var(--ipb-radius);
	padding: 15px 16px;
	cursor: pointer;
	background: var(--ipb-paper);
	transition: border-color .15s, background .15s, box-shadow .15s;
}
.ipb-choice:hover { border-color: var(--ipb-accent); background: #fff; }
.ipb-choice.is-selected {
	border-color: var(--ipb-accent-deep);
	background: var(--ipb-accent-wash);
	box-shadow: inset 3px 0 0 var(--ipb-accent-deep);
}
.ipb-choice input { margin-top: 3px; accent-color: var(--ipb-accent-deep); width: 17px; height: 17px; flex: none; }
.ipb-choice-body { flex: 1; }
.ipb-choice-label { font-weight: 700; font-size: 15px; display: block; margin-bottom: 3px; }
.ipb-choice-clause { font-size: 13px; color: var(--ipb-ink-soft); line-height: 1.5; }

/* ---- Flag pills inside clause previews ---- */
.ipb-flag-pill {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 999px;
	margin-right: 5px;
	vertical-align: middle;
}
.ipb-flag-pill.counsel { background: var(--ipb-flag-wash); color: var(--ipb-flag); }
.ipb-flag-pill.state { background: var(--ipb-state-wash); color: var(--ipb-state); }

/* ---- Numbered procedure list ---- */
.ipb-proc { counter-reset: ipbproc; list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ipb-proc li {
	counter-increment: ipbproc;
	position: relative;
	padding: 12px 14px 12px 48px;
	background: var(--ipb-paper);
	border: 1px solid var(--ipb-line);
	border-radius: var(--ipb-radius);
	font-size: 14px;
}
.ipb-proc li::before {
	content: counter(ipbproc);
	position: absolute;
	left: 12px; top: 11px;
	width: 24px; height: 24px;
	background: var(--ipb-ink);
	color: #fff;
	font-family: var(--ipb-serif);
	font-size: 13px;
	border-radius: 50%;
	display: grid;
	place-items: center;
}

/* ---- Footer nav ---- */
.ipb-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--ipb-line-strong);
	border-top: none;
	background: var(--ipb-paper);
	padding: 16px 30px;
}
.ipb-btn {
	font-family: var(--ipb-sans);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .03em;
	padding: 11px 22px;
	border-radius: var(--ipb-radius);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.ipb-btn-primary { background: var(--ipb-accent-deep); color: #fff; }
.ipb-btn-primary:hover { background: var(--ipb-accent); }
.ipb-btn-ghost { background: transparent; color: var(--ipb-ink-soft); border-color: var(--ipb-line-strong); }
.ipb-btn-ghost:hover { color: var(--ipb-ink); border-color: var(--ipb-ink); }
.ipb-btn:disabled { opacity: .4; cursor: not-allowed; }
.ipb-stepcount { font-size: 12px; color: var(--ipb-ink-soft); letter-spacing: .04em; }

/* ---- Disclaimer banner ---- */
.ipb-disclaimer {
	border: 1px solid var(--ipb-flag);
	border-left-width: 4px;
	background: var(--ipb-flag-wash);
	padding: 14px 16px;
	font-size: 13px;
	color: #5e2820;
	margin: 0 0 22px;
	border-radius: var(--ipb-radius);
}
.ipb-disclaimer strong { color: var(--ipb-flag); }

/* ---- Review / output ---- */
.ipb-review-doc {
	border: 1px solid var(--ipb-line-strong);
	background: #fff;
	padding: 34px 38px;
	margin-bottom: 20px;
}
.ipb-review-doc h1 {
	font-family: var(--ipb-serif);
	font-size: 24px;
	margin: 0 0 4px;
	color: var(--ipb-ink);
}
.ipb-review-doc .ipb-doc-meta { font-size: 13px; color: var(--ipb-ink-soft); margin: 0 0 20px; }
.ipb-review-doc h4 {
	font-family: var(--ipb-serif);
	font-size: 16px;
	margin: 22px 0 6px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--ipb-line);
	color: var(--ipb-ink);
}
.ipb-review-doc p { font-size: 14px; margin: 0 0 10px; color: #2a313f; }
.ipb-review-doc .ipb-clause-flagged { color: var(--ipb-flag); font-weight: 600; }

.ipb-output-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- Empty / fallback ---- */
.ipb-loading { padding: 40px; text-align: center; color: var(--ipb-ink-soft); }

@media (max-width: 640px) {
	.ipb-masthead, .ipb-panel { padding: 22px 18px; }
	.ipb-nav { padding: 14px 18px; }
	.ipb-review-doc { padding: 24px 20px; }
	.ipb-rail li { font-size: 9px; padding: 7px 5px; }
}