/* 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}
#postForm.door{display:table}                          /* the door's Code form is always shown */
body.is_album .postInfo input[type=checkbox]{display:none}   /* a campaign's album page has no delete controls */
/* 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}
/* the reference's expanded video (yotsubluenew.716.css:1521-1523); media.js fits its max-width to the room it has.
   The phone rule is mobile.css's own. */
.expandedWebm{margin:3px 20px 5px}
/* a track's player (media.js): beside its cover, which stays. A fixed 360 px, so the reply keeps its height when an
   album moves the player from track to track (a percentage width collapses to 0 in a reply, display:table: measured) */
div.post div.file audio.expandedWebm{display:block;width:360px;height:40px;margin:3px 0 var(--gutter)}
.collapseWebm{white-space:nowrap}
.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)}

.danbo-slot{width:728px;height:90px;margin:10px auto;overflow:hidden;text-align:center}
/* the link is the slot's own box, so a focus ring drawn on it surrounds the whole banner */
.danbo-slot a{display:block;width:100%;height:100%}
.danbo-slot img{display:block;width:100%;height:100%;object-fit:contain}
/* keyboard focus: a two-tone ring inside the slot's edge, 2px white then 2px black, so one of the two
   stands out against any colour a creative has there (the slot clips anything drawn outside it) */
.danbo-slot a:focus-visible{outline:2px solid var(--white);outline-offset:-2px}
.danbo-slot a:focus-visible img{outline:2px solid var(--ink);outline-offset:-4px}
.adl{font-size:10px;text-align:center}
/* between the phone slot and the full 728: the slot scales down to the width it has, 728:90 kept
   (the reference overflows here; a deviation the owner approved on 2026-09-24). The range is exactly the
   widths where the 728px slot and the body's 5px padding cannot fit: above the phone query, below 733px */
@media (min-width:480.02px) and (max-width:732.98px){.danbo-slot{max-width:100%;height:auto;aspect-ratio:728/90}}
@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}}

/* Stage 5: buying an album (media.js): the price form, the thanks line, the buyer's downloads in the first post */
.buyBox { margin: 6px 0 10px; }                         /* the album's buy box, in the post form's look */
.buyBox table.postForm { width: auto; margin: 0; }
.buyBox table.postForm td { padding-top: 3px; padding-bottom: 3px; }
.buyBox table.postForm>tbody>tr>td>input[name=amount] { width: 5em !important; }     /* over the post form's field width (mobile.css: !important) */
.buyBox .buyGo { padding: 3px 16px; font-weight: 700; }
.buyBox .buyNote { margin-top: 4px; font-size: var(--small-size); }
.buyDownloads { margin: 8px 0 4px; }
/* back from the checkout: the confirmation, a window in the Settings window's look over a dimmed page */
.buyDoneBack { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.66); }
.buyDone { position: fixed; left: 50%; top: 50%; z-index: 91; transform: translate(-50%,-50%); box-sizing: border-box; width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 64px); overflow: auto; padding: 12px 16px; color: var(--text); background: var(--card); border: 1px solid var(--card-edge);
  border-right-width: 2px; border-bottom-width: 2px; outline: none; }
.buyDone h3 { margin: 0 0 8px; font-size: 120%; color: var(--subject-ink); }
.buyDone p { margin: 6px 0; }
.buyDone .panelClose { float: right; margin-left: 12px; font-weight: 700; }
.buyDoneRow { padding: 8px 0; border-bottom: 1px solid var(--card-edge); }
.buyDoneRow a { font-weight: 700; }
.buyDoneNote { font-size: var(--small-size); }
.buyDoneLink { display: flex; gap: 6px; }
.buyDoneLink input { flex: 1 1 auto; min-width: 0; }
.albumLinks { margin: 4px 0 2px; }
/* /listen/: the album player bar (media.js), pinned to the bottom, drawn with the board's own colours (both styles) and its
   phone buttons' look; on an album's page it is there from the start */
.albumBar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:14px;box-sizing:border-box;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--card);border-top:2px solid var(--link);box-shadow:0 -6px 18px rgba(0,0,0,.4);color:var(--text)}
.albumBar[hidden]{display:none}
body.hasAlbumBar{padding-bottom:112px}
.albumBar audio{display:none}
.albumBarCover{width:64px;height:64px;object-fit:cover;flex:none;border:1px solid var(--card-edge)}
.albumBarText{flex:1;min-width:0}
.albumBarTitles{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.albumBar .subject{font-weight:700;font-size:118%;color:var(--subject-ink)}
.albumBarAlbum{opacity:.75}
.albumBarLine{display:flex;align-items:center;gap:10px;margin-top:6px;font-variant-numeric:tabular-nums}
.albumBarProgress{flex:1;height:8px;border-radius:4px;position:relative;cursor:pointer;background:var(--card-edge)}
.albumBarProgress:focus{outline:1px dotted var(--link)}
.albumBarFill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;background:var(--link)}
.albumBarIdleNote{display:none;margin-top:4px;opacity:.8}
.albumBarIdle .albumBarLine{display:none}
.albumBarIdle .albumBarIdleNote{display:block}
.albumBarControls{flex:none;display:flex;gap:6px;align-items:center}
.albumBarBtn{min-height:40px;padding:6px 14px;font:inherit;font-weight:700;color:var(--link);background:var(--card);border:1px solid var(--card-edge);border-radius:3px;cursor:pointer;white-space:nowrap}
.albumBarBtn[hidden]{display:none}
.albumBarBtn:hover{color:var(--link-hover)}
.albumBarBtn.primary{min-width:96px;color:var(--card);background:var(--link);border-color:var(--link)}
@media(max-width:480px){.albumBar{flex-wrap:wrap;gap:8px 12px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))}.albumBarCover{width:56px;height:56px}.albumBarControls{width:100%;flex-wrap:wrap}.albumBarBtn{flex:1 1 auto;min-height:44px}body.hasAlbumBar{padding-bottom:160px}}
/* /listen/ is set apart where the boards are listed: first (the package config's order) and in holographic colours at
   the board's normal size (owner: bigger was wrong, "it needs to be holographic colors ... like the text"); the
   colours drift slowly unless the reader asks for reduced motion; on the home page it stands on its own line */
div#boardNavDesktop .boardList a[href^="/listen/"],#home .column a[href="/listen/"]{font-weight:700;background-image:repeating-linear-gradient(90deg,#0a6ea8 0,#6a3fd0 .8em,#c0307a 1.6em,#b07a00 2.4em,#0f8a5a 3.2em,#0a6ea8 4em);background-size:4em 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holoText 6s linear infinite}
#home .column a[href="/listen/"]{display:block;margin:0 0 8px;padding:0 0 8px;border-bottom:1px solid var(--card-edge)}
@keyframes holoText{to{background-position:4em 0}}
@media(prefers-reduced-motion:reduce){div#boardNavDesktop .boardList a[href^="/listen/"],#home .column a[href="/listen/"]{animation:none}}