/* =========================================================================
   Mohammed Ammar Notes — design system (dark default + orange accent)
   ========================================================================= */
:root {
	--bg: #09090b;
	--bg-elev: #161619;
	--bg-subtle: #1b1b1f;
	--border: rgba(255, 255, 255, 0.09);
	--border-strong: rgba(255, 255, 255, 0.16);
	--text: #fafafa;
	--muted: #a1a1aa;
	--subtle: #71717a;
	--accent: #fb923c;
	--accent-soft: rgba(251, 146, 60, 0.14);
	--nav-h: 60px;
	--sidebar-w: 264px;
	--prose-w: 50rem;
	--radius: 12px;
	--radius-sm: 8px;
	--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
:root[data-theme='light'] {
	--bg: #ffffff;
	--bg-elev: #fafafa;
	--bg-subtle: #f4f4f5;
	--border: rgba(0, 0, 0, 0.10);
	--border-strong: rgba(0, 0, 0, 0.18);
	--text: #18181b;
	--muted: #52525b;
	--subtle: #a1a1aa;
	--accent: #c2410c;
	--accent-soft: rgba(194, 65, 12, 0.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Navbar ---------- */
.nav {
	position: sticky; top: 0; z-index: 50;
	height: var(--nav-h);
	background: color-mix(in srgb, var(--bg) 78%, transparent);
	backdrop-filter: saturate(160%) blur(10px);
	-webkit-backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid var(--border);
}
.nav-inner {
	max-width: 1180px; height: 100%; margin: 0 auto;
	padding: 0 clamp(1rem, 4vw, 2rem);
	display: flex; align-items: center; gap: 1.25rem;
}
.brand {
	display: inline-flex; align-items: center; gap: 9px;
	font-weight: 750; letter-spacing: -0.02em; font-size: 1rem;
	color: var(--text); text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.nav-links { display: flex; gap: 0.35rem; margin-inline-end: auto; }
.nav-links a {
	color: var(--muted); font-size: 0.875rem; font-weight: 500;
	padding: 0.4rem 0.7rem; border-radius: var(--radius-sm);
	transition: color 0.15s, background 0.15s;
}
.nav-links a:hover { color: var(--text); background: var(--bg-elev); text-decoration: none; }
.nav-links a.active { color: var(--accent); background: var(--accent-soft); }
.nav-actions { display: flex; align-items: center; gap: 0.4rem; }
.icon-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 10px;
	background: transparent; color: var(--text); border: 1px solid var(--border);
	cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.icon-btn:hover { background: var(--bg-elev); color: var(--accent); border-color: var(--border-strong); text-decoration: none; }
.icon-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.icon-btn svg { display: block; }

/* ---------- Home ---------- */
.home { max-width: 1180px; margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem); }
.home-hero h1 { font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: -0.03em; margin: 0 0 0.6rem; }
.home-hero .lead { color: var(--muted); font-size: 1.12rem; max-width: 40rem; margin: 0 0 2.5rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.card {
	border: 1px solid var(--border); border-radius: var(--radius);
	background: var(--bg-elev); padding: 1.4rem;
	transition: border-color 0.15s, transform 0.15s;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card h2 { margin: 0 0 0.35rem; font-size: 1.25rem; letter-spacing: -0.02em; }
.card-meta { color: var(--muted); font-size: 0.85rem; margin: 0 0 1.1rem; }
.card-cta { font-weight: 600; font-size: 0.9rem; }

/* ---------- Layout (note pages) ---------- */
.layout {
	max-width: 1180px; margin: 0 auto;
	padding: 0 clamp(1rem, 4vw, 2rem);
	display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: 2.5rem;
	align-items: start;
}
.sidebar {
	position: sticky; top: calc(var(--nav-h) + 1.25rem);
	max-height: calc(100vh - var(--nav-h) - 2rem); overflow-y: auto;
	padding: 1.5rem 0; font-size: 0.875rem;
}
.side-course-title {
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--subtle); margin: 0 0 0.7rem;
}
.side-playlist {
	display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 1.1rem;
	font-size: 0.76rem; font-weight: 600; color: var(--accent); text-decoration: none;
	padding: 0.3rem 0.6rem; border: 1px solid var(--border); border-radius: 999px;
	transition: background 0.15s, border-color 0.15s;
}
.side-playlist:hover { background: var(--accent-soft); border-color: var(--accent); text-decoration: none; }
.side-playlist svg { flex: none; }

/* ---- Video accordion ---- */
.side-video { margin-bottom: 1px; }
.side-video-head {
	width: 100%; display: flex; align-items: center; gap: 0.5rem;
	padding: 0.45rem 0.5rem; border: 0; background: transparent; cursor: pointer; text-align: start;
	color: var(--text); font-family: inherit; font-size: 0.82rem; font-weight: 600;
	border-radius: var(--radius-sm); transition: background 0.15s, color 0.15s;
}
.side-video-head:hover { background: var(--bg-elev); }
.side-video-head.current { color: var(--accent); }
.side-video-num {
	flex: none; width: 1.45rem; height: 1.45rem; border-radius: 7px;
	display: grid; place-items: center; font-size: 0.72rem; font-weight: 700;
	background: var(--accent-soft); color: var(--accent); transition: background 0.15s, color 0.15s;
}
.side-video-head.current .side-video-num,
.side-video-head:hover .side-video-num { background: var(--accent); color: var(--bg); }
.side-video-title { flex: 1; line-height: 1.25; }
.side-video-count {
	flex: none; font-size: 0.66rem; font-weight: 600; color: var(--subtle);
	background: var(--bg-subtle); border-radius: 999px; padding: 0.05rem 0.45rem;
}
.side-video-chev { flex: none; color: var(--subtle); transition: transform 0.18s; }
.side-video-head:not(.open) .side-video-chev { transform: rotate(-90deg); }
[dir="rtl"] .side-video-head:not(.open) .side-video-chev { transform: rotate(90deg); }
.side-video-body {
	list-style: none; margin: 2px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 2px;
	margin-inline-start: 1.05rem; border-inline-start: 1px solid var(--border);
}
.side-link {
	display: block; color: var(--muted); text-decoration: none; line-height: 1.4; font-size: 0.83rem;
	padding: 0.32rem 0.65rem; border-inline-start: 2px solid transparent; margin-inline-start: -1px;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	transition: color 0.15s, background 0.15s, border-color 0.15s;
}
[dir="rtl"] .side-link { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.side-link:hover { color: var(--text); background: var(--bg-elev); text-decoration: none; }
.side-link.active { color: var(--accent); font-weight: 600; border-inline-start-color: var(--accent); background: var(--accent-soft); }

.contents-toggle, .nav-scrim { display: none; }

/* ---------- Article + prose ---------- */
.article { max-width: var(--prose-w); padding: 2.5rem 0 4rem; min-width: 0; }
.eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); margin: 0 0 0.5rem; }
.article > h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: -0.03em; margin: 0 0 0.5rem; }
.article-desc { color: var(--muted); font-size: 1.08rem; margin: 0 0 2rem; }

.prose { font-size: 0.95rem; }
.prose h2 { font-size: 1.4rem; letter-spacing: -0.02em; margin: 2.2em 0 0.8em; padding-bottom: 0.3em; border-bottom: 1px solid var(--border); }
.prose h3 { font-size: 1.12rem; letter-spacing: -0.01em; margin: 1.8em 0 0.6em; }
.prose p { margin: 0 0 1em; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.3em; }
.prose li { margin: 0.25em 0; }
.prose strong { color: var(--text); font-weight: 650; }
.prose code {
	font-family: var(--mono); font-size: 0.85em;
	background: var(--bg-elev); border: 1px solid var(--border);
	border-radius: 5px; padding: 0.12em 0.4em;
}
.prose pre {
	background: var(--bg-elev) !important; border: 1px solid var(--border);
	border-radius: var(--radius); padding: 1rem 1.1rem; overflow-x: auto; margin: 0 0 1.2em;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: 0.85rem; }
.prose blockquote {
	margin: 0 0 1.2em; padding: 0.6em 1em; color: var(--muted);
	border-left: 3px solid var(--accent); background: var(--bg-elev);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: 0.9em; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.prose th, .prose td { padding: 0.5em 0.8em; border-bottom: 1px solid var(--border); text-align: left; }
.prose th { background: var(--bg-elev); font-weight: 650; }
/* the "Core idea" lead (first paragraph) */
.prose > p:first-child { font-size: 1.05em; color: var(--muted); border-left: 3px solid var(--accent); padding: 0.1em 0 0.1em 0.9em; }

mark.hl { background: var(--accent-soft); color: inherit; border-radius: 2px; cursor: pointer; box-shadow: inset 0 -1px 0 rgba(251, 146, 60, 0.6); }
mark.hl.has-note { box-shadow: inset 0 -2px 0 var(--accent); }

/* prev / next */
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--border); }
.pn { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); color: inherit; transition: border-color 0.15s, background 0.15s; }
.pn:hover { border-color: var(--border-strong); background: var(--bg-elev); text-decoration: none; }
.pn span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); }
.pn b { color: var(--text); font-weight: 600; line-height: 1.35; }
.pn.next { text-align: right; }

