/* $BEARWHALE: a 2014 r/bitcoin thread on a 2014 exchange page. ugly on purpose. */
:root{
  --bg:#fff;--hdr:#cee3f8;--hdr-line:#5f99cf;--tab:#eff7ff;--orangered:#ff4500;
  --title:#0000ff;--author:#336699;--meta:#707070;--ink:#222;--line:#e6e6e6;
  --up:#ff8b60;--down:#9494ff;--sticky:#228822;
  --paint-red:#ed1c24;--paint-yellow:#fff200;--paint-blue:#00a2e8;
  --w98:#c0c0c0;--w98-dark:#808080;--w98-darker:#404040;
  --ui:Verdana,Geneva,Arial,Helvetica,sans-serif;
  --scrawl:"Comic Sans MS","Chalkboard SE","Comic Neue",cursive;
  --mono:"Courier New",Courier,monospace;
}
*{box-sizing:border-box}
html{cursor:url(/assets/cursor.svg) 1 1,auto;scroll-padding-top:8px}
body{margin:0;background:var(--bg);color:var(--ink);font:13px/1.45 var(--ui)}
a{color:var(--author);text-decoration:none;cursor:url(/assets/cursor.svg) 1 1,pointer}
a:hover{text-decoration:underline}
button{font:inherit;cursor:url(/assets/cursor.svg) 1 1,pointer}
img,video{max-width:100%;display:block}
p,h1,h2,h3,figure,ol,ul{margin:0}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:8px;top:-60px;background:#000;color:#fff;padding:8px;z-index:9}
.skip-link:focus{top:8px}
:focus-visible{outline:2px dotted #000;outline-offset:2px}

/* coin banner: what this is, in 3 seconds. ms paint, not reddit. */
.coinbar{background:#fff;border-bottom:4px solid #000}
.coinbar-in{display:flex;align-items:center;gap:12px 18px;max-width:1300px;margin:0 auto;padding:12px 16px}
.coinbar-pfp{width:64px;height:64px;flex-shrink:0;border:2px solid #000}
.coinbar-text{flex:1;min-width:0}
.coinbar-name{font:34px/1 Impact,"Arial Black","Arial Narrow Bold",sans-serif;letter-spacing:.5px;color:#000}
.coinbar-dot{color:#999}
.coinbar-tag{font:bold 26px/1 var(--scrawl);color:var(--paint-red);letter-spacing:0;display:inline-block;transform:rotate(-2deg)}
.coinbar-what{font-size:14px;line-height:1.4;color:#222;margin-top:6px;max-width:640px}
.coinbar-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;position:relative}
.ca-top{margin:0;min-width:250px;max-width:420px}
.buy-top{height:52px;padding:0 18px;font-size:24px;border-width:3px;flex-direction:column}
.buy-top small{font-size:10px;margin-top:3px}
.copy-status-top{position:absolute;right:0;top:100%;margin-top:2px;min-height:0}
.copy-status-top:empty{display:none}

/* SHOW_DEX_PAID=false hides video 03 (flip data-show-dex-paid on <html>, see VIDEOS.md) */
html[data-show-dex-paid="false"] .vpost-dexpaid{display:none}

/* page grid */
.page{display:flex;align-items:flex-start;gap:20px;max-width:1300px;margin:0 auto;padding:14px 16px 0}
.col-main{flex:1;min-width:0}
.col-side{width:320px;flex-shrink:0;position:sticky;top:10px;display:flex;flex-direction:column;gap:14px}

/* the post */
.post{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:start}
.vote{display:flex;flex-direction:column;align-items:center;width:46px;padding-top:2px}
.arrow{background:none;border:0;padding:0;width:22px;height:18px;font-size:15px;line-height:18px;color:#c6c6c6}
.arrow.up:hover,.arrow.up.on{color:var(--up)}
.arrow.down:hover,.arrow.down.on{color:var(--down)}
.score{font-weight:bold;font-size:13px;color:#878a8c;min-width:4ch;text-align:center;font-variant-numeric:tabular-nums}
.vote.liked .score{color:var(--up)}
.vote.disliked .score{color:var(--down)}
.post-title{font:normal 19px/1.25 var(--ui);margin:2px 0 3px}
.post-title a{color:var(--title)}
.domain{font-size:11px;color:#888;font-weight:normal}
.tagline{font-size:11px;color:var(--meta)}
.tagline .user,.cmt-meta .user{color:var(--author)}
.deleted{color:#888}
.flair-real{display:inline-block;font-size:10px;background:#f5f5f5;border:1px solid #ddd;color:#555;padding:0 4px;margin-left:3px}
.post-buttons{list-style:none;padding:0;margin:3px 0 10px;display:flex;flex-wrap:wrap;gap:2px 10px}
.post-buttons a{font-size:11px;font-weight:bold;color:#888}

/* exchange frame */
.exch{border:1px solid #b9b9b9;background:#fff;max-width:980px}
.exch-bar{display:flex;align-items:stretch;justify-content:space-between;gap:8px;background:linear-gradient(#fdfdfd,#e1e1e1);border-bottom:1px solid #b9b9b9;font:12px/1 Arial,Helvetica,sans-serif;color:#444;min-height:30px}
.exch-pair{font-weight:bold;color:#5a8f1d;padding:9px 10px 0}
.exch-tabs{display:flex;gap:2px;align-items:flex-end}
.exch-tabs span{padding:6px 10px;border:1px solid #c9c9c9;border-bottom:0;background:#ececec;color:#666}
.exch-tabs .on{background:#fff;color:#333;border-top:2px solid #8dc63f;position:relative;top:1px}
.exch-date{padding:9px 10px 0;color:#777}
.exch-chart{position:relative;aspect-ratio:960/465;background:#f7f6f2}
.exch-chart img{width:100%;height:100%}
.scribbles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.scrawl text{font-family:var(--scrawl);font-weight:bold}
.asks{width:100%;border-collapse:collapse;font:12px/1.3 Arial,Helvetica,sans-serif;border-top:1px solid #d5d5d5}
.asks th{background:#f1f1f1;color:#666;font-weight:normal;text-align:left;padding:4px 10px;border-bottom:1px solid #ddd}
.asks td{padding:5px 10px;color:#b3261e;background:#fdf0ee;font-variant-numeric:tabular-nums}
.asks td:first-child{font-weight:bold}
.ticker{border-top:1px dashed #b9b9b9;padding:8px 10px 8px;background:#fffdf0}
.ticker-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-size:13px}
.ticker-k{font-weight:bold}
.ticker-v b,.ticker-eta b{display:inline-block;text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:14px}
.ticker-v b{min-width:9ch}
.ticker-eta b{min-width:7.5ch}
.ticker-rate{color:#b3261e;font-weight:bold}
.ticker-bar{height:10px;border:1px solid #000;background:#fff;margin:6px 0 4px}
.ticker-bar i{display:block;height:100%;width:0;background:var(--paint-red)}
.ticker-note{font-size:10px;color:#777}
.exch figcaption{font-size:11px;color:var(--meta);padding:6px 10px;border-top:1px solid #e3e3e3;background:#fafafa}

/* section titles */
.comments,.videos,.proof,.kit{margin-top:30px}
.panestack-title{font:normal 16px var(--ui);color:#222;border-bottom:1px dotted #808080;padding-bottom:3px}
.sort{font-size:11px;color:var(--meta);margin:6px 0 10px}
.tag26{display:inline-block;background:var(--orangered);color:#fff;font-size:10px;font-weight:bold;line-height:14px;padding:0 4px;border-radius:2px;vertical-align:1px}
.archived{background:#fffbd6;border:1px solid #e5d58b;padding:7px 10px;font-size:12px;margin-bottom:6px}
.archived .jk{margin-top:3px;font-size:11px;color:#555}

/* comments */
.cmt{margin-top:12px}
.cmt-meta{font-size:11px;color:var(--meta)}
.coll{color:#888;margin-right:2px}
.cmt-meta a.user{font-weight:bold}
.cmt-meta span.user{font-weight:bold}
.pts{color:#555}
.pts.neg{color:#999}
.md{max-width:640px}
.md p{font-size:14px;line-height:1.45;color:#222;margin:3px 0 0}
.md p+p{margin-top:8px}
.cmt-btns{font-size:11px;margin-top:2px}
.cmt-btns a{color:#888;font-weight:bold}
.child{margin-left:10px;padding-left:12px;border-left:1px dotted #ccc}
.sticky .user{color:var(--sticky)}
.stick{color:var(--sticky);font-weight:bold}
.flair-whale{display:inline-block;font-size:10px;background:var(--paint-blue);color:#fff;padding:0 4px}
.more{margin-top:14px;font-size:11px;color:var(--meta)}
.more a{font-weight:bold}

/* video posts */
.vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px}
.vpost{display:flex;gap:4px;min-width:0}
.vote.small{width:36px;flex-shrink:0}
.vbody{flex:1;min-width:0}
.vtitle{font:normal 15px/1.3 var(--ui);color:var(--title)}
.vframe{position:relative;aspect-ratio:16/9;background:#111;margin-top:6px;border:1px solid #999}
.vid{width:100%;height:100%;object-fit:cover}
.vid-pending,.vid-sound{display:none;position:absolute;left:8px;bottom:8px;font-size:11px;font-weight:bold;padding:2px 6px;border:1px solid #000}
.vid-pending{background:var(--paint-yellow);color:#000}
.vid-sound{background:rgba(0,0,0,.7);color:#fff;border-color:#fff;pointer-events:none}
.vid[data-ready="0"]~.vid-pending{display:block}
.vid[data-ready="1"]~.vid-sound{display:block}
.vid[data-ready="1"]{cursor:url(/assets/cursor.svg) 1 1,pointer}

/* proof */
.proof .tagline{margin:6px 0 4px}
.proof-md{margin-bottom:10px}
.orig{border:1px solid #ccc;background:#f7f7f7;padding:8px;max-width:720px}
.orig a{display:block;aspect-ratio:960/465;background:#f7f6f2}
.orig img{width:100%;height:100%}
.orig figcaption{font-size:11px;color:var(--meta);margin-top:6px}
.receipts{list-style:none;padding:0;margin:10px 0 0;font-size:13px}
.receipts li{padding:3px 0}
.receipts li::before{content:"\00bb  ";color:#888}
.receipts span{color:#888;font-size:11px}

/* meme kit */
.kit-sub{font:11px var(--ui);color:var(--meta);margin-left:6px}
.kgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:12px}
.kthumb{display:block;border:1px solid #ccc;padding:3px;background:#fff;aspect-ratio:1}
.kthumb img{width:100%;height:100%;object-fit:cover}
.kthumb:hover{border-color:var(--paint-blue)}
.kitem figcaption{font-size:11px;color:#444;margin-top:5px}
.kitem figcaption b{display:block;font-size:12px;color:#222}
.kitem figcaption a{font-weight:bold}

/* paint window */
.paint{background:var(--w98);border:2px solid;border-color:#fff var(--w98-darker) var(--w98-darker) #fff;box-shadow:1px 1px 0 #000;padding:2px;font-family:Tahoma,Verdana,Arial,sans-serif}
.paint-title{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font-weight:bold;font-size:12px;padding:3px 3px 3px 6px}
.paint-x{display:flex;gap:2px}
.paint-x i{font-style:normal;width:16px;height:14px;line-height:12px;text-align:center;background:var(--w98);color:#000;font-size:10px;border:1px solid;border-color:#fff var(--w98-darker) var(--w98-darker) #fff}
.paint-menu{display:flex;gap:12px;font-size:12px;padding:3px 6px;color:#000}
.paint-canvas{background:#fff;border:2px solid;border-color:var(--w98-dark) #fff #fff var(--w98-dark);padding:12px 12px 8px;margin:0 2px;cursor:url(/assets/bucket.svg) 3 29,auto}
.paint-whale{width:220px;height:220px;margin:0 auto;border:1px dashed #000}
.paint-say{font:bold 22px/1 var(--scrawl);color:var(--paint-red);text-align:center;margin:8px 0 10px;transform:rotate(-3deg)}
.buy-slot{height:92px;position:relative}
.buy,.buy-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}
.buy{background:var(--paint-yellow);color:#000;border:4px solid #000;border-radius:16px 5px 19px 6px/6px 17px 5px 15px;font:32px/1 Impact,"Arial Black","Arial Narrow Bold",sans-serif;letter-spacing:.5px;transform:rotate(-1.5deg);cursor:url(/assets/bucket.svg) 3 29,pointer;text-decoration:none}
.buy small{font:bold 12px/1 var(--ui);letter-spacing:0;margin-top:5px}
.buy:hover,.buy:focus-visible{background:var(--paint-blue);color:#fff;text-decoration:none}
.buy:active{transform:rotate(-1.5deg) translate(2px,2px)}
.buy:not([hidden])~.buy-soon{display:none}
.buy-soon{border:3px dashed #999;border-radius:14px 4px 16px 6px/6px 15px 5px 14px;color:#666;font:bold 15px/1.2 var(--ui)}
.buy-soon small{font:11px var(--ui);margin-top:4px;color:#888}
.ca{display:flex;align-items:center;gap:6px;margin-top:12px;background:#ffffe1;border:1px solid #000;padding:5px 6px;min-height:40px}
.ca-k{font-weight:bold;font-size:12px}
.ca code{flex:1;min-width:0;font:12px/1.3 var(--mono);overflow-wrap:anywhere;color:#000}
.ca-copy{flex-shrink:0;background:var(--w98);border:2px solid;border-color:#fff var(--w98-darker) var(--w98-darker) #fff;padding:3px 8px;font-size:11px;color:#000}
.ca-copy:active:not(:disabled){border-color:var(--w98-darker) #fff #fff var(--w98-darker)}
.ca-copy:disabled{color:var(--w98-dark);text-shadow:1px 1px 0 #fff;cursor:url(/assets/cursor.svg) 1 1,not-allowed}
.copy-status{min-height:16px;font-size:11px;color:#444;margin-top:4px}
.paint-palette{display:grid;grid-template-columns:repeat(14,1fr);gap:2px;padding:6px 4px 3px}
.paint-palette i{display:block;height:13px;border:1px solid;border-color:var(--w98-dark) #fff #fff var(--w98-dark)}
.paint-palette i:nth-child(1){background:#000}.paint-palette i:nth-child(2){background:#808080}.paint-palette i:nth-child(3){background:#800000}.paint-palette i:nth-child(4){background:#808000}.paint-palette i:nth-child(5){background:#008000}.paint-palette i:nth-child(6){background:#008080}.paint-palette i:nth-child(7){background:#000080}.paint-palette i:nth-child(8){background:#800080}.paint-palette i:nth-child(9){background:#808040}.paint-palette i:nth-child(10){background:#004040}.paint-palette i:nth-child(11){background:#0080ff}.paint-palette i:nth-child(12){background:#004080}.paint-palette i:nth-child(13){background:#8000ff}.paint-palette i:nth-child(14){background:#804000}
.paint-palette i:nth-child(15){background:#fff}.paint-palette i:nth-child(16){background:#c0c0c0}.paint-palette i:nth-child(17){background:#ff0000}.paint-palette i:nth-child(18){background:#ffff00}.paint-palette i:nth-child(19){background:#00ff00}.paint-palette i:nth-child(20){background:#00ffff}.paint-palette i:nth-child(21){background:#0000ff}.paint-palette i:nth-child(22){background:#ff00ff}.paint-palette i:nth-child(23){background:#ffff80}.paint-palette i:nth-child(24){background:#00ff80}.paint-palette i:nth-child(25){background:#80ffff}.paint-palette i:nth-child(26){background:#8080ff}.paint-palette i:nth-child(27){background:#ff0080}.paint-palette i:nth-child(28){background:#ff8040}

/* about box */
.about{border:1px solid #ddd;padding:10px 12px;background:#fff;font-size:12px}
.about-name{font:bold 16px var(--ui)}
.about-subs{color:var(--meta);font-size:11px;margin:2px 0 8px}
.about h3{font-size:12px;margin:10px 0 2px;border-bottom:1px solid #eee}
.about ol{padding-left:20px}
.about li{padding:1px 0}
.mods{margin-top:10px;font-size:11px;color:var(--meta)}

/* footer */
.foot{margin-top:40px;border-top:1px solid #ccc;background:#f5f5f5;padding:16px;text-align:center;font-size:11px;color:#666}
.foot p+p{margin-top:5px}
.foot p:first-child{font-weight:bold;color:#333}

/* tablet: sidebar narrower, videos still 2-up */
@media (max-width:1100px){
  .col-side{width:280px}
  .coinbar-in{flex-wrap:wrap}
  .coinbar-act{width:100%;justify-content:flex-start}
  .kgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vgrid{grid-template-columns:1fr}
}

/* phone: one column; buy box right under the post */
@media (max-width:860px){
  .page{flex-direction:column;align-items:stretch;gap:0;padding:10px 16px 0}
  .col-main,.col-side{display:contents}
  .post{order:1}
  .paint{order:2;margin-top:16px}
  .comments{order:3}
  .videos{order:4}
  .proof{order:5}
  .kit{order:6}
  .about{order:7;margin-top:24px}
  .paint-menu{display:none}
  .coinbar-in{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px 12px;padding:12px 16px 14px}
  .coinbar-pfp{width:48px;height:48px;align-self:start}
  .coinbar-name{font-size:28px}
  .coinbar-dot{display:none}
  .coinbar-tag{font-size:20px;display:block;margin-top:4px;transform:rotate(-1.5deg);transform-origin:left}
  .coinbar-what{font-size:13px;margin-top:5px}
  .coinbar-act{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:auto}
  .ca-top{min-width:0;max-width:none}
  .buy-top{height:56px;font-size:26px}
  .copy-status-top{position:static;margin:0}
  .post{grid-template-columns:36px minmax(0,1fr);column-gap:4px}
  .vote{width:36px}
  .post-title{font-size:17px}
  .exch-tabs span:not(.on){display:none}
  .exch-date{display:none}
  .asks{font-size:11px}
  .asks th,.asks td{padding:4px 6px}
  .asks th:last-child,.asks td:last-child{display:none}
  .exch figcaption{font-size:11px}
  .paint-canvas{display:grid;grid-template-columns:110px minmax(0,1fr);gap:0 12px;align-items:center}
  .paint-whale{width:110px;height:110px;grid-row:span 1}
  .paint-say{margin:0;font-size:24px}
  .buy-slot,.ca,.copy-status{grid-column:1/-1}
  .buy-slot{margin-top:12px}
  .kgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .child{margin-left:4px;padding-left:9px}
  .md p{font-size:14px}
}
@media (max-width:360px){
  .coinbar-name{font-size:24px}
  .buy{font-size:28px}
}