/* The board, desktop. Our stylesheet for the imageboard layout the site keeps (a convention older
   than any one site: Futaba, 2003); the measured values come from forge/board/reference/ and the
   audit in forge/board/COMPONENTS.md, nothing is loaded from anywhere else.

   How it is built:
     1 tokens    the blue palette, the roles the styles re-colour, the metrics that repeat
     2 document  root, text, links, rules, tables, utility classes
     3 chrome    navigation, banner, notices
     4 form      the post form, its fields, the blotter
     5 posts     thread and post boxes, the post line, files, comment markup, highlights
     6 overlays  quote preview, tooltip, post menu, settings panel
     7 lists     page list, bottom controls, footer, thread tools, archive
     8 pages     home, search

   Colour is written in two layers. PALETTE tokens name the blue style's colours. ROLE tokens say
   what a surface is (the link, the card, the post line) and default to the palette; vantablack.css
   restyles the board by redefining roles only. A rule that uses a palette token directly is one the
   dark style leaves as it is. mobile.css and catalog.css load after vantablack.css and use the same
   roles, so the dark style reaches the phone layout and the catalog. */

/* ==== 1 tokens ================================================================================ */
:root{
  /* palette: the blue style */
  --paper:#EEF2FF;
  --ink:#000;
  --white:#fff;
  --navy:#34345C;
  --alarm:#DD0000;
  --red:red;
  --panel-blue:#D6DAF0;
  --panel-deep:#C9CDE8;
  --edge:#B7C5D9;
  --slate:#89A;
  --lilac:#98E;
  --silver:#AAA;
  --brick:#AF0A0F;
  --leaf:#117743;
  --indigo:#0F0C5D;
  --grey:#707070;
  --moss:#789922;
  --error:#e62020;
  --ember:#e04000;
  --tip:#181f24;
  --purple:#800080;
  --electric:#0000F0;
  --rose:#FF0080;
  --azure:#007FFF;
  --crimson:#C41E3A;
  --jade:#00A550;
  --cerulean:#1d8dc4;
  --soot:#070707;
  --graphite:#333;
  --mist:#c1c6e2;
  --dusk:#7b82ac;
  --orchid:#D6BAD0;
  --thistle:#BA9DBF;
  --blush:#f0d6d6;
  --preview-shadow:rgba(45,77,59,.5);

  /* roles: what vantablack.css redefines */
  --ground:var(--paper) url(../img/fade.png) top center repeat-x;
  --text:var(--ink);
  --link:var(--navy);
  --link-hover:var(--alarm);
  --rule:var(--edge);
  --chrome-ink:var(--slate);
  --banner-ink:var(--brick);
  --title-ink:var(--brick);
  --subtitle-ink:var(--brick);
  --banner-frame:var(--navy);
  --label-bg:var(--lilac);
  --label-ink:var(--ink);
  --label-edge:var(--ink);
  --field-edge:var(--silver);
  --focus-edge:var(--lilac);
  --card:var(--panel-blue);
  --card-edge:var(--edge);
  --card-hover:var(--panel-deep);
  --arrows:var(--edge);
  --name-ink:var(--leaf);
  --subject-ink:var(--indigo);
  --postno-ink:var(--ink);
  --greentext:var(--moss);
  --quote-ink:var(--alarm);
  --spoiler-ring:none;
  --omitted-ink:var(--grey);
  --target-bg:var(--orchid);
  --target-edge:var(--thistle);
  --highlight-bg:var(--mist);
  --highlight-edge:var(--dusk);
  --current-page:var(--ink);
  --footer-ink:var(--ink);
  --excerpt-ink:var(--graphite);
  --highlight-phone:var(--blush);

  /* faces */
  --sans:arial,helvetica,sans-serif;
  --display-face:Tahoma,sans-serif;
  --sjis-face:'IPAMonaPGothic','Mona','MS PGothic',monospace;

  /* metrics */
  --text-size:10pt;
  --small-size:9pt;
  --fine-size:11px;
  --ui-size:12px;
  --list-size:13px;
  --toggle-size:22px;
  --title-size:28px;
  --gutter:5px;
  --indent:20px;
  --icon:16px;
  --form-width:468px;
  --field-width:244px;
  --subject-width:300px;
  --area-width:292px;
  --file-width:200px;
  --phone-field-width:220px;
  --phone-subject-width:160px;
  --text-max:600px;
  --message-size:11pt;
  --preview-thumb:80px;
  --phone-thumb:125px;
  --banner-w:300px;
  --banner-h:100px;
  --overlay-max:400px;
  --bar-height:24px;
  --z-menu:9000;
  --z-float:9001;
  --z-panel:9002;
  --z-tip:100000;

  /* the document never lets a phone browser re-size its text */
  -moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;
}