/* ---------- Annotator (notepad + highlights) ---------- */
.ann-fab {
	position: fixed; right: 20px; bottom: 20px; z-index: 60;
	width: 48px; height: 48px; border-radius: 50%;
	border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text);
	font-size: 20px; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
	transition: transform 0.15s, border-color 0.15s;
}
.ann-fab:hover { transform: translateY(-2px); border-color: var(--accent); }
.ann-panel {
	position: fixed; right: 20px; bottom: 80px; z-index: 60;
	width: 350px; max-width: calc(100vw - 40px);
	background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); padding: 14px;
	display: flex; flex-direction: column; gap: 8px;
}
.ann-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.ann-status { margin-left: auto; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--subtle); }
.ann-close { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 6px; }
.ann-close:hover { color: var(--text); background: var(--bg-subtle); }
.ann-panel textarea {
	width: 100%; min-height: 200px; resize: vertical; border-radius: var(--radius-sm);
	border: 1px solid var(--border); background: var(--bg); color: var(--text);
	padding: 10px 11px; font: 14px/1.6 var(--font); outline: none;
}
.ann-panel textarea:focus { border-color: var(--accent); }
.ann-hint { margin: 0; font-size: 11px; color: var(--subtle); }
/* Fixed bottom bar so the native mobile selection menu (which hugs the
   selection) never covers the Highlight action. */
