/* NetworkGopher dev page (design section 8.2): plain and data-dense. No pills, chips, decorative
   badges, gradients, glow or accent bars; no tiny letter-spaced uppercase labels. Loaded after the
   gopher sites' shared shell (gopher_core/web/static/shell.css: the page frame, sticky navbar,
   focus outline (--lg-focus-color), dev site menu and footer), so these rules may override it. The
   listings table and its filter panel are the gopher sites' shared ones (gopher_core/web/static/
   table.css, loaded before this sheet, and listings.css, after it); what follows is NetworkGopher's own. */

/* Keep the lettering as text so it stays crisp at navbar size and on Retina screens.
   The SVG viewport frames just the mascot in the original, unmodified logo image. */
.net-brand { display: flex; align-items: center; gap: 4px; }
.net-logo { width: 38px; height: 28px; flex-shrink: 0; }
.net-wordmark { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 700; line-height: 28px; letter-spacing: -.35px; }
[data-bs-theme="dark"] .net-logo { filter: invert(1); }

/* The page's text is smaller than the shell's navbar and footer. switches.html's and 404.html's
   headings bring their own top margin (mt-3), so main adds none. */
.net-main { font-size: .875rem; padding-top: 0; }
/* The navbar is sticky: whatever scrolls into view (Tab, Shift+Tab through the rows) stops below
   it, not under it (it is 53px tall at every width). */
html { scroll-padding-top: var(--lg-sticky-top, 3.5rem); }

/* A list of page links (404.html): 24px apart at least, for fingers (WCAG 2.5.8). */
.net-links li { margin-bottom: .375rem; }

/* about.html: a readable measure, LabGopher's text pages' spacing. */
.net-prose > * { max-width: 48rem; }
.net-prose h2 { margin-top: 1.5rem; font-size: 1.125rem; }
.net-prose li { margin-bottom: .375rem; }

/* The cells (netutil.js) are on one line (table.css); in the child row, which wraps, each part of a
   value stays on one line and the line breaks only between parts. */
.net-word { white-space: nowrap; }
/* The listing's title is the last column, on one line; where it doesn't fit, Responsive moves it to
   the child row (it has the lowest priority). It leads the Unidentified view, linked to the listing. */
.lg-table td.net-listing a { text-decoration: none; }
.lg-table td.net-listing a:hover { text-decoration: underline; }
.lg-table td.net-listing a:focus-visible { outline: 2px solid var(--lg-focus-color); outline-offset: 2px; border-radius: 2px; }

/* The Model cell (table redesign 4.9): the catalog's name, linked to the listing, on one line (table.css).
   Its words come in two .net-name spans, all but the last and the last (netutil.js modelHtml), each kept
   whole, so on a phone the name can break once, before its last word, and is never cut short. */
.net-model { font-weight: 600; text-decoration: none; }
.net-name { white-space: nowrap; }
.net-model:hover { text-decoration: underline; }
.net-model:focus-visible { outline: 2px solid var(--lg-focus-color); outline-offset: 2px; border-radius: 2px; }

/* Phones: the line words of an HPE model are visually hidden (still read out and in the link's
   name), as LabGopher hides the brand word, so "2930F-48G-PoE+-4SFP+" reads alone, and a name too
   long for its column ("UniFi Switch 8 PoE 150W Gen1") breaks once, before its last word (rule 1).
   The Unidentified view's lead title is that
   view's model: on a phone it may wrap, at least 6.5rem wide. So the model, Price w/ shipping and $/port
   fit side by side at 360-390px. */
@media (max-width: 575.98px) {
  .lg-table td .net-model { white-space: normal; }
  .net-line {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .lg-table td.net-listing-lead { min-width: 6.5rem; white-space: normal; overflow-wrap: anywhere; }
}