/* LOSSPORN. The board is a subreddit, circa 2012, because that is where the
   genre lives. Verdana at 10px, blue links, orange arrows. Nothing rounded,
   nothing soft. The lookup card is the other object on the site and has its
   own styles at the bottom. */

:root{
  --bg:#fff; --head:#cee3f8; --line:#5f99cf; --ink:#000; --mute:#888; --dim:#c6c6c6;
  --link:#0000ff; --visited:#551a8b; --up:#ff8b60; --down:#9494ff; --score:#c6c6c6;
  --flair-bg:#f5f5f5; --flair-line:#ddd; --loss:#c00; --gain:#2a8f2a; --side:#f0f3fc;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:10px verdana,arial,helvetica,sans-serif;line-height:1.4}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
a:visited{color:var(--visited)}
code{font-family:monospace;font-size:10px;background:#f7f7f7;padding:0 2px}
:focus-visible{outline:2px solid #ff8b60;outline-offset:1px}

/* ---------------------------------------------------------------- header */
#sr-header{background:var(--head);border-bottom:1px solid var(--line);font-size:9px;padding:3px 5px;
  white-space:nowrap;overflow-x:auto;color:#000}
#sr-header a{color:#000;text-transform:uppercase;letter-spacing:.02em;margin-right:6px}
#sr-header .sep{color:#5f99cf;margin:0 4px 0 0}
#sr-header .right{float:right}
#header{background:var(--head);border-bottom:1px solid var(--line);padding:0 5px;height:39px;position:relative}
#header .sub{font:bold 18px verdana,arial,sans-serif;position:absolute;left:48px;bottom:-2px;color:#000;text-decoration:none}
#header .sub em{font-style:normal;color:var(--loss)}
#header .snoo{position:absolute;left:6px;bottom:0;width:36px;height:36px;display:block}
#header .tabs{position:absolute;left:170px;bottom:-1px;display:flex;gap:0;font-size:12px}
#header .tabs a{display:inline-block;padding:2px 6px 1px;background:#eff7ff;border:1px solid var(--line);border-bottom:0;
  color:var(--line);font-weight:bold;text-transform:lowercase;margin-right:1px;text-decoration:none}
#header .tabs a.sel{background:#fff;color:#ff4500;border-color:var(--line)}
#header .user{position:absolute;right:0;top:0;background:#eff7ff;border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:4px 8px;font-size:9px;color:#000}
#header .user b{color:var(--loss)}

/* ---------------------------------------------------------------- layout */
.content{display:flex;gap:0;padding:6px 0 30px 0}
.listing{flex:1;min-width:0;padding-left:5px}
.side{width:300px;flex:none;padding:0 5px 0 10px}
@media (max-width:760px){ .content{flex-direction:column} .side{width:auto;padding:10px 5px} #header .tabs{left:150px} }

/* Phones. old.reddit never had a phone layout, so this is the one place the
   period costume gets adjusted rather than copied: four absolutely positioned
   tabs and a right-hand user box do not fit in 360 pixels, and a header that
   overlaps itself is not authentic, it is broken. The tabs move to their own
   scrolling strip and the rank column, which is decoration, goes. */
@media (max-width:560px){
  #sr-header .right{float:none;display:block;padding-top:2px}
  #header{height:64px}
  #header .snoo{bottom:26px}
  #header .sub{bottom:24px;font-size:16px;left:44px}
  #header .tabs{left:0;bottom:0;width:100%;padding-left:5px;overflow-x:auto;font-size:11px}
  #header .user{display:none}
  .thing{grid-template-columns:26px 54px 1fr}
  .thing .rank{display:none}
  .thing .thumb{width:54px;height:40px;font-size:8px}
  .thing .title{font-size:12px}
  .selfpost,.modlog,.submitpage{padding-left:12px;padding-right:12px}
}

.menuarea{border-bottom:1px solid var(--dim);padding:5px 0 5px 20px;font-size:11px;color:var(--mute);margin-bottom:6px}
.menuarea a{color:var(--link)}
.menuarea .sel{color:#ff4500;font-weight:bold}
.menuarea .k{margin-right:10px}

/* ---------------------------------------------------------------- posts */
.thing{display:grid;grid-template-columns:24px 34px 70px 1fr;gap:0 4px;padding:4px 0;margin-bottom:4px;align-items:start}
.thing .rank{color:var(--score);font-size:12px;text-align:right;padding-top:4px}
.thing .arrows{text-align:center;padding-top:1px;font-size:11px;line-height:1.1}
.thing .arrows .arrow{display:block;color:var(--dim);cursor:default}
.thing .arrows .arrow.up{color:var(--up)}
.thing .arrows .score{display:block;font-weight:bold;color:#ff8b60;font-size:11px;margin:2px 0}
.thing .thumb{width:70px;height:50px;background:#f5f5f5;border:1px solid var(--dim);display:flex;align-items:center;justify-content:center;
  color:var(--loss);font:bold 9px verdana,sans-serif;overflow:hidden;text-align:center;line-height:1.1}
.thing .thumb.gain{color:var(--gain)}
.thing .entry{min-width:0}
.thing .title{font-size:13px;color:var(--link);font-weight:normal}
.thing .title b{color:var(--loss)}
.thing .title b.gain{color:var(--gain)}
.thing .flair{display:inline-block;font-size:9px;border:1px solid var(--flair-line);background:var(--flair-bg);padding:0 3px;
  margin-left:4px;color:#555;vertical-align:middle;font-weight:bold}
.thing .flair.loss{background:#ffe9e9;border-color:#f2c6c6;color:#a00}
.thing .flair.gain{background:#e8f6e8;border-color:#bfe3bf;color:#2a8f2a}
.thing .flair.hold{background:#fff6da;border-color:#f0dc9a;color:#8a6d00}
.thing .flair.part{background:#f0f0f0;border-color:#d0d0d0;color:#777;font-weight:normal}
.thing .domain{font-size:10px;color:var(--mute)}
.thing .tagline{color:var(--mute);font-size:10px;margin-top:1px}
.thing .buttons{list-style:none;margin:2px 0 0;padding:0;display:flex;gap:0;font-size:10px;font-weight:bold}
.thing .buttons li{margin-right:6px;color:var(--mute)}
.thing .buttons a{color:var(--mute)}
.thing .buttons a:hover{text-decoration:underline}
.thing.gainpost{opacity:.65}
.nothing{padding:30px 20px;color:var(--mute);font-size:12px;border:1px dashed var(--dim);margin:10px 20px 10px 0}
.nothing code{font-size:11px}

/* ---------------------------------------------------------------- sidebar */
.sidebox{border:1px solid var(--line);background:#fff;margin-bottom:10px}
.sidebox .head{background:var(--head);border-bottom:1px solid var(--line);padding:3px 6px;font-size:11px;font-weight:bold}
.sidebox .body{padding:8px}
.bignum{font:bold 26px verdana,arial,sans-serif;color:var(--loss);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.bignum.gain{color:var(--gain)}
.smallcaps{font-size:9px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
.submit{display:block;text-align:center;background:linear-gradient(#fff,#e7e7e7);border:1px solid #444;border-radius:0;
  font:bold 12px verdana,sans-serif;color:#000;padding:6px;margin:4px 0}
.submit:hover{text-decoration:none;background:linear-gradient(#fff,#d7d7d7)}
.sidebox table{width:100%;border-collapse:collapse;font-size:10px}
.sidebox td{padding:2px 0;border-bottom:1px solid #f0f0f0;font-variant-numeric:tabular-nums}
.sidebox td:last-child{text-align:right;color:var(--loss);font-weight:bold}
.sidebox .rules{padding-left:14px;margin:0}
.sidebox .rules li{margin-bottom:4px}
.foot{font-size:9px;color:var(--mute);border-top:1px solid var(--dim);padding:8px 5px 0;margin-top:20px}
.foot a{color:var(--mute)}

/* The subreddit box, reddit's first sidebar card. Every number in it is one
   the site actually has; see the comment in index.html about why. */
.srbox{border-color:var(--line)}
.srtitle{font-size:11px;color:#555;margin-bottom:8px}
.srcounts{display:flex;gap:14px;margin-bottom:8px}
.srcounts b{display:block;font:bold 17px verdana,arial,sans-serif;color:#000;line-height:1.1;
  font-variant-numeric:tabular-nums}
.srcounts span{font-size:9px;color:var(--mute)}
.srreaders{font-size:9px;color:var(--mute);margin-bottom:8px}
.srreaders b{color:#555}
.srmeta{margin-top:8px;padding-top:6px;border-top:1px solid #eee;font-size:9px;color:var(--mute);line-height:1.6}
.srmeta b{color:#555}

/* reddit's bottom menu bar, which every page had. */
#bottommenu{border-top:1px solid var(--dim);margin-top:10px;padding:10px 5px 24px;text-align:center;font-size:10px}
#bottommenu a{margin:0 6px;color:var(--link)}
#bottommenu .pi{display:block;margin-top:8px;color:#aaa;font-size:9px}

.hiddenbar{background:#f6f7f8;border:1px solid var(--dim);padding:4px 8px;margin:0 20px 8px 0;font-size:10px;color:#666}
.thing.savedpost{background:#fffdf0;box-shadow:-3px 0 0 #f0dc9a}

/* ---------------------------------------------------------------- self post (docs) */
.selfpost{max-width:760px;font-size:12px;line-height:1.55;padding:6px 20px 30px 30px}
.selfpost h1{font-size:16px;margin:0 0 4px}
.selfpost h2{font-size:13px;margin:22px 0 6px;border-bottom:1px solid var(--dim);padding-bottom:2px}
.selfpost .meta{color:var(--mute);font-size:10px;margin-bottom:12px}
.selfpost .tldr{background:#fffbe6;border:1px solid #f0dc9a;padding:8px 10px;margin:8px 0 14px;font-size:11px}
.selfpost table{border-collapse:collapse;font-size:11px;margin:8px 0}
.selfpost th,.selfpost td{border:1px solid var(--dim);padding:3px 8px;text-align:left;vertical-align:top}
.selfpost th{background:#f5f5f5}
.selfpost pre{background:#f7f7f7;border:1px solid var(--dim);padding:8px;font-size:10px;overflow-x:auto}
.selfpost .positions{border:1px solid var(--dim);padding:6px 10px;font-size:10px;color:var(--mute);margin-top:20px}
/* A retracted method, kept on the page. Marked like an edit on a post, because
   that is what it is. */
.selfpost .wrongturn{border-left:3px solid var(--loss);background:#fff7f7;padding:8px 10px;margin:10px 0;font-size:11px}

/* ---------------------------------------------------------------- verify */
.ok{color:var(--gain);font-weight:bold}
.bad{color:var(--loss);font-weight:bold}

/* ---------------------------------------------------------------- submit page
   old.reddit's submit form. Rounded fields are the one place that page was
   round, so they stay round here. The card it produces is the only dark
   object on the site, because the card is a screenshot, not a page. */
.submitpage{max-width:680px;padding:8px 20px 30px 26px}
.submitpage h1{font-size:14px;margin:0 0 10px;font-weight:bold}
.formtabs{list-style:none;margin:0 0 -1px;padding:0 0 0 6px;display:flex;font-size:11px}
.formtabs li{margin-right:2px}
.formtabs a{display:block;padding:3px 12px 2px;border:1px solid #c7c7c7;border-bottom:0;background:#eff7ff;color:#369;border-radius:3px 3px 0 0}
.formtabs li.sel a{background:#fff;color:#000;font-weight:bold}
.formbox{border:1px solid #c7c7c7;background:#fff;padding:14px 16px 16px}
.roundfield{background:#f6f7f8;border:1px solid #e0e0e0;border-radius:7px;padding:9px 12px 11px;margin-bottom:12px}
.roundfield .rtitle{font-size:11px;color:#555;font-weight:bold;margin-bottom:5px}
.roundfield input[type=text]{width:100%;border:1px solid #c7c7c7;padding:6px 7px;font:12px monospace;background:#fff;color:#000}
.roundfield input[type=text]:focus{border-color:#5f99cf;outline:none}
.roundfield .desc{font-size:10px;color:#888;margin-top:5px;line-height:1.45}
.btn-submit{background:linear-gradient(#fff,#dcdcdc);border:1px solid #999;padding:5px 18px;font:bold 12px verdana,arial,sans-serif;
  cursor:pointer;border-radius:3px;color:#000}
.btn-submit:hover{background:linear-gradient(#fff,#cfcfcf)}
.btn-submit:disabled{color:#999;cursor:default;background:#eee}
.btn-small{background:linear-gradient(#fff,#e7e7e7);border:1px solid #aaa;padding:3px 10px;font:bold 10px verdana,sans-serif;cursor:pointer;border-radius:3px;color:#000;margin-right:6px}
.btn-small:hover{background:linear-gradient(#fff,#d7d7d7)}
.status{font-size:10px;color:var(--mute);margin-top:8px;min-height:14px;font-family:monospace}
.status.err{color:var(--loss);font-family:verdana,sans-serif;font-weight:bold}

/* The explorer allowance, drawn. The one constraint the whole lookup is shaped
   around should not be invisible while it is being spent. */
.gauge{height:8px;border:1px solid var(--dim);background:#fff;overflow:hidden}
.gauge-fill{height:100%;width:100%;background:var(--gain);transition:width .25s linear}
.gauge-fill.low{background:var(--loss)}

/* the generated post */
.result{margin-top:18px;border-top:1px solid var(--dim);padding-top:14px}
.result .kicker{font-size:11px;color:var(--mute);margin-bottom:8px}
.result .kicker b{color:#000}
.cardframe{border:1px solid var(--dim);padding:6px;background:#fafafa;max-width:560px}
canvas#card{width:100%;height:auto;display:block;background:#fff}
.result .actions{margin:10px 0 0}
.breakdown{margin-top:16px;border-collapse:collapse;font-size:11px;width:100%;max-width:520px}
.breakdown th{text-align:left;background:#f5f5f5;border:1px solid var(--dim);padding:3px 8px;font-size:10px}
.breakdown td{border:1px solid var(--dim);padding:3px 8px;font-variant-numeric:tabular-nums}
.breakdown td:last-child{text-align:right}
.breakdown td.neg{color:var(--loss);font-weight:bold}
.breakdown td.pos{color:var(--gain);font-weight:bold}
.result .txnote{font-size:10px;color:var(--mute);margin-top:10px}

/* ---------------------------------------------------------------- people
   The only parts of the site anybody types into. old.reddit's comment tree,
   its grey reply boxes and its thin left rules, plus a reaction row it never
   had, kept small and grey so it reads as a tally rather than a toolbar. */
#namegate{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;
  justify-content:center;padding:60px 12px;z-index:50;overflow-y:auto}
.gatebox{background:#fff;border:1px solid #5f99cf;width:100%;max-width:420px}
.gatehead{background:var(--head);border-bottom:1px solid var(--line);padding:4px 8px;font-size:12px;font-weight:bold}
.gatebody{padding:12px}
.gatebody p{margin:0 0 10px;font-size:11px;line-height:1.5}
.gatebody .roundfield{margin-bottom:8px}
.gateerr{color:var(--loss);font-size:10px;font-weight:bold;min-height:13px;margin-bottom:6px}
.gateactions{display:flex;gap:8px;align-items:center}
.gatefine{margin-top:12px !important;padding-top:8px;border-top:1px solid #eee;color:#777;font-size:10px !important}
.gatefine b{color:#333}

.whobox{font-size:9px}
.whobox .whoami b{color:var(--loss)}
#header .user .whobox a{color:#369}

.reacts{display:flex;flex-wrap:wrap;gap:3px;margin:4px 0;position:relative}
.reacts .chip{font:11px verdana,arial,sans-serif;line-height:1;background:#f6f7f8;border:1px solid var(--dim);
  border-radius:9px;padding:2px 6px;cursor:pointer;color:#444}
.reacts .chip span{margin-left:4px;font-size:9px;color:#777;font-variant-numeric:tabular-nums}
.reacts .chip:hover{background:#eef3f8}
.reacts .chip.mine{background:#eaf3ff;border-color:#5f99cf}
.reacts .chip.mine span{color:#36c}
.reacts .chip:disabled{cursor:default;opacity:.5}
.reacts .addreact{color:#888;font-weight:bold;padding:2px 7px}

/* The picker. A plain bordered box, the way every old.reddit dropdown was,
   but holding all 1,728 emoji, so the grid scrolls and the tabs are how you
   get around it. */
.emojipop{position:absolute;top:100%;left:0;z-index:20;background:#fff;border:1px solid #5f99cf;
  padding:6px;width:288px;box-shadow:0 2px 5px rgba(0,0,0,.2)}
.emojipop .eprow{display:flex;gap:4px;margin-bottom:5px}
.emojipop .epinput{flex:1;min-width:0;border:1px solid #c7c7c7;padding:3px 5px;font:12px verdana,arial,sans-serif}
.emojipop .epinput:focus{border-color:#5f99cf;outline:none}
.emojipop .eptones{display:flex;gap:2px;margin-bottom:4px}
.emojipop .eptone{font-size:13px;line-height:1;background:none;border:1px solid transparent;border-radius:3px;
  padding:2px 3px;cursor:pointer}
.emojipop .eptone:hover{background:#eef3f8}
.emojipop .eptone.sel{border-color:#5f99cf;background:#eaf3ff}
.emojipop .eptabs{display:flex;gap:1px;border-bottom:1px solid var(--dim);padding-bottom:3px;margin-bottom:4px}
.emojipop .eptab{flex:1;font-size:13px;line-height:1;background:none;border:0;border-bottom:2px solid transparent;
  padding:3px 0;cursor:pointer}
.emojipop .eptab:hover{background:#eef3f8}
.emojipop .eptab.sel{border-bottom-color:#ff4500;background:#f6f9ff}
.emojipop .epgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;max-height:210px;overflow-y:auto}
.emojipop .epcell{font-size:17px;line-height:1;background:none;border:0;padding:3px 0;cursor:pointer;border-radius:2px}
.emojipop .epcell:hover{background:#eef3f8}
.emojipop .epempty{grid-column:1/-1;color:var(--mute);font-size:10px;padding:12px 4px;text-align:center}
.emojipop .eperr{color:var(--loss);font-size:9px;font-weight:bold;min-height:11px;margin-top:3px}
.emojipop .epnote{color:var(--mute);font-size:9px;line-height:1.35}

.threadwrap{margin-top:14px;border-top:1px solid var(--dim);padding-top:10px}
.threadslot:empty{display:none}
.thing .threadslot{max-width:560px;margin-top:6px}
.cheader{font-size:11px;font-weight:bold;color:#555;margin:8px 0 4px}
.localnote{background:#fffbe6;border:1px solid #f0dc9a;padding:5px 8px;font-size:10px;margin:6px 0;color:#6b5a00}
.threadload,.threaderr,.nocomments{font-size:10px;color:var(--mute);padding:6px 0}
.threaderr{color:var(--loss)}

.commentbox{margin:4px 0 10px}
.commentbox textarea{width:100%;max-width:520px;display:block;border:1px solid #c7c7c7;padding:6px;
  font:11px verdana,arial,sans-serif;resize:vertical}
.commentbox textarea:focus{border-color:#5f99cf;outline:none}
.cactions{display:flex;align-items:center;gap:8px;margin-top:4px}
.ccount{font-size:9px;color:var(--mute);font-variant-numeric:tabular-nums}
.inlineerr{color:var(--loss);font-size:10px;font-weight:bold;margin-top:3px}

.csortbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:10px;color:var(--mute);
  border-bottom:1px solid var(--dim);padding-bottom:3px;margin:10px 0 8px}
.csorts a{color:var(--link);margin-left:5px}
.csorts a.sel{color:#ff4500;font-weight:bold}

/* The comment tree. Arrows in their own column, everything else beside them,
   and the dotted rules down the left that made a reddit thread legible. */
.comment{display:flex;gap:4px;margin:0 0 7px}
.comment .cmain{min-width:0;flex:1}
.cvote{display:flex;flex-direction:column;align-items:center;width:12px;flex:none;padding-top:1px;line-height:.9}
.cvote .arrow{font-size:9px;color:var(--dim);cursor:pointer;user-select:none}
.cvote .arrow:hover{color:#999}
.cvote .up.on{color:var(--up)}
.cvote .down.on{color:var(--down)}
.comment .kids,.comment .replyslot{margin-left:2px;padding-left:9px;border-left:1px dotted var(--dim);margin-top:6px}
.comment .replyslot:empty{border:0;margin:0;padding:0}
.ctagline{font-size:10px;color:var(--mute)}
.collapse{color:var(--mute);margin-right:3px;font-family:monospace}
.cauthor{color:#369;font-weight:bold}
.cauthor.you{color:var(--loss)}
.cauthor.gone{color:#999;font-weight:normal;font-style:italic}
.cscore,.cwhen{margin-left:5px}
.cstub{margin-left:5px;color:#aaa;display:none}
.cbody{font-size:12px;line-height:1.45;margin:2px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.cbody .quote{display:block;border-left:2px solid var(--dim);padding-left:6px;color:#666}
.cbody code{background:#f2f2f2;border:1px solid #e2e2e2}
.cbuttons{list-style:none;margin:0;padding:0;display:flex;gap:6px;font-size:10px;font-weight:bold;flex-wrap:wrap}
.cbuttons a{color:var(--mute)}
.cbuttons a.done{color:var(--loss)}
.comment.deleted > .cvote{visibility:hidden}
.comment.linked > .cmain{background:#fffbe6;outline:2px solid #f0dc9a}

/* Collapsed: the tagline stays, everything under it goes, and the child count
   appears so you know what you folded away. */
.comment.collapsed > .cmain > .cbody,
.comment.collapsed > .cmain > .cbuttons,
.comment.collapsed > .cmain > .replyslot,
.comment.collapsed > .cmain > .kids{display:none}
.comment.collapsed > .cvote{visibility:hidden}
.comment.collapsed .cstub{display:inline}

@media (max-width:560px){ .gatebox{max-width:none} #namegate{padding:20px 8px} }

/* ---------------------------------------------------------------- verify / mod log
   Moved out of the page so style-src never needs a stylesheet exception. */
  .modlog{max-width:820px;padding:6px 20px 30px 30px;font-size:11px}
  .modlog h1{font-size:15px;margin:0 0 4px}
  .modlog table{border-collapse:collapse;width:100%;font-size:10px;margin-top:10px}
  .modlog th,.modlog td{border:1px solid #c6c6c6;padding:4px 6px;text-align:left;vertical-align:top;font-family:monospace}
  .modlog th{background:#f5f5f5;font-family:verdana,sans-serif}
  .modlog .hash{word-break:break-all;color:#555}
  .modlog pre{background:#f7f7f7;border:1px solid #c6c6c6;padding:8px;font-size:10px;overflow-x:auto}
  .modlog .live{margin:10px 0;padding:6px 8px;border:1px solid #c6c6c6;background:#fafafa}

/* ---------------------------------------------------------------- vault / statement
   Moved out of the page so style-src never needs a stylesheet exception. */
  /* A bank statement. Every fee in, every payout out, nothing else on the page. */
  .stmt{max-width:720px;margin:20px auto 40px;border:1px solid #000;padding:24px 28px;font:11px "Courier New",Courier,monospace;background:#fff}
  .stmt h1{font:bold 14px "Courier New",monospace;margin:0 0 2px;letter-spacing:.08em}
  .stmt .acct{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;margin:14px 0 18px;border-top:1px solid #000;border-bottom:1px solid #000;padding:8px 0}
  .stmt .acct b{font-weight:bold}
  .stmt table{width:100%;border-collapse:collapse}
  .stmt th{text-align:left;border-bottom:1px solid #000;padding:4px 0;font-weight:bold}
  .stmt td{padding:4px 0;border-bottom:1px dotted #bbb;font-variant-numeric:tabular-nums}
  .stmt td.n{text-align:right}
  .stmt .empty{padding:24px 0;color:#666;text-align:center}
  .stmt .total{border-top:2px solid #000;margin-top:8px;padding-top:8px;display:flex;justify-content:space-between;font-weight:bold}
  .stmt .note{margin-top:22px;color:#444;line-height:1.5}

/* ---------------------------------------------------------------- 404 */
.notfound{max-width:600px;padding:30px 20px 40px 30px}
.notfound h1{font-size:16px;margin:0 0 6px}
.notfound p{font-size:12px;color:var(--mute);margin:0 0 14px}
.notfound ul{font-size:12px;line-height:1.8;padding-left:18px;margin:0}
@media (max-width:560px){ .notfound{padding-left:12px;padding-right:12px} }

/* ------------------------------------------------------------ empty board
   The front page until somebody posts. It gets room rather than a one-line
   apology, because it is the page, not a gap where a page failed to load. */
.emptyboard{max-width:560px;padding:34px 20px 40px 24px}
.emptyboard h2{font-size:15px;margin:0 0 10px}
.emptyboard p{font-size:12px;line-height:1.6;color:#333;margin:0 0 10px}
.emptyboard p.quiet{color:var(--mute);font-size:11px}
.submit.wide{max-width:220px;margin-top:16px}
@media (max-width:560px){ .emptyboard{padding:22px 12px 30px} }

/* A roster row's author is a name, not a hex string, so it gets the colour
   reddit gave usernames. */
.thing .tagline .author{color:#369;font-weight:bold}
.menuarea:empty,.menuarea .k:empty{display:none}

/* The X handle in the top strip. Same weight as the rest of the nav, but the
   brand red so it is findable at a glance. */
#sr-header .xlink{color:var(--loss);font-weight:bold}