.ann-selbar {
	position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 80;
	display: flex; align-items: center; gap: 8px; max-width: min(92vw, 440px);
	padding: 6px 8px 6px 14px; background: var(--bg-elev); border: 1px solid var(--border);
	border-radius: 999px; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}
.ann-selbar-q {
	font-size: 12px; color: var(--subtle); max-width: 190px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ann-selbtn {
	padding: 7px 16px; border: 0; border-radius: 999px; background: var(--accent);
	color: #1a1a1a; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.ann-selcancel {
	padding: 6px 9px; border: 0; border-radius: 999px; background: transparent;
	color: var(--subtle); font-size: 13px; cursor: pointer;
}
.ann-selcancel:hover { color: var(--text); }
.hl-pop {
	position: absolute; z-index: 70; width: 280px;
	background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.hl-pop textarea { width: 100%; min-height: 70px; resize: vertical; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); color: var(--text); padding: 8px 9px; font: 13px/1.5 var(--font); outline: none; }
.hl-pop textarea:focus { border-color: var(--accent); }
.hl-pop-row { display: flex; justify-content: space-between; }
.hl-pop-row button { padding: 6px 12px; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text); }
.hl-save { background: var(--accent); color: #1a1a1a; border-color: transparent; }
.hl-del { color: #f87171; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
	.layout { display: block; padding-top: 0; }
	.contents-toggle {
		display: inline-flex; align-items: center; gap: 6px; margin: 1.2rem 0 0;
		padding: 0.5rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
		background: var(--bg-elev); color: var(--text); font-size: 0.85rem; font-weight: 600; cursor: pointer;
	}
	.sidebar {
		position: fixed; top: 0; inset-inline-start: 0; z-index: 70; width: 82%; max-width: 320px; height: 100vh;
		max-height: none; background: var(--bg); border-inline-end: 1px solid var(--border);
		padding: 1.5rem 1.2rem; transform: translateX(-100%); transition: transform 0.22s ease;
		box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
	}
	[dir="rtl"] .sidebar { transform: translateX(100%); } /* drawer slides in from the right in RTL */
	.nav-open .sidebar { transform: translateX(0); }
	.nav-open .nav-scrim { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(0, 0, 0, 0.5); }
	.article { padding-top: 1.5rem; }
	.prevnext { grid-template-columns: 1fr; }
	.pn.next { text-align: left; }
	.ann-panel { left: 12px; right: 12px; bottom: 84px; width: auto; max-width: none; max-height: 55vh; overflow: auto; }
	.ann-panel textarea { min-height: 120px; }
	.nav-links { display: none; }
}

/* Phone navbar: keep the brand + actions on one tidy row (no wrapping) */
/* (phone <=600px overrides live at the END of this file so they win the
   cascade over the later base rules — see bottom of file) */

@media print {
	.nav, .sidebar, .ann-fab, .ann-panel, .ann-selbar, .hl-pop, .contents-toggle, .prevnext { display: none !important; }
}

/* ---------- Language toggle + Arabic (RTL) article ---------- */
.lang-btn { font-weight: 700; font-size: 0.8rem; }
.article[dir="rtl"] { line-height: 1.9; }
/* keep SQL/code left-to-right even inside Arabic prose */
.prose pre, .prose code { direction: ltr; }
.prose pre { text-align: left; }
.prose :not(pre) > code { unicode-bidi: isolate; }
/* isolate Latin/number runs in Arabic prose so BiDi can't misorder punctuation
   (parentheses, slashes, dots, arrows) around English keywords — see src/bidi.ts */
.prose bdi { unicode-bidi: isolate; }
/* flip directional accents under RTL */
[dir="rtl"] .prose ul, [dir="rtl"] .prose ol { padding-left: 0; padding-right: 1.3em; }
[dir="rtl"] .prose blockquote { border-left: 0; border-inline-start: 0; border-right: 3px solid var(--accent); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
[dir="rtl"] .prose > p:first-child { border-left: 0; border-right: 3px solid var(--accent); padding-left: 0; padding-right: 0.9em; }
[dir="rtl"].article .prevnext .pn.prev, [dir="rtl"] .prevnext .pn.prev { text-align: right; }
[dir="rtl"].article .prevnext .pn.next, [dir="rtl"] .prevnext .pn.next { text-align: left; }

/* ---------- Diagrams (self-contained inline SVG, no third-party runtime) ---------- */
.note-fig {
	margin: 1.4em 0; padding: 1.1rem; overflow-x: auto; text-align: center;
	background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
	color: var(--text); /* SVGs use currentColor so they adapt to the theme */
}
.note-fig svg { max-width: 100%; height: auto; }
.note-fig figcaption, .figure-cap {
	margin-top: 0.6rem; font-size: 0.8rem; color: var(--subtle); text-align: center;
}
/* diagrams read left-to-right even inside Arabic (RTL) prose */
[dir="rtl"] .note-fig { direction: ltr; }

/* ---------- Images / course slides embedded in notes ---------- */
/* Store images in public/ and reference them absolutely (e.g. /images/...) so
   they deploy and resolve from any /notes/... route. */
.prose img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1.4em auto;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
/* a captioned image: ![alt](...) under a line, or <figure><img><figcaption> */
.prose figure { margin: 1.4em 0; text-align: center; }
.prose figure img { margin: 0 auto; }
.prose figure figcaption {
	margin-top: 0.6rem; font-size: 0.8rem; color: var(--subtle); text-align: center;
}
/* an <img> already inside the framed .note-fig box shouldn't be double-framed */
.note-fig img { margin: 0 auto; border: 0; border-radius: 0; }

/* ---------- Lightbox: click a diagram/image to open it maximized + zoom ---------- */
.prose img,
.prose .note-fig svg { cursor: zoom-in; }

.lightbox {
	position: fixed; inset: 0; z-index: 200;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, 0.86);
	-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
	animation: lightbox-in 0.12s ease-out;
}
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }

