/* Platinum, the site template: every page is one window on the desktop
   gray, drawn as the exe desk and its homepage draw theirs. The chrome —
   the window, its striped bar, the sunken frame, the status strip and the
   push button — is chrome.css beside this file, a copy of exe-stats'
   shared block; this file is only what a site needs on top of it. Every
   1px line is a border on a box of its own; 12px type; no hover states. */
:root { --rule: #ddd; --quiet: #555; --cell: #999; --head: #ddd; }
.window { max-width: 720px; }

/* the top strip: where this page sits, in one line, on the platinum the
   desk's status bars are made of */
.strip.tools { display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  background: #ddd; color: #333; font-size: 11px; border-bottom: 1px solid #262626;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.6), inset -1px -1px 0 #aaa; }
.crumbs { display: flex; align-items: baseline; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; }
.crumbs .crumb { display: inline-flex; align-items: baseline; gap: 5px; flex: none; }
.crumbs a { color: #333399; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
/* the step between two names is a chevron on the pixel grid; between
   ratios 1 and 2 a fractional scale would drop a row, so it is smoothed
   there */
.crumbs .sep { display: block; flex: none; align-self: center; margin: 0 1px; width: 4px; height: 7px; color: #777; shape-rendering: crispEdges; }
.crumbs .sep .k { fill: currentColor; }
@media (min-resolution: 1.01dppx) and (max-resolution: 1.99dppx) { .crumbs .sep { shape-rendering: geometricPrecision; } }
.crumbs b { flex: 0 1 auto; min-width: 3em; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .crumbs .crumb:not(:last-of-type) { display: none; } }

/* the page's body: the site's name and a line about it, then the posts */
.body { padding: 16px 16px 12px; }
.head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.head .avatar { display: block; width: 32px; height: 32px; flex: none; }
.head h1 { margin: 0; font-size: 12px; line-height: 16px; }
.head h1 small { display: block; font-size: 12px; font-weight: normal; color: var(--quiet); }
.head h1 small p { margin: 0; }

/* the list: each post a line with its date at the far end, a summary
   under it, 1px rules between; the last line closes the list */
.items { margin: 0; }
.item { padding: 6px 0; border-top: 1px solid var(--rule); }
.items .item:last-child { border-bottom: 1px solid var(--rule); }
.item-head { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.item-title { font-weight: bold; text-decoration: none; color: #333399; }
.item-title:hover { text-decoration: underline; }
.item-date { margin-left: auto; font-size: 11px; color: var(--quiet); white-space: nowrap; }
.item-summary { margin: 2px 0 0; color: #333; }
.item-body { margin: 2px 0 0; }
h2.section { margin: 16px 0 4px; font-size: 12px; line-height: 16px; }
/* the feed, as rss.xsl shows it in a browser: a line saying what the
   file is, with its address to copy */
.feed-note { margin: 0 0 12px; }
.feed-note code { font: 11px/1.45 Monaco, Menlo, Consolas, "DejaVu Sans Mono", monospace; user-select: all; }
.items + h2.section { margin-top: 20px; }

/* a post: its title, its date in the quiet ink, then the text at the
   manual's size, with a terminal for code and a sunken field for a
   picture on its own */
.post-title { margin: 0 0 2px; font-size: 12px; line-height: 16px; }
.date { margin: 0 0 12px; font-size: 11px; color: var(--quiet); }
.content { font-size: 12px; line-height: 1.45; }
.content > :first-child { margin-top: 0; }
.content h1, .content h2 { font-size: 12px; font-weight: bold; line-height: 1.34; margin: 16px 0 4px; }
.content h3, .content h4 { font-size: 12px; font-weight: bold; line-height: 1.34; margin: 12px 0 4px; color: var(--quiet); }
.content p { margin: 0 0 8px; }
.content ul, .content ol { margin: 0 0 8px; padding: 0 0 0 18px; }
.content li { margin: 0 0 4px; }
.content li > p { margin: 0 0 4px; }
.content code { font: 11px/1.45 Monaco, Menlo, Consolas, "DejaVu Sans Mono", monospace; }
.content pre { margin: 8px 0; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; background: #000; color: #fff; cursor: text;
  border: 1px solid #262626; box-shadow: -1px -1px 0 #999, 1px 1px 0 #fff; }
.content pre code { color: inherit; }
.content blockquote { margin: 0 0 8px; padding: 0 0 0 10px; border-left: 2px solid #999; color: var(--quiet); }
.content hr { border: 0; border-top: 1px solid #262626; margin: 12px 0; }
.content img, .content video { max-width: 100%; height: auto; }
.content p > img:only-child { display: block; margin: 12px 0; border: 1px solid #262626; background: #ccf; box-shadow: -1px -1px 0 #999, 1px 1px 0 #fff; }
/* pixel art keeps its pixels at every ratio: an image with class
   "pixel", or an 88 by 31 one, which is a badge and never a picture on
   a field, so it also loses the sunken frame and sits inline in a row */
.content img.pixel, .content img[width="88"][height="31"] { image-rendering: pixelated; image-rendering: crisp-edges; }
.content p > img[width="88"][height="31"]:only-child, .content p > img.pixel:only-child { display: inline-block; margin: 0; border: 0; background: none; box-shadow: none; }
.content table { border-collapse: collapse; font-size: 11px; line-height: 1.4; margin: 8px 0; max-width: 100%; }
.content th, .content td { border: 1px solid var(--cell); padding: 3px 6px; text-align: left; vertical-align: top; }
.content th { background: var(--head); font-weight: bold; white-space: nowrap; }
.content input[type=checkbox] { vertical-align: -1px; }
.video-container, .audio-container { margin: 0 0 8px; }
.video-container video, .audio-container audio { display: block; width: 100%; }
.tags { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 12px 0 0; font-size: 11px; }
.tags .quiet { color: var(--quiet); }
.tags .tag { color: #333399; text-decoration: none; }
.tags .tag:hover { text-decoration: underline; }

/* the button row: its own row under the text, 12px from the frame's
   edges and between buttons, the way home rightmost and ringed */
.btnrow { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding: 4px 12px 12px; }
.btnrow .btn { font-family: inherit; }
/* on a phone the words will not fit, so Archive, Tags, the Badge page and
   RSS shrink to icon buttons: the desk's own colour pixel art, black
   outlines and flat fills, the same on the pressed face; Home keeps its
   word */
.btnrow .btn .ix { display: none; }
@media (max-width: 480px) {
  .btnrow .btn.glyph { min-width: 0; width: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  .btnrow .btn.glyph .t { display: none; }
  .btnrow .btn.glyph .ix { display: block; shape-rendering: crispEdges; }
}
/* between ratios 1 and 2 a fractional scale would drop rows of a
   crisp glyph, so it is smoothed there instead, as the crumbs' chevron is */
@media (max-width: 480px) and (min-resolution: 1.01dppx) and (max-resolution: 1.99dppx) {
  .btnrow .btn.glyph .ix { shape-rendering: geometricPrecision; }
}
.btn.default { outline: 2px solid #262626; outline-offset: 1px; border-radius: 4px; }
/* the status strip's two ends: the first at the left, the last pushed
   right, the room between them whatever is left */
.statusbar > :last-child:not(:first-child) { margin-left: auto; }
.statusbar a { color: #333399; text-decoration: none; }
.statusbar a:hover { text-decoration: underline; }
.foot { max-width: 720px; margin: 0 auto; text-align: center; font-size: 11px; color: #333; }

/* Replies from the exe hub, under a post the site announced there: a
   Reply window, then a Replies window holding the hub's own replies
   frame, which draws the rows (and says how tall they are) inside this
   window's sunken frame. The Reply window is the hub's composer, copied:
   signed out, a line and Sign in with Solana; signed in, who is replying
   and Sign Out, the field, and a status line beside the Reply button.
   The head script classes <html> js (the window is all script) and
   wallet (a wallet signed in here before), so the window has its final
   shape before layout and never jumps while the wallet reconnects. */
.composer { display: none; }
.js .composer { display: block; }
.compose { padding: 8px 12px; background: #ddd;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.6), inset -1px -1px 0 #aaa; }
.compose [hidden] { display: none !important; }
.compose .in, .wallet .compose .out { display: none; }
.wallet .compose .in { display: block; }
.compose .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.compose .grow { flex: 1 1 12em; min-width: 0; font-size: 11px; color: #333; }
.compose .who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compose .who-row { flex-wrap: nowrap; }
.compose .who-wrap { flex: 1 1 0; display: flex; align-items: center; gap: 5px; }
.compose .who-wrap .who { flex: 1 1 0; min-width: 0; }
.compose .me-av { flex: none; box-sizing: border-box; width: 20px; height: 20px; border: 1px solid #262626; background: #ddd; }
.compose .me-av img { display: block; width: 18px; height: 18px; image-rendering: pixelated; }
/* no picture of their own: the face the hub draws from the id, its
   size the pattern's and the pale ground padding it out to the box */
.compose img.idn { box-sizing: content-box; background: #e6e6f5; }
.compose .me-av img.idn { width: 10px; height: 10px; padding: 4px; }
.compose .who b { font-size: 12px; color: #262626; }
.compose .mono { font-family: Monaco, "Courier New", monospace; font-size: 11px; }
.compose button { font-family: inherit; cursor: default; margin: 0; }
.compose .btn:disabled { color: #999; }
.compose .btn:disabled:active { background: #ddd; color: #999;
  box-shadow: inset 1px 1px 0 #ddd, inset -1px -1px 0 #777, inset 2px 2px 0 #fff, inset -2px -2px 0 #aaa; }
.compose .wbtn { display: inline-flex; align-items: center; gap: 5px; }
.compose .wbtn img { width: 14px; height: 14px; display: block; }
/* Reply wears no default ring: Return in the field is a newline
   (Command or Control with Return replies). */
.compose textarea { display: block; box-sizing: border-box; margin: 0; padding: 2px 5px;
  font: inherit; line-height: 16px; color: #262626; background: #fff; border: 1px solid #262626; border-radius: 0;
  box-shadow: -1px -1px 0 #999, -1px 0 0 #999, 0 -1px 0 #999, 1px 1px 0 #fff, 1px 0 0 #fff, 0 1px 0 #fff; }
.compose .field { position: relative; margin: 8px 0; }
.compose textarea { width: 100%; height: 56px; resize: vertical; }
.compose textarea:focus { outline: none; }
/* the line naming the reply being answered, between who is replying and
   the field: "Replying to Name — its first words", ellipsized, and a
   20px bevel button whose cross lets it go */
.compose .re-row { flex-wrap: nowrap; margin-top: 8px; }
.compose .re-q { flex: 1 1 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compose .re-q b { font-size: 12px; color: #262626; }
.compose .re-clear { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; min-width: 0; padding: 0; }
.compose .re-clear .x { display: block; width: 8px; height: 8px; shape-rendering: crispEdges; }
.compose .re-clear .x .k { fill: currentColor; }
@media (min-resolution: 1.01dppx) and (max-resolution: 1.99dppx) { .compose .re-clear .x { shape-rendering: geometricPrecision; } }
/* the replies: the hub's frame fills the sunken frame edge to edge, as
   tall as its rows say; before it says, the height of its empty line */
.replies iframe.thread { display: block; width: 100%; height: 42px; border: 0; background: #fff; }