/* tiger.v2core.com: rotk5.v2core.com's site.css (the exe homepage's chrome, as exe-stats chrome.css draws it,
and that site's window, tabs, download table and picture viewer), then this site's own rules at the end. The
desk defines the look: the exe repository's internal/server/ui/index.html. */
/* the desk's colours (--black #262626, greys --g200 to --g800, --hl #333399, --lav #ccf) are written out
in each rule rather than as custom properties: Tiger's Safari drops any rule that uses var() */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; padding: 24px 12px 48px; background: #ccc; color: #262626; 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: #333399; }
.window { position: relative; max-width: 640px; margin: 0 auto 22px;
background: #ccc; border: 1px solid #262626;
box-shadow: 2px 2px 0 #262626; }
.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 #999, inset 1px 1px 0 #fff; }
.titlebar { display: flex; align-items: center; gap: 4px; padding: 2px 4px;
background: #ccc; user-select: none; }
.titlebar .stripe { flex: 1; height: 12px; min-width: 8px; position: relative;
background-color: #ddd;
background-image: url("/stripe.png");
background-image: -webkit-gradient(linear, 0 0, 0 2, color-stop(.5, #fff), color-stop(.5, #777));
-webkit-background-size: 100% 2px;
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: #ccc; }
.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 #808080, inset -1px -1px 0 #fff,
inset 0 0 0 2px #262626, inset 3px 3px 0 #fff, inset -3px -3px 0 #808080; }
.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 #262626; background: #fff;
box-shadow: -1px -1px 0 #999, 1px 1px 0 #fff; }
.statusbar { border-top: 1px solid #262626; background: #ddd;
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: #ddd; color: #262626; text-decoration: none; text-align: center;
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; }
/* ---- this site ---- */
@font-face { font-family: "Geneva"; font-weight: normal; src: local("Geneva"); }
@font-face { font-family: "Geneva"; font-weight: bold; src: local("Lucida Grande Bold"), local("LucidaGrande-Bold"); }
.statusbar > :last-child:not(:first-child) { margin-left: auto; }
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; overflow-wrap: anywhere; }
/* the line under the window; its own name, so no strip inside a window inherits its measure */
.colophon { max-width: 720px; margin: 0 auto; text-align: center; font-size: 11px; color: #333; }
/* ---- the window, in the Dict app's shape: the intro on the toolbar's grey at the top with the tabs
standing on it, their feet on the page's top line; the page white and flush with the frame at the sides
and with the status bar below, whose top line is the one seam there ---- */
.frame { background: #eee; }
.top { padding: 14px 16px 0; background: #eee; }
.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; }
/* the desktop's Platinum tab control (internal/server/ui/index.html .tabbar and .tab, copied), as the Dict
app stands it: the open tab filled with the page's white, since the page is what it opens onto. The bar
reaches 3px below its line so the open tab's foot covers the page's top line, and past what fits it
scrolls sideways with its scroll bar hidden. */
.tabbar { display: flex; align-items: flex-start; padding: 4px 0 3px; margin: 0 -10px -3px;
position: relative; z-index: 2; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabbar::-webkit-scrollbar { display: none; }
.tab {
height: 22px; color: #000; font-size: 11px; font-weight: bold; line-height: 14px;
text-align: center; padding: 0 2px; position: relative; white-space: nowrap; text-decoration: none;
border-style: solid; border-width: 8px 14px 0 14px;
-webkit-border-image: url("/tab.png") 8 14 0 14 stretch stretch;
border-image: url("data:image/svg+xml;utf8,") 8 14 0 14 fill stretch;
display: flex; align-items: flex-start; flex: none;
}
.tab + .tab { margin-left: -7px; }
.tab.active {
height: 25px; margin-bottom: -3px; z-index: 3;
-webkit-border-image: url("/tab-active.png") 8 14 0 14 stretch stretch;
border-image: url("data:image/svg+xml;utf8,") 8 14 0 14 fill stretch;
}
/* the word stands 3px higher than the desktop's block sets it, 6px clear each way, as in Dict */
.tab > span { position: relative; top: -3px; }
.page { position: relative; background: #fff; border-top: 1px solid #262626; padding: 12px 16px 8px; }
.page > p:first-child { margin-top: 0; }
/* the downloads: a row a file, the sum under it in a quieter line; the three columns keep their widths
whatever a name's length, and a phone stacks a row */
table.dl { width: 100%; border-collapse: collapse; margin: 8px 0 4px; }
table.dl td { padding: 6px 8px 2px 0; vertical-align: top; border-top: 1px solid #ddd; }
table.dl tr.sum td { border-top: 0; padding: 0 8px 6px 0; }
table.dl td.sys { width: 72px; white-space: nowrap; font-weight: bold; }
table.dl td.size { width: 64px; text-align: right; white-space: nowrap; }
table.dl a.file { font-weight: bold; }
table.dl .what { color: #555; }
table.dl tr.sum code { color: #555; font-size: 10px; }
ul.notes { margin-top: 8px; color: #333; }
@media (max-width: 480px) {
table.dl, table.dl tbody, table.dl tr, table.dl td { display: block; width: auto; }
table.dl td { border-top: 0; padding: 0 0 2px; }
table.dl tr { border-top: 1px solid #ddd; padding: 6px 0 2px; }
table.dl tr.sum { border-top: 0; padding: 0 0 6px; }
table.dl tr.sum td:first-child { display: none; }
table.dl td.size { text-align: left; color: #555; }
}
/* a set (of downloads, of pictures) and a revision: a block each, its heading first, a quieter word
after the heading's name */
.set h2, .rev h2 { margin: 12px 0 4px; }
.set:first-of-type h2, .rev:first-of-type h2 { margin-top: 0; }
.set .who, .rev .who, .rev .date { color: #555; font-weight: normal; }
.rev .date { margin-right: 6px; }
.rev ul { margin-bottom: 0; }
/* the gallery: each picture a sunken field keeping its shape before it arrives */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; margin: 8px 0 4px; }
.grid figure { margin: 0; }
.grid .shot { position: relative; display: block; border: 1px solid #262626; background: #ccf; overflow: hidden;
box-shadow: -1px -1px 0 #999, 1px 1px 0 #fff; }
.grid .shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.grid .gif { position: absolute; right: 4px; bottom: 4px; padding: 0 3px; font-size: 9px; font-weight: bold;
line-height: 12px; color: #fff; background: #262626; }
.grid figcaption { margin: 4px 0 0; font-size: 11px; line-height: 14px; color: #333; }
/* ---- the picture viewer: a window over the page (the documentation's Contents box, as a picture frame).
The picture is on the desk's lavender in a sunken field at its own size, and no larger than the screen
leaves for it; the window takes the picture's width. ---- */
.picbox { padding: 0; border: 0; background: none; max-width: none; max-height: none; width: fit-content; height: fit-content; margin: auto; }
.picbox::backdrop { background: rgba(38, 38, 38, .45); }
/* the window itself holds the keyboard focus while it is open (the arrows walk, Tab reaches the buttons),
so no focus ring lands on the close box when it opens or after a key */
.picbox:focus { outline: none; }
.picbox .window { margin: 0; max-width: none; width: fit-content; }
.picbox .frame { background: #ccf; }
.picbox .pic { padding: 8px; }
.picbox .pic img { display: block; width: auto; height: auto; box-sizing: content-box;
max-width: calc(100vw - 56px); max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px);
border: 1px solid #262626; background: #000; box-shadow: -1px -1px 0 #99c, 1px 1px 0 #fff; }
.picbox .foot { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid #262626;
background: #ddd; color: #333; font-size: 11px;
box-shadow: inset 1px 1px 0 rgba(255,255,255,.6), inset -1px -1px 0 #aaa; }
.picbox .foot .fill { flex: 1 1 auto; min-width: 8px; }
.picbox .foot .btn { min-width: 0; padding: 2px 10px; display: inline-flex; align-items: center; gap: 4px; font-family: inherit; }
.picbox .btn .g { display: none; font-size: 14px; line-height: 12px; }
/* the window's title is the caption; the foot's count never wraps */
.picbox .titlebar .title { max-width: none; flex: 0 1 auto; }
.picbox .foot > span:first-child { white-space: nowrap; }
/* a phone: the words give way to the glyphs, Open goes, and the picture fills what is left */
@media (max-width: 480px) {
.picbox .btn .t { display: none; }
.picbox .btn .g { display: inline; }
.picbox .foot .btn.open { display: none; }
.picbox .pic img { max-width: calc(100vw - 44px); }
}
/* ---- this site ---- */
/* a program: its icon and name, its picture to the right of the words, its notes, its downloads, a link to
its own site. A rule above each but the first. */
.app { margin: 0; padding: 0; }
.app + .app { margin-top: 10px; padding-top: 14px; border-top: 1px solid #ccc; }
.app:after { content: ""; display: block; clear: both; }
.apphead { min-height: 32px; margin: 0 0 8px; }
.apphead .appicon { float: left; width: 32px; height: 32px; margin: 0 10px 0 0; image-rendering: pixelated; }
.apphead h2 { margin: 0; font-size: 12px; line-height: 16px; }
.apphead .tag { margin: 0; color: #555; line-height: 16px; }
.app figure.pic { float: right; width: 216px; margin: 2px 0 8px 14px; }
.app figure.pic .shot { position: relative; display: block; border: 1px solid #262626; background: #ccf; overflow: hidden;
box-shadow: -1px -1px 0 #999, 1px 1px 0 #fff; }
.app figure.pic .shot img { display: block; width: 100%; height: auto; }
.app figure.pic figcaption { margin: 4px 0 0; font-size: 11px; line-height: 14px; color: #333; }
.app ul.notes { margin: 0 0 8px; color: #333; }
.app table.dl { clear: both; margin-top: 4px; }
.app p.more { margin: 6px 0 0; }
.app p.none { clear: both; color: #555; }
/* the downloads: the edition and its date in the first column, the sums in the quieter line under the file */
table.dl td.sys { width: 104px; white-space: normal; font-weight: normal; }
table.dl td.sys .date { color: #555; font-size: 11px; }
table.dl tr.sum td { line-height: 14px; }
table.dl tr.sum .k { display: inline-block; width: 50px; color: #555; font-size: 10px; }
@media (max-width: 520px) {
.app figure.pic { float: none; width: auto; max-width: 320px; margin: 0 0 10px; }
table.dl tr.sum .k { display: block; width: auto; }
}
/* About */
.about .sect + .sect { margin-top: 18px; padding-top: 10px; border-top: 1px solid #ccc; }
.about h2 { margin: 0 0 4px; }
table.needs { border-collapse: collapse; margin: 4px 0 8px; }
table.needs th, table.needs td { padding: 4px 16px 4px 0; text-align: left; vertical-align: top; border-top: 1px solid #ddd; }
table.needs th { border-top: 0; font-size: 11px; color: #555; }
/* ---- Tiger's Safari (3.0, WebKit 523) and its successors to 5.0: the old flexible box where flex is unknown,
edges where inset is unknown. In the rules above, a line in the older form comes first and the newer form
after it, so a browser that knows the newer one takes it: the tabs' prefixed border image (site/tab.png and
tab-active.png, the SVGs drawn by tools/old-webkit-images.js; old WebKit always fills the centre) and the
title bar's stripes (site/stripe.png, then the old gradient of Safari 4). ---- */
.titlebar, .head { display: -webkit-box; -webkit-box-align: center; display: flex; }
.titlebar .stripe { -webkit-box-flex: 1; }
.head h1 { -webkit-box-flex: 1; }
/* the status bar's right half floats where flex is unknown (Safari 3.0 has no :last-child either, hence the
class); a flex item ignores the float */
.statusbar .r { float: right; }
/* the picture viewer is a