.lightbox-stage {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden; touch-action: none;
}
.lightbox-media {
	transform-origin: center center; will-change: transform;
	display: flex; max-width: 92vw; max-height: 86vh;
	padding: clamp(0.75rem, 2vw, 1.5rem); border-radius: var(--radius);
	background: var(--bg-elev); color: var(--text); /* inline SVGs use currentColor */
}
.lightbox-media img,
.lightbox-media svg {
	display: block; width: auto; height: auto;
	max-width: min(1100px, 88vw); max-height: 82vh; border-radius: var(--radius-sm);
}
.lightbox-media svg { width: min(1000px, 88vw); }

.lightbox-toolbar {
	position: fixed; top: 14px; right: 14px; z-index: 1;
	display: flex; align-items: center; gap: 6px;
	padding: 5px; border-radius: 999px;
	background: var(--bg-elev); border: 1px solid var(--border);
}
.lightbox-toolbar button {
	width: 34px; height: 34px; border-radius: 50%;
	display: grid; place-items: center; border: 0;
	background: transparent; color: var(--text); font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.lightbox-toolbar button:hover { background: var(--accent-soft); color: var(--accent); }
.lightbox-pct {
	min-width: 3.2em; text-align: center; font-size: 0.78rem;
	color: var(--muted); font-variant-numeric: tabular-nums;
}
.lightbox-hint {
	position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); margin: 0;
	font-size: 0.72rem; color: var(--subtle); white-space: nowrap; pointer-events: none;
	background: var(--bg-elev); border: 1px solid var(--border); padding: 5px 12px; border-radius: 999px;
}
@media (max-width: 560px) { .lightbox-hint { display: none; } }