/* ==== 2 document ============================================================================== */
body{background:var(--ground);color:var(--text);font-family:var(--sans);font-size:var(--text-size);margin-left:0;margin-right:0;margin-top:var(--gutter);padding-left:var(--gutter);padding-right:var(--gutter)}
a{color:var(--link)}
a,.useremail{text-decoration:none}
a:hover,div.post div.postInfo span.postNum a:hover{color:var(--link-hover)!important}
hr{border:none;border-top:1px solid var(--rule);height:0}
hr.abovePostForm{width:90%}
hr#op,#ctrl-top,div.board>hr,#navlinks-bottom{clear:both}
table{border-spacing:1px;margin-left:auto;margin-right:auto}
td{margin:0;padding:0;font-size:var(--text-size)}

/* utility classes, with the one-declaration rules that share their declaration */
.mobile,.mobileinline,.mobileib{display:none!important}
.center,#g-search-form{text-align:center}
.bold,.commentpostername{font-weight:700}
.smaller,.password{font-size:smaller}
.navSmall{font-size:90%}
.hand,.tu-btn{cursor:pointer}
.hidden{display:none}

/* ==== 3 chrome ================================================================================ */
/* the navigation bars: board list on top, again at the foot */
div#boardNavDesktop,div#boardNavDesktopFoot{font-size:var(--small-size);color:var(--chrome-ink)}
div#boardNavDesktop{display:block}
div#boardNavDesktopFoot{clear:both;padding-top:10px;padding-bottom:3px}
div#boardNavDesktop a,div#boardNavDesktopFoot a{font-weight:400;padding:1px;text-decoration:none;color:var(--link)}
#navtopright,#navbotright,div.homelink{float:right}
.hasDropDownNav #navtopright{display:none}
#boardNavDesktop .pageJump{padding:0}
#boardNavDesktop .pageJump a{padding-right:var(--gutter)}
/* the drop-down variant: a bar pinned to the top, the body pushed below it */
.persistentNav,.hasDropDownNav div#boardNavMobile{position:fixed;top:0;left:0;right:0;z-index:var(--z-float);display:block!important;overflow:hidden;padding:2px 4px;font-size:var(--ui-size);background-color:var(--panel-blue);border-bottom:2px solid var(--edge)}
.hasDropDownNav body{margin-top:var(--bar-height)}

/* the banner: logo frame, board title, subtitle */
div.boardBanner{text-align:center;clear:both;color:var(--banner-ink)}
#bannerCnt{margin:var(--gutter) auto;max-width:100%;overflow:hidden;border:1px solid var(--banner-frame)}
#bannerCnt,#bannerCnt img{width:var(--banner-w);height:var(--banner-h)}
#bannerCnt img{display:block}
div.boardBanner>div.boardTitle{margin-top:0;font-family:var(--display-face);font-size:var(--title-size);font-weight:700;letter-spacing:-2px;color:var(--title-ink)}
div.boardBanner>div.boardSubtitle{color:var(--subtitle-ink)}
span.x-small,div.boardBanner>div.boardSubtitle{font-size:x-small}
.globalMessage{text-align:center;color:var(--red)}

