/* ==========================================================================
   nag.sh front page — tmux-powerline theme
   --------------------------------------------------------------------------
   Low graphics: rules, hard separators and box-drawing borders only. No
   images, no shadows, no gradients. One accent (lime) on near-black, the
   palette start.nag.sh and the start page already use.

   Layout owned here:
     1. status line (replaces the docs header)
     2. panes + box-drawing borders
     3. overlays: key table (C-b ?), clock (C-b t), app picker (C-b a)
     4. copy mode / zoom
   ========================================================================== */

/* The status prompt and the empty-state note are toggled with the `hidden`
   attribute. An author `display: flex` on the same element outranks the UA
   `[hidden] { display: none }` rule, so state it here rather than relying on
   the default. */
[hidden] { display: none !important; }

:root {
  --tmux-bg:      #0b0d12;
  --tmux-surface: #12141c;
  --tmux-lime:    #9ece6a;
  --tmux-dim:     #94a3b8;
  --tmux-faint:   #3b4252;
  --tmux-blue:    #7aa2f7;
  --tmux-amber:   #e0af68;
  --tmux-mono: ui-monospace, "JetBrains Mono", "Fira Code", "SFMono-Regular",
               Menlo, Consolas, "Liberation Mono", monospace;
}

/* The root size is stated here, not inherited from mkdocs-material: Material
   sets 125% and this stylesheet is the only one loaded on ALL three surfaces
   (the members shell replaces Material's stylesheet, the LAN mirror does not
   carry it), so without this the same page renders 25% smaller on two of the
   three. */
html { font-size: 125%; }

/* --- 1. Material chrome: keep it, hide it. ------------------------------- */
/* The status line replaces all of it; hiding beats removing so the docs
   theme's own machinery (search, palette, progress) keeps working. */
.md-header,
.md-tabs,
.md-sidebar,
.md-footer,
.md-top,
.md-search__overlay,
.md-dialog {
  display: none !important;
}

/* The drawer/search toggles are a different case: they are REAL focusable form
   controls that Material emits outside every Jinja block, so no template can
   drop them and this site has no drawer or search for them to drive. They are
   removed from the markup by hooks/post_build.py; hidden here as well, because
   the boxes only become visible when Material's own CSS is missing — which is
   exactly the case on the members shell (it replaces {% block styles %}) and on
   the LAN mirror (it does not carry the hashed theme CSS at all). */
.md-toggle,
.md-overlay {
  display: none !important;
}

.md-main__inner,
.md-content {
  margin: 0 !important;
  max-width: none !important;
}

.md-content__inner {
  margin: 0 auto !important;
  /* No bottom padding: the body already reserves the space the fixed message
     line sits in, and a second reservation just adds a strip of scroll. */
  padding: 0 1.25rem !important;
  max-width: 62rem;
}

body {
  /* Material's reset is not always loaded either (see above): without this the
     LAN copy keeps the browser's 8px body margin, and — because the global
     `box-sizing: border-box` is missing too — `min-height: 100dvh` is measured
     on the content box, so the body ends up a padding taller than the viewport
     and the page gains a scrollbar it does not need. */
  margin: 0;
  box-sizing: border-box;
  background: var(--tmux-bg);
  color: #d7dce5;
  font-family: var(--tmux-mono);
  /* Room for the fixed message line at the bottom. */
  padding-bottom: 2rem;
}

.md-typeset {
  font-family: var(--tmux-mono);
  font-size: 0.82rem;
  line-height: 1.65;
}

.md-typeset a { color: var(--tmux-blue); }
.md-typeset a:hover { color: var(--tmux-lime); }
.md-typeset h1, .md-typeset h2, .md-typeset h3 { font-family: var(--tmux-mono); }
.md-typeset h1 { color: var(--tmux-lime); font-weight: 600; letter-spacing: -0.01em; }
.md-typeset h2 { color: var(--tmux-lime); font-weight: 600; }
.md-typeset h2::before { content: "\2500\2500 "; color: var(--tmux-faint); }
.md-typeset code {
  background: var(--tmux-surface);
  color: var(--tmux-lime);
  font-family: var(--tmux-mono);
}