/* ---------- Progress tracker (mark-complete + per-section/course progress) ---------- */
.done-toggle {
	display: block; width: 100%; margin-top: 2.5rem; padding: 0.8rem 1rem;
	border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
	background: var(--bg-elev); color: var(--text); font: inherit; font-weight: 600;
	cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.done-toggle:hover { border-color: var(--accent); }
.done-toggle.done { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* completed note in the sidebar outline */
.side-link.done { color: var(--muted); }
.side-link.done::before { content: "✓"; color: var(--accent); font-weight: 800; margin-inline-end: 0.4em; }

/* per-section count badge turns accent when the whole section is done */
.side-video-count.all-done { color: var(--accent); font-weight: 700; }

/* course progress bar under the course title in the sidebar */
.side-progress { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.7rem; padding: 0 0.15rem; }
.side-progress-bar { flex: 1; height: 5px; background: var(--bg-subtle); border-radius: 999px; overflow: hidden; }
.side-progress-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.25s; }
.side-progress-label { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }

/* per-course progress on the Home cards */
.card-progress { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 1rem; }
.card-progress-bar { flex: 1; height: 6px; background: var(--bg-subtle); border-radius: 999px; overflow: hidden; }
.card-progress-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.25s; }
.card-progress-label { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }

/* ---------- Runtime states: loading / gated / sign-in ---------- */
.loading { color: var(--muted); padding: 2rem 0; font-size: .95rem; }
.gated { max-width: var(--prose-w); }
.gated h1 { margin-bottom: .4rem; }
.signin-btn {
	display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
	border: 1px solid var(--border-strong); border-radius: 999px;
	color: var(--text); font-size: .85rem; font-weight: 600;
}
.signin-btn:hover { background: var(--bg-subtle); text-decoration: none; }