/* ==== 4 form ================================================================================== */
#togglePostFormLink{text-align:center;font-size:var(--toggle-size);font-weight:700}
#togglePostFormLink a{color:var(--link)}
#postForm{width:var(--form-width);display:none}
#postForm.open{display:table}
/* the label column (and the same look on a .postblock cell) */
table.postForm>tbody>tr>td:first-child,.postblock{padding:0 var(--gutter);font-size:var(--text-size);font-weight:700;color:var(--label-ink);background-color:var(--label-bg);border:1px solid var(--label-edge)}
tr.rules td{border:0!important;background-color:transparent!important;font-weight:400!important}
ul.rules{margin:var(--gutter) 0 0;padding:0}
ul.rules>li{list-style:none;font-size:var(--fine-size)}
.rules>li:before{content:"\2022\20"}
/* fields */
input[type=text],input[type=password],textarea{-webkit-appearance:none;-webkit-border-radius:0}
input[type=text],input[type=password],table.postForm>tbody textarea{margin:0 2px 0 0;padding:2px 4px 3px;outline:none;font-family:var(--sans);font-size:var(--text-size);border:1px solid var(--field-edge)}
input[type=text]:focus,input[type=password]:focus,textarea:focus{border:1px solid var(--focus-edge)!important}
table.postForm>tbody>tr>td>input[type=text]{width:var(--field-width)}
table.postForm>tbody>tr>td>input[name="sub"]{width:var(--subject-width)}
#postForm textarea{width:var(--area-width)}
@media screen and (-webkit-min-device-pixel-ratio:0){tbody textarea{margin-bottom:-3px!important;width:var(--area-width)}}
input[type=password],.blotter-date{width:50px;text-align:center}
#postFile{margin-right:10px;width:var(--file-width)}
/* what the form says back */
#postFormError{display:none;margin-top:3px;padding:3px var(--gutter);font-family:monospace;font-size:var(--list-size);font-weight:700;color:var(--white);background-color:var(--error);text-shadow:0 1px rgba(0,0,0,.2)}
#postFormError a{color:var(--white)}
.passNotice{font-size:smaller;padding-left:6px}
div.postingMode{margin-top:8px;padding:1px;text-align:center;font-size:larger;font-weight:700;color:var(--white);background-color:var(--ember)}
div.closed{padding-top:100px;padding-bottom:100px;text-align:center;font-size:x-large;font-weight:700;color:var(--red)}
/* the blotter under the form */
#blotter{width:var(--form-width);margin:auto}
#blotter td{vertical-align:top;font-size:var(--fine-size)}
#blotter tfoot{text-align:right}
.redtxt{color:var(--red)}
#blotter-msgs s{background-color:inherit!important;color:inherit!important}
#search-box{width:120px;height:16px;line-height:16px;margin-left:2px;padding:0 2px}

