/* RFP-pack — standalone printable procurement one-pager.
 * All rules are scoped under .rfp so the generic class names (.sec, .grid2,
 * .callout, table, th, td …) can never collide with the site design system
 * that this chrome-less template still loads. Screen = dark backdrop + white
 * A4 sheet; print = clean A4 with backgrounds preserved and smart page breaks.
 */

.rfp {
	--rfp-blue: #2563EB;
	--rfp-blue-deep: #1B3FB0;
	--rfp-blue-soft: #E4ECFE;
	--rfp-ink: #0A1020;
	--rfp-ink-3: rgba(10, 16, 32, 0.6);
	--rfp-rule: rgba(10, 16, 32, 0.12);
	--rfp-ok: #1E9E6A;      --rfp-ok-soft: #DCF3E8;
	--rfp-warn: #D9661C;    --rfp-warn-soft: #FBE5D3;
	--rfp-road: #7A6CF0;    --rfp-road-soft: #E9E6FC;
	color: var(--rfp-ink);
	font-family: "Hanken Grotesk", system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}
/* Dark backdrop behind the sheet — only affects this template (chrome-less). */
body:has(.rfp) { background: #0A1020; }
.rfp * { box-sizing: border-box; }

/* ── Toolbar (screen only) ─────────────────────────────────────────────── */
.rfp .toolbar { position: sticky; top: 0; z-index: 10; background: rgba(10,16,32,0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,0.1); padding: 12px 20px; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.rfp .toolbar .lt { color: #cfe0ff; font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.1em; }
.rfp .toolbar .rt { display: flex; gap: 10px; }
.rfp .tb-btn { appearance: none; border: 1px solid rgba(120,160,255,0.4); background: var(--rfp-blue); color: #fff; font: 600 13px "Hanken Grotesk", sans-serif; padding: 9px 16px; border-radius: 8px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.rfp .tb-btn.ghost { background: transparent; color: #cfe0ff; }
.rfp .tb-btn:hover { filter: brightness(1.08); }

/* ── The A4 sheet ──────────────────────────────────────────────────────── */
.rfp .sheet { max-width: 880px; margin: 28px auto; background: #fff; border-radius: 6px; box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7); padding: 56px 60px; }
.rfp .doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; border-bottom: 2px solid var(--rfp-ink); padding-bottom: 22px; }
.rfp .doc-logo { display: flex; align-items: center; gap: 10px; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.rfp .doc-logo .m { width: 26px; height: 26px; }
.rfp .doc-head .meta { text-align: right; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--rfp-ink-3); line-height: 1.7; letter-spacing: 0.04em; }
.rfp h1.doc-title { font-family: "Space Grotesk", sans-serif; font-size: 30px; letter-spacing: -0.025em; line-height: 1.1; margin: 26px 0 4px; }
.rfp .doc-sub { color: var(--rfp-ink-3); font-size: 14px; margin: 0 0 8px; max-width: 60ch; line-height: 1.55; }

/* ── Sections ──────────────────────────────────────────────────────────── */
.rfp .sec { margin-top: 30px; }
.rfp .sec h2 { font-family: "Space Grotesk", sans-serif; font-size: 16px; letter-spacing: -0.01em; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.rfp .sec h2 .n { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--rfp-blue-deep); background: var(--rfp-blue-soft); padding: 3px 8px; border-radius: 5px; }

/* ── Tables ────────────────────────────────────────────────────────────── */
.rfp table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rfp th, .rfp td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rfp-rule); vertical-align: top; }
.rfp th { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rfp-ink-3); }
.rfp td .cap { display: inline-flex; align-items: center; gap: 6px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.rfp .cap.now  { background: var(--rfp-ok-soft);   color: var(--rfp-ok); }
.rfp .cap.soon { background: var(--rfp-warn-soft); color: var(--rfp-warn); }
.rfp .cap.road { background: var(--rfp-road-soft); color: var(--rfp-road); }

/* ── Key/value grid (reset the <dl> margin that was inflating rows) ──────── */
.rfp .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.rfp .kv { margin: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--rfp-rule); }
.rfp .kv dt { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rfp-ink-3); }
.rfp .kv dd { margin: 0; font-size: 13.5px; font-weight: 500; }

/* ── Checklists ────────────────────────────────────────────────────────── */
.rfp ul.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.rfp ul.checks li { display: flex; gap: 9px; font-size: 13px; line-height: 1.5; }
.rfp ul.checks li::before { content: "→"; color: var(--rfp-blue-deep); font-weight: 700; }

/* ── Callouts / footer ─────────────────────────────────────────────────── */
.rfp .callout { margin-top: 14px; background: var(--rfp-blue-soft); border: 1px solid rgba(37,99,235,0.18); border-radius: 8px; padding: 12px 14px; font-size: 12.5px; line-height: 1.55; }
.rfp .callout b { color: var(--rfp-blue-deep); }
.rfp .doc-foot { margin-top: 34px; border-top: 1px solid var(--rfp-rule); padding-top: 16px; font-size: 11px; color: var(--rfp-ink-3); line-height: 1.6; display: flex; justify-content: space-between; gap: 20px; }

/* ── Print / PDF ───────────────────────────────────────────────────────── */
@media print {
	@page { size: A4; margin: 14mm; }
	/* Keep every background/badge colour in the PDF (browsers strip them by default). */
	.rfp, .rfp * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	body:has(.rfp) { background: #fff; }
	.rfp .toolbar { display: none; }
	.rfp .sheet { box-shadow: none; margin: 0; max-width: none; padding: 0; border-radius: 0; }

	/* Break behaviour: never orphan a heading from its content; keep the
	   doc header, key/value pairs, checklist items and table rows intact;
	   let long sections and tables flow across pages naturally. */
	.rfp .doc-head, .rfp h1.doc-title, .rfp .doc-sub { break-inside: avoid; }
	.rfp .sec h2 { break-after: avoid; }
	.rfp .kv, .rfp ul.checks li, .rfp .callout, .rfp tr { break-inside: avoid; }
	.rfp thead { display: table-header-group; }          /* repeat headers on each page */
	.rfp .doc-foot { break-before: avoid; }
}

/* ── Small screens ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.rfp .sheet { padding: 32px 16px; }
	.rfp .grid2 { grid-template-columns: 1fr; }
	.rfp .sec { overflow-x: auto; }
	.rfp .sec table { min-width: 340px; }
}