/* ---------- Admin visibility dashboard ---------- */
.admin { max-width: 960px; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 2rem) 4rem; }
.admin-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1.5rem; }
.admin-head h1 { margin: 0 0 .3rem; font-size: 1.6rem; letter-spacing: -.02em; }
.admin-sub { margin: 0; color: var(--muted); font-size: .85rem; max-width: 56ch; }
.admin-sub strong { color: var(--text); }
.admin-search {
	padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
	background: var(--bg-elev); color: var(--text); font-size: .9rem; min-width: 220px;
}
.admin-search:focus { outline: none; border-color: var(--accent); }
.admin-err { color: #f87171; background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3); border-radius: var(--radius-sm); padding: 8px 12px; font-size: .85rem; }
.admin-course { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1rem; overflow: hidden; background: var(--bg-elev); }
.admin-course-head { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; flex-wrap: wrap; }
.admin-course.open .admin-course-head { border-bottom: 1px solid var(--border); }
.admin-course-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; background: transparent; border: 0; padding: .3rem 0; margin: 0; cursor: pointer; color: inherit; font: inherit; text-align: start; }
.admin-course-toggle h2 { flex: 1; margin: 0; font-size: 1rem; letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-chev { flex: none; color: var(--subtle); transition: transform .18s; transform: rotate(-90deg); }
.admin-course.open .admin-chev { transform: rotate(0deg); }
.admin-course-toggle:hover .admin-chev, .admin-course-toggle:hover h2 { color: var(--accent); }
.admin-head-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.admin-allbtn { background: var(--bg-elev); border: 1px solid var(--border); color: var(--muted); font-size: .78rem; font-family: var(--mono); padding: .5rem .8rem; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; }
.admin-allbtn:hover { color: var(--text); border-color: var(--border-strong); }
.tag { font-family: var(--mono); font-size: .72rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.admin-notes { list-style: none; margin: 0; padding: 0; }
.admin-note { display: flex; align-items: center; gap: .6rem; padding: .5rem 1rem; border-top: 1px solid var(--border); }
.admin-note:first-child { border-top: 0; }
.admin-note .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--subtle); }
.admin-note .dot.public { background: var(--accent); }
.admin-note-title { flex: 1; color: var(--text); font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-note-title:hover { color: var(--accent); text-decoration: none; }
.admin-note-sec { color: var(--subtle); font-size: .72rem; font-family: var(--mono); flex: none; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; flex: none; }
.seg button { background: transparent; border: 0; color: var(--muted); font-size: .75rem; font-family: var(--mono); padding: 4px 10px; cursor: pointer; }
.seg button:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); }
.seg button.on { background: var(--accent); color: #171717; font-weight: 700; }
.seg button:disabled { opacity: .5; cursor: default; }
.seg.small button { padding: 3px 8px; font-size: .7rem; }
@media (max-width: 560px) { .admin-note { flex-wrap: wrap; } .admin-note-sec { display: none; } }

/* =========================================================================
   Calm static backdrop — a fixed dotted texture + a soft accent spotlight at
   the top (writeups-style). No canvas, no cursor tracking; purely decorative
   CSS layers. Theme-aware; dims behind dense note pages so prose stays readable.
   ========================================================================= */
.app-backdrop {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
	/* soft accent glow pooled at the top-centre */
	background: radial-gradient(680px 380px at 50% -40px, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%);
	/* tuck the field under the frosted navbar */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 84px);
	mask-image: linear-gradient(to bottom, transparent 0, #000 84px);
}

/* base grey dot-grid (writeups recipe: 1.5px dots), faded as an ellipse toward
   the edges/bottom so it's strongest behind the hero */
.app-backdrop::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(
		circle at 1.5px 1.5px,
		color-mix(in srgb, var(--subtle) 50%, transparent) 1.5px,
		transparent 0
	);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse 115% 72% at 50% 22%, #000 30%, transparent 80%);
	mask-image: radial-gradient(ellipse 115% 72% at 50% 22%, #000 30%, transparent 80%);
}
/* static "spotlight": the same dots warmed to --accent, revealed only inside a
   soft circle fixed at the top-centre — an illuminated patch, no motion */
.app-backdrop::after {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0.8;
	background-image: radial-gradient(circle at 1.5px 1.5px, var(--accent) 1.6px, transparent 0);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(circle 260px at 50% 132px, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 72%);
	mask-image: radial-gradient(circle 260px at 50% 132px, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 72%);
}
:root[data-theme='light'] .app-backdrop::before {
	background-image: radial-gradient(
		circle at 1.5px 1.5px,
		color-mix(in srgb, var(--subtle) 62%, transparent) 1.5px,
		transparent 0
	);
}

/* Behind dense note pages, dim the field so it never fights the prose. */
#root:has(.layout) .app-backdrop { opacity: 0.4; }

/* Hero — centred, large, pstrack-style */
.home { display: flex; flex-direction: column; align-items: center; min-height: calc(100vh - 220px); }
.home-hero { text-align: center; max-width: 48rem; margin: clamp(2.5rem, 8vw, 6rem) auto clamp(2rem, 5vw, 3.5rem); }
.hero-eyebrow { font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; color: var(--accent); margin: 0 0 1.1rem; }
.home-hero h1 { font-size: clamp(2.4rem, 7vw, 4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; }
.home-hero .lead { font-size: 1.16rem; margin-left: auto; margin-right: auto; }

/* Cards — centred flex-wrap so a single card sits centred, many wrap neatly */
.cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; width: 100%; }
.card { position: relative; overflow: hidden; flex: 0 1 340px; max-width: 380px; display: flex; flex-direction: column; color: inherit; text-decoration: none; cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.card:hover { text-decoration: none; }
.card h2 { color: var(--text); }
.card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); opacity: 0; transition: opacity .16s ease; }
.card:hover { border-color: var(--border-strong); background: var(--bg-elev); transform: translateY(-3px); box-shadow: 0 12px 34px rgba(0,0,0,.30); }
.card:hover::before { opacity: 1; }
.card-count { font-family: var(--mono); font-size: .72rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; margin: .15rem 0 1.1rem; align-self: flex-start; }
.card-cta { margin-top: auto; display: inline-flex; align-items: center; gap: .4rem; color: var(--accent); font-weight: 650; transition: gap .16s ease; }
.card-cta:hover { text-decoration: none; gap: .6rem; }

