1  /* straylight.css - Ono-Sendai Razorgirl (dark) / Maas Neoform (light)
  2   * Base16 color systems from hypermodern-emacs
  3   * 211° blue hue axis for monochrome discipline
  4   */
  5  
  6  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  7     RAZORGIRL (dark) - preserve strokes, L=8%
  8     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  9  
 10  .coal {
 11    /* Grayscale ramp - 211° blue tint */
 12    --base00: #111417; /* HSL(211° 17% 8%) - L=8% background */
 13    --base01: #181c21; /* HSL(211° 18% 11%) - raised surfaces */
 14    --base02: #21262d; /* HSL(211° 17% 15%) - selections */
 15    --base03: #2b323a; /* HSL(211° 16% 19%) - comments */
 16    --base04: #596775; /* HSL(211° 14% 41%) - dark foreground */
 17    --base05: #d8e0e7; /* HSL(211° 25% 88%) - default foreground */
 18    --base06: #ddf4ff; /* HSL(201° 100% 94%) - light foreground */
 19    --base07: #e6f7ff; /* HSL(201° 100% 96%) - lightest */
 20  
 21    /* Accent ramp - hero at #54aeff (211°) */
 22    --base08: #b6e3ff; /* HSL(201° 100% 86%) - ice blue, cool shift */
 23    --base09: #80ccff; /* HSL(201° 100% 75%) - sky blue */
 24    --base0A: #54aeff; /* HSL(211° 100% 66%) - HERO electric blue */
 25    --base0B: #218bff; /* HSL(211° 100% 57%) - deep blue */
 26    --base0C: #0969da; /* HSL(211° 94% 45%) - matrix blue */
 27    --base0D: #4d9fff; /* HSL(211° 100% 65%) - link blue */
 28    --base0E: #6cb6ff; /* HSL(211° 100% 71%) - soft electric */
 29    --base0F: #1f6feb; /* HSL(211° 86% 53%) - corp blue */
 30  
 31    /* Semantic mapping */
 32    --bg: var(--base00);
 33    --fg: var(--base05);
 34    --sidebar-bg: var(--base01);
 35    --sidebar-fg: var(--base05);
 36    --sidebar-non-existant: var(--base04);
 37    --sidebar-active: var(--base0A);
 38    --sidebar-spacer: var(--base02);
 39    --scrollbar: var(--base04);
 40    --icons: var(--base04);
 41    --icons-hover: var(--base05);
 42    --links: var(--base0D);
 43    --inline-code-color: var(--base0A);
 44    --theme-popup-bg: var(--base01);
 45    --theme-popup-border: var(--base02);
 46    --theme-hover: var(--base02);
 47    --quote-bg: var(--base01);
 48    --quote-border: var(--base02);
 49    --table-border-color: var(--base02);
 50    --table-header-bg: var(--base01);
 51    --table-alternate-bg: var(--base00);
 52    --searchbar-border-color: var(--base02);
 53    --searchbar-bg: var(--base01);
 54    --searchbar-fg: var(--base05);
 55    --searchbar-shadow-color: var(--base00);
 56    --searchresults-header-fg: var(--base05);
 57    --searchresults-border-color: var(--base02);
 58    --searchresults-li-bg: var(--base01);
 59    --search-mark-bg: var(--base09);
 60    --warning-border: var(--base08);
 61    --color-scheme: dark;
 62  }
 63  
 64  /* Syntax highlighting - Razorgirl dark */
 65  .coal .hljs {
 66    color: var(--base05);
 67    background: var(--base00);
 68  }
 69  .coal .hljs-keyword {
 70    color: var(--base0E);
 71  }
 72  .coal .hljs-built_in {
 73    color: var(--base08);
 74  }
 75  .coal .hljs-type {
 76    color: var(--base0A);
 77  }
 78  .coal .hljs-literal {
 79    color: var(--base09);
 80  }
 81  .coal .hljs-number {
 82    color: var(--base09);
 83  }
 84  .coal .hljs-operator {
 85    color: var(--base0E);
 86  }
 87  .coal .hljs-punctuation {
 88    color: var(--base04);
 89  }
 90  .coal .hljs-property {
 91    color: var(--base0A);
 92  }
 93  .coal .hljs-regexp {
 94    color: var(--base0B);
 95  }
 96  .coal .hljs-string {
 97    color: var(--base0B);
 98  }
 99  .coal .hljs-char.escape_ {
100    color: var(--base0B);
101  }
102  .coal .hljs-subst {
103    color: var(--base05);
104  }
105  .coal .hljs-symbol {
106    color: var(--base09);
107  }
108  .coal .hljs-variable {
109    color: var(--base08);
110  }
111  .coal .hljs-variable.language_ {
112    color: var(--base0E);
113  }
114  .coal .hljs-variable.constant_ {
115    color: var(--base09);
116  }
117  .coal .hljs-title {
118    color: var(--base0D);
119  }
120  .coal .hljs-title.class_ {
121    color: var(--base0A);
122  }
123  .coal .hljs-title.function_ {
124    color: var(--base0D);
125  }
126  .coal .hljs-params {
127    color: var(--base05);
128  }
129  .coal .hljs-comment {
130    color: var(--base03);
131    font-style: italic;
132  }
133  .coal .hljs-doctag {
134    color: var(--base0E);
135  }
136  .coal .hljs-meta {
137    color: var(--base0F);
138  }
139  .coal .hljs-section {
140    color: var(--base0A);
141  }
142  .coal .hljs-tag {
143    color: var(--base0B);
144  }
145  .coal .hljs-name {
146    color: var(--base0B);
147  }
148  .coal .hljs-attr {
149    color: var(--base0A);
150  }
151  .coal .hljs-attribute {
152    color: var(--base0B);
153  }
154  .coal .hljs-bullet {
155    color: var(--base09);
156  }
157  .coal .hljs-code {
158    color: var(--base0B);
159  }
160  .coal .hljs-emphasis {
161    color: var(--base08);
162    font-style: italic;
163  }
164  .coal .hljs-strong {
165    color: var(--base08);
166    font-weight: bold;
167  }
168  .coal .hljs-formula {
169    color: var(--base0B);
170  }
171  .coal .hljs-link {
172    color: var(--base0D);
173    text-decoration: underline;
174  }
175  .coal .hljs-quote {
176    color: var(--base03);
177    font-style: italic;
178  }
179  .coal .hljs-selector-tag {
180    color: var(--base0B);
181  }
182  .coal .hljs-selector-id {
183    color: var(--base0D);
184  }
185  .coal .hljs-selector-class {
186    color: var(--base0A);
187  }
188  .coal .hljs-selector-attr {
189    color: var(--base0A);
190  }
191  .coal .hljs-selector-pseudo {
192    color: var(--base0E);
193  }
194  .coal .hljs-template-tag {
195    color: var(--base0E);
196  }
197  .coal .hljs-template-variable {
198    color: var(--base08);
199  }
200  .coal .hljs-addition {
201    color: var(--base0B);
202    background-color: rgba(33, 139, 255, 0.1);
203  }
204  .coal .hljs-deletion {
205    color: var(--base08);
206    background-color: rgba(182, 227, 255, 0.1);
207  }
208  
209  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
210     NEOFORM (light) - paper white, slight blue, L=97%
211     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
212  
213  .light {
214    /* Grayscale ramp - 211° blue tint, inverted */
215    --base00: #f5f7fa; /* HSL(211° 28% 97%) - paper white */
216    --base01: #e8ecf2; /* HSL(211° 28% 93%) - raised surfaces */
217    --base02: #d4dbe6; /* HSL(211° 28% 87%) - selections */
218    --base03: #8896a8; /* HSL(211° 18% 60%) - comments */
219    --base04: #5c6b7d; /* HSL(211° 16% 43%) - dark foreground */
220    --base05: #2d3848; /* HSL(211° 26% 23%) - default foreground */
221    --base06: #1d2530; /* HSL(211° 28% 15%) - darker text */
222    --base07: #0f1318; /* HSL(211° 24% 8%) - darkest */
223  
224    /* Accent ramp - shifted darker for legibility */
225    --base08: #0550ae; /* HSL(211° 95% 35%) - deep blue */
226    --base09: #0969da; /* HSL(211° 94% 45%) - matrix blue */
227    --base0A: #1f6feb; /* HSL(211° 86% 53%) - hero shifted */
228    --base0B: #218bff; /* HSL(211° 100% 57%) - NEW HERO */
229    --base0C: #54aeff; /* HSL(211° 100% 66%) - support */
230    --base0D: #0550ae; /* HSL(211° 95% 35%) - functions */
231    --base0E: #0969da; /* HSL(211° 94% 45%) - keywords */
232    --base0F: #1b4b91; /* HSL(211° 70% 34%) - deprecated */
233  
234    /* Semantic mapping */
235    --bg: var(--base00);
236    --fg: var(--base05);
237    --sidebar-bg: var(--base01);
238    --sidebar-fg: var(--base05);
239    --sidebar-non-existant: var(--base03);
240    --sidebar-active: var(--base0B);
241    --sidebar-spacer: var(--base02);
242    --scrollbar: var(--base02);
243    --icons: var(--base03);
244    --icons-hover: var(--base05);
245    --links: var(--base0D);
246    --inline-code-color: var(--base0A);
247    --theme-popup-bg: var(--base00);
248    --theme-popup-border: var(--base02);
249    --theme-hover: var(--base01);
250    --quote-bg: var(--base01);
251    --quote-border: var(--base02);
252    --table-border-color: var(--base02);
253    --table-header-bg: var(--base01);
254    --table-alternate-bg: var(--base00);
255    --searchbar-border-color: var(--base02);
256    --searchbar-bg: var(--base01);
257    --searchbar-fg: var(--base05);
258    --searchbar-shadow-color: var(--base03);
259    --searchresults-header-fg: var(--base05);
260    --searchresults-border-color: var(--base02);
261    --searchresults-li-bg: var(--base00);
262    --search-mark-bg: var(--base09);
263    --warning-border: var(--base08);
264    --color-scheme: light;
265  }
266  
267  /* Syntax highlighting - Neoform light */
268  .light .hljs {
269    color: var(--base05);
270    background: var(--base00);
271  }
272  .light .hljs-keyword {
273    color: var(--base0E);
274  }
275  .light .hljs-built_in {
276    color: var(--base08);
277  }
278  .light .hljs-type {
279    color: var(--base0A);
280  }
281  .light .hljs-literal {
282    color: var(--base09);
283  }
284  .light .hljs-number {
285    color: var(--base09);
286  }
287  .light .hljs-operator {
288    color: var(--base0E);
289  }
290  .light .hljs-punctuation {
291    color: var(--base04);
292  }
293  .light .hljs-property {
294    color: var(--base0A);
295  }
296  .light .hljs-regexp {
297    color: var(--base0B);
298  }
299  .light .hljs-string {
300    color: var(--base0B);
301  }
302  .light .hljs-char.escape_ {
303    color: var(--base0B);
304  }
305  .light .hljs-subst {
306    color: var(--base05);
307  }
308  .light .hljs-symbol {
309    color: var(--base09);
310  }
311  .light .hljs-variable {
312    color: var(--base08);
313  }
314  .light .hljs-variable.language_ {
315    color: var(--base0E);
316  }
317  .light .hljs-variable.constant_ {
318    color: var(--base09);
319  }
320  .light .hljs-title {
321    color: var(--base0D);
322  }
323  .light .hljs-title.class_ {
324    color: var(--base0A);
325  }
326  .light .hljs-title.function_ {
327    color: var(--base0D);
328  }
329  .light .hljs-params {
330    color: var(--base05);
331  }
332  .light .hljs-comment {
333    color: var(--base03);
334    font-style: italic;
335  }
336  .light .hljs-doctag {
337    color: var(--base0E);
338  }
339  .light .hljs-meta {
340    color: var(--base0F);
341  }
342  .light .hljs-section {
343    color: var(--base0A);
344  }
345  .light .hljs-tag {
346    color: var(--base0B);
347  }
348  .light .hljs-name {
349    color: var(--base0B);
350  }
351  .light .hljs-attr {
352    color: var(--base0A);
353  }
354  .light .hljs-attribute {
355    color: var(--base0B);
356  }
357  .light .hljs-bullet {
358    color: var(--base09);
359  }
360  .light .hljs-code {
361    color: var(--base0B);
362  }
363  .light .hljs-emphasis {
364    color: var(--base08);
365    font-style: italic;
366  }
367  .light .hljs-strong {
368    color: var(--base08);
369    font-weight: bold;
370  }
371  .light .hljs-formula {
372    color: var(--base0B);
373  }
374  .light .hljs-link {
375    color: var(--base0D);
376    text-decoration: underline;
377  }
378  .light .hljs-quote {
379    color: var(--base03);
380    font-style: italic;
381  }
382  .light .hljs-selector-tag {
383    color: var(--base0B);
384  }
385  .light .hljs-selector-id {
386    color: var(--base0D);
387  }
388  .light .hljs-selector-class {
389    color: var(--base0A);
390  }
391  .light .hljs-selector-attr {
392    color: var(--base0A);
393  }
394  .light .hljs-selector-pseudo {
395    color: var(--base0E);
396  }
397  .light .hljs-template-tag {
398    color: var(--base0E);
399  }
400  .light .hljs-template-variable {
401    color: var(--base08);
402  }
403  .light .hljs-addition {
404    color: var(--base0B);
405    background-color: rgba(33, 139, 255, 0.1);
406  }
407  .light .hljs-deletion {
408    color: var(--base08);
409    background-color: rgba(5, 80, 174, 0.1);
410  }
411  
412  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
413     CONTENT WIDTH - Use the damn screen
414     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
415  
416  /* Override mdBook's tiny default max-width */
417  :root {
418    --content-max-width: 900px;
419  }
420  
421  /* mdBook's .content is the main content wrapper, it should respect the sidebar */
422  .page-wrapper > .content {
423    max-width: var(--content-max-width);
424  }
425  
426  .page-wrapper > .content > main {
427    max-width: 100%;
428  }
429  
430  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
431     SIDEBAR FIXES - Kill the pop
432     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
433  
434  /* Disable all sidebar transitions and animations */
435  .sidebar,
436  .sidebar-hidden,
437  .sidebar-visible,
438  #sidebar,
439  .sidebar-resize-handle {
440    transition: none !important;
441    animation: none !important;
442  }
443  
444  /* Force sidebar to stay visible and stable */
445  .sidebar {
446    position: fixed !important;
447    left: 0 !important;
448    transform: none !important;
449  }
450  
451  /* Prevent sidebar toggle from causing layout shifts */
452  .sidebar-hidden .sidebar {
453    left: 0 !important;
454    transform: none !important;
455  }
456  
457  /* Disable folding animations */
458  .chapter li.expanded,
459  .chapter li.collapsed {
460    transition: none !important;
461  }
462  
463  /* Kill any transform transitions on the main content */
464  .content {
465    transition: none !important;
466    transform: none !important;
467  }
468  
469  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
470     RESPONSIVE / NARROW VIEWPORT FIXES
471     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
472  
473  /* Fix the page wrapper to not have fixed max-width that cuts off content */
474  .page-wrapper {
475    box-sizing: border-box;
476  }
477  
478  /* On narrow viewports, ensure content is readable */
479  @media (max-width: 1080px) {
480    /* mdBook hides sidebar at this breakpoint - ensure content fills the space */
481    .page-wrapper {
482      padding-left: 0 !important;
483    }
484  
485    /* Give main content proper padding when sidebar is hidden */
486    .content {
487      padding: 0 1.5rem !important;
488      max-width: 100% !important;
489      margin: 0 auto !important;
490    }
491  
492    main {
493      margin-left: 0 !important;
494      padding: 1.5rem !important;
495      max-width: 100% !important;
496    }
497  
498    /* Ensure code blocks don't overflow */
499    pre {
500      overflow-x: auto !important;
501      max-width: calc(100vw - 3rem) !important;
502    }
503  
504    /* Tables should scroll horizontally */
505    table {
506      display: block;
507      overflow-x: auto;
508      max-width: calc(100vw - 3rem);
509    }
510  
511    /* The sidebar hidden state shouldn't affect content position */
512    .sidebar-hidden .page-wrapper {
513      transform: none !important;
514    }
515  }
516  
517  /* Even narrower - phone-sized */
518  @media (max-width: 600px) {
519    .content {
520      padding: 0 0.5rem !important;
521    }
522  
523    main {
524      padding: 0.5rem !important;
525    }
526  
527    /* Reduce heading sizes on mobile */
528    h1 {
529      font-size: 1.5rem !important;
530    }
531  
532    h2 {
533      font-size: 1.25rem !important;
534    }
535  
536    h3 {
537      font-size: 1.1rem !important;
538    }
539  
540    /* Code blocks need smaller font on mobile */
541    pre code {
542      font-size: 0.8rem !important;
543    }
544  
545    /* Inline code wrapping */
546    code {
547      word-break: break-word;
548    }
549  }
550  
551  /* Make the menu button more visible on narrow screens */
552  @media (max-width: 1080px) {
553    .menu-title {
554      font-size: 1rem;
555    }
556  
557    /* Ensure the hamburger menu is easily tappable */
558    #menu-bar-hover-placeholder,
559    .menu-bar {
560      min-height: 48px;
561    }
562  
563    .icon-button {
564      padding: 0.75rem !important;
565    }
566  
567    /* When sidebar is shown as overlay, make it usable */
568    .sidebar-visible .sidebar {
569      box-shadow: 4px 0 10px rgba(0, 0, 0, 0.3);
570      z-index: 1000;
571    }
572  }
573  
574  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
575     NIXDOC / API REFERENCE SPECIFIC STYLES
576     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
577  
578  /* Function definitions in API docs */
579  .content h2 code {
580    font-size: 1.1rem;
581    background: var(--quote-bg);
582    padding: 0.25rem 0.5rem;
583    border-radius: 4px;
584  }
585  
586  /* Type signatures in API docs */
587  .content h3 + pre {
588    margin-top: 0.5rem;
589    border-left: 3px solid var(--sidebar-active);
590  }
591  
592  /* Arguments list styling */
593  .content dl {
594    margin: 1rem 0;
595    padding-left: 1rem;
596    border-left: 2px solid var(--sidebar-spacer);
597  }
598  
599  .content dt {
600    font-family: "JetBrains Mono", monospace;
601    font-weight: 600;
602    color: var(--inline-code-color);
603    margin-top: 0.5rem;
604  }
605  
606  .content dd {
607    margin-left: 0;
608    margin-bottom: 0.5rem;
609    color: var(--fg);
610  }
611  
612  /* Example blocks */
613  .content .example {
614    background: var(--quote-bg);
615    border: 1px solid var(--quote-border);
616    border-radius: 4px;
617    padding: 1rem;
618    margin: 1rem 0;
619  }
620  
621  /* Make function anchors more visible */
622  .content h2[id^="function-library"] {
623    padding-top: 1rem;
624    margin-top: 2rem;
625    border-top: 1px solid var(--sidebar-spacer);
626  }
627  
628  .content h2[id^="function-library"]:first-of-type {
629    border-top: none;
630    margin-top: 0;
631  }