/* ============================================================================
   INTAKE 26.13 — Shared cheat sheet stylesheet
   ============================================================================
   Every file in /assets/cheatsheets/ loads:
     1. Bootstrap 5.3 from the CDN   (does ~90% of the work)
     2. THIS file                    (the last ~10%: palette + code styling)

   Same four design tokens as the main hub's style.css — change them here
   and every cheat sheet follows. Keep this file SMALL.
   ============================================================================ */

:root {
	--ink: #111;      /* near-black — text + dark blocks   */
	--paper: #fff;    /* white — page background           */
	--line: #e5e5e5;  /* light grey — borders + dividers   */
	--muted: #6b6b6b; /* mid grey — secondary text         */

	/* Type — same three faces as the hub */
	--font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	/* Each sheet sets --accent once; headings and rules follow it. */
	--accent: #2563eb;
	--accent-soft: #eef3fe;

	/* The four brand-mark colours */
	--ib-red: #ED303C;
	--ib-teal: #3B8183;
	--ib-yellow: #FAD089;
	--ib-orange: #FF9C5B;
}

/* ----------------------------------------------------------------------------
   TYPOGRAPHY — Playfair headings, Roboto body, JetBrains Mono for code
---------------------------------------------------------------------------- */
body {
	font-family: var(--font-body);
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	letter-spacing: -0.01em;
}

h1, h2, .display-5 {
	font-family: var(--font-display);
	font-weight: 500;
}

/* ----------------------------------------------------------------------------
   THE BRAND MARK — four dots chasing into a circle. Pure CSS, no image file.
---------------------------------------------------------------------------- */
.ib-loader {
	width: 1.75rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(farthest-side, var(--ib-red) 94%, #0000),
		radial-gradient(farthest-side, var(--ib-teal) 94%, #0000),
		radial-gradient(farthest-side, var(--ib-yellow) 94%, #0000),
		radial-gradient(farthest-side, var(--ib-orange) 94%, #0000),
		var(--ib-red);
	background-size: 105% 105%;
	background-repeat: no-repeat;
	animation: ib-spin 2s infinite;
	flex-shrink: 0;
}

@keyframes ib-spin {
	0%       { background-position: 50% -40px, -32px 50%, 50% calc(100% + 40px), calc(100% + 40px) 50%; }
	20%, 25% { background-position: 50% -40px, -40px 50%, 50% calc(100% + 40px), 50% 50%; }
	45%, 50% { background-position: 50% -40px, -40px 50%, 50% 50%, 50% 50%; }
	70%, 75% { background-position: 50% -40px, 50% 50%, 50% 50%, 50% 50%; }
	95%, 100%{ background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.ib-loader { animation: none; }
}

/* ----------------------------------------------------------------------------
   SECTION HEADINGS — a coloured rule binds the title to its content
---------------------------------------------------------------------------- */
.sheet-h2 {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 600;
	padding-top: 0.85rem;
	border-top: 4px solid var(--accent);
	margin-bottom: 0.35rem;
}

.sheet-eyebrow {
	font-family: var(--font-mono);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
}

/* A numbered step marker — used by the walkthrough sheets */
.step-num {
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--accent);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 0.85rem;
	font-weight: 700;
}

/* Time-to-complete / difficulty chips */
.sheet-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--font-mono);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.2rem 0.6rem;
	border-radius: 3px;
	color: var(--accent);
	background: var(--accent-soft);
}

/* Eyebrow label above the page title ("EQC · Intake 26.13 · Cheat Sheet") */
.letter-spacing {
	letter-spacing: 0.15em;
}

/* ----------------------------------------------------------------------------
   BLACK / WHITE / GREY overrides (match the hub)
---------------------------------------------------------------------------- */
.bg-black,
.bg-dark {
	background-color: var(--ink) !important;
}

.card,
.border {
	border-color: var(--line) !important;
	border-radius: 0.25rem;
	background: var(--paper);
	box-shadow: none;
}

/* Flat navbar, faint divider — identical treatment to the hub */
.navbar {
	box-shadow: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.navbar-dark .navbar-nav .nav-link {
	color: rgba(255, 255, 255, 0.7);
}

.navbar-dark .navbar-nav .nav-link:hover {
	color: #fff;
}

/* Quiet links: underline appears on hover only */
a.link-dark {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease;
}

a.link-dark:hover {
	border-bottom-color: var(--ink);
}

/* ----------------------------------------------------------------------------
   CODE — the heart of a cheat sheet.
   Inline <code> = light grey chip. Block <pre> = dark panel, light text.
---------------------------------------------------------------------------- */
code {
	background: #f5f5f5;
	color: var(--ink);
	padding: 0.1em 0.35em;
	border-radius: 0.2rem;
	font-size: 0.875em;
	font-family: var(--font-mono);
}

pre {
	background: var(--ink);
	color: #f5f5f5;
	padding: 1rem 1.25rem;
	border-radius: 0.25rem;
	overflow-x: auto;         /* wide snippets scroll, never break the page */
	font-size: 0.85rem;
	line-height: 1.6;
	font-family: var(--font-mono);
}

/* Inside a dark <pre>, undo the light chip styling on <code> */
pre code {
	background: transparent;
	color: inherit;
	padding: 0;
	font-size: inherit;
}

/* ----------------------------------------------------------------------------
   TABLES — reference tables inherit Bootstrap's .table; just calm them down
---------------------------------------------------------------------------- */
.table {
	--bs-table-border-color: var(--line);
	font-size: 0.9rem;
}

.table thead th {
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: var(--muted);
	font-weight: 600;
}

/* ----------------------------------------------------------------------------
   SECTION ANCHORS — offset so the sticky navbar doesn't cover headings
   when you jump via a #fragment link
---------------------------------------------------------------------------- */
section[id] {
	scroll-margin-top: 4.5rem;
}

/* ----------------------------------------------------------------------------
   DEMO BOXES — small live-example blocks some sheets use to show a result
---------------------------------------------------------------------------- */
.demo-box {
	border: 1px dashed var(--line);
	border-radius: 0.25rem;
	padding: 1rem;
	background: #fafafa;
}