/* Menu bar, the notes list, the topic pages and the footer. */

/* --- menu --- */
.menubar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px clamp(16px, 4vw, 44px);
  /* A plain tinted bar rather than a fade-out gradient: the page behind it is
     flat now, so there is nothing for a gradient to blend into. */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* --- breadcrumb ---
   The bar used to open with a wordmark that linked to the same place the
   "whoami" menu item did. It carries the trail now: kerem / notes / compilers
   / ast, each step up clickable, the last step being where you are. On the
   home page the trail is empty and only the name is left. */
.crumbs {
  display: flex;
  align-items: baseline;
  min-width: 0;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 13.5px;
}
/* user@host: fixed text, so it is the one part that may go when space runs out */
.crumbs__user {
  flex: none;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.crumbs__user:hover { color: var(--accent); }
.crumbs__colon { flex: none; color: var(--muted); }

.crumbs__trail { display: flex; align-items: baseline; min-width: 0; }
/* Slashes are punctuation — dimmer than the names they separate, so the path
   reads as words with gaps rather than as one long run of characters. */
.crumbs__sep { flex: none; color: color-mix(in srgb, var(--muted) 55%, transparent); }
/* The $ introduces a command rather than another path segment, so it takes the
   space a shell gives it. Path slashes deliberately have none. */
.crumbs__sep--run { margin: 0 .55ch 0 .15ch; }
/* the root slash is a link, so it keeps text contrast the separators do not need */
.crumbs__root { flex: none; color: var(--muted); text-decoration: none; padding-right: 1px; }
a.crumbs__root:hover { color: var(--ink); }
.crumbs__step {
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.crumbs__step:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* where you are: stated, not linked */
.crumbs__step--here { color: var(--ink); }

@media (max-width: 760px) {
  /* At its longest the prompt is 55 characters and would push the menu off the
     bar. A shell shortens the same way: drop user@host, keep the leaf. */
  .crumbs { font-size: 12.5px; }
  /* Only a path with depth needs the room: at / or /notes the whole prompt
     still fits beside the menu, so user@host gives way only once there is a
     separator to pay for. */
  .crumbs:has(.crumbs__sep) .crumbs__user,
  .crumbs:has(.crumbs__sep) .crumbs__colon { display: none; }
  .crumbs__trail .crumbs__step:not(.crumbs__step--here) { display: none; }
  /* the trail is root,step,sep,step,sep,step — the last separator is the one
     that still earns its place, and it is always :nth-last-child(2) */
  .crumbs__sep:not(:nth-last-child(2)) { display: none; }
  /* That surviving separator becomes the leading slash, so the root would be a
     second one. Where there is no separator (/notes, /graph, home) the root is
     the only slash there is and has to stay. */
  .crumbs__trail:has(.crumbs__sep) .crumbs__root { display: none; }
}

/* The menu never wraps and never shrinks: it is four fixed words, and a
   second row of them would double the height of a fixed bar. When space runs
   short the prompt gives way instead — it already ellipsises, and a clipped
   path is a far smaller loss than a menu that moves. */
.menu { display: flex; align-items: center; gap: 4px; flex: none; flex-wrap: nowrap; }
.menu__item {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: color .18s, background .18s;
}
.menu__item:hover { color: var(--ink); background: var(--panel); }
/* The search link is the one call to action in the bar, so it gets the accent
   and an outline instead of a second colour and a glow. No label: next to two
   words the magnifier is the thing you look for, and the word under it was
   saying the same thing twice. Named for screen readers instead. */
.menu__item--accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  color: var(--ink);
  border: 1px solid var(--line);
}
.menu__icon { width: 15px; height: 15px; flex: none; }
.menu__item--accent:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: transparent; }

.footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px 56px;
  margin-top: 40px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}

/* Reads as the footer line it replaced — same tone, no underline, no accent.
   The only thing that gives it away is the pointer, and then it lifts a shade,
   which is the point: findable by anyone who wonders, quiet to everyone else. */