/* --- 2. Status line ------------------------------------------------------ */
/* Three regions, nothing else: the brand, the window list, and the identity
   slot pinned to the right edge. The window list scrolls on a narrow screen
   (`.tmux-wins` below) and `margin-left: auto` on the right cluster is what
   keeps [Login] reachable there — no absolute pinning, no reserved gutter. */
.tmux-status {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  isolation: isolate;
  align-items: stretch;
  gap: 0;
  min-height: 1.9rem;
  background: #0e1017;
  border-bottom: 1px solid var(--tmux-lime);
  font-family: var(--tmux-mono);
  font-size: 0.76rem;
  line-height: 1.9rem;
  white-space: nowrap;
}

.tmux-brand {
  padding: 0 0.7rem;
  background: var(--tmux-lime);
  color: var(--tmux-bg);
  font-weight: 700;
}
/* The brand is the first thing to give up its width, the way tmux truncates
   status-left: on a narrow screen the wordmark collapses to [n] and the window
   list keeps the room. Only one of the two spans is ever rendered, so the lime
   block shrinks with the text instead of leaving a padded empty box. */
.tmux-brand-short { display: none; }
@media (max-width: 560px) {
  .tmux-brand-full { display: none; }
  .tmux-brand-short { display: inline; }
}

.tmux-wins {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
}
.tmux-wins::-webkit-scrollbar { display: none; }
.tmux-win {
  padding: 0 0.6rem;
  color: var(--tmux-dim);
  text-decoration: none;
  border-right: 1px solid var(--tmux-faint);
}
.tmux-win:hover { color: var(--tmux-lime); }
.tmux-win:focus-visible { outline: 2px solid var(--tmux-blue); outline-offset: -2px; }
/* tmux marks the attached window with an asterisk; we invert it. The state is
   the link's own `aria-current`, set by the key-binding layer (and by nothing
   else), so the highlight and what a screen reader announces cannot disagree. */
.tmux-win[aria-current="true"] {
  background: var(--tmux-lime);
  color: var(--tmux-bg);
  font-weight: 700;
}
.tmux-win[aria-current="true"]::after { content: "*"; }

.tmux-modes { display: flex; align-items: stretch; }
.tmux-tag {
  padding: 0 0.5rem;
  background: var(--tmux-amber);
  color: var(--tmux-bg);
  font-weight: 700;
  margin-left: 1px;
}

