/* ==========================================================================
   Endless Online Developer Wiki
   Theme copied from EOSERV (eoserv.net) - /pub/eoserv3.css (r1604347095).
   Copied verbatim from that stylesheet: html/body, #article typography, a/a:hover,
   #header (h1 + #slogan), ul.menu + #mainmenu (including the 16x20 sprite tiles),
   #body/#sidebar, #loc-bar, .newspost, ul.glist (with caption), .extra, #footer,
   and the topicdesc/.glist hover couple. The wiki's extra components (search, nav
   tree, tags, chips, source tables, .mono) are built from the same palette, so
   nothing looks foreign to the theme.

   Palette (all from eoserv3.css):
     page background   white        panel background  #171c23
     panel border      #262c36      strong border     #3d444d
     header            #10151c      menu bar          #262c36
     headings          #e6edf3      h1 underline      #30363d
     link / hover      black / #58a6ff
     row hover         #20262e      muted text        #8b949e
     menu icons        pub/mainmenu-dark.png (16x120, six 16x20 tiles)
   ========================================================================== */

html
{
    margin:0;
    padding:0;
}

body
{
    margin:1em 0 1em 0;
    padding:0;
    font-size:10pt;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    text-align:center;
    background-color:#0d1117;
    color:#c9d1d9;
}

#header, .menu
{
    font-size:9pt;
}

#article
{
    font-size:10pt;
    font-family:sans-serif;
}

#article h1, #article h2, #article h3, #article h4, #article h5, #article h6
{
    margin-left:-1pt;
    color:#e6edf3;
}

#article h1
{
    border:solid #30363d 1px;
    border-width:0 0 1px 0;
}

#article h1 { margin:1.2em 0 0.8em -2pt; }
#article h2 { margin:1.2em 0 0.5em -2pt; }
#article h3 { margin:0.8em 0 0.5em 0; }
#article h4 { margin:0.8em 0 0.5em 0; }
#article h5 { margin:0.8em 0 0.5em 0; }
#article h6 { margin:0.8em 0 0.5em 0; }

#article p
{
    margin:0.6em 0;
    line-height:1.25em;
}

#article li
{
    margin:0.4em 0;
}

#article dl
{
    margin:0.6em 0;
}

#article dt
{
    font-variant:small-caps;
    font-weight:bold;
}

#article dd
{
    margin:0 0 0.3em 1.4em;
}

#article blockquote
{
    margin:0.4em 0 0.4em 2ex;
    padding:0.2em 0 0.2em 1ex;
    border-style:solid;
    border-width:0 0 1px 3px;
    border-color:#3d444d;
}

#article img
{
    max-width:100%;
}

kbd
{
    font-family:"Courier New", Courier, monospace;
    font-size:95%;
    background-color:#20262e;
    border:solid #3d444d 1px;
    border-bottom-width:2px;
    padding:0 2px;
}

form, input
{
    padding:0;
    margin:0;
}

a
{
    color:#c9d1d9;
    font-weight:bold;
}

a img
{
    border-style:none;
}

hr
{
    height:1px;
    color:#c9d1d9;
    background-color:#c9d1d9;
    border-style:none;
}

abbr
{
    border-style:none;
}

a:hover
{
    color:#58a6ff;
}

.status-online
{
    font-weight:bold;
    color:#3fb950;
}

.status-offline
{
    font-weight:bold;
    color:#f85149;
}

#header, #mainmenu, #body, #footer
{
    text-align:left;
    border:solid #262c36 1px;
    padding:0;
    width:100%;
    box-sizing:border-box;
    max-width:800pt;
    /* No min-width: the theme's 400pt floor pushed the whole page wider than a
       phone, so every small screen scrolled sideways. */
    margin:0 auto;
    background-color:#171c23;
}

#header
{
    margin:2em auto 0 auto;
    height:60px;
    background-color:#10151c;
    position:relative;
}

#header h1
{
    padding:2px;
    margin:0;
    font-size:130%;
    letter-spacing:0.6ex;
    word-spacing:0.4ex;
    font-family:Arial,Helvetica,Tahoma,Verdana,sans-serif;
}

#header #slogan
{
    font-size:105%;
    letter-spacing:0.35ex;
    word-spacing:0.6ex;
    position:absolute;
    bottom:2px;
    right:3px;
    font-family:Arial,Helvetica,Tahoma,Verdana,sans-serif;
}

ul.menu
{
    margin:0;
    padding:0;
    display:block;
    list-style:none;
    text-align:center;
    height:1.75em;
    background-color:#262c36 !important;
    border-width:0;
}

ul.menu li
{
    display:inline-block;
    text-align:center;
    position:relative;
}

ul.menu li a
{
    text-decoration:none;
    color:#c9d1d9;
    display:block;
    padding:2px 3ex;
}

ul#mainmenu > li
{
    background-image:url('pub/mainmenu-dark.png');
    background-repeat:no-repeat;
    background-position:-16px 16px;
}

ul#mainmenu > li.menu-home { background-position:2px 0px; }
ul#mainmenu > li.menu-download { background-position:2px -20px; }
ul#mainmenu > li.menu-wiki { background-position:2px -40px; }
ul#mainmenu > li.menu-bugs { background-position:2px -60px; }
ul#mainmenu > li.menu-forum { background-position:2px -80px; }
ul#mainmenu > li.menu-servers { background-position:2px -100px; }
ul#mainmenu > li.menu-credits { background-position:2px -100px; }

ul.menu li:hover
{
    background-color:#171c23;
    color:#c9d1d9;
}

ul#mainmenu > li:hover
{
    background-image:url('pub/mainmenu-dark.png');
    background-repeat:no-repeat;
}

/* The Wiki button's drop-down: the wiki's main sections, one entry each. The
   sidebar still lists every page; the menu only has to get you into a section,
   so it stays short instead of unrolling seventy links. */