/* ==== 5 posts ================================================================================= */
div.navLinks,div.thread{margin:0}
div.thread{clear:both}
div.thread:last-child{padding-bottom:21px;margin-bottom:6px}
div.post{margin:4px 0;overflow:hidden}
div.opContainer,div.op{display:inline}
/* the reply card */
div.thread>div:nth-of-type(2)>div.reply{margin-top:2px!important}
div.reply{display:table;padding:2px;background-color:var(--card);border:1px solid var(--card-edge);border-left:none;border-top:none}
div.reply input{float:none}
div.sideArrows{float:left;margin-left:2px;margin-right:2px;margin-top:0;color:var(--arrows)}
/* the post line: subject, name, date, number */
div.post div.postInfo,div.post blockquote.postMessage,div.post div.file{display:block}
div.post div.postInfo{width:100%}
div.post div.postInfo span.nameBlock{display:inline-block}
div.post div.postInfo span.nameBlock span.name,div.post div.postInfo span.nameBlock span.postertrip{color:var(--name-ink)}
div.post div.postInfo span.nameBlock span.name,div.post div.postInfo span.subject{font-weight:700}
div.post div.postInfo span.nameBlock span.postertrip{font-weight:400!important}
div.post div.postInfo span.subject{color:var(--subject-ink)}
div.post div.postInfo span.postNum a{text-decoration:none;color:var(--postno-ink)}
.posteruid .hand:hover{color:var(--alarm)!important}
/* staff capcodes */
.nameBlock.capcodeAdmin span.name,span.capcodeAdmin span.postertrip,span.capcodeAdmin strong.capcode{color:var(--red)!important}
.nameBlock.capcodeFounder span.name,span.capcodeFounder span.postertrip,span.capcodeFounder strong.capcode{color:var(--leaf)!important}
.nameBlock.capcodeMod span.name,span.capcodeMod span.postertrip,span.capcodeMod strong.capcode{color:var(--purple)!important}
.nameBlock.capcodeDeveloper span.name,span.capcodeDeveloper span.postertrip,span.capcodeDeveloper strong.capcode{color:var(--electric)!important}
.nameBlock.capcodeManager span.name,span.capcodeManager span.postertrip,span.capcodeManager strong.capcode{color:var(--rose)!important}
.nameBlock.capcodeVerified span.name,span.capcodeVerified span.postertrip,span.capcodeVerified strong.capcode{color:var(--azure)!important}
/* the small icons on the post line */
.identityIcon,.stickyIcon,.archivedIcon,.closedIcon,.trashIcon{width:var(--icon);height:var(--icon)}
.identityIcon{margin-bottom:-3px}
.stickyIcon,.archivedIcon,.closedIcon{margin-bottom:-1px}
.stickyIcon{padding-left:2px}
.archivedIcon,.closedIcon{margin-left:-1px}
.trashIcon{margin-bottom:-2px}
.useremail:not(:hover) .name:not(.capcode),.useremail:not(:hover) .postertrip{color:var(--navy)!important}
.oldpost{background:inherit;color:var(--indigo);font-weight:800}
/* what an index page leaves out */
.omittedposts,.abbr,span.summary{color:var(--omitted-ink)}
span.summary{margin-top:10px}
a.replylink:not(:hover),div#absbot a:not(:hover){color:var(--link)!important}
.isMobileDevice blockquote.postMessage{font-size:var(--message-size)}

/* files */
.fileText{max-width:var(--text-max);white-space:nowrap}
.fileText a,table.exif td b,.quoteLink,.quotelink,.deadlink{text-decoration:underline}
div.post div.file div.fileInfo{margin-right:10px;word-break:break-all}
div.replyContainer div.post div.file div.fileInfo{margin-left:var(--indent)}
div.post div.file .fileThumb{float:left;margin:3px var(--indent) var(--gutter)}
div.post div.file .fileThumb img{border:none;float:left}
span.fileThumb{margin-left:0!important;margin-right:var(--gutter)!important}
div.reply span.fileThumb,div.reply span.fileThumb img{float:none!important;margin-top:0!important;margin-bottom:0!important}
img.expandedImg,.expandedWebm{max-height:none!important}
img.expandedImg{max-width:none!important}
.expandedWebm{width:auto!important;height:auto!important;margin:3px 0 var(--gutter);max-width:100vw!important}
.fileDeleted,.fileDeletedRes{height:13px}
.fileDeleted{width:172px}
.fileDeletedRes{width:127px}
table.exif{display:none;min-width:450px}
table.exif td{min-width:150px;font-size:8pt;color:var(--soot)}

