beadcyte 0.4.0

package/src/web/styles-ported.css

@@ -0,0 +1,270 @@
+/* styles-ported.css — named styles ported from well-known editor palettes,
+ * plus the High Contrast original. Loaded after styles-alt.css (bp-kkf).
+ *
+ * Every block redefines the same tokens the components already read, in the
+ * same light-dark(oklch()) form the audit can parse, and declares the whole
+ * encoding set deliberately — the rule styles-alt.css explains.
+ *
+ * The palette VALUES come from each theme's own published files, with these
+ * departures, applied uniformly and recorded in docs/theming.md:
+ *   - a panel ladder derived from the theme's background by lightness only;
+ *   - text lifted to 7:1, dim to 5:1, accent to 4.5:1 against --c-bg where
+ *     the theme's own colour fell short;
+ *   - the lightness of every colour-only encoding token placed by
+ *     scripts/place-encoding-lightness.mjs so each pair clears the audit's
+ *     OKLab and colour-vision floors as tokens and as painted bars.
+ * Do not change a ported value by hand and keep the theme's name on it:
+ * re-run the placement, or record the change here and in the notices.
+ *
+ * Attribution lives in THIRD_PARTY_NOTICES.md at the repo root, which is
+ * what a redistributor will look for and what survives minification. The
+ * one-line summary per theme sits above its block.
+ */
+
+/* Catppuccin. Mocha (dark) and Latte (light) — github.com/catppuccin/palette, MIT, Copyright (c) 2021 Catppuccin.
+   Latte's text is one step darker than published (L 39.5 vs 43.5) so dim
+   can clear both its 5:1 floor and the ink-distinctness floor against it;
+   Latte's epic ink and both flavours' dim-bright moved for the same reason. */
+:root[data-style="catppuccin"],
+[data-preview="catppuccin"] {
+  --c-shipped: light-dark(oklch(65.0% 0.177 140.4), oklch(71.0% 0.109 142.7)); /* #40a02b | #a6e3a1 */
+  --c-in-progress: light-dark(oklch(56.3% 0.226 262.1), oklch(80.4% 0.099 259.9)); /* #1e66f5 | #89b4fa */
+  --c-future: light-dark(oklch(41.5% 0.228 297.0), oklch(72.7% 0.154 304.8)); /* #8a3bf1 | #c190f8 */
+  --c-backlog: light-dark(oklch(41.5% 0.228 297.0), oklch(72.7% 0.154 304.8)); /* #8a3bf1 | #c190f8 */
+  --c-closed-noship: light-dark(oklch(57.4% 0.027 278.1), oklch(61.8% 0.037 274.7)); /* #828597 | #8e94ad */
+  --c-today: light-dark(oklch(54.9% 0.216 19.8), oklch(77.2% 0.130 2.8)); /* #d20f39 | #f38ba8 */
+  --c-danger: light-dark(oklch(58.2% 0.216 19.8), oklch(75.7% 0.130 2.8)); /* #d20f39 | #f38ba8 */
+  --c-bg: light-dark(oklch(95.8% 0.006 264.5), oklch(24.3% 0.030 283.9)); /* #eff1f5 | #1e1e2e */
+  --c-panel: light-dark(oklch(93.3% 0.009 264.5), oklch(32.4% 0.032 282.0)); /* #e6e9ef | #313244 */
+  --c-panel-2: light-dark(oklch(90.6% 0.012 264.5), oklch(40.4% 0.032 280.2)); /* #dce0e8 | #45475a */
+  --c-border: light-dark(oklch(85.7% 0.014 268.5), oklch(40.4% 0.032 280.2)); /* #ccd0da | #45475a */
+  --c-border-strong: light-dark(oklch(75.8% 0.020 273.2), oklch(47.7% 0.034 278.6)); /* #acb0be | #585b70 */
+  --c-text: light-dark(oklch(39.5% 0.043 279.3), oklch(87.9% 0.043 272.3)); /* #41445d | #cdd6f4 */
+  --c-dim: light-dark(oklch(51.1% 0.030 278.7), oklch(72.6% 0.040 273.9)); /* #626578 | #9ea5c0 */
+  --c-dim-bright: light-dark(oklch(41.2% 0.038 279.3), oklch(85.7% 0.040 272.9)); /* #464960 | #c7cfeb */
+  --c-phase-worked: light-dark(oklch(57.6% 0.177 140.4), oklch(71.3% 0.109 142.7)); /* #40a02b | #a6e3a1 */
+  --c-phase-review: light-dark(oklch(49.1% 0.226 262.1), oklch(78.5% 0.109 259.9)); /* #1e66f5 | #89b4fa */
+  --c-phase-waiting: light-dark(oklch(74.0% 0.149 67.8), oklch(91.9% 0.070 86.5)); /* #ef9d33 | #f9e2af */
+  --c-phase-other: light-dark(oklch(77.7% 0.014 268.5), oklch(45.0% 0.032 280.2)); /* #ccd0da | #45475a */
+  --c-accent: light-dark(oklch(55.5% 0.250 297.0), oklch(78.7% 0.119 304.8)); /* #8839ef | #cba6f7 */
+  --c-epic: light-dark(oklch(54.6% 0.174 338.4), oklch(96.0% 0.028 336.3)); /* #ad3d92 | #ffebf9 */
+}
+
+/* Dracula. Dracula (dark) and its official light companion Alucard — github.com/dracula/dracula-theme, MIT, Copyright (c) 2023 Dracula Theme. */
+:root[data-style="dracula"],
+[data-preview="dracula"] {
+  --c-shipped: light-dark(oklch(44.1% 0.151 141.9), oklch(92.1% 0.142 148.0)); /* #14710a | #50fa7b */
+  --c-in-progress: light-dark(oklch(54.5% 0.106 236.2), oklch(82.2% 0.093 212.8)); /* #036a96 | #8be9fd */
+  --c-future: light-dark(oklch(35.5% 0.188 287.1), oklch(75.5% 0.151 301.9)); /* #644ac9 | #bc8bff */
+  --c-backlog: light-dark(oklch(35.5% 0.188 287.1), oklch(75.5% 0.151 301.9)); /* #644ac9 | #bc8bff */
+  --c-closed-noship: light-dark(oklch(53.8% 0.041 97.1), oklch(62.6% 0.080 270.1)); /* #6c664b | #9aace2 */
+  --c-today: light-dark(oklch(70.3% 0.184 30.1), oklch(68.1% 0.206 24.4)); /* #cb3a2a | #ff5555 */
+  --c-danger: light-dark(oklch(56.3% 0.184 30.1), oklch(68.3% 0.204 24.4)); /* #cb3a2a | #ff5555 */
+  --c-bg: light-dark(oklch(98.7% 0.021 95.3), oklch(28.8% 0.022 277.5)); /* #fffbeb | #282a36 */
+  --c-panel: light-dark(oklch(96.2% 0.021 95.3), oklch(33.3% 0.022 277.5)); /* #f7f3e3 | #333542 */
+  --c-panel-2: light-dark(oklch(93.2% 0.021 95.3), oklch(40.3% 0.032 277.8)); /* #ede9d9 | #44475a */
+  --c-border: light-dark(oklch(88.7% 0.021 95.3), oklch(37.8% 0.032 277.8)); /* #dedaca | #3d4053 */
+  --c-border-strong: light-dark(oklch(72.0% 0.041 97.1), oklch(40.3% 0.032 277.8)); /* #aba588 | #44475a */
+  --c-text: light-dark(oklch(23.9% 0.000 0.0), oklch(97.7% 0.008 106.5)); /* #1f1f1f | #f8f8f2 */
+  --c-dim: light-dark(oklch(50.8% 0.041 97.1), oklch(69.0% 0.080 270.1)); /* #6c664b | #8899ce */
+  --c-dim-bright: light-dark(oklch(36.0% 0.041 97.1), oklch(80.0% 0.080 270.1)); /* #433d24 | #a9bcf2 */
+  --c-phase-worked: light-dark(oklch(52.9% 0.155 141.9), oklch(84.9% 0.220 148.0)); /* #338a2b | #50fa7b */
+  --c-phase-review: light-dark(oklch(60.0% 0.106 236.2), oklch(91.1% 0.073 212.8)); /* #267daa | #8be9fd */
+  --c-phase-waiting: light-dark(oklch(72.7% 0.131 48.5), oklch(91.4% 0.060 66.6)); /* #ed905d | #ffb86c */
+  --c-phase-other: light-dark(oklch(74.7% 0.021 95.3), oklch(45.0% 0.032 277.8)); /* #cac6b7 | #44475a */
+  --c-accent: light-dark(oklch(50.9% 0.188 287.1), oklch(74.2% 0.149 301.9)); /* #644ac9 | #bd93f9 */
+  --c-epic: light-dark(oklch(46.8% 0.177 5.0), oklch(75.5% 0.183 346.8)); /* #a3144d | #ff79c6 */
+}
+
+/* GitHub. Primer light and dark from @primer/primitives 7.11.13 — github.com/primer/primitives, MIT, Copyright (c) 2018 GitHub Inc. */
+:root[data-style="github"],
+[data-preview="github"] {
+  --c-shipped: light-dark(oklch(43.6% 0.128 148.0), oklch(75.3% 0.181 145.6)); /* #1a7f37 | #3fb950 */
+  --c-in-progress: light-dark(oklch(66.0% 0.181 257.5), oklch(61.6% 0.193 258.3)); /* #0969da | #2f81f7 */
+  --c-future: light-dark(oklch(47.3% 0.207 295.0), oklch(78.7% 0.125 298.1)); /* #814fde | #a371f7 */
+  --c-backlog: light-dark(oklch(47.3% 0.207 295.0), oklch(78.7% 0.125 298.1)); /* #814fde | #a371f7 */
+  --c-closed-noship: light-dark(oklch(62.0% 0.018 250.9), oklch(59.1% 0.020 256.3)); /* #7e8791 | #6d7580 */
+  --c-today: light-dark(oklch(65.0% 0.205 24.5), oklch(65.4% 0.205 27.0)); /* #cf222e | #f85149 */
+  --c-danger: light-dark(oklch(55.2% 0.205 24.5), oklch(66.6% 0.205 27.0)); /* #cf222e | #f85149 */
+  --c-bg: light-dark(oklch(100.0% 0.000 0.0), oklch(17.6% 0.014 258.4)); /* #ffffff | #0d1117 */
+  --c-panel: light-dark(oklch(97.8% 0.003 247.9), oklch(22.0% 0.016 256.8)); /* #f6f8fa | #161b22 */
+  --c-panel-2: light-dark(oklch(94.7% 0.007 247.9), oklch(26.7% 0.015 256.8)); /* #eaeef2 | #21262d */
+  --c-border: light-dark(oklch(87.6% 0.012 248.0), oklch(33.0% 0.015 252.3)); /* #d0d7de | #30363d */
+  --c-border-strong: light-dark(oklch(77.8% 0.016 248.0), oklch(42.5% 0.017 254.7)); /* #afb8c1 | #484f58 */
+  --c-text: light-dark(oklch(25.4% 0.011 254.0), oklch(94.3% 0.011 243.7)); /* #1f2328 | #e6edf3 */
+  --c-dim: light-dark(oklch(53.1% 0.017 251.3), oklch(61.4% 0.019 256.3)); /* #656d76 | #7d8590 */
+  --c-dim-bright: light-dark(oklch(40.5% 0.018 251.4), oklch(78.5% 0.017 250.9)); /* #424a53 | #b1bac4 */
+  --c-phase-worked: light-dark(oklch(50.0% 0.140 148.0), oklch(62.2% 0.181 145.6)); /* #1a7f37 | #3fb950 */
+  --c-phase-review: light-dark(oklch(54.9% 0.191 257.5), oklch(69.1% 0.163 258.3)); /* #0969da | #2f81f7 */
+  --c-phase-waiting: light-dark(oklch(74.0% 0.117 75.0), oklch(77.5% 0.140 79.9)); /* #dca656 | #d29922 */
+  --c-phase-other: light-dark(oklch(79.6% 0.012 248.0), oklch(41.0% 0.015 252.3)); /* #d0d7de | #30363d */
+  --c-accent: light-dark(oklch(54.0% 0.191 257.5), oklch(61.8% 0.193 258.3)); /* #0969da | #2f81f7 */
+  --c-epic: light-dark(oklch(56.3% 0.207 295.0), oklch(66.1% 0.193 298.1)); /* #8250df | #a371f7 */
+}
+
+/* Gruvbox. Dark and light — github.com/morhetz/gruvbox, MIT as declared in its package.json (the repo ships no LICENSE file), Pavel Pertsev.
+   Dark text is fg0 rather than fg1, the bar hues carry chroma x1.5, and
+   lightness was placed with --span=0.34: Gruvbox's warm greys and yellow-
+   leaning greens sit along the axis dichromacy removes, and this is the
+   least change that clears the colour-vision floor (6.6, the thinnest
+   margin in the set). */
+:root[data-style="gruvbox"],
+[data-preview="gruvbox"] {
+  --c-shipped: light-dark(oklch(35.3% 0.080 106.5), oklch(80.2% 0.176 110.8)); /* #79740e | #b8bb26 */
+  --c-in-progress: light-dark(oklch(69.4% 0.122 215.8), oklch(85.9% 0.095 169.8)); /* #076678 | #83a598 */
+  --c-future: light-dark(oklch(32.0% 0.144 344.3), oklch(78.5% 0.120 2.2)); /* #8f3f71 | #f883a6 */
+  --c-backlog: light-dark(oklch(32.0% 0.144 344.3), oklch(78.5% 0.120 2.2)); /* #8f3f71 | #f883a6 */
+  --c-closed-noship: light-dark(oklch(50.9% 0.023 62.6), oklch(65.0% 0.029 67.3)); /* #493d33 | #8f8071 */
+  --c-today: light-dark(oklch(59.9% 0.245 28.3), oklch(65.9% 0.226 30.4)); /* #9d0006 | #fb4934 */
+  --c-danger: light-dark(oklch(49.8% 0.206 28.3), oklch(66.0% 0.226 30.4)); /* #9d0006 | #fb4934 */
+  --c-bg: light-dark(oklch(95.6% 0.055 96.2), oklch(27.7% 0.000 0.0)); /* #fbf1c7 | #282828 */
+  --c-panel: light-dark(oklch(92.2% 0.055 92.5), oklch(34.4% 0.007 48.5)); /* #f2e5bc | #3c3836 */
+  --c-panel-2: light-dark(oklch(89.4% 0.057 89.2), oklch(41.1% 0.012 51.9)); /* #ebdbb2 | #504945 */
+  --c-border: light-dark(oklch(82.5% 0.051 85.1), oklch(41.1% 0.012 51.9)); /* #d5c4a1 | #504945 */
+  --c-border-strong: light-dark(oklch(69.0% 0.035 76.3), oklch(48.2% 0.018 61.0)); /* #a89984 | #665c54 */
+  --c-text: light-dark(oklch(34.4% 0.007 48.5), oklch(95.6% 0.055 96.2)); /* #3c3836 | #fbf1c7 */
+  --c-dim: light-dark(oklch(51.0% 0.023 62.6), oklch(67.9% 0.029 67.3)); /* #706359 | #a59585 */
+  --c-dim-bright: light-dark(oklch(41.1% 0.012 51.9), oklch(77.6% 0.041 82.3)); /* #504945 | #c3b499 */
+  --c-phase-worked: light-dark(oklch(54.7% 0.117 106.5), oklch(67.8% 0.148 110.8)); /* #79740e | #b8bb26 */
+  --c-phase-review: light-dark(oklch(47.0% 0.083 215.8), oklch(69.2% 0.095 169.8)); /* #076678 | #83a598 */
+  --c-phase-waiting: light-dark(oklch(72.3% 0.151 77.7), oklch(77.6% 0.159 83.0)); /* #d79921 | #fabd2f */
+  --c-phase-other: light-dark(oklch(74.0% 0.051 85.1), oklch(45.0% 0.012 51.9)); /* #d5c4a1 | #504945 */
+  --c-accent: light-dark(oklch(54.3% 0.118 70.7), oklch(83.2% 0.159 83.0)); /* #9a6100 | #fabd2f */
+  --c-epic: light-dark(oklch(48.9% 0.124 344.3), oklch(70.5% 0.098 2.2)); /* #8f3f71 | #d3869b */
+}
+
+/* High Contrast. ORIGINAL. Pure white ground with black ink in light mode, pure black with white in dark; achromatic chrome; saturated, well-separated data hues. Text 21:1 both ways. */
+:root[data-style="high-contrast"],
+[data-preview="high-contrast"] {
+  --c-shipped: light-dark(oklch(29.6% 0.085 150.7), oklch(84.5% 0.199 152.8)); /* #00662e | #3ff08a */
+  --c-in-progress: light-dark(oklch(53.1% 0.187 260.8), oklch(88.9% 0.064 235.0)); /* #0b4fbf | #4fc3ff */
+  --c-future: light-dark(oklch(43.8% 0.203 322.2), oklch(65.8% 0.172 307.4)); /* #8c1b9c | #c88afe */
+  --c-backlog: light-dark(oklch(43.8% 0.203 322.2), oklch(65.8% 0.172 307.4)); /* #8c1b9c | #c88afe */
+  --c-closed-noship: light-dark(oklch(46.1% 0.000 0.0), oklch(71.8% 0.000 0.0)); /* #585858 | #989898 */
+  --c-today: light-dark(oklch(50.8% 0.197 27.3), oklch(68.8% 0.202 26.6)); /* #b3000f | #ff5a52 */
+  --c-danger: light-dark(oklch(48.1% 0.197 27.3), oklch(68.7% 0.202 26.6)); /* #b3000f | #ff5a52 */
+  --c-bg: light-dark(oklch(100.0% 0.000 0.0), oklch(0.0% 0.000 0.0)); /* #ffffff | #000000 */
+  --c-panel: light-dark(oklch(96.7% 0.000 0.0), oklch(15.9% 0.000 0.0)); /* #f4f4f4 | #0d0d0d */
+  --c-panel-2: light-dark(oklch(92.5% 0.000 0.0), oklch(22.6% 0.000 0.0)); /* #e6e6e6 | #1c1c1c */
+  --c-border: light-dark(oklch(69.3% 0.000 0.0), oklch(45.3% 0.000 0.0)); /* #9c9c9c | #565656 */
+  --c-border-strong: light-dark(oklch(0.0% 0.000 0.0), oklch(75.7% 0.000 0.0)); /* #000000 | #b0b0b0 */
+  --c-text: light-dark(oklch(0.0% 0.000 0.0), oklch(100.0% 0.000 0.0)); /* #000000 | #ffffff */
+  --c-dim: light-dark(oklch(43.9% 0.000 0.0), oklch(73.2% 0.000 0.0)); /* #525252 | #a8a8a8 */
+  --c-dim-bright: light-dark(oklch(22.6% 0.000 0.0), oklch(90.1% 0.000 0.0)); /* #1c1c1c | #dedede */
+  --c-phase-worked: light-dark(oklch(54.3% 0.121 150.7), oklch(89.6% 0.185 152.8)); /* #419459 | #3ff08a */
+  --c-phase-review: light-dark(oklch(59.7% 0.187 260.8), oklch(77.5% 0.134 235.0)); /* #3274e7 | #4fc3ff */
+  --c-phase-waiting: light-dark(oklch(74.0% 0.099 69.1), oklch(84.6% 0.148 81.7)); /* #e1ac6f | #ffc44d */
+  --c-phase-other: light-dark(oklch(75.6% 0.000 0.0), oklch(40.1% 0.000 0.0)); /* #c9c9c9 | #333333 */
+  --c-accent: light-dark(oklch(46.8% 0.203 322.2), oklch(74.3% 0.172 307.4)); /* #8b1a9b | #c98bff */
+  --c-epic: light-dark(oklch(47.6% 0.194 357.0), oklch(78.9% 0.172 338.1)); /* #a8005e | #ff8be0 */
+}
+
+/* Nord. github.com/nordtheme/nord, MIT, Copyright (c) 2016-present Sven Greb. Chroma of the bar-kind hues is scaled 1.6–2.3x: Nord's whole palette sits under C 0.09, and no 35% wash of that survives the audit.
+   Dark dim and epic moved (epic chroma raised) so the label inks stay
+   apart; light dim-bright darkened one step for the type chips. */
+:root[data-style="nord"],
+[data-preview="nord"] {
+  --c-shipped: light-dark(oklch(39.9% 0.113 131.1), oklch(84.0% 0.135 131.1)); /* #4c7811 | #abdd7d */
+  --c-in-progress: light-dark(oklch(60.0% 0.124 254.0), oklch(62.1% 0.130 248.7)); /* #165394 | #3e8bd0 */
+  --c-future: light-dark(oklch(38.6% 0.112 332.7), oklch(90.2% 0.078 332.7)); /* #85467c | #f196e3 */
+  --c-backlog: light-dark(oklch(38.6% 0.112 332.7), oklch(90.2% 0.078 332.7)); /* #85467c | #f196e3 */
+  --c-closed-noship: light-dark(oklch(52.3% 0.035 264.1), oklch(74.0% 0.035 264.1)); /* #3b4558 | #96a2b8 */
+  --c-today: light-dark(oklch(54.0% 0.169 15.3), oklch(65.9% 0.193 15.3)); /* #ae2942 | #f0526a */
+  --c-danger: light-dark(oklch(50.0% 0.169 15.3), oklch(65.9% 0.193 15.3)); /* #ae2942 | #f0526a */
+  --c-bg: light-dark(oklch(95.1% 0.007 260.7), oklch(32.4% 0.023 264.2)); /* #eceff4 | #2e3440 */
+  --c-panel: light-dark(oklch(93.3% 0.010 261.8), oklch(37.9% 0.029 266.5)); /* #e5e9f0 | #3b4252 */
+  --c-panel-2: light-dark(oklch(89.9% 0.016 262.7), oklch(41.6% 0.032 264.1)); /* #d8dee9 | #434c5e */
+  --c-border: light-dark(oklch(84.9% 0.016 262.7), oklch(41.6% 0.032 264.1)); /* #c8ced9 | #434c5e */
+  --c-border-strong: light-dark(oklch(72.0% 0.035 264.1), oklch(45.2% 0.035 264.1)); /* #9aa5bb | #4c566a */
+  --c-text: light-dark(oklch(32.4% 0.023 264.2), oklch(95.1% 0.007 260.7)); /* #2e3440 | #eceff4 */
+  --c-dim: light-dark(oklch(45.2% 0.035 264.1), oklch(72.2% 0.035 264.1)); /* #4c566a | #9aa6bc */
+  --c-dim-bright: light-dark(oklch(35.9% 0.029 266.5), oklch(89.9% 0.016 262.7)); /* #363d4c | #d8dee9 */
+  --c-phase-worked: light-dark(oklch(56.7% 0.135 131.1), oklch(75.5% 0.135 131.1)); /* #578422 | #9fcf70 */
+  --c-phase-review: light-dark(oklch(49.8% 0.116 254.0), oklch(65.9% 0.130 248.7)); /* #3a70b0 | #4b97de */
+  --c-phase-waiting: light-dark(oklch(74.0% 0.143 84.1), oklch(88.2% 0.125 84.1)); /* #dba82e | #fdc855 */
+  --c-phase-other: light-dark(oklch(81.9% 0.016 262.7), oklch(45.0% 0.032 264.1)); /* #d8dee9 | #434c5e */
+  --c-accent: light-dark(oklch(48.0% 0.116 254.0), oklch(77.5% 0.062 217.5)); /* #295f9d | #88c0d0 */
+  --c-epic: light-dark(oklch(50.0% 0.112 332.7), oklch(72.2% 0.105 332.7)); /* #88497f | #cd8cc2 */
+}
+
+/* One. Atom One Dark and One Light — github.com/atom/one-dark-syntax and one-light-syntax, MIT, Copyright (c) 2016 GitHub Inc. */
+:root[data-style="one"],
+[data-preview="one"] {
+  --c-shipped: light-dark(oklch(71.1% 0.142 143.5), oklch(76.8% 0.110 133.0)); /* #50a14f | #98c379 */
+  --c-in-progress: light-dark(oklch(60.2% 0.193 263.2), oklch(85.5% 0.077 245.3)); /* #4078f2 | #61afef */
+  --c-future: light-dark(oklch(52.0% 0.211 328.8), oklch(72.9% 0.164 318.2)); /* #a524a3 | #d283e9 */
+  --c-backlog: light-dark(oklch(52.0% 0.211 328.8), oklch(72.9% 0.164 318.2)); /* #a524a3 | #d283e9 */
+  --c-closed-noship: light-dark(oklch(62.0% 0.011 273.3), oklch(61.7% 0.022 262.9)); /* #84868d | #7c8391 */
+  --c-today: light-dark(oklch(61.5% 0.179 28.3), oklch(56.8% 0.145 17.0)); /* #e45649 | #e06c75 */
+  --c-danger: light-dark(oklch(54.2% 0.208 15.9), oklch(67.2% 0.145 17.0)); /* #ca1243 | #e06c75 */
+  --c-bg: light-dark(oklch(98.5% 0.000 0.0), oklch(29.3% 0.016 264.3)); /* #fafafa | #282c34 */
+  --c-panel: light-dark(oklch(95.5% 0.001 286.4), oklch(32.9% 0.019 268.1)); /* #f0f0f1 | #31353f */
+  --c-panel-2: light-dark(oklch(92.2% 0.001 286.4), oklch(37.5% 0.022 264.3)); /* #e5e5e6 | #3b414d */
+  --c-border: light-dark(oklch(89.2% 0.001 286.4), oklch(37.5% 0.022 264.3)); /* #dbdbdc | #3b414d */
+  --c-border-strong: light-dark(oklch(77.7% 0.003 286.3), oklch(43.9% 0.029 267.6)); /* #b6b6b8 | #4b5263 */
+  --c-text: light-dark(oklch(35.0% 0.014 274.5), oklch(78.2% 0.020 263.0)); /* #383a42 | #b1b8c5 */
+  --c-dim: light-dark(oklch(53.2% 0.018 273.6), oklch(68.9% 0.023 264.4)); /* #696c77 | #949baa */
+  --c-dim-bright: light-dark(oklch(44.0% 0.018 273.5), oklch(85.0% 0.015 260.7)); /* #4f525d | #c8ced8 */
+  --c-phase-worked: light-dark(oklch(56.4% 0.142 143.5), oklch(84.6% 0.110 133.0)); /* #50a14f | #98c379 */
+  --c-phase-review: light-dark(oklch(61.6% 0.193 263.2), oklch(73.0% 0.121 245.3)); /* #4078f2 | #61afef */
+  --c-phase-waiting: light-dark(oklch(74.0% 0.138 76.2), oklch(75.8% 0.097 82.3)); /* #e3a43b | #e5c07b */
+  --c-phase-other: light-dark(oklch(81.2% 0.001 286.4), oklch(45.0% 0.022 264.3)); /* #dbdbdc | #3b414d */
+  --c-accent: light-dark(oklch(56.2% 0.193 263.2), oklch(73.0% 0.121 245.3)); /* #356be4 | #61afef */
+  --c-epic: light-dark(oklch(52.4% 0.211 328.8), oklch(69.4% 0.164 318.2)); /* #a626a4 | #c678dd */
+}
+
+/* Solarized. Dark and light — github.com/altercation/solarized, MIT, Copyright (c) 2011 Ethan Schoonover. Dark ink is base2 rather than base1 for a 12:1 rather than 5.6:1 text contrast; future is Solarized magenta, not its violet, which sat inside the audit floor from its blue.
+   dim-bright and the violet epic ink moved in lightness so the type-chip
+   inks stay apart: Solarized's base0/base1 greys are 0.03 OKLab apart. */
+:root[data-style="solarized"],
+[data-preview="solarized"] {
+  --c-shipped: light-dark(oklch(67.7% 0.151 118.6), oklch(71.1% 0.151 118.6)); /* #859900 | #859900 */
+  --c-in-progress: light-dark(oklch(61.6% 0.139 244.9), oklch(67.6% 0.139 244.9)); /* #268bd2 | #268bd2 */
+  --c-future: light-dark(oklch(43.2% 0.180 355.9), oklch(82.6% 0.108 355.9)); /* #d23581 | #ff7bb2 */
+  --c-backlog: light-dark(oklch(43.2% 0.180 355.9), oklch(82.6% 0.108 355.9)); /* #d23581 | #ff7bb2 */
+  --c-closed-noship: light-dark(oklch(53.4% 0.016 196.8), oklch(63.9% 0.028 219.1)); /* #7c8989 | #6b8289 */
+  --c-today: light-dark(oklch(58.2% 0.206 27.1), oklch(58.6% 0.206 27.1)); /* #dc322f | #dc322f */
+  --c-danger: light-dark(oklch(58.6% 0.206 27.1), oklch(58.6% 0.206 27.1)); /* #dc322f | #dc322f */
+  --c-bg: light-dark(oklch(97.4% 0.026 90.1), oklch(26.7% 0.049 219.8)); /* #fdf6e3 | #002b36 */
+  --c-panel: light-dark(oklch(93.1% 0.026 92.4), oklch(30.9% 0.052 219.7)); /* #eee8d5 | #073642 */
+  --c-panel-2: light-dark(oklch(88.6% 0.026 92.4), oklch(36.4% 0.052 219.7)); /* #dfd9c6 | #194551 */
+  --c-border: light-dark(oklch(87.1% 0.026 92.4), oklch(35.9% 0.052 219.7)); /* #dad4c2 | #184350 */
+  --c-border-strong: light-dark(oklch(69.8% 0.016 196.8), oklch(52.3% 0.028 219.1)); /* #93a1a1 | #586e75 */
+  --c-text: light-dark(oklch(26.7% 0.049 219.8), oklch(93.1% 0.026 92.4)); /* #002b36 | #eee8d5 */
+  --c-dim: light-dark(oklch(51.8% 0.029 221.9), oklch(66.9% 0.020 205.3)); /* #566c74 | #87999b */
+  --c-dim-bright: light-dark(oklch(42.3% 0.028 219.1), oklch(77.8% 0.016 196.8)); /* #3d5258 | #acbaba */
+  --c-phase-worked: light-dark(oklch(62.2% 0.147 118.6), oklch(64.3% 0.151 118.6)); /* #859900 | #859900 */
+  --c-phase-review: light-dark(oklch(61.5% 0.139 244.9), oklch(61.5% 0.139 244.9)); /* #268bd2 | #268bd2 */
+  --c-phase-waiting: light-dark(oklch(74.0% 0.134 85.7), oklch(80.1% 0.134 85.7)); /* #d7aa3c | #e4b74b */
+  --c-phase-other: light-dark(oklch(85.1% 0.026 92.4), oklch(45.0% 0.052 219.7)); /* #eee8d5 | #234e5b */
+  --c-accent: light-dark(oklch(54.5% 0.137 244.9), oklch(64.0% 0.139 244.9)); /* #0075ba | #3093da */
+  --c-epic: light-dark(oklch(55.2% 0.126 279.1), oklch(67.2% 0.126 279.1)); /* #6468ba | #868ce2 */
+}
+
+/* Tokyo Night. Night and Light — github.com/enkia/tokyo-night-vscode-theme, MIT, Copyright (c) 2018-present Enkia. In-progress is its blue, not its cyan, which collided with the text colour in the WIP bullet.
+   dim-bright moved one step in both modes and the dark epic ink gained
+   chroma so the type-chip inks stay apart. */
+:root[data-style="tokyonight"],
+[data-preview="tokyonight"] {
+  --c-shipped: light-dark(oklch(41.8% 0.116 132.7), oklch(88.3% 0.139 130.1)); /* #385f0d | #9ece6a */
+  --c-in-progress: light-dark(oklch(49.8% 0.091 222.1), oklch(56.1% 0.132 264.2)); /* #006c86 | #7aa2f7 */
+  --c-future: light-dark(oklch(49.1% 0.180 302.0), oklch(82.7% 0.100 299.5)); /* #753cb3 | #b07ffe */
+  --c-backlog: light-dark(oklch(49.1% 0.180 302.0), oklch(82.7% 0.100 299.5)); /* #753cb3 | #b07ffe */
+  --c-closed-noship: light-dark(oklch(60.8% 0.014 271.2), oklch(68.5% 0.059 274.3)); /* #80838c | #727ba1 */
+  --c-today: light-dark(oklch(48.0% 0.100 9.5), oklch(80.3% 0.115 10.3)); /* #8c4351 | #f7768e */
+  --c-danger: light-dark(oklch(47.9% 0.100 9.5), oklch(72.2% 0.159 10.3)); /* #8c4351 | #f7768e */
+  --c-bg: light-dark(oklch(92.9% 0.008 278.6), oklch(22.6% 0.021 280.5)); /* #e6e7ed | #1a1b26 */
+  --c-panel: light-dark(oklch(89.5% 0.010 273.3), oklch(28.2% 0.036 274.7)); /* #dadce3 | #24283b */
+  --c-panel-2: light-dark(oklch(86.2% 0.013 276.1), oklch(32.9% 0.046 276.8)); /* #cfd1da | #2f334d */
+  --c-border: light-dark(oklch(81.5% 0.007 277.1), oklch(30.6% 0.037 273.2)); /* #c1c2c7 | #292e42 */
+  --c-border-strong: light-dark(oklch(70.7% 0.016 273.8), oklch(38.7% 0.054 273.9)); /* #9da0ab | #3b4261 */
+  --c-text: light-dark(oklch(35.9% 0.051 273.2), oklch(84.6% 0.061 274.8)); /* #343b58 | #c0caf5 */
+  --c-dim: light-dark(oklch(49.0% 0.022 279.2), oklch(64.2% 0.059 274.3)); /* #5d5f6d | #818bb1 */
+  --c-dim-bright: light-dark(oklch(38.1% 0.035 276.4), oklch(74.8% 0.061 273.1)); /* #3d4155 | #a0abd5 */
+  --c-phase-worked: light-dark(oklch(55.0% 0.116 132.7), oklch(71.7% 0.139 130.1)); /* #598236 | #9ece6a */
+  --c-phase-review: light-dark(oklch(59.8% 0.091 222.1), oklch(68.0% 0.132 264.2)); /* #26809b | #7aa2f7 */
+  --c-phase-waiting: light-dark(oklch(74.0% 0.104 71.0), oklch(84.6% 0.106 75.4)); /* #dba664 | #e0af68 */
+  --c-phase-other: light-dark(oklch(74.0% 0.007 277.1), oklch(38.6% 0.037 273.2)); /* #c1c2c7 | #292e42 */
+  --c-accent: light-dark(oklch(47.6% 0.140 260.2), oklch(71.9% 0.132 264.2)); /* #2959aa | #7aa2f7 */
+  --c-epic: light-dark(oklch(51.1% 0.180 302.0), oklch(75.1% 0.150 299.5)); /* #7b43ba | #bd97ff */
+}