ul#mainmenu li > ul.submenu
{
    display:none;
    position:absolute;
    left:0;
    top:100%;
    z-index:300;
    margin:0;
    padding:4px 5px;
    list-style:none;
    text-align:left;
    background-color:#171c23;
    border:solid #3d444d 1px;
    box-shadow:0 6px 18px rgba(0, 0, 0, 0.5);
    width:auto;
    min-width:220px;
    max-width:calc(100vw - 16px);
    max-height:70vh;
    overflow-y:auto;
}
ul#mainmenu li:hover > ul.submenu,
ul#mainmenu li:focus-within > ul.submenu,
ul#mainmenu li.open > ul.submenu { display:block; }
ul#mainmenu ul.submenu li { display:block; }
ul#mainmenu ul.submenu a
{
    display:block;
    padding:2px 6px;
    font-weight:normal;
    font-size:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
ul#mainmenu ul.submenu a:hover
{
    background-color:#20262e;
    color:#58a6ff;
}

#mainmenu
{
    text-align:center;
    z-index:60;
}

#mainmenu li
{
    z-index:80;
}

#body
{
    position:relative;
    background-position:top right;
    background-repeat:repeat-y;
    min-height:1060px;
    overflow-x:hidden;
    border-width:0 1px 1px 1px;
}

#article
{
    margin:0 2pt 0 4pt;
    padding:2px;
    text-align:left;
}

/* The wiki keeps EOSERV's right-hand sidebar, but insets the article so a page
   of tables and file lists stays readable (EOSERV's own pages have no sidebar). */
#sidebar
{
    position:absolute;
    right:0;
    top:0;
    width:224px;
    max-height:calc(100vh - 3em);
    overflow-y:auto;
    padding:0 2px 2px 0;
    text-align:left;
}

#article
{
    padding-right:238px;
}

#sidebar h2
{
    float:left;
    width:100%;
    clear:both;
    display:block;
    margin:0;
    padding:0.2em 0 0 0;
    font-size:120%;
    text-align:center;
}

/* Sidebar blocks: search, tags, pages. Each is a titled panel, so the three
   navigation aids stay separate however long the page list grows. */
.side-block
{
    clear:both;
    margin:0 0 6px 0;
    padding:0 4px 4px 4px;
    border:solid #262c36 1px;
    background-color:#171c23;
}

.side-block h3
{
    display:block;
    margin:0 -4px 4px -4px;
    padding:0.3em 4px 0.25em 4px;
    border-bottom:solid #3d444d 1px;
    background-color:#262c36;
    color:#e6edf3;
    font-size:95%;
    font-variant:small-caps;
    letter-spacing:0.04em;
    text-align:left;
}

.side-label
{
    display:block;
    padding:0.3em 0 0.2em 0;
    color:#e6edf3;
    font-size:95%;
    font-variant:small-caps;
    letter-spacing:0.04em;
    font-weight:bold;
}

#sidebar #searchbox input
{
    font-size:90%;
}

#sidebar dl
{
    float:left;
    width:100%;
    clear:both;
    display:block;
    margin:0 0 0.6em 0;
    padding:0;
}

#sidebar dl dt
{
    display:block;
    float:left;
    width:48%;
    padding:1px 0;
    margin:0;
    font-variant:small-caps;
    font-weight:bold;
    border:solid #30363d 1px;
    border-width:1px 0 0 0;
}

#sidebar dl dd
{
    display:block;
    float:right;
    width:48%;
    padding:1px 0;
    margin:0;
    border:solid #30363d 1px;
    border-width:1px 0 0 0;
}

#footer
{
    border-width:0 1px 1px 1px;
}

.newspost
{
    border-style:solid;
    border-width:1px;
    width:90%;
    border-color:#3d444d;
    margin:0.8em auto;
    text-align:left;
    background-color:#262c36;
    overflow:hidden;
}

/* The head line, the way eoserv's own posts read: the title on the left, the poster
   on the right. The rule under the head belongs to the body, so the picture and the
   text start from the same edge. */
.newspost .posthead
{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:2ex;
    padding:3px 0.6ex 2px 0.6ex;
}

.newspost .title
{
    display:block;
    min-width:0;
    overflow-wrap:break-word;
    font-weight:bold;
    font-variant:small-caps;
    font-size:115%;
}

.newspost .author
{
    font-size:85%;
    white-space:nowrap;
}

.newspost .author a
{
    font-weight:bold;
    font-size:115%;
}

/* The picture hangs off the right of the head line with the post's text wrapping
   beside it, as it does on the eoserv front page. These are small pixel-art cards,
   so they are drawn at their own size: nearest-neighbour scaling keeps them sharp
   instead of stretching them into a fixed frame. */
.newspost .avatar
{
    float:right;
    border-style:solid;
    border-width:0 0 1px 1px;
    border-color:#3d444d;
    background-color:#0d1117;
    z-index:10;
    image-rendering:pixelated;
}

/* A post with no picture keeps a frame of the same size, so the text wraps around
   the same space on every post until a picture is dropped in. */
.newspost .avatar-blank
{
    display:block;
    width:64px;
    height:77px;
    border-style:dashed;
    border-width:1px;
    border-color:#30363d;
}

.newspost .news
{
    border-style:solid;
    border-width:1px 0 0 0;
    border-color:#3d444d;
    padding:0.6em 0.8em;
    background-color:#171c23;
}

/* The bottom strip: the date on the left, the post's tags on the right, the corner
   where eoserv puts its comment count. */
.newspost .postfoot
{
    clear:both;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2ex;
    border-style:solid;
    border-width:1px 0 0 0;
    border-color:#3d444d;
    padding:2px 0.6ex 3px 0.6ex;
}

.newspost .date
{
    font-style:italic;
    font-size:85%;
}

.newspost .comments
{
    font-size:85%;
}

.newspost .posttags
{
    text-align:right;
}
.newspost .posttag
{
    display:inline-block;
    margin:0 0 0 4px;
    padding:0 5px;
    border:solid #3d444d 1px;
    background-color:#171c23;
    color:#8b949e;
    font-size:80%;
    font-variant:small-caps;
    letter-spacing:0.04em;
}

.glist
{
    width:95%;
    border:solid #3d444d 1px;
    margin:0 auto 1em auto;
    border-collapse:collapse;
}

.glist td
{
    font-size:95%;
}

.glist caption
{
    font-size:120%;
    font-weight:bold;
    text-align:center;
    background-color:#262c36;
    border:solid #3d444d 1px;
    border-width:1px 1px 0 1px;
    margin:1em auto 0 auto;
    padding:2px 0;
}

.glist thead th
{
    font-size:110%;
    font-weight:bold;
    text-align:center;
    background-color:#262c36;
    border:solid #3d444d 1px;
    margin:0;
    padding:0;
}

.glist tbody td, .glist tbody th
{
    margin:0;
    padding:0.3em 0.4ex;
    border:solid #3d444d 1px;
}

.glist thead tr th
{
    font-size:85%;
    padding:1px;
    color:#e6edf3;
}

.glist tr:hover
{
    background-color:#20262e;
}

.extra
{
    display:block;
    text-align:center;
    font-size:120%;
    font-weight:bold;
    margin:0.6em 0;
}

#footer
{
    text-align:center;
    font-size:90%;
    padding:0.2em 0;
    background-color:#262c36;
}

#footer #copyright
{
    display:block;
    padding:0.15em 0;
}

/* ==========================================================================
   Wiki additions - same palette, same square borders, no rounded corners.
   ========================================================================== */

#about .aboutbox
{
    border:solid #3d444d 1px;
    background-color:#262c36;
    padding:0.4em 0.6ex;
    margin:0.6em 0;
}

#about .aboutbox p:first-child { margin-top:0; }
#about .aboutbox p:last-child { margin-bottom:0; }

.bodysec { margin-bottom:1.2em; }

.notice
{
    border:solid #3d444d 1px;
    border-left-width:4px;
    background-color:#262c36;
    padding:0.4em 1ex;
    margin:0.8em 0;
    text-align:left;
}

.notice .title
{
    display:block;
    font-weight:bold;
    font-variant:small-caps;
    font-size:110%;
}

.notice p:first-child { margin-top:0; }
.notice p:last-child { margin-bottom:0; }
.notice.info { border-left-color:#3d444d; }
.notice.ok { border-left-color:#3fb950; }
.notice.danger { border-left-color:#f85149; }

/* ------------------------------------------------ search box, in sidebar -- */
#searchbox
{
    display:block;
    position:relative;
    margin:0 0 4px 0;
}
#searchbox .search-icon
{
    position:absolute;
    left:4px;
    top:2px;
    color:#8b949e;
    font-size:110%;
    pointer-events:none;
}
#searchbox input
{
    width:100%;
    box-sizing:border-box;
    padding:3px 20px 3px 18px;
    border:solid #3d444d 1px;
    background-color:#0d1117;
    color:#c9d1d9;
    font-family:inherit;
    font-size:90%;
}
#searchbox input:focus
{
    outline:none;
    border-color:#e6edf3;
    box-shadow:0 0 0 2px #20262e;
}
#searchbox button
{
    position:absolute;
    right:2px;
    top:1px;
    width:16px;
    height:16px;
    padding:0;
    line-height:14px;
    font-family:inherit;
    font-size:90%;
    cursor:pointer;
    border:solid #3d444d 1px;
    background-color:#262c36;
    color:#c9d1d9;
}
#searchbox button:hover { background-color:#20262e; }
.search-hint
{
    margin:0;
    color:#8b949e;
    font-size:80%;
    line-height:1.35em;
}
.search-hint kbd { font-size:95%; }

/* -------------------------------------------------------- results panel -- */
.searchresults
{
    position:absolute;
    right:232px;
    top:2px;
    z-index:200;
    width:min(620px, calc(100% - 260px));
    max-height:76vh;
    overflow-y:auto;
    background-color:#0d1117;
    border:solid #3d444d 1px;
    box-shadow:0 3px 10px rgba(51, 36, 20, 0.25);
    padding:0;
    text-align:left;
}
.sh-summary
{
    padding:0.35em 1ex;
    border-bottom:solid #3d444d 1px;
    background-color:#262c36;
    color:#e6edf3;
    font-size:85%;
    font-variant:small-caps;
    letter-spacing:0.04em;
}
.hit-group
{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding:0.25em 1ex 0.15em 1ex;
    border-top:solid #262c36 1px;
    border-bottom:solid #30363d 1px;
    background-color:#20262e;
}
.hit-group-label
{
    color:#e6edf3;
    font-size:80%;
    font-weight:bold;
    font-variant:small-caps;
    letter-spacing:0.06em;
}
.hit-group-count { color:#8b949e; font-size:75%; }
.searchresults .hit
{
    display:block;
    padding:3px 1ex;
    border-bottom:solid #21262d 1px;
    color:#c9d1d9;
    font-weight:normal;
}
.searchresults .hit:hover, .searchresults .hit.sel
{
    background-color:#20262e;
}
.searchresults .hit.sel { box-shadow:inset 3px 0 0 #3d444d; }
.searchresults .hit .hit-title { display:block; font-weight:bold; color:#c9d1d9; }
.searchresults .hit .hit-snip { display:block; font-size:85%; color:#8b949e; }
.searchresults .hit .hit-where
{
    color:#e6edf3;
    font-variant:small-caps;
    letter-spacing:0.04em;
}
.searchresults mark
{
    padding:0 1px;
    background-color:#5c4813;
    color:inherit;
}
.sh-foot
{
    padding:0.25em 1ex;
    border-top:solid #262c36 1px;
    background-color:#171c23;
    color:#8b949e;
    font-size:75%;
}
.sh-foot kbd { font-size:100%; }
.searchresults .empty { padding:0.5em 1ex; color:#8b949e; }
.searchresults .empty p { margin:0.3em 0; }
.searchresults .empty-hint { font-size:85%; }

/* ------------------------------------------------------------------ tags -- */
.tagfilter { margin:0; }
.tagfilter button
{
    font-family:inherit;
    font-size:95%;
    padding:2px 7px;
    margin:0 3px 4px 0;
    border:solid #3d444d 1px;
    background-color:#1c2128;
    color:#e6edf3;
    cursor:pointer;
}
.tagfilter button:hover { background-color:#20262e; }
.tagfilter button.on
{
    background-color:#e6edf3;
    border-color:#e6edf3;
    color:#171c23;
    font-weight:bold;
}
.tagfilter button.tagclear
{
    background-color:transparent;
    border-style:dashed;
    color:#58a6ff;
}

/* -------------------------------------------------------------- nav tree -- */
.navsec { margin:0 0 4px 0; }
.navsec-head
{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    width:100%;
    margin:0;
    padding:0.25em 3px;
    border:none;
    border-bottom:solid #30363d 1px;
    background:transparent;
    color:#e6edf3;
    font-family:inherit;
    font-size:90%;
    font-weight:bold;
    font-variant:small-caps;
    letter-spacing:0.05em;
    text-align:left;
    cursor:pointer;
}
.navsec-head:hover { background-color:#20262e; }
.navsec-caret
{
    display:inline-block;
    width:1em;
    margin-right:2px;
    transition:transform 0.12s ease;
}
.navsec.closed .navsec-caret { transform:rotate(-90deg); }
.navsec-title { flex:1 1 auto; }
.navsec-count { color:#8b949e; font-size:85%; font-weight:normal; }
.navsec.closed ul { display:none; }
#navtree ul { list-style:none; margin:2px 0 0 0; padding:0; clear:both; }
#navtree li { margin:0; }
#navtree .navlink
{
    display:flex;
    justify-content:space-between;
    padding:1px 4px 1px 10px;
    border-left:solid transparent 3px;
    color:#c9d1d9;
    font-weight:normal;
    font-size:95%;
}
#navtree .navlink:hover
{
    background-color:#20262e;
    color:#58a6ff;
}
#navtree .navlink.active
{
    border-left-color:#3d444d;
    background-color:#262c36;
    font-weight:bold;
    color:#c9d1d9;
}
#navtree .navcount { color:#8b949e; font-size:85%; font-weight:normal; }
.navempty { color:#8b949e; font-size:90%; }

.tagrow { margin:0 0 0.6em 0; }
.tagrow a
{
    font-size:90%;
    padding:1px 6px;
    margin:0 3px 0 0;
    border:solid #3d444d 1px;
    background-color:#262c36;
    font-variant:small-caps;
}
.tagrow a:hover { background-color:#20262e; }

/* EOSERV's breadcrumb bar, exactly as eoserv3.css defines it. */
#loc-bar
{
    display:block;
    margin:0.2em 2px 0.2em 0;
    padding:0.4em 1ex;
    border:solid #3d444d 1px;
    background-color:#262c36;
    font-size:90%;
}

#loc-bar a { font-weight:normal; }
#loc-bar u { font-weight:bold; }

/* evidence badges (evidence model article) */
.ev
{
    display:inline-block;
    border:solid #3d444d 1px;
    padding:0 4px;
    font-size:80%;
    font-weight:bold;
    font-variant:small-caps;
}
.ev-a { background-color:#12261a; }
.ev-b { background-color:#262c36; }
.ev-c { background-color:#2a2413; }
.ev-d { background-color:#33161a; }

/* small labels used inside the data tables */
.chip
{
    display:inline-block;
    border:solid #3d444d 1px;
    background-color:#262c36;
    padding:0 4px;
    font-size:85%;
    white-space:nowrap;
}
.chip.t-currency { background-color:#2a2413; }
.chip.t-heal { background-color:#12261a; }
.chip.t-weapon { background-color:#33161a; }
.chip.status-byte-exact { background-color:#12261a; }
.chip.status-in-progress { background-color:#2a2413; }
.chip.status-not-started { background-color:#171c23; color:#8b949e; }

.filters
{
    margin:0.4em 0;
    text-align:left;
    font-size:90%;
}
.filters input[type="search"], .filters select
{
    border:solid #3d444d 1px;
    background-color:#0d1117;
    color:#c9d1d9;
    font-family:inherit;
    font-size:90%;
    padding:1px 3px;
    margin:0 4px 0 0;
}
.filters .count { color:#8b949e; }

.tablewrap
{
    overflow:auto;
    max-height:600px;
    margin:0 auto 1em auto;
    width:95%;
}

.toc
{
    border:solid #3d444d 1px;
    background-color:#262c36;
    padding:2px 0.5ex;
    margin:0.8em 0;
}
.toc .toc-title
{
    display:block;
    font-weight:bold;
    font-variant:small-caps;
    font-size:110%;
}
.toc ul { list-style:none; margin:0.2em 0 0 0; padding:0; }
.toc ul ul { padding-left:1.4em; }
.toc li { display:inline-block; margin:0 3px 3px 0; }

/* The jumps read as buttons rather than as prose links: the reader is choosing
   somewhere to go, and a row of chips says that better than a bulleted list. */
.toc a
{
    display:inline-block;
    font-family:inherit;
    font-size:90%;
    font-weight:normal;
    padding:1px 7px;
    border:solid #3d444d 1px;
    background-image:linear-gradient(#2d333b, #22272e);
    color:#c9d1d9;
    text-decoration:none;
    cursor:pointer;
}
.toc a:hover
{
    background-image:linear-gradient(#39414b, #2a313a);
    border-color:#586069;
    color:#a5d6ff;
}
.toc a:active
{
    background-image:linear-gradient(#1c2128, #262c36);
    color:#e6edf3;
}

.kv dt { font-variant:small-caps; font-weight:bold; }
.kv dd { margin:0 0 0.2em 0; }

.page-meta
{
    margin-top:2em;
    padding-top:0.3em;
    border-top:solid #30363d 1px;
    font-size:85%;
    color:#8b949e;
}

.related { margin-top:0.4em; }
.related a
{
    font-size:90%;
    padding:0 4px;
    border:solid #3d444d 1px;
    background-color:#262c36;
}

/* code and file listings */
#article code
{
    font-family:"Courier New", Courier, monospace;
    font-size:95%;
    background-color:#20262e;
    border:solid #262c36 1px;
    padding:0 2px;
}

#article pre
{
    background-color:#20262e;
    border:solid #3d444d 1px;
    padding:4px 0.6ex;
    overflow-x:auto;
    margin:0.6em 0;
}

#article pre code
{
    background-color:transparent;
    border-style:none;
    padding:0;
}

.path, .sym, .mono
{
    font-family:"Courier New", Courier, monospace;
}
.path { font-size:95%; }
.sym { font-size:85%; color:#8b949e; }

/* packet fields, file flags and other literal identifiers in the prose */
.mono { font-size:95%; }

/* the "Sources:" block that closes every article */
.page-meta .src { margin:0.1em 0; }
.page-meta .src b { font-variant:small-caps; }

/* item rarity, in the theme's own colours (no blue anywhere in eoserv3.css) */
.tcol-rar { font-weight:bold; }
.tcol-rar.rar0 { font-weight:normal; color:#8b949e; }
.tcol-rar.rar1 { color:#58a6ff; }
.tcol-rar.rar2 { color:#d29922; }
.tcol-rar.rar3 { color:#3fb950; }
.tcol-rar.rar4 { color:#a371f7; }
.tcol-rar.rar5 { color:#f85149; }

/* long tables scroll inside .tablewrap, so the header row stays at the top */
.tablewrap .glist thead th { position:sticky; top:0; z-index:2; }

/* sortable headers keep EOSERV's look, with a plain text arrow */
.glist thead th.sortable { cursor:pointer; }
.glist thead th.sortable:hover { background-color:#20262e; }
.glist thead th .arrow { color:#3d444d; }
.glist td.num, .glist th.num { text-align:right; }
.glist td.notes { color:#8b949e; font-size:90%; }

/* stat rows use the sidebar's dt/dd convention */
.stats
{
    width:95%;
    margin:0 auto 1em auto;
    border-collapse:collapse;
}
.stats td, .stats th
{
    border:solid #3d444d 1px;
    padding:0.3em 0.4ex;
    text-align:center;
    font-size:95%;
}
.stats th
{
    background-color:#262c36;
    color:#e6edf3;
    font-size:85%;
}
.stats td.value { font-weight:bold; }

@media screen and (max-width:760pt)
{
    #body { min-height:0; }
    #sidebar
    {
        position:static;
        width:auto;
        float:none;
        border-bottom:solid #262c36 1px;
    }
    #article { padding-right:2px; }
    .searchresults { position:static; width:auto; max-height:none; }
    .glist { width:100%; }
    .tablewrap { width:100%; }
}


/* ==========================================================================
   Dark skin: the same layout and the same 1px panel edges, recoloured for a
   dark screen. The gradients stay shallow on purpose, so the chrome still
   reads as Windows-era bevels instead of flat modern cards.
   ========================================================================== */

body
{
    background-image:linear-gradient(#0f141b 0, #0d1117 260px, #0d1117 100%);
    background-repeat:no-repeat;
    background-attachment:fixed;
}

#header
{
    background-image:linear-gradient(#1b222b, #10151c);
    border-radius:4px 4px 0 0;
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#header h1 { text-shadow:0 1px 0 #000000; }

ul.menu
{
    background-image:linear-gradient(#242b34, #1a2028) !important;
    border-top:solid #37414d 1px;
    border-bottom:solid #0b0f14 1px;
}

ul.menu li:hover { background-image:linear-gradient(#2b333d, #202730); }

a { color:#79c0ff; }
a:hover { color:#a5d6ff; }
#article h1, #article h2, #article h3 { text-shadow:0 1px 0 #000000; }

/* panels and tables */
.newspost, .aboutbox, .notice, .toc, .side-block, .searchresults, .codeview-panel
{
    border-radius:4px;
}
.glist, .stats, .tablewrap { border-radius:3px; }
.glist th, .stats th
{
    background-image:linear-gradient(#2b323c, #202630);
    border-bottom:solid #12161c 1px;
    color:#e6edf3;
    text-shadow:0 1px 0 #000000;
}
.side-block h3 { background-image:linear-gradient(#2b323c, #202630); }
.toc-title, .glist caption { color:#e6edf3; }

kbd
{
    background-image:linear-gradient(#2d333b, #22272e);
    border-radius:3px;
    color:#e6edf3;
}

pre, code
{
    background-color:#0b0f14;
    border:solid #21262d 1px;
    border-radius:3px;
}
pre { padding:6px 8px; overflow:auto; }
code { padding:0 3px; }
pre code { border:none; background:none; padding:0; }

/* buttons: shallow gradient, 1px edge, pressed state */
.codebtn, #searchbox button, .tagfilter button, .codeview-copy
{
    border-radius:3px;
    border:solid #444c56 1px;
    background-image:linear-gradient(#2d333b, #22272e);
    color:#c9d1d9;
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.codebtn:hover, #searchbox button:hover, .tagfilter button:hover, .codeview-copy:hover
{
    background-image:linear-gradient(#39414b, #2a313a);
    border-color:#586069;
    color:#e6edf3;
}
.codebtn:active, .tagfilter button:active, .codeview-copy:active
{
    background-image:linear-gradient(#1b2026, #262d35);
    box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.5);
}
.tagfilter button.on
{
    background-image:linear-gradient(#2f81f7, #1f6feb);
    border-color:#1f6feb;
    color:#ffffff;
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
#navtree .navlink.active
{
    border-left-color:#58a6ff;
    background-image:linear-gradient(90deg, #17263d, #1a2028 70%);
}
.searchresults .hit.sel { box-shadow:inset 3px 0 0 #58a6ff; }
.sh-summary { background-image:linear-gradient(#242b34, #1b2129); }
.hit-group { background-image:linear-gradient(#1c222b, #171c23); }

/* code buttons and the viewer */
.codebtn
{
    font-family:inherit;
    font-size:80%;
    padding:2px 8px;
    margin:2px 4px 2px 0;
    cursor:pointer;
}
.codebtn-path { color:#8b949e; font-family:"Courier New", Courier, monospace; }
.codebar { margin:0.3em 0; }
html.codeview-open { overflow:hidden; }

.codeview
{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:500;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2vh 2vw;
    background-color:rgba(1, 4, 9, 0.74);
    text-align:left;
}
.codeview[hidden] { display:none; }
.codeview-panel
{
    display:flex;
    flex-direction:column;
    width:min(1100px, 100%);
    height:min(88vh, 100%);
    background-color:#0d1117;
    border:solid #30363d 1px;
    box-shadow:0 12px 40px rgba(0, 0, 0, 0.65);
}
.codeview-head
{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:6px 8px;
    border-bottom:solid #21262d 1px;
    background-image:linear-gradient(#1b222b, #12171e);
}
.codeview-title { min-width:0; }
.codeview-path
{
    display:block;
    font-family:"Courier New", Courier, monospace;
    font-size:95%;
    color:#e6edf3;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.codeview-meta { display:block; font-size:75%; color:#8b949e; }
.codeview-actions { flex:0 0 auto; }
.codeview-copy, .codeview-close
{
    font-family:inherit;
    font-size:80%;
    padding:2px 8px;
    margin-left:4px;
    cursor:pointer;
}
.codeview-body { flex:1 1 auto; overflow:auto; background-color:#0b0f14; }
.codeview-body pre { margin:0; border:none; border-radius:0; padding:8px; }
.codeview-body code
{
    display:block;
    font-family:"Courier New", Courier, monospace;
    font-size:85%;
    line-height:1.4em;
    white-space:pre;
    color:#c9d1d9;
}
.codeview-line { display:block; min-height:1.4em; }
.codeview-line::before
{
    content:attr(data-line);
    display:inline-block;
    width:4.5em;
    margin-right:1em;
    color:#6e7681;
    text-align:right;
    user-select:none;
}
.codeview-line.jumpflash { outline:none; background-color:#1a2433; }
.codeview-foot
{
    padding:4px 8px;
    border-top:solid #21262d 1px;
    background-color:#12171e;
    color:#8b949e;
    font-size:78%;
}

/* packet index */
.implrow { margin:0 0 2px 0; font-size:85%; }
.implrow .mono { font-size:90%; }
.fieldlist { font-size:80%; color:#9aa4b0; }
.pktable
{
    margin:0.4em 0;
    border:solid #21262d 1px;
    border-radius:4px;
    background-color:#12171e;
}
.pkrow { display:flex; gap:8px; padding:4px 6px; border-bottom:solid #171c23 1px; }
.pkrow:last-child { border-bottom:none; }
.pklabel
{
    flex:0 0 78px;
    color:#8b949e;
    font-variant:small-caps;
    letter-spacing:0.04em;
}
.pk
{
    display:inline-block;
    font-family:"Courier New", Courier, monospace;
    font-size:85%;
    padding:0 4px;
    margin:0 4px 2px 0;
    border:solid #30363d 1px;
    border-radius:3px;
    background-color:#1c2128;
    color:#79c0ff;
}

/* --------------------------------------------------- code colours, jump mark */

/* Readable on the dark panels, and deliberately few colours: this is a
   reference page, not an editor theme. */
.h-k { color:#ff7b72; }            /* keyword */
.h-c { color:#8b949e; }            /* comment */
.h-s { color:#a5d6ff; }            /* string */
.h-n { color:#79c0ff; }            /* number */
.h-t { color:#d2a8ff; }            /* type / capitalised name */
.h-p { color:#ffa657; }            /* preprocessor or attribute line */

pre > code, .codeview-body code { color:#c9d1d9; }

/* Where a jump landed. Two shades rather than an animation, so it reads the
   same in a screenshot. */
.jumpflash
{
    outline:solid #58a6ff 1px;
    outline-offset:-1px;
    background-color:#1a2433 !important;
}
tr.jumpflash td { background-color:#1a2433; }
h2.jumpflash, h3.jumpflash, .tablewrap.jumpflash { border-radius:3px; }

/* The row a search was after, kept marked after the jump highlight fades. */
tr.jumpmarked td, td.jumpmarked { background-color:#16202e; }

/* ==========================================================================
   Scrollbars. Every scrolling box on the page, styled to the same palette as
   the panels, so nothing drops back to the platform default. WebKit/Chromium
   takes the pseudo-elements; Firefox takes the two standard properties.
   ========================================================================== */

*
{
    scrollbar-width:thin;
    scrollbar-color:#3d444d #0d1117;
}

::-webkit-scrollbar
{
    width:12px;
    height:12px;
    background-color:#0d1117;
}

::-webkit-scrollbar-track
{
    background-color:#0d1117;
    border-left:solid #21262d 1px;
}

::-webkit-scrollbar-thumb
{
    background-color:#30363d;
    border:solid #0d1117 2px;
    border-radius:6px;
}

::-webkit-scrollbar-thumb:hover { background-color:#3d444d; }
::-webkit-scrollbar-thumb:active { background-color:#4b5563; }

::-webkit-scrollbar-corner { background-color:#0d1117; }

/* the code viewer is a dark box inside a dark page: keep its thumb lighter */
.codeview ::-webkit-scrollbar-track { border-left:solid #21262d 1px; }
.codeview-body ::-webkit-scrollbar-thumb { background-color:#3d444d; }

/* Old-style embedded scrollbars would draw a light box in the corner. */
::-webkit-resizer { background-color:#21262d; }

/* ==========================================================================
   Folding, and the click-to-open-file control.
   ========================================================================== */

details.fold > summary
{
    cursor:pointer;
    display:inline-block;
    font-size:85%;
    padding:3px 10px;
    margin:0 0 4px 0;
    border:solid #444c56 1px;
    border-radius:3px;
    background-image:linear-gradient(#2d333b, #22272e);
    color:#c9d1d9;
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.06);
    list-style:none;
}

details.fold > summary::-webkit-details-marker { display:none; }
details.fold > summary::before { content:"\25b8  "; color:#8b949e; }
details.fold[open] > summary::before { content:"\25be  "; }
details.fold > summary:hover
{
    background-image:linear-gradient(#39414b, #2a313a);
    border-color:#586069;
    color:#e6edf3;
}
details.fold[open] > summary { margin-bottom:6px; }

/* the small "view" button on every row of a file list */
.fileopen
{
    font-family:inherit;
    font-size:72%;
    line-height:1.5em;
    padding:0 6px;
    border:solid #444c56 1px;
    border-radius:3px;
    background-image:linear-gradient(#2d333b, #22272e);
    color:#79c0ff;
    cursor:pointer;
    white-space:nowrap;
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.fileopen:hover
{
    background-image:linear-gradient(#39414b, #2a313a);
    border-color:#586069;
    color:#a5d6ff;
}
.fileopen:active { box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.5); }

/* the header's all + / all - control */
.navtools { float:right; font-weight:normal; }
.navtools button
{
    font-family:inherit;
    font-size:72%;
    padding:0 5px;
    margin-left:3px;
    border:solid #444c56 1px;
    border-radius:3px;
    background-image:linear-gradient(#2d333b, #22272e);
    color:#c9d1d9;
    cursor:pointer;
}
.navtools button:hover { border-color:#586069; color:#e6edf3; }
.navhint { font-size:75%; color:#8b949e; margin:0 0 4px 0; }

/* ==========================================================================
   Sticky table headers, fixed.

   A sticky header only paints correctly on a table with separate borders. With
   the collapsed ones (.glist's default) Chromium repositions the header cell's
   text but leaves its background behind, so the rows you scroll past show
   through the header row and the column titles turn into a smear. Separate
   borders with no spacing give the same single-line grid and a header that
   actually covers what scrolls under it.
   ========================================================================== */

.tablewrap .glist
{
    border-collapse:separate;
    border-spacing:0;
}

.tablewrap .glist thead th
{
    background-color:#262c36;
    background-image:linear-gradient(#2b323c, #202630);
    border-width:0 1px 1px 0;
    border-style:solid;
    border-color:#3d444d;
    z-index:3;
}

.tablewrap .glist tbody td, .tablewrap .glist tbody th
{
    background-color:#171c23;
    border-width:0 1px 1px 0;
    border-style:solid;
    border-color:#21262d;
}

/* the rows own the grid now, so the outer edge is not drawn twice */
.tablewrap .glist tr > *:last-child { border-right-width:0; }
.tablewrap .glist tbody tr:last-child > * { border-bottom-width:0; }

/* cell backgrounds are opaque, so the hover has to move to the cells */
.tablewrap .glist tr:hover > * { background-color:#20262e; }
.tablewrap .glist thead tr:hover > * { background-image:linear-gradient(#2b323c, #202630); }

/* ==========================================================================
   Ai_Bob: the assistant in the bottom corner.

   Same palette and the same 1px edges as the rest of the site, so it reads as
   another panel of the page rather than a modern chat widget dropped on top.
   ========================================================================== */

.bob
{
    position:fixed;
    right:12px;
    bottom:12px;
    z-index:400;
    text-align:left;
    font-size:95%;
}

.bob-toggle
{
    font-family:inherit;
    font-size:95%;
    font-weight:bold;
    letter-spacing:0.06em;
    padding:4px 12px;
    border:solid #444c56 1px;
    border-radius:4px;
    background-image:linear-gradient(#3a4553, #232b35);
    color:#e6edf3;
    cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.5);
}
/* the same portrait, small, inside the button and the panel header */
.bob-toggle .bob-face
{
    display:inline-block;
    vertical-align:-5px;
    width:18px;
    height:18px;
    margin-right:5px;
    border-radius:2px;
    background-size:240% auto;
}
.bob-head .bob-face { width:22px; height:22px; align-self:center; }

.bob-toggle:hover { background-image:linear-gradient(#46525f, #2b3440); border-color:#586069; }
.bob-toggle:active { box-shadow:inset 0 2px 5px rgba(0, 0, 0, 0.55); }
.bob.closed .bob-toggle::before { content:"\25cf  "; color:#3fb950; }

.bob-panel
{
    display:flex;
    flex-direction:column;
    width:min(400px, calc(100vw - 24px));
    height:min(62vh, 560px);
    margin-bottom:6px;
    background-color:#0d1117;
    border:solid #30363d 1px;
    border-radius:4px;
    box-shadow:0 12px 40px rgba(0, 0, 0, 0.65);
}
.bob-panel[hidden] { display:none; }

.bob-head
{
    display:flex;
    align-items:baseline;
    gap:6px;
    padding:5px 8px;
    border-bottom:solid #21262d 1px;
    background-image:linear-gradient(#1b222b, #12171e);
    border-radius:3px 3px 0 0;
}
.bob-name { font-weight:bold; color:#e6edf3; letter-spacing:0.04em; }
.bob-sub { font-size:78%; color:#8b949e; }
.bob-x
{
    margin-left:auto;
    font-family:inherit;
    font-size:95%;
    line-height:1em;
    padding:1px 6px;
    border:solid #444c56 1px;
    border-radius:3px;
    background-image:linear-gradient(#2d333b, #22272e);
    color:#c9d1d9;
    cursor:pointer;
}
.bob-x:hover { border-color:#586069; color:#ffffff; }

.bob-log
{
    flex:1 1 auto;
    overflow-y:auto;
    padding:8px;
    background-color:#0b0f14;
}
.bob-msg
{
    display:flex;
    gap:6px;
    align-items:flex-start;
    margin:0 0 8px 0;
}
.bob-said { min-width:0; padding:6px 8px; border-radius:3px; }
.bob-you { flex-direction:row-reverse; }
.bob-you .bob-said
{
    background-color:#17263d;
    border:solid #1f6feb 1px;
    color:#e6edf3;
    max-width:86%;
}
.bob-bot .bob-said
{
    flex:1 1 auto;
    background-color:#12171e;
    border:solid #21262d 1px;
    color:#c9d1d9;
}

/* Shop Bob's portrait. The source is a 312x236 screenshot of the NPC, so it is
   scaled up past the box and anchored at the top: head and shoulders, and
   pixelated rather than smoothed, the way the game draws him. */
.bob-face
{
    flex:0 0 auto;
    width:30px;
    height:30px;
    border:solid #30363d 1px;
    border-radius:3px;
    background-color:#191512;
    background-image:url('pub/bob.png');
    background-repeat:no-repeat;
    background-size:240% auto;
    background-position:50% 6%;
    image-rendering:pixelated;
}

/* the typing line: three dots, so the pause looks like someone typing */
.bob-typing .bob-said { color:#8b949e; font-size:90%; }
.bob-whiledoing { color:#6e7681; }
.bob-dots { display:inline-block; }
.bob-dots i
{
    display:inline-block;
    width:3px;
    height:3px;
    margin:0 1px 1px 0;
    border-radius:50%;
    background-color:#8b949e;
    animation:bobdot 1.05s infinite ease-in-out;
}
.bob-dots i:nth-child(2) { animation-delay:0.18s; }
.bob-dots i:nth-child(3) { animation-delay:0.36s; }
@keyframes bobdot
{
    0%, 60%, 100% { opacity:0.25; transform:translateY(0); }
    30% { opacity:1; transform:translateY(-2px); }
}
.bob-title
{
    font-weight:bold;
    color:#e6edf3;
    display:block;
    margin:0 0 4px 0;
    border-bottom:solid #21262d 1px;
    padding-bottom:3px;
}
.bob-msg p { margin:0.4em 0; }
.bob-msg h4
{
    margin:0.7em 0 0.2em 0;
    font-size:85%;
    font-variant:small-caps;
    letter-spacing:0.04em;
    color:#8b949e;
}
.bob-msg ol, .bob-msg ul { margin:0.2em 0 0.4em 0; padding-left:1.2em; }
.bob-msg li { margin:0.25em 0; }
.bob-msg code { font-size:90%; }
.bob-msg a { color:#79c0ff; }

.bob-files, .bob-pages { list-style:none; padding-left:0 !important; }
.bob-files li, .bob-pages li
{
    border-top:solid #171c23 1px;
    padding:3px 0 3px 0;
}
.bob-page-first { border-top:none; }
.bob-act
{
    display:inline-block;
    font-size:70%;
    font-variant:small-caps;
    letter-spacing:0.05em;
    padding:0 4px;
    margin-right:4px;
    border:solid #30363d 1px;
    border-radius:3px;
    background-color:#1c2128;
    color:#8b949e;
}
.bob-files .path { font-size:88%; color:#e6edf3; }

.bob-note
{
    margin-top:6px;
    padding:4px 6px;
    border-left:solid #d29922 2px;
    background-color:#161a20;
    color:#c9d1d9;
    font-size:90%;
}

.bob-tools
{
    margin-top:8px;
    padding-top:6px;
    border-top:solid #21262d 1px;
    font-size:85%;
}
.bob-alt { color:#8b949e; display:inline-block; margin-left:4px; }

.bob-search, .bob-chip
{
    font-family:inherit;
    font-size:80%;
    padding:1px 7px;
    margin:2px 3px 2px 0;
    border:solid #444c56 1px;
    border-radius:3px;
    background-image:linear-gradient(#2d333b, #22272e);
    color:#79c0ff;
    cursor:pointer;
}
.bob-search:hover, .bob-chip:hover
{
    background-image:linear-gradient(#39414b, #2a313a);
    border-color:#586069;
    color:#a5d6ff;
}
.bob-chips { margin-top:4px; line-height:1.9em; }

/* Bob's own line, kept quieter than the answer it introduces */
.bob-tell
{
    margin:0.3em 0 0.5em 0 !important;
    color:#8b949e;
    font-size:92%;
}

/* the config file a design answer suggests */
.bob-cfg { margin:0.4em 0 0.6em 0; border:solid #21262d 1px; border-radius:3px; }
.bob-cfgbar
{
    display:flex;
    justify-content:space-between;
    gap:8px;
    padding:2px 6px;
    border-bottom:solid #21262d 1px;
    background-image:linear-gradient(#1b222b, #12171e);
    font-size:80%;
}
.bob-cfg pre
{
    margin:0;
    padding:6px 7px;
    max-height:340px;
    overflow:auto;
    background-color:#0b0f14;
    font-family:"Courier New", Courier, monospace;
    font-size:90%;
    line-height:1.4em;
}
.bob-cfg code { font-size:100%; background-color:transparent; border-style:none; padding:0; }
.bob-check { list-style:none; padding-left:0 !important; }
.bob-check li { padding:2px 0 2px 12px; position:relative; }
.bob-check li::before { content:"\25b8"; position:absolute; left:0; color:#d29922; }

.bob-form
{
    display:flex;
    gap:4px;
    padding:6px;
    border-top:solid #21262d 1px;
    background-image:linear-gradient(#1b222b, #12171e);
    border-radius:0 0 3px 3px;
}
.bob-form input
{
    flex:1 1 auto;
    min-width:0;
    font-family:inherit;
    font-size:90%;
    padding:2px 5px;
    border:solid #3d444d 1px;
    border-radius:3px;
    background-color:#0d1117;
    color:#c9d1d9;
}
.bob-form input:focus { border-color:#1f6feb; outline:none; }
.bob-form button
{
    font-family:inherit;
    font-size:85%;
    padding:2px 10px;
    border:solid #1f6feb 1px;
    border-radius:3px;
    background-image:linear-gradient(#2f81f7, #1f6feb);
    color:#ffffff;
    cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.bob-form button:hover { background-image:linear-gradient(#4793f8, #2a75e0); }


/* ==========================================================================
   Presentation: what makes a large reference site skimmable.

   Everything above is the EOSERV theme with its palette, its 1px edges and its
   Windows-era bevels, kept as it was. This block is the layer that gives a page
   a shape: a head that says what the page is, a measured reading column with the
   outline of it beside, cards for the front door, and a foot that points at the
   next page in the section. Same colours, same edges: it should read as the same
   site, only organised.
   ========================================================================== */

:root
{
    --panel:#171c23;
    --panel-2:#262c36;
    --line:#3d444d;
    --line-soft:#21262d;
    --ink:#e6edf3;
    --text:#c9d1d9;
    --muted:#8b949e;
    --accent:#58a6ff;
    --ok:#3fb950;
    --danger:#f85149;
    --measure:74ch;
    --radius:4px;
    --page:1180px;
}

/* A wider shell, because the reading column now shares the page with an outline. */
#header, ul.menu, #body, #footer { max-width:var(--page); }

body { font-size:15px; line-height:1.6; }
#article { font-size:15px; line-height:1.65; }

/* ------------------------------------------------------------------ type -- */

/* The theme set body text at 10pt with 1.25 line-height, which is what makes a
   long reference page read as a wall. Spacing does most of the organising here:
   room above a heading, less below it, and a line length that stops at a
   comfortable measure instead of running the width of a wide screen. */
#article p { margin:0.8em 0; line-height:1.65; }
#article li { margin:0.35em 0; line-height:1.6; }
#article ul, #article ol { padding-left:1.45em; }
#article li > ul, #article li > ol { margin:0.3em 0; }
#article dd { margin:0 0 0.4em 1.4em; }

#article h1
{
    border:0;
    font-size:1.9rem;
    line-height:1.2;
    margin:0 0 0.3rem -2pt;
    letter-spacing:0.01em;
}

#article h2
{
    font-size:1.3rem;
    line-height:1.3;
    margin:2.4em 0 0.55em -2pt;
    padding-bottom:0.28rem;
    border-bottom:solid var(--line-soft) 1px;
}

#article h3 { font-size:1.06rem; line-height:1.35; margin:1.7em 0 0.45em 0; }
#article h4 { font-size:0.95rem; margin:1.3em 0 0.35em 0; color:#d6dee8; }
#article h5, #article h6 { font-size:0.9rem; color:var(--muted); }

/* The # beside a heading, which links to that section. Quiet until wanted. */
#article .hlink
{
    font:inherit;
    font-size:0.8em;
    vertical-align:middle;
    background:none;
    border:0;
    padding:0 0.25em;
    margin:0;
    color:#4b5563;
    cursor:pointer;
    opacity:0;
}
#article h2:hover .hlink, #article h3:hover .hlink, #article .hlink:focus { opacity:1; }
#article .hlink:hover { color:var(--accent); }

kbd { border-radius:3px; padding:0 3px; }

/* -------------------------------------------------------------- page head -- */

.page-head { border-bottom:solid var(--line) 1px; padding:0 0 0.7rem; margin:0 0 1.1rem; }
.page-kicker
{
    margin:0.2rem 0 0.3rem;
    font-size:0.72rem;
    font-weight:bold;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--muted);
}
.page-lead { font-size:1.03rem; color:#d6dee8; max-width:var(--measure); }
.page-head .page-lead { margin:0.45rem 0 0; }

.tagrow { display:flex; flex-wrap:wrap; gap:0.35rem; margin:0.6rem 0 0; }
.tagrow a
{
    display:inline-block;
    font-size:0.75rem;
    padding:1px 8px;
    border:solid var(--line) 1px;
    border-radius:999px;
    background-color:#1c222b;
    color:var(--muted);
    text-decoration:none;
}
.tagrow a:hover { color:var(--accent); border-color:#586069; background-color:#232a34; }

/* ------------------------------------------------------------ breadcrumbs -- */

/* A list, not a sentence: it reads the same at every depth and can be styled as
   one row. The box the theme drew around it is gone, so the head starts the page. */
#loc-bar { border:0; background:none; padding:0; margin:0.2rem 0 0.9rem; }
.crumbs ol
{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    margin:0;
    padding:0;
    font-size:0.82rem;
    color:var(--muted);
}
.crumbs li { display:flex; align-items:center; margin:0; }
.crumbs li + li::before { content:"\203a"; margin:0 0.45rem; color:#4b5563; }
.crumbs a { color:var(--muted); text-decoration:none; }
.crumbs a:hover { color:var(--accent); text-decoration:underline; }
.crumbs [aria-current="page"] { color:var(--text); }

/* ------------------------------------------------------ reading column + rail -- */

.page-grid { display:flex; align-items:flex-start; gap:1.7rem; }
.page-grid.no-rail { display:block; }
.page-main { flex:1 1 auto; min-width:0; }

/* Prose stops at a comfortable measure. Tables, code and the wide blocks keep the
   full width, because those are read by column rather than by line. */
.page-main > p,
.page-main > ul,
.page-main > ol,
.page-main > dl,
.page-main > blockquote,
.page-main > h2,
.page-main > h3,
.page-main > h4 { max-width:var(--measure); }

.page-rail
{
    flex:0 0 208px;
    position:sticky;
    top:12px;
    max-height:calc(100vh - 24px);
    overflow:auto;
    font-size:0.85rem;
}

.rail-block
{
    border:solid var(--line-soft) 1px;
    border-radius:var(--radius);
    background-color:#141a21;
    padding:0.5rem 0.6rem;
    margin:0 0 0.7rem 0;
}
.rail-title
{
    margin:0 0 0.35rem 0;
    font-size:0.72rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--muted);
}
.rail-list { list-style:none; margin:0; padding:0; }
.rail-list li { display:block; margin:0; }
.rail-list a, .toc-link
{
    display:block;
    width:100%;
    text-align:left;
    font:inherit;
    font-size:0.85rem;
    color:var(--text);
    text-decoration:none;
    background:none;
    border:0;
    border-left:solid transparent 2px;
    border-radius:0 3px 3px 0;
    padding:0.2rem 0.35rem;
    margin:0;
    cursor:pointer;
}
.rail-list a:hover, .toc-link:hover { color:var(--accent); background-color:#1b222b; }
.toc-link[aria-current="true"]
{
    color:var(--ink);
    font-weight:bold;
    border-left-color:var(--accent);
    background-color:#1b222b;
}
.toc-h3 .toc-link { padding-left:0.9rem; font-size:0.79rem; color:var(--muted); }
.rail-top { text-align:center; }
.linkbtn
{
    font:inherit;
    font-size:0.82rem;
    background:none;
    border:0;
    padding:0.15rem 0.3rem;
    color:var(--muted);
    cursor:pointer;
}
.linkbtn:hover { color:var(--accent); text-decoration:underline; }

/* The outline was a row of chips inside the prose; in the rail it is a list. */
.page-rail .toc ul { list-style:none; margin:0; padding:0; }
.page-rail .toc li { display:block; margin:0; }

/* -------------------------------------------------------------- page foot -- */

.page-foot { margin:1.3rem 0 0; padding-top:0.7rem; border-top:solid var(--line-soft) 1px; }
.page-foot .src { font-size:0.83rem; color:var(--muted); margin:0.15rem 0; }
.page-foot .src b { color:var(--text); }
.page-meta { margin:1.1rem 0 0; padding-top:0.5rem; border-top:solid var(--line-soft) 1px; font-size:0.78rem; color:#6e7681; }

.pager { display:flex; gap:0.7rem; margin:1.2rem 0 0; }
.pager-cell
{
    flex:1 1 0;
    min-width:0;
    display:block;
    border:solid var(--line-soft) 1px;
    border-radius:var(--radius);
    background-color:#151b23;
    padding:0.55rem 0.7rem;
    text-decoration:none;
}
.pager-cell.next { text-align:right; }
.pager-cell:hover { border-color:#586069; background-color:#1a212a; }
.pager-cell.empty { background:none; border-color:transparent; }
.pager-dir
{
    display:block;
    font-size:0.7rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--muted);
}
.pager-title { display:block; font-size:0.92rem; color:var(--ink); }

/* ----------------------------------------------------------------- cards -- */

/* A grid of doors, not a grid of link lists: the whole tile is one link, so a
   card reads as a card instead of as a heading with blue words under it. */
.cards
{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(min(100%, 206px), 1fr));
    gap:0.7rem;
    margin:0 0 1.6rem 0;
}
.card
{
    display:flex;
    align-items:flex-start;
    gap:0.6rem;
    border:solid var(--line) 1px;
    border-radius:var(--radius);
    background-color:#151b23;
    padding:0.7rem 0.75rem;
    text-decoration:none;
    color:inherit;
    font-weight:normal;
}
.card:hover { border-color:#586069; background-color:#1a212a; box-shadow:0 2px 10px rgba(0, 0, 0, 0.35); }
.card:hover .card-title { color:var(--accent); }
.card:hover .card-go { opacity:1; transform:translateX(2px); }

/* The section's initial, so the cards are told apart by shape as well as by
   name. Nothing to download, and it survives a rename of the section. */
.card-badge
{
    flex:0 0 auto;
    width:26px;
    height:26px;
    line-height:24px;
    text-align:center;
    font-weight:bold;
    font-size:0.85rem;
    border:solid var(--line) 1px;
    border-radius:50%;
    background-color:#1b2430;
    color:var(--accent);
}
.card-body { flex:1 1 auto; min-width:0; }
.card-title
{
    display:block;
    font-weight:bold;
    font-size:0.95rem;
    line-height:1.3;
    color:var(--ink);
}
/* Descriptions are a hint, not a paragraph: three lines keep every card in a
   row the same height, so the grid reads as a grid. */
.card-desc
{
    margin:0.15rem 0 0 0;
    font-size:0.8rem;
    line-height:1.42;
    color:var(--muted);
    max-width:none;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.card-foot
{
    display:block;
    margin:0.5rem 0 0 0;
    font-size:0.68rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#6e7681;
}
.card-go
{
    flex:0 0 auto;
    align-self:center;
    margin-left:auto;
    color:var(--muted);
    opacity:0.25;
    transition:opacity 0.12s linear, transform 0.12s linear;
}

/* The heading of a section on a generated page: a sentence under the title, so
   a grid of cards is introduced rather than dropped on the reader. */
.section-hint
{
    margin:0 0 0.75rem 0;
    font-size:0.85rem;
    color:var(--muted);
    max-width:var(--measure);
}
/* A path or an identifier with no spaces in it can be wider than a phone screen,
   and it is one unbreakable word: let it break rather than run off the edge. A
   code block is meant to be read in its original shape, so it still scrolls. */
#article p, #article li, #article dl, #article dd, #article dt, #article td,
#article th, #article h1, #article h2, #article h3, #article h4, #article .mono
{
    overflow-wrap:break-word;
}
#article pre, #article pre * { overflow-wrap:normal; }

.home-cards { margin:0 0 1.4rem 0; }
.home-cards > h2 { margin-top:2.2rem; }
.home-cards > h2 + .section-hint { margin-top:0.35rem; }

/* ---------------------------------------------------------------- tables -- */

/* A long table is read by column: keep the head in view, keep the rows apart,
   and let the filter bar sit where the reader's eye already is. */
.tablewrap { max-height:70vh; }
/* The prose tables the router wraps scroll sideways like the generated ones, but
   a long list of rules is still read down the page, so they get no height cap. */
.prosewrap { width:100%; max-height:none; }
.glist tbody td, .glist tbody th { padding:0.35em 0.55ex; }
.glist caption { text-align:left; font-size:0.95rem; padding:0.35rem 0.6rem; }
.tablewrap .glist tbody tr:nth-child(even) > * { background-color:#151a21; }
.tablewrap .glist tbody tr:hover > * { background-color:#20262e; }

.filters { display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem; margin:0.7rem 0 0.45rem; }
.filters input[type="search"], .filters select { border-radius:3px; font-size:0.85rem; padding:0.2rem 0.45rem; }

/* -------------------------------------------------------------- callouts -- */

.notice { border-radius:var(--radius); padding:0.55rem 0.8rem; }
.notice .title { letter-spacing:0.02em; color:var(--ink); }
.notice.info { border-left-color:#3f6ea8; background-color:#141b24; }
.notice.ok { border-left-color:var(--ok); background-color:#131e18; }
.notice.danger { border-left-color:var(--danger); background-color:#20151a; }

/* --------------------------------------------------------------- sidebar -- */

/* The sentence that says what a section is for, under its name. Hidden while
   the section is folded, so the outline stays a list of headings. */
.navsec.closed .navsec-desc { display:none; }
.navsec-desc
{
    display:block;
    margin:0.1rem 0 0.3rem 0;
    font-size:0.72rem;
    font-weight:normal;
    line-height:1.35;
    color:#6e7681;
}
.navsec-title { font-size:0.92rem; }
.navlink { font-size:0.86rem; }

/* ------------------------------------------------------------- small screens -- */

/* The one-column layout lives at the end of this file, so it is the last word on
   every rule it touches. */

/* ------------------------------------------------------------ focus, motion -- */

:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
[data-scroll], [id] { scroll-margin-top:14px; }

.skip
{
    position:absolute;
    left:-9999px;
    top:0;
    z-index:200;
    background-color:#0d1117;
    border:solid var(--line) 1px;
    padding:0.4rem 0.7rem;
}
.skip:focus { left:8px; top:8px; }

/* Back to top, opposite corner from Ai_Bob so the two never overlap. It appears
   once there is something to scroll back from. */
.totop
{
    position:fixed;
    left:12px;
    bottom:12px;
    z-index:60;
    width:34px;
    height:34px;
    font-size:1rem;
    line-height:1;
    border:solid var(--line) 1px;
    border-radius:var(--radius);
    background-image:linear-gradient(#2b323c, #202630);
    color:var(--text);
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.15s linear;
}
.totop.show { opacity:0.92; pointer-events:auto; }
.totop:hover { color:var(--accent); border-color:#586069; }

@media (prefers-reduced-motion:reduce)
{
    html { scroll-behavior:auto; }
    .totop { transition:none; }
}

/* ==========================================================================
   The top bar, and the one-column layout.

   Two things this fixes. The menu bar was a centred row of inline-blocks as tall
   as the text inside them, with the sprite tiles painted on the list items at a
   fixed offset: the labels and their icons never lined up, and the bar was three
   pixels shorter than the items in it. It is now one flex row whose items carry
   their own tile, and it sticks to the top of the screen, because on a reference
   site the section you want is rarely the section you are in.

   The second is that the layout had no narrow-screen story beyond dropping the
   sidebar into the page flow, which put search, tags and seventy page links in
   front of the article on every phone. Below the layout's breakpoint the sidebar
   is a panel behind the Browse button instead, the outline becomes a row of chips
   above the text, and search results open over the page rather than beside it.
   ========================================================================== */

/* ----------------------------------------------------------------- top bar -- */

ul#mainmenu
{
    display:flex;
    justify-content:center;
    align-items:stretch;
    flex-wrap:wrap;
    /* 800pt in the theme's own rule beats ul.menu in the wider shell's, which is
       what left the bar 113px narrower than the page it sits on. */
    max-width:var(--page);
    height:auto;
    min-height:2.2rem;
    position:sticky;
    top:0;
    z-index:90;
    background-color:#262c36 !important;
    border:solid #1b222b 1px;
    border-width:1px 0;
    box-shadow:0 2px 8px rgba(0, 0, 0, 0.45);
}

ul#mainmenu > li
{
    display:flex;
    align-items:stretch;
    background-image:none;
}
/* the theme paints the sprite on the list item, and again on hover: both go */
ul#mainmenu > li:hover { background-image:none; background-color:#171c23; }
ul#mainmenu > li + li { border-left:solid #1b222b 1px; }

ul#mainmenu > li > a,
.nav-toggle
{
    display:inline-flex;
    align-items:center;
    gap:0.5em;
    height:100%;
    padding:0 1.05em;
    font-family:inherit;
    font-size:0.92rem;
    font-weight:bold;
    color:#c9d1d9;
    background:none;
    border:0;
    text-decoration:none;
    cursor:pointer;
}
ul#mainmenu > li > a::before
{
    content:"";
    flex:0 0 auto;
    width:16px;
    height:20px;
    background-image:url('pub/mainmenu-dark.png');
    background-repeat:no-repeat;
}
li.menu-home > a::before { background-position:0 0; }
li.menu-download > a::before { background-position:0 -20px; }
li.menu-wiki > a::before { background-position:0 -40px; }
li.menu-bugs > a::before { background-position:0 -60px; }
li.menu-forum > a::before { background-position:0 -80px; }
li.menu-servers > a::before, li.menu-credits > a::before { background-position:0 -100px; }

ul#mainmenu > li > a:hover,
ul#mainmenu > li.open > a,
ul#mainmenu > li > a:focus-visible { color:var(--accent); background-color:#171c23; }

/* The Browse button: it exists for the narrow layout, and on a wide one the
   sidebar is already beside the text. */
.nav-toggle { display:none; }
.nav-bars
{
    display:inline-block;
    width:14px;
    height:2px;
    border-radius:1px;
    background-color:#c9d1d9;
    box-shadow:0 -5px 0 #c9d1d9, 0 5px 0 #c9d1d9;
}
.nav-toggle[aria-expanded="true"] .nav-bars
{
    background-color:var(--accent);
    box-shadow:0 -5px 0 var(--accent), 0 5px 0 var(--accent);
}
.nav-close, .nav-backdrop { display:none; }

/* A touch screen has no real hover: a tap sets :hover and it stays set, so the
   Wiki panel would hang open over the page the reader just asked for. On such a
   screen the panel opens from the tap handler in app.js instead. */
@media (hover: none)
{
    ul#mainmenu li:hover > ul.submenu { display:none; }
    ul#mainmenu li.open > ul.submenu,
    ul#mainmenu li:focus-within > ul.submenu { display:block; }
}


/* --------------------------------------------------------------- narrow -- */

@media screen and (max-width:1080px)
{
    #body { min-height:0; }
    #article { padding-right:4px; }
    #article h1 { font-size:1.6rem; }
    .pager { flex-direction:column; }

    .nav-toggle { display:inline-flex; }

    /* the sidebar, as a panel that opens over the article */
    #sidebar
    {
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        left:auto;
        width:min(86vw, 340px);
        max-height:none;
        padding:0.5rem 0.5rem 3.5rem 0.5rem;
        overflow-y:auto;
        overflow-x:hidden;
        background-color:#10151c;
        border-left:solid var(--line) 1px;
        box-shadow:-10px 0 28px rgba(0, 0, 0, 0.55);
        transform:translateX(102%);
        z-index:180;
    }
    /* The slide is switched on by the first tap, not by the stylesheet: a
       transition declared up front also runs when the page loads narrower than
       the breakpoint, which reads as the panel flashing open and shut. */
    #sidebar.animate { transition:transform 0.18s ease-out; }
    #sidebar.open { transform:none; }
    body.nav-open { overflow:hidden; }

    .nav-close
    {
        display:block;
        position:sticky;
        top:0;
        width:100%;
        margin:0 0 0.5rem 0;
        padding:0.4rem 0.6rem;
        font-family:inherit;
        font-size:0.85rem;
        font-weight:bold;
        text-align:left;
        color:var(--text);
        background-color:#1b222b;
        border:solid var(--line) 1px;
        border-radius:var(--radius);
        cursor:pointer;
        z-index:2;
    }
    .nav-close:hover { color:var(--accent); border-color:#586069; }

    .nav-backdrop:not([hidden])
    {
        display:block;
        position:fixed;
        left:0;
        top:0;
        right:0;
        bottom:0;
        background-color:rgba(3, 6, 10, 0.62);
        z-index:175;
    }

    /* search results: a sheet over the page, not a box squeezed beside it */
    .searchresults
    {
        position:fixed;
        left:8px;
        right:8px;
        top:auto;
        bottom:8px;
        width:auto;
        max-height:min(72vh, 620px);
        z-index:200;
        border-radius:var(--radius);
    }

    /* One column: the flex item must stretch, or a wide table or code block sizes
       the reading column to its own width and the page scrolls sideways inside
       #body's overflow clip. */
    .page-grid { flex-direction:column; gap:0.9rem; align-items:stretch; }

    /* the outline, as chips above the article */
    .page-rail { display:contents; }
    .page-rail .toc { order:0; margin:0; }
    .page-main { order:1; }
    .page-rail .rail-block:not(.toc) { order:2; margin:0; }
    .page-rail .toc .rail-list { display:flex; flex-wrap:wrap; gap:0.3rem 0.35rem; }
    .page-rail .toc .toc-h3 { display:none; }
    .page-rail .toc .toc-link
    {
        display:inline-block;
        width:auto;
        border:solid var(--line-soft) 1px;
        border-radius:999px;
        padding:0.12rem 0.6rem;
        font-size:0.78rem;
    }
    .page-rail .toc .toc-link[aria-current="true"] { border-color:var(--accent); }

    .page-main > * { max-width:none; }
    /* 100% of the column, padding included: the theme sizes everything content-box,
       so a full-width post with its own padding would hang off the right edge. */
    .newspost { width:100%; box-sizing:border-box; }
}

@media screen and (max-width:640px)
{
    #header { height:auto; margin-top:0.7rem; padding:0.3rem 0.5rem 0.4rem; }
    #header h1 { letter-spacing:0.2ex; }
    #header #slogan { position:static; display:block; text-align:right; font-size:0.72rem; }
    #article { margin:0 4px; }
    #article h1 { font-size:1.4rem; }
    #article h2 { font-size:1.15rem; }

    ul#mainmenu > li > a, .nav-toggle { padding:0 0.55em; font-size:0.8rem; }
    ul#mainmenu > li > a::before { display:none; }

    /* The section list under the Wiki button, as a full-width panel. Anchored to
       its own item, a 232px drop-down hangs off the right of a 360px screen, so
       the bar itself becomes the containing block and the panel spans it. */
    ul#mainmenu > li { position:static; }
    ul#mainmenu li > ul.submenu
    {
        left:5px;
        right:5px;
        top:100%;
        width:auto;
        min-width:0;
        max-width:none;
        border-radius:0 0 var(--radius) var(--radius);
    }

    /* The outline, as one scrollable strip: a wrapped block of chips ran to four
       rows on a phone, which is most of the first screen spent on links. */
    .page-rail .toc .rail-list { flex-wrap:nowrap; overflow-x:auto; padding-bottom:0.25rem; }
    .page-rail .toc .toc-link { white-space:nowrap; }

    .cards { grid-template-columns:1fr; }
    .card-desc { -webkit-line-clamp:none; }
    .glist { font-size:0.85rem; }
    .totop { left:8px; bottom:8px; }
    .bob { right:8px; bottom:8px; }
    .newspost { padding:0.5rem; }
}

/* The panel's slide is decoration, so it goes when motion is not wanted. */
@media (prefers-reduced-motion:reduce)
{
    #sidebar.animate { transition:none; }
}