/* Prefix armed: the whole left block turns lime, like tmux's status-bg. */
.tmux-status.is-prefix { background: #131a12; border-bottom-color: var(--tmux-lime); }
.tmux-status.is-prefix .tmux-brand { background: var(--tmux-lime); color: var(--tmux-bg); }

.tmux-prompt { display: inline-flex; align-items: center; padding: 0 0.5rem; }
.tmux-prompt input {
  background: var(--tmux-bg);
  border: 1px solid var(--tmux-lime);
  color: var(--tmux-lime);
  font-family: var(--tmux-mono);
  font-size: 0.76rem;
  padding: 0 0.4rem;
  height: 1.4rem;
  width: 12rem;
}
.tmux-prompt input:focus { outline: 1px solid var(--tmux-blue); }

/* The identity slot: pinned right by `margin-left: auto`, so it holds the right
   edge whatever the window list does. */
.tmux-status-right {
  margin-left: auto;
  display: flex;
  align-items: stretch;
  background: #0e1017;
  border-left: 1px solid var(--tmux-faint);
}
.tmux-status.is-prefix .tmux-status-right { background: #131a12; }

.tmux-login {
  padding: 0 0.7rem;
  background: var(--tmux-blue);
  color: var(--tmux-bg) !important;
  font-weight: 700;
  text-decoration: none;
}
.tmux-login:hover { background: var(--tmux-lime); }
.tmux-login.is-signed-in { background: transparent; color: var(--tmux-lime) !important; font-weight: 400; }

/* The message line: tmux's status message, pinned to the viewport bottom. */
.tmux-message {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  margin: 0;
  padding: 0 0.7rem;
  min-height: 1.5rem;
  line-height: 1.5rem;
  background: #0e1017;
  border-top: 1px solid var(--tmux-faint);
  color: var(--tmux-lime);
  font-family: var(--tmux-mono);
  font-size: 0.74rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tmux-message:empty { color: transparent; }

.tmux-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- 3. Panes ------------------------------------------------------------ */
.tmux-panes { padding-top: 1rem; }

.tmux-pane {
  position: relative;
  /* Stated here rather than inherited: mkdocs-material sets border-box, and
     this site's own stylesheet is the only one that loads on every surface
     (the members shell replaces Material's stylesheet, and the LAN mirror does
     not carry it). Without this the same pane would be ~2rem taller on two of
     the three and the viewport-height math below would only be true on one. */
  box-sizing: border-box;
  border: 1px solid var(--tmux-faint);
  background: var(--tmux-surface);
  margin: 0 0 1.1rem;
  padding: 0.9rem 1.1rem 1.1rem;
}
.tmux-pane::before {
  /* The decoration lives here, not in data-title, so the window labels in the
     status line stay plain ("1:about"). */
  content: "\2500\00a0" attr(data-title) "\00a0\2500";  /* the label is bare ("about") */
  position: absolute;
  top: -0.72rem;
  left: 0.9rem;
  padding: 0 0.4rem;
  background: var(--tmux-bg);
  color: var(--tmux-dim);
  font-size: 0.72rem;
}
.tmux-pane.is-closed { display: none; }

/* --- 3b. Window switching: one pane per screen --------------------------- */
/* A window is SWAPPED IN, not scrolled to: every pane but the targeted one
   leaves the flow, so moving around never scrolls the page and the window list
   stays put. Two hooks make that work, both added at BUILD time by
   hooks/post_build.py — `tmux-swap` on <html>, `data-tmux-default` on the first
   pane — and every rule here is scoped to `tmux-swap`. A document that never
   went through the hook (a stale copy, a future refactor) therefore falls back
   to the stacked, fully readable page instead of rendering blank. */
.tmux-swap .tmux-pane { display: none; }
.tmux-swap .tmux-pane:target { display: block; }
/* C-b q outranks being the target: same specificity as the rule above, later in
   the file, so a closed pane stays closed until C-b r brings it back. */
.tmux-swap .tmux-pane.is-closed { display: none; }

/* No fragment at all -> the default pane. The `:not(:has(…))` tests for a PANE
   being targeted rather than for `:target` in general, so an unknown fragment
   (a stale bookmark, a future link to a heading) cannot hide every pane at
   once — the key-binding layer rewrites those, and this covers the no-JS case. */
.tmux-swap:not(:has(.tmux-pane:target)) [data-tmux-default] { display: block; }

/* One pane per screen is a LAYOUT, not a height calculation: the document is a
   column one viewport tall and the visible window grows into whatever is left
   after the status line and the message line. (An earlier version sized the pane
   with `calc(100dvh - 6rem)` and was 49px too tall the first time it was
   measured, because the theme's own wrappers add padding of their own — the
   arithmetic is the bug, not the constant.) The wrappers named here exist on
   every surface: they come from the theme's base.html, whether or not the
   theme's stylesheet is loaded. */
.tmux-swap { height: 100%; }
.tmux-swap body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.tmux-swap .md-container,
.tmux-swap .md-main,
.tmux-swap .md-main__inner,
.tmux-swap .md-content,
.tmux-swap .md-content__inner,
.tmux-swap .tmux-panes {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.tmux-swap .tmux-pane:where(:target, [data-tmux-default]) { flex: 1 1 auto; }

/* Paragraph rhythm inside a pane. Also not free from the theme: the public page
   gets Material's `1em 0`, the members shell gets the Go app's global
   `margin: 0`. Stated here so the three surfaces read the same. */
.tmux-pane p { margin: 0 0 0.8rem; }
.tmux-pane > :last-child { margin-bottom: 0; }

/* Markdown tables in a pane (the contact window). Material styles tables; the
   members shell and the LAN mirror do not load Material's stylesheet, so
   without this the same table has borders on one surface and none on the
   others. */
.tmux-pane table {
  border-collapse: collapse;
  font-size: 0.8rem;
}
.tmux-pane table th,
.tmux-pane table td {
  border: 1px solid var(--tmux-faint);
  padding: 0.35rem 0.7rem;
  text-align: left;
}
.tmux-pane table th { color: var(--tmux-lime); font-weight: 600; }

.tmux-term { color: var(--tmux-lime); margin: 0 0 0.6rem; }
.tmux-dim { color: var(--tmux-dim); }
.tmux-note { color: var(--tmux-dim); font-size: 0.76rem; }
.tmux-link { text-decoration: none; border-bottom: 1px solid currentColor; }

.tmux-wordmark {
  display: block;
  width: min(340px, 78vw);
  height: auto;
  margin: 0.4rem 0 0.6rem;
}

.tmux-256 {
  color: var(--tmux-blue);
  border: 1px solid var(--tmux-faint);
  padding: 0.55rem 1.6rem;
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.tmux-256:hover { color: var(--tmux-lime); border-color: var(--tmux-lime); }

/* Projects: one flat row per project, tmux-list style. */
.tmux-list { list-style: none; margin: 0; padding: 0; }
.tmux-list li {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 0.8rem;
  padding: 0.5rem 0;
  border-bottom: 1px dotted var(--tmux-faint);
}
.tmux-list li:last-child { border-bottom: 0; }
.tmux-list .k { color: var(--tmux-lime); }
.tmux-list .v { color: var(--tmux-dim); }
/* Breakpoints are in px, not rem: "is this screen narrow" is a question about
   the device, and a rem-based query moves when the root font size does — which
   it now does (`html { font-size: 125% }` above would have pushed this rule
   from 720px to 900px). */
@media (max-width: 720px) {
  .tmux-list li { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* The about pane's headshot. Floated so the prose wraps it, and cropped square
   in docs/assets/headshot.jpg rather than by CSS: both surfaces (the front page
   and the members shell) then agree on the shape without a second rule. The
   frame is the same --tmux-faint hairline the panes and list rows use, which is
   the one colour in the palette that already reads on both schemes, so there is
   no light-scheme override. Square corners on purpose: the photo is the only
   rounded thing a border-radius would produce on this page. */
.tmux-headshot {
  float: right;
  width: 11rem;
  height: auto;
  margin: 0.2rem 0 0.8rem 1.2rem;
  border: 1px solid var(--tmux-faint);
}
/* Below the list's own breakpoint the float has nothing to wrap around, so the
   photo centres above the prose instead of shrinking the column to one word. */
@media (max-width: 720px) {
  .tmux-headshot { float: none; display: block; width: 9rem; margin: 0.2rem auto 0.9rem; }
}

/* --- 4. Overlays: key table, clock, app picker --------------------------- */
.tmux-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 13, 18, 0.93);
  padding: 1.5rem;
}
.tmux-overlay-inner {
  border: 1px solid var(--tmux-lime);
  background: var(--tmux-surface);
  padding: 1rem 1.2rem;
  max-width: 46rem;
  width: 100%;
  max-height: 85vh;
  overflow: auto;
}
.tmux-overlay-title {
  margin: 0 0 0.8rem;
  color: var(--tmux-lime);
  font-size: 0.78rem;
}
.tmux-keysheet { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.tmux-keysheet th {
  text-align: left;
  color: var(--tmux-lime);
  font-weight: 600;
  white-space: nowrap;
  padding: 0.22rem 1.2rem 0.22rem 0;
  vertical-align: top;
}
.tmux-keysheet td { color: var(--tmux-dim); padding: 0.22rem 0; }

/* Clock mode (`C-b t`): a full-screen overlay, and the ONLY thing `.tmux-clock`
   is used for now that the status line carries no time. It used to be used
   twice, and the shared class name is what once tore the status bar apart — a
   rule here reaches the overlay, not a slot in the bar. */
.tmux-overlay .tmux-clock {
  color: var(--tmux-lime);
  font-size: min(22vw, 9rem);
  letter-spacing: 0.04em;
  padding: 0;
  border: 0;
  background: none;
  display: block;
}

.tmux-picker { list-style: none; margin: 0; padding: 0; }
.tmux-picker li { padding: 0.3rem 0.5rem; border-left: 2px solid transparent; }
.tmux-picker li.is-selected { background: #1b2030; border-left-color: var(--tmux-lime); }
.tmux-picker a { color: var(--tmux-dim); text-decoration: none; }
.tmux-picker li.is-selected a { color: var(--tmux-lime); }

/* --- 5. Copy mode + zoom ------------------------------------------------- */
.tmux-copy-mode { scrollbar-color: var(--tmux-lime) var(--tmux-bg); }
.tmux-copy-mode .tmux-status { border-bottom-color: var(--tmux-amber); }

/* Zoom, in a swapping page: the visible window already fills the screen, so
   zooming means letting it take the rest of it — no gap above it, no margin
   below it, no space held for the message line. (In the no-hook fallback, where
   every pane is in the flow, there is nothing to give and only the status-line
   tag changes.) */
.tmux-zoomed body { padding-bottom: 0; }
.tmux-zoomed .tmux-panes { padding-top: 0; }
.tmux-zoomed .tmux-pane:where(:target, [data-tmux-default]) { margin-bottom: 0; }

/* Inline key hints inside prose (the C-b n / C-b ? reminders). */
.tmux-pane kbd, .md-typeset kbd {
  font-family: var(--tmux-mono);
  font-size: 0.74rem;
  color: var(--tmux-lime);
  background: #1b2030;
  border: 1px solid var(--tmux-faint);
  border-bottom-width: 2px;
  border-radius: 0;
  padding: 0.05rem 0.34rem;
}

/* --- Motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --- Light scheme: keep the lime, drop the black ------------------------- */
@media (prefers-color-scheme: light) {
  body { background: #f7f8f7; color: #1c2128; }
  .tmux-status { background: #eceee9; }
  .tmux-pane { background: #ffffff; border-color: #c9cec6; }
  .tmux-pane::before { background: #f7f8f7; color: #5b6470; }
  .tmux-message { background: #eceee9; }
  .tmux-list .v { color: #5b6470; }
  .tmux-overlay { background: rgba(247, 248, 247, 0.95); }
  .tmux-overlay-inner { background: #ffffff; }
  .tmux-keysheet td { color: #5b6470; }
  .tmux-status-right { background: #eceee9; }
  .tmux-status.is-prefix .tmux-status-right { background: #eceee9; }
}

/* mkdocs-material marks the document no-js and lets its bundle remove it; this
   site ships no theme JS, so the key-binding layer clears it instead. */
.no-js .tmux-prompt { display: none; }

/* --- Members: the signed-in chip and the granted-apps grid ----------------- */
.tmux-user {
  color: var(--tmux-lime);
  padding: 0 0.7rem;
  border-left: 1px solid var(--tmux-faint);
}

.tmux-apps {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.55rem;
}
.tmux-apps li { margin: 0; }
.tmux-apps a {
  display: block;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--tmux-faint);
  background: #10131b;
  color: var(--tmux-dim);
  text-decoration: none;
  line-height: 1.35;
}
.tmux-apps a:hover, .tmux-apps a:focus-visible {
  border-color: var(--tmux-lime);
  color: var(--tmux-lime);
}
.tmux-apps .name { color: var(--tmux-lime); font-weight: 600; display: block; }
.tmux-apps .desc { font-size: 0.72rem; }
.tmux-apps .grp { font-size: 0.68rem; color: var(--tmux-faint); display: block; margin-top: 0.2rem; }

@media (prefers-color-scheme: light) {
  .tmux-apps a { background: #ffffff; border-color: #c9cec6; }
  .tmux-apps .desc { color: #5b6470; }
}