/* The LSGrid backdrop (owner's sketch, 2026-10-31): a diamond grid in the bottom-left and top-right
   corners, hairline grey, fading smoothly into the page toward the middle.
   - One lattice for the whole page (background-attachment: fixed), so both corners line up.
   - Lines have soft half-pixel edges, so 45° hairlines stay smooth instead of stair-stepped.
   - The fade is a radial layer in the page colour painted over the lines, not a CSS mask: a mask
     here stopped faded-in elements above it (Sign in, the lines) from drawing in Chromium. */
.gridbg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; --bg-page: #0b0b0c; }
.gridbg i { position: absolute; display: block;
  --line: rgba(237, 237, 239, .05); --gap: 44px;
  background-attachment: fixed, fixed, fixed;
  background-image:
    var(--fade),
    repeating-linear-gradient(45deg, transparent 0, var(--line) .5px, var(--line) 1px, transparent 1.5px, transparent var(--gap)),
    repeating-linear-gradient(-45deg, transparent 0, var(--line) .5px, var(--line) 1px, transparent 1.5px, transparent var(--gap)); }
.gridbg .g-bl { left: 0; bottom: 0; width: 58vw; height: 100vh;
  --fade: radial-gradient(ellipse 58vw 92vh at 0 100%, transparent 0, transparent 38%, var(--bg-page) 100%); }
.gridbg .g-tr { right: 0; top: 0; width: 46vw; height: 64vh;
  --fade: radial-gradient(ellipse 46vw 64vh at 100% 0, transparent 0, transparent 34%, var(--bg-page) 100%); }
/* the radial layer doesn't use the fixed attachment's page box, it follows its own element */
.gridbg i { background-attachment: scroll, fixed, fixed; }
@media (max-width: 560px) {
  .gridbg .g-bl { width: 90vw; height: 62vh; --fade: radial-gradient(ellipse 90vw 62vh at 0 100%, transparent 0, transparent 30%, var(--bg-page) 100%); }
  .gridbg .g-tr { width: 80vw; height: 36vh; --fade: radial-gradient(ellipse 80vw 36vh at 100% 0, transparent 0, transparent 30%, var(--bg-page) 100%); }
}

/* navbars show the grid too (owner, 2026-11-07: "make all the navbars show the grid overlay"). The header keeps its
   own fill, so a pinned one still hides what scrolls under it, and the top-right lattice is drawn again inside it,
   behind its contents. Both use fixed attachment, so the lines continue the page's exactly. Every header here is
   positioned with a z-index, which keeps z-index -1 inside the header. */
.gridbg ~ header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  --line: rgba(237, 237, 239, .05); --gap: 44px;
  background-image:
    radial-gradient(ellipse 46vw 64vh at 100% 0, transparent 0, transparent 34%, #0b0b0c 100%),
    repeating-linear-gradient(45deg, transparent 0, var(--line) .5px, var(--line) 1px, transparent 1.5px, transparent var(--gap)),
    repeating-linear-gradient(-45deg, transparent 0, var(--line) .5px, var(--line) 1px, transparent 1.5px, transparent var(--gap));
  background-attachment: fixed, fixed, fixed; }
@media (max-width: 560px) {
  .gridbg ~ header::before { background-image:
    radial-gradient(ellipse 80vw 36vh at 100% 0, transparent 0, transparent 30%, #0b0b0c 100%),
    repeating-linear-gradient(45deg, transparent 0, var(--line) .5px, var(--line) 1px, transparent 1.5px, transparent var(--gap)),
    repeating-linear-gradient(-45deg, transparent 0, var(--line) .5px, var(--line) 1px, transparent 1.5px, transparent var(--gap)); }
}

/* everything you read or click sits above it */
.gridbg ~ header, .gridbg ~ main { position: relative; z-index: 1; }
.mark, .signin, .note, #sub { z-index: 2; }

/* footer links wrap whole, centred on narrow screens ("Cookie settings" was breaking in two) (owner, 2026-11-02) */
.flinks { flex-wrap: wrap; row-gap: 4px; }
.flinks > a, .flinks > span { white-space: nowrap; }
@media (max-width: 560px) { .flinks { justify-content: center; } }

/* Scrollbars (owner, 2026-11-06: "fix all scrollbars"): every page and every scrolling box gets the thin dark one the
   dashboard uses, never the browser's light default. color-scheme keeps native controls (date pickers, resizers) dark too.
   An element that hides its scrollbar (scrollbar-width: none) still wins, since * has no specificity. */
:root { color-scheme: dark; }
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; }
::-webkit-scrollbar-corner { background: transparent; }