/* comment markup: greentext, quote links, spoilers, the formatting marks, code, text art */
blockquote>span.quote{color:var(--greentext)}
.quoteLink,.quotelink,.deadlink{color:var(--quote-ink)!important}
.deadlink,#blotter-msgs s{text-decoration:line-through}
span.spoiler,s,s a:not(:hover){color:var(--ink)!important;background:var(--ink)!important;text-decoration:none;box-shadow:var(--spoiler-ring)}
span.spoiler:hover,span.spoiler:focus,s:hover,s:focus,s:hover a{color:var(--white)!important}
s:hover a,.aplnk,.linkified{text-decoration:underline}
.mu-s{font-weight:700}
.mu-i{font-style:italic}
.mu-r{color:var(--crimson)}
.mu-g{color:var(--jade)}
.mu-b{color:var(--cerulean)}
.prettyprint{display:inline-block;margin:0;padding:var(--gutter)!important;max-width:var(--text-max);max-height:400px;overflow-x:auto;background-color:var(--white);border:none!important}
.sjis{display:block;clear:left;overflow:auto;white-space:pre;font-family:var(--sjis-face);font-size:16px;line-height:17px}
/* backlinks, highlights, hidden posts */
div.backlink{padding-left:10px;padding-right:10px;padding-bottom:var(--gutter);font-size:x-small!important}
.backlink span{padding-right:var(--gutter)}
.op .backlinkHr{width:55%}
.highlightPost:not(.op){background:var(--highlight-bg)!important;border-color:var(--highlight-edge)!important}
.reply:target,.reply.highlight{padding:2px;background:var(--target-bg)!important;border:1px solid var(--target-edge)!important;border-left:none!important;border-top:none!important}
.post-hidden,.thread-hidden{display:none}
.thread-hidden-info{margin:6px 0 6px var(--indent);font-size:var(--small-size);color:var(--omitted-ink)}

