/* GenX-DOS wiki — home-page design language (dark CRT terminal).
   Generated by docs/wiki-src/build.py — edit there, not here. */
/* Type, palette and faces come from genx-doc.css, which the page links
   before this file — the same sheet every other document uses. */
/* Only what is specific to a wiki page: the frame, the sidebar, the search
   box and the hit list. Everything you read is set by genx-doc.css, which the
   page links before this file — the same sheet every other document uses. */
*{margin:0;padding:0}

.top{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.7rem 1.4rem;background:rgba(11,13,16,.9);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.top .brand{font-family:'Michroma',sans-serif;color:var(--amber);letter-spacing:.2em;border:0;font-size:.82rem}
.top .brand .w{color:var(--green);margin-left:.55rem;font-size:.62rem;letter-spacing:.25em}
.top .out{display:flex;gap:1.3rem}
.top .out a{color:var(--dim);border:0}
.top .out a:hover{color:var(--amber)}

.layout{display:flex;max-width:1180px;margin:0 auto;align-items:flex-start}
.side{position:sticky;top:49px;flex:0 0 248px;align-self:flex-start;max-height:calc(100dvh - 49px);overflow-y:auto;
  padding:1.9rem 1.2rem 3rem;border-right:1px solid var(--line);font-family:'IBM Plex Mono',monospace}
.side .grp{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin:1.6rem 0 .55rem}
.side .grp:first-child{margin-top:0}
.side ul{list-style:none;margin:0}
.side li{margin:.12rem 0}
.side a{display:block;padding:.3rem .55rem;border-radius:4px;color:var(--paper);border:0;
  font-size:.79rem;letter-spacing:.01em;line-height:1.35}
.side a:hover{background:var(--panel);color:var(--amber)}
.side a.active{background:var(--panel);color:var(--amber);box-shadow:inset 2px 0 0 var(--amber)}

.content{flex:1 1 auto;min-width:0;max-width:820px;padding:2.5rem 2.6rem 4.5rem}

/* --- search ------------------------------------------------------------ */
#q{width:100%;margin:.4rem 0 .2rem;padding:.7rem .9rem;background:var(--panel);
  color:var(--paper);border:1px solid var(--line);border-radius:5px;
  font-family:'IBM Plex Mono',monospace;font-size:.95rem}
#q:focus{outline:none;border-color:var(--amber)}
#q::placeholder{color:var(--dim)}
.tally{min-height:1.2rem;margin:.5rem 0 1.1rem;color:var(--green);
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase}
a.hit{display:block;margin:0 0 .55rem;padding:.75rem .9rem;border:1px solid var(--line);
  border-left:3px solid var(--line);border-radius:5px;background:var(--panel);
  color:var(--paper);text-decoration:none}
a.hit:hover{border-left-color:var(--amber);background:rgba(255,176,0,.05)}
.hit-h{display:block;color:var(--amber);font-family:'IBM Plex Mono',monospace;
  font-size:.86rem;letter-spacing:.02em}
.hit-p{display:block;margin:.15rem 0 .4rem;color:var(--green);
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase}
.hit-x{display:block;color:var(--dim);font-size:.9rem;line-height:1.5}
.hit-x mark{background:rgba(255,176,0,.22);color:var(--paper);border-radius:2px;padding:0 .1em}
.searchnote{margin-top:2rem;color:var(--dim);font-size:.86rem;font-style:italic}
/* h1..h4, p, strong, em, tables and kbd all come from genx-doc.css now. The
   page title keeps its rule underneath, which is a wiki-page thing rather
   than part of the language. */
.content h1{margin:0 0 1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}

/* A wiki table is prose and can be wide, so it scrolls inside its own box
   rather than squeezing the page. The look is genx-doc.css's; only the
   scrolling and the boxed cells are local.

   display:block is what makes the scrolling possible, and it is also why the
   box needs sizing: a block box takes the full width from genx-doc.css's
   table{width:100%} while the rows inside it shrink to their content, so a
   short table (Commands' Navigation and Keyboard) sat in a full-width border
   with a wide empty strip beside every row. width:max-content sizes the box
   to the table, and max-width keeps a wide one inside the column, still
   scrolling. */
.content table{display:block;overflow-x:auto;width:max-content;max-width:100%;
  border:1px solid var(--line);margin:0 0 1.3rem}
.content th,.content td{border:1px solid var(--line);padding:.5rem .7rem}

.foot{border-top:1px solid var(--line);color:var(--dim);text-align:center;
  padding:2.2rem 1.4rem 2.8rem;font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.04em;line-height:1.7}

@media(max-width:900px){
  .layout{flex-direction:column}
  .side{position:static;flex-basis:auto;width:100%;max-height:none;border-right:0;
    border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.15rem .8rem;padding:1rem 1.3rem 1.2rem}
  .side .grp{width:100%;margin:.55rem 0 .15rem}
  .side ul{display:flex;flex-wrap:wrap;gap:.1rem .3rem}
  .content{max-width:100%;padding:1.9rem 1.3rem 3.2rem}
}