package/src/web/subgraph.ts

@@ -0,0 +1,362 @@
+// subgraph.ts — layout for the drawer's dependency graphs.
+//
+// Two pictures share one renderer (BeadSubGraph.vue):
+//
+// - a bead's NEIGHBOURHOOD: its transitive blockers and dependents out to a
+//   hop cap, one column per hop, the bead itself in the middle;
+// - an epic's CHILDREN: every bead whose parent is the epic, one column per
+//   dependency depth within that set. An epic carries parent/child edges,
+//   not blocks edges, so its own neighbourhood is almost always the epic
+//   alone — the structure worth seeing is which children block which
+//   (bp-67g.59).
+//
+// Pure, so both layouts can be asserted from node --test. Coordinates are
+// SVG user units; the renderer paints what comes back and nothing more.
+
+import type { Bead } from "./store";
+
+export type NodeRole = "root" | "upstream" | "downstream" | "member";
+
+export interface GraphNode {
+  id: string;
+  bead: Bead;
+  /**
+   * Neighbourhood: signed hop distance from the root, negative upstream.
+   * Children: depth — the longest chain of blockers above the node within
+   * the child set, so a node always sits right of everything that blocks it.
+   */
+  hop: number;
+  role: NodeRole;
+  x: number;
+  y: number;
+}
+
+export interface GraphEdge {
+  fromId: string;
+  toId: string;
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+
+export interface GraphLayout {
+  nodes: GraphNode[];
+  edges: GraphEdge[];
+  width: number;
+  height: number;
+}
+
+export interface GraphGeometry {
+  nodeW: number;
+  nodeH: number;
+  colGap: number;
+  rowGap: number;
+}
+
+export const GEOMETRY: GraphGeometry = {
+  nodeW: 130,
+  nodeH: 42,
+  colGap: 40,
+  rowGap: 10,
+};
+
+export const DEFAULT_MAX_HOPS = 4;
+
+export interface ChildrenLayoutOptions {
+  /**
+   * A child to mark as the focal node — the bead whose drawer is open when
+   * the epic-wide graph is shown from a child (bp-67g.60). It keeps the
+   * root role and so the root styling, so a zoom-out reads as a zoom-out
+   * rather than a change of subject.
+   */
+  focalId?: string;
+  /**
+   * How many isolated children sit side by side. One — a plain list — suits
+   * the drawer, which scrolls vertically for free and horizontally only
+   * inside the graph. A full-window view passes what fits its width, so
+   * forty unconnected children are a short grid rather than a long column.
+   */
+  isolatedColumns?: number;
+}
+
+interface Adjacency {
+  /** blocker → the beads it blocks */
+  outgoing: Map<string, string[]>;
+  /** bead → its blockers */
+  incoming: Map<string, string[]>;
+}
+
+/** blocks edges among `beads`; an edge whose far end is not in the set is dropped. */
+function blocksAdjacency(beads: readonly Bead[]): Adjacency {
+  const ids = new Set(beads.map((b) => b.id));
+  const outgoing = new Map<string, string[]>();
+  const incoming = new Map<string, string[]>();
+  for (const b of beads) {
+    for (const d of b.dependencies ?? []) {
+      if (d.type !== "blocks") continue;
+      if (!ids.has(d.depends_on_id)) continue;
+      push(outgoing, d.depends_on_id, b.id);
+      push(incoming, b.id, d.depends_on_id);
+    }
+  }
+  return { outgoing, incoming };
+}
+
+function push<K>(m: Map<K, string[]>, k: K, v: string): void {
+  const arr = m.get(k);
+  if (arr) arr.push(v);
+  else m.set(k, [v]);
+}
+
+const colX = (col: number, geo: GraphGeometry): number =>
+  col * (geo.nodeW + geo.colGap);
+
+const widthFor = (cols: number, geo: GraphGeometry): number =>
+  cols <= 0 ? 0 : (cols - 1) * (geo.nodeW + geo.colGap) + geo.nodeW;
+
+/**
+ * Edges between laid-out nodes only. An edge that fans beyond the visible
+ * set is skipped rather than drawn dangling. Blockers always sit left of
+ * what they block in both layouts, so every edge runs left to right.
+ */
+function edgesBetween(
+  nodes: readonly GraphNode[],
+  adj: Adjacency,
+  geo: GraphGeometry,
+): GraphEdge[] {
+  const byId = new Map(nodes.map((n) => [n.id, n] as const));
+  const edges: GraphEdge[] = [];
+  for (const from of nodes) {
+    for (const toId of adj.outgoing.get(from.id) ?? []) {
+      const to = byId.get(toId);
+      if (!to) continue;
+      edges.push({
+        fromId: from.id,
+        toId,
+        x1: from.x + geo.nodeW,
+        y1: from.y + geo.nodeH / 2,
+        x2: to.x,
+        y2: to.y + geo.nodeH / 2,
+      });
+    }
+  }
+  return edges;
+}
+
+/**
+ * The focal bead's transitive blockers (leftward) and dependents
+ * (rightward), each side capped at `maxHops`. Columns are hop distance;
+ * a bead reachable by more than one path keeps the hop furthest from the
+ * root on its side, so it lands beyond everything on the path to it.
+ */
+export function layoutNeighbourhood(
+  root: Bead,
+  beads: readonly Bead[],
+  maxHops: number = DEFAULT_MAX_HOPS,
+  geo: GraphGeometry = GEOMETRY,
+): GraphLayout {
+  const byId = new Map(beads.map((b) => [b.id, b] as const));
+  if (!byId.has(root.id)) byId.set(root.id, root);
+  const adj = blocksAdjacency([...byId.values()]);
+
+  const hopOf = new Map<string, number>();
+  hopOf.set(root.id, 0);
+  const upQueue: Array<[string, number]> = [[root.id, 0]];
+  while (upQueue.length) {
+    const [id, hop] = upQueue.shift()!;
+    if (hop <= -maxHops) continue;
+    for (const prev of adj.incoming.get(id) ?? []) {
+      const nextHop = hop - 1;
+      if (hopOf.has(prev) && hopOf.get(prev)! <= nextHop) continue;
+      hopOf.set(prev, nextHop);
+      upQueue.push([prev, nextHop]);
+    }
+  }
+  const downQueue: Array<[string, number]> = [[root.id, 0]];
+  while (downQueue.length) {
+    const [id, hop] = downQueue.shift()!;
+    if (hop >= maxHops) continue;
+    for (const next of adj.outgoing.get(id) ?? []) {
+      const nextHop = hop + 1;
+      if (hopOf.has(next) && hopOf.get(next)! >= nextHop) continue;
+      hopOf.set(next, nextHop);
+      downQueue.push([next, nextHop]);
+    }
+  }
+
+  const byHop = new Map<number, string[]>();
+  for (const [id, hop] of hopOf) push(byHop, hop, id);
+  const hopKeys = [...byHop.keys()].sort((a, b) => a - b);
+  const minHop = hopKeys[0] ?? 0;
+  const maxHop = hopKeys[hopKeys.length - 1] ?? 0;
+
+  const maxRowsInCol = Math.max(
+    ...hopKeys.map((h) => byHop.get(h)?.length ?? 0),
+    1,
+  );
+  const height = maxRowsInCol * (geo.nodeH + geo.rowGap) + geo.rowGap;
+
+  const nodes: GraphNode[] = [];
+  for (const hop of hopKeys) {
+    const items = (byHop.get(hop) ?? []).slice().sort();
+    const totalH = items.length * (geo.nodeH + geo.rowGap);
+    const startY = (height - totalH) / 2;
+    items.forEach((id, i) => {
+      const bead = byId.get(id);
+      if (!bead) return;
+      nodes.push({
+        id,
+        bead,
+        hop,
+        role: hop === 0 ? "root" : hop < 0 ? "upstream" : "downstream",
+        x: colX(hop - minHop, geo),
+        y: startY + i * (geo.nodeH + geo.rowGap),
+      });
+    });
+  }
+
+  return {
+    nodes,
+    edges: edgesBetween(nodes, adj, geo),
+    width: widthFor(maxHop - minHop + 1, geo),
+    height,
+  };
+}
+
+/**
+ * Every child of `epic`, laid out by dependency depth within the child set.
+ *
+ * There is no single root here: the children are a forest of chains plus
+ * isolated beads. Depth is the longest chain of in-set blockers above a
+ * node, so an edge never runs backwards. Connected components are stacked
+ * as separate bands — chains first, largest first — so two unrelated chains
+ * never interleave by depth alone. The isolated children collect below the
+ * chains, in id order, `isolatedColumns` to a row: unconnected is what they
+ * are, and with no edges among them a column carries no depth.
+ *
+ * Edges to beads outside the epic are not drawn: the picture is the epic's
+ * internal structure, and a child's outside blockers are one click away in
+ * its own neighbourhood.
+ */
+export function layoutChildren(
+  epic: Bead,
+  beads: readonly Bead[],
+  { isolatedColumns = 1, focalId }: ChildrenLayoutOptions = {},
+  geo: GraphGeometry = GEOMETRY,
+): GraphLayout {
+  const members = beads
+    .filter((b) => b.parent === epic.id)
+    .sort((a, b) => a.id.localeCompare(b.id));
+  if (!members.length) return { nodes: [], edges: [], width: 0, height: 0 };
+  const adj = blocksAdjacency(members);
+  const roleOf = (id: string): NodeRole => (id === focalId ? "root" : "member");
+
+  // Depth by memoised walk up the blockers. bd will record a dependency
+  // cycle if asked to, so a back edge is met by contributing nothing: the
+  // walk terminates and every member still lands in a column.
+  const depth = new Map<string, number>();
+  const visiting = new Set<string>();
+  const depthOf = (id: string): number => {
+    const known = depth.get(id);
+    if (known !== undefined) return known;
+    if (visiting.has(id)) return -1;
+    visiting.add(id);
+    let d = 0;
+    for (const blocker of adj.incoming.get(id) ?? []) {
+      d = Math.max(d, depthOf(blocker) + 1);
+    }
+    visiting.delete(id);
+    depth.set(id, d);
+    return d;
+  };
+  for (const m of members) depthOf(m.id);
+
+  // Connected components by union-find over the in-set edges.
+  const parent = new Map(members.map((m) => [m.id, m.id] as const));
+  const find = (x: string): string => {
+    while (parent.get(x) !== x) x = parent.get(x)!;
+    return x;
+  };
+  for (const [from, tos] of adj.outgoing) {
+    for (const to of tos) {
+      const a = find(from);
+      const b = find(to);
+      if (a !== b) parent.set(a, b);
+    }
+  }
+  const groups = new Map<string, Bead[]>();
+  for (const m of members) {
+    const key = find(m.id);
+    const g = groups.get(key);
+    if (g) g.push(m);
+    else groups.set(key, [m]);
+  }
+  // Members are id-sorted, so a component's first entry is its lowest id
+  // and the order is deterministic for equal sizes.
+  const components = [...groups.values()].sort(
+    (a, b) => b.length - a.length || a[0].id.localeCompare(b[0].id),
+  );
+  const chains = components.filter((c) => c.length > 1);
+  const isolated = components.filter((c) => c.length === 1).map((c) => c[0]);
+
+  const nodes: GraphNode[] = [];
+  const step = geo.nodeH + geo.rowGap;
+  let y = geo.rowGap;
+  let bandEnd = y;
+  let cols = 0;
+  chains.forEach((comp) => {
+    const byDepth = new Map<number, Bead[]>();
+    for (const b of comp) {
+      const d = depth.get(b.id)!;
+      const arr = byDepth.get(d);
+      if (arr) arr.push(b);
+      else byDepth.set(d, [b]);
+    }
+    const depths = [...byDepth.keys()].sort((a, b) => a - b);
+    const rows = Math.max(...depths.map((d) => byDepth.get(d)!.length));
+    const bandH = rows * step - geo.rowGap;
+    for (const d of depths) {
+      const items = byDepth.get(d)!;
+      const colH = items.length * step - geo.rowGap;
+      const startY = y + (bandH - colH) / 2;
+      items.forEach((b, i) => {
+        nodes.push({
+          id: b.id,
+          bead: b,
+          hop: d,
+          role: roleOf(b.id),
+          x: colX(d, geo),
+          y: startY + i * step,
+        });
+      });
+    }
+    cols = Math.max(cols, depths[depths.length - 1] + 1);
+    bandEnd = y + bandH;
+    y = bandEnd + geo.rowGap * 2; // a chain gets air around it
+  });
+
+  // The unconnected tail, as a grid under the chains.
+  const gridCols = Math.max(1, Math.floor(isolatedColumns));
+  isolated.forEach((b, i) => {
+    const col = i % gridCols;
+    const row = Math.floor(i / gridCols);
+    nodes.push({
+      id: b.id,
+      bead: b,
+      hop: 0,
+      role: roleOf(b.id),
+      x: colX(col, geo),
+      y: y + row * step,
+    });
+    bandEnd = y + row * step + geo.nodeH;
+  });
+  cols = Math.max(cols, Math.min(gridCols, isolated.length));
+
+  return {
+    nodes,
+    edges: edgesBetween(nodes, adj, geo),
+    width: widthFor(cols, geo),
+    height: bandEnd + geo.rowGap,
+  };
+}