.footer__anchor {
  color: inherit;
  text-decoration: none;
  transition: color .18s;
}
.footer__anchor:hover,
.footer__anchor:focus-visible { color: var(--ink-dim); }

/* --- view switching --- */
.view[hidden] { display: none; }

/* --- the notes page (augmentation-not-automation) ---
   Same frame as the topic pages, so every list view sits on the same margins.
   The .entries__* classes below are shared with them. */
.notespage {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  padding: 104px clamp(20px, 6vw, 72px) 40px;
  max-width: 940px;
  margin-inline: auto;
}
.notespage__hero { margin-bottom: 34px; }
.entries__head { margin-bottom: 26px; }
/* same scale as .catpage__title — this page is those pages' parent, not a lesser one */
/* Every page opens with the command that produced it — `whoami`, `ls ~/notes`,
   `tree ~/notes`. One definition, so all three are the same size, the same
   tone and the same tracking. They used to be 12px/40px/36px and muted/ink/ink,
   which is why they read as three unrelated things. The `$` shares the
   command's colour now as well; it was several shades darker than the text
   sitting next to it. It stays in CSS so it never lands in copied text. */
.cmd {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .12em;
  color: var(--muted);
}
.cmd::before { content: "$ "; }
.entries__note { color: var(--muted); font-size: 14px; margin: 8px 0 0; }

/* A row in the notes list. It is a rule-separated list, not a stack of cards:
   the topic colour appears only as a short marker on the left, and hovering
   tints the row instead of lifting and lighting it. */
.entry {
  --accent-topic: var(--accent);
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 16px 20px 20px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  border-radius: 8px;
  transition: background .18s;
}
.entry::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 2px;
  border-radius: 2px;
  background: var(--accent-topic);
  opacity: .7;
}
.entry--cyber { --accent-topic: var(--cyber); }
.entry--linux { --accent-topic: var(--tux); }
.entry--coding { --accent-topic: var(--code); }
.entry--compilers { --accent-topic: var(--comp); }
.entry--graph { --accent-topic: var(--muted); }
.entry:hover { background: var(--panel); }
.entry:hover .entry__go { color: var(--ink); }
.entry__idx { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.entry__body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.entry__name { font-size: clamp(18px, 2.4vw, 22px); font-weight: 600; color: var(--ink); }
.entry__desc { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.entry__go { font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; transition: color .18s; }

/* --- topic page --- */
.catpage {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  padding: 104px clamp(20px, 6vw, 72px) 40px;
  max-width: 1100px;
  margin-inline: auto;
}
.catpage__hero { margin-bottom: 34px; }
/* the per-page "◂ back" link is gone — the breadcrumb in the bar is the
   one way up now, and it says where up actually leads. */
.catpage__title { font-size: clamp(26px, 4.4vw, 40px); color: var(--ink); }
/* The heading's one mark. Same star on every topic — small, tinted with the
   topic hue and set back from the word, so it reads as punctuation rather than
   as a logo standing next to the title. */
.catpage__mark {
  color: var(--accent-topic, var(--muted));
  font-size: .5em;
  vertical-align: .32em;
  margin-right: .42em;
  opacity: .85;
}
/* The topic hue lands on the small label under the heading, not on the
   heading itself — a 40px word in colour is the loudest thing on a page. */
.catpage__title--cyber { --accent-topic: var(--cyber); }
.catpage__title--coding { --accent-topic: var(--code); }
.catpage__title--linux { --accent-topic: var(--tux); }
.catpage__title--compilers { --accent-topic: var(--comp); }
.catpage__sub { color: var(--muted); font-size: 14.5px; margin: 6px 0 0; max-width: 62ch; }
.catpage__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.catpage__warn { color: var(--tux); font-size: 13px; }
.catpage__empty { color: var(--muted); font-size: 13px; }

@media (max-width: 760px) {
  .entry__go { display: none; }
}

/* The profile card's column can overhang on narrow viewports. Clip
   horizontally so that never becomes page-wide scroll overflow. `clip` rather
   than `hidden`: it creates no scroll container, so the card's sticky
   positioning keeps resolving against the viewport. */
main { overflow-x: clip; }