.site-footer { max-width: 1180px; margin: 3.5rem auto 0; padding: 1.4rem clamp(1rem,4vw,2rem); border-top: 1px solid var(--border); color: var(--subtle); font-size: .82rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.site-footer .mono { font-family: var(--mono); }
.site-footer a { color: var(--muted); }

.read-progress { position: fixed; top: 0; inset-inline-start: 0; height: 2px; background: var(--accent); z-index: 60; width: 0; transition: width .08s linear; }

/* =========================================================================
   Micro-interactions — spotlight-follow cards, scroll-reveal, hero accent,
   button polish. All cheap, theme-aware, and reduced-motion-safe.
   ========================================================================= */

/* ---- Spotlight-follow cards -------------------------------------------------
   Each .card gets an accent radial that tracks the cursor via per-card
   --mx/--my (set by a tiny pointermove handler — see Home.tsx wiring). The
   existing .card::before (top accent bar) is kept; we use ::after for the glow.
   Defaults keep the glow parked centre so it's harmless before any JS runs. */
.card { --mx: 50%; --my: 0%; }
.card::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s ease;
	background: radial-gradient(
		260px circle at var(--mx) var(--my),
		var(--accent-soft),
		transparent 60%
	);
}
.card:hover::after { opacity: 1; }

/* ---- Scroll-reveal ----------------------------------------------------------
   Elements tagged [data-reveal] start slightly down + transparent and rise into
   place when IntersectionObserver adds .is-visible (see Home.tsx). */
[data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---- Hero accent (static, tasteful) ----------------------------------------
   The canvas backdrop is the moving star of the page, so the hero itself stays
   calm: a solid accent eyebrow and a soft top-lit gradient on the H1. No
   infinite shimmer / pulsing halo (that over-decorated and competed with the
   dot-matrix). One gentle underline reveals once on mount (see .lit below). */
.hero-eyebrow {
	color: var(--accent);
}
.home-hero h1 {
	background: linear-gradient(180deg, var(--text), color-mix(in srgb, var(--text) 80%, var(--muted)));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.home-hero { position: relative; }
/* Animated accent underline that draws in once the H1 mounts (Home adds .lit),
   and on hover. A single restrained flourish, not a loop. */
.home-hero h1 { display: inline-block; }
.home-hero h1::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -0.26em;
	height: 3px;
	width: 0;
	border-radius: 999px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, var(--accent), transparent);
	transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}
