/* The top bar. One file for the writeup pages and the config tool (app/src/main.tsx imports it), so the bar sits in
   exactly the same place on every page. Colours and fonts come from each page's own variables, which agree. */

/* a page too short to scroll keeps the scrollbar's room, so the bar does not shift sideways between pages */
html { scrollbar-gutter: stable; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(5, 4, 3, .92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-2);
  box-shadow: 0 1px 0 rgba(255, 113, 0, .25), 0 8px 24px rgba(0, 0, 0, .6);
  --out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M5 1.5H1.5v9h9V7M7 1h4v4M11 1 5.5 6.5'/%3E%3C/svg%3E");
}
.topbar .wrap {
  display: flex; align-items: center; gap: 22px; min-height: 54px; flex-wrap: wrap;
  max-width: var(--maxw, 1240px); margin: 0 auto; padding: 0 24px;
}
/* line heights are set here, not inherited: the pages' body text differs */
.topbar .mark {
  font-family: var(--caps); font-size: 13px; line-height: 20px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); text-decoration: none; border: none; text-shadow: 0 0 12px rgba(255, 113, 0, .45); white-space: nowrap;
}
.topbar .mark:hover { background: none; color: var(--accent-hot); }
.topbar .mark b { color: var(--fg); font-weight: 400; }
.topbar nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.topbar nav a {
  font-family: var(--caps); font-size: 10.5px; line-height: 16px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--fg-dim); padding: 9px 13px; border: none; border-bottom: 2px solid transparent;
}
.topbar nav a:hover { background: var(--accent); color: #000; }
.topbar nav a.here { color: var(--accent); border-bottom-color: var(--accent); }
.topbar nav a.here:hover { color: #000; }
/* the tool is the thing most visitors want: first, and framed. Inside the tool, the frame is faintly filled */
.topbar nav a.tool { color: var(--accent); border: 1px solid var(--accent); margin-right: 8px; }
.topbar nav a.tool.here { background: rgba(255, 113, 0, .14); }
.topbar nav a.tool:hover { background: var(--accent); color: #000; }
/* off-site links: an arrow out of a box, drawn rather than typed (arrow characters are missing from too many fonts) */
.topbar nav a.ext::after {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 6px; vertical-align: -1px; background: currentColor;
  -webkit-mask: var(--out) center / contain no-repeat; mask: var(--out) center / contain no-repeat;
}