/* text links beside the logo in every navbar (owner, 2026-11-07: "add changelog and server as like text only on the top") */
header .htop { display: flex; align-items: center; gap: 20px; margin-left: 8px; font-size: 14px; font-weight: 600; }
/* centred in the bar once there's room either side (owner, 2026-11-07: "put it in the middle, and bolded"); every
   header here is positioned, so it centres on the header, not the page */
@media (min-width: 720px) { header .htop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; } }
header .htop a { height: auto; padding: 0; border-radius: 0; background: none; color: #a1a1a8; text-decoration: none; white-space: nowrap; }
header .htop a[aria-current] { color: #ededef; background: none; }
@media (hover: hover) { header .htop a:hover { color: #ededef; } }
@media (max-width: 420px) { header .htop { gap: 12px; margin-left: 4px; font-size: 13px; } }

/* Resources dropdown in the navbar (owner, 2026-11-07: "add resources as a dropdown at top too, same as footer") */
header .htop .hdd { position: relative; }
header .htop .hdd summary { display: inline-flex; align-items: center; gap: 4px; list-style: none; cursor: pointer; color: #a1a1a8; user-select: none; }
header .htop .hdd summary::-webkit-details-marker { display: none; }
header .htop .hdd summary svg { position: relative; top: 2px; width: 12px; height: 12px; transition: transform .15s ease; }   /* sits on the text's middle, not the box's */
header .htop .hdd[open] summary { color: #ededef; }
header .htop .hdd[open] summary svg { transform: rotate(180deg); }
@media (hover: hover) { header .htop .hdd summary:hover { color: #ededef; } }
header .htop .hdd summary:focus-visible { outline: 1px solid #ededef; outline-offset: 4px; border-radius: 4px; }
header .htop .hdd-m { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); z-index: 50; display: grid; min-width: 180px; padding: 6px;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; background: #141417; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
header .htop .hdd-m a { display: block; height: auto; padding: 8px 12px; border-radius: 4px; font-weight: 500; color: #a1a1a8; }
header .htop .hdd-m a[aria-current] { color: #ededef; }
@media (hover: hover) { header .htop .hdd-m a[href]:hover { background: rgba(255, 255, 255, .06); color: #ededef; } }
@media (max-width: 719px) { header .htop .hdd-m { left: auto; right: -40px; transform: none; } }

/* phones: one Menu holds everything, the bar has no room for four links beside the bell and avatar */
header .htop .hl-sm, header .htop .hdd-m .hdd-sm { display: none; }
@media (max-width: 559px) {
  header .htop > a { display: none; }
  header .htop .hl-lg { display: none; } header .htop .hl-sm { display: inline; }
  header .htop .hdd-m .hdd-sm { display: block; }
  header .htop .hdd-m { left: 0; right: auto; }
}
/* an open menu sits above the page under the bar (the page's main shares the header's layer and comes later) */
header:has(.hdd[open]) { z-index: 100 !important; }
/* no dimming behind an open navbar menu (owner, 2026-11-13: users need to see the page; replaces the 11-07 blackout) */
/* the hand on every navbar item, the page you're on included (owner, 2026-11-07) */
header .htop a, header .htop summary { cursor: pointer; }