/* The Platinum chrome a host without one of its own gets with the desk:
   the window, its striped bar and its close box, copied from the exe
   desktop (internal/server/ui/index.html), which is where this look is
   defined. A host that has these already renders the "stats" block
   inside its own document and never sees this. */
:root {
  --black: #262626;
  --g200: #eee; --g300: #ddd; --g400: #ccc; --g500: #bbb; --g600: #999; --g700: #808080; --g800: #666;
  --hl: #333399; --lav: #ccf;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; padding: 24px 12px 48px; background: var(--g400); color: var(--black); cursor: default;
  padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
  font: 12px/1.45 "Charcoal", "Chicago", "Geneva", "Lucida Grande", "Lucida Sans", Verdana, sans-serif; }
a { color: var(--hl); }
.window { position: relative; max-width: 640px; margin: 0 auto 22px;
  background: var(--g400); border: 1px solid var(--black);
  box-shadow: 2px 2px 0 var(--black); }
.window::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.5), inset -1px -1px 0 var(--g600), inset 1px 1px 0 #fff; }
.titlebar { display: flex; align-items: center; gap: 4px; padding: 2px 4px;
  background: var(--g400); user-select: none; }
.titlebar .stripe { flex: 1; height: 12px; min-width: 8px; position: relative;
  background-color: var(--g300);
  background-image: linear-gradient(#fff, #fff 50%, #777 50%, #777);
  background-size: 100% 2px; background-repeat: repeat; }
.titlebar .stripe::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
  background-image: linear-gradient(#fff, #fff 50%, #ccc 50%, #ccc);
  background-size: 100% 2px; background-repeat: repeat; border-bottom: 1px solid #ccc; }
.titlebar .stripe::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px;
  background-image: linear-gradient(#ccc, #ccc 50%, #777 50%, #777);
  background-size: 100% 2px; background-repeat: repeat; }
.titlebar .title { font-weight: bold; font-size: 12px; line-height: 13px; padding: 0 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%;
  background: var(--g400); }
.tbox { display: block; width: 13px; height: 13px; flex: none; position: relative;
  border: none; padding: 0; cursor: default;
  background: linear-gradient(135deg, #9a9a9a 0%, #f1f1f1 100%) 50% / 9px 9px;
  box-shadow: inset 1px 1px 0 var(--g700), inset -1px -1px 0 #fff,
    inset 0 0 0 2px var(--black), inset 3px 3px 0 #fff, inset -3px -3px 0 var(--g700); }
.tbox:active::after { content: ""; position: absolute; inset: 2px; z-index: 1;
  background-image: linear-gradient(135deg, #353535cc 0%, #9c9c9ccc 100%); }
.frame { margin: 0 4px 4px; border: 1px solid var(--black); background: #fff;
  box-shadow: -1px -1px 0 var(--g600), 1px 1px 0 #fff; }
.statusbar { border-top: 1px solid var(--black); background: var(--g300);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.6), inset -1px -1px 0 #aaa;
  padding: 3px 8px; font-size: 11px; color: #333; display: flex; align-items: center; gap: 12px; }
.btn { display: inline-block; box-sizing: border-box; min-width: 58px; height: 20px; padding: 2px 13px;
  background: var(--g300); color: var(--black); text-decoration: none; text-align: center;
  font-size: 12px; line-height: 14px; font-weight: bold; white-space: nowrap;
  border: 1px solid var(--black); border-radius: 3px;
  box-shadow: inset 1px 1px 0 var(--g300), inset -1px -1px 0 #777, inset 2px 2px 0 #fff, inset -2px -2px 0 #aaa; }
.btn:active { background: var(--g800); color: #fff;
  box-shadow: inset 1px 1px 0 #444, inset -1px -1px 0 #888, inset 2px 2px 0 #555, inset -2px -2px 0 #777; }

/* The public site's own styles. The Platinum chrome — the window, its
   striped bar and close box, the sunken frame, the status strip and the
   push button — is not here: it is exe-stats' chrome.css, served ahead
   of this file as one stylesheet (site.go), so the homepage, the
   documentation and the stats desk wear one chrome and it is written
   once. That file is checked against the desktop, which defines the
   look (internal/server/ui/index.html). */
.btn { display: inline-block; min-width: 58px; height: 20px; padding: 2px 13px;
  background: #ddd; color: #262626; text-decoration: none; text-align: center; cursor: default;
  font-size: 12px; line-height: 14px; font-weight: bold; white-space: nowrap;
  border: 1px solid #262626; border-radius: 3px;
  box-shadow: inset 1px 1px 0 #ddd, inset -1px -1px 0 #777, inset 2px 2px 0 #fff, inset -2px -2px 0 #aaa; }
.btn:active { background: #666; color: #fff;
  box-shadow: inset 1px 1px 0 #444, inset -1px -1px 0 #888, inset 2px 2px 0 #555, inset -2px -2px 0 #777; }
/* the one the page is for wears the default ring */
.btn.default { outline: 2px solid #262626; outline-offset: 1px; border-radius: 4px; }

/* a status line with two ends: the first label stays at the left, the
   last is pushed to the right, and the room between them is whatever is
   left over rather than a fixed gap. The desktop sends its trailing
   figure over the same way (#chat-usage, .term-usage); the chrome's 12px
   gap is then only the least the two may be apart. */
.statusbar > :last-child:not(:first-child) { margin-left: auto; }

.body { padding: 16px 16px 4px; }
.head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.head img { display: block; width: 32px; height: 32px; flex: none; image-rendering: pixelated; }
h1 { margin: 0; font-size: 12px; line-height: 16px; }
h1 small { display: block; font-size: 12px; font-weight: normal; }
h2 { margin: 16px 0 4px; font-size: 12px; line-height: 16px; }
p { margin: 0 0 8px; }
ul { margin: 0 0 8px; padding: 0 0 0 18px; }
li { margin: 0 0 4px; }
code { font: 11px/1.45 Monaco, Menlo, Consolas, "DejaVu Sans Mono", monospace; }
/* the picture is a sunken field of its own; its box keeps the shot's
   shape, so nothing moves when the image arrives */
.shot { display: block; margin: 12px 0; border: 1px solid #262626; background: #ccf;
  box-shadow: -1px -1px 0 #999, 1px 1px 0 #fff; }
.shot img { display: block; width: 100%; height: auto; }
/* the button row: its own row under the text, 12px from the frame's
   edges and between buttons, the default rightmost */
.btnrow { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding: 8px 12px 12px; }
/* a terminal, as the desktop draws one: black, and wrapping at its edge
   as a terminal does, so a phone hides none of the instructions and the
   page never scrolls sideways */
.term { margin: 0; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; background: #000; color: #fff; cursor: text;
  font: 11px/1.5 Monaco, Menlo, Consolas, "DejaVu Sans Mono", monospace; }
/* the instructions are the terminal's comments: a title line over each
   step, a remark after a command */
.term .c { color: #999; }
/* a remark after a command goes to the next line whole when the terminal
   is too narrow for both, rather than leaving its # behind */
.term .t { display: inline-block; max-width: 100%; vertical-align: top; }
.term .p { color: #6c6; }
.foot { max-width: 720px; margin: 0 auto; text-align: center; font-size: 11px; color: #333; }
/* the count and the words it belongs to never break apart */
.foot code, .foot a { white-space: nowrap; }

/* ---- a documentation page (/docs/): the same type and the same window,
   with the room a long text needs. Its Markdown is rendered on the
   server; the only script on the site is the toolbar below, and a page
   reads without it. ---- */

/* the reader's two choices, kept in this browser and applied before the
   first paint (the head script). The Platinum chrome — the window face,
   its striped bar, the status strip — is the same in both modes: what
   turns is the paper the text is on and the desk behind it. */
body.docs {
  --page: #ccc; --paper: #fff; --ink: #262626; --quiet: #555;
  --link: #333399; --rule: #ddd; --cell: #999; --head: #ddd;
  background: var(--page);
}
html[data-theme="dark"] body.docs {
  --page: #3b3b3b; --paper: #1e1e1e; --ink: #dcdcdc; --quiet: #a5a5a5;
  --link: #9b9bff; --rule: #383838; --cell: #4e4e4e; --head: #2b2b2b;
}
body.docs .frame { background: var(--paper); }
body.docs .doc { color: var(--ink); }
body.docs .doc a { color: var(--link); }

/* the toolbar: its own row at the top of the frame, on the same platinum
   as the hub's find strip, so it is chrome and stays chrome in either
   mode. The trail is at its left and is there for everyone; the reader's
   two choices are at its right and are shown only where they do
   something (html.js, set by the head script) — from the first paint, so
   nothing appears late or moves. */
.strip.tools, .strip.foot { display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  background: #ddd; color: #333; font-size: 11px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.6), inset -1px -1px 0 #aaa; }
.strip.tools { border-bottom: 1px solid #262626; }
/* the foot is the same strip as the toolbar, to the pixel, with its seam
   along the top instead: the window is held between two of them */
.strip.foot { border-top: 1px solid #262626; }
.strip .fill { flex: 1 1 auto; min-width: 8px; }
/* who is reading, before the count: a person on the same pixel grid as
   the chevron, in the strip's own ink */
.strip .who { display: block; flex: none; width: 7px; height: 8px; color: #333;
  shape-rendering: crispEdges; }
.strip .who .k { fill: currentColor; }
.strip .here { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.strip .here:hover { text-decoration: underline; }
/* the contents: a button of the icon alone, the width of the bevel, as
   the hub's bell is */
.strip .btn.dir { min-width: 0; width: 20px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center; }
.strip .btn.dir .ix { display: block; width: 11px; height: 10px; shape-rendering: crispEdges; }
.strip .btn.dir .ix .k { fill: #262626; }
.strip .btn.dir:active .ix .k { fill: #fff; }
/* the directory it opens, over the page being read */
.tocbox { padding: 0; border: 0; background: none; max-width: 92vw; width: 540px; }
.tocbox::backdrop { background: rgba(38, 38, 38, .45); }
.tocbox .window { margin: 0; max-width: none; }
.tocbox .body { max-height: min(66vh, 560px); overflow-y: auto; }
.tocbox ul.toc { margin-top: 0; }
.tocbox ul.toc li a { min-width: 0; }
.tocbox ul.toc li { padding: 4px 0; }
/* the manual's chapters, a step in under the pages */
.tocbox ul.sub { margin-top: 0; padding-left: 16px; }
.tocbox ul.sub li { padding: 3px 0; border-top: 0; }
.tocbox ul.sub li:last-child { border-bottom: 0; }
.tocbox ul.sub li a { font-weight: normal; min-width: 0; }
/* the page this was asked from, named rather than offered */
.tocbox ul.toc a.at { color: var(--ink); text-decoration: none; cursor: default; }
.tocbox ul.toc a.at:hover { text-decoration: none; }
/* the way on is a push button, so it is pressable rather than a word in
   a line of text; on a phone the name goes and "Next" stays */
.strip.foot .btn { font-family: inherit; }
@media (max-width: 480px) { .strip.foot .btn .t { display: none; } }
.tools .prefs { display: none; align-items: center; gap: 8px; flex: none; }
html.js .tools .prefs { display: flex; }
/* the trail: where this page sits, in one line. It gives way before the
   buttons do — a long name is cut short rather than pushing them off. */
.tools .crumbs { display: flex; align-items: baseline; gap: 5px; min-width: 0;
  font-size: 11px; white-space: nowrap; overflow: hidden; }
.tools .crumbs .crumb { display: inline-flex; align-items: baseline; gap: 5px; flex: none; }
.tools .crumbs a { color: #333399; text-decoration: none; }
.tools .crumbs a:hover { text-decoration: underline; }
/* the step between two names is a chevron, drawn as the desktop draws a
   glyph: pixels on a grid, crisp at whole ratios; between 1 and 2 a
   fractional scale would drop a row of the diagonal, so it is smoothed
   there instead */
.tools .crumbs .sep { display: block; flex: none; align-self: center; margin: 0 1px;
  width: 4px; height: 7px; color: #777; shape-rendering: crispEdges; }
.tools .crumbs .sep .k { fill: currentColor; }
@media (min-resolution: 1.01dppx) and (max-resolution: 1.99dppx) {
  .tools .crumbs .sep { shape-rendering: geometricPrecision; }
}
/* this page's own name is the last thing to give way: it shortens with
   an ellipsis, and where even that is too narrow the steps above it go
   before it does, nearest first */
.tools .crumbs b { flex: 0 1 auto; min-width: 3em; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .tools .crumbs .crumb:not(:last-of-type) { display: none; } }
/* narrower than any phone: the page's own name alone, and the window's
   title bar says the same thing above it */
@media (max-width: 359px) { .tools .crumbs .crumb { display: none; } }
.tools .lbl { font-size: 11px; white-space: nowrap; }
.tools .fill { flex: 1 1 auto; min-width: 8px; }
/* on a phone the trail keeps the room: the word before the text buttons
   goes, the buttons say what they are by their glyphs */
@media (max-width: 480px) { .tools .lbl { display: none; } }
.tools .btn { min-width: 0; padding: 2px 10px; font-family: inherit; }
.tools .btn.sz { min-width: 28px; padding: 2px 6px; font-size: 13px; line-height: 12px; }
/* the paper choices share one edge, with rounded corners only at the
   two ends; their glyphs use the button's ink in either state */
.tools .theme { display: inline-flex; flex: none; }
.tools .theme .btn { display: inline-flex; align-items: center; justify-content: center;
  width: 28px; padding: 0; border-radius: 0; }
.tools .theme .btn:first-child { border-radius: 3px 0 0 3px; }
.tools .theme .btn:last-child { border-left: 0; border-radius: 0 3px 3px 0; }
.tools .theme .btn:focus-visible { position: relative; z-index: 1;
  outline: 2px solid #9999fe; outline-offset: 1px; }
.tools .theme svg { display: block; flex: none; fill: currentColor; shape-rendering: crispEdges; }
@media (min-resolution: 1.01dppx) and (max-resolution: 1.99dppx) {
  .tools .theme svg { shape-rendering: geometricPrecision; }
}
/* the mode in force wears the pressed look, as a held-down button does */
.tools .btn.on { background: #666; color: #fff;
  box-shadow: inset 1px 1px 0 #444, inset -1px -1px 0 #888, inset 2px 2px 0 #555, inset -2px -2px 0 #777; }
.tools .btn:disabled { color: #777; border-color: #888; box-shadow: none; }

/* the text's size: the page's own 12px and four steps either side of it,
   everything in the page sized from it so a table and a code block grow
   with the prose */
.doc { padding: 16px 16px 12px; font-size: 12px; }
html[data-size="0"] .doc { font-size: 11px; }
html[data-size="2"] .doc { font-size: 13px; }
html[data-size="3"] .doc { font-size: 15px; }
html[data-size="4"] .doc { font-size: 17px; }
.doc h1 { font-size: 1em; font-weight: bold; line-height: 1.34; margin: 0 0 8px; }
.doc h2 { font-size: 1em; font-weight: bold; line-height: 1.34; margin: 16px 0 4px; }
.doc h3 { font-size: 1em; font-weight: bold; line-height: 1.34; margin: 12px 0 4px; color: var(--quiet); }
.doc > p:first-child { margin-top: 0; }
.doc p { margin: 0 0 8px; }
.doc ul, .doc ol { margin: 0 0 8px; padding: 0 0 0 18px; }
.doc li { margin: 0 0 4px; }
.doc code { font-size: 0.92em; }
/* a code block in a page is the terminal the homepage draws, sunken into
   the page the way a field is; it keeps its black in either mode */
.doc .term { margin: 8px 0; border: 1px solid #262626; font-size: 0.92em;
  box-shadow: -1px -1px 0 #999, 1px 1px 0 #fff; }
html[data-theme="dark"] body.docs .doc .term { box-shadow: -1px -1px 0 #555, 1px 1px 0 #333; }
/* a table keeps its own scrollbar, so a wide one never widens the page */
.tablebox { overflow-x: auto; margin: 8px 0; }
.doc table { border-collapse: collapse; font-size: 0.92em; line-height: 1.4; }
.doc th, .doc td { border: 1px solid var(--cell); padding: 3px 6px; text-align: left; vertical-align: top; }
.doc th { background: var(--head); font-weight: bold; white-space: nowrap; }
.doc td code { white-space: nowrap; }
/* the index: each page a line, its name and what is on it */
ul.toc { list-style: none; margin: 12px 0 4px; padding: 0; }
ul.toc li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  padding: 5px 0; border-top: 1px solid var(--rule); }
ul.toc li:last-child { border-bottom: 1px solid var(--rule); }
ul.toc li a { font-weight: bold; text-decoration: none; min-width: 152px; }
ul.toc li a:hover { text-decoration: underline; }
ul.toc li span { color: var(--quiet); }