/* =========================================================
   2 the nines: styles
   ========================================================= */

/* ---------- 1. Font: JetBrains Mono, hosted with the site ---------- */

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Colors: one set of names, two modes ---------- */

/* Dark is the default (and the fallback if JavaScript is off) */
:root {
  --bg: #101012;
  --fg: #F9F9FA;
  --hover: #9C9C9D;   /* 6.93:1 on --bg */
  --rule: #565657;
  color-scheme: dark;
}

/* Light. The script in the page <head> always sets data-mode on <html>,
   from the reader's saved choice or their device setting, so each light
   color is written in exactly one place. */
:root[data-mode="light"] {
  --bg: #F9F9FA;
  --fg: #101012;
  --hover: #565657;   /* 6.97:1 on --bg */
  --rule: #9C9C9D;
  color-scheme: light;
}

/* ---------- 3. Base ---------- */

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

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
}

body {
  display: flex;
  flex-direction: column;
  height: 100dvh;           /* exactly one screen tall: the columns scroll, not the page */
  overflow: hidden;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.45;
  text-transform: uppercase;
}

a, button {
  color: inherit;
  text-decoration: none;
  font: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Grey only on hover or keyboard focus: it signals "interactive" */
a:hover, button:hover,
a:focus-visible, button:focus-visible {
  color: var(--hover);
  outline: none;
}
/* Keyboard users also get an underline, so focus never relies on color alone */
a:focus-visible, button:focus-visible { text-decoration: underline; }

/* ---------- 4. Header (pinned by layout: it never scrolls) ---------- */

.bar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 32px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--rule);
}
.path { flex: 1 1 240px; }
.links { display: flex; flex-wrap: wrap; gap: 24px; align-items: baseline; }

/* Toggle: the ■ stays filled; like every link, the whole button turns grey on hover */

/* ---------- 5. The split: fixed index, entry takes the rest ---------- */

.split {
  flex: 1 1 auto;
  min-height: 0;            /* lets the two columns scroll inside the screen */
  display: flex;
}

.index, .entry {
  overflow-y: auto;
  scrollbar-width: none;    /* hide scrollbars: Firefox */
}
.index::-webkit-scrollbar,
.entry::-webkit-scrollbar { display: none; }   /* hide scrollbars: Safari, Chrome */

.index {
  flex: 0 0 440px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rule);
}

/* ---------- 6. Index rows ----------
   Each row the build script writes looks like this:
   <a class="row" href="/2027/05/038/">
     <span class="tree">│  ├─ 038</span>
     <span class="num">038</span>
     <span class="title">TITLE<span class="sub">REFLECTION · 2027.05.18</span></span>
     <span class="type">REFLECTION</span>
     <span class="day">18</span>
   </a>
*/

.row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 80px 20px;
  gap: 12px;
  padding: 5px 24px;
}
.row--head {
  padding: 14px 24px 10px;
  border-bottom: 1px solid var(--rule);   /* separates the column titles from the directory */
  margin-bottom: 6px;

  /* Pinned: stays at the top of the index while the folders scroll beneath it */
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);                   /* covers the rows passing underneath */
}
.tree { white-space: pre; }          /* keeps the ├─ └─ lines aligned */
.num, .sub { display: none; }        /* phone-only parts of each row */

/* Year and month folders: <details> opens and closes them, no JavaScript needed */
.dir {
  display: flex;
  gap: 12px;
  padding: 10px 24px 4px;
  list-style: none;                  /* hide the browser's own triangle */
  cursor: pointer;
}
.dir::-webkit-details-marker { display: none; }
.dir > span:first-child { white-space: pre; }
.dir:hover { color: var(--hover); }
.dir:focus-visible { color: var(--hover); text-decoration: underline; outline: none; }

/* ▸ when closed, ▾ when open; the entry count only shows while closed */
.dir > span:first-child::after { content: " ▸"; }
.folder[open] > .dir > span:first-child::after { content: " ▾"; }
.folder[open] > .dir > .folder-count { display: none; }

/* The open entry: inverted bar */
.row[aria-current="page"] {
  background: var(--fg);
  color: var(--bg);
}
.row[aria-current="page"]:hover { color: var(--bg); }

.end { margin: 0; padding: 28px 24px 40px; }

/* Footer: pinned to the bottom across the whole page, mirroring the header */
.foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 32px;
  padding: 14px 24px;
  border-top: 1px solid var(--rule);
}
.copy { margin-left: auto; }   /* copyright sits at the far right */

/* ---------- 7. Entry ---------- */

.entry {
  flex: 1 1 auto;
  min-width: 0;
  padding: 40px 64px 96px;

  /* Body text grows with the pane (about 75 characters per line), from 15px up to 22px */
  --body: clamp(15px, calc((100vw - 568px) / 45), 22px);
  font-size: var(--body);
}

/* Every block in the entry shares one width: full pane, up to a ceiling of ~100 characters at 22px */
.entry > * {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

.meta {
  font-size: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}

.entry h1 {
  margin-top: 24px;
  margin-bottom: 24px;
  font-size: clamp(28px, calc(var(--body) * 1.45), 32px);
  line-height: 1.2;
  font-weight: 500;
}

.entry p {
  margin-top: 0;
  margin-bottom: 1.4em;
  font-weight: 400;
  text-transform: none;
  line-height: 1.65;
}

.entry figure { margin-top: 0.6em; margin-bottom: 2em; font-size: 12px; }
.entry img { display: block; width: 100%; height: auto; }
.entry figcaption { margin-top: 8px; }

.pager {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
}

.back { display: none; }    /* phone only */

/* ---------- 8. Phones and narrow windows ---------- */

@media (max-width: 820px) {
  .bar { gap: 0; padding: 0; }
  .wordmark, .toggle { padding: 16px; }
  .bar { justify-content: space-between; align-items: center; }
  .links > :not(.toggle) { display: none; }   /* keep only the toggle */
  .path {
    order: 3;
    flex: 1 0 100%;
    padding: 10px 16px;
    border-top: 1px solid var(--rule);
  }

  .index { flex: 1 1 100%; border-right: 0; }
  .row { grid-template-columns: 44px minmax(0, 1fr) 16px; padding: 8px 16px; min-height: 44px; }
  .row::after { content: "→"; }               /* touch cue: no hover on phones */
  .row--head { display: none; }
  .tree, .type, .day { display: none; }      /* on phones: number, title, then type and date underneath */
  .num { display: block; }
  .sub { display: block; margin-top: 2px; }

  .entry { display: none; padding: 20px 16px 48px; --body: 15px; }
  .entry h1 { font-size: 22px; }
  .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Footer on phones: compact, and only on the index screen to save reading space */
  .foot { gap: 6px 20px; padding: 12px 16px; }
  .foot > :first-child { display: none; }       /* drop {REACH ME} */
  .copy { margin-left: 0; }
  .is-reading .foot { display: none; }

  /* Reading an entry: app.js adds .is-reading to <body> */
  .is-reading .index { display: none; }
  .is-reading .entry { display: block; }
  .is-reading .back { display: block; padding: 0 0 16px; font-size: 12px; text-transform: uppercase; }
}