/* The board on a phone: the layer over main.css below 480px, written for this site.
   Every surface and ink a style re-colours is a ROLE token (main.css section 1), so vantablack.css
   reaches the phone as it reaches the desktop; palette tokens remain only where both styles agree.
   Order: switches, links, the fixed bar and banner, buttons, the post form, threads and posts,
   files, the reply card, comment strips, overlays, page list and footer, the site's own pages. */
@media only screen and (max-width:480px){

/* ---- the document and the desktop/phone switches ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{width:100%;margin-top:0;padding-left:0;padding-right:0}
.desktop,embed,div.opContainer div.postInfo,.noPictures .mFileInfo{display:none!important}
.mobile{display:block!important;clear:left!important}
.mobileinline,span.replyTextM{display:inline!important}
.mobileib{display:inline-block!important}
.hideMobile,.absBotDisclaimer{display:none!important}

/* ---- links: one colour; the reply and footer links underlined so a finger can find them ---- */
a,.useremail:not(:hover) .name:not(.capcode),a.replylink:not(:hover),div#absbot a:not(:hover){color:var(--link)!important}
a.replylink,div#absbot a{text-decoration:underline!important}
a:hover,a.quotelink:hover,a.deadlink:hover{color:var(--link-hover)!important}

/* ---- the fixed bar: board select, page jump ---- */
div#boardNavMobile{position:fixed;top:0;left:0;right:0;z-index:var(--z-float);box-sizing:border-box;width:100%;padding:2px 4px;overflow:hidden;background-color:var(--card);border-bottom:2px solid var(--card-edge)}
div#boardNavMobile,div#boardNavMobile select,div#boardNavMobile option{font-size:x-small}
div.boardSelect{float:left}
div.boardSelect>strong{padding-right:var(--gutter)}
div.pageJump{float:right;padding-top:3px;padding-right:var(--gutter);font-size:7.5pt}
.pageJump a{padding-right:var(--gutter);text-decoration:none}
/* the banner clears the bar; the logo at half size */
div.boardBanner{margin-top:40px!important}
#bannerCnt{border:1px solid var(--banner-frame)}
#bannerCnt,#bannerCnt img{width:calc(var(--banner-w) / 2);height:calc(var(--banner-h) / 2)}

/* ---- buttons ---- */
.button{padding:6px 10px 5px;font-weight:700;text-decoration:none;color:var(--link)!important;background-color:var(--card);border:1px solid var(--card-edge);border-radius:3px;user-select:none}
.button a{text-decoration:none!important}
.button:hover{cursor:pointer}
.mobileib.button{display:inline-block;margin:1px;padding:3px 6px}
.redButton{background-color:var(--card-edge)}
div.navLinks{margin-top:9px!important;margin-bottom:0!important;text-align:center}

/* ---- the post form: the toggle, then the form at phone width ---- */
.mobilePostFormToggle{margin:0 auto;padding-top:15px;text-align:center;font-weight:700}
a.mobilePostFormToggle{display:inline-block!important}
a.mobilePostFormToggle.hidden{display:none!important}
div.mobilePostFormToggle div{width:300px;margin:0 auto;padding-top:var(--gutter);padding-bottom:var(--gutter);background-color:var(--label-bg);border:1px solid var(--label-edge)}
#mpostform{margin-top:10px;text-align:center}
#postForm{width:auto}
#postForm input[name="sub"]{width:var(--phone-subject-width)!important}
#postForm input[type="submit"]{width:60px;margin:0;padding:2px 4px 3px}
#postForm:not(.hideMobile){display:table;margin-top:var(--indent);overflow:hidden}
td>input[type="text"],td>textarea,td>input[type="password"]{width:var(--phone-field-width)!important;margin-right:0!important}
td>input{margin-left:1px}
.passNotice{padding-left:3px}
form[name="post"]{margin:auto;max-width:100%}
tr.mobile{display:table-row!important}
tr.mobile td{padding:var(--gutter)}
div.postingMode{width:300px;margin:0 auto;padding:3px}
div.closed{padding-top:40px;padding-bottom:40px}

/* ---- threads: separators, the opening post ---- */
div.board>hr{height:0;margin-top:30px!important;margin-bottom:30px!important;border:none;border-top:1px solid var(--rule)}
div.board>hr:last-of-type{margin-bottom:10px!important}
div.thread{border-top:none}
div.opContainer{display:block;margin:var(--gutter) 0 0;padding-left:0;overflow:hidden;background-color:var(--card);border:none}
/* the phone's post line: a strip above each post */
div.post div.postInfoM,div.replyContainer div.post div.postInfo{overflow:hidden;background-color:var(--card-hover);border-bottom:1px solid var(--card-edge)}
div.post div.postInfoM{padding:var(--gutter)}
div.replyContainer div.postInfoM{margin:0}
div.post div.postInfoM span.postNum,div.postInfo span.postNum,div.post div.postInfoM span.nameBlock,div.postInfo span.nameBlock{float:left}
div.post div.postInfoM span.postNum a,div.postInfo span.postNum a{text-decoration:none;color:var(--postno-ink)!important}
div.post div.postInfoM span.postNum a:hover{color:var(--red)}
div.post div.postInfoM span.nameBlock,div.postInfo span.nameBlock{display:inline;clear:left}
div.post div.postInfoM span.nameBlock span.name,div.postInfo span.nameBlock span.name,div.post div.postInfoM span.nameBlock span.postertrip{color:var(--name-ink)}
div.post div.postInfoM span.nameBlock span.name,div.postInfo span.nameBlock span.name,div.post div.postInfoM span.subject{font-weight:700}
div.post div.postInfoM span.nameBlock span.postertrip{font-weight:400!important}
div.post div.postInfoM span.dateTime{float:right;text-align:right;color:var(--postno-ink)!important}
div.post div.postInfoM span.subject{color:var(--subject-ink)}
.stickyIcon{margin-bottom:-2px}
.postMenuBtn{float:left;margin:4px -5px 0 4px!important;height:.5em!important;font-size:16px;font-weight:700;opacity:1!important;transform:rotate(90deg)}

/* ---- files: small thumbs, the file line folded away ---- */
div.post div.file .fileThumb img{max-width:var(--phone-thumb);max-height:var(--phone-thumb);object-fit:scale-down}
div.post div.file .fileThumb{margin-left:var(--gutter)!important;margin-right:10px!important;text-decoration:none}
div.post div.file.image-expanded .fileThumb{margin-left:0!important;margin-right:0!important}
div.post div.file .fileThumb .expanded-thumb{max-width:100vw!important;max-height:none!important}
span.fileText{font-size:smaller}

/* ---- the reply card, full width ---- */
div.reply{margin:0;padding:2px;background-color:var(--card);border:0}
div.replyContainer{margin:var(--gutter) 0 0;padding-left:0;background-color:var(--card)}
.is_index div.replyContainer{margin:7px 0 0}
div.replyContainer div.reply{box-sizing:border-box;width:100%;padding:0!important}
div.replyContainer div.post div.postInfo{margin:0;padding:3px}
div.replyContainer div.post div.postInfo span.postNum,div.replyContainer div.post div.postInfo span.dateTime{font-style:italic}
div.replyContainer div.post div.postInfo span.postNum a:first-child:after{content:" "}
div.replyContainer div.post div.postInfo span.userInfo{float:left;padding-left:var(--gutter)}
div.replyContainer div.post div.postInfo span.dateTime{float:right;padding-right:10px;text-align:right}
span.subject,div.replyContainer div.post div.postInfo span.dateTime span.date{display:block}
div.replyContainer div.post div.fileInfo{margin-left:0}
div.replyContainer div.post div.file:not(.image-expanded){padding:var(--gutter)}
div.thread>div:nth-of-type(2)>div.reply{margin-top:0!important}
/* what the phone layout leaves out */
ul.rules,div.sideArrows,div.post div.file div.fileText,div.replyContainer div.post div.postInfo input[type=checkbox],#enable-mobile{display:none}
blockquote{margin:10px!important}
blockquote.postMessage{font-size:var(--message-size)}
.omittedposts,.abbr{font-size:var(--text-size)!important;color:var(--omitted-ink)!important}

/* ---- strips: the omitted summary, the view-thread link, backlinks, the file tip ---- */
span.summary:not(.preview-summary){display:block;margin-top:0;margin-bottom:var(--gutter);padding:var(--gutter);text-align:center;font-weight:700;background-color:var(--card-hover);border-bottom:1px solid var(--card-edge)!important}
div.postLink,.backlink.mobile{background-color:var(--card-hover);border-top:1px solid var(--card-edge)}
div.postLink{padding:var(--gutter);overflow:hidden}
div.postLink span{float:left}
div.postLink a{float:right;color:var(--link)!important}
div.postLink span.info{margin-top:8px;color:var(--link)}
.postLink.mobile{clear:both!important}
.mFileInfo{padding-top:var(--gutter);text-align:center;text-decoration:none!important;font-size:var(--small-size)!important;color:var(--omitted-ink)!important}
.reply:target,.reply:focus,.reply.highlight{background:var(--target-bg)!important;border:none!important}
.highlightPost{background:var(--highlight-phone)!important}
.mobileSpoiler{padding:2px!important}

/* ---- overlays at phone width ---- */
#quote-preview{max-width:90vw;margin-left:0;box-shadow:0 0 4px 0 var(--preview-shadow)}
#settingsBox{background-color:var(--card)}

/* ---- the page list and the footer ---- */
div.mPagelist{margin-top:10px;padding-bottom:10px;text-align:center;color:var(--chrome-ink);border-bottom:1px solid var(--card-edge)}
div.mPagelist strong{color:var(--link)}
div.mPagelist>div.prev,div.mPagelist div.next{display:inline-block;margin:var(--indent) 2px 15px}
div.mPagelist span{display:inline-block;padding:2px}
div.mPagelist .pages{padding-top:6px}
.mobileCatalogLink,div.absBotText{margin-top:10px}
.mobileCatalogLink{font-size:larger}

/* ---- the site's own pages ---- */
#home{width:auto;margin:50px 8px 0}
#home .column{display:block;width:auto;padding:0}
}