/* ==== 6 overlays ============================================================================== */
/* the quote preview: a card under the mouse */
#quote-preview{position:absolute;z-index:var(--z-float);margin-left:var(--indent);padding:var(--gutter) 10px;max-width:var(--overlay-max);background:var(--card);border:1px solid var(--card-edge)!important;border-right-width:2px!important;border-bottom-width:2px!important}
div.posthover{max-width:var(--overlay-max)}
div.posthover blockquote{margin:var(--gutter)}
div.posthover a.fileThumb{margin-left:var(--gutter)!important;margin-right:10px!important}
div.posthover div.fileThumb{margin-left:0!important;margin-right:10px!important}
div.posthover img[data-md5]{max-width:var(--preview-thumb);max-height:var(--preview-thumb);width:auto!important;height:auto!important}
/* the tooltip and its arrow */
#tooltip{position:absolute;z-index:var(--z-tip);max-width:var(--overlay-max);padding:3px 6px;font-size:var(--fine-size);line-height:13px;white-space:pre-line;word-wrap:break-word;color:var(--white);background-color:var(--tip);border-radius:3px}
.tip-top:after{content:'';position:absolute;bottom:-5px;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--tip)}
/* the post menu: its button, then the menu */
.postMenuBtn{display:inline-block;width:1em;height:1em;margin-left:var(--gutter);line-height:1em;text-align:center;text-decoration:none;color:var(--navy);opacity:.8;outline:none;cursor:pointer;transition:transform .1s}
.postMenuBtn.menuOpen{transform:rotate(90deg)}
.dd-menu{position:absolute;z-index:var(--z-menu);font-size:var(--ui-size);line-height:1.3em}
.dd-menu ul{margin:0;padding:0;list-style:none;white-space:nowrap;background-color:var(--card);border:1px solid var(--card-edge);border-right-width:2px}
.dd-menu li{position:relative;padding:3px var(--indent) 3px 12px;vertical-align:middle;cursor:pointer}
.dd-menu li:hover{background-color:var(--card-hover)}
.dd-menu li.dd-menu-sep{margin:0;padding:0;border-top:1px solid var(--edge)}
/* the settings panel (and the box it opens from) */
#settingsMenu,#settingsBox{position:absolute;right:10px;margin-top:10px}
#settingsMenu{z-index:var(--z-panel);min-width:220px;padding:8px 12px;font-size:var(--small-size);background:var(--card);border:1px solid var(--card-edge);border-right-width:2px;border-bottom-width:2px}
#settingsMenu h3{margin:0 0 6px;font-size:var(--text-size)}
#settingsMenu label{display:block;margin:3px 0;cursor:pointer}
#settingsMenu .panelClose{float:right;margin-left:12px;font-weight:700;cursor:pointer}
.blink{animation:blink 1.5s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* ==== 7 lists ================================================================================= */
/* the page list: a card at the foot of an index */
div.pagelist,div.pagelist>div{float:left}
div.pagelist{margin:0;padding:3px 7px;overflow:hidden;list-style:none;font-size:var(--list-size)!important;color:var(--chrome-ink);background:var(--card);border:none;border-right:1px solid var(--card-edge);border-bottom:1px solid var(--card-edge)}
div.pagelist>div span,div.pagelist div.pages{padding:4px}
div.pagelist>div span{display:inline-block}
div.pagelist div.pages a{text-decoration:none!important}
div.pagelist form{display:inline}
div.pagelist strong{color:var(--current-page)}
div.pagelist div.cataloglink{margin-left:7px;padding-left:12px;border-left:1px solid var(--card-edge)}
/* bottom controls and the footer */
.bottomCtrl{float:right;margin-top:2px}
.stylechanger{margin-left:var(--gutter);font-size:var(--text-size)}
div.deleteform input[type=checkbox]{margin:1px 2px}
div#absbot{clear:both;padding-top:10px;padding-bottom:4px;text-align:center;font-size:x-small!important;color:var(--footer-ink)}
#footer-links{margin-top:var(--gutter)}
#enable-mobile,#disable-mobile{font-size:small!important}
/* thread tools the script adds: statistics, the new-posts marker */
#threadStats{float:right;padding:0 var(--gutter);font-size:var(--small-size);color:var(--omitted-ink)}
.thread-stats-icon{display:none}
.newPostsMarker{border-top:1px dashed var(--brick)}
/* the archive table */
#arc-list{max-width:80%;margin:10px auto 0;font-size:var(--text-size)}
#arc-list td{padding:2px 6px;text-align:center;border-bottom:1px solid var(--card-edge)}
#arc-list .quotelink{color:var(--navy)!important}
#arc-list .quotelink:hover{color:var(--alarm)!important}
#arc-sort{border-bottom:1px dotted;cursor:pointer}

/* ==== 8 pages ================================================================================= */
/* home: boxes of board links and numbers */
#home{width:728px;max-width:100%;margin:var(--indent) auto 0;text-align:left}
#home .box-outer{margin-bottom:12px;background:var(--card);border:1px solid var(--card-edge)}
#home .boxbar{padding:2px 6px;font-size:var(--text-size);font-weight:700;color:var(--label-ink);background:var(--label-bg);border-bottom:1px solid var(--label-edge)}
#home .boxcontent{padding:6px 10px;font-size:var(--text-size)}
#home .column{display:inline-block;vertical-align:top;width:48%;padding-right:2%}
#home .column a{display:block;line-height:1.5}
#home .stats span{display:inline-block;margin-right:14px}
/* search */
.g-search-ctrl{vertical-align:top;margin:0 3px}
#js-sf-qf{width:185px;padding:2px 4px 3px}
#results .result{margin:8px 0}
#results blockquote{margin:2px var(--indent);color:var(--excerpt-ink)}

/* Native attachments retain the reference's file line and thumbnail. */
.board-video{display:block;width:min(960px,100%);max-width:100%;height:auto;max-height:80vh;background:#000}
.video-close{display:block;margin:4px 0}
.danbo-slot{width:728px;height:90px;margin:10px auto;overflow:hidden;text-align:center}
.danbo-slot img{display:block;width:100%;height:100%;object-fit:contain}
.adl{font-size:10px;text-align:center}
@media(max-width:480px){.danbo-slot{width:300px;height:250px}.postMessage pre{max-width:calc(100vw - 48px);overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}}