cantip 0.1.0

package/app/styles/app.css

@@ -0,0 +1,461 @@
+@import './obsidian.css';
+
+/* Layout sizing tokens still consumed by the markdown/canvas styles below.
+   Theme colours now come from tailwind.css (shadcn) via the --sl-* bridge. */
+:root {
+	--content-max: 720px;
+	--content-pad-x: 2.5rem;
+	--sl-text-xs: 0.75rem;
+	--sl-text-sm: 0.875rem;
+	--sl-text-base: 1rem;
+	--sl-text-lg: 1.125rem;
+	--sl-text-xl: 1.25rem;
+	--sl-text-2xl: 1.5rem;
+	--sl-text-3xl: 1.875rem;
+	--sl-text-4xl: 2.25rem;
+	/* Obsidian's default heading scale (its --h1..--h6-size vars): a smooth
+	   ~1.125 ratio from H1 1.802rem down to H6 1rem. */
+	--sl-text-h1: 1.802rem;
+	--sl-text-h2: 1.602rem;
+	--sl-text-h3: 1.424rem;
+	--sl-text-h4: 1.266rem;
+	--sl-text-h5: 1.125rem;
+	--sl-text-h6: 1rem;
+	--sl-line-height: 1.7;
+	/* Obsidian renders headings in a soft off-white and the body in a muted
+	   gray, rather than pure-white bold headings on bright text. Like Obsidian's
+	   defaults, H1 is heavier (700) than H2–H6 (600). */
+	--obsidian-heading-color: oklch(0.93 0 0);
+	--obsidian-heading-weight: 600;
+	--obsidian-h1-weight: 700;
+	--obsidian-body-color: oklch(0.8 0 0);
+	/* Vertical space the sticky bars occupy, used as scroll-margin-top on
+	   anchor targets so hash navigation lands below them instead of behind.
+	   0 on mobile: there are no sticky top bars there (the nav is a fixed
+	   bottom bar). The desktop bars kick in at the md breakpoint below. */
+	--scroll-offset: 0px;
+}
+
+/* Light theme: invert the soft off-white/gray pair to soft near-black/gray so
+   the same Obsidian-style restraint holds when the dark/light toggle flips. */
+:root:not(.dark) {
+	--obsidian-heading-color: oklch(0.22 0 0);
+	--obsidian-body-color: oklch(0.38 0 0);
+}
+
+@media (min-width: 48rem) {
+	/* Desktop: the TopBar (h-11 = 2.75rem) is always pinned at the top. */
+	:root {
+		--scroll-offset: 2.75rem;
+	}
+	/* The TabBar's sticky wrapper (top-11) renders its inner strip only when
+	   tabs are open; otherwise it's empty. When present, the sticky stack is
+	   one bar taller, so push anchor targets down by the TabBar's height too. */
+	body:has([data-tab-strip]) {
+		--scroll-offset: calc(2.75rem + 2.25rem);
+	}
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+}
+
+/* ---- Document title ---- */
+.content h1 {
+	margin-top: 0;
+	margin-bottom: 0.5rem;
+	font-size: var(--sl-text-h1);
+	line-height: 1.3;
+	font-weight: var(--obsidian-h1-weight);
+	color: var(--obsidian-heading-color);
+}
+
+/* ---- Title row: H1 + priority badge inline ---- */
+.content h1.title-row {
+	display: flex;
+	align-items: baseline;
+	flex-wrap: wrap;
+	column-gap: 0.75rem;
+	row-gap: 0.5rem;
+}
+
+/* ---- Priority badge (MoSCoW) ---- */
+.priority-badge {
+	display: inline-flex;
+	align-items: center;
+	align-self: center;
+	border: 1px solid var(--badge-border, var(--sl-color-gray-4));
+	border-radius: 9999px;
+	padding: 0.15em 0.6em;
+	background: var(--badge-bg, var(--sl-color-gray-6));
+	color: var(--badge-fg, var(--sl-color-gray-1));
+	font-size: var(--sl-text-xs);
+	font-weight: 600;
+	line-height: 1.4;
+	white-space: nowrap;
+}
+
+.priority-badge[data-priority='must-have'] {
+	--badge-border: var(--sl-color-red, #ef4444);
+	--badge-bg: var(--sl-color-red-low, #450a0a);
+	--badge-fg: var(--sl-color-red-high, #f87171);
+}
+
+.priority-badge[data-priority='should-have'] {
+	--badge-border: var(--sl-color-orange, #eab308);
+	--badge-bg: var(--sl-color-orange-low, #422006);
+	--badge-fg: var(--sl-color-orange-high, #fbbf24);
+}
+
+.priority-badge[data-priority='could-have'] {
+	--badge-border: var(--sl-color-blue, #3b82f6);
+	--badge-bg: var(--sl-color-blue-low, #172554);
+	--badge-fg: var(--sl-color-blue-high, #60a5fa);
+}
+
+.priority-badge[data-priority='wont-have'] {
+	--badge-border: var(--sl-color-gray-4);
+	--badge-bg: var(--sl-color-gray-6);
+	--badge-fg: var(--sl-color-gray-2);
+}
+
+/* ---- Frontmatter metadata (collapsible, deliberately understated) ---- */
+.frontmatter {
+	margin: 0 0 2rem;
+	font-size: var(--sl-text-xs);
+}
+
+.frontmatter__summary {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.35em;
+	color: var(--sl-color-gray-3);
+	font-size: var(--sl-text-xs);
+	cursor: pointer;
+	user-select: none;
+	opacity: 0.6;
+	transition: opacity 0.15s;
+	list-style: none;
+}
+
+/* Hide the native disclosure triangle so we can draw our own caret. */
+.frontmatter__summary::-webkit-details-marker {
+	display: none;
+}
+
+/* Open chevron that marks the block as expandable; rotates down when open. */
+.frontmatter__summary::before {
+	content: '';
+	width: 0.4em;
+	height: 0.4em;
+	border-style: solid;
+	border-color: currentColor;
+	border-width: 0.1em 0.1em 0 0;
+	transform: rotate(45deg);
+	transition: transform 0.15s;
+}
+
+.frontmatter[open] > .frontmatter__summary::before {
+	transform: rotate(135deg);
+}
+
+.frontmatter__summary:hover {
+	opacity: 1;
+	color: var(--sl-color-gray-2);
+}
+
+.frontmatter__list {
+	margin: 0.5rem 0 0;
+}
+
+.frontmatter__row {
+	display: grid;
+	grid-template-columns: minmax(7rem, max-content) 1fr;
+	gap: 1rem;
+	padding: 0.15rem 0;
+}
+
+.frontmatter__key {
+	margin: 0;
+	color: var(--sl-color-gray-3);
+	font-family: var(--sl-font-system-mono, ui-monospace, monospace);
+}
+
+.frontmatter__value {
+	margin: 0;
+	color: var(--sl-color-gray-2);
+	word-break: break-word;
+}
+
+/* ---- Canvas pages ---- */
+.canvas-container {
+	position: relative;
+	width: 100%;
+	height: calc(100vh - 4rem);
+	min-height: 480px;
+	overflow: hidden;
+	background: var(--background);
+}
+
+/* ---- Prose: markdown body ---- */
+.content .body {
+	font-size: var(--sl-text-base);
+	line-height: var(--sl-line-height);
+	color: var(--obsidian-body-color);
+}
+/* Strip browser-default block margins so the ONLY source of vertical rhythm is
+   the blank-line marker below — never a blanket adjacent-sibling rule.
+   `margin-top` is computed from two custom properties so the blank-line gap ADDS
+   to a block's own top margin instead of overriding it: `--block-mt` is the
+   block's intrinsic top margin (0 by default; element rules below set it), and
+   `--blank-gap` is the inter-block gap (0 unless `.has-blank-before` sets it).
+   Their sum is the final margin, so a block that sets `--block-mt: 0.25rem` and
+   also carries `.has-blank-before` ends up at 1.25rem, not a clobbered 1rem. */
+.content .body :is(p, ul, ol, blockquote, pre, table, h1, h2, h3, h4, h5, h6) {
+	--block-mt: 0px;
+	--blank-gap: 0px;
+	margin-block: 0;
+	margin-top: calc(var(--block-mt) + var(--blank-gap));
+}
+/* A block earns a top gap ONLY when it was separated from its previous sibling
+   by a blank line in the source markdown. `scripts/compile.ts` tags those
+   blocks with `.has-blank-before`; blocks the author wrote on adjacent lines
+   (no blank line) get no class and sit flush. Setting `--blank-gap` (not
+   `margin-top` directly) lets the gap add to the block's own `--block-mt`. The
+   doubled `.body.body` raises specificity above the reset above so this wins. */
+.content .body.body .has-blank-before {
+	--blank-gap: 1rem;
+}
+/* The first block in the body has nothing above it, so it gets no top margin —
+   neither the intrinsic `--block-mt` (e.g. a heading's) nor a blank-line gap.
+   Keeps content flush to the top of the column instead of starting with a gap. */
+.content .body > :first-child {
+	--block-mt: 0px;
+	--blank-gap: 0px;
+}
+.content .body :is(h1, h2, h3, h4, h5, h6) {
+	color: var(--obsidian-heading-color);
+	font-weight: var(--obsidian-heading-weight);
+	line-height: 1.3;
+	/* Offset hash navigation (TOC clicks, sidebar links with #anchors) so the
+	   heading lands below the sticky bars instead of hidden behind them. */
+	scroll-margin-top: var(--scroll-offset);
+}
+/* Headings carry an intrinsic TOP-only margin so they breathe above and sit
+   flush to the text below them (bottom stays 0 from the reset). The margin
+   feeds `--block-mt`, so when the source also left a blank line above, the
+   `.has-blank-before` gap (--blank-gap) ADDS on top — heading spacing scales by
+   level (larger for higher-level headings) the way Obsidian renders it. */
+.content .body h1 {
+	font-size: var(--sl-text-h1);
+	font-weight: var(--obsidian-h1-weight);
+	--block-mt: 2rem;
+}
+/* Obsidian draws no rule under H2 — drop the hairline so headings match. */
+.content .body h2 {
+	font-size: var(--sl-text-h2);
+	--block-mt: 1.75rem;
+}
+.content .body h3 {
+	font-size: var(--sl-text-h3);
+	--block-mt: 1.5rem;
+}
+.content .body h4 {
+	font-size: var(--sl-text-h4);
+	--block-mt: 1.25rem;
+}
+.content .body h5 {
+	font-size: var(--sl-text-h5);
+	--block-mt: 1rem;
+}
+.content .body h6 {
+	font-size: var(--sl-text-h6);
+	--block-mt: 1rem;
+}
+.content .body a {
+	color: var(--brand);
+	text-decoration: underline;
+	text-underline-offset: 0.15em;
+	text-decoration-color: var(--sl-color-gray-4);
+}
+.content .body a:hover {
+	text-decoration-color: currentColor;
+}
+/* Tailwind's preflight resets lists to `list-style: none`; restore real
+   markers for prose lists (task lists re-disable them below). */
+.content .body ul {
+	padding-inline-start: 1.5rem;
+	list-style: disc;
+}
+.content .body ol {
+	padding-inline-start: 1.5rem;
+	list-style: decimal;
+}
+/* List items aren't in the reset's accumulator group, so give them the same
+   `--block-mt`/`--blank-gap` machinery: the 0.25rem inter-item gap goes into
+   `--block-mt`, and a loose-list item that earns `.has-blank-before` adds its
+   1rem on top (→ 1.25rem) instead of replacing the 0.25rem. */
+.content .body li {
+	--block-mt: 0px;
+	--blank-gap: 0px;
+	margin-top: calc(var(--block-mt) + var(--blank-gap));
+}
+.content .body li + li,
+.content .body li > :is(ul, ol) {
+	--block-mt: 0.25rem;
+}
+.content .body li > p {
+	margin: 0;
+}
+.content .body :is(ul, ol).contains-task-list {
+	padding-inline-start: 0;
+	list-style: none;
+}
+.content .body .task-list-item {
+	display: flex;
+	align-items: flex-start;
+	gap: 0.5rem;
+}
+.content .body .task-list-item input {
+	margin-top: 0.4em;
+}
+.content .body code {
+	font-family: var(--sl-font-system-mono);
+	background: var(--sl-color-bg-inline-code, var(--sl-color-gray-6));
+	padding: 0.15em 0.35em;
+	border-radius: 0.25rem;
+	font-size: 0.875em;
+}
+.content .body pre {
+	font-family: var(--sl-font-system-mono);
+	background: var(--sl-color-gray-6);
+	border: 1px solid var(--sl-color-hairline);
+	padding: 0.75rem 1rem;
+	border-radius: 0.5rem;
+	line-height: 1.6;
+	font-size: var(--sl-text-sm);
+	/* No-wrap with horizontal scroll by default; the injected per-block toggle
+	   adds `.pre-wrap` to wrap long lines instead. `overflow-wrap: anywhere`
+	   (only when wrapping) forces breaks inside unbreakable tokens. */
+	overflow-x: auto;
+}
+.content .body pre.pre-wrap {
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	overflow-x: visible;
+}
+/* Wrapper added client-side around each <pre> (see CodeWrapToggle). It is the
+   positioning context for the toggle, so the button pins to the block's
+   top-right corner and does NOT scroll with the <pre>'s horizontal overflow. */
+.content .body .pre-wrap-shell {
+	position: relative;
+}
+/* Reserve room on the right of the first line so the button never overlaps
+   long code. Applied to the wrapper so it affects layout without scrolling. */
+.content .body .pre-wrap-shell > pre {
+	padding-right: 2.75rem;
+}
+.content .body .pre-wrap-toggle {
+	position: absolute;
+	top: 0.375rem;
+	right: 0.375rem;
+	z-index: 1;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 1.75rem;
+	height: 1.75rem;
+	padding: 0;
+	border: 1px solid var(--sl-color-hairline);
+	border-radius: 0.375rem;
+	background: var(--sl-color-gray-6);
+	color: var(--sl-color-gray-2);
+	cursor: pointer;
+	opacity: 0;
+	transition: opacity 0.15s, color 0.15s, background 0.15s;
+}
+.content .body .pre-wrap-shell:hover .pre-wrap-toggle,
+.content .body .pre-wrap-shell:focus-within .pre-wrap-toggle,
+.content .body .pre-wrap-toggle:focus-visible {
+	opacity: 1;
+}
+.content .body .pre-wrap-toggle:hover {
+	color: var(--sl-color-white);
+	background: var(--sl-color-gray-5);
+}
+.content .body .pre-wrap-toggle svg {
+	width: 1rem;
+	height: 1rem;
+	pointer-events: none;
+}
+.content .body pre code {
+	background: none;
+	padding: 0;
+	font-size: inherit;
+	border-radius: 0;
+}
+.content .body table {
+	border-collapse: collapse;
+	width: auto;
+	max-width: 100%;
+	display: block;
+	overflow-x: auto;
+	font-size: var(--sl-text-sm);
+}
+.content .body :is(th, td) {
+	border: 1px solid var(--sl-color-gray-5);
+	padding: 0.5rem 0.75rem;
+	text-align: start;
+}
+.content .body th {
+	background: var(--sl-color-gray-6);
+	color: var(--sl-color-white);
+	font-weight: 600;
+}
+.content .body blockquote {
+	border-inline-start: 3px solid var(--sl-color-accent);
+	margin: 0;
+	padding-inline-start: 1rem;
+	color: var(--sl-color-gray-2);
+	font-style: italic;
+}
+.content .body blockquote :is(p, ul, ol) {
+	margin: 0;
+}
+/* hr keeps its own 2rem rule but routes the top half through the accumulator so
+   a blank-line-separated `<hr>` adds the 1rem gap on top (→ 3rem) instead of the
+   class being a no-op. `--block-mt` carries the intrinsic 2rem; `--blank-gap`
+   (0, or 1rem via `.has-blank-before`) adds to it. Bottom margin stays a flat
+   2rem since the blank-line marker only ever affects the top. */
+.content .body hr {
+	--block-mt: 2rem;
+	--blank-gap: 0px;
+	border: none;
+	border-top: 1px solid var(--sl-color-hairline);
+	margin-block: 2rem;
+	margin-top: calc(var(--block-mt) + var(--blank-gap));
+}
+.content .body img {
+	border-radius: 0.5rem;
+}
+
+/* When the left sidebar is dragged wide enough that the content column would be
+   too narrow, the resize logic adds `.toc-collapsed` on <html> and zeroes the
+   --toc-width grid column. Hide the TOC element to match (it is xl:block). */
+html.toc-collapsed #toc {
+	display: none;
+}
+
+/* In-page find (FindOnPage): painted over Range objects via the CSS Custom
+   Highlight API — no DOM mutation, so it sits cleanly over the injected article
+   HTML. `find-all` tints every match; `find-current` overrides the active one so
+   it stands out as you step through. Registered in app/components/FindOnPage.tsx. */
+::highlight(find-all) {
+	background-color: hsl(51, 100%, 50%);
+	color: black;
+}
+::highlight(find-current) {
+	background-color: hsl(28, 100%, 53%);
+	color: black;
+}

package/app/styles/obsidian.css

@@ -0,0 +1,83 @@
+/* Obsidian highlight ==text== */
+.obs-highlight {
+  background-color: hsl(51, 71%, 56%);
+}
+
+[data-theme='light'] .obs-highlight {
+  background-color: hsl(51, 80%, 56%);
+}
+
+/* Obsidian #tags */
+.obs-tag {
+  background-color: var(--sl-color-accent-low);
+  border-radius: 0.25rem;
+  border: 1px solid var(--sl-color-accent);
+  color: #fff;
+  font-family: var(--sl-font-system-mono, ui-monospace, monospace);
+  font-size: 0.75rem;
+  padding: 0.25rem 0.375rem;
+}
+
+[data-theme='light'] .obs-tag {
+  background-color: var(--sl-color-accent-high, #4C3FB0);
+}
+
+/* Audio/video/PDF embeds */
+.obs-embed-audio {
+  width: 100%;
+}
+
+.obs-embed-pdf {
+  border: none;
+  height: 600px;
+  width: 100%;
+}
+
+/* Callouts */
+.callout {
+  border-left: 4px solid;
+  border-radius: 0.25rem;
+  padding: 0.75rem 1rem;
+  margin: 1rem 0;
+}
+
+.callout .callout-title {
+  font-weight: 600;
+  margin: 0 0 0.5rem;
+}
+
+.callout-note {
+  border-color: var(--sl-color-blue, #3b82f6);
+  background: var(--sl-color-blue-low, #172554);
+}
+
+.callout-note .callout-title {
+  color: var(--sl-color-blue-high, #60a5fa);
+}
+
+.callout-tip {
+  border-color: var(--sl-color-green, #22c55e);
+  background: var(--sl-color-green-low, #14532d);
+}
+
+.callout-tip .callout-title {
+  color: var(--sl-color-green-high, #4ade80);
+}
+
+.callout-caution {
+  border-color: var(--sl-color-orange, #eab308);
+  background: var(--sl-color-orange-low, #422006);
+}
+
+.callout-caution .callout-title {
+  color: var(--sl-color-orange-high, #fbbf24);
+}
+
+.callout-danger {
+  border-color: var(--sl-color-red, #ef4444);
+  background: var(--sl-color-red-low, #450a0a);
+}
+
+.callout-danger .callout-title {
+  color: var(--sl-color-red-high, #f87171);
+}