/*
 * Dusk Labs. A terminal-flavored dashboard: a status bar on top, a help bar at the bottom,
 * and bordered panes in a responsive grid. Horizontal spacing is in ch, vertical spacing is in lh.
 *
 * Colors work like Solarized: neutral base tones for the page and text, and muted accent tones
 * that keep the Dusk palette hues. Each pane takes one accent, so the page is not monochrome.
 * All tones are derived from the Dusk palette (dusk-labs-palette.png) by reducing chroma in OKLCH
 * and setting lightness for contrast: accents are at least 4.5:1 in both modes.
 */

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The page follows the system color scheme. The theme toggle in the status bar flips it. */
  color-scheme: light dark;

  /* Base tones, as light-dark(light, dark). Light: tan parchment. Dark: warm dark gray, with the light tones mixed toward it. */
  --bg: light-dark(#e5d7c0, #1d1914);
  --hi: light-dark(#daccb5, #27221d);
  --line: light-dark(#c7b9a2, #342f2a);
  --strong: light-dark(#393945, #a39e95);
  --text: light-dark(#42424c, #98929c);
  --secondary: light-dark(#584e57, #928a9a);
  --meta: light-dark(#5d565c, #8c8796);

  /* Accent tones for text and borders. */
  --amber: light-dark(#755a3c, #9f7b50);
  --blue: light-dark(#575e78, #7780a4);
  --rose: light-dark(#76575c, #a1777e);
  --clay: light-dark(#76584a, #a17965);

  /* Fill tones for solid blocks. They carry Midnight Ink text (6:1 or more) in both themes. */
  --ink: #15132b;
  --fill-amber: light-dark(#cfb291, #b69066);
  --fill-rose: light-dark(#d0adb2, #b78b92);
  --fill-blue: light-dark(#aeb6d3, #8d97bb);

  --rule: 2px;

  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }

body { display: flex; flex-direction: column; min-height: 100svh; margin: 0; }
h1, h2, h3, p, ul, ol, table { margin: 0; padding: 0; font: inherit; }
ul, ol { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
::selection { background: var(--fill-rose); color: var(--ink); }

.skip-link { position: absolute; z-index: 10; top: -10lh; left: 1ch; padding: 0 1ch; background: var(--fill-amber); color: var(--ink); }
.skip-link:focus { top: 0; }

.secondary { color: var(--secondary); }

/* Status bar (top) and help bar (bottom) */

.statusbar, .helpbar { position: sticky; z-index: 5; display: flex; white-space: nowrap; background: var(--hi); }
.statusbar { top: 0; border-bottom: var(--rule) solid var(--line); }
.statusbar a { text-decoration: none; }
.seg { padding: .25lh 1.5ch; }
.seg-brand { background: var(--fill-amber); color: var(--ink); font-weight: 800; letter-spacing: .04em; }
/* The Dusk Labs mark: a pixel D on a 5x5 grid with one amber pixel in the middle. */
.seg-logo { display: flex; align-items: center; }
.seg-logo svg { width: 1em; height: 1em; }
.logo-d { fill: var(--strong); }
.logo-dot { fill: var(--amber); }

/* Theme toggle. theme.js sets data-theme from the saved choice. Without it, the page follows the system color scheme. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.seg-theme { margin-left: auto; border: 0; background: none; color: var(--secondary); font: inherit; cursor: pointer; }
.seg-theme:hover { color: var(--strong); }
.seg-theme:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.helpbar { bottom: 0; justify-content: flex-end; padding: .25lh 1.5ch; border-top: var(--rule) solid var(--line); color: var(--meta); }
.helpbar .sep { margin-inline: 1ch; }
.helpbar a { color: var(--secondary); text-decoration: none; }
.helpbar a:hover { color: var(--strong); }

/* Dashboard grid: one, two, or three columns of panes. */

.app {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "hero" "blog" "work";
  gap: 2.5lh 3ch;
  align-content: start;
  width: min(100% - 4ch, 200ch);
  margin: 2.5lh auto;
}

@media (min-width: 78rem) {
  .app {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "hero blog" "work work" "banner banner";
  }
}

/* Each pane takes one accent hue from the palette. */
.hero { grid-area: hero; --pane: var(--amber); --pane-fill: var(--fill-amber); }
.blog { grid-area: blog; --pane: var(--blue); --pane-fill: var(--fill-blue); }
.work { grid-area: work; --pane: var(--rose); --pane-fill: var(--fill-rose); }
.lost .pane { --pane: var(--clay); --pane-fill: var(--fill-amber); }

/* Pane: a thick bordered box with its title set into the top border. */

.pane {
  position: relative;
  display: grid;
  gap: 1lh;
  align-content: start;
  padding: 2lh 3ch 1.5lh;
  border: var(--rule) solid color-mix(in oklab, var(--pane) 45%, var(--bg));
  scroll-margin-top: 3lh;
  transition: border-color .15s;
}
.pane:hover, .pane:focus-within { border-color: var(--pane); }
.pane-head {
  position: absolute;
  top: calc(-.5lh - var(--rule) / 2);
  left: 2ch;
  right: 2ch;
  display: flex;
  align-items: center;
  font-size: 1.125rem;
  pointer-events: none;
}
.pane-head > * { padding-inline: 1ch; background: var(--bg); white-space: nowrap; }
.pane-title { flex: none; display: flex; align-items: center; gap: 1ch; color: var(--pane); font-weight: 800; }
.pane-title .key { padding-inline: .75ch; background: var(--pane-fill); color: var(--ink); font-size: .875rem; font-weight: 700; }
.pane-foot { margin: .5lh -3ch 0; padding: 1lh 3ch 0; border-top: var(--rule) dashed var(--line); color: var(--secondary); }
.pane-foot a { color: var(--pane); }

/* Hero */

/* When the hero shares a row with a taller pane, the copy stays at the top and the button moves to the bottom. */
.hero { align-content: space-between; }
.hero p { font-size: 1.0625rem; }

/* Buttons */

.buttons { display: flex; flex-wrap: wrap; gap: 1lh 2ch; margin-top: 1lh; }
.button { padding: .4lh 2.5ch; background: var(--hi); color: var(--strong); font-weight: 700; text-decoration: none; }
.button.primary { background: var(--pane-fill); color: var(--ink); }
.button:hover, .button:focus-visible { background: var(--strong); color: var(--bg); outline: none; }

/* List: the first item is selected until another item is hovered.
   One, two, or four columns, so the four items always fill complete rows. */

.list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5lh 4ch; }
@media (min-width: 48rem) { .list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 110rem) { .list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.list li { padding-left: 2ch; border-left: 3px solid var(--pane); }
.list .title { display: block; color: var(--pane); font-size: 1.0625rem; font-weight: 800; }
.list .desc { display: block; color: var(--secondary); }

/* Banner: the Dusk Labs wordmark in flat block letters at the bottom of the wide layout, where the panes leave empty space.
   It is SVG text, and textLength stretches each row to the full width, so it fills the grid exactly at any size. */

.banner {
  grid-area: banner;
  display: none;
  align-self: end;
  /* Pressed-in look: letters a shade darker than the page, with shaded edges from the #emboss filter. */
  --emboss: light-dark(color-mix(in oklab, var(--bg), black 9%), color-mix(in oklab, var(--bg), black 12%));
  --emboss-shade: light-dark(color-mix(in oklab, var(--bg), black 25%), color-mix(in oklab, var(--bg), black 45%));
  --emboss-light: light-dark(color-mix(in oklab, var(--bg), white 45%), color-mix(in oklab, var(--bg), white 12%));
}
@media (min-width: 78rem) { .banner { display: block; } }
.banner svg { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.banner text { fill: var(--emboss); white-space: pre; }
.emboss-shade { flood-color: var(--emboss-shade); }
.emboss-light { flood-color: var(--emboss-light); }

/* Not found */

.lost { flex: 1; display: grid; place-content: center; padding: 2lh 2ch; }
.lost .pane { width: min(60ch, 100vw - 4ch); border-color: var(--pane); }
.lost h1 { color: var(--strong); font-size: clamp(1.75rem, 1rem + 3vw, 2.75rem); font-weight: 800; letter-spacing: -.03em; }

@media (max-width: 40rem) {
  .app { width: calc(100% - 2ch); }
  .pane { padding-inline: 1.5ch; }
  .pane-head { left: 1ch; right: 1ch; }
  .pane-foot { margin-inline: -1.5ch; padding-inline: 1.5ch; }
  .seg { padding-inline: 1ch; }
  .helpbar { position: static; flex-wrap: wrap; white-space: normal; }
}