.home:hover .home-hero h1::after,
.home-hero h1.lit::after { width: 46%; }

/* ---- Button / CTA polish ---------------------------------------------------- */
.icon-btn { transition: background .15s, color .15s, border-color .15s, transform .15s; }
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0); }
.signin-btn { transition: background .15s, border-color .15s, transform .15s; }
.signin-btn:hover { transform: translateY(-1px); border-color: var(--accent); }
/* CTA arrow lives in the label text itself ("Start → …" / "ابدأ ← …"), so no
   pseudo-element arrow here (it would duplicate the glyph). */

/* ---- Reduced motion: kill every loop/transition added above ----------------- */
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
	.card::after, .icon-btn, .signin-btn { transition: none; }
	/* Underline shows at rest, no draw-in animation. */
	.home-hero h1::after { transition: none; width: 46%; }
}

/* =========================================================================
   Phone (<=600px) overrides — LAST in the file so they win the cascade over
   the base/polish rules declared earlier.
   ========================================================================= */
@media (max-width: 600px) {
	.nav-inner { gap: 0.5rem; padding: 0 0.7rem; }
	.brand { font-size: 0.92rem; white-space: nowrap; gap: 7px; }
	.nav-actions { gap: 0.3rem; }
	.icon-btn { width: 34px; height: 34px; }
	.signin-btn { white-space: nowrap; padding: 0.42rem 0.7rem; font-size: 0.8rem; }
	.home { min-height: auto; }
	.home-hero { margin-top: clamp(1.5rem, 8vw, 3rem); }
	.home-hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
	.site-footer { flex-direction: column; gap: 0.5rem; }
	/* figures go edge-to-edge so diagrams are as large as the screen allows;
	   tap a figure to open the zoomable lightbox for finer detail */
	.prose .note-fig {
		margin-left: -1rem; margin-right: -1rem;
		border-left: 0; border-right: 0; border-radius: 0; padding: 0.8rem 0.4rem;
	}
	.prose .note-fig svg { width: 100%; height: auto; }
}
pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em
}
code.hljs {
  padding: 3px 5px
}
/*!
  Theme: GitHub Dark
  Description: Dark theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-dark
  Current colors taken from GitHub's CSS
*/
.hljs {
  color: #c9d1d9;
  background: #0d1117
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  /* prettylights-syntax-keyword */
  color: #ff7b72
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  /* prettylights-syntax-entity */
  color: #d2a8ff
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
  /* prettylights-syntax-constant */
  color: #79c0ff
}
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
  /* prettylights-syntax-string */
  color: #a5d6ff
}
.hljs-built_in,
.hljs-symbol {
  /* prettylights-syntax-variable */
  color: #ffa657
}
.hljs-comment,
.hljs-code,
.hljs-formula {
  /* prettylights-syntax-comment */
  color: #8b949e
}
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
  /* prettylights-syntax-entity-tag */
  color: #7ee787
}
.hljs-subst {
  /* prettylights-syntax-storage-modifier-import */
  color: #c9d1d9
}
.hljs-section {
  /* prettylights-syntax-markup-heading */
  color: #1f6feb;
  font-weight: bold
}
.hljs-bullet {
  /* prettylights-syntax-markup-list */
  color: #f2cc60
}
.hljs-emphasis {
  /* prettylights-syntax-markup-italic */
  color: #c9d1d9;
  font-style: italic
}
.hljs-strong {
  /* prettylights-syntax-markup-bold */
  color: #c9d1d9;
  font-weight: bold
}
.hljs-addition {
  /* prettylights-syntax-markup-inserted */
  color: #aff5b4;
  background-color: #033a16
}
.hljs-deletion {
  /* prettylights-syntax-markup-deleted */
  color: #ffdcd7;
  background-color: #67060c
}
.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
  /* purposely ignored */
  
}